教案《网页设计与制作项目教程》5(DOC 14页).doc

1、X X X X职业技术学院教 案第 5 周 第 1 次课授课时间 授课题目高效制作更为精致的网页（1/4）授课方式理论课（ ）；实践课（ ）；实习（ ）教学时数2学时教学目的教学要求了解CSS的格式设置教学重点教学难点理解CSS样式表了解CSS的格式设置教学方法教学手段教学方法：本课程属于理论与实践结合的专业课程，主要采用任务驱动式、项目任务式、案例分析式、实操等教学方法。教学手段：多媒体网络教学或投影演示，师生互动。教学内容时间分配教学进程1.导入新课：任务引领一 “产品说明书”任务说明： 网页打开后，将显示“产品说明书”界面2.讲授新课：完成过程1.制作说明书的基础工作(1) 新建一个网页

2、文件，命名为“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列插入图片flow

3、er.jpg，设置的位置为所在单元格的顶端(5) 在嵌套表格的第2行插入相应的文字，设置CSS样式。在CSS样式面板中单击图标（ ），弹出一个“创建CSS规则”窗口，在“选择器名称”处输入“bt1 单击“确定”按钮后，弹出一个窗口，在“类型”选项下，设置“Color”为“#84665C” 选中网页中要设置的文字，在“属性”面板中首先单击“CSS切换”按钮 ，在“目标规则”下拉列表中选择“bt1”即可(6) 按照前面的步骤，再新建一个CSS样式，命名为mytext 选中需要设置的文字，在“属性”面板中选择“mytext”即可； 相关知识1.理解样式表在当今的网页中，几乎很多网页都使用了CSS样式

4、表，有了CSS的控制，网页便会给人一种赏心悦目的感觉，字体的色彩变化也使主页变得更加生动活泼。（1）样式表的概念CSS英文全称“Cascading Style Sheets”，中文全称为“层叠样式表”，更多的人则把它简称为“样式表”，以下简称为“CSS样式”。它是一组格式设置规则，用于控制Web页面内容的外观，通过使用CSS样式设置页面的格式，可将页面的内容与表示形式分离开。（2）理解样式表的标记通常情况下，CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值。 “选择器”相当于调用的标识，“属性”和“属性值”则是说明想要描述的是哪一个属性，该属性的值为多少。例如：h1 font-si

5、ze: 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类选择器，

6、CLASS属性指定的样式名字必须是以.开头。“”为HTML的注释标记，放置在样式标签内的两端，有利用于提高兼容性，不影响CSS样式的应用效果。 ID类选择器ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性更强（仅将该样式应用到具有相同ID的HTML元素）。 伪类选择器伪类和伪元素是两种有意思的选择器，之所以称“伪”，因为它们实际上并不存在于源文档或者文档树中，但是它们又确实可以显示出效果。CSS中最常用的四个伪类选择器，分别是：l链接 a:link l已访问过的链接 a:visitedl鼠标停在上方时 a:hoverl单击鼠标时

7、a : active。 （4）在哪儿建立样式表CSS按层次可分为三类：内联样式表（Inline Style Sheet）、嵌入样式表（Internal Style Sheet）和外部样式表（External Style Sheet） 内联样式表（Inline Style Sheet）HTML标签直接使用style属性，称为内联样式（Inline Style Sheet）。它适用于只需要简单地将一些样式应用于某个独立的元素的情况，不需要另设CSS样式段。 嵌入样式表（Internal Style Sheet）嵌入样式是在标签内添加标签对儿，在标签对内定义需要的样式，作用于整个页面。 外部样式表

8、(External Style Sheet)顾名思义，外部样式表是个独立文件，一般后缀为.css，文件的MIME类型为text/css。当某文档需要引用外部样式表时，将外部样式表的链接在中说明即可。格式1外联样式表：它是将标签内的样式语句定义在扩展名为.css的文件中，通过使用标签引入样式文件。 属性rel用来说明元素在这里要完成的任务是连接一个独立的CSS文件，而href属性给出了所要连接CSS文件的URL地址。格式2导入样式表：它是使用CSS的import命令将一个外部样式文件输入到另外一个样式文件中，被输入的样式文件中的样式规则定义语句就成了输入到的样式文件中的一部分。关于引入CSS的方

