第 1 章 认识网页
近年来，随着信息技术的发展和 Internet 的普及，很多企业、机构和个人都希望在网络上 拥有一个开展业务或自我介绍的网站。本项目主要介绍网站建设的基础知识，包括网页的常用 术语、网页设计技术和工具、常见的网页布局类型、网站建设的基本流程等内容。
理解网页设计的常用术语
了解常用网页设计的技术和工具
了解常见的网页布局类型
掌握网站建设流程
1.1 网络基础知识
任务 1 优秀网站赏析
【任务描述】
陈薇是北京某职业技术学院的一名新生，想通过“首都之窗”了解首都的一些信息，她 该如何打开“首都之窗”？
1
1 Chapter
【任务要求】
通过本任务的学习，能打开自己想要了解的任何网页。
【实现方法】
（1）在桌面双击浏览器图标，打开浏览器。
（2）在浏览器地址栏中输入“首都之窗”网站的网址：http://www.beijing.gov.cn，即可进 入“首都之窗”网站的首页，如图 1-1 所示。
图 1-1 “首都之窗”网站首页
1
Chapter
【知识链接】
1．网页基础术语
（1）WWW
WWW 是 World Wide Web（全球信息网）的缩写，中文名字为“万维网”。WWW 是 Internet 上那些支持 W3C 协议和超文本传输协议（HyperText Transfer Protocol，HTTP）的客户机与服 务器的集合。
（2）Internet
Internet，中文正式译名为因特网，又叫做国际互联网，是全球范围内的计算机系统互联 网。它是世界上最大的计算机网络，是一个将全球成千上万的计算机网络连接起来而形成的全 球性计算机网络系统，使各网络之间可以交换信息和共享资源。
（3）Intranet
Intranet 又称为企业内部网，是 Internet 技术在企业内部的应用，Internet 的核心技术基于 Web。通常 Intranet 是利用防火墙把内部网和 Internet 分开，当然 Intranet 并非一定要和 Internet 连接在一起，它完全可以自成一体作为一个独立的网络。
（4）网站
网站是多个相关网页的集合，也称为站点，英文名称为 Web Site。网站中的网页之间有一 定的链接关系，可以通过单击被设置为超链接的文字或对象来跳转到相关的网页。
2．网页结构术语
（1）HTML
带.htm、.html 后缀的网页简称为 HTML（HyperText Markup Language，超文本标识语言）
文件，是最常见的网页文件类型。HTML 主要利用标记来描述网页字体、大小、颜色及页面 布局。在 Dreamweaver 中，可以通过代码编辑视图来编辑 HTML 代码以生成对应的网页。
（2）超文本
WWW 上的每个网页都对应着一个文件。我们浏览一个页面时，首先把页面对应的文件 从提供这个文件的计算机里通过 Internet 传送到我们自己的计算机中，再由 WWW 浏览器翻译 成我们见到的有文字、有图形甚至有声音的页面。
（3）FTP
FTP 是 File Transfer Protocol（文件传输协议）的英文简称，用于控制 Internet 上文件的双 向传输。同时，它也是一个应用程序。用户可以通过它把自己的 PC 机与世界各地所有运行 FTP 协议的服务器相连，来访问服务器上的大量程序和信息。
（4）ISP
ISP（Internet Service Provider，互联网服务提供商），即向广大用户综合提供互联网接入 业务、信息业务和增值业务的电信运营商。ISP 是经国家主管部门批准的正式运营企业，享受 国家法律保护。
（5）URL
1 Chapter
URL（Uniform Resource Locator）译为“统一资源定位符”，即网页的地址。
URL 由三部分组成：协议类型，主机名和路径及文件名。
（6）IP
为了区别各个站点，必须为每个站点分配一个唯一的地址，这个地址即称为 IP 地址，IP 地址由 4 个 0～255 之间的数字组成，格式为 xxx.xxx.xxx.xxx，由网络解析这个地址，以确定 每个用户的身份。
（7）域名
IP 地址是数字化的，比较难记，所以有人发明了一种新方法来代替这些数字，即“域 名”地址，域名由几个英文单词组成，如 www.sina.com.cn，其中 cn 代表中国（China），com 代表商业网，sina 代表新浪，www 代表互联网（或称万维网），整个域名合起来就是新浪网 站的地址。
（8）动态网页和静态网页
静态网页是相对于动态网页而言的，并不是说网页中的元素都是静止不动的，而是指浏 览器与服务器端不产生交互的网页，网页中的 GIF 动画、Flash，以及 Flash 按钮等都会产生 变更。
静态网页的执行过程大致为：浏览器向网络中的服务器发出请求，指向某个静态网页；
服务器接到请求后将网页传输给浏览器，此时传送的只是文件。浏览器接到服务器传来的文件 后解析 HTML 标签，将成果显示出来。
动态网页除了静态网页中的元素外，还包含一些应用程序，这些程序需要浏览器与服务 器之间产生交互行为，而且应用程序的执行需要服务器中的应用程序服务器才能完成。
3．网站的主要类型
按照网站内容和形式的不同，可以分为门户网站、职能网站、电子商务网站、个人网站 等类型。
（1）门户网站
门户网站是一种综合性网站，功能全面、信息量大、受众群体多样化。门户网站上通常 会提供搜索引擎、信息发布平台等，注重与用户之间的交流与互动。如搜狐、新浪、网易等都 是著名的门户网站。如图 1-2 所示是搜狐网首页。
（2）职能网站
职能网站包括企业网、政府网等。企业网站以网络营销为目的，主要是展示其产品或对 其提供的售后服务进行说明而建立的网站，如联想网站、海尔网站等。图 1-3 为联想网站首 页。政府网站是我国各级政府机关履行职能、面向社会提供服务的官方网站，是政府机关实 现政务信息公开、服务企业和社会公众互动交流的重要渠道，其主要特点是“资源整合、信 息公开、民主参与”，如“河南省人民政府”网站、“广东省人民政府”网站和图 1-1 所示的
“首都之窗”等。
1
Chapter
图 1-2 “搜狐”网首页
图 1-3 “联想”网站首页
（3）电子商务网站
电子商务网站是企业、机构在互联网上建立的门户，通过网站宣传企业形象，发布、展 示商品信息，实现电子交易，并通过网络开展与商务活动有关的各种售前和售后服务，全面实 现电子商务功能。如淘宝网、当当网、京东商城等。图 1-4 是淘宝网首页。
1 Chapter
图 1-4 “淘宝”网首页
（4）个人网站
个人网站是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或把自己的作 品、商品展示销售而制作的具有独立空间域名的网站，包括博客、个人论坛、个人主页等。图 1-5 是春华秋实的博客。
图 1-5 春华秋实的博客
1
Chapter
【知识拓展】网页的类型 1．根据页面内容划分
根据页面内容可以分为首页、主题网页、内容网页和功能网页等类型。
（1）首页
首页相当于一个网站的门户，是浏览器打开时进入的页面，或者是网站建站时树状结构 的第一页，如百度的首页就是：http://www.baidu.com。它是指一个网站的主索引页，是方便访 客了解网站概貌并引导其调阅重点内容的向导。也称为“主页”。
（2）主题网页
主题网页用于对网站内容进一步归类和细化，是主页和内容网页的中转站。
（3）内容网页
内容网页是对网站所传达信息的具体体现，位于网站链接结构的终端。
（4）功能网页
功能网页是用于获取访问者的信息反馈、网站注册信息等，为网站访问者服务的网页。
2．根据所采用的技术划分
（1）静态网页
静态网页一般以.html 或.htm 为文件扩展名，多通过网页设计工具一次性设计完成，并通 过手工更新页面信息，信息更新速度相对比较缓慢。
（2）动态网页
动态网页是通过网页脚本与语言自动处理、自动更新的页面。一般以.asp、.aspx、.php 或.jsp 作为文件扩展名。
【思考与练习】
1．“百度”网站的网址是http://www.baidu.com，试打开“百度”网站首页。
2．通过“百度”搜索“河南省人民政府”网站，并打开欣赏。
1.2 网站建设流程
任务 2 规划网站
【任务描述】
陈薇通过欣赏优秀网站，也特别想自己制作一个网站，那么她首先要做哪些准备呢？
【任务要求】
通过本任务学习，掌握网站建设流程。
【实现方法】
（1）网站前期策划。
包括网站定位、组织网站内容、设计网站结构等。
1 Chapter
（2）网页制作和美化。
包括确定网站布局、格调和色彩搭配，选择适当的制作和美化工具，以及服务端采用的 技术。
（3）网站发布和推广。
网页制作完毕后，要发布到 Web 服务器上，才能让全世界的朋友观看。为了使更多的朋 友观看，还要不断进行宣传，提高网站的访问率和知名度。
（4）网站后期维护。
【知识链接】
1．网站前期策划
一个网站项目的确立是建立在各种各样的需求基础上的。如何更好地理解、分析、明确 需求，并为网站推广打下扎实基础，是每个网站开发者都需要面对的问题。
（1）网站定位
网站定位要准确，内容要精。如果要制作一个包罗万象的站点，把所有精彩的东西都放在 上面，结果往往会事与愿违，给人的感觉是没有主题，没有特色，样样有，却样样都很肤浅。
网站的题材最好选自己擅长或者喜爱的内容。兴趣是制作网站的动力，没有热情，很难 设计制作出优秀的网站。
（2）网站整体规划
进行网站的整体规划也就是组织网站的内容和设计其结构。
确定网站的主题后，即可组织网站的内容，搜集并整理网站需要的素材，尤其是文字素 材和图片素材，准备得越充分越有利于网站栏目规划和网页素材整理工作。
组织网站的内容可以从两个角度来考虑。从设计者的角度来考虑，可以依据被描述对象 的组织机构、类别划分等来组织内容；从浏览者的角度来考虑，就应该将各种素材依据浏览者 的需要进行内容分类，以便浏览者可以快捷地获取所需要的信息及其相关内容。
合理的结构设计对于网站的规划也是至关重要的。以下是三种常用的结构类型。
1）层次结构
层次结构类似于目录系统的树型结构，如图 1-6 所示。
图 1-6 层次结构 主页
页面 1 页面 2 页面 3
页面 5
页面 4 页面 6 页面 7
一级标题
二级标题
1
Chapter
2）线性结构
线性结构类似于数据结构中的线性表，用于组织本身以线性顺序形式存在的信息，可以 引导浏览者按部就班地浏览整个网站文件，如图 1-7 所示。
图 1-7 线性结构
3）Web 结构
Web 结构类似于 Internet 的组成结构，各网页之间形成网状连接，允许用户随意浏览，如 图 1-8 所示。
图 1-8 Web 结构
2．网页设计与制作
（1）网页布局
网页布局决定网页是否美观。合理的布局，可以将页面中的文字、图像等内容完美、直 观地呈现给访问者，同时合理安排网页空间，优化网页的页面效果和下载速度。常见的有“国”
字型布局、“匡”字型布局、“三”字型布局和“川”字型布局等。
1）“国”字型
“国”字型也可以称为“同”字型，是一些大型网站所喜欢采用的类型，如图 1-9 所示。
即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，
中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明 等。这种结构是我们在网上见到得最多的一种结构类型。如图 1-10 所示即是一种“国”字型 结构布局的网页。
主页
页面 1 页面 2 页面 3
页面 5
页面 4 页面 7 页面 8
一级标题
二级标题 页面 6
主 页
页 面 1
页 面 2
页 面 3
1 Chapter
图 1-9 “国”字型抽象图
图 1-10 “国”字型结构布局的网页
2）“匡”字型
“匡”字型布局结构与“国”字型结构只是形式上的区别，如图 1-11 所示，它去掉了“国”
字形布局的右边的边框部分，给主内容区释放了更多空间，内容虽看起来比较多，但布局整齐 又不过于拥挤。如图 1-12 所示所示即是一种“匡”字型结构布局的网页。
图 1-11 “匡”字型抽象图
1
Chapter
图 1-12 “匡”字型结构布局的网页
3）“三”字型
“三”字型布局结构是一种简洁明快的网页布局，如图 1-13 所示。这种布局的特点是在 页面上由横向两条色块将网页整体分割为 3 部分，色块中大多放置广告条与更新和版权提示。
如图 1-14 所示即是一种“三”字型布局的网页。
图 1-13 “三”字型抽象图
1 Chapter
图 1-14 “三”字型结构布局的网页
4）“川”字型
“川”字型结构布局的网页，如图 1-15 所示，整个页面在垂直方向大致分为三列，主要 内容分布在三列中，可以极大地增加网站内容在首页的显示面积，信息量大，给人畅快淋漓的 感觉。如图 1-16 所示即是一种“川”字型布局的网页。
图 1-15 “川”字型抽象图
图 1-16 “川”字型结构布局的网页
1
Chapter
5）其他类型
除了以上常见网站结构布局外，还有 Flash 布局、标题文本型布局、框架型布局以及综合 型布局等。
（2）常用网页制作工具
俗话说：“工欲善其事，先必利其器”。要想将网站建设好，必须选择合适顺手的工具。
用于网页制作的工具非常多，我们重点介绍 Dreamweaver、Photoshop、Fireworks、Flash 等常 用的工具。
1）Dreamweaver 简介
Dreamweaver 是世界顶级软件厂商 Adobe 推出的一套拥有可视化编辑界面，用于制作并 编辑网站和移动应用程序的网页设计软件，支持代码、拆分、设计、实时视图等多种方式来创 作、编写和修改网页。对于初级人员，可以无需编写任何代码就能快速创建 Web 页面，其成 熟的代码编辑工具更适合于 Web 高级开发人员的创作！CS6 新版本使用了自适应网格版面创 建页面，在发布前使用多屏幕预览审阅设计，可大大提高工作效率。改善的 FTP 性能，能更 高效地传输大型文件。“实时视图”和“多屏幕预览”面板可呈现 html 代码，更能够检查自 己的工作。本书使用的版本是 Dreamweaver CS6。
2）Photoshop 简介
Photoshop 是平面图像处理业界霸主 Adobe 公司推出的跨越 PC 和 Mac 两界首屈一指的大 型图像处理软件。它功能强大，操作界面友好，得到了广大第三方开发厂家的支持，从而也赢 得了众多的用户的青睐。
Photoshop 支持众多的图像格式。对图像的常见操作和变换做到了非常精细的程度，任何 一款同类软件都无法望其颈背；它拥有异常丰富的插件（在 Photoshop 中叫滤镜），熟练后能 体会到“只有想不到，没有做不到”的境界。
而这一切，Photoshop 都为我们提供了相当简捷和自由的操作环境，从而使我们工作起来 游刃有余。
3）Fireworks 简介
Fireworks 也是 Adobe 公司推出的一款网页作图软件。该软件可以加速 Web 设计与开发，
是一款创建与优化 Web 图像和快速构建网站与 Web界面原型的理想工具。Fireworks 不仅具 备编辑矢量图形与位图图像的灵活性，还提供了一个预先构建资源的公用库，并可与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和Adobe Flash软件省时集成。在 Fireworks 中 将设计迅速转变为模型，或利用来自 Illustrator、Photoshop 和 Flash 的其他资源。然后直接置 入 Dreamweaver 中轻松地进行开发与部署。
4）Flash 简介
Flash 是一种集动画创作与应用程序开发于一身的创作软件，到 2013 年 9 月 2 日为止，最 新的零售版本为Adobe Flash Professional CC（2013 年发布）。Adobe Flash Professional CC 为创 建数字动画、交互式Web站点、桌面应用程序以及手机应用程序提供了功能全面的创作和编辑
1 Chapter
环境。可以在 Flash 中创建原始内容或者从其他 Adobe 应用程序（如 Photoshop 或 Illustrator）
导入素材，快速设计简单的动画，以及使用 Adobe ActionScript 3.0 开发高级的交互式项目。设 计人员和开发人员可使用它来创建演示文稿、应用程序和其他允许用户交互的内容。Flash 可 以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容；也可 以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的 Flash 应用程序。
（3）网页制作中的脚本语言
Web 页面之所以能够吸引浏览者，除了网上丰富多彩、层出不穷的信息，很重要的一点 就是它的交互性。
实现网页交互性的核心技术是脚本语言。能够建立交互性的脚本语言有两种。一种是在 服务器端运行的语言，功能强大，需在处理数据之前从最终用户获得数据，因此处理速度远不 能满足用户的需求；另一种是客户端语言，用户在使用网页的同时，客户端语言已经下载到终 端用户的计算机上进行实时处理，使用户不需要时延就可以使用程序。
客户端脚本作为程序的一部分插入到 HTML 中，与 HTML 编码一起使用，从而使静态的 HTML 具有互动性。目前常用的客户端语言是 JavaScript 和 VBScript。
1）JavaScript
JavaScript 是一种由Netscape首创的、原型化继承的、基于对象的、动态类型的、区分大 小写的客户端脚本语言，主要目的是为了解决服务器端语言遗留的速度问题，为客户提供更流 畅的浏览效果。用 JavaScript 语言书写的“程序”嵌入到 HTML 脚本中，再由支持 JavaScript 的浏览器进行解释并执行。目前常用的浏览器都支持 JavaScript。后面还有较为详细的介绍。
2）VBScript
VBScript 是微软开发的一种解析型的服务端（也支持客户端）脚本语言，是 Visual Basic Script 的简称，有时也被缩写为 VBS。可以看作是VB语言的简化版，与 VBA 的关系也非常密 切。VBScript 是 ASP动态网页默认的编程语言，配合 ASP 内建对象和 ADO 对象，用户很快 就能掌握访问数据库的 ASP 动态网页开发技术。
（4）服务器端主要技术
动态网页技术的原理是将使用各种技术编写的动态页面保存在 Web 服务器内，当客户端 用户向 Web 服务器发出访问动态页面的请求时，Web 服务器将根据用户所访问页面的后缀名 确定该页面所使用的网络编程技术，然后把该页面提交给相应的解释引擎；解释引擎扫描整个 页面找到特定的标签，并执行位于该标签内的脚本代码以实现不同的功能，如访问数据库、发 送电子邮件、执行算术或逻辑运算等，最后把执行结果以 HTML 元素形式返回 Web 服务器；
最终，Web 服务器把解释引擎的执行结果连同页面上的 HTML 内容以及各种客户端脚本一并 传送到客户端。虽然客户端用户接收到的页面与传统页面并没有任何区别，但实际上页面内容 已经过了服务端处理，完成了动态的个性化设置。
目前实现动态网页主要有四种技术：CGI 技术、ASP 技术、JSP 技术和 PHP 技术。从形 式上看，后三种都属于嵌入式的脚本语言，即嵌入到 HTML 语言中的一种脚本语言。
1
Chapter
1）CGI 技术
CGI 即 Common Gateway Interface（公用网关接口），可以称之为一种机制。程序员可以 使用不同的程序语言编写合适的 CGI 程序，如 Visual Basic、Delphi 或 C/C++等，将已经写好 的程序放在 Web 服务器的计算机上运行，再将其运行结果通过 Web 服务器传输到客户端的浏 览器上。通过 CGI 建立 Web 页面与脚本程序之间的联系，并且可以利用脚本程序来处理访问 者输入的信息并据此作出响应。使用 CGI 的编程方式比较困难而且编程和调度效率都较低。
最常用于编写 CGI 技术的语言是 Perl（Practical Extraction and Report Language，文字分析 报告语言），它具有强大的字符串处理能力，特别适合于分割处理客户端 Form 提交的数据串，
用它编写的程序后缀为.pl。
2）ASP 技术
ASP 即 Active Server Pages，是微软开发的一种类似 HTML、Script（脚本）与 CGI 的结 合体，它没有提供自己专门的编程语言，而是允许用户使用包括 VBScript、JavaScript 等在内 的许多已有的脚本语言编写 ASP 的应用程序。ASP 的程序编制比 HTML 更方便且更有灵活性。
它是在 Web 服务器端运行，运行后再将运行结果以 HTML 格式传送至客户端的浏览器。
ASP 比 CGI 具有的最大好处是可以包含 HTML 标签，也可以直接存取数据库及使用无限 扩充的 ActiveX 控件，因此在程序编制上要比 HTML 方便而且更富有灵活性。
ASP 吸收了许多在其之前已经出现的技术，是一种发展较为成熟的网络应用程序开发技 术；其核心技术是对组件和对象技术的充分支持。通过使用 ASP 的组件和对象技术，用户可 以直接使用 ActiveX 控件，调用对象方法和属性，以简单的方式实现强大的功能。
3）JSP 技术
JSP 即 Java Server Pages，是由 Sun Microsystem 公司于 1999 年 6 月推出的技术，是基于 Java Servlet 以及整个 Java 体系的 Web 开发技术。利用这一技术可以建立先进、安全和跨平台 的动态网站。
总的来讲，JSP 和 ASP 在技术方面有许多相似之处。两者都是为基于 Web 应用的动态交 互网页制作提供技术支持。而且两者都能够替代 CGI 使网站建设与发展变得较为简单与快 捷。不过两者是来源于不同的技术规范组织，ASP 一般只能应用于 Windows 平台，而 JSP 则 可以不加修改地在 85%以上的 Web 服务器上运行，其中包括了 Windows 平台，符合“一次编 写，多平台运行”的 Java 标准，实现了平台和服务器的独立性，而且基于 JSP 技术的应用程 序比基于 ASP 技术的应用程序易于维护和管理。
4）PHP 技术
PHP 即 Hypertext Preprocessor（超文本预处理器），是一种易于学习和使用的服务器端脚 本语言，是生成动态网页的工具之一。它也是嵌入 HTML 文件的一种脚本语言。语法大部分 是从 C、Java、Perl 语言中借来，并形成了自己的独有风格；目的是让 Web 程序员快速地开发 出动态的网页。
PHP 是完全免费的，可以不受限制地获得源码，甚至可以加进你自己需要的特色。PHP
1 Chapter
在大多数 UNIX 平台，GUN/Linux 和微软 Windows 平台上均可以运行。
与 ASP、JSP 一样，PHP 也可以结合 HTML 语言共同使用；它与 HTML 语言具有非常好 的兼容性，使用者可以直接在脚本代码中加入 HTML 标签，或者在 HTML 标签中加入脚本代 码从而更好地实现页面控制，提供更加丰富的功能。
PHP 提供了标准的数据库接口，几乎可以连接所有的数据库；尤其和 MySQL 数据库的配 合更是“天衣无缝”。
【知识拓展】 1．网页的色彩搭配
色彩的魅力是无限的，它可以让本身很平淡无味的东西瞬间变得漂亮、美丽起来。
（1）色彩搭配的原则：
色彩的鲜明性；
色彩的独特性；
色彩的联想性；
色彩搭配的合理性；
色彩的艺术性。
（2）网页色彩搭配的技巧：
同种色彩搭配；
邻居色彩搭配；
对比色彩搭配；
暖色色彩搭配；
冷色色彩搭配；
有主色的混合色彩搭配。
2．网站推广方法
网站推广的方法有很多种，主要形式如下：
（1）搜索引擎上注册；
（2）网站交换链接；
（3）添加广告链接或交换广告条；
（4）Meta 标签的使用；
（5）传统方式，即直接跟客户宣传、借助网络广告；
（6）登录网址导航站点；
（7）BBS 宣传等。
【思考与练习】
1．列举你所了解的网页设计和美化的常用工具有哪些？
2．脚本语言 JavaScript 和 VBScript 各有什么特点？两者的主要区别是什么？
3．简述 ASP、JSP、PHP 各自的主要特点。
1
Chapter
4．归纳总结网站建设的基本流程。
1.3 创建和管理站点
任务 3 创建“欧瑞莲”美容产品网站
【任务描述】
陈薇通过学习和向有网站建设经验的同学请教，知道在创建网站之前要先规划站点，自 己又很爱美，于是就想创建一个美容产品网站。
【任务要求】
通过本任务的学习，掌握新建一个本地站点的基本步骤及站点的管理。
【实现方法】
（1）在本地磁盘上建立一个文件夹（oriflame），该文件夹就是本地站点的根目录。
（2）打开 Dreamweaver CS6，在起始页面中选择“新建”→“Dreamweaver 站点”命令，
如图 1-17 所示；或在菜单栏上单击“站点”→“新建站点…”命令，如图 1-18 所示，都可打 开“站点设置对象 未命名站点 n”对话框，如图 1-19 所示；或在菜单栏上单击“站点”→管 理站点…”命令打开如图 1-20 所示的“管理站点”对话框，然后单击对话框上的“新建站点”
按钮，也可以打开图 1-19。
图 1-17 起始页中新建站点 图 1-18 在“站点”菜单下新建站点
（3）在图 1-19 所示的对话框的“站点名称”文本框中输入站点名称（欧瑞莲），单击“本 地站点文件夹”后的“浏览文件夹”按钮，选择第（1）步创建的文件夹（oriflame），单击“保 存”按钮即可创建站点。
1 Chapter
站点创建完成后将会在“文件”面板中显示该站点，如图 1-21 所示。
图 1-19 “站点设置对象”对话框
图 1-20 “管理站点”对话框
图 1-21 “文件”面板 导出站点
复制站点 编辑站点
删 除 站 点
1
Chapter
【知识链接】管理站点
对于已经建立好的站点，可以执行删除、编辑、复制、导出和导入等操作。
1．删除站点
如果某个站点在 Dreamweaver 中不再需要了，可以删除，具体的操作步骤是：
（1）选择“站点”→“管理站点…”命令，打开如图 1-20 所示的“管理站点”对话框。
（2）从站点列表中选择要删除的站点名称，单击“删除”按钮。
（3）在弹出的对话框中单击“是”按钮，即可删除选定的站点。
2．编辑站点
如果要重新设置某站点的属性，可以编辑该站点，具体的操作步骤是：
（1）选择“站点”→“管理站点…”命令，打开如图 1-20 所示的“管理站点”对话框。
（2）从站点列表中选择要编辑的站点名称，单击“编辑”按钮即可打开类似图 1-19 所示 的对话框，对站点的属性重新设置。
（3）编辑完成后，单击“保存”按钮，返回“管理站点”对话框，单击“完成”按钮 即可。
3．复制站点
如果要创建多个结构相同或相似的站点，也可以利用站点的复制功能，操作步骤是：
（1）选择“站点”→“管理站点…”命令，打开如图 1-20 所示的“管理站点”对话框。
（2）从站点列表中选择要复制的站点名称，单击“复制”按钮。
（3）完成复制操作后，还可以对复制的站点按自己的要求进行编辑。
4．导出站点
如果要创建多个结构相同或相似的站点，可以利用站点的导出功能，操作步骤是：
（1）选择“站点”→“管理站点…”命令，打开如图 1-20 所示的“管理站点”对话框。
（2）从站点列表中选择要导出的站点名称，单击“导出”按钮。
（3）在弹出的“导出站点”对话框中设置导出文件名和保存位置，单击“保存”按钮后 返回“管理站点”对话框，单击“完成”按钮即可。
5．导入站点
对于已导出的站点要加以利用，或者要从其他用户处获得共享站点设置文件，可以利用 Dreamweaver 的“导入站点”功能实现，操作步骤是：
（1）选择“站点”→“管理站点…”命令。
（2）在打开的“管理站点”对话框中单击“导入”按钮。
（3）在弹出的“导入站点”对话框中选择要导入的站点，单击“打开”按钮后返回“管 理站点”对话框，单击“完成”按钮即可。
【技能训练】
创建一个本地站点：
1 Chapter
1．内容要求
（1）练习建立本地站点的几种方法。
（2）练习在“文件”面板中新建目录和文件的操作。
2．简单步骤
本训练建立一个个人站点，站点建立完成后的“文件”面板效果如图 1-22 所示。其操作 步骤是：
（1）在本地磁盘上新建一个文件夹 yxysite，作为站点根目录。
（2）启动 Dreamweaver，选择“站点”→“新建站点…”命令，在弹出的“设置站点对 象”对话框中输入站点的名字，并选择上一步新建的文件夹作为“本地站点文件夹”，单击“保 存”按钮。这时会在“文件”面板中显示该站点。
（3）在“文件”面板中选中该站点，并右击，在弹出的快捷菜单中选择“新建文件夹”
命令，如图 1-23 所示；或者在“文件”面板上单击右边的 图标，在弹出的菜单中选择“文 件”→“新建文件夹”命令，如图 1-24 所示，都会在站点文件夹下新建一个默认名称为 untitled 的文件夹，将其更名为 images。
图 1-22 站点目录结构 图 1-23 在“文件”面板中新建文件夹（1）
（4）重复步骤（3）再创建 musics 和 diary 两个文件夹。
（5）采用同样方法，在“文件”面板中选中 musics 文件夹，在其下新建 rock 和 popular 两个文件夹。
1
Chapter
图 1-24 在“文件”面板中新建文件夹 （2）
（6）在“文件”面板中选中站点根目录并右击，在弹出的快捷菜单中选择“新建文件”
命令，或者通过图 1-24 所示的方法，选择“新建文件”命令，则会在站点文件夹下新建一个 默认名称为 untitled.html 的文件，将其更名为 index.html，就会创建出如图 1-22 所示效果的站 点结构。
（7）如果还需要创建其他的文件夹或文件，可以重复上述步骤来完成。
注意：上述文件夹也可以直接在本地磁盘上新建。
