Dreamweaver网页设计与制作项目八.docx

《Dreamweaver网页设计与制作项目八.docx》由会员分享，可在线阅读，更多相关《Dreamweaver网页设计与制作项目八.docx（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、课程教案授课内容项目八 制作茶文化网站应用Div+CSS技术布局网页授课班级授课学时16课时教学方法与手段讲授法、演示法、讨论法。多媒体教学项目内容本项目的工作是为某茶文化公司建设公司网站，要求网站能充分展现中华茶文化的悠久历史，加大对中国茶文化的宣传。网站的设计要求有：网站涉及较多有关茶的各类资讯，应便于查询检索；站内图片清晰度要高，并且要有美感。按照公司提出的要求，经过分析，要完成好本次任务，应该采用近年来流行的“Div+CSS”技术来布局网页。在网页设计领域，Web 标准的呼声越来越高。简单来说，要使网站符合 Web 标准，就要使用“Div+CSS”技术来布局网页。本任务通过使用“Div

2、+CSS”技术构建茶文化网站，介绍了“Div+CSS”技术在实际网页制作中的应用。教学目标学生通过本项目的学习，能：1、 了解 Web 标准的概念2、 熟练掌握使用“Div+CSS”技术构建网页的方法教学重点与难点教学重点：熟悉 “Div+CSS”技术教学难点：使用“Div+CSS”技术构建网页教学过程设计项目效果【任务】制作网站首页和子页使用Div+CSS技术制作网页（一）什么是Web标准Web 标准是由 W3C 和其他标准化组织制定的一套规范，包括 XHTML、JavaScript及 CSS 等一系列标准，其目的在于创建一个统一的用于 Web 表现层的技术标准，以便于通过不同浏览器或终端设

3、备（计算机、手机等）向最终用户展示信息内容。从狭义上讲，Web 标准就是采用“Div+CSS”代码进行网站建设，现在“Div+CSS”俨然成了标准化的代名词。但实际上，采用“Div+CSS”代码制作的网站并不一定符合Web 标准，这与对“Div+CSS”代码应用的熟练程度有很大关系。（二）Web标准的构成Web 标 准 由 结 构（Structure）、 表 现（Presentation） 和 行 为（Behavior）三部分组成：1. 结构结构技术用于对网页中用到的信息（文本、图像、动画等）进行分类和整理，目前用于结构化设计的 Web 标准技术主要是 XHTML。2. 表现表现技术用于对已被

4、结构化的信息进行显示上的控制，包括位置、颜色、字体、大小等形式控制。目前用于表现设计的 Web 标准技术就是 CSS。W3C 创建 CSS 的目的是用 CSS 来控制整个网页的布局，与 XHTML 所实现的结构完全分离。简单来说就是表现与内容完全分离，使站点的维护更加容易。这也正是“Div+CSS”布局的一大特点。3. 行为行为是指对整个文档的一个模型定义和交互行为的编写。目前用于行为设计的Web 标准技术主要有下面两个。l DOM（Document Object Model）：文档对象模型，相当于浏览器与内容结构之间的一个接口。它定义了访问和处理 HTML 文档的标准方法，把网页和脚本以及其

5、他的编程语言联系起来。l ECMAScript（JavaScript 的 扩 展 脚 本 语 言）： 由 CMA（Computer Manufacturers Association）制定的脚本语言（JavaScript），用于实现网页对象的交互操作。（三）认识DivDiv 全称 Division，意为“区分”。Div 的使用方法与其他标签一样。如果单独使用Div 而不加 CSS，则它在网页中的效果和段落标记“”差不多。Div 是用来为 XHTML 文档中的块内容设置结构和背景属性的元素。它相当于一个容器，由起始标签 和结束标签 之间的所有内容来构成这个块。在它里面可以内嵌表格（table）、

6、文本（text）等其他 XHTML 代码。其中所包含的元素特性由Div 标签的属性来控制，或使用样式表格式化这个块来控制。XHTML 中可以作为容器的标签有很多，相比之下，Div 除了可以作为容器，还具有一个特有的优点，即不带有任何原始属性。例如，P 标签为段落属性，使用它作为容器就会导致放入 P 标签的内容与前后段落之间出现一个空行的间隔，而用 Div 就不会出现这种情况，上图所示为使用 Div 作为容器的效果，下图所示为使用 P 标签作为容器的效果。可以很明显地看出，P 标签内的内容与上下行之间产生一个空行的间距。（四）Div+CSS布局的优缺点1. 优点（1）CSS 的优势体现在它简洁的