9、式，外联样式表和导入样式表都是推荐的使用方式，因为它们具有以下优点：l多个HTML文档可以共享同一个样式表；l修改样式表文件的时候不用打开HTML文档。使用import与link的区别：经常浏览网页会发现只有极少部分网站使用的是 import，而多数网站都是使用link 外联样式表。虽然本质上这两种方法的作用都是引入 CSS 文件作用相同，但这两种方法具体还是有一些区别的：服务提供：其中 link是属于XHTML标签，link标签除了可以加载CSS以外，还可以实现其他功能，如定义RSS定义，rel 连接属性等等；而import则是CSS提供的一种引入方式，使用import只能加载CSS样式表，

10、但import语法可直接在 CSS 文件内使用；加载顺序：当一个页面被加载（浏览）的时候，link引用的CSS会同时被加载，而import引用的CSS会等到页面全部被下载完成后再被加载。所以有时候浏览使用import 加载CSS的页面时开始会没有样式或闪烁，网速慢的时候则会相当明显；兼容区别：即兼容性的差别，由于import是CSS2.1 提出的，所以老式浏览器均不支持，只有在IE5以上的浏览器才能识别，而link标签无此问题；文档模型：即文档对象模型，在使用文档对象模型（DOM）控制样式时，如使用JavaScript控制DOM去改变网页样式的时候，将只对link标签引入的CSS样式生效，因为

11、import不是DOM可以控制的。 局部特定样式表和用来为内容指定样式或绑定脚本。虽然大多数HTML元素可以通过style属性来设置样式信息，但是许多HTML元素有自己默认的样式，该样式可能和style定义的样式混合甚至冲突，可能是之前没有意料到的。如：我本来可是粗体哦!。标签本就是用于加粗控制，与style = “color: red”结合后显示为又红又粗的一段文字。和其他html元素不同，和没有默认的显示样式。所以可以通过它们来指定样式。（1）（division）是块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。由于是块级元素，在段落开始、结束处会插入一个换行。用来设置内容

