电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目八.docx

在它里面可以内嵌表格（table）、文本（text）等其他XHTML代码。

其中所包含的元素特性由Div标签的属性来控制，或使用样式表格式化这个块来控制。

XHTML中可以作为容器的标签有很多，相比之下，Div除了可以作为容器，还具有一个特有的优点，即不带有任何原始属性。

例如，P标签为段落属性，使用它作为容器就会导致放入P标签的内容与前后段落之间出现一个空行的间隔，而用Div就不会出现这种情况，上图所示为使用Div作为容器的效果，下图所示为使用P标签作为容器的效果。

可以很明显地看出，P标签内的内容与上下行之间产生一个空行的间距。

（四）Div+CSS布局的优缺点

1.优点

（1）CSS的优势体现在它简洁的代码上。

对于一个大型网站来说，可以节省大

量带宽。

而简洁的代码使得有效关键字在网页总代码中所占的比例提高，因此使用“Div+CSS”制作的符合Web标准的网站具有容易被搜索引擎搜索到的优势。

（2）使用“Div+CSS”技术制作的网站改版更加方便简单，很多问题只需要改变CSS而不需要改动程序。

（3）可以一次设计，多处发布。

设计的作品不仅可以用于Web浏览器，还可以发布在其他设备或软件上，如PowerPoint。

（4）可以更好、更轻松地控制网页布局。

（5）将设计部分剥离出来，放在一个单独的样式表文件中，可以减少网页无效的可能性。

（6）布局灵活性大。

相比较而言，传统的表格布局只能遵循table、tr、td的格式，而Div可以遵循div、ul（无序列表）、li（列表内容）格式，也可以遵循ol（有序列表）、li格式，还可以遵循ul、li……格式，不过最好有序书写。

（7）如果对JavaScript比较精通，可以不必去写ID，而用class就可以了。

当客户端程序员写完程序后需要调整时，可以再利用它的ID进行控制。

（8）代码更简洁。

在使用表格布局时，往往会生成很多垃圾代码，修饰性的样式和布局代码混合在一起，很不直观。

（9）以前一些必须通过图片转换才能实现的功能，现在只用CSS就可以轻松实现，从而加快了网页的下载速度。

2.缺点

尽管“Div+CSS”技术具有一定的优势，不过其存在的问题也比较明显，主要表现在以下几个方面：

●对于CSS的高度依赖，使得网页设计变得比较复杂。

●CSS文件异常将会影响整个网站的正常显示。

●对于用“Div+CSS”技术制作的网站，非常容易出现浏览器兼容性问题。

●“Div+CSS”技术对搜索引擎优化与否，取决于网页设计者的专业水平而不是Div+CSS技术本身。

（五）绝对定位与相对定位

1.绝对定位

绝对定位在CSS中的写法是“position：

absolute；”。

其表达的意思是参照浏览器的左上角，配合top、right、bottom、left（上、右、下、左）值来定位元素，如下CSS代码：

#lay{

position：

absolute；

left：

5px；

top：

5px；}

它表示应用#lay样式的对象为绝对定位模式，它将永远距离浏览器窗口左边框5px，上边框5px。

2.相对定位

相对定位在CSS中的写法是“position：

relative；”。

其表达的意思是以父级（它所在的容器）的坐标原点为坐标原点。

无父级则以body的坐标原点为坐标原点，配合上、右、下、左（TRBL）进行定位，当父级内有padding等CSS属性时，当前级的坐标原点则参照父级内容区的坐标原点进行定位。

有时还要使用“z.index”属性来设定容器的上下关系，数值范围是自然数，数值越大，容器位置越靠上。

但是需要注意的是，父子关系是无法用“z.index”属性来设定上下关系的，一定是子级在上，父级在下。

（六）浮动定位

浮动定位在CSS中用“float”属性来表示。

当“float”值为“Bone”时，表示对象不浮动；为“left”时，表示对象向左浮动；为“right”时，表示对象向右浮动。

如果使用浮动定位方式，为Div中的所有列都加上“float：

left”属性，那么它们会挨个向左排列。

如果让一个元素浮动，它会往右或者往左浮动直至遇到容器的边缘。

如果向同一方向再浮动一个元素，它会浮动直至碰到前一个浮动元素的边缘。

（七）插入Div标签

Div标签与表格、图像等网页对象的插入方法类似，所不同的是，在插入Div标签的同时可以为其设置样式。

步骤1 首先在文档页面上要插入Div标签的位置单击，以确定插入点位置。

步骤2 将“常用”插入栏切换至“布局”插入栏，并单击其中的“插入Div标签”按钮，打开“插入Div标签”对话框。

