《新编网页制作三剑客培训教程》课件第1章

教学目标：通过学习本章内容，要求读者了解目前网页制作的发展趋势、网站开发流程以及网页开发所必需的工具软件的基本情况。掌握DreamweaverCS3的安装、启动和关闭方法。熟悉DreamweaverCS3的工作环境，学会在DreamweaverCS3中建立站点，以便在今后的章节中更好地学习并掌握DreamweaverCS3软件。【本章要点】:

网页制作的发展趋势 网站开发流程 网页开发工具第1章网页制作概述1.1 网页制作的发展趋势1.2 网站开发流程1.3 网页开发工具1.4 Dreamweaver概述1.5 安装、启动和关闭DreamweaverCS31.6 DreamweaverCS3的工作环境1.7 建立站点第1章网页制作概述

随着网络带宽的不断加大，人们已经不满足于由大量文字和少量图片内容构成的网页，而是更加热衷于多媒体网页，如：各种音乐网站、电影网站，以及实时的音、视频信息网站等。1.1网页制作的发展趋势1.确定主题确定主题就是为网站选择一个题目，比如：个人网站、某某课程教学网站或某某企业门户网站等，不同的主题，对其网站结构的要求也不尽相同。1.2网站开发流程2.规划结构结构是一个网站的骨架，一个好的网站结构可以减少网站制作过程中不必要的重复劳动。规模稍大一点的网站一般都要有规划结构图。当然，如果网站规模非常小，也可以边制作边修改，比如个人网站。在网站规划结构图中一般要有网站主题、页面主题、网页文件名以及各页面之间的隶属关系等要素。下面通过一个以奥运为主题的网站规划结构图对此加以说明，如图1-1所示。1.2网站开发流程图1-1网站规划结构图3.整理素材网页素材包括：文本、图像、声音、动画以及视频等。整理网页素材是按照网站结构所规划的内容，将所有网页中涉及到的素材，分门别类地整理到相应的文件夹中备用。并且最好指明每一部分所属的网页名称，为接下来制作网页做好准备。这样，就可以在真正制作网页的过程中避免缺东少西，分散精力。况且，有时候整理素材和制作网页并不一定由同一个人完成，特别是，整理素材者是对网站内容比较熟悉的人，而制作网页者是网页制作技术人员时，整理素材就显得尤为重要。1.2网站开发流程4.制作网页制作网页就是根据每个网页的主题将所需素材按照一定的排版形式集成到网页中，然后，再按照“规划结构”中的要求，使用超级链接将所有网页链接起来，就形成了网站。1.2网站开发流程5.上传发布上传发布就是将制作好的网站文件，上传到网络服务器中发布出去。这样，网上的用户就可以通过网络访问、浏览发布的网站信息了。网络服务器可以是Internet广域网，也可以是校园网和政府网等局域网。1.3网站开发工具

网站开发工具很多，除了直接制作网页的工具以外，网页中使用的素材也需要专门工具来处理，目前尚没有能够完成所有任务的网页制作工具，一般都需要多个软件配合使用才能够顺利完成网页制作任务。比如：图片素材制作工具、动画素材制作工具以及声音、视频素材处理工具等。下面简要介绍一下目前比较流行的各种工具。1.3网站开发工具

