Dw Ps Flash网页制作三合一案例教程

案例三制作一个简单网页——网页制作与网站开发常用技术案例一在浏览器中查看网页——认识网站和网页案例二企业网站建设流程——网站建设基本流程

网页就是我们上网时在浏览器中打开的一个个画面。网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页，如新浪网就包括新闻、财经、科技、体育、娱乐等多个板块，而每个板块又包括很多网页。另外，打开某个网站时显示的第一个网页被称为网站的主页（或首页）。一、网页、网站和主页相关知识

网页中的元素按功能可分为站标、导航条、广告条、标题栏和按钮等，如图1-1所示。（1）站标也叫Logo，是网站的标志，其作用是使人看见它就能够联想到企业。（2）导航条可以说是网站最重要的组成部分，它是一组链接到网站内主要页面的超链接组合，通过单击这些超链接，浏览者可以轻松找到网站中的各个页面，导航条也因此而得名。（3）广告条又称Banner，其功能是宣传网站或为其他商品做广告。（4）此处的标题栏不是指整个网页的标题栏，而是网页上各版块的标题栏，是各版块内容的概括。（5）按钮通常是启动某些装置或机关的开关。二、网页的构成元素站标标题栏广告条按钮导航条导航条（1）静态网页：纯粹HTML格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页组成的。（2）动态网页：与静态网页相对应，动态网页URL的后缀不是.htm，.html、.shtml、.xml等静态网站的常见形式，而是以.asp，.jsp，.php，.cgi等形式为后缀，并且在动态网站网址中通常有一个标志性的符号“?”。三、网页的类型从大的方面来讲，网页可分为静态网页（HTML）和动态网页（DHTML）。

学完前面的知识，相信不少人会有这样的想法，网页究竟是由哪些文件组成的呢？一般情况下，网页（扩展名为.html，.asp等）中除了文字外，还有图像文件（扩展名为.jpg，.gif等）、Flash动画文件（扩展名为.swf）、脚本文件（扩展名为.js）、样式文件（扩展名为.css）以及视频文件（扩展名为.avi，.flv等）等。制作网页的过程，就是输入或编辑这些元素的过程。四、网页的本质

在了解了网页的构成元素及其本质后，接下来通过辨识“新华网”网站首页的构成元素，来进一步加深对网页构成元素的认识。此外，还可通过将网页另存到本地磁盘，来进一步了解其本质。启动IE浏览器后，在“地址栏”中输入“新华网”网址“/”，然后按回车键即可在浏览器中打开“新华网”网站首页。在网页中指出其中的站标、导航条、广告条、标题栏和按钮，如图1-2所示。站标标题栏广告条按钮导航条步骤2：步骤1：案例实施在浏览器中单击右上角的“工具”按钮，在弹出的菜单中选择“文件”>“另存为”菜单，打开“保存网页”对话框，在上方的下拉列表中选择保存路径，在“保存类型”下拉列表中选择“网页，全部（*.htm;*.html）”，然后单击“保存”按钮，如图1-3所示。图1-3保存网页图1-4打开网页文件所在路径打开保存网页的文件夹，可看到一个文件夹和网页文档，如图1-4所示。步骤4：步骤3：双击其中的文件夹将其打开，可看到里面有图像文件、脚本文件、HTML文件以及样式文件等，如图1-5所示。步骤5：图1-5网页的本质案例三制作一个简单网页——网页制作与网站开发常用技术案例二企业网站建设流程——网站建设基本流程案例一在浏览器中查看网页——认识网站和网页

所谓规划站点结构，就是根据网站要实现的功能和内容来规划网站结构。网站结构有两层意思，一是栏目结构，二是目录结构。一、规划站点结构1．栏目结构

栏目结构是指将网站内容划分成哪些栏目，设计合理的网站栏目结构能够一目了然地展现出整个网站的内容及结构，实际上就相当于网站首页中的导航条。

内容是网站的核心，而内容怎样开展，很大程度上取决于网站栏目结构。所以，只有合理设计网站栏目结构，整个网站内容才能围绕主题有序地开展，下图为一个汽车网站的栏目结构。相关知识2．目录结构

目录结构是指站点文件夹内部的目录结构，其一般可分为两种，一种是扁平式的，就是所有网页都放在网站根目录下，该方式比较适合小型网站，图1-7为个人网站的目录结构；还有一种是树形结构，根目录下分成多个类别，然后在每个类别下再放上属于该类别的网页。对于第二种方式来说，比较好的情况是目录结构与栏目结构相吻合，从而便于网站的管理和维护。图1-7某个人网站的目录结构创建网站目录结构应遵循以下方法和建议。1）按栏目内容建立子目录2）有些程序存放在特定目录下3）在每个主栏目下都建立独立的images目录4）目录的层次不要太深除上述各项外，还需要注意以下几项：（1）不要使用中文目录。（2）不要使用过长的目录。（3）尽量使用意义明确的目录。二、收集素材网站素材的收集相当重要，通常情况下，素材按来源可分为以下几种类型：

（1）客户提供：

主要是与产品或企业相关的图像和文字，如产品外观图像以及产品介绍等。（2）网上收集：

可以使用百度、搜狗等搜索引擎搜索并下载素材。（3）从光盘中获取：

市面上有很多图片素材库光盘出售，可以购买并从中选取需要的图片。（4）利用现成图片或自己拍摄：

可以从出版物中获取图片，也可以使用自己拍摄和积累的照片资料。（5）自己动手创作：

例如可以使用Flash制作动态广告条或首页动画。

网页美术设计是指用图像处理软件（如Photoshop，Fireworks等）设计制作出网页效果图。在进行网页美术设计时，有一些基本的原则是需要遵循的，下面简单介绍一下。在配置网页颜色时，可遵循以下原则：（1）设计网页时，网页背景颜色最好选择白色或黑色（多数网页均为白色），这样颜色搭配最灵活，奔驰汽车网站的背景颜色为黑色，如图1-8所示。（2）可根据网站性质确定网页的主色调，并且该主色调应贯穿于网站中的所有网页。（3）恰当地运用同类色、邻近色和对比色，可增强网页的层次感，丰富网页的色彩或突出某些重要内容（如导航条或版块标题等）。

图1-8奔驰汽车网站三、网页美术设计1．网页配色版式是设计网页时要考虑的一个重要因素。一般情况下，各种网页的布局都大同小异。设计页面前应事先规划好站标、导航条、广告条和各版块位置。目前最常用的方法是以1280像素×1024像素的屏幕分辨率为基准制作网页，但实际要传达的内容部分以1024像素×768像素的屏幕分辨率为基准，为避免在浏览网页时需频繁拖动水平滚动条，一般将网页实际宽度设置为1002像素以内，并居中显示。2．网页版式设计3．网页尺寸

域名由若干个英文字母和数字组成，由“.”分隔成几部分。域名是在IP地址的基础上发展而来的，它相当于现实生活中人的名字，只有通过这个名字别人才能找到网站。与名字不同的是，域名在世界上是独一无二的，也就是说没有重复的域名。所谓虚拟空间，是指网站内容所占用的连接到互联网上的服务器空间。要申请虚拟空间，只需登录到任何一家提供虚拟空间服务的网站进行操作即可。域名的申请方法与虚拟空间相似，凡提供虚拟空间服务的网站一般都提供域名服务。

