网站开发具体流程以及注意事项.doc

网站开发公司制作流程
为了加快网站建设的速度和减少失误，应该采用一定的制作流程来策划、设计、制作和发布网站。通过使用制作流程确定制作步骤，以确保每一步顺利完成。好的制作流程能帮助设计者解决策划网站的繁琐性，减小项目失败的风险。制作流程的第一阶段是规划项目和采集信息，接着是网站规划和设计网页，最后是上传和维护网站阶段。每个阶段都有独特的步骤，但相连的各阶段之间的边界并不明显。每一阶段并不总是有一个固定的目标，有时候，某一阶段可能会因为项目中未曾预料的改变而更改。步骤的实际数目和名称因人而异，但是总体制作流程如图1-1所示。

图1-1 网站制作流程图
1.1.1 目标需求分析
提出目标是非常简单的事情，更重要的是如何使目标陈述得简明并可以实现。在很多Web网站项目中，有包容一切的倾向。实际上一个网站不可能满足所有人的需求，对设计者来说，网站一定要有特定的用户和特定的任务。为了确定目标，开发小组必须要集体讨论，讨论的目的是让每一个成员都尽可能提出对网站的想法和建议。通常，集体讨论可以集中大家一致感兴趣的问题，通过讨论可以确定网站的设计方案。应该让参与讨论者意识到其最终目标是网站不能太慢或难以使用。
在对某个网站进行升级或全面重新设计时，一定要注意不要召开集体会议来讨论已有网站中出现的问题，防止项目偏离的方法是让网站原来的设计者谈自己的设计思想和对问题的考虑点。在集体会议中，要点是挖掘各种各样的被称为“期望清单”的想法。“期望清单”就是描述各种不考虑价格、可行性、可应用性的有关网站的想法。例如，讨论某个公司网站的建设方案时，会包括产品信息、投资者信息、公司新闻、人才引进、员工招聘以及技术支持等部分。每一个负责相关部分的设计者都会认为他们的那部分是最重要的，每个人都希望把他们那部分的链接放在主页上。
通过集体讨论的设计方案，能够兼顾到各方的实际需求和设计开发的技术问题，能够为成功开发Web网站打下良好的基础。
1.1.2 网页制作
网页制作包括网站的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等。
1．网站定位
在网页设计前，首先要给网站一个准确的定位，是属于宣传自己产品的一个窗口，还是用来提供商务服务或者提供资讯服务性质的网站，从而确定主题与设计风格，名称要切题，题材要专而精，并且要兼顾商家和客户的利益。在主页中标题起着很重要的作用，它在很大程度上决定了整个网站的定位。一个好的标题必须有概括性、简短、有特色且容易记，还要符合自己主页的主题和风格。
2．网站规划
在设计之前，需先画出网站结构图，其中包括网站栏目、结构层次、连接内容。首页中的各功能按钮、内容要点、友情连接等都要体现出来，一定要切题，并突出重点，同时在首页上应把大段的文字换成标题性的、吸引人的文字，将单项内容交给分支页面去表达，这样才显得页面精炼。也就是说，首先要让访问者一眼就能了解这个网站都能提供什么信息，使访问者有一个基本的认识，并且有继续看下去的兴趣。并且要细心周全，不要遗漏内容，还要为扩容留出空间。分支页面内容要相对独立，切忌重复，导航功能要好。网页文件命名开头不能使用运算符、中文字等，分支页面的文件存放于自己单独的文件夹中，图形文件存放于单独的图形文件夹中，汉语拼音、英文缩写、英文原义均可用来命名网页文件。在使用英文字母时，同时要区分文件的大小写，建议在构建的站点中，全部使用小写的文件名称。
3．内容的采集
采集内容必须与标题相符，在采集内容的过程中，应注重特色。主页中的特色应该突出自己的个性，并把内容按类别进行分类，设置栏目，让人一目了然，栏目不要设置太多，最好不要超过10个，层次上最好少于5层，而重点栏目最好能直接从首页到达，保证用各种浏览器都能看到主页最好的效果。
4．主页设计
主页设计包括创意设计-结构设计-色彩调配和布局设计。创意设计来自设计者的灵感和平时经验的积累。结构设计源自网站结构图。在主页设计时应考虑到：“标题”要有概括性和特色，符合自己设计时的主题和风格；“文字”的组织应有自己的特色，努力把自己的思想体现出来；“图片”适当地插入网页中可以起到画龙点睛的作用；“文字”与“背景”的合理搭配，可以使文字更加醒目和突出，使浏览者更加乐于阅读和浏览，而不适当的搭配，会使文字淹没于背景之中，使网页显得单调，给人乏味的感觉。整个页面的色彩在选择上一定要统一，特别是在背景色调的搭配上一定不能有强烈的对比，背景的作用主要在于统一整个页面的风格，对视觉的主体起一定的衬托和协调作用。
5．图片
主页不能只用文字，必须在主页上适当地添加一些图片，增加可看性，当然处理得不好的以及无关紧要的图片最好不要放上去，否则让人觉得是累赘，同时也影响网页的传输速度。图片不仅要好看，还要在保证图片质量的情况下尽量缩小图片的大小（即字节数），在目前网络传输速度不是很快的情况下，图片的大小在很大程度上影响了网页的传输速度。小图片（100´40）一般可以控制在6KB以内，动画控制在15KB以内，较大的图片可以“分割”成小图片。一般来说，图片颜色较少、色调平板均匀以及颜色在256色以内的最好把它处理成gif图像格式，如果是一些色彩比较丰富的图片，如扫描的照片，最好把它处理成jpg图像格式，因为gif和jpg图像格式各有各的压缩优势，应根据具体的图片来选择压缩比。另外，网页中最好对图片添加注解，当图片的下载速度较慢，在没有显示出来时注解有助于让浏览者知道这是关于什么的图片，是否需要等待，是否可以单击，特别考虑到纯文本浏览者浏览的方便，很有必要为图片添加一个注解。这是一个小地方，却能体现一个网页的制作水准。
6．网页排版
要灵活运用表格、层、帧、CSS样式表来设置网页的版面。网页页面整体的排版设计是不可忽略的，它很重要的一个原则是合理地运用空间，让自己的网页疏密有致，井井有条，留下必要的空白，让人觉得很轻松。不要把整个网页都填得密密实实，没有一点空隙，这样会给人一种压抑感。为保持网站的整体风格，开始制作时千万不要许多页面一起制作。许多新手会及不可待地将收集到的各种资料填入各个页面。转眼间首页制作完成，可等想要修改一些页面元素时，却发现一页一页改得好辛苦。建议先制作有代表性的一页，将页面的结构、图片的位置、链接的方式统统设计周全，例如：返回首页的链接、E-mail地址、版权信息等，然后复制出许多相同的页面，再将相应的内容进行填写。这样制作的主页，不但速度快，而且整体性强。
7．背景
网页的背景并不一定要用白色，选用的背景应该和整套页面的色调相协调。合理地应用色彩是非常关键的，根据心理学家的研究，色彩最能引起人们奇特的想象，最能拨动感情的琴弦。比如说做的主页是属于感情类的，那最好选用一些玫瑰色、紫色之类的比较淡雅的色彩，而不要用黑色、深蓝色这类比较灰暗的色彩。黑色是所有色彩的集合体，黑色比较深沉，它能压抑其他色彩，在图案设计中黑色经常用来勾边或点缀最深沉的部位，黑色在运用时必须小心，否则会使图案因“黑色太重”而显得沉闷阴暗。
8．其他
如果想让网页更有特色，可适当地运用一些网页制作的技巧，诸如声音、动态网页、Java、Applet等，当然这些小技巧最好不要运用太多，它会影响网页的下载速度。另外可考虑主页站点的速度和稳定性，不妨考虑建立一两个镜像站点，这样不仅能照顾到不同地区网友对速度的要求，还能作好备份，以防万一。等主页做得差不多了，可在上面添加一个留言板、一个计数器。前者能让你及时获得浏览者的意见和建议，及时得到网友反馈的信息，最好能做到有问必答，用行动去赢得更多的浏览者；后者能让你知道主页浏览者的统计数据，你可以及时调整你的设计，适应不同的浏览器和浏览者的要求。
1.1.3 上传发布
当完成了网站的设计、调试、测试和网页制作等工作后，需要把设计好的站点上传到服务器来完成整个网站的发布。Dreamweaver内置了强大的FTP功能，可以帮助用户实现对站点文档的上传和下载。
（1）在【文件】控制面板中单击【管理站点】，打开【管理站点】对话框。在【管理站点】 对话框中单击【新建】按钮，在弹出的菜单中选择【FTP与RDS选项服务器】选项，如图1-2 所示。
（2）在打开的【配置服务器】对话框中，将“FTP主机”、“登录”、“密码”这3个项目按图1-3所示进行设置。