12、块的位置。可以使用来为文档的任意部分绑定脚本或样式。（2）是一个行内元素，和不同，不会引起换行。它是一个逻辑化的内嵌分组元素。最常见的使用方式是用它来为一段文本中的几个单词甚至某几个字符指定样式。 和 的区别在于，div(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而span 是行内元素，span的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用span。（5）在Dreamweaver 中制作样式表的方法打开CSS样式面板添加CSS样式。选择“窗口”菜单下“CSS样式”命令即可单击新建图标，就会弹出一个窗口，按照

13、前面讲解的就可以添加你想要的CSS样式了。最后，根据选择器类型的不同，具体应用CSS样式即可。3.巩固练习： 依据所学自由制作应用CSS的网页4.归纳小结：CSS样式表的作用和种类5分钟65分钟20分钟10分钟使用的参考资料1. HTML+CSS+JavaScript网页设计从入门到精通，胡晓霞，清华大学出版社，2017.102. Dreamweaver CS6+ASP动态网站开发完全学习手册，刘贵国，清华大学出版社，2014.73. 因特网WEB 开发者资源，包括较全面的教程、完善的参考手册以及庞大的代码库4. http:/ 教材支持网站，提供教学文件及素材下载、案例演示，同时为师生提供免费

14、网页空间作业课后小结教研室主任意见 签字: 年 月 日 在授课结束后将教案交到教研室存档 任课教师签字：X X X X职业技术学院教 案第 5 周 第 2 次课授课时间 授课题目高效制作更为精致的网页（2/4）授课方式理论课（ ）；实践课（ ）；实习（ ）教学时数2学时教学目的教学要求了解CSS的格式设置，掌握CSS样式表的具体应用， 并能够用它美化网页；教学重点教学难点改变文字属性修改行间距修改链接的显示网络制作列表图标固定背景图像的位置教学方法教学手段教学方法：本课程属于理论与实践结合的专业课程，主要采用任务驱动式、项目任务式、案例分析式、实操等教学方法。教学手段：多媒体网络教学或投影演示

15、，师生互动。教学内容时间分配教学进程1.导入新课：复习上节课内容，导入新课。2.讲授新课： 2.利用用户自定义样式表改变文字属性（1）用户自定义文本属性的type选项组打开网页，在“样式表”面板中单击新建图标（ ），弹出“新建CSS规则”对话框，设置样式的名称为“ziti”，在“选择器类型”中选择“类（可应用与任何HTML元素）”，在“规则定义”中选择“仅限该文档” 在选项“类型”中设置“Font-size”字体大小为“12px”，“Line-heigh”行高为“20px”，“Color”颜色为“#903” 选中网页中的文字，在“属性”面板“目标规则”中选择“ziti”样式（2）根据自定义的文

16、字属性一并修改文章段落打开网页，在“样式表”面板中单击新建图标，弹出“新建CSS规则”对话框，设置样式的名称为“wz”，在“选择器类型”中选择“类（可应用与任何HTML元素）”，在“规则定义”中选择“仅限该文档”。在选项“类型”中设置“Font-size”字体大小为“12px”，“Line-height”行高为“20px”，在“区块”中设置“Text-indent”文字缩进为“2ems” 单击“确定”按钮，选中文字，在“属性”面板上选择“wz”样式即可。3.利用用户自定义样式表修改行间距打开网页，在“样式表”面板中单击新建图标，弹出“新建CSS规则”对话框，设置样式的名称为“hg”，在“选择器

17、类型”中选择“类（可应用与任何HTML元素）”，在“规则定义”中选择“仅限该文档”。在选项“类型”中设置“Font-size”字体大小为“12px”，“Line-height”行高为“25px” 选中网页中的文字，在“属性”面板“目标规则”中选择“hg”即可。4.利用有关链接的样式表修改链接的格式默认情况下，在网页中的文本建立超级链接后，文字就会变成蓝色，同时出现下划线。如果不喜欢下划线的蓝色文本，就可以利用相关链接的CSS样式表来取消建立链接的文本下划线，并且还可以根据鼠标的移动来设置不同的文本格式。（1）取消建立链接的文本下划线打开带有超级链接的网页，在“样式表”面板中单击新建图标，弹出“

18、新建CSS规则”对话框，在“选择器类型”中选择“标签（重新定义HTML元素）”，在“选择器名称”中选择“a”，在“规则定义”中选择“仅限该文档” 在选项“类型”中设置“Text-decoration”为“none”，“Color”为“#093”，“Font-style”为“italic” 单击“确定”，链接的文字就自动应用样式了（2）在鼠标悬放超链接时改变链接颜色接着上面的操作继续，新建CSS样式，在“选择器类型”中选择“复合内容（基于选择的内容）”，在“选择器名称”中选择“a：hover”，在“规则定义”中选择“仅限该文档” 在选项“类型”中设置“Color”为“#F00”单击“确定”就可以

19、了5.利用用户自定义样式表制作图标（1）设置列表项目格式的list选项组打开一个带有列表的网页，在“样式表”面板中单击新建图标（ ），弹出“新建CSS规则”对话框，在“选择器类型”中选择“类（可应用于任何HTML元素）”，在“选择器名称”中输入“list”，在“规则定义”中选择“仅限该文档”。单击“确定”按钮后，弹出“.list的CSS规则定义”对话框，在选项“列表”中设置List-style-type为“upper-roman” 设置好CSS后，在选择器标签中选择标签，然后在“属性”面板，“目标规则”中选择“list” （2）利用漂亮图标编排列表项目重新编辑.list的CSS规则。在“CSS

20、样式”面板中，选择.list规则，单击“编辑样式”（ ）按钮，弹出“.list的CSS规则定义”对话框，在“列表”项中，设置“List-style-type”为“none”，设置“List-style-image”为设置的图片，如图6-28所示。单击“确定”按钮后，网页文档就发生了编号6.利用用户自定义样式表固定背景图像的位置（1）利用样式表设置背景图像打开一个网页，新建CSS样式，在“选择器类型”中选择“标签（重新定义HTML元素）”，在“选择器名称”中选择“body：hover”，在“规则定义”中选择“仅限该文档”，选择“背景”选项，设置“Background-image”为需要的图片即可

21、。（2）在指定位置只显示一张背景图像接着前面的操作，在“CSS样式”面板中，选择body规则，单击“编辑样式”按钮（ ），设置“Background-repeat”为“no-repeat”，设置“Background-position（X）”为“center”，设置“Background-position（Y）”为“center”，如图6-30所示。在浏览器中预览网页效果，可以发现，背景图像在指定位置只显示一张不重复的图像。（3）固定背景图像，不让它滚动继续前面的操作，在“CSS样式”面板中，选择body规则，单击“编辑样式”）按钮（ ，设置“Background-attachment”为“f

22、ixed”，在浏览器中预览网页效果，就会发现背景图像不滚动了。3.巩固练习： 依据所学自由制作网页4.归纳小结：CSS样式表的种类的应用方式5分钟65分钟20分钟10分钟使用的参考资料1. HTML+CSS+JavaScript网页设计从入门到精通，胡晓霞，清华大学出版社，2017.102. Dreamweaver CS6+ASP动态网站开发完全学习手册，刘贵国，清华大学出版社，2014.73. 因特网WEB 开发者资源，包括较全面的教程、完善的参考手册以及庞大的代码库4. http:/ 教材支持网站，提供教学文件及素材下载、案例演示，同时为师生提供免费网页空间作业课后小结教研室主任意见 签字

23、: 年 月 日 在授课结束后将教案交到教研室存档 任课教师签字：X X X X职业技术学院教 案第 5 周 第 3 次课授课时间 授课题目高效制作更为精致的网页（3/4）授课方式理论课（ ）；实践课（ ）；实习（ ）教学时数2学时教学目的教学要求了解模板和库的概念，掌握模板和库的具体应用。教学重点教学难点1.运用保存素材的库2.运用保存在库中的项目3.利用模板功能批量制作网页教学方法教学手段教学方法：本课程属于理论与实践结合的专业课程，主要采用任务驱动式、项目任务式、案例分析式、实操等教学方法。教学手段：多媒体网络教学或投影演示，师生互动。教学内容时间分配教学进程1.导入新课：任务引领二 “散

24、文集”任务说明： 网页打开后，将显示“散文集”界面2.讲授新课：完成过程1. 制作散文集的基础工作(1) 新建一个网页文件，命名为“index.html”，选择“修改”“页面属性”菜单，设置字体为14px，颜色为#999；(2)切换到“Dreamweaver”的“经典”视图，在“常用”快捷栏中单击表格图标，插入3行1列的表格然后使其居中。2. 制作库项目(1) 选择“窗口”“资源”菜单，展开“资源”面板，并单击“库”按钮，在“资源”面板底部单击“新建库项目”按钮（ ），命名为“logo”，单击“编辑”按钮(2) 在“logo”库项目文档中，插入一个2行1列的表格，表格宽度设为860像素，然后在

25、对应的单元格中分别插入“logo.jpg”和“menu.jpg”图片(3) 按照前面制作方法，继续建库项目，命名为“bottom” 3. 插入库项目并插入图片文字(1) 把光标放在主页文件表格的第一行，在“资源”面板中选中“logo”库项目，单击“插入”按钮即可(2) 把光标放在主页文件表格的最后一行，在“资源”面板中选中“bottom”库项目，单击“插入”按钮即可；(3) 在主页文件表格的第二行，插入对应的图片“path.jpg”，并输入文字进行设置，主页就制作完成了。相关知识Dreamweaver提供了模板和库，使用它们能够批量生成风格类似的网页，还能实现关联网页自动更新，大大简化了网页制

26、作。1.运用保存素材的库库是一种用来存储想要在整个网站上经常重复使用或更新的页面元素的方法，这些元素称为库项目，可以在库中存储各种各样的页面元素，如图像、表格、声音和flash文件等。使用库，就不必频繁地改动网站，可以通过改动库更新所有采用库的网页，不用一个一个的修改网页元素或者重新制作网页。2.运用保存在库中的项目（1）利用保存在库中的项目编辑网页文档前面任务二中已经详细讲述了库项目的建立过程，这里就不详细说明了。（2）修改登录到库中的项目首先，选择“窗口”“资源”菜单，打开“资源”面板，选择面板左侧的“库”类别。单击库项目面板中的“logo”，这时库项目的预览出现在“资源”面板的顶部。双击

27、库项目或者单击“资源”面板底部的“编辑”按钮，这时就会打开一个标题为“logo.lbi”的编辑库项目的窗口然后，对库项目进行编辑，把logo图片换成另外一张图片，保存库项目时会弹出“更新库项目”对话框， “更新库项目”对话框中列出了使用该库项目的所有文件，可以单击“更新”按钮更新使用该项目的所有文档。更新完成后弹出“更新页面”对话框如果在“更新库项目”对话框中单击“不更新”按钮，那么文档将保持与库项目的关联，可以在以后需要更新时选择“修改”“库”“更新当前页”菜单，或选择“更新页面”进行更改。3.利用模板功能批量制作网页当需要制作大量布局基本一致的网页时，使用模板是最好的方法。（1）制作模板文

28、档，设置可编辑区域选择“文件”“新建”菜单，选择“空模板”类别下的“HTML模板”选择“文件”“保存菜单，保存模板，此时会弹出一个对话框。选好对应的站点，最后命名。模板保存后可以在站点文件夹的“Templates”子文件夹下找到刚才做好的模板，扩展名为.dwt。 然后像编辑普通网页一样在模板上插入一个3行1列的表格，表格的宽度设为860像素，并且居中。在第一行插入一个2行1列的嵌套表格，插入对应的图片“logo.jpg”和“menu.jpg”；在最后一行插入“bottom.jpg”。最后，选中要插入可编辑区域的单元格，单击“常用”快捷栏的“模板”按钮，在弹出的菜单中选择“可编辑区域”命令， 或

29、者选择菜单“插入”“模板对象”“可编辑区域”，作用相同。弹出“新建可编辑区域”对话框，在“名称”文本框中输入“content”，单击“确定”按钮即可（2）利用已制作好的模板文档新建网页文档选择“文件”“新建”菜单，弹出“新建文档”对话框，单击“创建”按钮就可以了。（3）修改模板文档打开“资源”面板，单击“模板”按钮，选中“index”模板，双击就可以修改模板页面了，如图6-47所示。修改保存后，会弹出一个“更新模板文件”对话框，单击“更新”按钮即自动将所有由此模板创建的网页自动更新为新模板的样式。以后还可根据需要，选择 “修改”“模板”菜单下的“更新当前页”或者“更新页面”选项来手动更新某网页

30、。也可右击“资源”面板中的模板，选择“应用”命令，将当前编辑的网页文档应用为模板创建的形式。3.巩固练习： 依据所学自由制作网页4.归纳小结：模板与库的作用，使用方式5分钟65分钟20分钟10分钟使用的参考资料1. HTML+CSS+JavaScript网页设计从入门到精通，胡晓霞，清华大学出版社，2017.102. Dreamweaver CS6+ASP动态网站开发完全学习手册，刘贵国，清华大学出版社，2014.73. 因特网WEB 开发者资源，包括较全面的教程、完善的参考手册以及庞大的代码库4. http:/ 教材支持网站，提供教学文件及素材下载、案例演示，同时为师生提供免费网页空间作业课后小结教研室主任意见 签字: 年 月 日 在授课结束后将教案交到教研室存档 任课教师签字：14