1.3.1网页制作工具1.3.2图像制作工具1.3.3动画制作工具1.3.1网页制作工具1.AdobeDreamweaverCS3Adobe和Macromedia两家公司重叠的产品是在图形处理方面，Adobe的Photoshop和Illustrator领先于Macromedia的Fireworks和Freehand；在Web设计方面，Macromedia的Dreamweaver则领先于Adobe的网页制作工具GoLive。两家公司的合并使AdobeDreamweaverCS3在图形处理方面的功能更强大。1.3.1网页制作工具2.MicrosoftOfficeFrontpageFrontpage是Microsoft公司开发的Office套装组合工具中的网页制作工具，目前版本是Frontpage2007。Frontpage与Dreamweave在主要功能上差不多，但前者提供了非常丰富的模板，也提供了对网站的管理。Frontpage采用Word的编辑方式编辑网页，对于初学者来说是不错的选择。然而，也正是因为Frontpage采用与Word相似的编辑方式，导致使用该工具生成的网页代码非常庞大，实际上网页中包含了许多无用的代码，也可以称为“垃圾代码”。这样网页的数据量就比较大，在网页发布后，会影响到下载浏览的速度。1.3.2图像制作工具1.AdobeFireworksCS3Fireworks原来是由Macromedia公司发布的一种专门处理网页图像的软件工具，最后版本是Fireworks8.0。用MacromediaFireworks8，可以在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。业界领先的Fireworks优化工具可帮助在最佳图像品质和最小压缩尺寸之间达到平衡。它与MacromediaDreamweaver和MacromediaFlash共同构成的集成工作流程，可以创建并优化网页、图像和动画，是业界公认的网页制作三剑客。1.3.2图像制作工具2.AdobePhotoshopPhotoshop是由Adobe公司发布的一种目前最著名的图像处理软件工具，目前版本是PhotoshopCS3(相当于PhotoshopV10.0)。该软件对图像处理的方式非常丰富，特别是其滤镜功能更是丰富多彩，它是集平面广告设计、图像处理、数码照片处理和网页图像处理于一身的不可多得的图像处理软件。3.AdobeImageReadyImageReady也是Adobe公司开发主要用于制作Web图形的软件工具，目前版本是Image-ReadyCS3，为用户提供了网页图形的集成开发环境，是一款优秀的图像制作工具。其界面和操作都类似于Photoshop，因此熟悉Photoshop的人很容易上手。它可以用层的技术编辑图像，直接完成对图形的Web优化操作，并支持将文件输出为JPEG、GIF和PNG等图形格式。它也可用于制作动画，并将图像直接生成HTML代码。1.3.3动画制作工具1.AdobeFlashFlash最初是Macromedia公司专门为网页动画设计开发的一种动画制作工具，由Macromedia公司发布的最后版本是Flash8.0。该软件采用矢量图形技术，其制作的动画数据量非常小，特别适合网络传输；它的打包文件采用流媒体播放技术，使得其网上播放非常流畅。除此之外，Flash还是一个不错的网页制作工具，有人用它直接制作Flash网站，过渡效果也比较好，不过事后维护稍微麻烦一些。2.GIFAnimstorGIFAnimstor是一套专门制作动画的工具，在Flash没有出现和网络没有普及之前就已经很流行了，通常讲的GIF动画就是由它生成的。GIF动画的特点是256色，视觉效果不太好，但文件非常小。GIFAnimstor曾一度被人遗忘，在网络普及之后，由于其生成的动画文件非常小，特别适合网络传输，所以经常被用来专门制作网上的一些小动画，如图标和按钮等。1.4Dreamweaver概述1.4.1Dreamweaver简介1.4.2DreamweaverCS3的新功能1.4.1Dreamweaver简介1.业界领先的网页制作工具

AdobeDreamweaverCS3几乎利用了世界级Web设计工具的所有灵活性和强大功能：在【设计】视图中进行像素完美型设计，在【代码】视图中制作复杂的代码，或专攻一方面的设计。总之，AdobeDreamweaverCS3以最佳的工作方式进行工作。2.集成的工作流程利用DreamweaverCS3设计、开发和维护网站内容，同时还可利用它与其他Adobe工具(包括AdobeFlashCS3Professional、FireworksCS3、PhotoshopCS3、ContributeCS3以及用于创建移动设备内容的全新AdobeDeviceCentralCS3)智能集成进行工作。1.4.1Dreamweaver简介3.完整的CSS支持可视化CSS工具的优势在于使用这些工具可以轻松地在文件内或文件之间查看、编辑和移动样式，以及查明更改将如何影响设计。AdobeDreamweaverCS3借助全新的CSS布局加速工作流，并借助全新的浏览器兼容性检查功能测试网站。4.集成的编码环境

AdobeDreamweaverCS3借助代码折叠、彩色编码、行号及带有注释与取消注释和代码片段的编码工具条，组织并加快编码过程。1.4.1Dreamweaver简介5.支持领先的技术

AdobeDreamweaverCS3借助代码折叠、彩色编码、行号及带有注释与取消注释和代码片段的编码工具条，组织并加快编码过程。AdobeDreamweaverCS3能够支持领先的Web开发技术，包括HTML、XHTML、CSS、XML、JavaScript、Ajax、PHP、AdobeColdFusion、ASP、ASP.NET和JSP。6.轻松的XML

AdobeDreamweaverCS3可以使用XSL或适合于Ajax的Spry框架，快速集成XML内容。当鼠标指向XML文件或XMLfeedURL时，DreamweaverCS3将显示其内容，这样用户就能够将适当的字段拖放到网页上。1.4.1Dreamweaver简介7.FLV支持无需任何Flash知识，只需5次点击，用户即可轻松地将FLV文件添加到Web网页中。用户可以自定义视频环境以匹配网站。8.跨平台支持

