第9次讲稿电子商务网站建设与维护课程讲稿

1、授课题目第四章 电子商务网站的实现工具Dreamweaver8备注授课方式讲授课时2授课时间教学班级授课地点教学目标1创建模板2重命名模板3删除模板文件4建立可编辑区域5其他模板区域教学重点DreamWeaver网站建设第四步-主页制作教学难点DreamWeaver 8网站建设第五步-模板设计教学内容、过程、方法一、组织教学查考勤、巡视桌面、准备上课二、导入新课电子商务专业的学生都知道，全面掌握网站建设的基本理论，熟悉使用DreamWeaver 8、Photoshop等工具，才可以把自己的创业理念变成实实在在的电子商务网站。可是网站如何才能获得收益呢？看一看天府早报的这篇报导，相信你会有所收获

2、对同学们讲述案例：这是典型的电子商务网站运营失败的案例，掌握电子商务网站的运营，是网站建设十分重要的一环。三、新课教学第五节DreamWeaver 8网站建设第四步-主页制作案例一、站点设置、目录建立、页面设置、样式设置四项工作完成之后，我们接着就要进行主页制作。步骤01：头部表格制作（1） 绘制1行1列表格；步骤02：导航表格制作（1）绘制1行1列表格；（2）设置表格参数：宽823像素，高30像素；其它参数设置同步骤01。步骤03：功能栏目制作在导航下部是一个具有时间显示、搜索等功能的栏目，其制作方法是是：（1）绘制1行3列表格；（2）设置表格参数：宽823像素，高35像素；步骤04：体部表

3、格制作（1）绘制1行2列表格；（2）其中第一列宽度为153像素步骤05：尾部表格制作(1)绘制1行1列表格；（2）参数设置为：宽823像素，高60像素，其它参数同上。说明：上述四步骤，集中建立了表格的结构，每一步制定时都不要忘记进行居中处理。步骤06：对头部表格添加内容点击菜单【插入】【图像】根据提示找到图像文件，直接插入到表格中，最终效果如图4-43所示。步骤07：为导航栏添加内容（1） 设置导航背景颜色为#008FD5；（2） 录入菜单汉字，中间用“|”分隔；（3）设置样式表，【文本】【CSS样式】【新建】，将样式表文件命名为menu1，设（4）将导航栏样式设置为menu1 步骤08：为功

4、能栏目添加内容（1）在第1列中录入汉字：“本站时间：”左其后点击【插入】【日期】，选择合适的日期格式，并选择适当的时间格式，单击“确定”按钮，插入日期时间；（2）在第2列中录入（3）将第3列背景色设置为#8ECFFF；（4）在第3列中插入表单，在表单中依次插入文本框、按钮、列表框，并对其进行相应设置；最终效果如图4-47所示。步骤09：制作左侧嵌套表格（1）左则是由四个表格上下排列组成，每个表格均为2行1列，因此先建一个2行1列表格，其宽度为100%像素，高度可先设置为200像素，其中第一行30像素。具体高度可根据图片进行调整；（2）设置表格背景颜色为#DDF5FF；（3）在第一列中插入“招生

5、公告”图片；（4）复制整个表格，粘贴三次，并修改每一个表格头部图片；（5）向相应表格中输入文字。步骤10：制作右侧嵌套表格，将右侧结构制作完毕右侧表格制作方法与左侧原理相同，操作大同小异。请大家按以下顺序进行制作。（1）在尾部直接录入汉字，设置样式表文件即可。二、主页制作技巧三则1我在网页中复制的文字，粘贴到DreamWeaver 8中时，他总是带有原来网页的格式，请问如何只复制其中的文本文字呢？答：在DreamWeaver 8中复制和粘贴文本有两种，一是标准的方式，也就是您使用的那种方式；另一种就是仅复制粘贴文本，他忽视了HTML格式，只复制文本，方法是在复制和粘贴时多按一个“Shift”键