图1-2 准备链接站点 图1-3 配置服务器信息
（3）在下拉菜单中选择本地网站所在的目录，将整个网站所有的文件选中并将其复制，如图1-4所示。
（4）最后链接服务器，按Ctrl+V键将本地网站的所有文件粘贴到服务器上，此时会弹出【状态】对话框来显示上传信息，如图1-5所示。

图1-4 复制本地网站文件 图1-5 完成网站的发布
1.1.4 宣传推广
网站开通后，就像注册了公司一样，必须进行宣传推广，才能变得知名，并带来经济效益。网站的宣传有多种方式。
1．注册到搜索引擎
注册到搜索引擎是极为方便的一种宣传网站的方法。目前比较有名的搜索引擎主要有搜狐（）、新浪网（）、雅虎（）、网易（）、百度（）等。注册时尽量详尽地填写网站中的一些主要信息，特别是一些关键词，尽量写得普遍化、大众化一些。注册分类的时候尽量分得细一些。
2．交换广告条
广告条交换是宣传网站的一种较为有效的方法。登录到广告交换网，填写一些主要的信息，比如广告图片、网站网址等。然后它会要求你将一段HTML代码加入到网站中。这样，你的广告条就可以在其他网站上出现。当然，你的网站上也会出现别的网站的广告条，双方得益。我国的广告交换网主要有：太极链（）、火炬广告交换网（）、网盟广告交换网（）。另外也可以跟一些兄弟网站或者朋友的网站交换友情链接，当然网站最好是点击率比较高的。友情链接包括文字链接和图片链接。文字链接一般就是网站的名字。图片链接包括Logo的链接和Banner的链接。标题广告的大小通常为468 ´ 60像素或120 ´ 60像素的动（静）态gif图片或Flash动画。当访问者被广告标题所吸引并点击时，即被链接到广告发布者的网站上，达到网站推广的目的。
3．Meta标签的使用
使用Meta标签是简单而且有效地宣传网站的一种方法。不需要去搜索引擎注册就可以让客户搜索到你的网站。将下面这段代码加入到网页标签中。

