第3章电子商务网站的实现工具.pptx
《第3章电子商务网站的实现工具.pptx》由会员分享，可在线阅读，更多相关《第3章电子商务网站的实现工具.pptx（98页珍藏版）》请在冰豆网上搜索。
0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW臧良运崔连和http:
/sw.qqhrE.comE-Mail:
第3章电子商务网站的实现工具北京大学出版社电电子子商商务务网网站站建建设设0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW本章知识结构框图学习激学习激励案例励案例导航导航站点设置站点设置及页面操及页面操作作表格的基表格的基本操作本操作样式和层样式和层的使用的使用模板的模板的使用使用站点设置页面属性设置文本操作图像操作表格的创建表格的编辑用表格进行页面布局CSS样式的概念、创建、设置、应用层的创建、编辑、应用模板概念创建模板编辑模板使用模板概述工作环境基本操作邵亦波规划网站、规划人生DreamweavDreamweaverer使用入使用入门门0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW本章知识要点学习方法本章知识要点本章知识要点1Dreamweaver的基本使用、站点置及面操作设页；2表格的基本操作；3式和的使用；样层4模式的使用。
本章学习方法本章学习方法上得纸来终觉浅,知此事要躬行！
大量的是本绝练习章的唯一法，上的例，用自己所的学习宝练习书实学知模存在的。
大量的识拟实际网页经过练，习Dreamweaver自然熟能生巧，手下自然妙会会“”生花。
键0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW学习激励与案例导航邵亦波邵亦波,1973年9月出生于上海。
1999年创建易趣网，出任首席执行官。
邵亦波先生11岁在有150人参赛的首届全国“华罗庚金杯”少年数学竞赛中获全国第三名；在初高中全国数学竞赛中连获特等奖与一等奖，成为中国中学数学竞赛中明星选手。
高二跳级直接进入全世界最著名的美国哈佛大学，是中国以全额奖学金赴哈佛读本科的第一人；成为应届毕业生中的最高荣誉生；1995-1997期间被世界最著名的两家策略咨询公司麦肯锡（McKinsey&Co.）与波士顿咨询集团（TheBostonConsultingGroup）争相聘请；1999年谢绝美国年薪达20万美元聘请，回上海创办易趣网。
1999年8月18日易趣网正式开通。
2000年公司继首期融资650万美金后，再次完成二期融资2050万美金。
入选“2000年度IT十大魅力男士”。
学生时代的邵亦波，经过努力、刻苦地学习，拥有了睿智的头脑，毕业后，在事业的征途上一展风骚，我们定要抓住今天大好的学习机遇，拼搏、进取。
0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.1Dreamweaver使用入门3.1.1Dreamweaver3.1.1Dreamweaver概述概述Dreamweaver主要有以下八项功能：
1Dreamweaver具有可视化编辑功能，可以快速创建Web页面而无需编写任何代码。
2Dreamweaver可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。
3Dreamweaver可以在Fireworks或其他图形应用程序中创建和编辑图像，然后将它们直接导入Dreamweaver，从而优化开发工作流程。
4Dreamweaver提供了其他工具，可以简化向Web页中添加Flash资源的过程。
0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW5Dreamweaver还提供了功能全面的编码环境，其中包括代码编辑工具（例如代码颜色、标签完成、“编码”工具栏和代码折叠）；有关层叠样式表（CSS）、JavaScript、ColdFusion标记语言（CFML）和其他语言的语言参考资料。
6Macromedia可自由导入导出HTML技术可导入手工编码的HTML文档而不会重新设置代码的格式，可以随后用编写者首选的格式设置样式来重新设置代码的格式。
7Dreamweaver还可以使用服务器技术（如CFML、ASP.NET、ASP、JSP和PHP）生成动态的、数据库驱动的Web应用程序。
8Dreamweaver可以完全自定义。
可以创建自己的对象和命令，修改快捷键，甚至编写JavaScript代码，用新的行为、属性检查器和站点报告来扩展Dreamweaver的功能。
0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.1.2Dreamweaver3.1.2Dreamweaver的工作环境的工作环境工作环境1第一次启动2起始页3工作界面图3-1工作区设置打开最近项目创建新项目从范例创建单击0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.1.3Dreamweaver3.1.3Dreamweaver的基本操作的基本操作包括新建文件打开文件保存文件浮动面板操作环境参数设置单击单击单击单击0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW直接创建使用菜单创建+新建文件方法+基于模板创建单击0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW图3-5Dreamweaver8使用菜单创建新网页首样首样返回0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW保存文件
（1）保存单个文件
（2）换名存盘（3）保存框架文件（4）保存为模板返回0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW面板的隐藏与显示位置调整+面板操作+重新组合返回0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW编辑首选参数首选参数对话框启动常常规规CSS样样式式标标记记色色彩彩字字体体等等0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.2.1Dreamweaver3.2.1Dreamweaver的站点设置的站点设置站点设置1站点建立2文件夹创建三大部分五个步骤编辑文件测试文件共享文件单击单击0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW五个步骤第一步新建站点第二步输入站点的名字及站点的地址第三步设定是否使用服务器技术第四步开发过程中文件的使用方法第五步设定浏览站点根目录的URL返回0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW网站文件夹的创建可以在磁盘文件中创建也可以在dreamweaver的浮动面板中创建0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.2.2Dreamweaver3.2.2Dreamweaver页面属性设置页面属性设置页面属性设置方法属性栏页面属性按钮菜单栏页面属性对话框快捷键Ctrl+J0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW页面属性设置包括1设置外观2设置链接3设置标题4标题/编码设置5跟踪图像单击单击单击单击0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW返回0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW图3-8链接属性设置返回0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW返回0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.2.3Dreamweaver3.2.3Dreamweaver文本操作文本操作1.输入文本和插入对象2文本属性设置3插入日期4插入水平线5插入邮件链接可在【插入】菜单下也可在【插入】面板中执行插入操作。
字体设置、文字大小设置、文字颜色设置【插入】【日期】【插入】【HTML】【水平线】【插入】【电子邮件链接】6插入特殊字符【插入】【HTML】【特殊字符】0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.2.4Dreamweaver3.2.4Dreamweaver的图像操作的图像操作图像操作图像的主要格式图像的日常操作主要有插入图像设置图像属性使用鼠标经过图像使用图像映射JPEGGIFPNG目前使用最多的是JPEG格式单击单击单击单击0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW
（1）在【入】的【常用】中，“插栏类别单击图像”。
；图标
（2）在【入】的【常用】中，“像”插栏类别将图拖入窗口中（如果正理代，拖入图标网页处码则“代”窗口中）；码视图（3）【入】【像】；选择插图（4）【窗口】菜的【源】示源面单击单资显资板，像【源】面板拖到窗口中的所将图从资网页需位置；（5）像【站点】面板拖到【文】窗口将图从档中的所需位置；（6）像面或文件中拖到中的所将图从桌夹网页需位置。
返回0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW返回0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW插入图像对象鼠标经过图像图3-11使用鼠标经过图像返回0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW图像地图指已被分为多个区域（或称“热点”）的图像；当用户单击某个热点时，会发生某种操作；例如，网页上有一个人体图片，单击眼睛会链接到眼部介绍页面，单击耳朵会链接到耳部介绍的页面，人体图片的每一个区域称为一个热点【链接】文本框中在“目标”下拉菜单可以选择链接文件打开的窗口，具体含义如下：
（1）_blank链接的文件在一个未命名的新浏览器窗口中打开；
（2）_parent链接文件在含有该链接的框架的父框架集或父窗口中打开。
如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中；（3）_self链接的文件在该链接所在的同一框架或窗口中。
此目标是默认的，所以通常不需要指定它；（4）_top将链接的文件载入整个浏览器窗口中，因而会删除所有框架。
0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.2.5Dreamweaver3.2.5Dreamweaver的链接操作的链接操作图像操作1基础知识2链接的基本操作绝对路径和相对路径链接目标虚拟链接脚本链接
（1）选中需要建立链接的文本或图像；
（2）在属性面板中设置要链接文件的路径及文件名。
（3）如果链接到邮件，则需要在邮箱地址前加上Mailto，0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.3表格与表单操作3.3.13.3.1表格的创建表格的创建包括1插入表格2选定表格
（1）确定在哪插入
（2）确定插入几行几列的表格（3）确定插入什么样的表格单击单击0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW图3-12“表格”对话框返回0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW一选择整个表格二选择表格的行三四五选择表格的列选择单元格选择区域0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW表格编辑1行列操作2尺寸调整3.3.23.3.2表格的编辑表格的编辑3单元格操作插入菜单修改菜单
（1）整体尺寸调整
（2）行列尺寸调整
（1）常规复制粘贴
（2）选择性粘贴（3）单元格的清除单击单击0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW返回0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.3.3用表格进行页面布局1表格在页面布局中的应用2表格布局的注意事项图3-17“表格”对话框严禁一表到底表格不可行、列同时拆分嵌套表格尺寸的设定要注意表格边框设置0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.4样式和层的使用3.4.1CSS3.4.1CSS样式表和样式表和DIVDIV层的概念层的概念样式和层的使用1CSS的含义2CSS样式的分类3层的含义4CSS+DIV的页面排版优越之处单击内联样式内部样式表外部样式表单击单击0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SWCSS是CascadingstyleSheet的，翻成中简称译文的含就是“式表”，一般作“义层叠样单称层叠样式表”，或“式表”。
上是一系列格式置样它实质设，控制规则它们Web面容的外。
使用页内观CSS置面格式，容表形式是相互分的。
设页时内与现开面容（页内HTML代）位于自身的码HTML文件中，而定代表形式的义码现CSS位于另一规则个文件（外部式表）或样HTML文的另一部分档（通常为部分）中。
使用CSS可以非常活更好地控制面的外，精确的布局灵并页观从定位到特定的字体和式等。
之所以叫“”是因样层叠同一段文字可以用多式表不同角度行为个样从进修，可以使用一式表置色，另外一饰个样设颜个式表置字体。
样设返回0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW层是一种HTML页面元素，可以将它定位在页面上的任意位置。
图层除了像表格一样可以设定背景、位置、自由移动、响应事件、控制显示外，还可以轻松建立三维效果，我们可以使网页中的对象在垂直方向互相重叠，再配合Timeline的应用可以做出意想不到的效果，使网页更加生动，动感十足。
返回0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW一表现和内容相分离二提高页面浏览速度三易于维护和改版0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.4.23.4.2样式表的创建样式表的创建创建方法用【文件】菜单的新建子菜单创建用样式浮动面板创建用文本菜单的CSS样式【文件】【新建】【CSS样式表】【窗口】【CSS式】样【文本】菜下【单CSS式】样子菜的【新建】单单击单击0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW图3-18新建CSS规则返回0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.4.33.4.3外部层叠样式表的链接外部层叠样式表的链接1【窗口】选择【CSS式】，也样可按下Shift+F11快捷；键图3-20接外部式表链样2在【CSS样式】面板中，单击【附加式表】按样，或面板钮单击该部右的三角按顶边出菜中钮从弹单选【附加式表】择样；3完成框置对话设，然后“确定”如单击图图3-19链接外部样式表图3-20链接外部样式表0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.4.43.4.4设置设置CSSCSS样式样式CSS规则定义中实际包括区块方框边框列表定位扩展类型背景0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW类型背景区块方框边框列表定位扩展0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW类型背景区块方框边框列表定位扩展图3-22CSS规则定义中的【类型】设置0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW类型背景区块方框边框列表定位扩展图3-23CSS规则定义中的【背景】设置0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW类型背景区块方框边框列表定位扩展图3-24CSS规则定义中的【区块】设置0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW类型背景区块方框边框列表定位扩展图3-25CSS规则定义中的【方框】设置0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW类型背景区块方框边框列表定位扩展0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW类型背景区块方框边框列表定位扩展图3-26CSS规则定义中的【列表】设置0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW类型背景区块方框边框列表定位扩展图3-27CSS规则定义中的【定位】设置0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW类型背景区块方框边框列表定位扩展图3-28CSS规则定义中的【扩展】设置0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.4.5CSS3.4.5CSS样式的应用样式的应用实际网页制作过程中，一般要先根据需要进行CSS样式设置，然后再用然后再用CSS样式对文本进行设置。
样式对文本进行设置。
0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW如何创建层？
（1）在【插入】面板中选择【布局】
（2）在菜单中选择【插入】。
3.4.63.4.6层的创建层的创建0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW2嵌套层
（1）概念。
所谓嵌套层是指包含在其他层中的层。
嵌套层能够确保该层能永远位于其父层的上方；
（2）创建方法。
创建嵌套层，首先将插入点放置在已创建的层中，然后选择主菜单【插入】下的【布局】选项，在下拉菜单中单击【层】插入嵌套层。
0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW1层的属性面板3.4.73.4.7层的编辑层的编辑在层的【属性】面板中可以设置层的各项属性，主要属性设置方法如下：
（1）【层编号】编辑框中设置当前层的名称；
（2）在【左】和【上】编辑框中设置层相对于页面或其父层左上角的位置（3）在【可见性】下拉列表框中设置层的可见性。
（4）【背景层图像】编辑框中输入层背景图像的名称和路径，【背景颜色】设置层的背景颜色；（5）【类】下拉列表框中选择已经设置好的CSS样式或新建CSS样式。
0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW2显示层面板【窗口】【层】即可显示或隐藏层面板，在层控制面板中，文档中的层都显示在层列表中，如果存在嵌套层，则以树状结构显示层的嵌套。
0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3调整层的大小调整层的大小，其操作方法有哪些？
（1）选中层，拖动其周围控制点调整层大小；
（2）选中层，按下Ctrl和方向键，每次增大或缩小1像素；（3）选中层，同时按下Ctrl+Shift键，然后按下方向键，可以使层的大小每次改变一个网格单位的距离；（4）在【属性】面板的【宽】和【高】编辑框中输入层的精确尺寸进行调整；（5）在网页编辑窗口中选中这些层，选择主菜单【修改】下的【对齐】选项，在下拉菜单中单击【设成宽度相同】或【设成高度相同】菜单，则以最后一个选中的层的大小为标准，调整其他层，使它们具有相同的宽度或高度。
也可在【属性】面板的【宽】和【高】编辑框中输入宽度和高度值，该值将应用于所有被选中的层。
0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW4移动层层的位置可以任意移动，其操作方法有三种：
（1）选中层，拖动层的边框；
（2）选中层，用小键盘上的方向键调整，每次移动像素；（3）选中层，按下Shift键和方向键，可以快速移动层，每次移动一个网格单位的距离。
0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW5对齐层对齐层操作时，先选中层，选择主菜单【修改】下的【对齐】命令，在其子菜单中选择对齐方式，对齐方式主对齐、右对齐、对齐上缘、对齐下缘。
6改变层的重叠顺序要在层面板中改变层的重叠顺序，操作方法如下：
（1）单击菜单【窗口】下的【层】命令，打开层面板；
（2）选择层并向上或向下拖动层。
在【Z轴】输入框中，单击层的Z值，并输入新值。
当输入比现有值大的数值时，该层将向上移动；如果输入比现有值小的数值时，该层将向下移动。
0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.53.5模板和框架的使用模板和框架的使用3.5.1什么是模板1网页模板的定义网页模板就是为了快速生成网站的各页面，而制作的的网页框架，使用网页编辑软件输入各个页面需要的内容，生成各个子页面。
其扩展名为dwt，2网页模板的本质模板的本质就是在一个普通的网页上定义了哪里可以编辑，哪里不可以编辑，可以编辑的地方在用模板生成的子页面上可以随意添加内容、更改内容，不可以编辑的地方则作为各自页面的公共特征存在。
0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3为什么要使用网页模板创建网页
（1）可以快速制作网站
（2）可以快速修改网站（3）降低制作成本（4）可以借鉴成熟经验0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.5.23.5.2创建模板创建模板1模板中的几个区域的概念1）可编辑区域是基于模板的文档中的未锁定区域；它是模板用户可以编辑的部分。
（2）重复区域是文档中设置为重复的布局部分。
（3）可选区域是在模板中指定为可选的部分，用于保存有可能在基于模板的文档中出现的内容（如可选文本或图像）。
（4）可编辑标签属性可以在模板中解锁标签属性，以便该属性可以在基于模板的页面中编辑。
0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW2具体操作步骤
（1）打开要另存为模板的文档，选择【文件】【打开】，然后选择文档打开；
（2）根据需要在文档中对可编辑区、重复区、可选区进行设置；（3）选择【文件】【另存为模板】如图3-29所示；（4）出现【另存为模板】对话框，如图3-29所示；（5）从【站点】弹出菜单中选择一个用来保存模板的站点，并在【另存为】文本框中为模板输入名称；（6）单击【保存】，完成整体模板的设计制作，以后仍然可以像普通网页一样打开模板，对其进行修改、完善。
单击0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW图3-29另存为模板对话框0303章章电电子子商商务务网网站站的的实实现现工工具具臧良运崔连和http:
/SW3.5.33.5.3编辑模板编辑模板编辑模板1模板的基本操作2定义模板的可编辑区3
升级会员 