7、代码上。对于一个大型网站来说，可以节省大量带宽。而简洁的代码使得有效关键字在网页总代码中所占的比例提高，因此使用“Div+CSS”制作的符合 Web 标准的网站具有容易被搜索引擎搜索到的优势。（2）使用“Div+CSS”技术制作的网站改版更加方便简单，很多问题只需要改变CSS 而不需要改动程序。（3）可以一次设计，多处发布。设计的作品不仅可以用于 Web 浏览器，还可以发布在其他设备或软件上，如 PowerPoint。（4）可以更好、更轻松地控制网页布局。（5）将设计部分剥离出来，放在一个单独的样式表文件中，可以减少网页无效的可能性。（6）布局灵活性大。相比较而言，传统的表格布局只能遵循 ta

8、ble、tr、td 的格式，而 Div 可以遵循 div、ul（无序列表）、li（列表内容）格式，也可以遵循 ol（有序列表）、li 格式，还可以遵循 ul、li格式，不过最好有序书写。（7）如果对 JavaScript 比较精通，可以不必去写 ID，而用 class 就可以了。当客户端程序员写完程序后需要调整时，可以再利用它的 ID 进行控制。（8）代码更简洁。在使用表格布局时，往往会生成很多垃圾代码，修饰性的样式和布局代码混合在一起，很不直观。（9）以前一些必须通过图片转换才能实现的功能，现在只用 CSS 就可以轻松实现，从而加快了网页的下载速度。2. 缺点尽管“Div+CSS”技术具有一

9、定的优势，不过其存在的问题也比较明显，主要表现在以下几个方面：l 对于 CSS 的高度依赖，使得网页设计变得比较复杂。l CSS 文件异常将会影响整个网站的正常显示。l 对于用“Div+CSS”技术制作的网站，非常容易出现浏览器兼容性问题。l “Div+CSS”技术对搜索引擎优化与否，取决于网页设计者的专业水平而不是Div+CSS 技术本身。（五）绝对定位与相对定位1. 绝对定位绝对定位在 CSS 中的写法是“position：absolute；”。其表达的意思是参照浏览器的左上角，配合 top、right、bottom、left（上、右、下、左）值来定位元素，如下 CSS代码：#laypos

10、ition：absolute；left：5px；top：5px；它表示应用 #lay 样式的对象为绝对定位模式，它将永远距离浏览器窗口左边框5px，上边框 5px。2. 相对定位相对定位在 CSS 中的写法是“position：relative；”。其表达的意思是以父级（它所在的容器）的坐标原点为坐标原点。无父级则以body的坐标原点为坐标原点，配合上、右、下、左（TRBL）进行定位，当父级内有padding等CSS属性时，当前级的坐标原点则参照父级内容区的坐标原点进行定位。有时还要使用“z.index”属性来设定容器的上下关系，数值范围是自然数，数值越大，容器位置越靠上。但是需要注意的是，父

11、子关系是无法用“z.index”属性来设定上下关系的，一定是子级在上，父级在下。（六）浮动定位浮动定位在 CSS 中用“float”属性来表示。当“float”值为“Bone”时，表示对象不浮动；为“left”时，表示对象向左浮动；为“right”时，表示对象向右浮动。如果使用浮动定位方式，为Div中的所有列都加上“float：left”属性，那么它们会挨个向左排列。如果让一个元素浮动，它会往右或者往左浮动直至遇到容器的边缘。如果向同一方向再浮动一个元素，它会浮动直至碰到前一个浮动元素的边缘。（七）插入Div标签Div标签与表格、图像等网页对象的插入方法类似，所不同的是，在插入Div标签的同时

12、可以为其设置样式。步骤 1 首先在文档页面上要插入 Div 标签的位置单击，以确定插入点位置。步骤 2 将“常用”插入栏切换至“布局”插入栏，并单击其中的“插入Div标签”按钮，打开“插入Div标签”对话框。设置各项参数后，单击“确定”按钮，即可在插入点所在位置插入 Div 标签。【任务实施】在学习了“Div+CSS”技术的相关知识后，下面通过制作一个使用“Div+CSS”技术制作的茶文化网站来学习其在实际网页制作中的应用。（一）制作网站首页1. 制作网页上部步骤 1 将本项目素材中的“tea”文件夹拷贝至本地磁盘，然后在Dreamweaver中定义站点“tea”。步骤 2 在站点“tea”中