DreamweaverCS3平台可用于基于Intel或PowerPC的Macintosh计算机，也可用于WindowsXP和WindowsVista™系统。可在首选平台中设计，然后跨平台发布。1.4.2AdobeDreamweaverCS3的新功能1.适合于Ajax的Spry框架2.Spry数据3.Spry窗口组件4.Spry效果5.AdobePhotoshop与Fireworks集成6.浏览器兼容性检查7.CSSAdvisor网站8.CSS布局9.CSS管理10.AdobeDeviceCentral1.4.2AdobeDreamweaverCS3的新功能1.适合于Ajax的Spry框架使用适合于Ajax的Spry框架，以可视方式设计、开发和部署动态用户界面，增加交互性、响应速度和可用性。2.Spry数据使用XML可以从RSS服务或数据库将数据集成到Web网页中，同时很容易对集成的数据进行排序和过滤。1.4.2AdobeDreamweaverCS3的新功能3.Spry窗口组件用户利用适合于Ajax的Spry框架的窗口组件，可以轻松地将常见界面组件(如：列表、表格、选项卡、表单验证和可重复区域)添加到Web网页中。4.Spry效果用户利用适合于Ajax的Spry效果，可以轻松地向页面元素添加视觉过渡，以使它们扩大选取、收缩、渐隐和高光等效果。1.4.2AdobeDreamweaverCS3的新功能5.AdobePhotoshop与Fireworks集成

AdobePhotoshop与Fireworks集成后，用户可以直接从AdobePhotoshopCS3或FireworksCS3复制和粘贴图像内容到DreamweaverCS3中，作为网页素材使用。6.浏览器兼容性检查全新的浏览器兼容性检查，能够节省时间并确保用户在进行跨浏览器和跨操作系统操作时，具有更加一致的体验。同时，在生成识别各种浏览器中与CSS相关的问题的报告时不需要启动浏览器。1.4.2AdobeDreamweaverCS3的新功能7.CSSAdvisor网站用户可以借助全新的CSSAdvisor网站(一个具有丰富的解决方案和见解的在线社区)，查找浏览器特定CSS问题的快速解决方案。8.CSS布局用户可以借助全新的CSS布局，将CSS轻松合并到网站项目中。在每个模板中都有大量的注释用以解释布局，这样初级和中级设计人员可以快速学会布局。CSS布局可以为用户的项目自定义每个模板。1.4.2AdobeDreamweaverCS3的新功能9.CSS管理从行中到标题、从标题到外部表、从文档到文档或者在外部表之间，清除旧页面中的CSS从未像现在这样容易。10.AdobeDeviceCentral

用户可以使用AdobeDeviceCentral(现在已集成到整个AdobeCreativeSuite3中)设计、预览和测试移动设备内容。1.5安装、启动和关闭DreamweaverCS31.5.1安装DreamweaverCS31.5.2启动DreamweaverCS31.5.3关闭DreamweaverCS31.5.1安装DreamweaverCS3(1)双击DreamweaverCS3安装盘或安装文件目录中的“Setup.exe”文件，如图1-2所示，弹出【正在初始化AdobeDreamweaverCS3】对话框，如图1-3所示。图1-2安装文件目录图1-3【正在初始化AdobeDreamweaverCS3】对话框1.5.1安装DreamweaverCS3(2)不要单击【取消】按钮，待初始化完毕后将自动弹出【许可协议】对话框，如图1-4所示。图1-4【许可协议】对话框1.5.1安装DreamweaverCS3(3)阅读完软件许可协议后，选择【语言】下拉列表框中的【简体中文】选项，单击【接受】按钮，弹出【安装位置】对话框，如图1-5所示。

图1-5【安装位置】对话框1.5.1安装DreamweaverCS3(4)选择合适的盘符后，单击【下一步】按钮，弹出【安装摘要】对话框，如图1-6所示。

图1-6【安装摘要】对话框

1.5.1安装DreamweaverCS3(5)单击【安装】按钮，弹出【安装】对话框，如图1-7所示，在这里将显示安装进度，一直等至其自动弹出【安装完成】对话框，如图1-8所示。

图1-7【安装】对话框

1.5.1安装DreamweaverCS3(5)单击【安装】按钮，弹出【安装】对话框，如图1-7所示，在这里将显示安装进度，一直等至其自动弹出【安装完成】对话框。

