知识储备_Adobe Dreamweaver网页设计与制作标准实训教程（CS5修订版）-QQ阅读男生玄幻网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

知识储备

知识1 欣赏优秀网页作品

（优秀网页作品欣赏见模块1\作品欣赏）

兴趣对于学习知识十分重要，希望通过欣赏一些优秀的网页作品可以激发读者制作网页的兴趣。如图1-1～图1-4所示的4个网站制作新颖，界面简洁大方，文字排版结构合理，颜色搭配鲜明。

图1-1 作品欣赏1

图1-2 作品欣赏2

图1-3 作品欣赏3

图1-4 作品欣赏4

优秀网站欣赏：http://www.triparoundtheglobe.com/

个人网站欣赏：http://www.pqshow.com/index/wangye1.html

知识2 认识网页

1．网页与网站

（1）网页（Web）

通常所说的“新浪”、“搜狐”、“网易”等，就是俗称的“网站”。当我们访问这些网站时，访问最直接的就是“网页”。网页是构成网站的基本元素，是承载各种网站应用的平台，也就是说，网站是由网页组成的。

网页是一种网络信息传递的载体，这种媒介的性质与“报纸”、“广播”、“电视”等传统媒体是可以相提并论的。在网络上传递的信息，比如文字、图片甚至多媒体影音，都是存储在网页中的，浏览者通过浏览网页就可以了解到相关信息。构建网页的基本元素包括文本、图像和超链接，其他元素包括声音、动画、视频、表格、导航栏、表单等。

在浏览器的地址栏中输入一个网址，例如，http://www.pfc.edu.cn，然后按Enter键，即可打开一个网页，如图1-5所示。

图1-5 打开网页

网页实际是一个文件，称为网页文件。正如一个音乐文件需要播放器收听一样，网页的显示也需要网页浏览器的支持，目前的主流网页浏览器有Microsoft Internet Explorer、Netscape Navigator、Mozilla Firefox以及Opera等。如果想选择不同的浏览器来浏览网页，可以从互联网中搜索并免费下载。

可以发现，只要是网页浏览器打开的站点，其显示的都是网页。另外，还可以通过菜单命令查看网页的“源代码”。以IE浏览器为例，在当前打开的网页浏览器上，单击“查看”菜单，从下拉菜单中选择“源文件”菜单命令，即可打开一个记事本文件，在该记事本中就可以查看网页的源代码了，如图1-6所示，网页的源代码是由HTML标签和其他内容组成的。

图1-6 网页源代码

通过观察，可以将网页看作一张纸。这张纸与一张宣传画册、海报没有多大的差别（指页面的设计版式和传递表达的信息内容），其区别是媒介载体的不同。设计一个网页，如同在稿纸上画一幅画一样，要考虑使用什么颜色、采用什么结构、表现什么风格、传达什么内容等，只是网页是将稿纸上的内容搬到了计算机互联网上来实现。

（2）网站（Website）

网站是指在互联网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合，它建立在网络基础之上，以计算机、网络和通信技术为依托，通过一台或多台计算机向访问者提供服务。平时所说的访问某站点，实际上访问的是提供这种服务的一台或多台计算机。人们可以通过网页浏览器来访问网站。

2．网页浏览基本原理

互联网的原理非常简单，它包括至少两台计算机之间的信息交换，需要信息的计算机称为客户端，提供信息的计算机称为服务器。在客户端上安装的浏览器软件（如IE浏览器或Netscape Navigator）可以向网站的服务器请求浏览自己需要的信息。例如，某人要到欧洲旅游，在实际到达目的地之前，他可以打开浏览器，到互联网上搜索有关欧洲旅游的各方面信息，如有关欧洲各国风俗的信息、旅行注意事项等；除此之外，他还可以在网上进行预订客房和机票之类的操作。提供信息的服务器可以在公司内部的局域网中，也可以位于互联网上。监视器根据服务器文件系统中的名称确定请求的文件，并要求服务器进行发送。接收到需要的文件后，浏览器会将文件显示给站点访问者。如果该信息同时要求传送其他文件（如图形、声音、动画或视频文件等），则浏览器会以同样的机制进行处理，下载到客户端供站点访问者浏览，如图1-7所示。

图1-7 网页浏览图

3．静态网页和动态网页

按网页在一个站点中所处的位置可以将网页分为主页和内页。主页又称为首页，是指进入网站时看到的第一个页面，该页面通常在整个网站中起导航作用；内页是指与主页相链接的，与本网站相关的其他页面。

按网页的表现形式可以将网页分为静态网页和动态网页。

静态网页是指网页文件中没有程序和后台数据库，只有HTML代码，一般以“.html”或“.htm”为后缀名的网页。静态网页内容不会在制作完成后发生变化，任何人访问都显示一样的内容，如果内容变化就必须修改源代码，然后将其重新上传到服务器上。

动态网页是指该网页文件不仅具有HTML标记，而且含有程序代码，使用数据库连接。动态网页能根据不同的时间、不同的来访者显示不同的内容。动态网站更新方便，一般在后台直接更新。

4. DNS

DNS即域名服务器（Domain Name Server或Domain Name System），它把域名转换成计算机能够理解的IP地址，例如，访问中央电视台的网站（www.cctv.com）, DNS就将www.cctv.com转换成IP地址“210.77.132.1”，这样就可以找到存放中央电视台网站内容的网络服务器了。每一台联网的计算机必定有一个DNS来解析域名。

例如，访问www.pfc.edu.cn的过程如下。