<meta name="keyworks" content="网站名称, 产品名称……">

在content里边填写关键词。关键词最好要大众化，跟企业文化、公司产品等紧密相关，并且尽量多写一些，可以将一些相关关键的词重复，这样可以提高网站的排行。
4．直接跟客户宣传
一个稍具规模的公司一般都有业务部、市场部或者客户服务部。可以在跟客户打交道的时候直接将公司网站的网址告诉给客户，或者直接给客户发E-mail等，宣传途径很多，可以根据自身的特点选择一些较为便捷有效的方法。
5．网下推广
（1）传统媒体硬广告
众所周知，通过传统媒体硬广告的宣传曝光，是目前最为行之有效且最有影响力的推广方式，但是价格一般较高。
（2）传统媒体软广告
只要设计巧妙，软广告的价值有时比硬广告要来得更好，更深入人心。媒体可以通过你的要求和想法，设计出各种你希望的软广告方式。
（3）网下活动推广
网上和网下结合的重要性毋庸置疑。通过网下的离线活动可以带动网站的宣传，达到最大程 度的推广。在做网下活动推广时，应注意精心策划并与网站紧密结合。如果不了解业内行情，不 熟悉活动流程，不具备组织能力，则会导致策划出来的活动，无论在吸引力还是在实用方面均大打折扣。
1.2 网页组成元素
设计网页时要组织好页面的基本元素，同时再配合一些特效，构成一个绚丽多彩的网页。网页的组成对象包括文本、图像和超级链接。内容是网站的灵魂，而文本则是构成网站灵魂的物质基础。文本与图像在网站上的运用是最广泛的，一个内容充实的网站必然会用大量的文本与图像，然后把超级链接应用到文本和图像上，才能使这些文本和图像“活”起来。
1.2.1 网页组成元素概述
平常看到的报纸、杂志和漫画书的版面都是由两种对象构成的，即文字和图像。这两种简单的对象再用一些线条进行修饰，经过排版设计后所产生的风格却千变万化。每本杂志都因为不同的版面编排而拥有自己的特色。许多门户网站的网页，在编辑时也是基于同样的版面设计原理，所以性质和书报杂志差不多。大部分用户一定觉得网页设计比平面设计复杂得多，那是因为通过浏览器展现出来的网页，除了文字和图像，还有声音和动画等多媒体对象，或者是Java、ActiveX控件等特殊效果及交互功能。要把这些内容添加到网页，就必须考虑更多的因素。然而考虑更多的则是用什么样的文字充实网页内容，用什么样的图像来点缀网页，最后就是怎样把这些文字和图像穿插起来。图1-6所示就是一个包含各种网页对象的页面。