图1-7【安装】对话框

1.5.2启动DreamweaverCS3AdobeDreamweaverCS3安装完毕以后会在桌面和【开始】菜单的【程序】命令中自动生成快捷方式图标和启动快捷方式，如图1-9和图1-10所示。

图1-9AdobeDreamweaver【桌面】快捷方式图标图1-10AdobeDreamweaverCS3的启动快捷方式1.5.2启动DreamweaverCS3(1)双击DreamweaverCS3的桌面快捷方式图标，或选择【开始】→【程序】→【AdobeDreamweaverCS3】命令，启动DreamweaverCS3软件，弹出【默认编辑器】对话框，如图1-11所示。

图1-11【默认编辑器】对话框1.5.2启动DreamweaverCS3(2)一般情况下单击【全选】按钮将其全部选中，然后单击【确定】按钮启动DreamweaverCS3软件，并自动进入网页编辑默认状态的【AdobeDreamweaverCS3】工作界面，如图1-12所示。

图1-12【AdobeDreamweaverCS3】工作界面

1.5.3关闭DreamweaverCS3关闭DreamweaverCS3相对比较简单，进行下列操作之一即可关闭DreamweaverCS3：单击图1-12右上角的【关闭】按钮。在菜单栏中选择【文件】→【退出】命令。按<Ctrl>+<Q>组合键。

1.6DreamweaverCS3的工作环境1.6.1认识菜单栏1.6.2认识插入工具栏1.6.3认识文档工具栏1.6.4认识属性面板1.6.5认识面板和面板组1.6.6认识状态栏

1.6.1认识菜单栏

几乎所有的工具软件都有菜单栏，DreamweaverCS3也不例外，主要由【文件】、【编辑】、【查看】、【插入记录】、【修改】、【文本】、【命令】、【站点】、【窗口】和【帮助】等菜单组成，如图1-15所示。

图1-15菜单栏1.6.2认识插入工具栏【插入】工具栏实际上就是大部分软件所说的“快捷方式”工具栏，它包含了一些用于创建和插入对象(如表格、AP元素和图像)的按钮。总共有【常用】、【布局】、【表单】、【数据】、【Spry】、【文本】和【收藏夹】7个选项卡，如图1-25所示。每一个选项卡中都包括相应的快捷按钮，用于快速插入相应内容。所有内容均可以在【插入记录】菜单中找到其相应的命令。初学用户可以使用【插入记录】菜单插入网页元素，待熟悉以后逐渐学会使用快捷插入栏会大大提高网页制作速度。

图1-25【插入】工具栏图1-25【插入】工具栏1.6.3认识文档工具栏【文档】工具栏中包含一些按钮，使用这些按钮可以在文档的不同视图间快速切换，如将文档设置为【代码】视图或【设计】视图，或者将文档设置为同时显示【代码】和【设计】视图的拆分视图。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图1-26所示。

图1-25【插入】工具栏图1-26【文档】工具栏1.6.4认识属性面板

通过【属性】面板可以设置和编辑当前选定的网页元素(如文本、图片、表格、表单、动画等)的最常用属性。【属性】面板中的内容会根据选定的元素不同而变化。例如，如果选择网页上的一个图像，则【属性】面板将改为显示该图像的属性(如图像的文件路径、图像的宽度和高度、图像周围的边框等)，如图1-27所示。【属性】面板是用户在制作网页过程中最常用的面板之一，在后面的章节中还会有详细的说明。

图1-27【属性】面板1.6.5认识面板和面板组DreamweaverCS3中的面板可以查看和管理相关内容，大部分以面板组的形式出现。面板组中选定的面板显示为一个选项卡，例如：【文件】面板组包括【文件】、【资源】和【代码片断】3个面板，如图1-28所示。每个面板组都可以展开或折叠，如图1-28所示的【文件】面板组就是展开的，而【标签检查器】面板组就是折叠的。

图1-28【文件】面板组1.6.6认识状态栏【文档】窗口底部的状态栏提供的是与正在创建的网页文档有关的其他信息，如图1-29所示。

图1-29状态栏1.7建立站点1.7.1创建存放网页的文件夹1.7.2定义本地站点1.7.3新建站点内网页文件和文件夹1.7.1创建存放网页的文件夹

创建本地存放网页的文件夹是第一步，如果是新建网站，最好在本机新建一个空白的文件夹，用来存放制作的网页和网页使用的各种素材。这样当网站制作完毕后，将这个文件夹上传到远端服务器上即可。如果是修改已有的网站，这一步就可以免去。

