总发本科《网页设计与制作实例教程》第12章 网站建设综合实例.ppt 46页VIP

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