图1-6 包含各种网页对象的页面
1.2.2 文本元素
文字是网页的主体。虽然利用Flash、图形文字也可以达到同样的效果，甚至超出纯文本效果，但是网页文字的优势还是无法被取代的。因为纯文本所占用的存储空间非常小。
然而在页面上用同样的字体显示，会使页面过于呆板。在页面中适当调整文字的大小、颜色等，也可以改善页面效果。
1．标题
在一个网站的网页或一篇独立的文章中，通常都会有一个醒目的标题。告诉浏览者这个网站 的名字或该文章的主题，如图1-7所示。而现在很多网页设计者用图像或者Flash动画来代替文字 标题。
2．文字大小
适当地调整文字大小，可以使文字编排得更生动活泼，达到更好的效果，如图1-8所示。

图1-7 文字标题 图1-8 调整文字大小
3．段落
文章段落分明，有层次感，才能让浏览者更好的阅读，也使得页面看起来整洁、美观大方，如图1-9所示。
4．样式
粗体、斜体和下划线是最基本的文字样式，然而在网页中不可过多地应用下划线，那样会使浏览者误以为是超级链接。在页面的适当位置添加一些字体样式，会使页面更具有观赏性，如图1-10所示。

图1-9 段落层次 图1-10 字体样式

应用字体样式在一般的刊物上很常见，但是应用到网页中却有些问题，例如在网页中应用了华文彩云字体，可是在浏览者的计算机上并不一定也安装了这种字体，如果未安装，那么在浏览者的计算机上所看到的字体就会是系统默认的字体，这时就不能显示出网页的效果。

5．字体颜色
也可以为页面上的字体添加颜色，以强调页面中的重点，使页面也变得绚丽起来。但是一定要注意颜色的搭配，如图1-11所示。在页面上也不能过多地应用颜色，太过华丽反而会引起浏览者的反感。

图1-11 与背景颜色相统一的文本颜色

1.2.3 图像元素
图像给人的视觉效果要比文字强烈得多。灵活应用图像，在网页中可以起到点缀的效果。但是运用不当，会使网页变得凌乱不堪。Web页上的图像文件大部分都是使用JPG和GIF格式。因为它们除了具有压缩比例高外，还具有跨平台特性。无论浏览者使用什么样的操作系统，都能够显示这两种图片。图像在网页中的应用主要有以下几种形式。
1．图像标题
一般在网页中都要有标题，用以提示浏览者这个网站是做什么的，起到了导航的作用，应用图像标题可以使网页更加美观，如图1-12所示。
2．背景
图像的另一个重要应用是作为网页的背景。网页背景千变万化，特别是一些个人网站，应用图片背景比较多，如图1-13所示。

图1-12 图像标题 图1-13 网页背景
3．网页主图
网页上除了用小图像美化网页外，通常还会在网页上用一些较大的图片来突出网页主题，占满网页的整个空间。特别是主页中用主图的比较多，或者直接用图片取代文字作为超级链接按钮，可以使网页更加美观，如图1-14所示。

图1-14 网页主图

1.2.4 超级链接
超级链接是Internet中最为有趣的网页对象，在网页中单击链接对象，即可实现在不同页面之间的跳转，或者连接到其他网站上，还可以下载文件和发送E-mail。而网页是否能够实现如此多的功能，取决于超级链接的规划。无论是文字还是图像都可以加上超级链接标记。在一个完整的网站中，至少要包括站内链接和站外链接。
1．站内链接
如果网站规划了多个主题版块，则必须在网站的首页加入超级链接，让浏览者可以快速地转到感兴趣的页面，而各个子页面也要有超级链接，还要有能够回到主页的链接。超级链接除了起到导航的作用外，使页面效果也有了一致性。通过超级链接，浏览者可以迅速找到自己需要的信息，如图1-15所示。
2．站外链接
Internet是遍布世界任何角落的无形的网络。如果制作了一个封闭的网站，没有对外链接，浏览者进得来出不去，下次浏览者就不会再度光临你的网站。在网站上放置一些与网站主题有关的对外链接，如果网站没有特殊主题，可以把好的网站介绍给浏览者。如果对外链接信息很多，可以进行分类，就像搜索站点一样，如图1-16所示。

