项目十二制作电子商务网站 课件 -2022-2023学年高二下学期（中职）《网页设计与制作》（华南理工版）

项目十二制作电子商务网站 在前面的章节中介绍了制作网站的基础知识。在本项目中，通过制作电子商务网站任务，生动地向读者展示网站分析、网站制作前的准备工作，制作网站首页以及制作产品详细页面等知识，进一步了解一个完整网站的操作方法。 目录 任务 制作电子商务网站 准备知识 下载QQ2013工具软件 实例效果 实例分析 制 作 电 子 商 务 网 站 任务实施 李雪是某网络公司的工程师，公司接到一个制作电子商务网站的新任务。需要在网页展示最新产品动态以及详细说明，同时还要能够进行会员登录、产品搜索和分类检索信息等。 制 作 电 子 商 务 网 站 任务：制作电子商务网站 任务分析： 理解牢记！ 由于Dreamweaver是集网页制作和管理网站于一身网页编辑器软件，利用它可以制作出跨越平台限制和跨越浏览器限制的充满动感的网页。因此，李雪决定使用Dreamweaver来完成此任务。 任务：制作电子商务网站 任务 实施 制作电子商务网站 1.制作电子商务网站首页 第一：制作网页框架结构 （1）选择“窗口”→“文件”命令打开“文件”面板，在面板中选中“shangwu”站点，在站点上右击，在弹出的快捷菜单中选择“新建文件”命令，如下图所示。 （2）可以看到在“文件”面板中，新建了一个名为“untitled.html”的文件，如下左图所示。 （3）在“文件”面板中将“untitled.html”文件改名为“index.html”，作为网站的首页文件，如下右图所示。 （4）双击新建的“index.html”文件，在Dreamweaver的窗口中打开，如下图所示。 （5）在Dreamweaver中选择“修改”→“页面属性”命令，如下左图所示，打开“页面属性”对话框，如下右图所示。 （6）在对话框的“分类”列表中选择“外观”选项，在“外观”设置界面设置字体为“宋体”，字体大小为12像素，文本颜色为“#000000”，页面上、下边距都设置为0，如下图所示。 （7）在“页面属性”的“分类”列表中选择“标题/编码”选项，在其设置界面中设置标题为“经典数码在线”，然后单击“确定”按钮，如下图所示，完成页面属性的设置。 （8）回到Dreamweaver文档编辑界面，然后选择“插入”→“表格”命令，如下图所示。 （9）在打开的“表格”对话框中设置表格行数为3，列数为3，宽度为980像素，边框粗细、单元格边距和间距都设置为“0”，如下图所示。 （10）单击“确定”按钮，在文档中插入一个3行3列，宽度为980像素的表格，如下图所示。 （11）选中表格，在表格的“属性”面板中进行设置。在“对齐”下拉列表中选择“居中对齐”选项，在“背景颜色”文本框中输入“#FFFFFF”设置表格背景色为白色，如下图所示。 （12）选中表格第1行的3个单元格，打开“属性”面板，在面板中单击“合并单元格”按钮，将这3个单元格合并为一个单元格，如下图所示。 （13）选择第2行的第1个单元格，在“属性”面板中设置其宽度为220，如下图所示，然后按“Enter”键。 （14）选择第2行的第2个单元格，在“属性”面板中设置其宽度为540，如下图所示，然后按“Enter”键。 （15）选择第2行的第3个单元格，在“属性”面板中设置其宽度为220，如下图所示，然后按“Enter”键。 （16）选择表格最后一行的3个单元格，然后在“属性”面板中单击“合并单元格”按钮，将这3个单元格合并为一个单元格，如下图所示。 第二：添加网页内容 在前面已经把网页的基本框架构建好了，接下来就开始为其添加各部位的内容，其操作步骤如下。 （1）将光标插入表格的第1行，然后选择“插入”→“图像”命令，如下图所示。 （2）在打开的“选择图像源文件”对话框中选择要插入的图像，这里双击“images”文件夹，在其中选择“ima”文件，然后单击“确定”按钮，如下图所示。 （3）在开始插入光标的单元格中插入了选中的图像，如下图所示。 （4）选中表格第2行左边的第1个单元格，在“属性”面板的“背景颜色”文本框中输入“#E6E6E6”，设置这个单元格的背景颜色，如下图所示。 （5）选中表格第2行的第3个单元格，如下图所示，在“属性”面板的“背景颜色”文本框中输入“#E7E7E7”，设置这个单元格的背景颜色。 （6）将光标插入表格第2行的第1个单元格中，选择“插入”→“表格”命令，在打开的“表格”对话框中设置表格的行数为6，列数为1，如下图所示，宽度为95%，然后单击“确定”按钮。 （7）在开始插入光标的单元格中，可以看到已经插入了一个6行1列，宽度为95%的表格，如下图所示。 （8）在这个新插入的表格的第1、3、5行分别输入文本内容“会员注册”“产品搜索”和“产品分类”，如下图所示。 （9）在“会员注册”和“产品搜索”行下面的单元格