教案《网页设计与制作项目教程》5.docx
- 文档编号:2451752
- 上传时间:2023-05-03
- 格式:DOCX
- 页数:8
- 大小:19.66KB
教案《网页设计与制作项目教程》5.docx
《教案《网页设计与制作项目教程》5.docx》由会员分享,可在线阅读,更多相关《教案《网页设计与制作项目教程》5.docx(8页珍藏版)》请在冰点文库上搜索。
教案《网页设计与制作项目教程》5
XXXX职业技术学院
教案
第5周第1次课
授课时间
授课题目
高效制作更为精致的网页(1/4)
授课方式
理论课(√);实践课( );实习( )
教学时数
2学时
教学目的
教学要求
了解CSS的格式设置
教学重点
教学难点
理解CSS样式表
了解CSS的格式设置
教学方法
教学手段
教学方法:
本课程属于理论与实践结合的专业课程,主要采用任务驱动式、项目任务式、案例分析式、实操等教学方法。
教学手段:
多媒体网络教学或投影演示,师生互动。
教学内容
时间分配
教学进程
1.导入新课:
任务引领一“产品说明书”
任务说明:
网页打开后,将显示“产品说明书”界面
2.讲授新课:
完成过程
1.制作说明书的基础工作
(1)新建一个网页文件,命名为“index.html”;
(2)切换到“Dreamweaver”的“经典”视图,在“常用”快捷栏中单击表格图标(),插入3行1列的表格然后使其居中,并设置表格的宽度为860像素。
2.插入嵌套表格并插入图片文字
(1)在上述表格的第1行嵌入一个1行2列宽度为100%的表格
(2)将光标放在第一个单元格中,再插入网页的logo图标logo.jpg,并在其后面单元格中插入导航图标menu.jpg
(3)在外表格的第二行插入1行2列的表格,在第1列嵌套一个宽度为100%的2行1列的表格,并进行调整
(4)在上面嵌套表格的第一行插入图片dh.jpg,进行调整,在第2列插入图片flower.jpg,设置的位置为所在单元格的顶端
(5)在嵌套表格的第2行插入相应的文字,设置CSS样式。
在CSS样式面板中单击图标(),弹出一个“创建CSS规则”窗口,在“选择器名称”处输入“bt1
单击“确定”按钮后,弹出一个窗口,在“类型”选项下,设置“Color”为“#84665C”
选中网页中要设置的文字,在“属性”面板中首先单击“CSS切换”按钮,在“目标规则”下拉列表中选择“bt1”即可
(6)按照前面的步骤,再新建一个CSS样式,命名为mytext
选中需要设置的文字,在“属性”面板中选择“mytext”即可;
相关知识
1.理解样式表
在当今的网页中,几乎很多网页都使用了CSS样式表,有了CSS的控制,网页便会给人一种赏心悦目的感觉,字体的色彩变化也使主页变得更加生动活泼。
(1)样式表的概念
CSS英文全称“CascadingStyleSheets”,中文全称为“层叠样式表”,更多的人则把它简称为“样式表”,以下简称为“CSS样式”。
它是一组格式设置规则,用于控制Web页面内容的外观,通过使用CSS样式设置页面的格式,可将页面的内容与表示形式分离开。
(2)理解样式表的标记
通常情况下,CSS的描述部分是由三部分组成的,分别是选择器、属性和属性值。
“选择器”相当于调用的标识,“属性”和“属性值”则是说明想要描述的是哪一个属性,该属性的值为多少。
例如:
h1{font-size:
12px;},选择器是h1标签。
将h1字体大小属性定义为12像素,写成font-size:
12px;属性和属性值之间用一个冒号“:
”分开,以一个分号“;”结束,最后别忘记用一对大括号“{}”括起来。
(3)样式表的种类
按照选择器分,CSS最常用的种类有四种:
HTML标签选择器、CLASS类选择器、ID类选择器和伪元素选择器。
①HTML标签选择器
顾名思议,HTML标签选择器是直接将HTML标签作为选择器,可以是p、h1、dl、strong等HTML标签。
所有的CSS样式要围在标签内。
②CLASS类选择器
使用HTML标签的CLASS属性引入CSS中定义的样式规则的名字,称为CLASS类选择器,CLASS属性指定的样式名字必须是以"."开头。
“
--”与“-->”为HTML的注释标记,放置在样式标签内的两端,有利用于提高兼容性,不影响CSS样式的应用效果。
③ID类选择器
ID选择器的使用方法跟class选择器基本相同,不同之处在于ID选择器只能在HTML页面中使用一次,因此其针对性更强(仅将该样式应用到具有相同ID的HTML元素)。
④伪类选择器
伪类和伪元素是两种有意思的选择器,之所以称“伪”,因为它们实际上并不存在于源文档或者文档树中,但是它们又确实可以显示出效果。
CSS中最常用的四个伪类选择器,分别是:
l链接a:
link
l已访问过的链接a:
visited
l鼠标停在上方时a:
hover
l单击鼠标时a:
active。
(4)在哪儿建立样式表
CSS按层次可分为三类:
内联样式表(InlineStyleSheet)、嵌入样式表(InternalStyleSheet)和外部样式表(ExternalStyleSheet)
①内联样式表(InlineStyleSheet)
HTML标签直接使用style属性,称为内联样式(InlineStyleSheet)。
它适用于只需要简单地将一些样式应用于某个独立的元素的情况,不需要另设CSS样式段。
②嵌入样式表(InternalStyleSheet)
嵌入样式是在
标签内添加标签对儿,在标签对内定义需要的样式,作用于整个页面。③外部样式表(ExternalStyleSheet)
顾名思义,外部样式表是个独立文件,一般后缀为.css,文件的MIME类型为text/css。
当某文档需要引用外部样式表时,将外部样式表的链接在
中说明即可。格式1——外联样式表:
它是将