全国ITAT赛前培训——网站设计.doc

第 一 章 从零起步本章首先将对一些与网络相关的概念做一些浅显的解释，使读者对Internet传递信息的基本原理有所了解，然后对HTML（超文本标签语言）的基本知识进行阐述，并对Dreamweaver的操作环境做一些介绍，最后对网页设计的页一些原则和方法作一个简单的概述，从而为后面的章节的学习打下基础。1.1网页制作基础知识1.1.1理解网页当运行打开浏览器程序以后，在地址栏中输入一个网站的地址，就会展示出相应的网页内容了。网页中可以包含很多种类型的内容作为网页的元素，最基本的是文字，此外还可以使用静态的图形以及动画，以及声音和视频等多媒体文件。网页的最终目的就给访问者深刻的印象，展示有价值的信息。1.1.2网页制作中的基本概念服务器与浏览器互联网就是全世界数百万台计算机互相连接而成的一个计算机网络。我们坐在家中查看各种网站上的内容，实际上就是从远程的计算机中读取了一些内容，然后在本地的计算机上显示出来的过程。因此，内容信息的提供者的计算机就称为“服务器”，用户使用“浏览器”程序，例如Internet Explorer，就可以通过网络取得上面的文件以及其他信息。服务器可以同时供许多不同的人（“浏览器”）访问。访问的具体的过程简单来说，就是当访问网页的人的计算机连入Internet后，通过浏览器发出访问某个站点的请求，然后这个站点的服务器就把信息传送到用户的浏览器上，即将文件下载到本地的计算机，浏览器再显示出文件内容，这样用户就可以坐在家中查询万里之外的信息了。超链接对超链接其实并不陌生，例如我们可能会经常访问新浪网去看新闻，在它的首页中有很多新闻的标题，当我们用鼠标点击一个新闻标题以后，就会显示出新闻的内容。这就是超链接的作用。超链接是一种可以指向其他文件的文字或图片，这种作用称为超链接。浏览器可以使用户利用超链接方便地取得超链接所指向的另一份文件。在超链接文件中，想要更多地了解关于该文件中所提到的一些主题的信息，可以通过对目标用“按下鼠标”的方式来取得更详细的资料。事实上该文件也可以被链接到其他不同作者所编写的文件上。在Internet上，一方面数千万台计算机相互连接，另一方面，世界范围的大量信息通过超本文的方式相互链接。URLURL我们也不陌生，每当我们要访问一个网站的时候，都要在浏览器的地址栏中输入网站的地址，它的学名就是URL。URL为“Uniform Resource Locator”的缩写，通常翻译为“统一资源定位器”，也就是人们通常说的“网址”。它是一个指定Internet上资源位置的标准，也就是人们常说的网址。URL常见的有以下几种形式：/index.htm HTML实际上，网页文件是用一种被称为 HTML（Hyper Text Markup Language）的标签语言书写的。有两种方式来产生HTML文件：一种是自己写HTML文件，事实上这并不非常困难，也不需要特别的技巧；另一种是使用HTML编辑器，它可以辅助使用者来做编写的工作。本书在后面着重讲述HTML。如果读者想先看一下HTML语言是什么样子，可以用浏览器打开任意一个网页，然后选择浏览器的菜单“查看/源文件”命令，这时会自动打开记事本程序，里面显示的就是这个网页的HTML源文件。也许会感觉非常复杂，实际上它并不难掌握，本书后面的任务就是交给读者如何编写HTML网页。上传与下载前面已经提到，为了让全世界的人都可以浏览我们制作的网页，就必须把网页放到服务器上，当然如果我们有条件也可以把自己的计算设置成服务器，日夜不停地运行并连接在互联网上。当时这样做很麻烦，因此大多数情况，我们回去花一点钱租用一个服务器，这样我们就必须把作好的网站传送到服务器上，这个过程就称为“上传”，而大家通过浏览器访问网页的时候，所经历的过程就是下载的过程，并网页下载到自己的计算机中，这样才能看到它。域名一个公司如果希望在网络上建立自己的主页，就必须取得一个域名，域名也是由若干部分组成，包括数字和字母。例如， 就是本书作者的域名，通过该地址，访问者可以找到我们出版过的图书的信息，还有讨论区可以讨论各种技术话题等等。域名是上网单位和个人在网络上的重要标识，起着识别作用，便于他人识别和检索某一企业、组织或个人的信息资源，从而更好地实现网络上的资源共享。除了识别功能外，在虚拟环境下，域名还可以起到引导、宣传、代表等作用。域名可分为不同级别，包括顶级域名、二级域名等。顶级域名又分为两类。一是国家顶级域名，目前200多个国家都按照ISO3166国家代码分配了顶级域名，例如中国是“cn”，美国是“us”，日本是“jp”等。二是国际顶级域名，例如表示工商企业的“.Com”，表示网络提供商的“.net”，表示非盈利组织的“.org”，表示教育机构的“.edu”等。二级域名是指顶级域名之下的域名，在国际顶级域名下，它是指域名注册人的网上名称，例如“ibm”，“yahoo”，“Microsoft”等；在国家顶级域名下，它是表示注册企业类别的符号，例如“com”，“edu”，“gov”，“net”等等。例如“”这个域名中，“cn”是顶级域名，“com”二级域名，“Artech”是三级域名。原来中国的域名管理机构（CNNIC）没有开放二级域名的注册，因此二级域名只有“com”，“edu”，“gov”，“net”等这几个。几年前，CNNIC开放了二级域名的注册，因此就可以注册“”这样的域名了。网站网站就是在互联网上一块固定的面向全世界发布消息的地方。它由域名（也就是网站地址）和网站空间构成。网站空间里面存放的就是各种网页。小的网站可能只包含一个网页，大的网站可能需要很多计算机来存储数据，例如著名的Google网站，就依靠数万台计算机来为全世界的网民提供服务。我们也可以把一个网站类比为一栋房屋，域名就是他的门牌，网页里面的所有网页构成了房屋里的内容。衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度、网站提供服务等几方面考虑。当一个的公司在互联网上建立一个网站，访问者可以进入他的网站查询相关的信息。有时候，网站也被称作站点。1.2HTML入门我们常常讲起网页，事实上每一个网页都是一个文件，这个文件里面包含了HTML指令，所以这些文件就被称为HTML文件。HTML语言不是一种编程语言，而是一种描述性的标签语言，这些标签符用来定义HTML文件中信息的格式和功能。当浏览器接收到HTML文件后，就解释HTML文件内的标签符，根据标签符去执行相应的显示功能或实现某些功能。注意这些标签符必须用小于号“”括起来。HTML标签符最基本的格式是：内容。标签符通常成对使用，前面的“”表示某种格式的开始，后面的“”表示这种格式的结束。例如，HTML文件中的标签符用来定义HTML文件中的文字为粗体字。就是说，在这一对标签中的内容都以粗体的格式在浏览器中显示。例如在文件中有“Hello，World ! ”，那么在浏览器中将显示出粗体字“Hello，World !”。HTML的概念很简单，就是写入什么样的标签符，浏览器就会相应执行该标签符所能实现的功能。不过有一点要注意，我们最常用的Netscape和Internet Explorer浏览器并不完全兼容，即有的标签只能被其中一种浏览器识别。就目前的情形来看，Internet Explorer已经取得了很大的优势，但在制作网页时最好还是二者兼顾。另外Dreamweaver已经充分考虑到了兼容性的问题，尽可能地使制作出的网页在两个浏览器上都能正确显示。此外HTML文件只是一个纯文本文件，可以用任何文本编辑器来编辑它，最简单就是用Windows系统里的“记事本”来建立或编辑。HTML文件的扩展名是.htm或.html。现在已经对HTML有了一些最基本、最简单的认识，那么就开始学习一些HTML的基本语句。完整的HTML规则完全可以写成一本几百页的书，在这里仅能讲述HTML中最重要的几个标签。下面是一个最简单的HTML文件。这是测试文件HTML 文件的内容就写在这里. .用任何文本编辑器都可以把上面这个文件输入并存成普通的文本文件，注意文件的扩展名必须是“.htm”或“.html”，例如“test.htm”，然后就可以用浏览器来浏览这个页面了。另外，HTML文件中的空格都是无效的，也就是说它最终的显示效果完全由标签来决定，因此在书写HTML文件时最好能使每对标签上下对齐，并缩进排版，这样很容易看出各标签是如何配对的。在Windows的“记事本”中输入这个源文件文档，并保存文件。注意，在保存这个文件的时候，要在把保存文件对话框中，将“保存类型”设置为“所有文件”，然后再文件名输入框中给文件名的后缀设置为“htm”，然后再按“保存”按钮。然后就可以用浏览器，例如最常用是Windows中的Internet Explorer来打开这个网页了，在Windows的“我的电脑”中，双击这个保存好的文件，就会打开浏览器的窗口。注意这个文件中有以下4对标签。HTML标签:标签放在HTML文件的开头，告诉浏览器，这个文件是HTML文件。而在文件的结尾，是结束标签。虽然这对标签可以省略不用，但希望读者能养成使用该标签的习惯。“文件头”标签:文件头标签是 和，一般放在标签的后面，用来标明文件的题目或定义部分。“文件标题”标签:标题标签为 和。这对标签用来设定文件的标题，注释这个文件的内容。浏览器通常都会将文件标题显示在浏览器窗口的左上角，所以这个标题就显得很有用。“文件体”标签:文件体标签为 和 。这对标签一般都被用来指明HTML文档的内容，例如文字、标题、段落和列表等，也可以用来定义主页背景颜色。下面再介绍几个标签，使这个网页更复杂一些。“标题”标签:标题标签的格式为 和（?代表从16的数字）。这个标签被用来设置标题字体的大小。HTML准许有至这6级标题，例如“这是H1标题字”，“这是H6标题字”。如果在上面最基本的HTML文件中增加如下面源文件所示的6行文字。这是测试文件HTML 文件的内容就写在这里. .这是H1标题字这是H2标题字这是H3标题字这是H4标题字这是H5标题字这是H6标题字对齐标签:平时人们用Word排版，可以将文字随意移动，而Word又可以自动调整字间距，以使段落左右对齐。在HTML中，没有字间距这个标签，不能像Word那样对文字进行随心所欲的编排，一个字符占一个字符空间，绝不能多出或减少。需要说明的是，HTML语言本身是不能调整字间距的，但是通过使用层叠样式表示可以的，这与层叠样式表的概念，在下一章中介绍。这里我们又要引入一个新的概念“属性”，HTML语言的标签还可以带有一些属性，例如前面介绍的H1到H6标签都有一个 “align”的属性，用来设置“对齐方式”。每个属性都可以设置一个“属性值”，例如align属性可以有三种属性值： left（左对齐）、Center（居中对齐）或者Right（右对齐）。现在把前面的源文件修改为下面的样子。这是测试文件HTML 文件的内容就写在这里. .文本左对齐文本居中对齐文本右对齐1.3Dreamweaver的操作环境Dreamweaver 8的用户界面非常友好，为设计是带来了很大的方便。下面就来把几个主要部分介绍一下。Dreamweaver 8的整体界面如图1.1所示。图1.1Dreamweaver 8 的操作界面文档窗口在界面的中部，是文档窗口，它是用来编排网页的区域，与在浏览器中的结果近似，但仍有一些差异。“插入”面板选择菜单“窗口插入”命令，可以打开或关闭“插入”面板，它位于界面的上侧。它的作用是在光标位置插入各种对象。单击面板左端的的卡片可切换不同页，每页中有不同类型的对象。使用“插入”菜单中的命令也可以实现插入各种对象的目的，与使用“插入”面板是一致的。使用菜单还是使用“插入”面板，可完全根据用户的习惯来决定。“插入”面板默认打开的是 “常用”页，它包括了最常用的一些对象，例如在文档中的光标位置插入一段超级链接文本、一个表格或者一个图像等等。其他7页并不像基本对象那样常用，因此这里仅进行简单介绍，后面还会详细介绍。“布局”页的作用是为了方便使用Dreamweaver的布局功能。“表单”页中的对象都用来制作表单，例如在文档中插入表单、文字输入框和按钮等。“文本”页可以方便用户在文档中插入一些已经设定好的带有HTML格式的文本。“HTML”页可以方便用户在文档中插入水平线、文件头、脚本编制、框架和脚本对象。“应用程序”页中可以方便用户插入服务器端的动态元素，本书不作介绍。“Flash 元素”页可以方便用户在文档中插入格式为.swf的Flash元素。“收藏夹”页可以方便用户在收藏夹中自定义常用的插入对象。“属性”面板依次选择菜单“窗口属性”，就可以打开或关闭“属性”面板。当鼠标选中一些文字或某个对象时，“属性”面板就会显示相关信息和参数，并可对其进行修改和设定。“属性”面板几乎是最常用的一个面板，因为无论要编辑哪个对象的属性，都要用到它，其内容也随着选择对象的不同而改变。其他面板和工具条除了上面介绍的两种面板之外，这里还有必要对一些重要的界面元素做简单介绍。在文档窗口的上方有文档和标准两个工具条。文档工具条的功能是对文档进行控制。最左面的3个按钮十分常用，它们可以切换文档窗口的显示方式。按下按钮，文档窗口中只显示HTML代码；按下按钮，文档窗口分为上下两个部分，上面显示HTML代码，下面显示页面效果；按下按钮，文档窗口中只显示页面效果。除此之外，针对不同的控制对象，还有其他若干面板，如“行为”面板、“框架”面板和“层”面板等，它们都针对不同的对象起作用。 我们在后面的章节中再进行介绍。在制作过程中，用户需要关闭或者打开这些面板和工具条时，具体的方法如下。选择菜单“查看工具栏文档”可以打开或者关闭文档工具条（当“文档”菜单项前面有一个对勾的时候，工具条被打开，反之则关闭）。按键盘的“F4”键可以隐藏所有面板，再按“F4”键又可以打开所有面板。如果要打开一个面板，可以在“窗口”菜单中找到相应的菜单项。比如选择菜单“窗口文件”就可以打开“文件”面板。随着Dreamweaver版本的不断升高，面板数量越来越多，因此在Dreamweaver 8中，出现了面板组的概念，也就是几个功能相关的面板放在一起，组成一组，成为一个面板组，比如选择菜单“窗口文件”打开“站点”面板的同时，在它的旁边也打开了“资源”和“代码片断”面板，二者共同组成了“文件”面板组。1.4网站开发的流程在本节中，将介绍一下网站设计和开发的整个工作流程。前面最开始的时候，曾经简单介绍过一下网站开发的基本流程。在本节将这个流程再细化一下，这样可以更深入地作讲解。经过近10年的发展，互联网已经深入到社会的各个领域，伴随着这个发展的过程，网站开发已经成为了一个拥有大量从业人员的行业，从而整个的工作流程也日趋成熟和完善。明确网站定位首先在做网站之前给要做的网站一个准确的定位，明确建站目地是什么。谁能决定网站的定位呢？如果网站是做给自己的，比如一个个人网站，那么自己说了算；而如果是为客户建立网站，那么一定要与客户的决策层人士共同讨论，要理解他们的想法，这是十分重要的。在理解了客户的想法后，就要站在客户的立场上，探讨网站的定位。根据经验，如果设计师能够从客户的立场出发，给客户提出一些中肯的建议，结合到策划中去，那么设计已经成功了一半，也可以大大避免在日后与客户的沟通中发生不愉快的可能性。收集信息和素材在明确建站目的和网站定位以后，开始收集相关的意见，结合公司其他部门的实际情况，这样可以发挥网站的最大作用。这一步是前期策划中最为关键的一步，因为做网站一定是为公司服务的，所以全面地收集相关的意见和想法是最为必要的。这一步需要整理成文档，可以让相关部门配合提交一份本部门需要在网上开辟的栏目计划书。这份计划书一定要考虑充分，因为如果要把网站作为一个正式的站点来运营的话，所做的每一项栏目的设置都应该是有规划的。如果考虑不充分，会导致以后突如其来的新加内容破坏网站的整体规划和风格。当然，这也并不意味着网站成形后是不许添加栏目的，只是在添加的过程中需要结合网站的具体情况，最好是当初策划时考虑全面！策划栏目内容收集完所有的相关信息以后，对其进行整理，整理以后找出重点，根据重点以及公司业务的侧重点，结合网站定位来确定网站的栏目需要有哪几项。可能开始时会因为栏目较多而难以确定最终需要哪几项，这又是一个讨论的过程，需要所有设计和开发人员在一起阐述自己的意见，一起反复比较，将定下来的内容进行归类，形成网站栏目的树状列表用以清晰表达站点结构。对于比较大的网站，可能还需要讨论和确定二级栏目以下的子栏目，对它进行归类，并逐一确定每个二级栏目的主页面需要放哪些具体的东西，二级栏目下面的每个小栏目需要放哪些内容，让栏目负责人能够很清楚地了解本栏目的每个细节和每个栏目，讨论完以后，就应由栏目负责人来按照讨论过的结果写栏目规划书。栏目规划书要求写得详细具体，并有统一的格式，以备网站留档。这次的策划书只是第一版本，以后在制作的过程当中如果出现问题应及时修改该策划书，并且也需要留档。设计页面方案再接下来，需要做的就是让美术设计师（也称为美工）根据每个栏目的策划书来设计页面。这里需要再次指出，在设计之前，应该让栏目负责人把需要特殊处理的地方跟设计人员讲明。在设计页面时实际是要根据策划书把每个栏目的具体位置和网站的整体风格确定下来。为了让网站有整体感，应该在网页中放置一些贯穿性的元素，最终要拿出至少3种不同风格的方案。每种方案应该考虑到公司的整体形象，与公司的精神相结合。设计方案拿出以后，经讨论后定稿。最后挑选出两种方法交给客户选择，由客户确定最终的方案。制作页面方案设计完成以后，下一步是实现静态页面，由制作人员负责根据设计师给出的设计方案，制作出网页，并制作成模版。在这个过程中需要十分注意网站的页面之间的逻辑，并区分静态页面和需要服务器端实现的动态页面。在这个过程实现的同时，栏目负责人应该开始收集每个栏目的具体内容并整理。模版制作完成后，由栏目负责人往每个栏目里面添加具体内容。对于静态页面，将内容添加到页面中即可，对于需要服务器端编程实现的页面交由编程人员继续完成。为了便于读者理解，在这里举一个例子，以区分动态和静态页面的含义。例如某个公司的网站，需要展示1000种商品，如果只用静态页面来制作，那么如果在一个页面中展示10个商品，则一共需要100个静态页面，而且日后如果需要修改某商品的信息，就需要重新制作相应的页面，这样工作量就会非常大。而如果借助于服务器端的程序，制作为动态页面，例如使用ASP技术，只需要制作一个页面，然后把1000种商品的信息存储在数据库中。页面根据浏览者的需求动态地显示这些商品，则只需要制作一个页面以及编制若干程序就可了，而且便于修改。这就是动态页面的作用。实现后台功能在前一步中，将动态页页面设计好后，只剩下程序部分需要完成了。在这一步中，由程序员来根据功能需求，编写程序，完成动态页面。需要说明的是，网站的建设过程中，“如何统筹”是一个比较重要的问题。在上面所讲述的过程进行的同时，网站的程序人员正处于开发程序的阶段，如果实现的过程中出现什么问题，编程人员应和制作人员及时沟通，以免程序开发完成后发现问题再进行大规模的返工。整合与测试网站接下来，当两边的工作都完成以后，就是整合。把程序和页面进行整合。整合完成以后，需要内部测试，测试完成，即可上传到服务器上，交由客户检验。通常客户会提出一些修改意见，这时根据客户要求完成修改即可。如果这时客户发现了一些问题，由于客户并不了解工作的原理，可能他们会觉得很容易修改，而实际上有可能是结构型的调整，工作量会很大，这时就很容易产生不愉快的情况。因此最好在开发的前期准备阶段就充分理解用户的想法和需求，同时对于一些可能发生的情况提前告诉客户，这样就容易与客户报纸愉快的合作关系。 1.5网页布局概述现在把焦点集中在页面方案的设计上。传统的媒体如报刊和杂志，只有文字和图片而没有声音；广播只有声音却没有文字和图像；电视是拥有声音、图像和文字的媒体，但观者只能被动地接受，而不能自由而有选择地观看，也不能进一步查看详细资料。只有网页可以做到两者兼容。观众的自由度像报纸一样，可自由选择喜爱的内容，同时又可以听和看更多的声音和视频信息，更全面了解事物。这种利用图像、音效和动画的版面构成形式，必将使媒体视觉传播策略更加深入。因此有必要根据网页的特点，来介绍一下页面设计中的一些基本知识。其中“网页布局”就是首要的一个方面。网页的布局千变万化，很难寻到几条固定的规则，这里只是就比较常见的几种类型作一说明，并举一些例子，使读者能有一个基本的认识。实际上各种类型之间并没有严格的界限。“厂”字型布局所谓“厂”型结构，就是指页面顶部为横条网站标识和广告条，下方左面（也可放在右边）为主菜单，右面显示内容的布局。菜单条与背景，整体效果类似“厂”字。这是目前最常见的一种网页布局方式。这种布局的优点是页面结构清晰，主次分明。缺点是由于被使用得过多，显得缺乏创意，略显呆板。“国”字型布局这种页面通常上下各有一个广告条或者其他栏目条，左面是主菜单，右面放友情连接或者其他栏目等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面显得比较拥挤和局促，不够灵活。“三”字型布局这种布局多用于国外站点，通常页面上方横向几条色块，将页面整体分割为若干部分，色块中大多放广告图片或者Flash动画。宣传单型布局这类页面布局就像一张宣传海报，以一张精美图片作为页面的设计中心，常用于个性类站点。优点是漂亮吸引人，缺点就是页面中大面积使用图片，导致浏览速度相对较慢。同时可以作为宣传单使用。门户型网页布局这类网页通常内容多，信息量大，通常没有明显的线条作为边界，图片用得也比较少，一般通过文字的排列产生视觉上的分区效果。区块型布局这类网页现在出现得越来越多，在网页上各个区域具有封闭的边界，经过合理放置显得清晰美观。缺点是由于版面固定，各区域很难根据其中内容的多少而调整大小，因此不适宜用于区域内容的长度经常变化的网页。 第 二 章 创建站点与文档由于网站是网页的集合，因此在制作网页之前，首先要在Dreamweaver中创建一个站点。本章重点是介绍如何创建站点，以及如何新建一个文档。2.1建立本地网站使用Dreamweaver的第一步就是在本地硬盘上建立一个网站，因此这里先介绍网站管理的基本知识。首先选择菜单“站点管理站点”命令，这时会出现网站管理对话框，单击“新建”按钮，然后选择“站点”，这时打开“站点”定义对话框，可以选择“基本”还是“高级”设置，在这里先选择“基本”设置，它采用向导式的设置方法。首先给网站起一个名字，在输入框中输入这个名字。然后单击“下一步”按钮，在出现的对话框中设定是否要使用服务器端的技术，例如ColdFusion或者ASP.NET。这里选择不使用。接着再单击“下一步”按钮，在出现的对话框中设定在开发期间如何操作文件。这里选择第1个选项，即在本地计算机上编辑网站的副本，等将来准备好的时候再上传到服务器上。然后单击“下一步”按钮，在出现的对话框中设定计算机与服务器的连接方式。这里在下拉框中选择“无”。最后，再单击“下一步”按钮，检查各项设置是否正确，如果有错误，可以单击“上一步”按钮返回前面的步骤修改设置，如果没有错误则单击“完成”按钮。这样最初的网站就设置完成了。上面使用的是向导式的“基本”设置过程，如果已经熟悉了创建站点的方法，也可以使用“高级”设置过程。方法是在对话框的左上角，选择“高级”选项卡。它采用的不是向导式的设置方法，而是目录式的设置方法。这两种方法选择一种就可以了。在“高级”设置对话框的左侧是需要设置的各种参数的目类，这里只需要设置第一行即“本地信息”就可以了。在这个目类中，需要设置以下参数。站点名称：即网站名称，这项是必须填的。本地根文件夹：即存放本地文件的文件夹，这项是必须填的。自动刷新本地文件列表：设定是否自动刷新本地文件列表。这个选项的含义就是当用户向本地网站的文件夹中复制文件之后，立即自动刷新文件列表。通常勾选这个选项，使用户可以看到当时的网站文件结构。链接相对于：设定文件的链接方式。文档相对路径适用于大多数Web站点的本地链接。在当前文档与所链接的文档处于同一文件夹内且可能保持这种状态的情况下，文档相对路径特别有用。在处理使用多个服务器的大型Web站点或者使用承载有多个不同站点的服务器时，则可能需要使用站点根目录相对路径。默认图像文件夹：如果准备把所有文件或者大部分文件都放在一个文件夹中，就可以在这里输入这个文件夹的路径，否则这个选项可以空着。HTTP 地址：HTTP地址的作用是使Dreamweaver的链接检查器可以正确地检查HTML代码中的绝对地址，例如HTTP地址设为。这样如果在HTML代码中使用了相应的绝对地址（如/page01.htm），链接检查器就可以正确识别。这项可根据用户的需要来决定是否填写。缓存：缓存的作用是加速链接更新时的速度。这项可根据用户的需要来决定是否填写。如果硬盘有足够空间，建议勾选此项。输入本地文件夹时可以用鼠标单击输入框右边的文件夹图标，在出现的对话框中选择已经存在的文件夹，或者把鼠标移到文件选择框中，单击鼠标右键，然后在出现的菜单中选择“新建文件夹”命令。这时会创建一个新文件夹，打开这个新建的文件夹。单击网站定义对话框的“确定”按钮，这时最初设置就完成了。效果与刚才用“基本”设置的方式设置的相同。这时展开右侧的“文件”面板组，并选择“文件”面板，如图2.7所示。在窗口上面有菜单和快捷按钮。它们的下面可以看到两个下拉框，左面显示的是刚才设置好的网站名称，如果设置了多个网站，就可以通过这个下拉框在不同的网站之间切换，右侧的下拉框显示的是“本地视图”，表示当前显示的文件结构是本地的网站结构，此外还可以选择“远程视图”等方式，表示可以显示服务器上的目录结构等，目前我们暂时还使用不到。显然，最初的本地网站已经建好了，但它还是空的。用鼠标选取文件夹所在的这一行，使它高亮显示，然后单击鼠标右键，在出现的菜单中选择“新建文件”命令，这时会新增加一行，立即将它的名字改为“index.htm”，或者任意其他喜欢的名字都可以。然后在“文件”面板的“站点”菜单中选择“编辑站点”命令，在出现的对话框中选择刚才建立的网站，然后单击“编辑”按钮，这时会发现，这个对话框就是最初用“高级”方式创建这个网站时看到的对话框。在对话框左侧的目录中选择“站点地图布局”项，Dreamweaver 8会自动选择刚才建立的index.htm文件，其他选项保持默认值，然后单击“确定”按钮完成网站的设置。这样就表明了，这个网站的“主页”是这个index.htm文件。严格来说，网页（Web Page）和主页（Home Page）是两个不同的概念。每一个HTML文件都是一个网页，而主页指的是一个网站所有网页中的首页，不过一般没有必要严格区分它们，但这里要指定的Home Page就是整个网站的首页。通常将首页命名为index.htm、index.html、default.htm或default.html，并且这个名字不能随便起，必须根据远程服务器的要求来定。当用户使用浏览器访问一个Internet网站时，必须输入该网站的URL（统一定位资源，即通常所说的网址），例如。这里仅指明了主机的地址，并没有具体说明要访问主机上的哪个文件，这是因为如果主机在解释地址时发现地址没有指明具体文件，则认为是要访问默认的首页，因此在主机上默认的首页名称是固定的。例如， 是主机地址，它的默认首页名称为index.htm，那么在浏览器中输入实际上等于输入了/index.htm。到这里，网站定义工作就完成了，下面就可以开始制作网页了。2.2创建文档在Dreamweaver中可以通过3种方式创建文档：创建新的空白文档、创建以模板为基础的文档和打开并编辑已经存在的文档。2.2.1创建新的空白文档刚才我们已经为网站加入了一个HTML文件，并命名为index.htm，实际上这就已经创建了一个新的空白文档。如果还希望增加HTML文档，可以选择文档窗口“文件”菜单的“新建”命令，这时会出现一个“新建文档”对话框。它提供了一些可供使用的模板，这里我们使用最基本的一种，也是自动默认的一种，就是在“基本页”目类中的HTML。由于是默认的类型，可以直接单击“创建”按钮。这样，就会打开一个新的文档窗口。通过这种方式打开的文档还没有名字，在编辑完成后要把它保存到本地网站文件夹中。在Dreamweaver中可以同时编辑若干文档，例如，增加一个新文档窗口后，用鼠标双击网站管理窗口中的index.htm文件，就会再打开一个文档窗口。如果把这两个窗口中的任意一个最大化，可以通过文档上侧的选择卡来切换当前编辑的文档。创建的新文档都是空白的。“空白”指的是文档窗口里没有内容，如图片和文本等。与之相对应的HTML文件并不是空白的，单击文档工具条中的按钮，将同时显示HTML代码，可以看到，最基本的HTML文件的框架已经存在了。2.2.2在已有文件的基础上创建文档除了创建空白的文档窗口之外，在Dreamweaver中还可以直接打开已经存在的HTML文件（无论它是用什么工具建立的），这样就可以在现有文档的基础上编辑它。打开现有的文件的方法是选择“文件”菜单的“打开”命令，然后在“打开”对话框中选择要打开的文件。除此之外，Dreamweaver还使用模板机制。这种模板机制在技术上是很有特色的，在Dreamweaver中可以把制作好的一个页面另存为模板，然后可以使用这个模板来生成新的文档，并且可以设定模板中的一部分为可编辑区域，另外的部分是不可编辑区域，从而实现了将内容从设计方案中分离出来。同时，如果修改了模板，Dreamweaver可以自动把所有使用该模板创建的文档进行相应的修改，这对于网页设计师来说真是梦寐以求的功能。2.2.3设置页面属性创建文档后还需要对它进行设置，设定一些影响整个网页的参数。选择“修改”菜单中的“页面属性”命令，会出现“页面设置”对话框。“外观”：设定页面的字体、背景等外观属性。“链接”：设定链接文字字体、大小、色彩等样式属性。“标题”：设定标题1标题6的样式属性。“标题/编码”：设定文档的标题和编码，编码通常使用简体中文，即GB2312编码。“跟踪图像”：设定跟踪图像，跟踪图像将在文档处于编辑状态时显示。注意：以上参数的设置会影响整个页面。2.2.4实践与练习：创建新文档这个练习的内容是创建一个新的页面文档，并在里面插入一些基本的元素，这些元素的详细操作方法，在后面的章节中还会深入介绍，这里作一个预习。本例最终效果如图2.1所示。图2.1预览效果练习步骤如下：（1）要进行网页制作，首先要创建一个新文档。要创建新文档先要运行程序Dreamweaver 8，程序打开后，会出现一个首界面。（2）在Dreamweaver 8程序的首界面中，有三列菜单，其中最左侧的列表为最近打开过的网页文件名；最右侧则是一些已经规范好的网页格式，可以直接进行套用；最中间的列表则是需要创建的文档的类型列表。（3）这里单击“创建新项目”列表中的“HTML”菜单项，即可创建一个新的HTML格式的网页文档。（4）新文档创建好之后，在默认情况下文档显示为“设计”视图，即“设计”视图按钮为按下状态。（5）在文档编辑区内可以发现文本光标在文档编辑区的左上角处闪烁。这表明现在可以直接在文档区域内输入相关的文字信息。（6）输入好文字之后，接下来在文档窗口内插入一张图片。在插入图片之前，先确定好文本光标的位置。因为文本光标所在的位置即是将要插入图片的位置。（7）要插入图片，首先要打开“插入”栏内的“图像”下拉列表，从中选择“图像”命令。（8）选择了“图像”命令之后会弹出“选择图像源文件”对话框，选择素材文件夹：CD-RomCH022.2.4imagescalendar.gif。再单击“确定”按钮，准备在文档窗口中插入一张图片。（9）完成第8步中的操作之后，还会弹出一个“图像标签辅助功能属性”对话框，这里暂时不需要此项辅助功能，因此单击“取消”即可。（10）此时再来观察文档窗口，一张图片被插入到了文档中。这样一个简单的网页就被制作出来。（11）完成上述操作之后，可以为该文档重新命名标题名称。当然这里也可以保持默认状态。（12）最后选择菜单栏“文件保存”命令，在弹出的“另存为”对话框中，将文件保存到指定站点目录下，完成该文档的制作。注意在保存文档时，应该避免使用中文名称。（13）保存好新文档之后，打开文件所在的站点文件夹，双击新生成的HTML新文件，预览网页效果。2.3打开并编辑现有文档在 Dreamweaver 中可打开现有Web页或基于文本的文档。无论它们不是用Dreamweaver创建的，都可以在Deawmeaver中打开它。除了HTML网页文档，在Dreamweaver中也可以打开非 HTML 文本文件，如 JavaScript 文件、XML 文件、CSS 样式表或用字处理程序或文本编辑器保存的文本文件。打开现有的文件需要执行以下操作：首先选择菜单“文件/打开”命令，然后在“打开”对话框中定位并选择要打开的文件，然后单击“打开”按钮，这样文档就会在文档窗口中打开。然后，用户就可以对打开的文档进行编辑，并保存它。而非HTML文档，例如JavaScript、文本和 CSS 样式表将会在“代码”视图中打开。可以在 Dreamweaver 中工作时更新文档，然后保存文件中的更改。 第 三 章 在网页中使用文字网页中最基本也最常用的是文字。因在这一章，就开始讲解如何在网页中使用文字，以及设置文字的格式。3.1理解与文字相关的HTML标签本书对于很多内容的介绍都遵循先讲解HTML标签，再讲解如何在Dreamweaver使用它的顺序来进行讲解。例如这一节中，先脱离Dreameaver环境，就用手工编写一些非常简单的网页HTML，目的是使读者理解HTML语言的原理。然后再介绍如何使用Dreamweaver来实现，以提供制作网页的工作效率。3.1.1文字排版的简单操作读者可以在在Windows的“记事本”中输入这个源文件文档，并保存为后缀为“htm”文件。源代码如下：文字的空格、回车等使用  登鹳雀楼白日依山