Dreamweaver-cs6中文版入门与提高实例教程配套全册教学ppt课件

,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Dreamweaver cs6中文版入门与提高实例教程配套全册教学课件,Dreamweaver cs6中文版入门与提高实例教程配套全,第,1,章 网页制作基础知识,第1章 网页制作基础知识,网页是网络上的基本文档，网页中包含文字、图片、声音、动画、影像以及链接等元素，通过对这些元素的有机组合，就构成了包含各种信息的网页。简单地说，通过浏览器在,WWW,上所看到的每一个超文本文件都是一个网页，而通过超链接连接在一起的若干个网页的集合即构成网站,。,通常网站都有一个能够连接到网上的惟一编码，即,IP,地址。,由于,IP,地址非常不便于记忆，所以通常用一串文字来代替，例如,等，这就是域名。域名也必须是惟一的，它由固定的网络域名管理组织在全世界范围内进行统一管理。,通常我们看到的网页，都是以,.htm,、,.html,、,.shtml,等为后缀的文件。在,网站设计中，这种纯粹,HTML,格式的网页通常被称为静态网页。,动态网页是指服务器会针对不同的使用者以及不同的要求执行不同的程序，从而提供不同的服务，一般与数据库有关。,1.1,网页与网站,网页是网络上的基本文档，网页中包含文字、图片、,1.2.1,确定网站的主题和目标用户,1.2,网站建设的基本步骤,一个网站的成功与否与建站之前的网站规划有着极为重要的关系。建立网站，首先要对网站及网页的内容、风格进行规划。这一阶段的任务主要是明确网站的主题和名称，并对网站的技术可行性、经济可行性和时间可行性进行分析。,网站的主题就是网站所要包含的主要内容。一个优秀的网站其页面必须做好以下三个方面：内容、速度和风格。内容是网站的根本，一个成功的网站在内容方面一定有独到之处，如新浪的新闻、百度的搜索、联众的游戏等。,无论是个人网站、企业网站还是综合性信息网站，都需要明确地树立自己的主题和方向，在内容组织上要有特色、定位准确、内容丰富、且有良好的即时更新性。,Web,站点的风格是指站点的整体形象给浏览者的感受。整体形象包括站点的,CI,，版面布局，浏览方式，交互性，文字，语气，内容等等诸多因素。风格会极大地影响读者对网站的评价，浏览者不需要任何预先的知识，就可能从,Web,站点的视觉界面获得主观印象。,1.2.1 确定网站的主题和目标用户1.2 网站建设的,迪斯尼中国官方网站,迪斯尼中国官方网站,1.2.2,规划网站的栏目与版块,不管是简单的个人主页，还是复杂的、几千个页面的大型网站，对网站的规划都要放到第一步，因为它直接关系到网站的功能是否完善，是否够层次，是否达到预期的目的等。明确了网站的主题和目标用户之后，接下来要依据网站的主题，仔细规划和设计主题中的每个栏目与版块。,例如，通常个人网站主要用于展现个人风采。因此，网站的主要内容是个人感兴趣的东西，如一些精美的文章、日志、学习笔记、网站相册。制作网站的目的除了展示个人的东西以外，还希望能与其他网友交流，因此可以添加留言板；为了加大网站的访问量，或收藏自己喜欢的素材、网站，可以添加友情链接。如今电子商务盛行，不妨也在个人网站上开一个简单的小店，将自己的商品或需要换购的物品放置在个人网站上。,不管是简单的个人主页，还是复杂的、几千个页面,1.2.3,组织站点结构,组织站点结构是指编排网站文件的目录结构。设置站点的常规做法是在本地磁盘上创建,个包含站点所有文件的文件夹，然后在该文件夹中创建和编辑文档。当准备好发布站点并允许公众查看时，再将这些文件复制到,Web,服务器上。目录结构的好坏，对站点本身的上传维护以及以后内容的更新和维护有着重要的影响。,在建立目录结构时，尽量不要将所有文件都存放在根目录下，而是按栏目内容建立子目录。例如时尚资讯站点可以根据时尚类别分别建立相应的目录，如服饰、家居、音像、美容等相应目录。其他如友情链接等需要经常更新的次要栏目，可以建立独立的子目录。而,些相关性强、不需要经常更新的栏目，如关于本站、联系我们等，可以合并放在统一目录下。另外，在每个主目录下都建立独立的,images,目录，用于存放各个栏目中的图片。在默认情况下，站点根目录下都有,images,目录，用于存放首页和次要栏目的图片。,此外，为便于维护和管理，建立的目录结构的层次建议不要超过,4,层，且不要使用中文目录名或过长的目录名。,1.2.3 组织站点结构 组织站点结构是指编,1.2.4,收集整理建站资源,了解了网站的主要目录结构后，就可以创建和收集需要的建站资源了。一般建站资源包括图像、文本和媒体。收集了所有这些项目后，分门别类地存放在相应的文件夹中，以便于查找和管理。,在网站主题和名称定下来之后，需要思考的就是网站的标识。网站的标识，即网站,Logo,，如同商品的商标，可以使网络浏览者易于识别和便于选择网站。一个好的,Logo,往往会反映,Web,及制作者的某些信息，特别是对一个商业,Web,来讲，可以从中基本了解到这个,Web,的类型。,Logo,可以是中文，英文字母，可以是符号，图案，也可以是动物或者人物等。比如：,IBM,是用,IBM,的英文作为标志，新浪用字母,sina+,眼睛作为标志，苹果用一只苹果作为标志，搜狐用一只卡通狐狸作为标志。,常见的,logo,1.2.4 收集整理建站资源 了解了网站的主要,视觉上的吸引仅仅是,Web,设计的一部分，为了让读者方便地获得信息，在进行,Web,设计时，,Logo,的形式应该服从功能，形式的设计应该尽量满足功能所需的简明、清晰。,奥运开幕,logo,为了便于在,Internet,上传播信息，关于,Web,站点的,Logo,，国际上有一个统一的标准规范。目前网站,Logo,有以下三种规格：,1,88*31,这是互联网上最普遍的,Logo,规格，某些收集,Logo,的站点所收集的均是这种规格的,Logo,。,2,120*60,这种规格用于一般大小的,Logo,。,3,120*90,这种规格用于大型,Logo,。,一个好的,Logo,应具备以下的几个条件，或者具备其中的几条：符合国际标准。传达网站的类型信息。风格独特、设计精美。,视觉上的吸引仅仅是Web设计的一部分，为了,1.2.5,网页版面布局与设计,网站建设的目的是为用户服务，因此应根据网站建设的目的确定网站的布局和功能。例如，建立,个电子商务网站，就要根据消费者的需求、购买力、购买习惯等要素设计网页的功能。,其次，网站上的内容并不是大量的信息简单地堆积，这些信息必须通过一定的形式来体现，这就是网站结构、页面外观、页面布局等。同时，网页的设计要考虑到网页的加载速度，不能因为网页的加载时间过慢而使网站的眼球数大大降低。因此，网页在设计上切忌使用过多、过大的图片和过多的表格嵌套。,常见的网页布局形式大致有“厂”字型、“口”字型、“海报”型、“同”字型、“三”字型和“框架”型布局。,海报型布局,1.2.5 网页版面布局与设计 网站建设的目,1.2.6,测试网站,在确定好网页的目标、功能、风格及整理好素材后就可以采用多种方法和网页制作工具进行网页的制作。同时，为了保证网页的正确性，当网页设计人员制作完所有页面后，需要对所设计的网页进行审查和测试。主要进行网页的功能性测试、完整性测试和安全性测试。,1.2.7,发布与推广网站,在成功进行完上面的几个步骤后，网站中的网页就可以发布到,Internet,中，供人们访问。在发布网站之前，必须先申请域名和空间，以标识和存放网站。,域名是网站在网络上存在的标志，对于企业开展电子商务具有重要的作用，被誊为网络时代的“环球商标”，,个好的域名可以大大增加企业在互联网上的知名度。,申请完空间和域名后，就可以将网站上传到服务器，让浏览者看到。读者可以利用,FTP,软件，也可以使用,Dreamweaver,进行上传。,网站做好后必须推广才能为更多的网民所知道，推广网站的目的是提高网站的访问量并达到得用网络进行营销的目的。网站推广的手段有很多，主要的推广技巧有：搜索引擎注册、电子邮件宣传、,BBS,宣传、注册加入行业网站、网站合作、论坛留言、新闻组、互换广告条、传统方式推广和网络广告等。,1.2.6 测试网站 在确定好网页的目标、功,第,2,章,Dreamweaver CS6,简介,第2章 Dreamweaver CS6简介,2.1,初次启动,Dreamweaver CS6,安装完,Dreamweaver CS6,简体中文版之后，双击桌面上的,Adobe Dreamweaver CS6,图标，或执行“开始”,/“,程序”,/“Adobe Dreamweaver CS6”,命令，即可启动,Dreamweaver CS6,简体中文版。第一次启动,Dreamweaver CS6,时，会弹出如图所示的“默认编辑器”对话框，用户可以根据个人喜好将,Dreamweaver CS6,设置为指定文件类型的默认编辑器。,“默认编辑器”对话框,单击文件类型左侧的复选框，即可选中相应的文件类型。单击“确定”按钮即可进入,Dreamweaver CS6,的用户界面。,2.1 初次启动Dreamweaver CS6,启动,Adobe Dreamweaver CS6,简体中文版（以下简称,Dreamweaver CS6,）之后，默认显示,Dreamweaver,的欢迎界面,2.2 Dreamweaver CS6,的窗口组成,Dreamweaver CS6,欢迎界面,启动Adobe Dreamweaver CS6简体中文,单击欢迎界面上“新建”栏目下的文档类型，或执行“文件”,/“,新建”命令，在打开的“新建文档”对话框中选择“空白页”类别的,HTML,基本项，然后选择布局栏的“无”，单击“创建”按钮进入,Dreamweaver CS6,中文版的工作界面，如图所示。,Dreamweaver CS6,的工作环境,单击欢迎界面上“新建”栏目下的文,通常，从一个软件菜单的多少可以看出这个软件功能的大小。同样，从,Dreamweaver CS6,繁复的菜单可以看出其功能的庞大和完善。与大多数软件类似，,Dreamweaver CS6,的菜单栏位于工作环境最上方。,2.2.1,菜单栏,菜单栏,通常，从一个软件菜单的多少可以看出这个软件功能的大小。,Dreamweaver CS6,的文档工具栏主要集中了一些常用的页面操作命令，可以用不同的方式来查看文档窗口或者预览设计效果。,2.2.2,文档工具栏,工具栏,该工具栏中各个按钮图标的功能简述如下：,代码 ：切换到代码视图，显示当前文档的代码，如图所示。在代码视图中可以编辑插入的脚本，对脚本进行检查、调试等。,设计,：切换到设计视图，显示的内容与浏览器中显示的内容相同，如图所示。在“设计”视图中，使用,Dreamweaver CS6,提供的工具或命令，读者可以方便地进行创建、编辑文档的各种工作，即使完全不懂,HTML,代码的读者也可以制作出精美的网页。,拆分 ：在同一屏幕中显示代码和设计视图。,Dreamweaver CS6的文档工具栏主要,代码视图,代码视图,设计视图,设计视图,执行“查看”,/“,垂直拆分”菜单命令，用户还可以垂直分割文档窗口，即代码视图和设计视图以垂直对比的方式呈现。,垂直拆分代码,/,设计视图,执行“查看”/“垂直拆分”菜单命令，用户还可以, 实时视图 ：在“设计”视图或“折分”视图下，单击该按钮可以在不打开一个新的浏览器窗口的情况下实时预览页面的效果。再次单击该按钮，即可返回到可编辑的“设计”视图或“折分”视图。, 实时代码：在“实时视图”中单击该按钮，,Dreamweaver,将以黄色突出显示浏览器为呈现该页面而执行的代码版本，此代码是不可编辑的。如图所示。再次单击该按钮，即可返回到可编辑的“代码”视图。,借助,Dreamweaver CS6,新增的“多屏幕预览”功能，为智能手机、平板电脑和台式机进行设计。使用媒体查询支持，为各种不同设备设计样式并将呈现内容可视化。, 实时视图 ：在“设计”视图或“折分”视图下，单击该,查看页面的实时代码,查看页面的实时代码,从菜单栏中选择“查看”,/“,工具栏”,/“,文档”命令，可以打开或关闭文档工具栏。选择“查看”,/“,工具栏”,/“,标准”命令，可以打开或关闭,Dreamweaver CS6,的常用工具栏，如图所示。,常用工具栏,该工具栏中各个按钮图标的功能简述如下：,：单击该按钮，打开“新建文档”对话框。, ：打开一个文档。, ：打开,Adobe Bridge CS6,，通过搜索元数据标签，为访问管理文件、应用程序 和设置提供了中央控制。它也为访问,Adobe Stock,服务提供了支持。, ：保存当前文档。, ：保存所有打开的文档。,：打印代码。,：剪切当前所选内容。, ：复制当前所选内容。,：粘贴剪贴板中的内容。,：还原上一步操作。,：重做上一步操作。,从菜单栏中选择“查看”/“工具栏”/“文档”,自,Dreamweaver CS4,开始，,Dreamweaver,将“插入”栏整合成了一个浮动面板。单击文档窗口右侧浮动面板组中的“插入”按钮，即可弹出以前熟悉的“插入”面板。,2.2.3 “,插入”面板,“插入”栏,在不同面板之间进行切换,自Dreamweaver CS4开始，Dreamwea,“插入”面板共有,9,类对象元素，包含一些最常用的项目：常用、布局、表单、数据、,Spry,、,jQuery Mobile,、,InContext Editing,、文本和收藏夹。“插入”面板的初始视图为“常用”面板，单击“插入”面板中“常用”面板右侧的倒三角形按钮，即可在弹出的下拉列表中选择需要的面板，从而在不同的面板之间进行切换。如图所示。,以彩色图标显示的“常用”栏,“插入”面板共有9类对象元素，包含一些最常用的项,如果要在文档中添加某一个对象，打开相应类别的插入面板，然后单击相应的图标即可。默认状态下，“插入”面板中的对象图标以灰色显示，将鼠标移动图标上时显示为彩色。如果单击下拉列表中的“隐藏标签”命令，即可只显示对象图标，如图所示。,隐藏标签的“常用”栏,如果要在文档中添加某一个对象，打开相应类别的插,2.2.4,工作区,文档窗口是,Dreamweaver,的主工作区，用于显示当前创建或者编辑的文档，可以根据用户选择的显示方式不同而显示不同的内容。如图所示，界面中显示设计或代码的区域即为工作区。,文档窗口,2.2.4 工作区 文档窗口是Dreamwea,2.2.5,状态栏,Dreamweaver CS6,的状态栏位于文档窗口底部，嵌有三个重要的工具：标签选择器、窗口大小弹出菜单和下载指示器，分别用于显示和控制文档源代码、显示页面大小、查看传输时间等。如图所示。,状态栏,2.2.5 状态栏 Dreamweave,2.2.6,属性面板,在,Dreamweaver CS6,中，选中某一个对象之后，“属性”面板将显示被选中对象的属性。用户还可以在属性面板中修改被选对象的各项属性值。属性面板如图所示。,属性面板,属性面板一般分成上下两部分。不同的对象有不同的属性，因此选中不同对象时，属性面板显示的内容是不相同的。单击面板右下角的折叠按钮可以关闭属性面板的下部分，单击后效果如图所示。,下半部分折叠后的属性面板,2.2.6 属性面板 在Dreamw,2.2.7,浮动面板,在,Dreamweaver CS6,工作环境的右侧存在着许多浮动面板。启动,Dreamweaver CS6,后，有些浮动面板已经打开，更多的则没有显示。这些面板可以自由地在界面上拖动，也可以将多个面板组合在一起，成为一个选项卡组，在默认的情况下，,Dreamweaver CS6,中的浮动面板都是成组排列于工作环境的右侧，并且自动排齐。,在菜单栏中的“窗口”下拉菜单中单击面板名称可以打开或者关闭这些面板。例如，要打开“行为”面板可以执行“窗口”,/“,行为”命令。,Dreamweaver CS6,三个重要的功能分别是网页设计、代码编写和应用程序开发，相应的浮动面板也可以这样分类。,Dreamweaver CS6,的浮动面板继承了以前版本的面板属性，可以方便地拆分和组合。下面以将“,AP,元素”面板从“,CSS,样式”面板组中折分出来，然后合并到“插入”面板组为例，详细介绍拆分和组合面板的操作方法。,1,选择“窗口”,/“AP,元素”命令，打开“,AP,元素”面板。,2,单击“,AP,元素”面板的标签，按下鼠标左键，然后拖动到合适的位置，释放鼠标。此时“,AP,元素”面板成为一个独立的面板，可以在工作界面上随意拖动。如图所示。,2.2.7 浮动面板 在Dreamweave,3,单击“,AP,元素”面板的标签，按下鼠标左键，然后拖动到浮动面板组中“插入”面板的下方，此时，“插入”面板底端将显示一条蓝色的粗线，表示“,AP,元素”面板将到达的目的位置。释放鼠标，即可将“,AP,元素”面板重新排列在浮动面板中，如图所示。此时，单击浮动面板组中的“,AP,元素”面板，即可展开面板组。,分离出的“,AP,元素”面板,组合,AP,元素面板,展开面板组,从上图可看出，“,AP,元素”面板已和“插入”面板组合成一个面板，单击面板组顶端的标签，即可在“插入”面板和“,AP,元素”面板之间进行切换。在实际使用中，用户应该根据自己的设计习惯，将常用的面板组合在一起，并放在适当的地方，以配置出最适合于个人使用的工作环境。,3单击“AP元素”面板的标签，按下鼠标左键,2.2.8,标尺、网格与辅助线,使用标尺、网格和辅助线可以很方便地布局对象，并能了解编辑对象的位置。,1,标尺,选择“查看”,/“,标尺”,/“,显示”命令即可显示标尺。在文档编辑窗口拖动鼠标时，在标尺上能查看到当前鼠标位置的坐标。再次选择“查看”,/“,标尺”命令可以隐藏标尺。在“查看”,/“,标尺”命令的子命令中，还可以根据设计需要设置标尺的原点位置和单位。,2,网格,网格是文档窗口中纵横交错的直线，通过网格可以精确定位图像对象。,选择“查看”,/“,网格”,/“,显示网格”命令，即可在文档编辑窗口中显示网格。,选择“查看”,/“,网格”,/“,靠齐到网格”命令，在文档中创建或移动对象时，就会自动对齐距离最近的网格线。,选择“查看”,/“,网格”,/“,网格设置”命令，在弹出的“网格设置”对话框中可以设置网格的参数，如颜色、间隔和线型。,3,辅助线,使用辅助线可以更精确地排列图像，标记图像中的重要区域。将鼠标移到标尺上，按住鼠标左键并拖动到文档中合适的位置释放，即可添加辅助线，如图所示。,2.2.8 标尺、网格与辅助线 使用标尺、网格和,添加辅助线,将辅助线添加到页面上之后，用户还可以根据需要对辅助线进行编辑。,添加辅助线 将辅助线添加到页面上之后，用户还可,2.3,文件操作,2.3.1,新建、打开文档,创建新的网页文件，有以下两种方法：,1,执行“文件”,/“,新建”命令，在弹出的如图所示的“新建文档”对话框中，选择想要创建文件的类型和布局，然后单击“创建”按钮，即可创建新文件。,“新建文档”对话框,2.3 文件操作 2.3.1 新建、打开文档,2,如果要基于模板创建文档，则先在“新建文档”对话框中单击“模板中的页”标签，切换到如图所示的对话框。在该对话框中单击选择模板的站点，然后再选择需要的模板文件。这时用户可以通过预览区域浏览所选择模板的样式，看是否符合自己的要求。选择需要使用的模板后，单击“创建”按钮，即可基于选定的模板创建一个新文档。,“新建文档”对话框,2如果要基于模板创建文档，则先在“新建文档,如果要编辑一个网页文件，必须先打开该文件。,Dreamweaver CS6,可以打开多种格式的文件，如,htm,、,html,、,shtml,、,asp,、,jsp,、,php,、,js,、,aspx,、,dwt,、,xml,、,lbi,、,as,、,css,等。打开网页文件可以分为直接打开网页文件和在框架中打开网页文件两种，下面分别进行说明。,（,1,）直接打开文件,选择“文件”,/“,打开”命令，弹出“打开”对话框。用户在文件名框中选择需要打开的文件，并单击“打开”按钮，即可打开该文件。用户也可在对话框中双击所需文件来打开。,如果,Dreamweaver CS6,还没有启动，可以右击要打开的文件，在弹出的菜单中执行“使用,Dreamweaver CS6,编辑”命令来打开文件。,（,2,）在框架中打开文件,如果已打开框架集文件，要在框架集中某一个框架打开文件，可以先把光标定位在需要打开文件的框架内，选择“文件”,/“,在框架中打开”命令，则会打开“选择,HTML,文件”对话框。在此方式下，只能打开以,html,为扩展名的文件。,如果要编辑一个网页文件，必须先打开该文件。Dr,2.3.2,导入文件,在,Dreamweaver CS6,中，可以直接导入,XML,文件、表格式数据、,word,文档和,Excel,文档。,执行“文件”,/“,导入”命令下的子命令，然后找到需要导入的文件，单击“打开”命令，即可导入相应的文件。,2.3.3,保存、关闭文档,在,Dreamweaver CS6,中，保存网页文件的方法随保存文件的目的不同而不同。,如果同时打开了多个网页文件，则执行“文件”,/“,保存”或“文件”,/“,另存为”命令只保存当前编辑的页面。,要保存打开的所有页面，则须执行“文件”,/“,保存全部”命令。,若是第一次保存该文件，则执行“文件”,/“,保存”命令会弹出“另存为”对话框。若文件已保存过，则执行“文件”,/“,保存”命令时，直接保存文件。,如果希望将一个网页文档以模板的形式保存，切换到要保存的文档所在的窗口，执行“文件”,/“,另存为模板”命令，则会打开“另存模板”对话框。,在该对话框的“站点”下拉列表框中选择一个保存该模板文件的站点，然后在“另存为”后面的文本框中输入文件的名称，最后单击“保存”按钮完成文件的保存。,提示： 第一次保存模板文件时，,Dreamweaver CS6,将自动为站点创建,Templates,文件夹，并把模板文件存放在,Templates,文件夹中。请不要把非模板文件存放到此文件夹中。,2.3.2 导入文件 在Dreamweave,2.3.4,设置文档属性,页面标题、背景图像和颜色、文本和链接颜色以及边距是每个,Web,文档的基本属性。一般情况下，新建一个网页文件后，其默认的页面属性都不符合设计需要。可以通过设置文档的页面属性来自定义页面外观。操作步骤如下：,1,在,Dreamweaver,中打开要修改页面属性的网页文件。,2,选择“修改”,/“,页面属性”命令，在弹出的如图所示的对话框中对页面的外观、链接、标题和编码入跟踪图像进行设置。,“页面属性”对话框,2.3.4 设置文档属性 页面标题、背景图像和,3,在“外观”分类中，可以设置页面字体、大小、颜色、背景颜色和图像、背景图像的填充方式和页边距。页边距是指页面文档主体部分与浏览器上、下、左、右边框的距离。,如果同时使用背景图像和背景颜色，下载图像时会先出现颜色，然后图像覆盖颜色。如果背景图像包含任何透明像素，则背景颜色会透过背景图像显示出来。,默认情况下，,Dreamweaver,使用,CSS,指定页面属性。如果希望使用,HTML,标签，则必须在“首选参数”对话框的“常规”类别中取消对“使用,CSS,而不是,HTML,标签”选项的选择。如果选择使用,HTML,指定页面属性，属性面板仍然显示“样式”弹出式菜单，不过，字体、大小、颜色和对齐方式控件将只显示使用,HTML,标签的属性设置，应用于当前选择的,CSS,属性值将是不可见的，且“大小”弹出式菜单也将被禁用。,4,在“链接”分类中，可以定义链接的默认字体、字体、颜色，以及链接文本不同状态下的颜色、修饰样式。,5,在“标题”分类中，用户可以定义标题字体，并指定最多六个级别的标题标签使用的字体大小和颜色。,3在“外观”分类中，可以设置页面字体、大小、,6,在“标题,/,编码”分类中，用户可以指定页面在浏览器窗口或编辑软件窗口中显示的标题、所用语言的文档编码类型，以及指定要用于该编码类型的,Unicode,范式。,7,在“跟踪图像”分类中，用户可以指定跟踪图像及图像的透明度。,跟踪图像是,Dreamweaver,一个非常有效的功能，是放在文档窗口背景中的、使用各种绘图软件绘制的一个想象中的网页排版格局图，可以是,JPEG,、,GIF,或,PNG,图像，从而可以使用户非常方便地定位文字、图像、表格、层等网页元素在页面中的位置。,跟踪图像仅在,Dreamweaver,中可见，也就是说，使用了跟踪图像的网页在用,Dreamweaver,编辑时不会再显示背景图案，但当使用浏览器浏览页面时，则显示背景图案，而跟踪图像不可见。,8,设置完毕后，单击“确定”按钮关闭对话框。所做设置将应用于当前文档。,6在“标题/编码”分类中，用户可以指定页面在,第,3,章 网站的构建与管理,第3章 网站的构建与管理,3.1,站点相关术语,3.1.1 Internet,服务器和本地计算机,Internet,服务器是网络上一种为客户端计算机提供各种,Internet,服务（包括,WWW,、,FTP,、,e-mail,等）的高性能计算机，它在网络操作系统的控制下，将与其相连的硬盘、磁带、打印机、,Modem,及各种专用通讯设备提供给网络上的客户站点共享，也能为网络用户提供集中计算、信息发表及数据管理等服务。它的高性能主要体现在高速度的运算能力、长时间的可靠运行、强大的外部数据吞吐能力等方面。,对于,WWW,浏览服务来说，,Internet,服务器主要用于存储网民所浏览的,Web,站点和页面。网民在浏览网页时，不需要了解它的实际位置，只需要在地址栏输入网址，按下回车，就可以轻松浏览网页。,对于浏览网页的用户来说，他们所使用的计算机被称作本地计算机。本地计算机也可能做服务器，只不过可能没有专业的服务器好，如访问量过大可能就会出现瘫痪等状况。,本地计算机和,Internet,服务器之间通过各种线路（如电话线、,ADSL,、,ISDN,或其他缆线等）进行连接，以实现相互的通信，在连接线路中，可能会通过各种各样的中间环节。,3.1 站点相关术语3.1.1 Internet服务器和,3.1.2,本地站点与远端站点,严格地说，站点是一种文档的磁盘组织形式，它由文档和文档所在的文件夹组成。设计良好的网站通常具有科学的结构，利用不同的文件夹，将不同的网页内容分门别类地保存。结构良好的网站，不仅便于管理，也便于更新。,在,Internet,上浏览网页，就是用浏览器打开存储于,Internet,服务器上的,HTML,文档及其他相关资源。基于,Internet,服务器的不可知特性，我们通常将存储于,Internet,服务器上的站点称作远端站点。,利用,Dreamweaver CS6,可以对位于,Internet,服务器上的站点文档直接进行编辑和管理。但这在很多时候非常不便，例如网络速度和网络的不稳定性等，都会对管理和编辑操作带来影响。此外，直接对位于,Internet,服务器上的文档和站点进行操作，必须始终保持同,Internet,的连接。,利用,Dreamweaver CS6,，用户可以在本地计算机上创建出站点的框架，从整体上对站点全局进行把握。站点设计完毕之后，再利用各种上传工具，例如,FTP,程序，将本地站点上载到,Internet,服务器上，形成远端站点。,3.1.2 本地站点与远端站点 严格地说，站点是一种文档,3.3,构建本地站点,与早期版本相比，,Dreamweaver CS6,的“管理站点”对话框给人焕然一新的感觉。在该面板中新增了创建或导入,Business Catalyst,站点功能，利用该功能，可以在,Dreamweaver,中创建新的,Business Catalyst,试用站点。,“管理站点”对话框,“站点设置”对话框,3.3 构建本地站点 与早期版本相比，Drea,如果要创建动态网站，则还需要指定远程服务器和测试服务器。在Dreamweaver CS,6,中，用户可以在一个视图中指定远程服务器和测试服务器，从而使用户可以以前所未有的速度快速建立网站，分阶段或联网站点甚至还可以使用多台服务器。,选择连接服务器的方法,“站点设置”对话框,如果要创建动态网站，则还需要指定远程服务器和测,设置浏览文件的地址,服务器类型,设置浏览文件的地址服务器类型,注意：指定测试服务器时，必须在“基本”屏幕中指定,Web URL,。,从,Dreamweaver CS6,开始，,Dreamweaver,将不再安装,ASP.NET,、,ASP JavaScript,或,JSP,服务器行为。但,Dreamweaver CS5,对这些页面仍然提供实时视图、代码颜色和代码提示支持，且无需在“站点设置” 对话框中选择,ASP.NET,、,ASP JavaScript,或,JSP,。,设置远程服务器和测试服务器,选择服务器模型,注意：指定测试服务器时，必须在“基本”屏幕中指定 W,3.4,管理本地站点和站点文件,1,打开本地站点,（,1,）执行“窗口”,/“,文件”命令，打开文件管理面板。,（,2,）单击文件管理面板左上角的下拉列表，从中选择需要的站点。,2,编辑站点,（,1,）执行“站点”,/“,管理站点”命令，弹出“管理站点”对话框。,（,2,）选择需要编辑的站点，单击“编辑”按钮，弹出该站点的“站点设置”对话框。,（,3,）重新设置站点的属性。,3,删除站点,（,1,）执行“站点”,/“,管理站点”命令，弹出“管理站点”对话框。,（,2,）选择需要删除的站点，单击“删除”按钮，弹出一个对话框，提示用户本操作不能通过执行“编辑”,/“,撤消”命令的办法恢复。,（,3,）单击“是”，即可删除选中站点。,提示：删除站点实际上只是删除了,Dreamweaver,同该本地站点之间的关系。但是实际的本地站点内容，包括文件夹和文档等，仍然保存在磁盘相应的位置上。用户可以重新创建指向该位置的新站点。,4,复制站点,3.3.1,管理站点,3.4 管理本地站点和站点文件1打开本地站点3.3.1,3.3.2,使用文件面板,在“文件”面板中查看站点、文件或文件夹时，可以更改查看区域的大小，还可以展开或折叠“文件”面板。当折叠“文件”面板时，它以文件列表的形式显示本地站点、远程站点、测试服务器或,SVN,库的内容。在展开时，它会显示本地站点和远程站点、测试服务器或,SVN,库中的其中一个。展开的“文件”面板的选项如图所示：,展开的“文件”面板选项,3.3.2 使用文件面板 在“文件”面板中查,3.3.3,操作站点文件或文件夹,无论是创建空白的文档，还是利用已有的文档构建站点，都可能会需要对站点中的文件夹或文件进行操作。下面简要介绍利用“文件”面板对本地站点的文件夹和文件进行创建、删除、移动和复制等操作。,注意：同删除站点的操作不同，这种对文件或文件夹的删除操作，会从磁盘上真正删除相应的文件或文件夹。,移动文件,/,文件夹,更新文件链接,3.3.3 操作站点文件或文件夹 无论是创建空,3.3.4,存储库视图,Dreamweaver CS6,集成了一个版本控制软件,Subversion,，可以提供更健壮的文件版本控制、回滚，等等的取出文件、存回文件的操作。,Dreamweaver,虽然不是一个完整的,SVN,客户端，却使用户无需任何第三方工具或命令行界面，就可获取文件的最新版本、更改或提交文件。,1,建立,SVN,连接,由于,Dreamweaver CS6,只是集成了,Subversion,客户端，因此在进行存储库视图操作之前，必须建立与,SVN,服务器的连接。,2,获取最新版本的文件,3,提交文件,提示：在“文件”面板的文件列表中，文件上的绿色选中标记表示此文件有更改，但尚未提交到存储库。,4,更新文件或文件夹的,SVN,状态,5,锁定和解锁文件,6,向存储库添加新文件,提示：在“文件”面板中，文件上的蓝色加号表示,SVN,存储库中尚没有此文件。,7,解析冲突的文件,3.3.4 存储库视图 Dreamweaver,3.4,测试站点,3.4.1,管理网页链接,在发布网站之前先使用,Dreamweaver CS6,的链接检查器对网站文件进行检查，可以检查单个页面、一个文件夹、甚至整个站点，找出断开的链接、错误的代码和未使用的孤立文件等，以便进行纠正和处理。,1,检查断开的链接,如果发现了错误的链接，,Dreamweaver,会在“链接检查器”页面的文件窗格中列出链接错误所在的页面。双击检测到的一个结果，会自动打开相应的页面，并直接定位到错误的链接处，修改链接错误既快又方便。,设置检测范围,链接检查结果,3.4 测试站点3.4.1 管理网页链接,2,检测无用文件,利用,Dreamweaver CS6,的链接检查功能，用户还可以检查站点中无用的文件并删除。,3,显示外部链接,孤立文件检查结果,查看外部链接,2检测无用文件孤立文件检查结果查看外部链接,3.4.2,配置浏览器,在,Dreamweaver CS6,中创建网页后，最好设置多个不同的主流浏览器（如,Internet Explorer,、,Netscape Navigator,、,NetCaptor,等）分别对其进行预览，以查看不同浏览器用户的浏览效果。,在,Dreamweaver CS6,中，按,F12,键可以在主浏览器中预览网页文件；按,Ctrl+F12,组合键可以在次浏览器中预览网页文件。通过情况下，只要设置主浏览器和次浏览器即可，如果需要，可以在“首选参数”对话框中设置多达,20,个浏览器。,3.4.2 配置浏览器 在Dreamweav,3.4.3,检查浏览器的兼容性,Dreamweaver CS6,自带的网页测试系统包含了一个浏览器兼容性检测功能（,BCC,），它可以帮助不论使用何种浏览器的用户定位能够触发浏览器呈现错误的,HTML,和,CSS,组合，还可测试文档中的代码是否存在目标浏览器不支持的任何,CSS,属性或值，并生成报告，指出各种浏览器中与,CSS,相关的呈现问题。在代码视图中，这些问题以绿色下划线来标记。每隔一段时间，它都会自动更新问题库，并根据此库的信息对页面进行检测，并告知用户,Adobe,是否已对此问题作出修正。此外，,Dreamweaver CS6,的预览加入了默认的,FIREFOX,浏览器。,检查浏览器兼容性,3.4.3 检查浏览器的兼容性 Dream,3.5,站点发布,3.5.1,配置远程站点,1,选择“站点”,/“,管理站点”命令，打开“管理站点”对话框。,2,选中需要上传的站点，然后单击“编辑”按钮 ，在弹出的对话框左侧的“分类”中选择“服务器”项。,3,单击“添加新服务器”按钮 ，在弹出的对话框的“连接方式”下拉列表中选择连接到远程站点的方式。,配置服务器信息,配置服务器信息,2,3.5 站点发布3.5.1 配置远程站点1选择“站点”,4,切换到“高级”页面，设置远程站点文件的维护选项。,5,单击“保存”按钮，添加的服务器添加到服务器列表中。选中“远程”对应的复选框，如图所示。,6,设置完毕，单击“保存”按钮关闭对话框，完成远程站点的配置。,服务器列表,4切换到“高级”页面，设置远程站点文件的维护选项。服务器列,3.5.2,上传、下载与同步更新,一般来说，用户把自己计算机上的文件拷贝到远程计算机上的过程，称作上传；相反，用户从某台远程计算机上拷贝文件到自己计算机上的过程，称作下载。,在正常的浏览过程中，用户经常会进行上下载操作。在设置好本地站点信息和远程站点信息后，就可以进行本地站点与远程站点间文件的上传与下载了。,显示本地和远端站点,3.5.2 上传、下载与同步更新 一般来说，用,Dreamweaver CS6,改善了,FTP,性能。利用对,jQuery Mobile,和,Adobe PhoneGap,框架的更新支持，可以便捷地建立移动应用程序。利用重新改良的多线程,FTP,传输工具和图像编辑功能，可以有效地设计、开发并发布网站和移动应用程序，节省上传大型文件的时间。,本地站点和远程,web,站点应该具有完全相同的结构，在这两种站点之间传输文件时，如果站点中不存在必需的文件夹，则,Dreamweaver,将自动创建这些文件夹。如果使用,Dreamweaver,创建本地站点，然后将全部内容上传到远程站点，则,Dreamweaver,能确保在远程站点中精确复制本地结构。,站点的发布是一个持续的过程，这一过程的一个重要部分是定义并实现一个版本控制系统，既可以使用,Subversion,，也可以使用外部的版本控制应用程序。,提示：如果要上传的文件尚未保存，可能会出现一个对话框（取决于用户在“首选参数”对话框的“站点”类别中设置的首选参数），提示用户在将文件上传到远端服务器之前进行保存。如果出现对话框，请单击“是”保存该文件，或者单击“否”将以前保存的版本上传到远端服务器上。,Dreamweaver CS6改善了 FT,上传站点之后，可能会因为网页制作者的疏忽或多人编辑维护，出现本机网页文件和远程网页文件不一致的现象。利用,Dreamweaver,的站点同步功能可以轻松修正这种问题，方便用户进行站点更新维护。,同步文件,同步预览,上传站点之后，可能会因为网页制作者的疏忽或多人,3.6,实例制作之将已有文件组织为站点,本节将这些已有的文件夹组织为一个站点。步骤如下：,（,1,）启动,Dreamweaver CS6,，执行“站点”,/“,新建站点”命令，打开站点设置对话框。,（,2,）在“站点名称”后面的对话框中输入站点名称,blog,。,（,3,）单击“本地站点文件夹”右侧的文件夹图标，浏览到,c:inetpubwwwrootblog,目录；或直接输入,c:inetpubwwwrootblog,。,注意：本实例中用到的文件路径,inetpubwwwroot,是在本地计算机系统中成功安装,IIS,服务器之后自动生成的文件夹，是,Web,站点默认的主目录。建议读者在创建站点时，最好将本地站点文件夹放置在主目录之下，或将本地站点文件夹定义为,Web,服务器中的虚拟目录。如果用来处理动态页的文件夹不是主目录或其任何子目录，则必须创建虚拟目录。有关主目录和虚拟目录的介绍，读者可以参阅本书第,13,章,13.3,节的介绍，或相关书籍。,3.6 实例制作之将已有文件组织为站点本节将这些已有的文件,（,4,） 同理，设置“默认图像文件夹”的路径为,c:inetpubwwwrootblogimages,。,（,5,） 在“链接相对于”栏，选择“文档”选项。在“,Web URL”,右侧的文本框中输入,http:/localhost/blog/,。,如果制作静态站点，到这一步就完成了。由于本实例中需要制作动态页面，因此还需要创建虚拟目录、设置测试服务器。步骤如下：,（,6,）创建虚拟目录。在要设置为虚拟目录的文件夹,c:inetpubwwwrootblog,上单击鼠标右健，从弹出的快捷菜单中选择“属性”命令，打开“,Web,共享”选项卡。选中“共享文件夹”单选按钮，然后在弹出的“编辑别名”对话框中设置该文件夹的别名为,blog,。单击“确定”按钮关闭对话框。,（,7,）单击“站点设置”对话框左侧的“分类”列表中的“服务器”，切换到对应的对话框。单击“添加新服务器”按钮 ，依照本章,3.5.1,节所述步骤添加一个服务器，访问方式为“本地,/,网络”。,（,8,）切换到“高级”页面，在“服务器模型”下拉列表中选择“,ASP VBScript”,。,（,9,）单击“保存”按钮关闭“高级”屏幕，并在“服务器”类别中指定服务器类别为测试服务器，然后单击“确定”按钮，即可将指定文件夹定义为站点。,将文件夹目录结构组织为站点后，即可以将磁盘上现有的文档组织当作本地站点来打开，便于以后统一管理。,（4） 同理，设置“默认图像文件夹”的路径为c:inetp,第,4,章 处理文字与图形,第4章 处理文字与图形,4.1,在网页中加入文本,4.1.1,插入文本,1,直接在,Dreamweaver,的文档窗口光标所在位置输入文本内容。,2,在其他的应用程序或文档中复制文本，然后切换回,Dreamweaver,文档窗口，将光标插入到要放置文本的地方，再选择“编辑”,/“,粘贴”,或“选择性粘贴”命令。,利用,Dreamweaver CS6,的粘贴选项，可以保留所有源格式设置，也可以只粘贴文本，还,可以指定粘贴文本的方式。,3,使用“文件”,/“,导入”命令导入其他文档中的文本，如,XML,、表格式数据、,word,文档和,Excel,文档。,4,从支持文本拖放功能的应用程序中拖放文本到,Dreamweaver CS6,的文档窗口。,4.1 在网页中加入文本 4.1.1 插入文本,4.1.2,设置文本属性,文本的大部分格式设置都可以通过属性设置面板实现。,执行“窗口”,/“,属性”命令，即可打开属性设置面板，如图所示,。,单击属性面板左上角的,CSS,按钮，即可使用,CSS,规则格式化文本，如图所示。,注意： “字体”、“大小”、“文本颜色”、“粗体”、“斜体”和“对齐”属性始终显示应用于“文档”窗口中当前所选内容的规则的属性。在更改其中的任何属性时，将会影响目标规则。,4.1.2 设置文本属性 文本的大部分格式设置都可以通过,4.1.3,创建列表项,在编辑网页时，常常需要对同级或不同级的多个项目进行编号或排列，以显示多个项目间的层次关系，或使文本布局更有条理，这就需要用到列表。,在,Dreamweaver,中可以从已有的文本或者从文档窗口中的新文本创建项目列表和编号列表，列表还可以被嵌套。项目列表在各个项的前面没有数字，用不同的符号及缩进的多少来区分不同的层次；编号列表则需要通过数字及缩进来区分不同的层次。,此外，还可以将编号列表和项目列表混排。例如，在设置好编号列表后，如果选择列表的第二层，如“山中问答”、“军行”两项，单击属性设置面板中的项目编号按钮，则这两项左边的数字编号会变为项目编号，如图所示。,4.1.3 创建列表项 在编辑网页时，常常需要,4.1.4,插入日期,Dreamweaver CS6,为读者提供了插入日期的功能，使用它可以用任意格式在文档中插入当前时间，同时日期自动更新。,提示：“插入日期”对话框中显示的日期和时间不是当前日期，也不反映访问者在查看站点时所看到的日期,/,时间。它们只是说明此信息的显示方式的示例。,4.1.4 插入日期 Dreamweaver,4.1.5,插入特殊字符,在,HTML,中，一个特殊字符有两种表达方式，一种称作数字参考，另一种称作实体参考。,所谓数字参考，就是用数字来表示文档中的特殊字符，通常由前缀“,&#”,加上数值，再加上后缀“,;”,组成，其表达方式为：,，其中,D,是一个十进制数值。,所谓实体参考，实际上就是用有意义的名称来表示特殊字符，通常由前缀“,&”,加上字符对应的名称，再加上后缀“,;”,组成。其表达方式为：,&name,；，其中,name,是一个用于表示字符的名称，且区分大小写。,打开“插入”面板，切换到“文本”插入面板，然后单击“字符：其他字符”图标右下角的下拉箭头，就可以看到,Dreamweaver,自带的常用特殊字符，如图所示。,如果在下拉菜单中没有找到需要的特殊字符，则单击下拉菜单中的“其他字符”按钮，打开“插入其他字符”对话框，即可查看其他特殊字符。如图所示。,4.1.5 插入特殊字符 在HTML中，一个特殊字符有,4.2,在网页中应用图像,4.2.1,网页中可以使用的图像格式,图像文件有多种格式，但,Web,页面中通常使用的只有三种，即,GIF,、,JPEG,和,PNG,。各种图形文件格式介绍如下：,GIF,（图形交换格式）,文件最多使用,256,种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。,JPEG,（联合图像专家组标准）,该文件格式可以包含数百万种颜色，主要用于摄影或连续色调图像的高级格式。随着,JPEG,文件品质的提高，图片文件的大小和下载时间也会随之增加。通常可以通过压缩,JPEG,文件在图像品质和文件大小之间达到良好的平衡。,PNG,（可移植网络图形）,这种文件格式是一种替代,GIF,格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及,alpha,通道透明的支持。,4.2 在网页中应用图像4.2.1 网页中可以使用的图像,4.2.2,插入水平线,在对页面内容分栏时，常会使用水平线作为分界线，因此在本书，将水平线作为图像的一种进行介绍。在,Dreamweaver,中可以很便捷地插入水平线。,将插入点放在文档中需要水平线的位置。,单击“插入”,/“HTML”/“,水平线”菜单命令，即可在光标处插入一条水平线。,在属性面板中，设置水平线的宽度和高度。最终效果如图所示。,插入水平线前的效果,插入水平线后的效果,4.2.2 插入水平线 在对页面内容分栏时，常,4.2.3,插入图像,在网页中，图像通常用于添加图形界面（例如导航按钮）、具有视觉感染力的内容（例如照片）或交互式设计元素（例如鼠标经过图像或图像地图）。,在,Dreamweaver,文件中插入图片时，,Dreamweaver,会自动在网页的,HTML,源代码中 生成对该图像文件的引用。为了保证引用的正确性，该图片文件必须保存在当前站点目录中。如果所用的图片不在当前站点目录中，,Dreamweaver,将提示用户创建文档相对路径。,插入图像与文本的效果,4.2.3 插入图像 在网页中，图像通常用于添,4.2.4,插入图像占位符,像占位符是在将最终图形添加到,Web,页面之前使用的临时图形。图像占位符不在浏览器中显示，在对,Web,页面进行布局时很有用，可以帮助用户在真正创建图像之前确定图像在页面上的位置，在发布站点之前，用做好的图像文件替换所有的图像占位符。,插入图像占位符前的效果,“图像占位符”对话框,4.2.4 插入图像占位符 像占位符是在将最终,替换文本属于,HTML,代码，不会显示在页面上。对于大多数图像，提供替换文本是很重要的，使用屏幕阅读器或只显示文本的浏览器用户将鼠标移到图像占位符上，就可以访问这些图像提供的文本信息。,插入图像占位符的效果,创建图像的效果,注意：与在“设计”视图中看到的图像占位符不同，在浏览器中查看图像占位符时，不会显示占位符的名称和大小，而只显示占位符的替换文本。,替换文本属于 HTML 代码，不会显示在页面上,4.2.5,设置图像属性,将图像插入文档之后，,Dreamweaver,会自动按照图像的大小显示，但在实际设计中，往往需要对图像的一些属性进行调整，如大小、边框、位置、对齐等等。这些操作可以通过如图所示的图像属性控制面板得以实现。,图像的属性设置面板,注意：,Dreamweaver