6、。2有的网页图片链接很特别，鼠标放上去时他就会发生变化，变成另外的图片，请问如何制作？答：这个就是替换图片链接，没有单击时是一张图片，当把鼠标移动到图片上的时候变成了另一张图片，利用DreamWeaver 8能方便地制作这种替换链接。预备两张大小相同的图片，先在网页上放一张图片，然后在“图片属性”对话框中的Link中配置图片指向的链接，按“F8”键开启“Behaviors”对话框，单击“+”号，选择“Swap Image”开启“Swap Image”配置视窗，点选“Browse”配置需要替换的图片，单击“OK”。3我在网上下载了许多DreamWeaver 8插件，如何使用他们呢？答：Dream

7、Weaver 8具备插件管理器Extension Manager，他能够实现插件的全自动管理，您能够到下载得到。安装后，就能够从DreamWeaver 8中启动管理器。具体方法是选择“Command/Manage Extensions”命令启动管理器。三、Hao123首页的制作剖析网址之家（）是一个非常简洁的主页，我们以表格排版的方式，用DreamWeaver 8做为实现工具，具体剖析其排版方法，以期抛砖引玉，引发大家的智慧思考，促成学生网站制作技术的成熟。1整体结构 网址之家用DreamWeaver 8做为实现工具，可以用九个表格来实现。当然，不同人制作可能采用的表格数量不相同。各表格功能如

8、下： （1）第一个表格，放网页第一行内容，即邮箱登录部分所在的行；（2）第二个表格，放置第二行，即Logo所在行；（3）第三个表格，放置第三四行，即百度工具行；（4）第四个表格，放置第五行，即导航所在行；（5）第五个表格，放置体部内容，这个表格划分两列，每一列通过嵌套又增加了许多行，用以放置更多的网址链接；（6）第六个表格，放置实用查询、常用软件、游戏专题、好站轮播等内容；（7）第七个表格，放置百度查询；（8）第八个表格，放置网站的“本站帮助”等网站的尾部内容。2表格的制作该网站，用表格实现极为简单，在实际制作时，注意体部表格嵌套的实现，同时注意绿色边框的实现技巧。3预览时不能出现表格的边框。

9、第六节 DreamWeaver 8网站建设第五步-模板设计在我们制作网站的过程中，为了统一风格，很多页面会用到相同的布局、图片和文字元素。为了避免大量的重复劳动，可以使用DreamWeaver 8提供的模板功能，将具有相同版面结构的页面制作为模板，将相同的元素（如导航栏）制作为库项目，并存放在库中供随时调用。一、创建模板模板的创建有三种方式。1直接创建模板选择【窗口】【资源】命令，打开“资源”面板，切换到模板子面板，如图4-50所示。单击模板面板上的“扩展”按钮，在弹出菜单中选择“新建模板”，此时，在浏览窗口出现一个未命名的模板文件，给模板命名。如图4-51所示。然后单击“编辑”按钮，打开模板

10、进行编辑。编辑完成后，保存模板，完成模板建立。2将普通网页另存为模板 打开一个已经制作完成的网页，删除网页中不需要的部分，保留整个网站各页面共同需要的区域。选择“文件/另存为模板”命令将网页另存为模板。在弹出的“另存模板”对话框中，“站点”下拉列表框用来设置模板保存的站点。“现存的模板”选框显示了当前站点的所有模板。单击“另存模板”对话框中的“保存”按钮，就把当前网页转换为了模板，同时将模板另存到选择的站点。单击“保存”按钮，保存模板。系统将自动在根目录下创建Template文件夹，并将创建的模板文件保存在该文件夹中。在保存模板时，如果模板中没有定义任何可编辑区域，系统将显示警告信息。我们可以