在使用图像处理软件（如Photoshop）设计好网页效果图后，还需要将设计好的效果图进行切割导出。将图片导出后，就可以在Dreamweaver中组织网站内容了，包括输入文本，插入图像、动画等，本书重点介绍网页制作相关知识。四、网页制作五、申请域名和虚拟空间例图阿里云网站首页

网站测试是指当一个网站制作完成后针对网站的各项性能情况的一项检测工作。测试人员需根据测试计划的条目逐条对系统进行测试，并记录测试结果。整个网站必须经过完整的测试，直到网站能够稳定地工作。在网站设计、制作的整个过程中，网站系统的测试、确定和验收是一项重要而富有挑战性的环节。网站系统测试与传统的软件测试不同，它不但需要检查网站是否按照设计要求运行，而且还要测试系统在不同用户端的显示是否合适，从用户的角度进行安全性和可用性测试，对网页内容和网站整体性能进行有效的测试。在测试完毕后，就可以利用Dreamweaver或专门的FTP软件将已完成的网站上传至申请的虚拟空间了。六、测试和发布网站

发布网站后，还要进行宣传推广，否则网站就会被淹没在浩如烟海的网络海洋中。另外，还要经常更新或添加站点内容。

（1）网站推广：目前，网站推广的方法主要有注册到搜索引擎、交换广告条、网络广告以及报纸和杂志广告等。

（2）网站维护：网站维护主要是指网站发布后内容的实时更新。为方便后期的维护和更新，在上传网站后，最好写一个使用手册，让每个网站维护人员都能轻松上手。七、推广和维护网站

网站建设流程从整体上来说可以分成3大部分，分别是网站设计、网站制作和后期维护，如图1-10所示。在这3部分中，本书着重介绍的是网站制作部分，强调3个要点的讲解：设置站点、搭建网页主体结构层、搭建网页样式层。下面以企业网站为例，详细介绍一下网站的建设流程。图1-10网站建设流程网站设计网站制作后期维护确定主题设置站点搭建结构层搭建样式层测试上传网站推广维护更新设计页面效果图切片案例实施确定主题：可以分为分析策划和资料收集两个部分。制作网站前，首先需要分析网站的功能及建站的目的，确定网站的用户群和网站内容，即确定网站的主题。在确定主题后，可绘制出网站架构图，并搜集建站所需的相关资料和素材，图1-11为“中国忆达集团”网站的架构，包括8个频道（栏目）。另外，可要求客户提供与公司相关的文字及图像等资料，如公司介绍、产品图像等。步骤1：图1-11“中国忆达集团”网站架构图设计页面：网页设计师与客户沟通，了解客户的基本需求后，制定网站建设方案并使用Photoshop等图像处理软件进行页面效果图设计。页面效果图主要包括网站首页效果图和各频道首页效果图，图1-12是“中国忆达集团”网站的首页效果图。将效果图设计好后交给客户查看，客户查看后提出修改意见，设计人员根据客户意见进行修改，最终确定网页页面效果图。图1-12“中国忆达集团”网站首页效果图步骤2：效果图切片：在效果图得到客户认可后，设计师可使用Photoshop等图像处理软件中的切片工具将效果图切割并保存为JPEG，GIF或PNG格式的小图像，将它们作为制作网页的图像素材。设置站点：从这一步开始进入到网页制作阶段。首先在本地磁盘创建网站根文件夹及子文件夹，并将制作网页需要的素材资源分类放置在各文件夹中，之后在网页制作软件Dreamweaver中定义站点。图1-13是“中国忆达集团”网站的本地文件目录及在Dreamweaver中的站点结构。图1-13网站的本地文件目录及在Dreamweaver中的站点结构步骤3：步骤4：制作网页：网页的制作可以分为结构层制作和样式、行为层制作两部分。结构层制作就是使用HTML代码搭建网页的主体结构，如文字、图像、超链接等，可以直接编写代码来实现，也可以在Dreamweaver的可视化界面中操作。在结构层制作好后，就可以使用CSS（层叠样式表）及JavaScript（动态脚本语言）来制作网页的样式层及行为层，完成网页的布局和外观设置。测试上传网站：在将网站上传到服务器前，需要对其进行测试及优化。测试包括兼容性测试、超链接测试等；优化是尽可能减小网页文件的体积及日后发生错误的概率。完成测试和优化后，就可以利用Dreamweaver或其他FTP工具将网站发布到所申请的空间服务器上。网站上传后，可继续通过浏览器进行实地测试。网站推广：网站上传后，需要进行宣传和推广，以提高网站的访问量及知名度。推广网站的方法有很多，如搜索引擎推广、群发电子邮件、借助同类网站留言、加入友情链接、传统媒体宣传等。维护更新：上传网站后，还需要经常对其进行维护和更新，才能吸引浏览者。步骤5：步骤6：步骤7：步骤8：案例二企业网站建设流程——网站建设基本流程案例三制作一个简单网页——网页制作与网站开发常用技术案例一在浏览器中查看网页——认识网站和网页

网页是由HTML代码组成的。从广义上来说，制作网页文件有两种方法：一是使用记事本直接输入HTML代码；二是使用可视化编辑软件进行可视化制作。前者是最原始的方法，是可视化编辑软件出现之前人们常采用的方法，后者是目前网页制作的主流形式。1．Photoshop

AdobePhotoshop，简称“PS”，是由AdobeSystems开发和发行的图像处理软件。Photoshop主要用于处理以像素构成的位图图像。在网页制作中，使用Photoshop可以完成效果图制作和图像素材处理工作。Photoshop存储的图像文件格式有JPEG，GIF，PNG和TIF等，而在网页中使用的图像文件格式通常为JPEG，GIF和PNG。相关知识一、网站管理与网页制作相关软件常见的可视化编辑软件有Dreamweaver，Frontpage等，目前使用Dreamweaver的居多。2．Flash

Flash是由Adobe公司推出的交互式矢量图和Web动画制作软件。Flash的前身是FutureWave公司的FutureSplash，是世界上第一个商用二维矢量动画软件，用于设计和编辑Flash文档。1996年11月，美国Macromedia公司收购了FutureWave，并将其改名为Flash。在推出Flash8以后，Macromedia又被Adobe公司收购。Flash通常也指AdobeFlashPlayer。网页设计者使用Flash可以创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。

HTML是HyperTextMarkupLanguage（超文本标记语言）的英文缩写，是用于设计网页的主要语言。网页中的文本、图像、表格和超链接等内容，都是由HTML中的标签定义和组织的。用HTML编写的超文本文档称为HTML文档，扩展名为“.html”，也就是网页。

CSS（CascadingStyleSheets）中文名为“层叠样式表”，用于设置网页中各标签的样式。“样式”是指网页中各元素的样式，比如文本的大小、颜色以及图像的边框、位置等。“层叠”是指当在HTML文件中引用多个样式文件时，浏览器将依据层叠顺序处理，以避免发生冲突。在网页制作中，HTML属于网页的结构层部分，用来确定网页的内容和结构；CSS属于网页的表现层部分，用于设置网页的样式，主要包括各种标签的外观、大小和位置等。HTML和CSS既相互独立又相互联系，熟练掌握它们就能制作出各种精彩的网页。二、HTML与CSS简介

