1、第1章 网页制作概述,（时间：2次课，4学时）,第1章 网页制作概述,教学提示：本章介绍使用网络时需要经常接触的基本概念和有关多媒体网页的一些基本概念，利用几个具有代表性的精彩网站，分析网页的整体结构，然后对本书所列实例网站中几个有特点的网页中应用的内容进行分析，最后重点介绍网站开发流程和目前较受青睐的工具Dreamweaver的最新版本Dreamweaver 8。并就这些内容展开全面的论述，目的是让用户先加深对网络应用和网页中有关概念的认识和体会。 教学目标：了解网页展示信息的方式和网站制作流程，并了解Dreamweaver 8的一些新功能，熟悉其工作窗口，以便以后能更好、更快地去规划和制作
2、网站。,第1章 网页制作概述,1.1 Internet和WWW简 1.2 分 析 网 页 1.3 常用网页设计工具 1.4 网站开发流程 1.5 认识Dreamweaver 8 1.6 制作第一个网页 1.7 上 机 实 战,1.1 Internet和WWW简介,1.1.1 统一资源定位器和域名 1.1.2 超文本文件 1.1.3 超链接,1.1 Internet和WWW简介,Internet(因特网)是一个巨大的信息资源网，它已经成为一种家喻户晓的信息媒体，也成了许多人工作、学习和生活的伙伴。 WWW(World Wide Web，万维网)是建立在Internet上的全球化、分布式、交互式、
3、动态多平台的图形网络信息服务系统。WWW起源于CERN(欧洲粒子物理实验室)，其设计思想是统一描述 Internet 上多种资源的位置(URL)，采用超文本的方式，通过超链接连接Internet上的资源。正是由于WWW图文并茂、丰富多彩的特性和浏览器技术的不断发展，使Internet变成了一个精彩的世界，从而吸引了越来越多的用户。 WWW以客户机/服务器(Client/Server)的方式进行工作，其软件主要是由服务器端软件和客户端软件两部分组成。存取WWW资源的软件叫做浏览器。目前最流行的浏览器有Internet Explorer（简称IE）和Netscape Navigator。Inter
4、net Explorer是Microsoft公司的产品。图1.1所示就是在Microsoft Internet Explorer浏览器中浏览WWW资源 。,1.1 Internet和WWW简介,图1.1 在Microsoft Internet Explorer浏览器中浏览网页,1.1.1 统一资源定位器和域名,您可以将WWW视为Internet上的一个大型图书馆，“Web节点”就像图书馆中的一本书，而“Web页”则是书中的某一页。许多Web页合在一起便组成一个Web节点。可以从一个特定的Web节点开始Internet环游之旅。每一个Web页都包括Web节点的主页，而且拥有一个惟一的URL地址。
5、链接网页的URL应该以“http:/”开始，图1.1所示“唐商网”网站主页的地址是http:/。 1. IP地址 为了区分网络上的计算机，IP协议为每一台在Internet上的计算机都定义了5个32位长的地址，叫IP协议地址，简称为IP地址。 2. 域名 域名是Internet上用来寻找网站所用的名字，是Internet上的重要标识，相当于主机的门牌号码。每一台主机都对应一个IP地址，每一个IP地址由32位长的数字组成，如192.168.11.34。人们为了方便记忆，用域名来代替这些数字来寻找主机，如。每一个域名与IP地址是一一对应的，人们输入域名，再由域名服务器（DNS）解析成IP地址，从而
6、找到相应的网站。每一个网址和E-mail都要用到域名。,1.1.1 统一资源定位器和域名,3. 统一资源定位器 URL，英文为Uniform Resource Locator，意思是“统一资源定位器”。“资源(Resource)”是指在网络上所能获取的文字、图像、声音和动画等资料。这些资料实际上都是以各种不同格式的“文件(File)”类型存在的，分散在各地的计算机主机中；而“定位器(Locator)”就是要指出这些资料的位置。 对于前面所说的地址“http:/”，它分为两部分：第一个部分“http:/”表示要访问的文件的类型，http:/表示访问的是超文本类型；第二部分是“”，表示主机的名字，
7、表明要访问的文件存放在名为www的服务器里，该服务器登记在域名之下。,1.1.2 超文本文件,超文本(hypertext)文件是与其他数据有关联的数据。例如，假设你正在读大百科全书中“树”这个条目，在文章的末尾有这样一个参考条目：“相关信息参见植物”。最末一行就是一个关联，从“树”到“植物”这个条目。 这只是一个简单例子，而WWW网则是基于一个复杂得多的超文本文件。尤其是在文件的任何地方都可能有关联，不仅是在末尾。假设你正在用Internet阅读“树”的超文本文件，每次提到一种新的树就有一个关联，每个关联都以某种方式标识，以显得突出。例如，有关联的字可能被加亮或者加了下划线，或者标注了一个数字
8、。如果依据关联查找，将会转到某种类型的树的条目。在主条目里还有其他条目的关联，如“雨林”或“木”。这些关联又引出完整的条目。或许还能找到相关的技术术语的关联，如“落叶科”和“针叶树”。如果循着这些关联就会找到其定义。 假设用户正在浏览如图1.1所示的“唐商网”网站主页，并希望查询“个性化网店服务”，在这个主页中的“个性化网店服务”是一个关联，即从“唐商网”网站主页到“个性化网店服务”网页；而且在这个关联网页中又有完整的条目，如果选择“零售版”，这也是一个关联，即从“个性化网店服务”网页到“零售版”网页。,1.1.3 超链接,超链接是带下划线或边框，并内嵌了Web地址(即URL)的文字或图形。单
9、击超链接，可以跳转到特定Web节点上的某一页。超链接很容易辨认，在Web节点上，超链接文字与其他文字颜色不同。 网页中的各种媒体和网页是通过超链接组织在一起的。超链接是由相对独立的信息单元(称为“锚”)和表达它们之间关系的链所组成的非线性结构。这种结构早期被称为超文本，随着多媒体技术的发展，表达信息的方式已经不限于文本，而是发展为多种媒体，因此这种结构又被称为超媒体(hypermedia)。 在一个网页中，例如图1.1所示“唐商网”网站主页中的“产品展示”以及其中的“客服中心”等文字都是锚，单击它们可以分别导向不同的页面。这些锚和单击以后打开的页面之间具有关联性，通过单击操作把它们连在一起，这
10、种关联性被称为“链”。 一个页面中的锚可以链接到其他页面，也可以链接到一幅图片、一个电子邮件地址、一个文本、一个程序或同一页面中其他特定位置。一组网页就是通过许多锚和链连接成一个整体。,1.2 分 析 网 页,1.2.1 网页整体结构分析 1.2.2 页面细节分析,1.2 分 析 网 页,人们上网冲浪看到的网页是千姿百态的，一般来说，一个网站或者具有特定主题的一组网页应该包括3种类型，即主页、索引页和内容页，每一类型的网页都具有自己的特点。本节将利用两个成熟网站和本书所列实例网站中的几个典型网页来分析不同网页的结构和内容。,1.2.1 网页整体结构分析,1. 主页 主页是指个人或单位的基本页面
11、，它是某一Web节点的起始点。主页是整个网站或者一组网页的入口。用户可以通过主页提供的线索访问其他页面的信息和资源。在浏览器URL栏中输入“http:/”，然后按Enter键，将在浏览器中看到如图1.2所示的网站主页。 这是“唐商网”网站的主页，在这里用户可以选择一个主题进入。例如，用户想要了解这个网站中的相关产品，单击页面中的“金商通”链接，就可以看到想要了解的内容。 像“唐商网”网站一样，很多网站的内容都是相当丰富多彩的，要用户记住每一个网页的地址是有些困难的，主页地址的一个重要作用就是方便记忆。浏览者只要记住主页的地址，就能访问这个网站内所有的内容。 一般来说，主页是一个网站中最重要的网
12、页，也是访问最频繁的网页。它是一个网站的标志，体现了整个网站的制作风格和性质。,1.2.1 网页整体结构分析,图 1.2 “唐商网”网站主页,1.2.1 网页整体结构分析,2. 索引页 索引页即网站中的导航页，为用户提供网站或者一组网页的索引，帮助用户较快地找到想要获取的信息。索引页的作用相当于一本书的目录。图书目录可以告诉读者这本书的内容和具体页数。同样，索引页可以告诉用户这个网站或这组网页的内容，并且通过单击索引页上的索引链接就能很快找到相应的具体内容。 在图1.3所示的“唐商网”网站“金商通”索引页中，上方也是一个索引(导航栏)，这是“唐商网”网站的一级索引。用户在浏览整个网站内容的过程
13、中，这一个区域窗口始终具有一级索引功能。例如，单击一级索引中的“虚拟主机”，可以进入网页。可以看出，“虚拟主机”网页中的导航栏和网页中的完全一样。同样，单击一级索引中的各项，相应的具体内容都会显示在页面中，而左边会出现相应的二级索引。 现在很多网站的索引页页面结构和例子中所示的网页基本相同，即上方是一级索引(网站导航栏)，左边是二级索引内容，右边是三级索引或二级索引各项的简单介绍。这样的网站结构方便用户在浏览网站时在不同的主题中穿梭。 一般大型的网站都会有索引页，而且有时候主页就是索引页。在前面所示的“唐商网”网站主页就是一个索引页。在索引页中列出了这个网站的一级主题，用户可以单击其中的各项进
14、入二级索引页。,1.2.1 网页整体结构分析,3. 内容页 内容页是表达网站中相应主题具体内容的网页，相当于书的正文。它提供了网站的具体内容，是网站的主体。在这些内容页中既可以用文本来表现网站每个主题的具体内容，也可以用各种图片、动画、影视片段或插件来表现具体内容。在图1.3所示的“唐商网”网站导航栏中单击“虚拟主机”，可以进入如图1.4所示的“虚拟主机”网页。 信息是有层次的，主页、索引页和内容页都是相对于同一层次信息而言的。例如，在图1.2所示的“唐商网”网站主页中单击“产品展示”，进入如图1.5所示的“唐商网”网站“产品展示”内容页。 在这个索引页中单击“首页”索引，就可以进入如图1.1
15、所示的“唐商网”的网页，这个网页既是“唐商网”的一个内容页，又是“唐商网”产品展示的主页。,1.2.1 网页整体结构分析,图 1.5 “唐商网”网站的“产品展示”页,1.2.2 页面细节分析,网站的网页上可以有各种媒体元素，包括文本、声音、图像、动画和数字视频等。是“唐商网”的主页。在这个网页中，包含了多种网页媒体元素。下面将详细介绍网页中包含的各个媒体元素及其在网页中的作用。 1. 文本 文本作为人类最重要的信息载体和交流工具，一直是网页内容最常用的表达手段。与其他网页元素相比，文字虽然不如其他网页元素那样很快引起用户的注意，但是却能更准确详尽地表达网页信息的内容和含义。在当今这个计算机技术
16、高度发达的时代，人们给网页中的文本赋予了更多的属性，用户可以按照自己的需求设置文本的字体、字号、颜色、底纹和边框等属性，通过不同的设置，突出显示重要的内容，并克服文字固有的缺点。 2. 图像 图像常用作网页中的题图、插图、背景图、图标和按钮。这些图像在网页中具有提供信息、展示作品、装饰网页、表达个人情调和风格的作用。在网页中经常使用GIF、JPEG(JPG)、PNG这3种图像文件格式。,1.2.2 页面细节分析,3. 动画 动画可以增加网页的动态效果，使网站更为生动有趣。动画可以表现事物的运动过程，在商业网站上也常用它来做广告看板。很多娱乐网站中都使用Flash动画来表现网页的内容，使网站内容
17、更富有动感和情趣。在网页中经常使用的动画格式包括GIF动画和Flash动画等。 4. 表单 在网站浏览中，很多交互行为是通过超链接来实现的，但是这种交互行为只是一个简单的方式，表单的出现使用户与网站的交互上升到一个新的高度。表单是网页中站点服务器处理的一组数据输入域，当用户单击按钮或图形提交表单后，数据就会传送到服务器。 表单处理程序是服务器上的一个程序，当用户传送一个表单时，也就是开始执行该程序。表单域是网页上的一个数据输入域，用户可以在其中输入文本或选择在表单域中提供的信息。 表单的形式有很多种，除了图1.6中所示的登录系统表单和搜索表单外，还可以是提供用户信息的表单，如图1.7所示为实例
18、网站的【表单咨询】表单页面。在表单中还可以包括单选按钮和复选框等表单元素。本书将在以后的相关章节中详细讲述这些内容。,1.2.2 页面细节分析,图 1.7 【表单咨询】表单,1.2.2 页面细节分析,5. 导航栏 导航栏是用户在规划好站点结构、开始设计制作网站主页时必须考虑的一项重要内容。导航栏的作用是要让用户在浏览网站时，不会因为“迷路”而终止对网站的访问，其作用和前面提到的索引页或一个页面的索引区域相当。导航栏与各种布局样式。 导航栏就是一组超链接，这组超链接可链接到本站点的主页及其他主要网页。 6. 表格和层 表格、布局表格和层是制作网页经常使用的网页布局工具。图1.8所示为网站中一个综
19、合利用各种网页布局工具制作的网页。表格是网页上的一行或多行单元格，用来组织网页的布局或有系统地布置数据。用户可以在表格的单元格中放置任何东西，包括文本、图形和表单，也可以是表格。 布局表格除了具有表格功能外，还可以通过它清楚地知道表格的大小和位置，方便网页页面布局。 为了使网页设计和制作更方便，在网页制作工具中也加入了层工具。用户可以通过制作多个层，任意布局网页的内容。另外，在层中可以放置在页面中移动动画的内容，然后为其添加移动轨迹。,1.2.2 页面细节分析,7. 框架 框架是网页制作的另外一个布局工具，利用框架布局的网页将显示窗口划分成多个独立的区域，如图1.8所示的网页就包含了3个框架。
20、 框架网页实际上包含了多个网页，一个是主框架网页，该网页定义了各框架的名称、位置及尺寸等，它在浏览器中不显示；此外，每一个框架实际上都是一个独立的网页。因此，在制作框架网页时，既可以直接将已经制作好的网页放入框架中，也可以为每个框架制作新的网页。 8. 其他网页元素 网页中除了集中以上基本元素之外，还可以加入声音和数字电视等多媒体元素。声音可以用作网页背景音乐、网页操作时的音效、供用户欣赏的歌曲和数字视频伴音等。数字视频可以用于点播新闻节目和教学节目。有的娱乐网站把电影、电视剧做成数字视频文件供用户下载观看，中央电视台还通过数字视频直播各种重要活动。这些多媒体元素不仅点缀了网页，使网页更丰富多
21、彩，而且增强了网站的娱乐性和实时性。,1.3 常用网页设计工具,1.3.1 网页设计软件Dreamweaver 8 1.3.2 网络图像处理软件Fireworks 8 1.3.3 网络动画制作软件Flash 8,1.3 常用网页设计工具,在网页中可以添加多种多样的元素，但如何制作网站独特的图片和动画，并把网页中各种内容合理地联系起来制作出具有个人风格的网页呢？首先，要选择一个方便、易学、易用的工具。下面将对网页制作工具做一个简单的介绍。,1.3.1 网页设计软件Dreamweaver 8,Dreamweaver是由美国Macromedia公司推出的“网页制作三剑客”中的网页编辑与制作软件，也是
22、目前较流行的网页编辑制作软件。 提起Macromedia公司，大家不会感到陌生，著名的多媒体开发软件Authorware和Director都是该公司开发的，同时目前在Internet上流行的矢量动画编辑软件Flash和针对专业网页图像设计的Fireworks也都是该公司的产品。Dreamweaver、Flash和Fireworks被Macromedia公司称为Dream_team (梦之队)，人们则把它们称为网页制作工具的“三剑客”，从这些可以看出Macromedia公司对它们的自信和市场的强烈反响。 Dreamweaver是一个所见即所得的网页编辑器，支持最新的DHTML和CSS标准。它采用
23、了多种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页制作过程变得容易简单。图1.9所示为正在编辑实例网站主页的Dreamweaver 8编辑窗口，从图中可以同时看到源代码编辑窗口和可视化编辑窗口，不管用户在哪一个窗口中修改，都能够立即反映到另一个窗口中，这个功能极大地方便了用户编辑网页时在两个窗口之间切换。另外，Dreamweaver 8不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制。它是一个集网页创作和站点管理于一身的网页编辑与制作工具。,1.3.1 网页设计软件Dreamweaver 8,图1.9 在Dreamweaver 8中编辑网页,1.3.2 网络图像处理
24、软件Fireworks 8,Fireworks也是目前较流行的网页图像制作工具。在使用Fireworks时，应该牢记它是基于屏幕的图像处理软件，而不是基于出版印刷的图像处理软件，因此其中可编辑的图像分辨率远远低于印刷图像所需要的分辨率。 Fireworks的工作目的是使图像在计算机屏幕上显示的效果最好，而不是使它打印出来显示效果最好，这是它同其他一些图像处理应用软件最大的区别。 Fireworks是专门针对Web设计的，因此它会对图像进行充分的优化。当然，利用Fireworks生成的图像，其色彩也完全符合Web标准，在设计时是什么颜色，在网页中显示图像时就是什么颜色。 用户只要将Dreamwe
25、aver的图像编辑器设为Fireworks，在Fireworks中制作的网页图像将会立即在Dreamweaver中更新。Fireworks最方便的地方是它不仅结合了Photoshop位图功能及CorelDRAW矢量图功能，而且提供了大量的网页图像模板供用户使用，甚至可以进行图像切割、图像映射、制作悬停按钮、制作翻转图像等，并直接生成HTML源代码，或嵌入到现有的网页中，或作为单独的网页。图1.10所示为在Fireworks 8中利用切片切割 图片。,1.3.2 网络图像处理软件Fireworks 8,图 1.10 在Fireworks 8中利用切片切割图片,1.3.3 网络动画制作软件Flas
26、h 8,Flash是动画制作软件，也是目前最流行的矢量动画制作软件。由它制作的矢量图形，只要用少量矢量数据就可以描述一个复杂的对象，因此占用的存储空间很小，非常适合在网络上传输。 Flash由交互矢量图形制作而成动画，运用它可以制作出栩栩如生动感十足的动画作品。图1.11所示为利用Flash 8制作动画作品的示意图。Flash动画与其他动画作品如3D Studio MAXAuthorware和Director等相比，不仅具有容量小的优点，还具有交互性强兼容性好等优点，甚至可以通过HTML语言嵌入网页之中，以增强网页的动感效果，许多专业的多媒体软件，如Authorware和Director等，都
27、可以引入Flash动画作品。 另外，用户也可以利用Flash 创作出交互性的小游戏、教学软件和屏幕保护程序等多媒体作品。这些都大大提高了Flash 在动画制作软件中的地位。Flash还支持位图、声音、渐变色和Alpha透明等功能。拥有这些功能，用户甚至可以建立一个全部由Flash 制作的 网站。 Flash由于界面简洁、易学易用，已经成为网页动画制作领域中最受欢迎的动画制作工具。该软件还附带了精美的动画实例和简明教程，即使是新手，也可以很快掌握其使用方法。,1.3.3 网络动画制作软件Flash 8,图 1.11 使用Flash 8制作动画,1.4 网站开发流程,1.4.1 站点规划 1.4.
28、2 设计站点的基本结构 1.4.3 设计并制作网页 1.4.4 搜集网页制作素材 1.4.5 实现交互性和动画 1.4.6 测试、发布和维护站点,1.4 网站开发流程,在确定了制作与编辑网页的工具后，应该了解一些网站开发制作的流程。多媒体网页的制作过程就是根据一定的应用主题，选择、编辑表现主题的多媒体元素和数据，然后把这些多媒体元素和数据按照一定的结构有机地组织在一起，并实现交互控制的过程。 图1.12所示为网站开发制作的流程图。,1.4 网站开发流程,图 1.12 网站开发制作的流程图,1.4 网站开发流程,一般来说，创建站点的第一步是对站点进行规划。需要了解站点的目的，确定它要提供的服务、
29、网页的内容等。在这一步里，用一张纸和一支笔就能很好地解决问题。有时，一个良好的构思比实际的技术实现更为重要，因为它直接决定站点质量和将来的访问流量。 第二步是设计站点的基本结构。利用Dreamweaver可以在本地计算机上构建出整个站点的框架，并在各个文件夹中合理地安置文档。如果已经构建了自己的站点，也可以利用Dreamweaver来编辑和更新现有的站点。Dreamweaver可以在站点窗口中以两种方式显示站点结构，一种是目录结构，另一种是站点地图。用户可以使用站点地图方式快速构建和查看站点原型。 第三步是搜集与网页制作有关的文本、图片、各种音频视频文件等资料，做好制作网页的各种素材准备工作。
30、 第四步开始具体的网页制作。一旦创建了本地站点，就可以在其中组织文档和数据。一般来说，文档就是在访问站点时可以浏览的网页。文档中可能包含其他类型的数据，如文本、图像、声音和动画等。网站中各个网页的制作完成以后，需要对网页中各种网页元素添加必要的链接，使整个网站具有整体性和交互性。,1.4.1 站点规划,网站可以看作是一系列文档的组合，这些文档通过各种链接关联起来，可能拥有相似的属性，如描述的主体具有相关性，采用的设计彼此相似或实现相同的目的等；也可能只是关系的链接，利用浏览器，就可以从一个文档跳转到另一个文档，实现对整个网站的浏览。 不论是正规的商业网站还是个人网站，要想把网页制作得丰富多彩，
31、吸引大量用户前来访问，网站规划设计都是至关重要的。除非只设计一两个网页，否则网页制作应该按网站来考虑，首先对网站内容进行规划设计。 在站点规划中主要做的工作是网站内容的设计，也就是对网站主题、具体内容及表达内容所用的媒体的设计。 创建新网站的最佳方法是先建立原型系统，再进行详细设计，最后正式实施。进行详细设计时，最重要的是确定网站的运行模式。是宣传性站点或者随意性很强的个人站点，还是通过广告、销售等方式获利的站点，设计的方式和内容有很大的区别。 对于商业网站，必须充分考虑财力、人力、计算机数量、网络连接方式、系统的经济效益、网站验证和用户反馈等诸多方面的问题。从长远角度考虑，必须准确地知道网站
32、的目标和系统的资金投入。,1.4.1 站点规划,影响网站成功的因素主要有网站结构的合理性和直观性，多媒体信息的实效性和网站维护的开销等。成功网站的最大秘诀在于让用户感到网站对他们非常有用，因此，网站内容开发对于网站建设至关重要。进行网站内容开发的要点包括： HTML文档的效果由其自身的质量和浏览器解释HTML的方法决定。由于不同浏览器的解释方法不尽相同，所以在网页设计时要充分考虑到这一点，让所有浏览器都能够正常浏览。 网站信息的组织没有任何简单快捷的方法，吸引用户的关键在于总体结构的层次分明。应该尽量避免形成复杂的网状结构。网状结构不仅不利于用户查找感兴趣的内容，而且在信息不断增多后还会使维护
33、工作非常困难。 图像、声音和视频信息能够比普通文本提供更丰富和更直接的信息，产生更大的吸引力，但文本可提供较快的浏览速度。因此，图像和多媒体信息的使用要适中，减少文件数量和文件大小是必要的。 对于任何网站，每一个网页或主页都是非常重要的，因为用户的第一印象往往是一个网站的主页，好印象能够吸引用户再次光临这个网站。 网站内容应该是动态的，定时进行修改和更新，以便使网站紧跟市场潮流。在主页上注明更新日期及URL，这对于经常访问的用户非常有用。 网页中应该提供一些联机帮助功能。比如输入查询关键字就可以提供一些简单的例子，或者列出常用的关键字。千万不能让用户不知所措。 网页的文本内容应简明、通俗易懂。
34、所有内容都要针对设计目标而写，不要文不对题。文字要正确，尽量减少语法错误和错别字。,1.4.2 设计站点的基本结构,下面所举的实例网站是一个关于图书的网站，网站名为“网上书苑”，如图1.8所示，包括“文学作品”、“科普作品”、“儿童读物”、“社会科学”、“宗教书籍”和“考试用书”6个主题。在这6个主题中还包含其他一些相关的内容。 网站主页设计为一个索引页，每一个网页设计一个索引(导航栏)，以便浏览者随时跳转到想要浏览的主题。在各个主题页中还应该设计一个索引框架，以便在各主题的相关内容中浏览。在这些网页中主要以文本为主。另外，还需要添加一个用户信息反馈的网页，以便收集用户意见和联系用户。 网站的
35、基本结构设计主要是设计各项内容之间的层次关系和链接跳转关系。在网站内容设计的基础上，继续对“网上书苑”网站进行基本结构设计。图1.13所示为网站的基本结构示意图。,1.4.2 设计站点的基本结构,图 1.13 “网上书苑”网站基本结构示意图,1.4.3 设计并制作网页,网站基本结构设计结束后，就可以对每一个网页进行详细的设计，即网页页面设计。设计网页页面需要大致确定每个网页的布局和构图结构，如网站徽标、图像、动画、导航栏、框架、文本的布局设计、页面背景图像和背景音乐的版面设计等。 图1.14所示为“网上书苑”网站主页的页面设计示意图，这是根据网站内容规划和基本结构设计的。 主页主要是利用布局表
36、格来安排网页中的各种元素，并选择1024768分辨率的浏览窗口作为网站网页的设计大小。 图1.15所示为“网上书苑”网站“文学作品”网页的页面设计示意图，也是根据网站内容规划和基本结构来设计的。其中，布局主要使用框架和表格。 其他同一层网页的页面设计基本和“文学作品”网页的相同，只是按钮、图像和文本有所改变，而且每个网页页面布局的方法有一些区别，但不外乎包括布局模式、表格、层和框架。,1.4.3 设计并制作网页,第三层和第四层页面主要以文本为主，用户可以自己设计这些网页的页面，这里不再详细讲述。 网站各个网页的页面设计好以后，就可以着手制作网站的各个网页。需要说明的是，网站内容设计、基本结构设
37、计和各个网页页面设计的方案只是暂定，也就是说是打了一个草稿，可以起到指导作用。在网页制作过程中，随时可以根据需要对原有设计方案进行补充和修改。 网站制作的各项准备工作都完成后，就可以按照网站设计的基本结构和页面结构，开始进行网页具体制作。本书以后的章节将介绍利用Dreamweaver 8具体制作网站中的各个网页，图1.16所示为在Dreamweaver 8中进行实例网站“文学作品”网页的制作。,1.4.3 设计并制作网页,图 1.14 “网上书苑”网站主页的页面设计,1.4.3 设计并制作网页,图 1.15 “网上书苑”网站“文学作品”网页的页面设计,1.4.3 设计并制作网页,图 1.16
38、在Dreamweaver 8 中制作“文学作品”网页,1.4.4 搜集网页制作素材,网站的内容和结构设计好以后，就可以根据网站内容和基本结构设计的要求，进行素材的准备工作和网站编辑工作。具体说，就是要搜集与网页制作有关的文本、图像、音频和视频等资料，也可以从网上下载有用的内容和素材，并且根据要求进行图像处理、动画制作、音效生成和视频编辑等工作。 本书以后的章节将介绍利用各种工具进行图像处理和动画制作，至于音效和视频的生成和编辑，感兴趣的用户可以参考有关书籍。图1.17所示为在Fireworks 8中编辑网站徽标。,1.4.4 搜集网页制作素材,图 1.17 在Fireworks 8中进行网站徽
39、标的图像处理,1.4.5 实现交互性和动画,网站交互性是指网站中的网页会根据用户的要求和选择进行动态改变和响应，这样浏览器可作为客户端界面，这将是今后Web发展的大趋势。不仅如此，网站交互性还可以实现“因时因人而变”功能，即在不同的时间、不同的人访问同一网址时会产生不同的页面。 网站中各个网页制作完成以后，需要对网页中的各个锚(超链接的端点)添加超链接，并正确选择链接指向的目标，然后为各种表单和跳转菜单设置和调整跳转和交互等各种功能，以形成一个有机联系的网站。 如果需要为网页添加一些动画和行为，还需要在Dreamweaver的【时间线】面板和【行为】面板中为对象设置轨迹、事件和动作。 对于个人
40、网站来说，充分运用HTML技术足以令网页栩栩如生，动感十足。然而对于建立商业网站的企业而言，仅仅拥有HTML是远远不够的。因为仅仅发生在客户浏览器端的动态效果是无法满足商业网站大量的信息查询、客户咨询和资源交互等“动态”需求的。因此作为商业网站的设计者，要必须设计出更具实用性和交互性的“动态”网站。本书将在以后的章节中详细介绍具有交互性的“动态”网站的工具和设计方法。,1.4.6 测试、发布和维护站点,网站设计制作完毕，在发布到Internet上之前，必须要对它进行测试，这样才能保证发布到远程服务器上时不会出现问题。测试是在浏览器中进行的，测试的内容包括浏览器的兼容性，文档之间的链接正确与否等
41、方面。 在浏览器中测试网页的方法是：在Dreamweaver 8窗口中选择【文件】|【在浏览器中预览】命令，然后选择一个浏览器来预览文档。Dreamweaver 8会在安装时自动检测用户系统中所安装的浏览器，如果用户想编辑浏览器列表，单击【编辑浏览器列表】命令，在出现的【首选参数】对话框中选择【在浏览器中预览】选项。,1.4.6 测试、发布和维护站点,虽然所有的网页都遵循HTML 3.2标准，但不同软件开发商的浏览器之间有细微的差别，这些细微的差别往往会导致使用不同的浏览器浏览同一网页时出现完全不同的效果，因此用户在发布网页之前必须要对它进行兼容性测试，以保证它在用户所期望的浏览器中能够正确显
42、示。 网页制作完后，就要把它上传至连接Internet的服务器上，让全世界都能看到。这就要找一个主页的存放空间。一般的ISP都提供相应的服务，但许多都以E-mail的形式寄给网管，由网管帮用户传上去。网页的上传大致分为3种形式：E-mail、FTP、www，分别使用相应的软件，如以FTP上传使用CuteFTP软件。用户的主页上传完毕后，也就在Internet上拥有了自己的一席之地。 维护网站，也就是管理网站，主要涉及网站内文件的管理、文件的上传和下载、网站信息更新和用户信息的接收等。要想保持网页的浏览人数，就要不停地更新自己的主页，增加其内容，给人一种新鲜感。平时上网时多搜集资料，多听听别人的
43、意见，每隔一段时间更新版面。只有这样，网页才能不断地为网友服务。,1.5 认识Dreamweaver 8,1.5.1 Dreamweaver 8的新特性 1.5.2 熟悉Dreamweaver 8的工作环境 1.5.3 控制浮动面板,1.5 认识Dreamweaver 8,Dreamweaver提供了强大的设计工具，在不用书写任何代码的情况下，就能够快速创建各种极具动态HTML特性的网页，如动画和分层等；利用目标浏览器检查特性，可以创建兼容性极好的网页，以适用于各种平台和各种浏览器；利用Roundtrip HTML技术，可以精确控制Dreamweaver生产的网页源代码。例如，在可视编辑器中进
44、行编辑时，可以在HTML查看器中同步看到Dreamweaver生成的源代码，从而杜绝了“盲人摸象”的弊病。在编辑由其他网页创作工具生成的网页时，Dreamweaver会尊重其他工具所生成的源代码，不会任意修改它，当然，如果需要，它仍然可以帮助用户“净化”其他工具所生成的垃圾代码。Dreamweaver是完全可以定制的，用户可以创建自己的对象和命令，修改菜单和快捷键，甚至可以通过自己书写JavaScript代码来为Dreamweaver创建新的【行为】面版和【属性】面板，以增强其本身的能力。,1.5.1 Dreamweaver 8的新特性,在对Macromedia公司推出的网页编辑工具Dream
45、weaver做了简要的介绍后，下面来了解一下Dreamweaver 8与其他网页编辑工具以及Dreamweaver前几种版本相比，在功能上具有哪些新特性，而这些新特性又能给网页编辑带来哪些便利之处和特殊效果。 1. 利用 XML 数据进行可视化创作 使用功能强大的可视化工具，可快速利用 XML 将源集成到工作中，并揭开 XML 到 HTML 转换的神秘面纱。使用简单的拖放工作流程，可将基于 XML 的数据(如 RSS 源)集成到 Web 页中。使用改善的 XML 和 XSLT 代码提示功能，可跳转到【代码】视图来自定义转换。 2. 新的标准 CSS 面板 可以通过新的标准 CSS 面板集中学习
46、、了解和使用以可视化方式应用于页面的 CSS 样式。全部 CSS 功能已合并到一个面板中，并已得到增强，可以更轻松、更有效率地使用 CSS 样式。使用新的界面可以更方便地看到应用于具体元素的样式层叠，从而能够轻松地确定在何处定义了属性。,1.5.1 Dreamweaver 8的新特性,3. CSS 布局可视化 在设计时应用可视化助理来描画 CSS 布局边框或为 CSS 布局加上颜色。应用可视化助理可揭示出复杂的嵌套方案，并改善所选内容。单击 CSS 布局可看到十分有用的工具提示，这些提示有助于了解设计的控制元素。 4. 【样式呈现】工具栏 利用新的 CSS 媒体类型支持，可按照与用户所看到内容
47、相同的方式查看内容，而不管传送机制如何。使用【样式呈现】工具栏可切换到【设计】视图，以查看它在印刷品、手持设备或屏幕上的显示方式。 5. 改善的 CSS 呈现功能 【设计】视图的准确性有了显著改善，从而能够在大多数浏览器中呈现复杂的 CSS 布局。Dreamweaver 现在完全支持高级 CSS 技术，如溢出、伪元素和表单元素。,1.5.1 Dreamweaver 8的新特性,6. 支持 WCAG/W3C 优先级 2 检查点 除了Section 508规则和 WCAG 优先级 1 检查点的集成辅助功能评估工具外，Dreamweaver 现在还利用包括 WCAG 优先级 2 检查点在内的升级评估
48、工具，同时支持 CSS 和辅助功能。 7. 改进的 WebDAV Dreamweaver 8 中的 WebDAV 现在支持为安全文件传送使用摘要身份验证和 SSL，并且连接也有所改善，可连接到更多的服务器。 8. 后台文件传输 在 Dreamweaver 8 将文件上载到服务器时继续工作。 9. 缩放 使用缩放功能可以更好地控制设计。放大并检查图像，或使用复杂的嵌套表格布局；缩小可预览页面的显示方式。,1.5.1 Dreamweaver 8的新特性,10. 辅助线 使用辅助线来测量页面布局，将页面布局和页面模型加以比较，精度可达到像素级。可视化反馈有助于准确地测量距离，并且支持智能对齐。 11
49、. 【编码】工具栏 新的【编码】工具栏在【代码】视图一侧的工具栏中提供了用于常见编码功能的按钮。 12. 代码折叠 通过隐藏和展开代码块，重点显示用户想要查看的代码。 13. 工作区布局 自定义和保存工作区配置。Dreamweaver 8 自带了针对设计人员和编码人员的需求定制的4种不同配置。也可以构建自定义工作区。 14. 用于 Mac 的文档选项卡 Mac 上新的文档选项卡可帮助简化用户界面，并使选择文档变得更加容易。,1.5.1 Dreamweaver 8的新特性,15. 新的起始页面 新的布局和设计使用户能够快速地创建站点。 16. 改进的站点同步和存回/取出功能 更可靠并且更有把握地管理站点。改进的站点同步功能有助于确保所使用的文件是最新版本。利用改进的存回/取出功能，可防止意外覆盖其他人的工作。 17. 比较文件 快速比较文件以确定变更之处。可以比较两个本地文件、本地计算机上的文件和远程计算机上的文件，或者远程计算机上的两个文件。在 Macintosh 和 Windows 平台上，可将用户最常用的文件比较工具和 Dreamweaver 结合使用。 18. 选择性粘贴 利用 Dreamweaver 中新的粘贴选项，可以保留在 Microsoft Word 中创建的所有源格式设置，也可以只粘贴文本。,