设置各项参数后，单击“确定”按钮，即可在插入点所在位置插入Div标签。

【任务实施】

在学习了“Div+CSS”技术的相关知识后，下面通过制作一个使用“Div+CSS”技术制作的茶文化网站来学习其在实际网页制作中的应用。

（一）制作网站首页

1.制作网页上部

步骤1 将本项目素材中的“tea”文件夹拷贝至本地磁盘，然后在Dreamweaver中定义站点“tea”。

步骤2 在站点“tea”中新建文档并重命名为“index.html”。

步骤3 在“文件”面板中双击打开新建的文档，在文档编辑窗口中定位插入

点，然后将“插入”栏切换至“布局”栏，并单击其中的“插入Div标签”按钮。

步骤4 打开“插入Div标签”对话框，在“ID”编辑框中输入ID名（此处为“top”），然后单击“新建CSS样式”按钮。

步骤5 打开“新建CSS规则”对话框，选择器类型默认为“高级”，选择器名为“#top”，在“定义在”列表区选择“新建样式表文件”，然后单击“确定”按钮。

步骤6 打开“保存样式表文件为”对话框，在“保存在”下拉列表中选择网站根文件夹，在文件名编辑框中输入文件名（此处为“s1”），然后单击“保存”按钮。

步骤7 打开“#top的CSS规则定义”对话框，在左侧的“分类”列表中选择“方框”，设置“宽”为“1000”像素，然后单击“确定”按钮。

步骤8 回到“插入Div标签”对话框，单击“确定”按钮，插入Div标签。

切换至“常用”插入栏，单击“图像”按钮。

步骤9 打开“选择图像源文件”对话框，在“查找范围”下拉列表中选择图像所在文件夹（此处为网站根文件夹下的“images”文件夹），在文件列表中选择图像文件“main_01.jpg”，然后单击“确定”按钮。

步骤10 插入图像，并将其上方的文本删除，效果如图所示。

步骤11 单击图像，然后按向右方向键，将插入点置于图像后，参照前面的方法插入其余图片，效果如图所示。

2.制作网页中部

步骤1 接着上面的操作，为确保Div位置的准确性，单击“文档”工具栏中的“拆分”按钮，在文档窗口上方打开代码视图，对照代码进行后面的操作。

步骤2 首先将插入点定位在前面插入的ID为top的Div内，然后单击“标签选择器”中的“div#top”，选中整个Div。

步骤3 按键盘上的向右方向键，将插入点置于Div后，然后单击“布局”插入栏中的“插入Div标签”按钮，如图所示。

步骤4 打开“插入Div标签”对话框，在“ID”编辑框中输入ID名“content”，然后单击“新建CSS样式”按钮。

步骤5 打开“新建CSS规则”对话框，“选择器类型”默认为“高级”，选择器名为“#content”，在“定义在”列表区选择“s1.css”，然后单击“确定”按钮。

步骤6 打开“#content的CSS规则定义”对话框，在“分类”列表中选择“背景”，然后设置背景颜色为白色“#FFFFFF”。

步骤7 在“分类”列表中选择“方框”，设置“宽”为1000像素，“高”为140像素，然后单击“确定”按钮，插入ID为“content”的Div。

步骤8 参照前面的方法，对照代码将插入点置于Div内，在其中嵌套一个ID为“news”的Div，并打开“#news的CSS规则定义”对话框。

步骤9 在“分类”列表中选择“方框”，设置“宽”为362像素，“浮动”为左对齐，然后单击“确定”按钮。

步骤10 在ID为“news”的Div中插入图像“main_05.jpg”，并将其中的文本删除。

步骤11 对照代码将插入点置于图片后方，然后单击“插入Div标签”按钮，在ID为“news”的Div中嵌套一个ID为“newscontent”的Div，并打开“#newscontent的CSS规则定义”对话框。

设置“字体”为宋体，“大小”为12像素，“行高”为20像素，颜色为灰色“#999999”。

步骤12 在“分类”列表中选择“区块”，然后在“文本对齐”下拉列表中选择“左对齐”。

步骤13 在“分类”列表中选择“方框”，然后设置“宽”为362像素。

步骤14 在“分类”列表中选择“列表”，然后设置“类型”为“方块”，“位置”为“外”，最后单击“确定”按钮。

步骤15 将ID为“newscontent”的Div中文本删除后输入新文本，并将这些文本分为不同的段落。

之后选中文本，单击“属性”面板上的“项目列表”按钮，Div中的文本将应用前面设置的列表样式。

步骤16 对照代码将插入点置于ID为“news”的Div后，继续在ID为“content”的Div中嵌套一个ID为“center”的Div，并打开“＃center的CSS规则定义”对话框。