通过相关知识的学习，我们了解了网页制作与网站开发的常用技术，接下来使用记事本制作一个简单的网页，来初步认识和了解网页的制作方法及HTML代码的应用。打开记事本，并在其中输入HTML代码，如下图。图1-14在记事本中输入HTML代码案例实施步骤1：在记事本中选择“文件”>“另存为”菜单，打开“另存为”对话框，在上面的列表框中选择保存位置，在“文件名”编辑框中输入文档名加扩展名“firstpage.html”，在“保存类型”下拉列表中选择“所有文件”，在“编码”下拉列表中选择“UTF-8”，然后单击“保存”按钮，如图1-15所示。打开资源管理器，并切换到保存网页文档的文件夹下，如图1-16所示。图1-16保存的网页文档图1-15“另存为”对话框步骤2：步骤3：右键单击网页文档，在弹出的快捷菜单中选择“打开方式”>“InternetExplorer”，在IE浏览器中打开文档，如图1-17所示。图1-17预览文档步骤4：0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业WENJINGKETANG课后作业请同学们扫一扫进入班级做作业引用配套微课，学生线上看，系统自动记成绩；大作业一键收发，在线判分扫码申请免费开通→线上建课WENJINGKETANG扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦案例三为企业网站制作欢迎页面——网页文档基本操作案例一调整DreamweaverCC工作界面——初识DreamweaverCC案例二创建企业网站本地站点——站点基本操作图2-1启动DreamweaverCC

安装DreamweaverCC后，单击桌面左下角的“开始”按钮，选择“所有程序”>“AdobeDreamweaverCC”，就可以启动DreamweaverCC了，如图2-1（a）所示。启动DreamweaverCC后，首先显示起始页。通过起始页可以直接打开最近使用过的文档或其他文档，也可以创建新文档，如图2-1（b）所示。一、启动DreamweaverCC相关知识（a）（b）在如图2-1（b）所示的起始页中单击“新建”列中的任一项，将会创建一个相应格式的新文档，并进入DreamweaverCC工作界面。此处单击“HTML”项，创建一个.html格式的文档并进入DreamweaverCC工作界面，如图2-2所示。由图2-2可以看出，DreamweaverCC的工作界面由应用程序栏、文档标签栏、文档工具栏、文档窗口、状态栏、“属性”面板和面板组等组成，下面分别介绍。图2-2DreamweaverCC工作界面文档窗口文档标签栏面板组应用程序栏工作区切换器文档工具栏状态栏标签选择器“属性”面板二、应用程序栏和文档标签栏

应用程序栏位于工作区顶部，左侧显示菜单栏，右侧包含工作区切换器（可在其下拉列表中选择不同的工作区模式）和程序窗口控制按钮。

文档标签栏位于应用程序栏下方，左侧显示当前打开的所有网页文档的标签（标签上显示相应网页文档的名称）及其关闭按钮；右侧显示当前文档在本地磁盘中的保存路径以及向下还原按钮；文档标签下方显示当前文档中包含的文档以及链接的文档。当用户打开多个网页时，通过单击文档标签可在各网页之间切换。另外，单击下方的包含文档或链接文档，同样可打开相应文档，如图2-3所示。图2-3文档标签栏代码：在文档窗口中显示代码视图。代码视图是一个用于编写HTML、CSS、JavaScript、服务器语言（如PHP或ColdFusion标记语言（CFML））以及其他任何类型代码的手工编码环境，如图2-5所示。在Dreamweaver的设计视图中对网页文档进行的操作，也将自动转换为相应的网页代码。拆分：在文档窗口中同时显示代码视图和设计视图。这样当用户在代码视图中编辑网页源代码后，单击设计视图中的任意位置，会立刻在设计视图中看到相应的编辑结果。三、文档工具栏文档工具栏位于文档标签栏下方，包括各种可对文档进行操作的按钮，如图2-4所示。在浏览器中预览/调试文件管理图2-4文档工具栏在代码视图中以不同颜色显示不同类型的代码。此外，利用左侧的工具按钮可以对代码进行相应的操作，如折叠、展开代码，选择标签，检查代码，缩进代码等。图2-5代码视图设计：在文档窗口中显示设计视图。在设计视图中看到的网页效果类似于在浏览器中看到的效果，用户可在该视图中直接编辑网页中的各个对象。

实时视图：与设计视图类似，但实时视图能更逼真地显示文档在浏览器中的效果，还可以像在浏览器中一样与文档进行交互。在浏览器中预览/调试：在浏览器中预览或调试文档。单击该按钮后可在弹出的列表中选择一个浏览器版本。标题：可为文档设置标题。浏览网页时，该标题将显示在浏览器的标题栏中。文件管理：用于与远程服务器同步文件，上传或下载当前文档。

状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息，如图2-6所示。其中，标签选择器的作用很大，它显示了当前光标所在位置或当前选定内容的标签层次结构（HTML网页文档就是由一个个标签组成的），单击某个标签可以选中网页中该标签所代表的内容，如单击<table>标签，可选中网页中与之对应的表格。四、状态栏窗口大小平板电脑大小桌面电脑大小手机大小标签选择器图2-6状态栏五、“属性”面板

使用“属性”面板可以检查和编辑当前选定网页元素（如文本和插入的对象）的最常用属性。“属性”面板的内容会根据选定元素的变化而变化。例如，如果选择页面中的图像，则“属性”面板将显示图像属性（如图像的文件路径、图像的宽度和高度等），如图2-7（a）所示；如果选择文本，则“属性”面板又会显示文本的相关属性，如图2-7（b）所示。（a）（b）图2-7“属性”面板六、面板组

默认状态下，面板组位于文档窗口右侧。面板组中包含各种类型的面板，Dreamweaver中的大多数操作都需要在面板中实现。其中最常用的有“插入”面板、“文件”面板和“CSS设计器”面板。下面以“插入”面板为例，简单介绍一下面板组中的面板。“插入”面板包含用于创建和插入对象（如表格、图像和链接）的按钮，这些按钮按几个类别进行组织，默认显示“常用”类别，如图2-8（a）所示；也可以单击其右侧的下拉三角按钮，从弹出的列表中选择其他类别，如图2-8（b）所示。例如，要在页面中插入图像，可先定位插入点，然后单击“插入”面板“常用”类别中的“图像:图像”按钮。常用类别

结构类别媒体类别

表单类别jQueryMobilejQueryUI模板类别（a）（b）图2-8“插入”面板要打开或关闭某个面板，可选择“窗口”菜单下的相应菜单项。例如，可选择“窗口”>“文件”菜单，打开或关闭“文件”面板，如图2-9所示。步骤2：默认状态下，文档窗口的右侧和下方分别是面板组和“属性”面板。要关闭“属性”面板和面板组，可按【F4】键；再次按【F4】键可恢复原来的状态。步骤1：

