本科网页设计与制作实例教程978 7 307 10379 5 教学全套课件资源包02 教案第12章 网站建设综合实例.docx

《本科网页设计与制作实例教程978 7 307 10379 5 教学全套课件资源包02 教案第12章 网站建设综合实例.docx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第12章网站建设综合实例一、教学目标本章以创建一个专卖数码产品的电子商务网站为例，详细介绍使用Dreamweaver进行电子商务网站设计的过程。本实例的重点在于合理安排页面内容，以凸显商务网站的功用。二、课时分配本项目共4个小节，安排8课时。三、教学重点本章学习了网站建设综合实例。网站由设计到最终制作完成需要经过一系列复杂的制作。所以每一章的学习都很重要，扎实掌握才能在综合制作中游刃有余。四、教学难点合理安排页面内容，以凸显商务网站的功用。五、教学内容12.1实例分析电子商务网站，主要是展示商品信息并提供在线交易，其中在线交易需要进行复

2、杂的数据程序设计。同时，画面美观、结构清晰、分类准确等因素，也是影响用户浏览点击的重要因素。(1)最新推荐：这个栏目以滚动产品图像的形式来展示推荐的产品，由Flash动画来完成效果，放在首页的最醒目的位置，以吸引浏览者的注意力，增加浏览者对该商品的印象。(2)最新上市：这个栏目主要用于展示目前最新的产品，放在最新推荐栏目的下面，属于第二重要的位置。浏览者可以第一时间了解到数码产品的最新行情。(3)热卖商品：这个栏目主要用于展示热销的、打特价的产品，放在最新上市栏目的下面，也属于比较重要的位置，让浏览者可以轻松找到自己需要的产品。(4)分

3、类检索：在这个栏目中安排了其他商品的分类导航链接。通过单击该链接，可以直接观看其他商品所在的页面。12.2实例制作12.2.1确定网站内容结构因为本实例是要制作一个数码产品的电子商务网站，因此其主要内容是展示各种数码产品的具体信息和价格。在设计版式的时候应当尽量让商品信息能够一目了然。电子商务网站内容结构12.2.2准备网站素材以进行商品销售为主题的电子商务网站，包含的产品信息非常丰富，在制作前需要花足够的精力准备并整理好这些素材内容。12.2.3创建本地站点在进行实例制作之前，需要先建立一个本地站点。下面介绍其操作步骤。（1）打开Dr

4、eamweaver，执行“站点”→“新建站点”菜单命令。选择相应命令（2）在打开的“站点定义”对话框中进行设置，在“您打算为您的站点起什么名字？”文本框中输入“shangwu”，然后单击“下一步”按钮。为站点起名（3）进入新的定义界面后，选中“否，我不想使用服务器技术”单选按钮，然后单击“下一步”按钮。（4）在新进入的设置界面中，选中“编辑我的计算机上的本地副本，完成后再上传到服务器(推荐)”单选按钮，在“您将把文件存储在计算机上的什么位置？”文本框中输入站点的保存地址，然后单击“下一步”按钮。选择使用文件的方式并输入站点保存地址（5）

5、在新进入的设置界面中，在“您如何连接到远程服务器？”下拉列表中选中“无”选项，然后单击“下一步”按钮。（6）进入“总结”界面后，单击“完成”按钮，完成站点的创建。“总结”界面（7）在Dreamweaver中的“文件”面板中，可以看到创建完成的站点。12.3制作网站首页12.3.1制作网页框架结构（1）执行“窗口”→“文件”菜单命令，打开“文件”面板，在面板中选中“shangwu”站点，在站点上单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令。（2）可以看到在“文件”面板中，新建了一个名为“untitled.html”的文件。（3）在

6、“文件”面板中将“untitled.html”文件改名为“index.html”，作为网站的首页文件。为文件改名（4）双击新建的“index.html”文件，在Dreamweaver的窗口中打开。（5）执行“修改”→“页面属性”菜单命令，打开“页面属性”对话框。“页面属性”对话框（6）在对话框的“分类”列表中选择“外观”选项，在“外观”设置界面设置字体为“宋体”，字体大小为12像素，文本颜色为“#000000”，页面上、下边距都设置为0。设置页面的外观属性（7）在对话框的“分类”列表中选择“标题/编码”选项，在其设置界面中设置标题为“经

7、典数码在线”，然后单击“确定”按钮，完成页面属性的设置。设置页面标题（8）回到Dreamweaver文档编辑界面，然后执行“插入”→“表格”菜单命令。（9）在打开的“表格”对话框中设置表格行数为3，列数为3，宽度为980像素，边框粗细、单元格边距和间距都设置为“0”。设置表格属性（10）单击“确定”按钮，在文档中插入一个3行3列，宽度为980像素的表格。（11）选中表格，在表格的“属性”面板中进行设置。在“对齐”下拉列表中选择“居中对齐”选项，在“背景颜色”文本框中输入“#FFFFFF”设置表格背景色为白色。（12）选中表格第1行的3个

8、单元格，打开“属性”面板，在面板中单击“合并单元格”按钮，将这3个单元格合并为一个单元格。（13）选中第2行的第1个单元格，在“属性”面板中设置其宽度为220，然后按Enter键。（14）选中第2行的第2个