13、新建文档并重命名为“index.html”。步骤 3 在“文件”面板中双击打开新建的文档，在文档编辑窗口中定位插入点，然后将“插入”栏切换至“布局”栏，并单击其中的“插入Div标签”按钮。步骤4 打开“插入Div标签”对话框，在“ID”编辑框中输入ID名（此处为“top”），然后单击“新建 CSS 样式”按钮。步骤 5 打开“新建CSS规则”对话框，选择器类型默认为“高级”，选择器名为“#top”，在“定义在”列表区选择“新建样式表文件”，然后单击“确定”按钮。步骤 6 打开“保存样式表文件为”对话框，在“保存在”下拉列表中选择网站根文件夹，在文件名编辑框中输入文件名（此处为“s1”），然后单

14、击“保存”按钮。步骤 7 打开“#top的CSS规则定义”对话框，在左侧的“分类”列表中选择“方框”，设置“宽”为“1 000”像素，然后单击“确定”按钮。步骤 8 回到“插入Div标签”对话框，单击“确定”按钮，插入Div标签。切换至“常用”插入栏，单击“图像”按钮。步骤 9 打开“选择图像源文件”对话框，在“查找范围”下拉列表中选择图像所在文件夹（此处为网站根文件夹下的“images”文件夹），在文件列表中选择图像文件“main_01.jpg”，然后单击“确定”按钮。步骤 10 插入图像，并将其上方的文本删除，效果如图所示。步骤 11 单击图像，然后按向右方向键，将插入点置于图像后，参照前

15、面的方法插入其余图片，效果如图所示。2. 制作网页中部步骤 1 接着上面的操作，为确保Div位置的准确性，单击“文档”工具栏中的“拆分”按钮，在文档窗口上方打开代码视图，对照代码进行后面的操作。步骤 2 首先将插入点定位在前面插入的ID为top的Div内，然后单击“标签选择器”中的“div#top”，选中整个 Div。步骤 3 按键盘上的向右方向键，将插入点置于Div后，然后单击“布局”插入栏中的“插入 Div 标签”按钮，如图所示。步骤 4 打开“插入 Div 标签”对话框，在“ID”编辑框中输入 ID 名“content”，然后单击“新建 CSS 样式”按钮。步骤5 打开“新建CSS规则”

16、对话框，“选择器类型”默认为“高级”，选择器名为“#content”，在“定义在”列表区选择“s1.css”，然后单击“确定”按钮。步骤6 打开“#content 的 CSS 规则定义”对话框，在“分类”列表中选择“背景”，然后设置背景颜色为白色“#FFFFFF”。步骤 7 在“分类”列表中选择“方框”，设置“宽”为 1 000 像素，“高”为 140像素，然后单击“确定”按钮，插入 ID 为“content”的 Div。步骤 8 参照前面的方法，对照代码将插入点置于Div内，在其中嵌套一个ID为“news”的 Div，并打开“#news 的 CSS 规则定义”对话框。步骤 9 在“分类”列表

17、中选择“方框”，设置“宽”为362像素，“浮动”为左对齐，然后单击“确定”按钮。步骤 10 在 ID 为“news”的 Div 中插入图像“main_05.jpg”，并将其中的文本删除。步骤 11 对照代码将插入点置于图片后方，然后单击“插入Div标签”按钮，在ID 为“news”的 Div 中嵌套一个 ID 为“newscontent”的 Div，并打开“#newscontent 的CSS规则定义”对话框。设置“字体”为宋体，“大小”为12像素，“行高”为20像素，颜色为灰色“#999999”。步骤 12 在“分类”列表中选择“区块”，然后在“文本对齐”下拉列表中选择“左对齐”。步骤 13

18、在“分类”列表中选择“方框”，然后设置“宽”为 362 像素。步骤 14 在“分类”列表中选择“列表”，然后设置“类型”为“方块”，“位置”为“外”，最后单击“确定”按钮。步骤 15 将 ID 为“newscontent”的 Div 中文本删除后输入新文本，并将这些文本分为不同的段落。之后选中文本，单击“属性”面板上的“项目列表”按钮，Div中的文本将应用前面设置的列表样式。步骤 16 对照代码将插入点置于 ID 为“news”的 Div 后，继续在 ID 为“content”的Div 中嵌套一个 ID 为“center”的 Div，并打开“ center 的 CSS 规则定义”对话框。在“分