在“分类”列表中选择“方框”，设置“宽”为315像素，“浮动”为左对齐。

步骤17 在ID为“center”的Div中插入图像“main_06.jpg”，并将其中的文本删除。

步骤18 将插入点置于ID为“center”的Div后，继续嵌套ID为“right”的Div，并打开“#right的CSS规则定义”对话框。

在“分类”列表中选择“方框”，设置“浮动”为“左对齐”，取消选择“填充”区域的“全部相同”复选框，设置“上”为22像素，“左”为19像素，之后单击“确定”按钮。

步骤19 在ID为“right”的Div中插入图像“main_09.jpg”，这样网页中部就制作完成了。

3.制作网页下部

网页下部的制作相对来说要简单很多，因为只需要插入一个Div，并在其中输入文本即可。

步骤1 接着上面的操作，对照代码将插入点置于ID为“content”的Div后，插入ID为“bottom”的Div，并打开“#bottom的CSS规则定义”对话框，设置“大小”为12像素，“颜色”为灰色“#999999”。

步骤2 在“分类”列表中选择“背景”，设置“背景颜色”为浅灰色“#EEEEEE”。

步骤3 在“分类”列表中选择“区块”，然后在“文本对齐”下拉列表中选择“居中”。

步骤4 在“分类”列表中选择“方框”，然后设置“宽”为1000像素，“高”为30像素，取消选择“填充”区的“全部相同”复选框，设置“上”为10像素，最后单击“确定”按钮。

步骤5 将ID为“bottom”的Div中的原有文本删除，重新输入新文本，可见其自动套用了前面设置的样式。

步骤6 分别保存网页文档和样式文件，然后在浏览器中预览文档，可以看到网页四周均有空白，且下方出现了滚动条。

4.设置“body”样式

下面通过设置“body”样式，来解决网页四周的空白和滚动条问题。

步骤1 单击“CSS样式”面板下方的“新建CSS规则”按钮，打开“新建CSS”

对话框，在“选择器类型”区选择“标签”，在“标签”下拉列表中选择“body”，在定义在”列表区选择“s1.css”，然后单击“确定”按钮。

步骤2 打开“body的CSS规则定义”对话框，在左侧的“分类”列表中选择“区块”，然后在“文本对齐”下拉列表中选择“居中”，以使所有内容居中对齐。

步骤3 在左侧的“分类”列表中选择“方框”，设置“边界”值为0，然后单击确定”按钮。

步骤4 分别保存网页文档和样式文件，然后在浏览器中预览文档，可以看到网页左侧和上方的空白，以及下方的滚动条均已消失。

【任务实施】

接下来，请同学们参考首页制作步骤，完成网站子页。

包含以下几个步骤：

1.制作网页上部

2.制作网页中部

3.制作网页下部

效果图：

【知识拓展】初学Web标准的几个误区

初次接触Web标准的用户可能会受表格布局或其他一些问题的影响，常见问题及解决建议如下：

1.不要用传统的表格思维来套div

用惯了表格的用户可能会觉得，CSS布局就是将原来用table的地方用div来代替，原来是table嵌套，现在是div嵌套。

这种观点是错误的。

应该跳出表格布局的禁锢，抛弃一个td接一个td放置内容的思维方式。

按前文所述，Web标准的目的是将内容和表现完全分离。

即在加入表现之前，页面里有的仅仅是内容，在没有修饰的情况下，它就是一张有一些文字和图像（图像是指内容中的图像，是有真正意义的图像，而非修饰性的图像）的简单页面，这些文字和图像仅仅是依次罗列下来，只有结构，没有任何样式。

当加入表现，将所有修饰的图像作为背景，用CSS来定义每一块内容的位置、字体、颜色等时，才构成了一个完整的页面。

这样制作的页面才是内容与表现完全分离的，即抽掉CSS文件，剩下的就只是干净的内容。

2.不必为每块内容都创建一个id

内容都是有结构的，相同结构的内容可以用同一个样式来定义，如相同级别的标题、正文、图像等。

对于多次引用的样式可以用class来定义，不需要全部用id；另外，也不是说只能用div布局，在需要的时候，完全可以用p来代替。

至于仅仅为了行高、间距，或者一个修饰性图像而增加的div，随着大家对CSS应用的熟练和理解，很快就会知道这是没有必要的。

希望大家多研究CSS，做出最简练、最有效的样式表。

作业：

1．Web标准由哪几部分构成？

2．简述绝对定位与相对定位的含义？

3．Div标签中，“类”与“ID”有何区别？