Dreamweaver网页设计教学课件邢永峰第14章.ppt

《Dreamweaver网页设计教学课件邢永峰第14章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Dreamweaver网页设计第14章综合实例【学习概述】本章通过一个完整的例子来讲述设计网页的具体步骤。这个例子涉及前面学习到的大部分主要内容。比如表格、图像、文本格式化、插入特殊符号、插入flash、调用javascript脚本、应用CSS样式表、应用模板等内容。到目前为止这些内容对读者来说应该是比较简单的。本章的重点和难点是：表格的应用。14.1【典例剖析】一数码专卖网14.1.1站点规划这个例子的主题定位是“数码专卖”，根据这个主题，站点规划步骤如下：（1）根据主题内容所需，规划站点结构，如图14-1所示。图14-

2、1规划站点结构（2）根据主题内容所需，规划站点目录结构如图14-2所示。图14-2目录结构（3）根据主题内容所需，规划网站首页草图如图14-3所示。（4）根据主题内容所需，规划网站二级页面草图如图14-4所示。图14-4二级页面草图规划完成后，就可以开始制作网页了。首页是一个网站的脸面，因此首页的设计制作十分重要。一般来说，首页要尽量体现网站的大部分主题内容。14.1.2设计首页框架根据上面的规划，先设计首页框架（主要是制作表格），然后再在表格中填充内容。步骤如下：（1）新建站点“myweb”，新建文件，命名为“index

3、.html”。在“文档”面板中把“标题”项的“无标题文档”改为“数码专卖”，如图14-5所示。保存网页（制作网页时一定要时常记着保存网页，否则一旦出现问题，前功尽弃！）。图14-5设置“标题”项（2）切换到“布局模式”，在“插入”栏的“布局”类别中单击“布局表格”图标按钮，在文档中绘制一个表格，如图14-6所示。在“布局表格”属性面板中设置各选项如图14-7所示。图14-6绘制第1个布局表格图14-7布局表格属性面板（3）然后再在“插入”栏的“布局”类别中单击“绘制布局单元格”图标按钮，在刚才绘制的表格中连续绘制3个布局单

4、元格，如图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）在上面布局表格的下方再绘制一个75

5、0像素宽的表格，再在该布局表格中绘制1个布局单元格，如图14-11所示。这个表格将作为该网页的页脚，主要放置版权信息等内容。图14-11绘制第4个750像素宽的布局表格（7）这样首页的基本框架就制作完成了，一共4格表格。制作首页的基本框架主要就是绘制表格和单元格。网页的基本框架制作完成后就可以在表格中添加内容了。可以添加表格、文字、图像、flash动画等所有允许在网页中应用的对象。14.4实践检验理论巩固填空题（1）网站的标志英文名称为__________。（2）网站中的横幅广告英文名称为__________。（3）模板文

6、件的后缀名为__________。简答题（1）简述如何在Dreamweaver中应用外部CSS样式表。（2）简述如何在Dreamweaver中创建模板网页。上机操作（1）以电脑专卖为主题规划设计您的网站并画出首页草图。（2）参照14.1.8小节的内容制作其他二级页面并和其它网页建立超级链接。