网页设计与制作ppt高职 第12章 网站建设综合实例.ppt

《网页设计与制作ppt高职 第12章 网站建设综合实例.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第12章网站建设综合实例实例效果任务1实例分析任务2实例制作任务3制作网站首页任务4制作产品详细介绍页面任务5本章导读在前面的章节中介绍了制作网站的基础知识，本章将介绍制作完整网站的操作方法。确定网站内容结构准备网站素材创建本地站点制作网站首页制作产品详细介绍页面能力目标任务1实例效果本章以创建一个专卖数码产品的电子商务网站为例，详细介绍使用Dreamweaver进行电子商务网站设计的完整过程。本实例的重点，在于合理的安排页面内容，使用适当的内容安排来凸显商务网站的功用。任务2实例分析电子商务网站，主要是展示商品信息并提供在线交易

2、，其中在线交易需要进行复杂的数据程序设计；同时，画面美观、结构清晰、分类准确等因素，也是影响用户浏览点击的重要因素网站页面设计的重要目标是让用户清晰地了解和选购商品的流程。本实例在首页安排了“最新推荐”、“最新上市”和“热卖商品”3个展示栏目，然后还安排了其他商品的分类检索栏目。最新推荐：这个栏目以滚动产品图像的形式来展示推荐的图像，由Flash动画来完成效果，放在首页的最醒目位置，以吸引浏览者的注意力，增加浏览者对该商品的印象。最新上市：这个栏目主要用于展示目前最新产品，放在最新推荐栏目的下面，属于第2重要的位置。浏览器可以第一

3、时间了解数码产品的最新行情。热卖商品：这个栏目主要用于展示热销的、打特价的产品，放在最新上市栏目的下面，也属于比较重要的位置，让浏览者可以轻松找到自己需要的产品。分类检索：在这个栏目中安排了其他商品的分类导航链接。通过单击该链接，可以直接观看其他商品所在的页面。任务3实例制作阶段1确定网站内容结构阶段2准备网站素材以进行商品销售为主题的电子商务网站，包含的产品信息非常丰富，在制作前需要花足够的精力准备并整理好这些素材内容。阶段3创建本地站点（1）打开Dreamweaver，选择“站点→新建站点”命令。（2）在打开的“站点定义”对话

4、框中进行设置，在“您打算为您的站点起什么名字？”文本框中输入“shangwu”，然后单击“下一步”按钮。（3）进入新的定义界面后，选中“否，我不想使用服务器技术”单选按钮，然后单击“下一步”按钮。（4）在新进入的设置界面中选中“编辑我的计算机上的本地副本，完成后再上传到服务器”单选按钮，在“您将把文件存储在计算机上的什么位置”文本框中输入站点的保存地址，然后单击“下一步”按钮。（5）在新进入的设置界面中，在“您如何连接到远程服务器”下拉列表中选中“无”选项，然后单击“下一步”按钮。（6）进入“总结”界面后，单击“完成”按钮，完成站

5、点的创建。（7）在Dreamweaver中的“文件”面板中，可以看到创建完成的站点。任务4制作网站首页在这个网站的首页中，主要展示最新推荐产品信息、最新上市产品信息和一些热卖商品信息，以及会员登陆、产品搜索和分类检索信息等。阶段1制作网页框架结构（1）选择“窗口→文件”命令打开“文件”面板，在面板中选中“shangwu”站点，在站点上单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令。（2）可以看到在“文件”面板中，新建了一个名为“untitled.html”的文件。（3）在“文件”面板中将“untitled.html”文件改名

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

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

8、为一个单元格。（13）选择第2行的第1个单元格，在“属性”面板中设置其宽度为“220”，然后按“Enter”键。（14）选择第2行的第2个单元格，在“属性”面板中设置其宽度为“540”，然后按“Enter”键。（15）选择第2行的第3个单元格，在“