网页设计制作模板-《网页设计与制作》全套教案.docx 133页

不同的是，div（划分）是块级元素，可以包含段落、标题、表格，甚至章节、摘要、注释等。Span 是内联元素。 span 前后不会有换行符。 它没有结构意义，纯粹用于应用样式。 当其他内联元素不合适时网页设计制作模板，可以使用span。 (5) 要在 Dreamweaver 中创建样式表，请打开 CSS 样式面板并添加 CSS 样式。 选择“窗口”菜单下的“CSS样式”命令，然后单击新图标。 将会弹出一个窗口。 你可以根据前面的说明添加你想要的CSS样式。 最后，根据选择器类型，专门应用 CSS 样式即可。 3. 巩固练习：根据所学知识，自由地使用 CSS 创建网页 4. 总结：CSS 样式表的功能和类型 5 分钟 65 分钟 20 分钟 10 分钟 使用参考资料 1. 《HTML+CSS+JavaScript 网页设计》从头开始《到大师》，胡晓霞，清华大学出版社，2017.102。《Dreamweaver CS6+ASP动态网站开发完全学习手册》吉祥物设计，刘贵国，清华大学出版社，2014.73。互联网WEB开发者资源，包括比较全面的教程和完整的参考文献 手册和庞大的代码库 4. http://教材支持网站，为师生提供教学文件和资料下载、案例演示、免费网络空间作业、课后总结、主任意见签名教研室：年、月、日下课后发送教案送教研室存档并由老师签字：XXXX职业技术学院教案第五周第二课堂教学时间、教学主题、高效打造更精美的网页（2/4）教学方法、理论课（√）； 实践课（）； 实习（ ） 教学时数 2 小时 教学目的 教学要求 要求了解CSS的格式设置，掌握CSS样式表的具体应用，并能够利用它来美化网页； 教学重点与难点、改变文字属性、修改行距、修改链接显示、网络制作列表 图标位置 固定背景图片 教学方法 教学方法 教学方法：本课程是理论与实践相结合的专业课程。 主要采用任务驱动、项目式、案例分析、实践等教学方法。

教学方式：多媒体在线教学或投影演示、师生互动。 教学内容、时间分配、教学过程 1、新课引入：复习上一课的内容，引入新课。 2. 讲授新课程： 2. 使用自定义样式表更改文本属性 (1) 在自定义文本属性的类型选项组中打开网页，单击“样式表”面板中的新建图标（ ） ，弹出“新建CSS”，在“规则”对话框中，设置样式名称为“ziti”，在“选择器类型”中选择“类（可应用于任何HTML元素）”，选择“仅此文档”中“选项”中的“规则定义”中的“类型”中，将“Font-size”字体大小设置为“12px”，将“Line-heigh”行高设置为“20px”，将“Color ”颜色改为“#903”。在网页中选择文本，在“属性”面板中选择“目标”。在“规则”中选择“ziti”样式 （2）根据自定义的文本属性修改文章段落打开网页，点击“样式表”面板中的新建图标，弹出“新建CSS规则”对话框，设置样式的名称，“wz”选择“Class（可应用） “选择器类型”中的“任何 HTML 元素）”和“规则定义”中的“仅限本文档”。 在“Type”选项中，将“Font-size”字体大小设置为“12px”，“Line-height”行高设置为“20px”卡通人物，在“Block”中将“Text-indent”文本缩进设置为“2ems” 单击“确定”按钮网页设计制作模板，选择文本，然后在“属性”面板上选择“wz”样式。

3. 使用用户自定义样式表修改行距。 打开网页，点击“样式表”面板中的新建图标，会弹出“新建CSS规则”对话框，将样式名称设置为“hg”，点击“选择器类型”选择“Class（可以应用于任何 HTML 元素）”中的“规则定义”并选择“仅应用于此文档”。 在“Type”选项中，将“Font-size”字体大小设置为“12px”，将“Line-height”行高设置为“25px”。 选择网页中的文本，在“属性”面板的“目标规则”中选择“hg”。 就是这样。 4. 使用链接样式表修改链接格式。 默认情况下，网页文本中建立超链接后，文本会变成蓝色并带有下划线。 如果您不喜欢带下划线的蓝色文本，可以使用相关链接的CSS样式表去除链接文本的下划线，还可以根据鼠标的移动设置不同的文本格式。 (1)取消建立链接的文字下划线。 打开带有超链接的网页。 单击“样式表”面板中的新建图标，弹出“新建CSS规则”对话框。 选择“标签（重新定义HTML元素）”，在“选择器名称”中选择“a”，在“规则定义”中选择“仅此文档”，在“类型”选项中将“文本装饰”设置为“无” ，“颜色”为“#093”，“字体样式”为“斜体”。点击“确定”，该样式将自动应用到链接的文本中。 (2) 更改链接颜色鼠标悬停在超链接上，继续上面的操作，新建一个CSS样式，在“选择器类型”中选择“复合内容（基于所选内容）”，在“选择器名称”中选择“a:hover”，选择“仅此文档”中的“规则定义”中的“类型”选项中，将“颜色”设置为“#F00”，然后单击“确定”。 5、使用用户自定义样式表制作图标 (1) 设置列表列表选项组中的项目格式打开带有列表的网页，单击“样式表”面板中的新建图标（ ），会弹出“新建 CSS 规则”对话框，选择“类（可应用于在“选择器类型”中输入“list”，选择“仅此文档”。单击“确定”按钮后，“.list 的 CSS 规则定义” ” 弹出对话框。 在选项“List”中，将List-style-type 设置为“upper-roman”。 设置CSS后，在选择器标签中选择