图1-15 站内链接 图1-16 站外链接
1.3 网页的类型
静态网页和动态网页是网页的两种类型。静态网页就是设计者做什么样，在客户端浏览时就是什么样。而动态网站可以根据不同的用户显示不同的页面。
1.3.1 静态页面
“静态”就是指网站的网页内容“固定不变”，当用户浏览器通过互联网的HTTP（Hypertext Transport Protocol）协议向Web服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态HTML文档传送给用户浏览器。其页面的内容使用的仅仅是标准的HTML代码，最多再加上流行的GIF格式的动态图片或Flash动画等，比如几只蝴蝶飞来飞去的动画效果。
“静态”网站的致命弱点就是不易维护，若网站维护者要更新网页的内容，就要通过FTP软件把文件下载下来，必须手动来更新其所有的HTML文档。为了不断更新网页内容，设计者必须不断重复地制作HTML文档，随着网站内容和信息量的日益扩增，设计者就会感到工作量大得出乎想象。
但是静态页面的优点是下载速度快，因为它不须要程序运算和数据库连接。静态页面文件的后缀一般都是html或htm，如图1-17所示。但现在网站技术也提升了，即使是动态页面也可以在发布时生成后缀为htm的文件，可以让访问者都看不出来这个网站是用什么语言开发的。

图1-17 静态页面
1.3.2 动态页面
动态页面是最常用的网站建设的一种表达形式。它的优点在于可以根据先前所制定好的程序页面，根据用户的不同请求从而返回其相应的数据，可以说是一对多的关系，从而达到资源的最大利用和节省服务器上的物理资源。如果今后需要改变站点的风格，只需要重新制作前台所访问的页面即可。只要数据库结构不变，可以很快地进行改版工作。
动态页面的优点是效率高、更新快、移植性强，从而快速地达到即见即所得的目的。但是它的优点同样也是它的缺点。因为它的效率是要通过频繁地和数据库进行通信才能实现的，频繁地读取数据库会导致服务器要花大量的时间来计算，当访问量达到一定的数量后，会导致效率成倍或几倍地下降。如果有人恶意地对程序进行攻击，激发了隐藏BUG，将会造成一定的安全隐患，从而导致整个网站的瘫痪。
动态页面文件的后缀一般都是asp、aspx、php和jsp等，如图1-18所示。动态页面是需要语言环境支持的，这就大大地影响了网站的跨平台性。比如Microsoft的ASP或.net虽然说可以跨平台，但目前还不能在所有平台上运行，Sun的语言在Microsoft的平台上配置相对来说也比较麻烦。

图1-18 动态页面
1.4 Dreamweaver 8工作环境
初步了解了网站的制作流程以及网站中所包含的元素后，就可以使用网页制作软件来创建网站中的网页了。Dreamweaver是一种可视化的网页设计和网站管理工具，它支持静态与动态技术，并且支持可视化操作。下面以最新版本的Dreamweaver 8来介绍其工作环境。

图1-19 【工作区设置】对话框

1.4.1 工作区布局
首次启用Dreamweaver时，会弹出图1-19所示的【工作区设置】对话框。在该对话框中提供了两种布局风格：一种是“设计器”布局，该布局是一个使用MDI（多文档界面）的集成工作区，其中全部“文档”窗口和面板被集成在一个更大的应用程序窗口中，面板组停靠在右侧，建议初学者使用此布局；另外一种是“编码器”布局，该布局也是一个集成工作区，但是面板组停靠在左侧，布局类似于HomeSite所用的布局，而且“文档”窗口在默认情况下显示“代码”视图，建议HomeSite用户以及手工编码人员使用这种布局。

如果要切换为其他布局，可以通过执行【窗口】|【工作区布局】|【编码器】（【设计器】）命令重新选择布局即可。

1.4.2 文档窗口
在【工作区设置】对话框启用“设计器”工作模式，单击【确定】按钮，即可打开Dreamweaver，在打开的文档窗口中，其中最醒目的是一个居于窗口中央的【起始页】对话框，如图1-20所示。

图1-20 【起始页】对话框
【起始页】对话框的中间有3个栏目，分别是“打开最近项目”、“创建新项目”和“从范例创建”。在这3个栏目中单击任意一个栏目中的文字和图标，即可打开相应的窗口。在该对话框的下方有3行文字，它们是Dreamweaver的在线帮助链接。如果在下次启动Dreamweaver时不希望显示此对话框，则可以选中该对话框最下面的【不再显示此对话框】复选框。

要设置是否在启动Dreamweaver时显示此对话框，还可以执行【编辑】|【首选参数】命令，并打开【常规】选项卡，在【文档选项】后取消选中【显示起始页】复选框。