① 将域名送到本地域名服务器上。

② 如果该本地域名服务器不是授权域名服务器，则本地域名服务器将请求送给根域名服务器。

③ 根域名服务器查询后，将www.pfc.edu.cn所在的授权域名服务器的域名及IP通知本地域名服务器。

④ 本地域名服务器询问www.pfc.com，得到它的IP地址。

⑤ 存储www.pfc.com的IP地址，并将该IP送到客户端，由客户端访问。

5．网站设计工作流程

网站建设最初必须有一个整体的战略规划和目标。首先要规划好网页的大致外观，然后着手设计，当整个网站制作并测试完成后，就可以发布到网上了。下面介绍网站建设的基本流程。

（1）网站需求分析

规划一个网站，可以先用树状结构把每个页面的内容提纲列出来。尤其是当要制作的网站很大时，特别需要把架构规划好，便于理清层次，同时要考虑到以后的扩充性，避免以后更改整个网站的结构。

① 确定网站主题

网站主题就是网站的主要内容，网站必须有明确的主题。确定网站的主题就是要明确网站设计的目的和用户需求，认真规划和分析，把握主题。为了做到主题鲜明突出、要点明确，需要按照客户的要求，用简单明确的语言和页面来体现网站的主题，然后调动多种手段充分表现网站的个性，突出网站的特点，给用户留下深刻的印象。

② 收集素材

明确了网站的主题之后就要围绕主题开始收集素材了。素材包括图片、音频、文字、视频和动画等。素材收集得越充分，以后制作网站就越容易。通常可以从图书、报刊、光盘及多媒体中获得素材，也可以自己制作，或者从网上收集。收集好素材后，将其去粗取精，归类整理，以方便使用。

③ 规划网站

一个网站设计得成功与否，很大程度上取决于设计者的规划水平。网站规划包含的内容很多，如网站的用途、网站的结构、栏目的设置、网站的风格、颜色的搭配、版面的布局以及文字图片的运用等。只有在制作网页之前进行了充分的规划，才能在制作时驾轻就熟，使制作出来的网页有个性、有特色、有吸引力。

（2）设计制作网站页面

网页设计是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂的顺序进行。所谓先大后小，是指在制作网页时，先把整体结构设计好，然后逐步完善小的结构设计。先简单后复杂，是指先设计出简单的内容，然后设计复杂的内容，以便出现问题时易于修改。

在制作网页时要多灵活运用模板和库，这样可以大大提高制作效率。如果很多网页都使用相同的版式设计，则应当为版面设计一个模板，然后以此模板为基础创建网页，今后如果想要改变所有网页的版面设计，只需简单地改变模板即可。

（3）网站发布

① 域名的申请

域名是网站在互联网上的名字，有了这个名字，用户才可以在互联网上进行沟通。在全世界没有重复的域名。域名分为国内域名和国际域名两种，由若干个英文字母和数字组成，并用“. ”分隔成几部分，如pfc.edu.cn就是一个域名。

域名具有商标性质，是无形资产的象征，对企业来讲格外重要。

② 开通网站空间

开通网站空间可以采用以下两种常见的主机类型。

● 主机托管：将购置的网络服务器托管于网络服务机构，每年支付一定数额的费用。这种方式需要架设一台最基本的服务器，其购置成本可能需要数万元，另外，还需花费一笔相当高的费用来购置配套的软件，聘请技术人员负责网站建设及维护。由于所需费用很高，这种方式不适合中小企业网站。

● 虚拟主机：使用虚拟主机不仅节省了购买相关软硬件设施的费用，公司也无须招聘或培训更多的专业人员，因而其成本也较主机托管低得多。不过，虚拟主机只适合于小型的、结构较简单的网站，对于大型网站来说还是应该采用主机托管的形式，否则其网站管理将十分麻烦。

目前网站存放所采用的操作系统只有两大类，一类是UNIX，另一类是微软的Windows NT和Windows 2003。

③ 网站上传

可以将文件从本地站点上传到远端站点，这通常不会更改文件的取出状态。可以使用文件面板或文档窗口来上传文件。Dreamweaver在传输期间创建文件活动的日志，同时还会记录所有FTP文件的传输活动。如果使用FTP传输文件时出错，则可以借助站点FTP日志来确定问题的所在。

（4）网站推广

互联网的应用和繁荣为我们提供了广阔的电子商务市场和商机，但是互联网上的各种网站数以万计，网站建好以后，如果不进行推广，那么产品与服务在网上仍然不为人所知，起不到建立站点的作用，所以尤其是企业，在建立网站后应立即着手利用各种手段推广自己的网站。推广的主要方法有搜索引擎推广法、电子邮件推广法、资源合作推广法、信息发布推广法、快捷网址推广方法及网络广告推广法等。

知识3 初识Dreamweaver

Dreamweaver是Adobe公司开发的一款可视化网页设计和网站管理软件。可视化编辑功能可以不需要编写任何代码而快速制作出精彩的网页。Dreamweaver能与其他图形编辑软件紧密结合，协同处理编辑图片，使用起来非常方便。Dreamweaver还支持代码编辑环境，如颜色代码、自动补全和代码折叠等，更便于进行代码编写，同时，它还支持最新的CSS可视化布局。

1．基本操作

（1）启动Dreamweaver CS5

安装好Dreamweaver CS5后，就可以使用该软件了。启动Dreamweaver CS5软件的方法主要有以下3种。

方法一：通过双击计算机桌面上的Dreamweaver CS5快捷方式图标启动。