11、先单击“确定”，以后再定义可编辑区域。3、从文件菜单新建模板选择【文件】【新建】命令，打开“新建文档”对话框，然后再类别中选择“模板页”，并选取相关的模板类型，直接单击“创建”按钮即可。二、重命名模板若要在“资源”面板中重命名模板，请执行以下操作：1在“资源”面板（【窗口】【资源】）中，选择面板左侧的“模板”类别2重命名单击模板的名称以选择该模板。 3再次单击模板的名称以便使文本可选，然后输入一个新名称。 这种重命名方式与在 Windows 资源管理器中对文件进行重命名的方式相同。4若要更新站点中所有基于此模板的文档，请单击“更新”。如果不想更新基于此模板的任何文档，则单击“不更新”。 三、删

12、除模板文件1在“资源”面板（【窗口】【资源】）中，选择面板左侧的“模板”类别。2重命名单击模板的名称以选择该模板。3单击面板底部的“删除”按钮，然后确认要删除该模板。 一旦删除模板文件，则无法对其进行检索。该模板文件将被从站点中删除。基于已删除模板的文档不会与此模板分离；它们保留该模板文件在被删除前所具有的结构和可编辑区域。四、建立可编辑区域模板创建好后，要在模板中建立可编辑区，只有在可编辑区里，我们才可以编辑网页内容。可以将网页上任意选中的区域设置为可编辑区域，但是最好是基于HTML代码的，这样在制作的时候更加清楚。在文档窗口中，选中需要设置为可编辑区域的部分，单击常用快捷栏的“模板”按钮，

13、在弹出菜单中选择“可编辑区域”项。如图4-54所示。在弹出的“新建可编辑区域”对话框中给该区域命名，然后单击“确定”按钮。新添加的可编辑区域有蓝色标签，标签上是可编辑区域的名称。如果希望删除可编辑区域，可以将光标置于要删除的可编辑区域内，选择“修改/模板/删除模板标记”命令，光标所在区域的可编辑区即被删除。这样模板文件就创建好了。五、其他模板区域模板中除了可以插入最常用的“可编辑区域”外，还可以插入一些其他类型的区域，分别为“可选区域”、“重复区域”、“可编辑可选区域”和“重复表格”。1、可选区域可选区域是模板中的区域，用户可将其设置为在基于模板的文件中显示或隐藏。当要为在文件中显示的内容设置

14、条件时，即可使用可选区域。2、重复区域重复区域时可以根据需要在基于模板的页面中负值任意次数的模板部分。重复区域通常用于表格，也可以为其他页面元素定义重复区域。3、可编辑可选区域是可选区域的一种，可以设置显示或隐藏所选区域，并且可以编辑该区域中的内容。1制作返回前页按钮在拆分视图状态下，在按钮代码中添加onClick=javascript:window.history.go(-1)2制作关闭窗口按钮在拆分视图状态下，在按钮代码中添加onClick=javascript:window.close()3制作带背景颜色的按钮用CSS样式4制作打印该页按钮在拆分视图状态下，在按钮代码中添加onClick

15、=javascript:window.print()表单主要用来得到用户的反馈信息，如进行会员注册、网上调查、信息反馈等，然后将这些信息提交给服务器进行处理。本次制作实务主要引领大家用DreamWeaver 8制作表单。1创建电子邮件表单（1）选择“插入-表单-表单”，在属性面板中，将表单名称设置为form1，在“动作”文本框中输入，选择post方法（2）在表单中插入7行2列的表格，将背景颜色设置为#f5f5f5，将第一行-第六行单元格背景颜色设置为#ffffff，在第1列单元格中输入相应的文字，将光标置于第1行第2列单元格中，选择“插入-表单-文本域”属性改为单行文本，最多20个字符（3） 在地区后插入“列表/菜单”点击加号添加新项目“北京、上海、广东”2如何更改文件域的样式选中文件域，在拆分视图状态下，修改文件域代码如下，<input type=”file” style=”border:1px solid blue;background:green;” name=”file”>注：border:表示边框的粗细；Solid:表示边框颜色，这里设置为蓝色（blue）；Background:表示背景颜色，这里设置为绿色(green)3如何避免表单撑开表格将<form>标签放在<tr>和<t