在【起始页】对话框的“创建新项目”栏中，单击“打开”选项，选择一个网页文件，此时的Dreamweaver窗口如图1-21所示，其中各部分的含义如下。
1．【常用】工具栏
包含用于将各种类型的对象（图像、表格和层）插入到文档中的按钮。每个对象都是一段HTML代码，允许用户在插入时设置不同的属性。
2．【文档】工具栏
包含按钮和弹出式菜单，提供各种【文档】窗口视图、各种查看选项和一些常用操作。
3．【文档】窗口
用于显示当前创建和编辑的文档，可以在此设置和编排页面内的所有对象，如文字、图像、表格等。
4．面板组
组合在一个标题下面的相关面板的集合，在【窗口】菜单中，可以执行相应的命令显示或隐藏面板。
5．【文件】面板
帮助用户管理自己的文件和文件夹，包括Dreamweaver站点的一部分和远程服务器，同时还可以访问本地磁盘上的全部文件，类似于Windows中的资源管理器。
6．【属性】面板
用于查看和更改所选对象或文本的各种属性，每种对象都具有不同的属性。在“编码器”工作区布局中，【属性】面板默认是折叠的。
7．标签选择器
位于【文档】窗口底部的状态栏中，用于显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签，可以选择该标签及其全部内容。

图1-21 文档窗口
1.4.3 工具栏面板
Dreamweaver中包含了4种工具栏：插入、样式呈现、文档和标准。其中的【样式呈现】工具栏为Dreamweaver 8所新增的。如果要将这些工具栏显示在文档窗口中，可以执行【查看】|【工具栏】后面的子命令。
1．【标准】工具栏
在默认工作区布局中不显示，主要包含【文件】和【编辑】菜单中的一般操作按钮，如图1-21所示，其中各按钮的名称及功能见表1-1所示，其中的【打印代码】是Dreamweaver 8的新增功能。
表1-1 【标准】工具栏中各按钮的名称及功能
图标
名称
功能

新建
创建一个新文档

打开
打开已有的文档

保存
保存当前编辑的文档

全部保存
保存当前打开的所有文档

打印代码
将代码打印出来

剪切
将内容剪切到剪切板上，原内容删除

复制
将内容复制到剪切板上，原内容不变

粘贴
将剪切板上的内容粘贴到当前位置

撤销
撤销上一次操作

重做
对撤销操作进行恢复
2．【文档】工具栏
在图1-21所示的【文档】工具栏中，各按钮的名称及功能见表1-2所示。使用该工具栏可以设置网页的标题以及预览网页效果等。
表1-2 【文档】工具栏中各按钮的名称及功能
图标
名称
功能

显示代码视图
在【文档】窗口中显示代码视图

显示代码视图和设计视图
在【文档】窗口中分别显示代码视图和设计视图

显示设计视图
在【文档】窗口中显示设计视图

标题
设置文件的标题，它将显示在浏览器的标题栏中

没有浏览器检查错误
可以检查跨浏览器的兼容性

验证标记
验证文档中的标记

文件管理
单击弹出【文件管理】菜单

在浏览器中预览/调试
在浏览器中预览或调试文档

刷新设计视图
在代码视图中进行更改后刷新文档的设计视图

视图选项
为代码视图和设计视图设置选项

可视化助理
进行是否显示可视元素的设置
3．【样式呈现】工具栏
只有在文档使用依赖于媒体的样式表时，此工具栏才有用，所以在一般情况下不显示该工具栏。在图1-21所示的【样式呈现】工具栏中，各按钮的名称及功能见表1-3所示。
4．【插入】工具栏
【插入】工具栏有制表符和菜单两种显示方式。单击图1-21所示的【插入】工具栏右上角的按钮，在弹出的下拉菜单中，执行【显示为菜单】命令，可以切换至菜单显示方式。
表1-3 【样式呈现】工具栏中各按钮的名称及功能
图标
名称
功能

呈现屏幕媒体类型
显示页面在计算机屏幕上的显示方式

呈现打印媒体类型
显示页面在打印纸张上的显示方式

呈现手持型媒体类型
显示页面在手持设备上的显示方式

呈现投影媒体类型
显示页面在投影设备上的显示方式

呈现TTY媒体类型
显示页面在电传打字机上的显示方式

呈现TV媒体类型
显示页面在电视屏幕上的显示方式

切换CSS样式的显示
允许启用或禁用CSS 样式，此按钮可独立于其他媒体按钮之外工作

在菜单显示方式下，单击其中的【常用】按钮，在弹出的下拉菜单中执行【显示为制表符】命令，可以切换至制表符显示方式。

