Dreamweaver网页设计 邢永峰 第14章新.pptVIP

Dreamweaver 网页设计 第14章 综合实例 【学习概述】 本章通过一个完整的例子来讲述设计网页的具体步骤。这个例子涉及前面学习到的大部分主要内容。比如表格、图像、文本格式化、插入特殊符号、插入flash、调用javascript脚本、应用CSS样式表、应用模板等内容。到目前为止这些内容对读者来说应该是比较简单的。本章的重点和难点是：表格的应用。 14.1 【典例剖析】一数码专卖网 14.4 实践检验 * * 14.1.1 站点规划 这个例子的主题定位是“数码专卖”，根据这个主题，站点规划步骤如下： （1）根据主题内容所需，规划站点结构，如图14-1所示。 图14-1 规划站点结构 （2）根据主题内容所需，规划站点目录结构如图14-2所示。 图14-2目录结构 （3）根据主题内容所需，规划网站首页草图如图14-3所示。 （4）根据主题内容所需，规划网站二级页面草图如图14-4所示。 图14-4 二级页面草图 规划完成后，就可以开始制作网页了。首页是一个网站的脸面，因此首页的设计制作十分重要。一般来说，首页要尽量体现网站的大部分主题内容。 14.1.2 设计首页框架 根据上面的规划，先设计首页框架（主要是制作表格），然后再在表格中填充内容。步骤如下： （1）新建站点“myweb”，新建文件，命名为“index.html”。在“文档”面板中把“标题”项的“无标题文档”改为“数码专卖”，如图14-5所示。保存网页（制作网页时一定要时常记着保存网页，否则一旦出现问题，前功尽弃！）。 图14-5设置“标题”项 （2）切换到“布局模式”，在“插入”栏的“布局”类别中单击“布局表格”图标按钮，在文档中绘制一个表格，如图14-6所示。在“布局表格”属性面板中设置各选项如图14-7所示。 图14-6 绘制第1个布局表格 图14- 7布局表格属性面板 （3）然后再在“插入”栏的“布局”类别中单击“绘制布局单元格”图标按钮，在刚才绘制的表格中连续绘制3个布局单元格，如图14-8所示。这个表格主要放置标志（logo）和横幅广告（banner）等内容。 图14-8 连续绘制3个布局单元格 （4）在上面布局表格的下方再绘制一个750像素宽的布局表格，再在该布局表格中绘制1个布局单元格，如图14-9所示。这个表格将作为站内导航栏。 图14-9 绘制第2个750像素宽的布局表格 （5）在上面布局表格的下方再绘制一个750像素宽的表格，再在该布局表格中绘制2个布局单元格，如图14-10所示。这个表格将作为网页主内容区。 图14-10 绘制第3个750像素宽的布局表格 （6）在上面布局表格的下方再绘制一个750像素宽的表格，再在该布局表格中绘制1个布局单元格，如图14-11所示。这个表格将作为该网页的页脚，主要放置版权信息等内容。 图14-11 绘制第4个750像素宽的布局表格 （7）这样首页的基本框架就制作完成了，一共4格表格。制作首页的基本框架主要就是绘制表格和单元格。 网页的基本框架制作完成后就可以在表格中添加内容了。可以添加表格、文字、图像、flash动画等所有允许在网页中应用的对象。 理论巩固 填空题 （1）网站的标志英文名称为__________。 （2）网站中的横幅广告英文名称为__________。 （3）模板文件的后缀名为__________。 简答题 （1）简述如何在Dreamweaver中应用外部CSS样式表。 （2）简述如何在Dreamweaver中创建模板网页。 上机操作 （1）以电脑专卖为主题规划设计您的网站并画出首页草图。 （2）参照14.1.8小节的内容制作其他二级页面并和其它网页建立超级链接。 *