使用Dreamweaver制作或编辑网页时，经常需要打开、关闭某个面板，或对其工作界面进行各种调整。下面学习调整DreamweaverCC工作界面的常见操作。案例实施图2-9使用“窗口”菜单打开或关闭面板若要折叠窗口右侧的面板区域，可单击该面板区域右上方的按钮，此时按钮将变成按钮，再次单击可展开面板区域，如图2-10所示。当面板区域处于折叠状态时，单击某个面板按钮可展开该面板，再次单击可将面板恢复为按钮状态。步骤3：图2-10展开/折叠面板区域图2-11在面板之间切换图2-12关闭面板组步骤4：如果面板组包含了多个面板，可以在展开面板组后，通过单击面板标签在各面板之间切换。例如，展开“文件”面板组后，可以通过单击“文件”“插入”标签在两个面板之间切换，如图2-11所示。步骤5：双击某个面板组名称或名称右侧的空白处，可以展开或折叠面板组。步骤6：单击面板组标题栏并拖动，可将面板组变为浮动状态。此时可拖动面板组标题栏，将其置于屏幕上的任意位置。要还原面板组到文档窗口右侧的面板区域，可将其重新拖动至面板区域。步骤7：单击面板组右上角的符号，在弹出的菜单中选择“关闭标签组”，可关闭面板组，如图2-12所示。步骤8：如果用户在更改面板组布局后又想恢复其原始布局，可选择“窗口”>“工作区布局”>“重置‘压缩’”（或“重置‘扩展’”）菜单。案例三为企业网站制作欢迎页面——网页文档基本操作案例一调整DreamweaverCC工作界面——初识DreamweaverCC案例二创建企业网站本地站点——站点基本操作

一般在Dreamweaver中制作网页之前，最好先定义站点，然后在站点中创建网页。本节主要介绍在DreamweaverCC中创建和打开站点的方法。一、使用Dreamweaver创建和打开本地站点1．创建本地站点

站点一般包括本地站点（本地计算机上的一组文件）和远程站点（远程Web服务器上的一组文件）。下面以本地站点为例说明创建过程。相关知识首先在本地磁盘创建一个新文件夹作为本地站点根文件夹，以便存放相关文档。此处在D盘新建一个名为“test”的文件夹，并在其中嵌套一个名为“images”的文件夹。步骤1：图2-13选择菜单启动DreamweaverCC，在菜单栏中选择“站点”>“新建站点”选项，如图2-13所示。步骤2：图2-14设置站点信息弹出“站点设置对象”对话框，默认显示“站点”选项，在“站点名称”文本框中输入站点名称，此处为“test”，单击“本地站点文件夹”编辑框右侧的“浏览文件夹”按钮，在打开的“选择根文件夹”对话框中选择前面创建的文件夹“test”，然后单击“选择文件夹”按钮，设置网站根文件夹，如图2-14所示。步骤3：图2-15设置“本地信息”步骤4：步骤5：步骤6：设置服务器信息。在左侧列表中单击“服务器”选项，对话框右侧将显示服务器相关信息。站点服务器信息可以暂时不填写，在上传网站时再添加。设置“版本控制”信息。在左侧列表中单击“版本控制”选项，此项一般设置访问对象为“无”。高级设置。对“高级设置”部分，仅设定“本地信息”即可，如图2-15所示。设定好后，直接单击“保存”按钮，新的站点就创建完成了。2．打开本地站点打开本地站点的方法有以下两种：图2-16“管理站点”对话框图2-17“文件”面板步骤1：在菜单栏中选择“站点”>“管理站点”菜单命令，弹出如图2-16所示的“管理站点”对话框，选择要打开的站点，单击“完成”按钮即可。步骤2：在“文件”面板的“站点”下拉列表中选择已创建的某个站点，也可将其打开，如图2-17所示。二、使用Dreamweaver管理本地站点管理本地站点的操作主要包括编辑站点、复制站点、删除站点和导出导入站点等，下面分别介绍。

1．编辑站点编辑站点的方法有以下两种：方法1：选择“站点”>“管理站点”菜单命令，在“管理站点”对话框中双击要编辑的站点，即可弹出此站点相关信息进行编辑，如图2-18所示。方法2：在“文件”面板中选择站点列表中的“管理站点”选项，也可打开“管理站点”对话框，如图2-19所示。图2-18编辑站点方法1图2-19编辑站点方法22．复制站点

首先在“管理站点”对话框中选择要复制的站点，此处选择“test”，如图2-20（a）所示，单击“复制当前选定的站点”按钮，在站点列表中即增加一个新的站点“test复制”，表示这个站点是“test”的复制，如图2-20（b）所示。双击复制产生的站点，可以对其进行编辑操作。（a）（b）图2-20复制站点3．删除站点

在“管理站点”对话框中单击选中要删除的站点名，单击“删除当前选定的站点”按钮，在弹出的对话框中单击“是”按钮确认删除，单击“否”按钮则取消删除。删除站点操作仅将站点信息从Dreamweaver中删除，而站点文件还保留在硬盘原来的位置上，并没有被删除。4．导出和导入站点

在DreamweaverCC中，可以将现有站点导出为一个站点文件，也可以将站点文件导入为一个站点。导出、导入的作用在于保存及恢复站点和本地文件的链接关系。图2-21导出站点1）导出站点在“管理站点”对话框的站点列表中单击选中要导出的站点，单击“导出当前选定的站点”按钮，如图2-21所示。步骤1：图2-22“导出站点”对话框导出的站点文件扩展名为“.ste”，本例实现将“test”导出至D盘根目录下，命名为testcopy.ste。在弹出的“导出站点”对话框中为导出的站点文件设置保存位置和名称，然后单击“保存”按钮即可，如图2-22所示。步骤2：步骤3：2）导入站点

在“管理站点”对话框中单击“导入站点”按钮，在弹出的“导入站点”对话框中选择要导入的站点文件（后缀为.ste的文件），单击“打开”按钮，站点文件将导入到站点中。案例实施

在了解了站点的基本操作后，接下来通过创建“企业网站”本地站点，进一步加强和巩固前面的学习。新建站点。启动DreamweaverCC，选择“站点”>“新建站点”菜单命令，在弹出的“站点设置对象”对话框中设置站点名称和本地站点文件夹，如图2-23所示。步骤2：创建本地站点文件夹。将本书附赠素材“素材与实例\ch02”目录下的文件夹“ydjt”（案例一中创建好目录结构的网站文件夹）拷贝至本地磁盘，作为网站根文件夹。步骤1：图2-23“站点设置对象”对话框高级设置。单击对话框左侧的“高级设置”选项，设置默认图像文件夹为站点根目录下的“images”文件夹，如图2-24所示。设置好后，单击“保存”按钮，完成站点的创建。步骤3：图2-24设置“本地信息案例二创建企业网站本地站点——站点基本操作案例一调整DreamweaverCC工作界面——初识DreamweaverCC案例三为企业网站制作欢迎页面——网页文档基本操作

网页文档的基本操作包括新建网页文档，保存网页文档，以及打开、预览和关闭网页文档等。1．新建和保存网页文档