【插入】工具栏是最常用的工具栏之一，其按钮与【插入】菜单中的命令相对应。使用上面的按钮，可以方便、快捷地在网页中插入图像、表格、字符、动画等。【插入】工具栏包含了8个选项卡，下面介绍其中4个主要并且选项较多的选项卡。
（1）【常用】选项卡。这是【插入】工具栏中最常用的选项卡，如图1-22所示，该选项卡中各按钮的名称及功能见表1-4所示。
（2）【布局】选项卡。在【插入】工具栏中单击【布局】按钮，即可打开图1-22所示的【布局】选项卡，在该选项卡中除了可以创建表格外，还可以创建布局表格、层以及框架等。其中各按钮的名称及功能见表1-5所示。

图1-22 【常用】、【布局】、【表单】
与【文本】选项卡

表1-4 【常用】选项卡中各按钮的名称及功能
图标
名称
作用

超级链接
在网页中插入超级链接

电子邮件链接
插入电子邮件链接

命名锚记
插入锚点，实现页内定位

表格
插入表格

插入Div标签
插入Div标签到文档

图像
单击将弹出下拉菜单，可以插入图像、图像占位符、导航条、热点等对象

媒体
单击将弹出下拉菜单，可以插入Flash动画、文本、按钮、视频插件等对象

日期
插入当前日期，可以选择格式

服务器端包括
单击打开【选择文件】对话框，可以选择一个网页文件打开，将其加入到当前的站点中

注释
插入HTML注释

模板
单击将弹出下拉菜单，可以创建模板、编辑区域、重复区域等

标签选择器
在代码中插入各种标签语言的标签，方便编辑代码
表1-5 【布局】选项卡中各按钮的名称及功能
图标
名称
作用

表格
在【标准】模式下插入表格

插入Div标签
在【标准】模式下插入Div标签

描绘层
在【标准】模式中插入层

模式
用于在3种模式之间进行转换

布局表格
在【布局】模式下才能使用

绘制布局单元格
在布局表格中插入单元格

在上面插入行
在布局单元格上面插入行

在下面插入行
在布局单元格下面插入行

在左边插入列
在布局单元格左边插入列

在右边插入列
在布局单元格右边插入列

框架
单击下三角按钮，可以在下拉菜单中插入不同类型的框架

表格数据
导入表格式数据

（3）【文本】选项卡。在【插入】工具栏中单击【文本】按钮，即可打开图1-22所示的【文本】选项卡。其中各按钮的名称及功能见表1-6所示。
表1-6 【文本】选项卡中各按钮的名称及功能
图 标
名 称
作 用

字体标签编辑器
单击可以打开标签编辑器，编辑字体列表

粗体
使用相应的HTML文本格式标签设置选定内容

斜体

加强

强调

段落
使用相应的HTML块标签环绕选定内容

块引用

已编排格式

标题1
使用相应的HTML标题标签环绕选定内容

标题2

标题3

项目列表
使用相应的HTML列表标签环绕选定内容

编号列表

列表项

定义列表
使用相应的HTML定义列表标签环绕选定内容

定义术语

（4）【表单】选项卡。该选项卡中的选项主要用于网页中的信息反馈程序中，也可以在静态网页中应用。在【插入】工具栏中单击【表单】按钮，即可打开图1-22所示的【表单】选项卡。其中各按钮的名称及功能见表1-7所示。
表1-7 【表单】选项卡中各按钮的名称及功能
图标
名称
作用

表单
在指针所在处插入一个表单。表单是容纳表单元素的简单容器

文本字段
在光标所在位置插入文本字段

隐藏域
在光标所在处插入隐藏域，例如用于发送至JavaScript中的不可见区域

文本区域
在光标所在处添加文本区域

复选框
在光标所在位置插入复选框

单选按钮
在光标所在位置插入单选按钮

单选按钮组
在光标所在位置插入成组的单选按钮

列表/菜单
在光标所在位置插入列表和弹出菜单

跳转菜单
在光标所在位置插入一个跳转菜单，用于引导页面浏览

图像域
在光标所在位置插入图像域，包括可以用于按钮的图像

文件域
在光标所在处插入文件域，包括一个文本输入框和一个浏览按钮

按钮
在光标所在处插入一个按钮，默认的名称和值为Submit

标签
在光标所在处插入一个标签，在【代码】视图中可以添加标签名称