19、类”列表中选择“方框”，设置“宽”为 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”，这样网页中

20、部就制作完成了。3. 制作网页下部网页下部的制作相对来说要简单很多，因为只需要插入一个Div，并在其中输入文本即可。步骤 1 接着上面的操作，对照代码将插入点置于ID为“content”的Div后，插入ID 为“bottom”的 Div，并打开“#bottom 的 CSS 规则定义”对话框，设置“大小”为12 像素，“颜色”为灰色“#999999”。步骤 2 在“分类”列表中选择“背景”，设置“背景颜色”为浅灰色“#EEEEEE”。步骤 3 在“分类”列表中选择“区块”，然后在“文本对齐”下拉列表中选择“居中”。步骤 4 在“分类”列表中选择“方框”，然后设置“宽”为1 000 像素，“高”为

21、30像素，取消选择“填充”区的“全部相同”复选框，设置“上”为10像素，最后单击“确定”按钮。步骤 5 将ID为“bottom”的Div中的原有文本删除，重新输入新文本，可见其自动套用了前面设置的样式。步骤 6 分别保存网页文档和样式文件，然后在浏览器中预览文档，可以看到网页四周均有空白，且下方出现了滚动条。4. 设置“body”样式下面通过设置“body”样式，来解决网页四周的空白和滚动条问题。步骤 1 单击“CSS 样式”面板下方的“新建 CSS 规则”按钮，打开“新建 CSS”对话框，在“选择器类型”区选择“标签”，在“标签”下拉列表中选择“body”，在定义在”列表区选择“s1.css

22、”，然后单击“确定”按钮。步骤 2 打开“body的CSS规则定义”对话框，在左侧的“分类”列表中选择“区块”，然后在“文本对齐”下拉列表中选择“居中”，以使所有内容居中对齐。步骤 3 在左侧的“分类”列表中选择“方框”，设置“边界”值为0，然后单击确定”按钮。步骤 4 分别保存网页文档和样式文件，然后在浏览器中预览文档，可以看到网页左侧和上方的空白，以及下方的滚动条均已消失。【任务实施】接下来，请同学们参考首页制作步骤，完成网站子页。包含以下几个步骤：1. 制作网页上部2. 制作网页中部3. 制作网页下部效果图：【知识拓展】初学Web标准的几个误区初次接触Web标准的用户可能会受表格布局或其

23、他一些问题的影响，常见问题及解决建议如下：1. 不要用传统的表格思维来套 div用惯了表格的用户可能会觉得，CSS布局就是将原来用table的地方用div来代替，原来是 table 嵌套，现在是 div 嵌套。这种观点是错误的。应该跳出表格布局的禁锢，抛弃一个td接一个td放置内容的思维方式。按前文所述，Web标准的目的是将内容和表现完全分离。即在加入表现之前，页面里有的仅仅是内容，在没有修饰的情况下，它就是一张有一些文字和图像（图像是指内容中的图像，是有真正意义的图像，而非修饰性的图像）的简单页面，这些文字和图像仅仅是依次罗列下来，只有结构，没有任何样式。当加入表现，将所有修饰的图像作为背景

24、，用CSS 来定义每一块内容的位置、字体、颜色等时，才构成了一个完整的页面。这样制作的页面才是内容与表现完全分离的，即抽掉CSS文件，剩下的就只是干净的内容。2. 不必为每块内容都创建一个 id内容都是有结构的，相同结构的内容可以用同一个样式来定义，如相同级别的标题、正文、图像等。对于多次引用的样式可以用class来定义，不需要全部用id；另外，也不是说只能用 div 布局，在需要的时候，完全可以用 p 来代替。至于仅仅为了行高、间距，或者一个修饰性图像而增加的div，随着大家对CSS应用的熟练和理解，很快就会知道这是没有必要的。希望大家多研究CSS，做出最简练、最有效的样式表。作业：1 Web标准由哪几部分构成？2 简述绝对定位与相对定位的含义？3 Div标签中，“类”与“ID”有何区别？