1、Dreamweaver网页设计项目教程机械工业出版社任务5完成首页内容区制作3（建议2学时）01任务实施02任务评价03触类旁通任务实施#index_box制作#index_box内的内容分为左右两个部分，左侧为.box（“焦点中心”区），右侧为.box_ box1（“最新评测”区）。其结构如图所示：任务实施#index_box制作（1）创建#index_box的布局结构 1）返回index.html的代码窗口，光标定位在#index_box中，如图所示:2）输入代码如图所示:任务实施#index_box制作（2）创建#index_box的内部CSS样式 打开layout.css，输入代码如图
2、所示:任务实施#index_box制作（3）添加内容 1）返回index.html的代码窗口，光标定位在第一个“.box”中输入文字并为标题文字插入“标题2”、“链接”及“行内样式”，如图所示:2）光标定位在“.box_con”中，输入代码如图所示:任务实施#index_box制作 3）复制并修改代码。两个“box”除文本内容有改变外，其样式相同，可以将步骤2）中的代码复制并修改文本内容，代码窗口显示如图所示:任务实施#index_box制作（4）样式美化 打开layout.css，创建#index.html内列表项及超链接样式，可参见前面章节的窗口操作，也可以用手输入代码。Layout.cs
3、s窗口代码显示如图所示:任务实施#index_box制作#index_box完成后的最终结果如图所示:任务实施右侧的#side制作#side的内容分成上中下3个部分，这3个部分都应用了同一个类.side_box。每个.side_box又应用了不同的样式。其结构如图所示:任务实施右侧的#side制作（1）创建“.side”的内部布局结构,返回index.html代码窗口，在“.side”中输入代码如图所示:任务实施右侧的#side制作（2）创建“.side”的内部CSS样式 上述结构中“.side”、“.side_con”的样式已经在“构建网页架框”章节完成设置，这里只设置“.side_con”
4、的样式。设置它的填充（padding）为上、下为0，左右为10px；设置它的背景图片（background）及背景不重复（no-repeat）。Layout.css代码如下：.side_con padding:0 10px;background:url(./images/side_bg.gif)0 bottom no-repeat;任务实施右侧的#side制作（3）添加内容 1）添加“产品导购”内容。光标定位在“.side_box”中，输入文字。选中“产品导购”文字，插入“标题2”。选中“产品”文字，单击属性面板中的“加粗”按钮。光标定位在“.side_con”中，输入文字，选中文字，插入“项
5、目列表”标签。选中文字，插入“列表项”。选中文字“语音业务：”，单击“粗体”按钮。选中文字，添加链接。复制代码。设计窗口显示效果如图所示：任务实施右侧的#side制作 2）添加“使用问答”内容 光标定位在“.side_box”中，输入文字，设置文字为“标题2”，字体“粗体”，操作步骤参照步骤1），也可直接复制上面的代码后再进行文字修改。光标定位在“.side_con”中，输入文字，选中文字，插入“定义列表、术语、说明”标签。复制内容后修改文本，如图所示：任务实施右侧的#side制作 3）添加“联系我们”内容。光标定位在“.side_box”中，输入文字，设置文字为“标题2”，字体“粗体”，操作
6、步骤参照步骤1），也可直接复制上面的代码后再进行文字修改。光标定位在“.side_con”中，插入图片如图所示，“#side”最终效果如图所示。任务实施右侧的#side制作（4）美化样式 为“#side”中的列表项、定义术语、定义说明设置CSS样式。1）“产品导购”CSS样式美化（列表项）。2）“使用问答”CSS样式美化。3）“联系我们”CSS样式美化。Layout.css文档代码窗口显示效果如图所示：任务实施右侧的#side制作 4）应用设置好的CSS样式。返回index.html，光标定位在“产品导购”的“.side_con”开始标签中，为其添加设置好的类样式“product”。光标定位在
7、“使用问答”的“.side_con”开始标签中，为其添加设置好的类样式“ask”。光标定位在“联系我们”的“.side_con”开始标签中，为其添加设置好的类样式“contact”。此时的“#side”的显示效果如图所示:至此整个首页制作完成。任务评价两种评价方式Html5新属性id属性为当前Div指定id名称 id=main id只允许使用一 次class名称可以重复使用 overflow属性 zoom属性 overflow属性让父容器来自适应内部容器的高度 zoom:1;是为了兼容 IE6而使用的CSS HACK 触类旁通 在学习网站制作的初期，网页编辑可以通过设计窗口、选项、菜单进行设计
8、，在此过程中要有意识地让自己熟悉代码的编写格式。之后，逐步脱离设计窗口，改用代码编写网页。使用代码编写网页，在结构设计上更精准，修改更方便。对于结构一致的部分我们可以采用先复制代码，然后对内容部分做相应修改的方法，这样既保证了结构一致，降低录入过程中的出错率，也大大提高了代码编写速度。在后面的二级页面的制作中可以参考本项目代码的编写方式。小结 本项目以一个电子产品类网站入手，详细讲解了企业网站制作的一般流程，实际项目实现中的内部分工协作机制；从技术层面上，由浅入深地讲解Dreamweaver CS5制作企业网站的基本技巧；DIV+CSS布局网页技术，使用模板化设计，方便网站内容的更新；结合JS特效知识，对网页添加JS特效，增强网页的动态效果；以及使用HTML代码编写设计网页的基本技巧。大家应使用标准化的编程语言书写代码，养成良好的编程习惯，为将来的从业打好基础。实战强化首页制作我们已经讲解完了，其他二级页面的制作可参照学过的方法自行完成。Thank you!谢谢观赏
