教案《网页设计与制作项目教程》5.docx

教案《网页设计与制作项目教程》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——外联样式表：

它是将