网页设计与制作课件第12章 网站建设综合实例

（7）在“页面属性”的“分类”列表中选择“标题/编码”选项， 在其设置界面中设置标题为“经典数码在线”，然后单击“确定 ”按钮，完成页面属性的设置。
（8）回到Dreamweaver文档编辑界面，然后选择“插入→表格” 命令。
（9）在打开的“表格”对话框中设置表格行为为3，列数为3，宽度 为980像素，边框粗细、单元格边距和间距都设置为0。
件套装
</marquee>
（34）按照前面的操作方法在网页的其他要添加内容的位置上添加 相应的内容。
No Image
阶段3 设置CSS样式
（1）选择“窗口→CSS样式”命令，打开“CSS样式”面板。
No Image
（2）单击“CSS样式”面板上的“新建CSS规则”ImNaog按e 钮 ，打开“ 新建CSS规则”对话框。
onmouseout="info. start()" scrollamount="2" direction="up"
width="100%" height="120">
惠普 HP6515 智能手机 促销价5990元加1元 送512M
SD卡+地图套装加169元 赠价值300元的hw6515旅行
版配件套装加299元 赠价值500元的hw6515车载版配
➢ 以进行商品销售为主题的电子商务网站，包含 的产品信息非常丰富，在制作前需要花足够的 精力准备并整理好这些素材内容。
阶段3 创建本地站点
（1）打开Dreamweaver，选择“站点→新建站点”命令。
（2）在打开的“站点定义”对话框中进行设置，在“您打算为您的 站点起什么名字？”文本框中输入“shangwu”，然后单击“下 一步”按钮。
（22）在这个表格的第1、3、5行中分别输入文本内容。
（23）将光标插入“最新推荐”下面的单元格中，选择“插入→媒 体→Flash”命令，在打开的“选择文件”对话框中选择 “tuijian.swf”文件，然后单击“确定”按钮。
（24）在文档中可以看到插入光标的位置插入了一个Flash动画。
（25）在“最新上市”下面的单元格中插入一个4行4列的表格，然 后将第2行和第4行单元格分别合并为一个单元格。
热卖商品：这个栏目主要用于展示热销的、打特价的 产品，放在最新上市栏目的下面，也属于比较重要的 位置，让浏览者可以轻松找到自己需要的产品。
分类检索：在这个栏目中安排了其他商品的分类导航 链接。通过单击该链接，可以直接观看其他商品所在确定网站内容结构
阶段2 准备网站素材
（4）双击新建的“index.html”文件，在Dreamweaver的窗口中 打开。
（5）在Dreamweaver中选择“修改→页面属性”命令（左图）， 打开“页面属性”对话框（右图）。
（6）在对话框的“分类”列表中选择“外观”选项，在“外观”设 置界面设置字体为“宋体”，字体大小为“12像素”，文本颜色 为“#000000”，页面上、下边距都设置为“0” 。
（3）进入新的定义界面后，选中“否，我不想使用服务器技术”单 选按钮，然后单击“下一步”按钮。
（4）在新进入的设置界面中选中“编辑我的计算机上的本地副本 ，完成后再上传到服务器”单选按钮，在“您将把文件存储在计 算机上的什么位置”文本框中输入站点的保存地址，然后单击“ 下一步”按钮。
（5）在新进入的设置界面中，在“您如何连接到远程服务器”下拉 列表中选中“无”选项，然后单击“下一步”按钮。
（12）将光标插入“密码”文本域下面的单元格，然后选择“插入 →表单→按钮”命令，在光标插入的位置插入一个“提交”按钮 。
（13）重复上一步的操作，在这个单元格中再插入一个按钮，然后 将按钮所在单元格的对齐方式设置为“居中对齐”。
（14）选中“密码”文本域，打开“属性”面板，在其中选中“密 码”单选按钮，将这个文本域设置为密码域。
（5）在“分类”列表中选择“背景”项，进入“背景”设置界面。 将背景颜色设置为“CECECE”，在“背景图像”栏中输入 “images/icon.gif”，在“重复”下拉列表中选择“不重复” 选项，“水平位置”设置为5像素。
No Image
（6）在“分类”列表中选择“方框”选项，在其设置界面中设置“高”为 20像素，“填充上”为3像素，“填充左”为18像素。
No Image
（2）可以在文档中看到“会员注册”所在的单元格样式发生了变化 。
No Image
（3）用同样的方法为“产品搜索”和“产品分类”所在的单元格应 用样式“bar”。
No Image
（4）选中“登录”按钮，为其应用样式“button”，然后为“注 册”和“搜索”按钮都应用样式“button” 。
确定网站内容结构确定网站内容结构准备网站素材准备网站素材创建本地站点创建本地站点制作网站首页制作网站首页制作产品详细介绍页面制作产品详细介绍页面能力目标本章以创建一个专卖数码产品的电子商务网站为例详细介绍使用dreamweaver进行电子商务网站设计的完整过程
第12章 网站建设综合实例
任务1
实例效果
（10）单击“确定”按钮，在文档中插入一个3行3列，宽度为980 像素的表格。
（11）选中表格，在表格的“属性”面板中进行设置。在“对齐” 下拉列表中选择“居中对齐”选项，在“背景颜色”文本框中输 入“#FFFFFF”设置表格背景色为白色。
（12）选中表格第1行的3个单元格，打开“属性”面板，在面板中 单击“合并单元格”按钮，将这3个单元格合并为一个单元格。
（15）选中表格中插入的两个按钮，分别在“属性”面板中的“值 ”文本框中输入文本内容“登陆”和“注册”。
（16）将光标插入“产品搜索”下面新建表格的第一行单元格中， 选择“插入→表单→列表/菜单”命令，在光标插入的位置插入一 个列表/菜单。
（17）在“列表/菜单”的“属性”面板中单击“列表值”按钮。
No Image
（3）在“选择器类型”栏中选中“类”单选按钮，在“定义在”栏 中选择“仅对该文档”单选按钮，在“名称”文本框中输入 “bar”，然后单击“确定”按钮。
No Image
（4）在打开的“.bar的CSS规则定义”对话框中的“类型”设置界 面进行设置，将字体的粗细设置为“600”。
No Image
（9）在“会员注册”和“产品搜索”行下面的单元格中分别插入一 个3行1列，宽度为98%的表格。
（10）在“会员注册”所在单元格下面的新建表格中进行操作，将 光标插入表格的第1行，然后选择“插入→表单→文本域”命令 。
（11）在新插入的文本域前面输入文本内容“用户名：”，然后在 下面一个单元格重复操作插入一个文本域，并在其前面添加文本 内容“密码”。
（13）选择第2行的第1个单元格，在“属性”面板中设置其宽度为 “220”，然后按“Enter”键。
（14）选择第2行的第2个单元格，在“属性”面板中设置其宽度为 “540”，然后按“Enter”键。
（15）选择第2行的第3个单元格，在“属性”面板中设置其宽度为 “220”，然后按“Enter”键。
任务2
实例分析
任务3
实例制作
任务4
制作网站首页
任务5 制作产品详细介绍页面
任务1 实例效果
➢ 本章以创建一个专卖数码产品的电子商务网站为例，详细介绍使 用Dreamweaver进行电子商务网站设计的完整过程。本实例的重 点，在于合理的安排页面内容，使用适当的内容安排来凸显商务 网站的功用。
任务2 实例分析
（3）在开始插入光标的单元格中插入了选中的图像。
（4）选中表格第2行左边的第1个单元格，在“属性”面板的“背景 颜色”文本框中输入“E6E6E6”，设置这个单元格的背景颜色 。
（5）选中表格第2行的第3个单元格，在“属性”面板的“背景颜色 ”文本框中输入“E7E7E7”，设置这个单元格的背景颜色。
➢ 电子商务网站，主要是展示商品信息并提供在 线交易，其中在线交易需要进行复杂的数据程 序设计；同时，画面美观、结构清晰、分类准 确等因素，也是影响用户浏览点击的重要因素
➢ 网站页面设计的重要目标是让用户清晰地了解 和选购商品的流程。本实例在首页安排了“最 新推荐”、“最新上市”和“热卖商品”3个 展示栏目，然后还安排了其他商品的分类检索 栏目。
（18）在打开的“列表值”对话框中添加列表项，然后单击“确定 ”按钮。
（19）在列表/菜单下面的单元格中再插入一个文本域和按钮，然后 修改按钮的值为“搜索”。
（20）将光标插入最外层表格第2行第2个单元格中，选择“插入→ 表格”命令，在单元格中插入一个6行1列，宽度为98%的表格。
（21）将这个表格所在单元格的垂直对齐方式设置为“顶端”，然 后将表格的水平对齐方式设置为“居中对齐” 。
No Image
（7）单击“确定”按钮，完成该样式的创建，在“CSS样式”面板 中可以看到刚创建的样式。
No Image
（8）按照上面介绍的方法，完成其他样式的创建。
No Image
阶段4 应用CSS样式
（1）打开“CSS样式”面板，在文档中按住“Ctrl”键选中“会员 注册”所在的单元格，然后在“CSS样式”面板的“bar”样式 上单击鼠标右键，在弹出的快捷菜单中选择“套用”命令。
最新推荐：这个栏目以滚动产品图像的形式来展示推 荐的图像，由Flash动画来完成效果，放在首页的最醒 目位置，以吸引浏览者的注意力，增加浏览者对该商 品的印象。
最新上市：这个栏目主要用于展示目前最新产品，放 在最新推荐栏目的下面，属于第2重要的位置。浏览器 可以第一时间了解数码产品的最新行情。
（16）选择表格最后一行的3个单元格，然后在“属性”面板中单击 “合并单元格”按钮，将这3个单元格合并为一个单元格。
阶段2 添加网页内容
（1）将光标插入表格的第1行，然后选择“插入→图像”命令。
（2）在打开的“选择图像源文件”对话框中选择要插入的图像，这 里双击“image”文件夹，在其中选择“ima”文件，然后单击 “确定”按钮。
（1）选择“窗口→文件”命令打开“文件”面板，在面板中选中 “shangwu”站点，在站点上单击鼠标右键，在弹出的快捷菜单 中选择“新建文件”命令。
（2）可以看到在“文件”面板中，新建了一个名为 “untitled.html”的文件。
（3）在“文件”面板中将“untitled.html”文件改名为 “index.html”，作为网站的首页文件。
（28）在这个图像后面的单元格中输入商品价格信息。
（29）重复上面的操作，在这个表格的其他位置插入产品图像和价 格信息。
（30）将光标插入这个表格的最后一行，在“属性”面板中将水平 对齐方式设置为右对齐，然后输入文本内容“more”。
（31）在下面的“热卖商品”栏中，按照上面的方法完成产品图像 的插入和价格信息的添加。
No Image
（32）将光标插入最外面表格的第2行第3个单元格，将其对齐方式 设置为顶端对齐，然后在其中插入一个6行1列，宽度为95%的表 格，并在其中输入文本内容。
（33）将光标插入“最新公告”下面的单元格，然后切换 到“拆分”视图，在<td>和</td>标签中间输入以下 内容。
<marquee id="info" onmouseover="info. stop()"
（6）进入“总结”界面后，单击“完成”按钮，完成站点的创建。
（7）在Dreamweaver中的“文件”面板中，可以看到创建完成的 站点。
任务4 制作网站首页
➢ 在这个网站的首页中，主要展示最新推 荐产品信息、最新上市产品信息和一些 热卖商品信息，以及会员登陆、产品搜 索和分类检索信息等。
阶段1 制作网页框架结构
（26）将这个表格中第1行的第1个单元格的宽度设置75像素，第2 个单元格宽度设置为189像素，第3个单元格的宽度设置为75像 素，第4个单元格的宽度设置为189像素。
（27）将光标插入表格第1行第1个单元格，选择“插入→图像”命 令，在打开的“选择图像源文件”对话框中选择要插入的图像， 然后单击“确定”按钮插入一个图像。
（6）将光标插入表格第2行的第1个单元格中，选择“插入→表格” 命令，在打开的“表格”对话框中设置表格的行为6，列为1，宽 度为95%，然后单击“确定”按钮。
（7）在开始插入光标的单元格中，可以看到已经插入了一个6行1列 ，宽度为95%的表格。
（8）在这个新插入的表格的第1、3、5行分别输入文本内容“会员 注册”，“产品搜索”和“产品分类” 。