下面通过在DreamweaverCC中新建一个空白网页文档，并将其保存，来介绍新建和保存网页文档的方法。相关知识一、网页文档基本操作启动DreamweaverCC，选择“文件”>“新建”菜单，或按【Ctrl+N】组合键，打开“新建文档”对话框。步骤1：在左侧的“文档类型”列表中选择一项（此处选择“空白页”），在“页面类型”列表中选择网页类型（此处选择“HTML”），在“布局”列表中选择布局类型（此处选择“无”），单击“创建”按钮，便创建了一个新文档，如图2-25所示。步骤2：图2-25创建新文档新建或编辑网页文档后，需要将其保存，才能使所做的设置生效（尤其是要插入图像的文档，由于涉及到路径的问题必须要先保存）。要保存前面新建的网页文档，可选择“文件”>“保存”菜单，或按【Ctrl+S】组合键，打开“另存为”对话框。步骤3：在“另存为”对话框上方的下拉列表中选择保存文件的文件夹（此处为前面创建的站点文件夹“test”），在“文件名”文本框中输入文件名（此处为“index”），单击“保存”按钮，即可将文档保存，如图2-26所示。步骤4：图2-26保存网页文档2．打开、预览和关闭网页文档

若要对已有的文档进行编辑，就需要在Dreamweaver中打开该文档。另外，在Dreamweaver中打开网页文档并执行相应操作后，如果想查看它在浏览器中的效果，可执行预览操作。要打开现有的网页文档进行编辑，可选择“文件”>“打开”菜单（或按【Ctrl+O】组合键），打开“打开”对话框。步骤1：在上方的下拉列表中选择网页文档所在位置（此处选择本书附赠的“素材与实例\ch03”目录下的“ydjt”文件夹），在“文件列表”中选择要打开的网页文档（此处选择“index.html”），如图2-27（a）所示。步骤2：单击“打开”按钮，打开的网页文档如图2-27（b）所示。步骤3：（a）（b）图2-27打开网页文档如要预览文档，可在打开文档后按【F12】键，或单击文档工具栏中的按钮，在其下拉列表中选择“预览方式：IEXPLORE”项，如图2-28所示。如果文档已保存，将直接在IE浏览器中打开。步骤4：如要关闭文档，只需单击文档标签栏上的“关闭”按钮（或按【Ctrl+W】组合键），此处将“index.html”文档关闭。执行该操作时，如果文档已修改但未保存，系统会弹出如图2-29所示的提示框，询问是否保存修改。步骤5：图2-28预览文档图2-29保存提示框

在定义站点后，使用“文件”面板可以非常方便地打开、新建、重命名或删除站点中的文档和文件夹。二、“文件”面板基本应用选择“窗口”>“文件”菜单，打开“文件”面板。要在当前站点的某个文件夹中创建网页文档，可右键单击该文件夹，在弹出的快捷菜单中选择“新建文件”选项，如图2-30（a）所示。步骤1：（a）图2-30在“文件”面板中新建并命名网页文档（b）（c）此时在当前站点中新建了一个网页文档，并且该网页文档名处于可编辑状态，如图2-30（b）所示。步骤2：用户可直接输入文档名并按【Enter】键来命名文档。本例是在站点根文件夹下创建名称为“main.html”的网页文档，如图2-30（c）所示。步骤3：同样，要新建文件夹，可在目标文件夹上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”选项，然后给新建的文件夹命名。步骤4：要重命名现有的网页文档或文件夹，可首先在“文件”面板中选中文档或文件夹，然后单击文档名或文件夹名（或按【F2】键），此时文档或文件夹名将变为可编辑状态，输入新名称并按【Enter】键即可。步骤5：图2-30在“文件”面板中新建并命名网页文档图2-31在“文件”面板中删除文档或文件夹当不需要站点中的某个网页文档或文件夹时，可将其删除，方法为：右击要删除的网页文档或文件夹，在弹出的快捷菜单中选择“编辑”>“删除”菜单，然后在弹出的提示框中单击“是”按钮，如图2-31所示。步骤6：除上述操作外，在“文件”面板中双击某个网页文档，可在文档编辑窗口中打开该文档。步骤7：在“文件”面板“站点”下拉列表中选择案例二中创建的站点“ydjt”，打开该站点。

在了解了网页文档的基本操作后，接下来通过为企业网站创建一个欢迎页面，来进一步加强和巩固前面的学习。案例实施步骤1：步骤2：右击站点根文件夹，在弹出的快捷菜单中选择“新建文件”选项，在该站点中新建文档，并重命名为“welcome.html”。步骤3：在“文件”面板中双击文档“welcome.html”，在文档编辑窗口中将其打开。步骤4：在文档编辑窗口中单击，然后输入文字“欢迎访问中国忆达集团网站！”，如图2-32所示。步骤5：按【Ctrl+S】组合键保存文档，然后按【F12】键，在浏览器中预览页面效果，如图2-33所示。图2-32在文档中输入文字图2-33保存并预览文档

为便于日后的维护和管理，网站中所有文件和文件夹的命名最好遵循一定的规则。（1）首页文档一般命名为index.html、index.asp或index.php，后缀名与网页本身所使用的技术是一一对应的。（2）在网页的存放目录中最好不要出现中文，更不要用中文命名网页文档和文件夹，因为在使用Unix或Linux操作系统的主机上，使用中文命名的文件会出错。（3）网页文档名中不要使用大写英文字母，最好全部使用小写英文字母。因为Unix操作系统区分英文字母大小写，而Windows操作系统不区分英文字母大小写。（4）运算符符号不能用在文件名的开头。（5）比较长的网页文档名可以使用下划线“_”来隔开多个单词或关键字。拓展知识一、网页文档和文件夹命名规则

网页文档命名原则的指导思想有两条：一是使你自己和工作组的每一位成员都能通过文档名非常容易地理解文档的意义；二是当在文件夹中使用“按名称排列”命令时，同一种大类的文件能够排列在一起，以便执行查找、修改和替换等操作。知识库（1）在大型网站中，分支页面的文件应存放在单独的文件夹中，每个分支中的图像也应该存放在各自单独的文件夹中，存放网页图像的文件夹一般命名为“images”或者“img”。（2）在动态网站中，用来存放数据库的文件夹一般命名为“data”或者“database”。二、HTML的标签构成

HTML文件是由一系列元素和标签组成的，元素是HTML文件的重要组成部分，HTML用标签来规定元素的属性和它在文档中的位置。1．HTML标签概述HTML标签是由尖括号括起来的关键词，绝大多数HTML标签都是成对出现的，包含首标签和尾标签。首标签的格式为<标签名>，尾标签的格式为</标签名>，首标签和尾标签的中间为标签内容。其完整语法如下：

HTML文档源码中一行可以写多个不同的标签，也可将一对标签写在不同的行中，但每对标签必须嵌套使用，不能交叉使用。表2-1列出了标签的正确用法和错误用法。<标签名>标签内容</标签名>正确错误<table><tr><td></td></tr></table><table><tr><td></tr></td></table>以上代码中，<td></td>标签对包含在<tr></tr>标签对中，<tr></tr>标签对又包含在<table></table>标签对中，形成父子关系。2．HTML标签格式在HTML文件中，每个标签都有名称、可选择的属性和标签内容，标签的属性都在首标签内标明。首标签的基本语法如下：而尾标签的语法格式如下：<标签名属性名1＝"属性值1"属性名2＝"属性值2"……>属性是可选择的，如果标签中有属性，则标签名和属性名之间以及各属性之间要用空格隔开，各属性值用英文输入法下的双引号括起来。例如，实现超链接的代码如下：</标签名>