1.7.2定义本地站点定义本地站点的具体操作步骤如下。(1)启动Dreamweaver软件。(2)在菜单栏中选择【站点】→【新建站点】命令，弹出【站点定义】之【编辑文件】对话框，在【您打算为您的站点起什么名字？】文本框中输入“我的站点”，如图1-31所示。

图1-31【站点定义】之【编辑文件】对话框1.7.2定义本地站点(3)在【站点定义】之【编辑文件】对话框中单击【下一步】按钮，弹出【站点定义】之【编辑文件，第2部分】对话框，如图1-32所示。

图1-32【站点定义】之【编辑文件，第2部分】对话框1.7.2定义本地站点(4)在【站点定义】之【编辑文件，第2部分】对话框中点选【否，我不想使用服务器技术。(O)】单选钮，然后，单击【下一步】按钮，弹出【站点定义】之【编辑文件，第3部分】对话框1，如图1-33所示。

图1-33【在站点文件】之【编辑文件，第3部分】对话框11.7.2定义本地站点(5)在【站点文件】之【编辑文件，第3部分】对话框1中单击【您将把文件存储在计算机上的什么位置？】文本框右侧的【浏览文件】按钮，弹出【选择站点……】对话框。然后选择【本地磁盘(E)：】目录下的“WebDemo”文件夹，如图1-34所示。

图1-34【选择站点……】对话框1.7.2定义本地站点(6)在【选择站点……】对话框中单击【打开】按钮，弹出【选择WebDemo】对话框，如图1-35所示。

图1-35【选择WebDemo】对话框1.7.2定义本地站点(7)在【选择WebDemo】对话框中单击【选择】按钮，返回【站点定义】之【编辑文件，第3部分】对话框2，这时，【您将把文件存储在计算机上的什么位置？】文本框中将显示“E:\WebDemo\”，如图1-36所示。

图1-36【站点定义】之【编辑文件，第3部分】对话框21.7.2定义本地站点(8)在【站点定义】之【编辑文件，第3部分】对话框2中单击【下一步】按钮，弹出【站点定义】之【共享文件】对话框。然后，在【您如何连接到远程服务器？】下拉列表框中选择【无】选项(此时【下一步】按钮将被激活)，如图1-37所示。(9)在【站点定义】之【共享文件】对话框中单击【下一步】按钮，弹出【站点定义】之【总结】对话框。最后，单击【完成】按钮即可完成定义站点全过程。

图1-37【站点定义】之【共享文件】对话框1.7.3新建站点内网页文件和文件夹1.创建站点内文件夹创建站点内文件夹一般可以在【文件】面板中进行，具体操作步骤如下。(1)在“站点-我的站点(E:\WebDemo)”上右击，在弹出的右键快捷菜单中选择【新建文件夹】命令，如图1-40所示，即可创建一个“untitled”文件夹，并且自动进入文件夹重命名状态。(2)如果这个文件夹用来存储图片文件，可以命名为“image”。

图1-40在右键快捷菜单中选择【新建文件夹】命令1.7.3新建站点内网页文件和文件夹2.创建网页文件创建网页文件类似于创建站点内文件夹，具体操作步骤如下。(1)如果在根目录下创建“index.html”文件，则需要在“站点-我的站点(E:\WebDemo)”上右击，在弹出的右键快捷菜单中选择【新建文件】命令，如图1-43所示，会自动创建一个“untitled.html”网页文件。

图1-43在右键快捷菜单中选择【新建文件】命令1.7.3新建站点内网页文件和文件夹(2)在文件重命名状态下选中“untitled.html”文件的“untitled”部分，将其修改为“index”后按<Enter>键即可。(3)如果要在“ch1”文件夹目录下创建“1-1.html”文件，则可以在“ch1”文件夹上右击，在弹出的右键快捷菜单中选择【新建文件】命令，然后再改名即可，如图1-45所示。图1-45创建“1-1html”网页文件1.9上机实训1.实训目的

创建一个以“上机实训01”命名的本地站点，站点文件存储到【本地磁盘(D：)】目录下的“A01”文件夹中。要求不能使用【站点】菜单命令。通过定义本地站点的操作进一步熟悉创建站点的过程。1.9上机实训2.实训步骤(1)在【本地磁盘(D：)】窗口中创建“新建文件夹”并命名为“A01”。(2)在【文件】面板【本地站点路径】下拉列表框中选择【管理站点】选项，