《Dreamweaver 网页设计》第14章 综合实例

Dreamweaver网页设计 第14章综合实例

Dreamweaver 网页设计 第14章 综合实例

【学习概述】 本章通过一个完整的例子来讲述设计网 页的具体步骤。这个例子涉及前面学习到 的大部分主要内容。比如表格、图像、文 本格式化、插入特殊符号、插入fash、调 用 javascript脚本、应用CSS样式表、应用 模板等内容。到目前为止这些内容对读者 来说应该是比较简单的。本章的重点和难 点是:表格的应用

【学习概述】 本章通过一个完整的例子来讲述设计网 页的具体步骤。这个例子涉及前面学习到 的大部分主要内容。比如表格、图像、文 本格式化、插入特殊符号、插入flash、调 用javascript脚本、应用CSS样式表、应用 模板等内容。到目前为止这些内容对读者 来说应该是比较简单的。本章的重点和难 点是：表格的应用

14.1【典例剖析】一数码专卖网 14.1.1站点规划 这个例子的主题定位是“数码专卖”,根据这个主题,站点规划步骤如下 1)根据主题内容所需,规划站点结构,如图14-1所示。 数码相机 数码摄像机 图14-1规划站点结构 npc. html 数字家庭 pan. html

14.1 【典例剖析】一数码专卖网 14.1.1 站点规划 这个例子的主题定位是“数码专卖”，根据这个主题，站点规划步骤如下： （1）根据主题内容所需，规划站点结构，如图14-1所示。 图14-1 规划站点结构

2)根据主题内容所需,规划站点目录结构如图142所示。 口 cs、 images、 flash这3个文件夹分别用来存放首 页" index.htm1”用到的样式表文件、图像文件、 flash动画文件。其它文件夹分别存放二级页面所用 到的文件。如"mp4"文件夹存放"mp4"栏目里的文 图14-2目录结构 (3)根据主题内容所需,规划网站首页草图如图143所示

（2）根据主题内容所需，规划站点目录结构如图14-2所示。 图14-2目录结构 （3）根据主题内容所需，规划网站首页草图如图14-3所示

标志 横幅广告 收藏、帮助 自彐 本店公告 新货上架 热点关注 热销产品 店推荐 版权信息等内容 (4)根据主题内容所需,规划网站二级页面草图如图144所示。 标志 横帽广告 收藏、帮助 本店公告 热点关注 本栏目主题内容 模板的可编辑区域 热销产品 版权信息等内容 图144二级页面草图

（4）根据主题内容所需，规划网站二级页面草图如图14-4所示。 图14-4 二级页面草图

规划完成后,就可以开始制作网页了。首页是一个网站的脸面,因此首页 的设计制作十分重要。一般来说,首页要尽量体现网站的大部分主题内容 14.12设计首页框架 根据上面的规划,先设计首页框架(主要是制作表格),然后再在表格 中填充内容。步骤如下 (1)新建站点“ myweb",新建文件,命名为“ index. htm"。在“文档” 面板中把“标题”项的“无标题文档”改为“数码专卖”,如图14-5 所示。保存网页(制作网页时一定要时常记着保存网页,否则一旦出 现问题,前功尽弃!)。 國代玛拆分设计十标懸效专卖 图14-5设置“标题”项 (2)切换到“布局模式”,在“插入”栏的“布局”类别中单击“布局 表格”图标按钮,在文档中绘制一个表格,如图14-6所示。在“布局表 格”属性面板中设置各选项如图14-7所示

规划完成后，就可以开始制作网页了。首页是一个网站的脸面，因此首页 的设计制作十分重要。一般来说，首页要尽量体现网站的大部分主题内容。 14.1.2 设计首页框架 根据上面的规划，先设计首页框架（主要是制作表格），然后再在表格 中填充内容。步骤如下： （1）新建站点“myweb”，新建文件，命名为“index.html”。在“文档” 面板中把“标题”项的“无标题文档”改为“数码专卖”，如图14-5 所示。保存网页（制作网页时一定要时常记着保存网页，否则一旦出 现问题，前功尽弃！）。 图14-5设置“标题”项 （2）切换到“布局模式”，在“插入”栏的“布局”类别中单击“布局 表格”图标按钮，在文档中绘制一个表格，如图14-6所示。在“布局表 格”属性面板中设置各选项如图14-7所示

图146绘制第1个布局表格 布局表格宽⊙团定750高0 填充0西 O自动伸展 图14-7布局表格属性面板 (3)然后再在“插入”栏的“布局”类别中单击“绘制布局 单元格”图标按钮,在刚才绘制的表格中连续绘制3个布局单 元格,如图14-8所示。这个表格主要放置标志(ogo)和横幅 告( banner)等内容 图14-8连续绘制3个布局单元格 (4)在上面布局表格的下方再绘制一个750像素宽的布局表格, 再在该布局表格中绘制1个布局单元格,如图149所示。这个表格 将作为站内导航栏

图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个布局单元格,如图1411所示。这个表格将作为该网页的页脚,主 要放置版权信息等内容

图14-9 绘制第2个750像素宽的布局表格 （5）在上面布局表格的下方再绘制一个750像素宽的表格，再 在该布局表格中绘制2个布局单元格，如图14-10所示。这个表 格将作为网页主内容区。 图14-10 绘制第3个750像素宽的布局表格 （6）在上面布局表格的下方再绘制一个750像素宽的表格，再在该布局表格 中绘制1个布局单元格，如图14-11所示。这个表格将作为该网页的页脚，主 要放置版权信息等内容

图14-11绘制第4个750像素宽的布局表格 (7)这样首页的基本框架就制作完成了,一共4格表格。制作首 页的基本框架主要就是绘制表格和单元格 网页的基本框架制作完成后就可以在表格中添加内容了。可以添加表 格、文字、图像、fash动画等所有允许在网页中应用的对象

图14-11 绘制第4个750像素宽的布局表格 （7）这样首页的基本框架就制作完成了，一共4格表格。制作首 页的基本框架主要就是绘制表格和单元格。 网页的基本框架制作完成后就可以在表格中添加内容了。可以添加表 格、文字、图像、flash动画等所有允许在网页中应用的对象

144实践检验 理论巩固 填空题 (1)网站的标志英文名称为 2)网站中的横幅广告英文名称为 (3)模板文件的后缀名为 简答题 (1)简述如何在 Dreamweaver中应用外部CSS样式表 2)简述如何在 Dreamweaver中创建模板网页。 上机操作 1)以电脑专卖为主题规划设计您的网站并画出首页草图。 (2)参照1418小节的内容制作其他二级页面并和其它网页建立 超级链接

14.4 实践检验 理论巩固 填空题 （1）网站的标志英文名称为__________。 （2）网站中的横幅广告英文名称为__________。 （3）模板文件的后缀名为__________。 简答题 （1）简述如何在Dreamweaver中应用外部CSS样式表。 （2）简述如何在Dreamweaver中创建模板网页。 上机操作 （1）以电脑专卖为主题规划设计您的网站并画出首页草图。 （2）参照14.1.8小节的内容制作其他二级页面并和其它网页建立 超级链接