所以在HTML文件中，标签的完整定义语法如下：<标签名属性名1＝"属性值1"属性名2＝"属性值2"……>标签内容（文本或超文本）</标签名><ahref="web/index.html"target="_blank">点击我吧</a>其中a为超链接标签名称；href="web/index.html"和target="_blank"两个属性分别定义了超链接目标文档的路径和打开方式；“点击我吧”为标签内容（超链接文本）。

HTML文档默认被分为两部分：文档头<head>和文档体<body>，它们都包含在<html></html>标签对中，如前面在“案例实施”中制作的企业网站欢迎页面。在Dreamweaver中打开前面创建的企业网站欢迎页面，并切换到代码界面，可看到HTML文档的基本结构，如图2-34所示。三、HTML网页文档的基本结构图2-34HTML文档的基本结构

doctype是英文“documenttype（文档类型）”的简写，是HTML中的文档声明，简称为DTD声明，其作用是告知浏览器当前文档所使用的是哪种HTML规范。doctype声明位于文档最前端，标签为<!doctype>，它不属于文档的结构部分。Web浏览器通过判断文件开头的这个声明，来调整解析器的渲染类型。其格式如下：<!doctypehtml>

只有确定了一个正确的doctype，HTML中的标签和CSS才能生效，它甚至对网页中的JavaScript脚本都会有所影响。

1．文档类型<!doctype><html>网页文档的全部内容</html>网页中的所有代码内容都包含在<html></html>标签对中，它表示该文档是以超文本标记语言（HTML）编写的。首标签<html>用于HTML文档的最前边，用来标识HTML文档的开始；而尾标签</html>恰恰相反，它放在HTML文档的最后面，用来标识HTML文档的结束，两个标签必须成对使用。如：2．整个文档<html></html>该标签不带任何属性。

<head>标签是HTML文档所有头部元素的容器，它包含的元素用来描述HTML文档的相关信息，如指定网页标题、编码方式，指示浏览器在何处找到CSS样式表等，这些信息大部分用于提供索引、辨认页面属性或用于其他方面，不会在浏览器中显示。如果HTML文件并不需要提供相关信息，则可以省略<head>标签。下面讲解在<head>标签中常用的标签元素，这些标签只能放在<head></head>标签对中。3．文档头<head></head><title>一个简单的页面</title>

<title>标签用于设置网页文档的标题信息。要将网页标题显示在浏览器的标题栏中，只要在<title></title>标签对之间输入要设置的标题信息即可。如：1）<title></title><meta>标签用于定义文档的元数据，如字符编码、作者、版权、关键字和网页说明等。2）<meta>基本形式：定义页面使用的字符编码为utf-8。<metaname="keywords"content="关键字1,关键字2,关键字3,关键字4,关键字5"/><metacharset="utf-8">设置关键字：关键字是与网页相关的短语或词组，其作用是协助Internet上的搜索引擎查找网页，格式如下，注意各个关键字之间用逗号隔开。设置说明信息：说明信息是对网页或网站的简单介绍，格式如下。<metaname="description"content="关于网页的说明信息"/>

<style>标签用来声明将样式表内嵌在HTML文档中，可以在<style></style>标签对中书写CSS样式代码，从而规定HTML元素在浏览器中呈现的样式。3）<style></style><link>标签用于定义HTML文档与外部资源之间的关系，常用于链接外部样式表4）<link></link><script>标签用于定义客户端脚本，比如JavaScript5）<script></script>

<body>标签定义HTML文档的主体部分，在此标签对之间可包含<p></p>、<h1></h1>、<div></div>、<a>和<br>等众多标签，它们定义的文本和图像等都会在浏览器中显示出来。4．文档体<body></body>0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业WENJINGKETANG扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦案例三为企业网站新闻显示网页设置图像——设置网页图像案例一为企业网站新闻显示网页设置页面基本信息——设置网页基本信息案例二为企业网站新闻显示网页设置文本内容——设置网页文本案例四为博客网站首页设置多媒体——应用动画和多媒体文件案例五为企业网站新闻显示网页设置超链接——应用超链接

文档头信息包括网页关键字、网页说明等。要想使网页被更多的浏览者看到，就需要给网页设置关键字。网页关键字对搜索引擎来说起着不容忽视的作用。用户使用Baidu等搜索引擎搜索网页时，搜索引擎是通过网页关键字找到网页的。大多数搜索服务器每隔一段时间会自动探测网络中是否有新的网页产生，并把它们按关键字进行记录，以方便用户查询。

说明信息是对网页的简要介绍，除关键字外，搜索引擎在检索网页时还会查看网页中的说明文本。一、设置文档头信息相关知识将本书附赠素材“素材与实例\ch03”目录下的“text”文件夹拷贝至第2章创建的站点“test”根目录下。在Dreamweaver中打开“text”文件夹中的“index-1x.html”文档，单击“文档工具栏”中的“拆分”按钮，使文档窗口左侧显示HTML代码，如图3-1所示。步骤2：步骤1：图3-1打开文档并切换至“拆分”视图图3-2刷新站点提示：如果“文件”面板中没有出现刚刚拷贝的文件夹，可单击“刷新”按钮刷新站点，如图3-2所示。将插入点置于代码界面中<metacharset="utf-8">标签的后面，在菜单栏中选择“插入”>“Head”>“关键字”，弹出“关键字”对话框，在“关键字”编辑框中输入要为网页设置的关键字，各个关键字之间用逗号或空格隔开，单击“确定”按钮，即在网页中插入关键字，如图3-3所示。步骤3：图3-3插入关键字将插入点置于代码界面中刚插入的关键字标签后面，在菜单栏中选择“插入”>“Head”>“说明”，弹出“说明”对话框，在“说明”编辑框中输入要为网页设置的说明信息，单击“确定”按钮，即在网页中插入说明信息，如图3-4所示。步骤4：图3-4插入说明文本

一般在创建一个新网页后，首先要对网页进行页面属性设置，主要是对“标题/编码”的设置。设置网页页面属性的具体操作可参考以下步骤：二、设置网页页面属性继续在前面的文档“index_1x.html”中操作，在文档窗口设计界面中任意位置单击，“属性”面板中将显示文档属性，单击其中的“页面属性”按钮，如图3-5所示。步骤1：图3-5单击“页面属性”按钮弹出“页面属性”对话框，对话框左侧的“分类”列表中显示可以设置的类别，右侧显示相应的设置项，默认显示“外观（CSS）”设置项，如图3-6所示。步骤2：在左侧的“分类”列表中选择“标题/编码”，然后在“标题”编辑框中输入网页标题“海的女儿”，“编码”类型保持默认，如图3-7所示。步骤3：图3-6“页面属性”对话框

图3-7设置“标题/编码”

“跟踪图像”是Dreamweaver一个非常有效的功能，它允许用户在网页中将原来的平面设计稿作为辅助背景。这样，用户就可以非常方便地定位文字、图像、表格、层等网页元素在页面中的位置。在“跟踪图像”选项中，“跟踪图像”编辑框用于设置跟踪图像的路径和名称。在实际生成网页时，跟踪图像并不显示在网页中。在“透明度”标尺上可以通过拖动滑块改变设计图（跟踪图像）的透明度，如图3-8所示。图3-8“跟踪图像”选项