字段集
在光标所在位置插入字段集
1.4.4 面板基本操作
Dreamweaver是一种可视化的网页设计和网站管理工具，在Dreamweaver中几乎所有的操作都可以在工具栏或者面板中完成。在【设计器】布局的状态下，文档窗口右侧的界面中包含了所有常用的面板，如【文件】面板、【标签检查器】面板、【结果】面板、【资源】面板等。它的实际运用将在以后的章节中讲到，现在介绍面板的基本操作。
面板组是分布在某个标题下面的相关面板的集合，这些面板功能强大，而且能够任意组合。如果要展开一个面板组，可以单击组名称左侧的展开箭头，如图1-23所示。
如果要使【文档】窗口扩大，可以将面板组隐藏起来，单击【文档】窗口与面板组之间的箭头按钮即可，如图1-24所示。

图1-23 面板组 图1-24 隐藏面板组
如果要将某个面板分离成浮动面板，首先应将鼠标置于面板组的左上角，当指针变成图1-25所示的形状时，按下左键拖动即可得到浮动的面板。然后将鼠标移到面板的边缘，当指针变成双向箭头的形状后，按下左键进行拖动，可以改变面板的大小，如图1-25所示。

单击面板组标题栏右侧的按钮，在弹出的下拉菜单中，可以对该面板进行重新组合、重新命名以及关闭该面板等操作，如图1-26所示。

图1-25 分离面板组和改变面板大小 图1-26 执行命令
1.5 Dreamweaver 8新增功能
作为业界领先的网页制作软件，Dreamweaver 8这次除了增加许多精巧的改进和工作流程更加先进之外，在新功能中还加入了经过重新设计的CSS工具和后台FTP，以及用于将XML文件转换为设计完美且更友好地支持浏览器的文档的工具。
1.5.1 辅助工具
在Dreamweaver 8的新增功能中，最明显的就是其辅助功能，比如辅助线、【缩放工具】、【手形工具】和【选取工具】等。这些工具在制作网页的过程中，可以更加精确地确定网页的元素的位置。
与图像处理软件相同，辅助线是在显示标尺的情况下创建的。执行【查看】|【标尺】|【显示】命令，或者按Ctrl+Alt+R快捷键显示标尺。要改变标尺的单位，可以执行【查看】|【标尺】|【像素】（【英寸】/【厘米】）命令，默认情况下单位为像素。这样就可以在文档中创建辅助线了，如 图1-27所示。

创建辅助线只须单击标尺不放向文档内部拖动即可，将鼠标停留在辅助线上，会以黄色文本框显示辅助线与标尺的距离。按Ctrl键不放将鼠标停留在辅助线创建的方格内，会以白色文本框显示出该方格的宽和高。

图1-27 标尺显示与辅助线创建

图1-28 【辅助线】对话框

要想删除一条辅助线，用拖动的方法将相应的辅助线拖回标尺上即可，另外，可以执行【查看】|【辅助线】|【清除辅助线】命令来清除所有的辅助线。如果不想清除辅助线，只是暂时不想显示，可以执行【查看】|【辅助线】|【显示辅助线】命令，把【显示辅助线】前面的对勾去掉。要想显示辅助线，再次执行此命令即可，也可以按Ctrl+；快捷键。还可以执行【查看】|【辅助线】|【锁定辅助线】命令把辅助线锁定，处于锁定状态的辅助线，将不能拖动。
用户也可以对辅助线进行编辑，执行【查看】|【辅助线】|【编辑辅助线】命令，可以打开【辅助线】对话框，在【辅助线颜色】后面，单击颜色样表图标按钮，打开【颜色】拾色器，在其中可以为辅助线设置另一种颜色，也可以在其后面的文本框中直接输入设定颜色的数值。也可以修改【距离颜色】的设置，距离颜色是指将鼠标指针保持在辅助线之间时，作为距离指示器出现的线条的颜色。在该对话框的下面，还有4个复选项，可以根据需要选中或者清除复选框，如 图1-28所示。

在一般情况下，希望用户不要对辅助线或其他功能的颜色进行更改，因为这些颜色都是经过专业人员设计的，以高亮显示方便用户观察。

在Dreamweaver中，布局表格与层是可以在网页中的任何位置创建的，而辅助线可以确定其位置。要想将两个以上的布局表格和层对齐，除了使用辅助线外，还可以使用【缩放工具】将页面放大，结合【手形工具】移动页面，选择【选取工具】使其对齐，而这些工具在文档窗口的状态栏中，如图1-29所示。
1.5.2 扩展的CSS支持
在Dreamweaver MX 2004中，CSS功能已经非常强大。在此基础上，Dreamweaver 8在CSS方面提供了更强的支持。Dreamweaver 8增强了复杂样式表信息的显示，减少了必须跳转到网页浏览器来检查代码设计的