在了解了文档头信息和页面属性的设置方法后，接下来通过为“企业网站”新闻显示网页设置页面基本信息，来进一步加强和巩固前面的学习。启动DreamweaverCC，在“文件”面板中打开“ydjt”站点，双击其中的“xinwen_1x.html”，将其打开，如图3-9所示。步骤2：将本书附赠素材“素材与实例\ch03\ydjt”目录下的所有文件拷贝至第2章中创建好的网站“ydjt”根目录下，将两个“images”文件夹合并。步骤1：案例实施图3-9打开网页单击“确定”按钮即在网页中插入关键字，按照同样的方法插入说明信息，最终效果如图3-11所示。步骤4：参照相关知识第一节中的操作，将插入点置于代码界面<metacharset="utf-8">标签的后面，选择“插入”>“Head”>“关键字”菜单命令，弹出“关键字”对话框，在“关键字”编辑框中输入要为该网页设置的关键字，如图3-10所示。步骤3：图3-10插入关键字图3-11插入说明信息保存文档，并在浏览器中预览，可看到浏览器标题栏中的标题为刚刚设置的信息，如图3-13所示。步骤6：在设计界面空白处单击，然后单击“属性”面板上的“页面属性”按钮，打开“页面属性”对话框，单击左侧“分类”列表中的“标题/编码”选项，然后在“标题”文本框中输入网页标题“忆达新闻”，并单击“确定”按钮完成设置，如图3-12所示。步骤5：图3-12设置网页标题图3-13预览文档案例三为企业网站新闻显示网页设置图像——设置网页图像案例一为企业网站新闻显示网页设置页面基本信息——设置网页基本信息案例四为博客网站首页设置多媒体——应用动画和多媒体文件案例五为企业网站新闻显示网页设置超链接——应用超链接案例二为企业网站新闻显示网页设置文本内容——设置网页文本

在Dreamweaver中输入文本的方法非常简单，只要将插入点定位在网页的某个位置（如某个表格单元格内），然后选择输入法输入文本就可以了。对于大量的外部文本，可利用剪贴板将其拷贝至网页文档中，方法如下：一、添加普通文本相关知识启动DreamweaverCC，在“文件”面板“站点”下拉列表中选择“test”，分别双击“text”文件夹中的“index_2x.html”和“text1.txt”文档将它们打开，如图3-14所示。步骤1：图3-14打开网页文档和文本文档切换至网页文档“index_2x.html”，将插入点置于文档窗口中的方框内，按【Ctrl+V】组合键粘贴文本，如图3-15（b）所示。步骤3：在“text1.txt”文档窗口中单击，按【Ctrl+A】组合键全选文本，然后按【Ctrl+C】组合键复制选中的文本，如图3-15（a）所示。步骤2：图3-15复制并粘贴文本(a)(b)

为便于浏览者阅读，对于输入的长文本，需要对其进行换行和分段。换行的方法是，将插入点置于要换行的位置，然后按下【Shift+Enter】组合键。如果要对文本进行分段，直接按下【Enter】键，即可形成一个自然段落。换行与分段的区别是换行行间距小，分段行间距大，如图3-16所示。

图3-16换行和分段的区别换行分段二、插入特殊符号

网页文本中除包含汉字和字母外，往往还包含一些特殊符号，如注册商标符号®、版权符号©等。这些特殊符号一般不能从键盘直接输入。在DreamweaverCC中，可单击“插入”面板“常用”类别中的“字符”按钮，然后在其下拉列表中选择相应字符进行插入，如图3-17所示。如果在“字符”下拉列表中没有找到需要的字符，可以通过选择该列表中最下方的“其他字符”命令，打开“插入其他字符”对话框，这样就能获取更多的特殊字符了，如图3-18所示。在该对话框中选中要插入的字符后，单击“确定”按钮即可插入。

图3-17插入特殊符号图3-18“插入其他字符”对话框

由于在HTML格式的文档中只允许有一个空格，所以在Dreamweaver中添加空格的方法与在Word等文字编辑软件中不一样。若需要添加多个空格，可通过以下方法实现：（1）将输入法切换到全角状态，直接按空格键；如需添加多个空格，重复此操作。（2）按【Ctrl+Shift+空格】组合键可添加一个空格；如需添加多个空格，重复此操作。（3）在菜单栏中选择“插入”>“字符”>“不换行空格”菜单，可添加一个空格；如需添加多个空格，重复此操作。（4）在文档窗口“代码”界面中，直接在源代码中加入代表空格的HTML代码“＆nbsp”。

三、添加空格

水平线是网页中常见的一种元素。在网页排版中，水平线的作用是分隔文本和对象，使段落区分更清楚、明了。水平线的添加方法是：首先将插入点定位在目标位置，然后选择菜单栏中的“插入”>“水平线”菜单命令，效果如图3-19所示。四、添加与设置水平线图3-19水平线效果图3-20设置水平线颜色

如要改变水平线颜色，可在选中水平线后切换至代码视图，在水平线标签<hr>中输入“color=‘颜色代码’”，如图3-20所示。一般无法直接在编辑画面看到水平线的颜色设置效果，只有在浏览器中预览时才能看到。

列表是指将具有相似特性或某种顺序的文本进行有规则地排列，常用于条款或列举类型的文本中，是一种简单且实用的段落排列方式。以列表方式显示的文本更直观、清楚。在文档窗口中，可以用现有文本或新文本创建无序列表和有序列表，这是最常使用的两种列表。五、创建列表1．项目列表项目列表文字前面一般用项目符号作为前导字符，效果如图3-21所示。项目列表的创建方法可参考以下步骤：图3-21项目列表效果图3-22添加项目列表步骤1：将插入点置于需要创建项目列表的位置。在“属性”面板中单击按钮，项目符号将出现在鼠标光标前，如图3-22所示。步骤3：步骤2：在项目符号前导符后面输入相应的文本内容，按【Enter】键分段后，下一个项目前导符会自动出现。继续输入其他列表项文本内容，完成整个项目列表的文字输入后，按两次【Enter】键即可停止列表输入。2．编号列表编号列表前通常有数字或字母作前导字符。这些字符可以是阿拉伯数字、英文字母或罗马数字等，效果如图3-23所示。编号列表的创建方法可参考以下步骤：步骤1：将插入点置于需要创建编号列表的位置，单击“属性”面板中的按钮，数字前导字符将出现在鼠标光标前，如图3-24所示。步骤3：步骤2：在阿拉伯数字前导符后面输入相应的文本内容，按【Enter】键分段后，下一个数字前导符会自动出现。继续输入其他列表项文本内容，完成整个编号列表的文字输入后，按两次【Enter】键即可停止编号。图3-23编号列表图3-24添加编号列表

在了解了网页文本的相关知识后，接下来通过为企业网站新闻显示网页设置文本内容，来进一步加强和巩固前面的学习。案例实施步骤1：启动DreamweaverCC，在“文件”面板中打开“ydjt”站点，分别双击其中的“xinwen_2x.html”和“text.txt”文档，将它们打开，如图3-25所示。图3-25打开网页文档和文本文档将插入点置于“text.txt”文档窗口中，按【Ctrl+A】组合键选中所有文本，再按【Ctrl+C】组合键复制所选文本，如图3-26所示。步骤2：单击“文档标签栏”中的“xinwen_2x.html”，切换到该文档，将插入点置于id="content"的Div中，按【Ctrl+V】组合键粘贴文本，如图3-27所示。步骤3：图3-26选择并复制文本图3-27粘贴文本根据需要，按照前面介绍的方法为文本分段。步骤4：将插入点置于文本标题“董事局主席尚利永光荣当选中国光彩事业促进会副会长”后面，选择“插入”>“水平线”菜单，在标题下方插入水平线，如图3-28所示。步骤5：按【Ctrl+S】组合键保存网页，此时便完成了网页中文本内容的设置。步骤6：图3-28插入水平线拓展知识

列表在HTML中的表示

1．项目列表大部分网页中的列表均采用项目列表，在HTML中使用<ul></ul>标签对定义，包含的列表项使用<li></li>标签对定义，如表3-1所示。列表项的默认符号为小圆点●，要改变符号类型或去除符号，可使用CSS属性进行控制。

2．编号列表编号列表在列表项前用编号表示，因此，浏览者可以清晰地了解每项的顺序。其中<ol></ol>标签对用来定义编号列表，包含的列表项用<li></li>标签对定义，默认序号为1，2，3，如表3-2所示。表3-1无序列表效果代码效果<body><ul><li>咖啡</li><li>牛奶</li><li>奶</li></ul></body>表3-2编号列表效果代码效果<body><ol><li>咖啡</li><li>牛奶</li><li>奶茶</li></ol></body>

3．定义列表除上述两种列表外，还有一种定义列表，是项目及其注释的组合。其中<dl></dl>标签对表示定义列表；<dt></dt>标签对表示每个定义的名称（项目名）；<dd></dd>标签对表示每个定义名称的详细内容（注释），如表3-3所示。

表3-3定义列表效果代码效果<body><dl><dt>咖啡</dt><dd>黑色的热饮</dd><dt>牛奶</dt><dd>白色的冷饮</dd></dl></body>案例一为企业网站新闻显示网页设置页面基本信息——设置网页基本信息案例二为企业网站新闻显示网页设置文本内容——设置网页文本案例四为博客网站首页设置多媒体——应用动画和多媒体文件案例五为企业网站新闻显示网页设置超链接——应用超链接案例三为企业网站新闻显示网页设置图像——设置网页图像

在网页中插入图像时，最好能保证网页和要插入的图像均位于当前站点中（图像一般位于img文件夹或images文件夹中），否则很容易出现网页发布后看不到图像的情况。下面以在童话故事网页中应用图像为例进行说明。注意，如果此时还没将本书附赠的“素材与实例\ch03”目录下的“text”文件夹拷贝至“test”站点根目录中，请将其拷入。相关知识一、插入图像图3-29定位插入点后单击“图像”按钮启动DreamweaverCC，在“文件”面板中打开站点“test”，并双击“text”文件夹中的“index_3x.html”文档将其打开。步骤1：将插入点置于水平线右侧，单击“插入”面板“常用”类别“图像”按钮中的小三角符号，在其下拉列表中选择“图像”，如图3-29所示。步骤2：打开“选择图像源文件”对话框，在上方的下拉列表中选择图像所在文件夹，在文件列表中选择要插入的图像文件，然后单击“确定”按钮，插入图像，如图3-30所示。步骤3：图3-30插入图像

如果所选图像文件不在当前站点中，就会弹出一个询问是否复制文件的提示框。单击“是”按钮（见图3-31），DreamweaverCC将弹出“复制文件为”对话框，在“保存在”下拉列表中选择站点内的图像文件夹即可，如图3-32所示。图3-31提示框图3-32“复制文件为”对话框单击选中插入的图像，可在“属性”面板中对图像的各项属性进行修改设置，如图3-33所示。二、设置图像属性图3-33图像“属性”面板下面简单介绍一下图像“属性”面板中各设置项的意义。Src：指定图像的源文件地址。Class：可对图像应用类样式。宽和高：设置图像在页面中的宽度和高度。替换：为图像输入一个名称或一段简短的描述，在浏览网页时，当鼠标移动到图像上时，即可显示该信息。链接：指定图像的超链接。编辑：可对图像进行编辑，包括从源文件更新、裁切、重新取样、亮度和对比度以及锐化图像等操作。地图：通过热点工具，在图像上绘制热区，并设置其名称、链接地址等。目标：单击其后的下拉按钮，在弹出的下拉列表中可选择链接目标的打开方式。

在了解了图像的相关知识后，接下来通过为企业网站新闻显示网页设置图像，来进一步加强和巩固前面的学习。启动DreamweaverCC，在“文件”面板中打开“ydjt”站点，双击其中的“xinwen_3x.html”文档，将其打开。案例实施步骤1：将插入点置于id="content"的Div中文本的后面，单击“插入”面板“常用”类别“图像”按钮中的小三角符号，在其下拉列表中选择“图像”，图3-34所示。步骤2：图3-34定位插入点后单击“图像”按钮在打开的“选择图像源文件”对话框中选择要插入的图像，然后单击“确定”按钮，如图3-35所示。步骤3：插入图像，并保存文档，效果如图3-36所示。步骤4：图3-35选择图像图3-36插入图像拓展知识

目前在网页中可以使用的图像格式有JPEG，GIF和PNG。一、网页中可用的图像格式

（1）JPEG（联合图像专家组标准）格式适于表现色彩丰富，具有连续色调的图像，如各种照片。（2）GIF（图形交换格式）格式最多只能包含256种颜色，因而适合表现色调不连续或具有大面积单一颜色的图像，如卡通画、按钮、图标、徽标等。（3）PNG（便携网络图像）格式集JPEG和GIF格式的优点于一身，图像质量高且可包含透明区。二、图像在HTML中的表示图像的HTML标签代码如下：<imgsrc="images/1.jpg"width="400"height="300"alt="">上述代码表示插入一个images文件夹下名为1.jpg的图像，并将图像的宽和高分别设为400和300像素，alt表示替换文本，此处为空。需要注意，要在网页中使用图像，必须将图像拷贝到网页所在的站点文件夹内。案例三为企业网站新闻显示网页设置图像——设置网页图像案例二为企业网站新闻显示网页设置文本内容——设置网页文本案例一为企业网站新闻显示网页设置页面基本信息——设置网页基本信息案例五为企业网站新闻显示网页设置超链接——应用超链接案例四为博客网站首页设置多媒体——应用动画和多媒体文件网页中最常用的动画格式是“.swf”，其插入方法比较简单。相关知识一、插入并设置动画属性将本书附赠素材“素材与实例\ch03”目录下的“blog”文件夹拷贝至本地磁盘，并以“blog”为站点文件夹，在DreamweaverCC中创建站点“blog”。在“文件”面板中双击“blog”站点中的“ys1.html”，将其打开，如图3-37所示。步骤1：步骤2：图3-37打开文档将插入点置于网页中间“自制动画‘浪花一朵朵’”文字的下方，在菜单栏中选择“插入”>