《Dreamweaver CS6网页设计与制作》第1章网站设计基础 刘敏娜 主编

1、1 网页设计授课教师:2n主要学习内容 网站设计基础知识 Dreamweaver、Fireworks html语言n如何学习这门课程 多实践，多动手 多参考优秀网站：如网易，sohu31.1网页设计相关知识nwwwn网页的概念n超文本(Hypertext) n网站的概念n网页浏览原理n网页组成要素n网页编辑工具n网页布局n网页的页面与版面4WWWWWW (World Wide Web)并非某种特殊的计算机网络。万维网是一个大规模的、联机式的信息储藏所，英文简称为Web。下图说明了万维网提供分布式服务的特点。5WWW6WWWn万维网是一个分布式的(hypermedia)系统，它是(hyperte

2、xt)系统的扩充。n万维网以客户服务器方式工作。，。在一个客户程序主窗口上显示出的万维网文档称为(page)。7网页的概念网页的概念n网页网页(Web Page)(Web Page)：是通过WWW发布的包含有文本、图片、声音、动画等多媒体信息的页面，它是网站最基本的组成单位。众多的网页有机地集合在一起就组成了网站。n网页的主要类型 HTML(HyperText Markup Language)全称超文本标记语言，利用标记（tag）来描述网页的字体、大小、颜色及页面布局的语言，使用任何的文本编辑器都可以对它进行编辑，与VB、C+等编程语言有着本质上的区别。 ASP (Active Server

3、Pages )中文名为动态服务器主页 ,它是一种应用程序环境，可以利用 VBscript 或 Java Script 语言来设计，主要用于网络数据库的查询与管理。 JSP(Java Server Page)JSP 与 ASP 非常相似。不同之处之一在于 ASP 的编程语言是 VBScript 之类的脚本语言， 而 JSP 使用的Java 。8静态网页与动态网页 n静态网页 纯粹HTML格式的网页 每个网页都有一个固定的URL，网页URL以.htm、.html、.shtml等常见形式为后缀，且不含有“?” 也可以出现各种动态效果n动态网页以数据库技术为基础，随不同客户、不同时间，返回不同的网页

4、后缀通常是asp、aspx、jsp、php等，并且通常在URL中带有”？” 9静态网页http:/ 超文本超文本(Hypertext)(Hypertext)：具有超级链接功能的文本文件叫超文本。超文本文件中的某些字、符号或短语起着“热链路”（Hotlink）的作用，在显示出来时其字体或颜色发生变化或者标有下横线、以区别于一般的正文.13网站的概念网站的概念 网站网站：WWW服务器上相互链接的一系列网页组成一个网站（Web Site）。网站是WWW上的一个结点。如果输入地址时仅指定WWW服务器域名或IP地址，而不加路径信息，则将打开网站默认的首页首页（Home Page），也称为主页。首页是一个

5、网站中最重要的网页，通常包含最重要的信息以及指向各分栏目的超链接。14网页浏览原理网页浏览原理其工作步骤如下：其工作步骤如下： （1）用户启动客户端浏览器，在浏览器地址栏输入想要访问网页的URL，浏览器软件通过http协议向URL地址所在的Web服务器发出服务请求。 （2）服务器根据浏览器软件送来的请求，把URL地址转化成页面所在服务器上的文件路径，找出相应的网页文件。 （3）当网页中仅包含html文档，服务器直接使用http协议将该文档发送到客户端；如果html文档中还包含有JavaScript或VbScript脚本程序代码，这些代码也将随同html文档一起下载；如果网页中还嵌套有CGI或A

6、SP程序，这些程序将由服务器执行，并将运行结果发送给客户端。 （4）浏览器解释html文档，并将结果在客户端浏览器上显示。 15网页包含的元素n文本文本n图像图像n动画动画n音频音频n视频视频16文本文本是非常重要的网页元素之一，是网页中信息的主要载体。文本是非常重要的网页元素之一，是网页中信息的主要载体。文字、字母、数字和符号等都可以称为文本。与漂亮的图像、优文字、字母、数字和符号等都可以称为文本。与漂亮的图像、优美的动画、悦耳的声音和有声有色的视频相比，文本在网页中似美的动画、悦耳的声音和有声有色的视频相比，文本在网页中似乎是最普通不过了，但文本却是用户创建网页应该考虑的关键因乎是最普通不

7、过了，但文本却是用户创建网页应该考虑的关键因素，因为文本是表述信息的最完备的方式，绝大多数信息都是通素，因为文本是表述信息的最完备的方式，绝大多数信息都是通过文本传递给浏览者的。过文本传递给浏览者的。17图像图像是站点中比较图像是站点中比较重要重要的元素，网页的设计和创意都离不开图像的元素，网页的设计和创意都离不开图像的使用和处理。一个欣赏性较好的站点应有的使用和处理。一个欣赏性较好的站点应有清新悦目清新悦目的画面，能够的画面，能够吸吸引引读者有兴趣浏览下去。同时，图像可以传递文字所无法表达的特定读者有兴趣浏览下去。同时，图像可以传递文字所无法表达的特定的信息，在的信息，在Web上的大多数网页

8、都使用图像来图文并茂地对内容加以上的大多数网页都使用图像来图文并茂地对内容加以介绍。网页中的图像既有简单的彩色背景，也有实物的真实照片。总介绍。网页中的图像既有简单的彩色背景，也有实物的真实照片。总之，根据不同的需要，配备不同的图像加以说明，但从做网页的角度之，根据不同的需要，配备不同的图像加以说明，但从做网页的角度来讲，网页上的图像可以分为两大类。来讲，网页上的图像可以分为两大类。一类纯粹是网页本身的需要，起一类纯粹是网页本身的需要，起增添网页色彩的作用，它并不传增添网页色彩的作用，它并不传给读者特定的信息，如某些网页给读者特定的信息，如某些网页背景图像、表格背景图像等。另背景图像、表格背景

9、图像等。另一类是行文的需要，配合文本向一类是行文的需要，配合文本向读者传递信息，这就是所说的图读者传递信息，这就是所说的图文并茂，或者利用图像单独向读文并茂，或者利用图像单独向读者传递信息，如图片新闻。者传递信息，如图片新闻。18动画动画是现代网站的重要特色，是网页制作技术的重要组成部动画是现代网站的重要特色，是网页制作技术的重要组成部分。在网页中，常见的动画类型有分。在网页中，常见的动画类型有GIF动画动画、Flash动画动画等，使等，使用用编程编程的方法也可以制作动画。目前，网页中最流行的动画是的方法也可以制作动画。目前，网页中最流行的动画是Flash动画。动画。Flash动画一般具有动画

10、一般具有文件容量小文件容量小、传输速度快传输速度快、不失不失真真、边下载边播放边下载边播放的特点，还具有交互性优势。的特点，还具有交互性优势。Flash动画具有崭动画具有崭新的视觉效果，已经成为一种流行的艺术表现形式。新的视觉效果，已经成为一种流行的艺术表现形式。19音频MP3具有压缩程度高、音质好的特点，是目前最为流行的一种音乐具有压缩程度高、音质好的特点，是目前最为流行的一种音乐文件，在网上有很多可以在线收听或下载文件，在网上有很多可以在线收听或下载MP3的站点。的站点。ASF和和WMA都是都是Microsoft公司针对公司针对Real公司开发的新一代网上流式公司开发的新一代网上流式数字音

11、频压缩技术，同时兼顾了保真度和网络传输需求，所以具有数字音频压缩技术，同时兼顾了保真度和网络传输需求，所以具有一定的先进性。一定的先进性。WAV是是Microsoft Windows系统提供的音频格式，由于系统提供的音频格式，由于Windows本身本身的影响力，这个格式已经成为了事实上的通用音频格式。的影响力，这个格式已经成为了事实上的通用音频格式。real格式是格式是RealNetworks公司网络音频和视频解决方案，具有很高的公司网络音频和视频解决方案，具有很高的压缩比，使用流式（压缩比，使用流式（streaming）播放媒体技术，从而使人们能够在）播放媒体技术，从而使人们能够在网上实时收

12、听音频及收看视频。网上实时收听音频及收看视频。20音频21视频在网页中添加视频文件可以大大在网页中添加视频文件可以大大增加站点的可读性增加站点的可读性，已成为站点多媒，已成为站点多媒体特性的重要体现。现在，能够在网络上运行的视频文件类型也日益体特性的重要体现。现在，能够在网络上运行的视频文件类型也日益丰富。丰富。AVI（.AVI）是音频视频交错（）是音频视频交错（Audio Video Interleaved）的英文缩写，）的英文缩写，它是它是Microsoft公司开发的一种符合公司开发的一种符合RIFF文件规范的数字音频与视频文件规范的数字音频与视频文件格式。文件格式。MPEG文件（文件（.

13、MPEG/.MPG/.DAT）是运动图像压缩算法的国际标准，）是运动图像压缩算法的国际标准，它采用有损压缩方法减少运动图像中的冗余信息，同时保证每秒它采用有损压缩方法减少运动图像中的冗余信息，同时保证每秒30帧帧的图像动态刷新率，已被几乎所有的计算机平台共同支持。的图像动态刷新率，已被几乎所有的计算机平台共同支持。22了解网页制作工具常用的网页编辑软件有常用的网页编辑软件有FrontPage和和Dreamweaver等。等。Dreamweaver因其功能全面、操作灵活、专业性强，而因其功能全面、操作灵活、专业性强，而受到网页制作人员的青睐。受到网页制作人员的青睐。在制作网页时，经常使用的图像处

14、理软件有在制作网页时，经常使用的图像处理软件有Fireworks和和Photoshop。Flash是目前最常用的网页动画制作软件。用是目前最常用的网页动画制作软件。用Flash制制作的动画文件小，利于网上发布，而且还能制作出具有交作的动画文件小，利于网上发布，而且还能制作出具有交互功能的动画，并能很方便地与网页建立链接。互功能的动画，并能很方便地与网页建立链接。23网页布局类型 国字型国字型 匡字型匡字型 三字型三字型 川字型川字型 其他类型其他类型24国字型国字型也称同字型，即最上面是网站的标题以及横幅广告条，接下国字型也称同字型，即最上面是网站的标题以及横幅广告条，接下来是网站的主要内容，

15、最左侧和最右侧分列一些小条目内容，中间是来是网站的主要内容，最左侧和最右侧分列一些小条目内容，中间是主要部分，最下面是网站的一些基本信息、联系方式、版权声明等。主要部分，最下面是网站的一些基本信息、联系方式、版权声明等。这是使用最多的一种结构类型。这是使用最多的一种结构类型。25匡字型匡字型也称拐角形，这种结构与国字型结构很相近，上面是标题及匡字型也称拐角形，这种结构与国字型结构很相近，上面是标题及广告横幅，下面左侧是一窄列的链接等，右侧是很宽的正文，下面也广告横幅，下面左侧是一窄列的链接等，右侧是很宽的正文，下面也是一些网站的辅助信息。是一些网站的辅助信息。26三字型这是一种比较简洁的布局类

16、型，其页面在横向上被分隔为这是一种比较简洁的布局类型，其页面在横向上被分隔为3部分，部分，上部和下部放置一些标志、导航条、广告条和版权信息等，中间是正上部和下部放置一些标志、导航条、广告条和版权信息等，中间是正文内容。文内容。27川字型整个页面在垂直方向上被分为整个页面在垂直方向上被分为3列，内容按栏目分布在这列，内容按栏目分布在这3列中，最列中，最大限度地突出栏目的索引功能。大限度地突出栏目的索引功能。28其他类型常见的网页布局类型还包括标题文本型、框架型、封面型、常见的网页布局类型还包括标题文本型、框架型、封面型、Flash型等。型等。标题文本型即页面内容以标题文本型即页面内容以文本文本为

17、主，最上面一般是标题，下面是正文的为主，最上面一般是标题，下面是正文的格式。格式。框架型布局通常分为框架型布局通常分为左右框架型左右框架型、上下框架型和综合框架型。由于兼容、上下框架型和综合框架型。由于兼容性和美观等原因，专业设计人员很少采用这种结构。性和美观等原因，专业设计人员很少采用这种结构。封面型基本出现在一些网站的首页，大部分由一些封面型基本出现在一些网站的首页，大部分由一些精美的平面设计和动精美的平面设计和动画画组合而成，在页面中放几个简单的链接或者仅是一个组合而成，在页面中放几个简单的链接或者仅是一个“进入进入”的链接，的链接，甚至直接在首页的图片上做链接而没有任何提示。这种类型的

18、网页布局大甚至直接在首页的图片上做链接而没有任何提示。这种类型的网页布局大多用于企业网站或个人网站。多用于企业网站或个人网站。Flash型是指整个网页就是一个型是指整个网页就是一个Flash动画动画，这是一种比较新潮的布局方，这是一种比较新潮的布局方式。其实，这种布局与封面型在结构上是类似的，无非使用了式。其实，这种布局与封面型在结构上是类似的，无非使用了Flash技术。技术。2930网页页面与版块 布局的设计通常需要注意网站的页面大小以及各种版块的安排1网页页面大小网页页面大小n 合理地设置页面尺寸，可以避免用户频繁地拖动滚动条。目前国内的上网者习惯使用是微软公司的Internet Expl

19、orer浏览器（简称IE浏览器）。 n 在屏幕分辨率为1024768时，不同版本的IE浏览器的屏幕大小是不相同的。以下是各版本IE浏览器页面尺寸表。30IE浏览器版本浏览器版本屏幕宽度屏幕宽度屏幕高度屏幕高度IE6.01003px600pxIE7.0（菜单栏显示状态）（菜单栏显示状态）1003px594pxIE7.0（菜单栏隐藏状态）（菜单栏隐藏状态）1003px620pxIE8.0（菜单栏隐藏状态）（菜单栏隐藏状态）1003px626pxIE8.0（菜单栏显示状态）（菜单栏显示状态）1003px598px31网页页面与版块2网页版块构成网页版块构成 网页是由各种版块构成的。Internet中

20、的网页内容各异。然而多数网页都是由一些基本的板块组成的，包括Logo、导航条、Banner、内容版块、版尾等。3132网页版面布局技术分析n表格布局：简单但是下载速度慢n框架布局：兼容性不好nCSS技术：可以精准定位元素但有些复杂33网页版面布局原则n主次分明，中心突出n大小搭配，相互呼应n图文并茂，相得意彰34版面布局的步骤n草案：在白纸上将景象画上去n粗略布局：将功能模块安置到页面上n定案：将粗略布局精确化，具体化35LogoLogo是企业或网站的标志，其作用是标识网站的名称，并为用户提供识别的标记。绝大多数网站都有一个独特的Logo。Logo对于网站而言是唯一的。3536Logo的大小

21、一、120120，这种广告规格适用于产品或新闻照片展示。 二、12060，这种广告规格主要用于做LOGO使用。 三、12090，主要应用于产品演示或大型LOGO。 四、125125，这种规格适于表现照片效果的图像广告。 五、23460，这种规格适用于框架或左右形式主页的广告链接。 六、39272，主要用于有较多图片展示的广告条，用于页眉或页脚。 七、46860，应用最为广泛的广告条尺寸，用于页眉或页脚。 八、8831，主要用于网页链接，或网站小型LOGO。 371.2.2 导航条导航条是网站的重要组成元素。其可以索引网站内容，帮助用户快速访问网站功能。导航条内包含的是网站功能的按钮或链接，其项

22、目的数量不宜过多。通常同级别的项目数量以3到7个为宜。一个网站往往可包含多个级别的导航条，例如主导航条、登录导航条、友情链接导航条等。有时导航条也会与banner结合使用，通过图像增强导航条的表现力。3738BannernBanner为网页中的广告条，又被称作旗帜、网幅或横幅，是一种可以由文本文本、图像图像和动画动画相结合而成的网页栏目。n国际广告联盟的“标准与管理委员会”联合广告支持信息和娱乐联合会等国际组织，推出了一系列网络广告宣传物的标准尺寸，被称作“IAC/CASIE”标准，共包括7种标准的Banner尺寸。n在设计Banner时，既可遵循以上标准，以方便网站的广告用户设计广告。同时，

23、也可灵活根据网页的版式对其尺寸进行调节，以符合网页整体的风格和布局。38名称名称Banner面积面积摩天大楼形摩天大楼形120px600px中级长方形中级长方形300px250px正方形弹出正方形弹出250px250px宽摩天大楼宽摩天大楼160px600px大长方形大长方形336px280px长方形长方形180px150px竖长方形竖长方形240px400px39内容版块n网页的内容版块通常是网页的主体部分。这一版块可以包含各种文本、图像、动画、超链接等。n在设计内容栏时，用户可以先独立地设计设计多个子子栏栏，然后再将这些子栏拼接拼接在一起，形成整体的效果。同时，还可以对子栏进行优化排列，提

24、高用户的体验。如网页的内容较少，则还可以使用单独的内容栏，通过大量的图像使网页更加美观。3940版尾版块版尾，顾名思义是网页页面最底端版块最底端版块，通常放置网站的版权信息版权信息。版权信息的书写需要遵循国际通行的规范国际通行的规范，其格式如下所示。Copyright dates by author/ownernCopyright 可以由copyright符号“”代替ndates可以是具体的年份，也可以是由年份表现的的时间段nauthor/owner为作者或所有者，可为个人名，也可为企业名。n在作者/所有者之后，可以添加“All Rights Reserved.”表示版权所有。但“All Ri

25、ghts Reserved.”的大小写和最后英文句号”.” 不可省略。如需要添加中文的“版权所有”，应写在英文版权所有之后。n例如，清华大学网站的版尾信息为“2010 Tsinghua University. All Rights Reserved.”411.2网站的规划:实例n确定建立网站的目标n确定网站的类型n确定网站主体内容n确定网站风格n确定网页系统树n确定网页内容n定制数据库n考虑网络的技术问题42你建网站的目的是什么？n产品、服务的销售n建立一种公益性服务n为一种思想、观念、事业作宣传n使自己的业务走向世界43网站的类型是什么n信息：全国性媒体，地方性媒体，商业信息，地方信息n商务

26、：公司站点，销售站点n组织：法律法规，教育站点n专题：旅游，财经，体育，科学，食品n个人：个人展台44网站用户的确定n网站的用户是谁？n用户的兴趣是什么？他们需要从网站中得到什么信息？45你的主要用户是谁？n女性n男性n青少年n儿童n学生n所有人n其它46网站主题是什么n主题选材应该小而精。n选题不要太滥，目标定位不要太高。47网站的风格是什么？n是活泼的如迪斯尼n平易近人的如网易n严肃的如IBM48树立网站风格n风格是建立在有价值内容之上n需要彻底清楚希望网站给人的印象是什么n努力加强印象49有关风格设计的建议n使网站的LOGO尽可能出现在每个页面上n突出网站的标准色彩n使用同一的语气和人称

27、n使用同一的图片处理效果50网页系统树n确定网站的栏目以后，需要绘制出网站的结构图。n通过系统树可以方便对网页进行维护，规划和设计。51网页内容n进一步的细化，明确网页中包含的文字，图片，网页的链接52网络的技术问题n带宽：n浏览器与分辨率：531.3网站的设计n网站设计的基本原则n网站设计技巧n设计主页应避免的问题541.3.1网站设计的基本原则n内容明确：围绕网站功能n快速下载：网页不大于60kBn点击规则:浏览信息的点击次数不超过三次n网站介绍：告诉浏览者网站提供什么信息n慎用特殊字体和颜色：不同系统平台产生不同效果n少用闪烁：喧宾夺主n少用框架：55n图像的应用：不要使用跨幅整个屏幕的

28、图像n慎用声音：影响下载速度n空白万岁：吸引访问者的注意力561.3.2 网站设计技巧1.定位网站的CI形象 LOGO标志：不宜过大 标准色彩：能体现网站形象的色彩（不超过3种）2.确定网站的整体风格（标志，色彩，版面布局，浏览方式，交互性，文字，语气，价值）3.确定网站的目录结构和命名规则（*）4.确定网站的链接结构5.首页的设计57网站首页的设计n确定网站首页上实现的主要内容和功能n设计网页的版面：先绘制出，再实现581.3.3 设计主页应避免的问题没有联系地址缺乏导航功能大量使用表格大量使用动态图像站内内容不及时更新59网站发布发布站点前，必须确定网页的存储空间。如果自发布站点前，必须确

29、定网页的存储空间。如果自己有服务器，配置好后，直接发布到上面即可。己有服务器，配置好后，直接发布到上面即可。如果自己没有服务器，则最好在网上申请一个空如果自己没有服务器，则最好在网上申请一个空间来存放网页，并申请一个域名来指定站点在网间来存放网页，并申请一个域名来指定站点在网上的位置。发布网页可直接使用上的位置。发布网页可直接使用Dreamweaver CS3中的中的“发布站点发布站点”功能进行上传。对于大型站功能进行上传。对于大型站点的上传一般都使用点的上传一般都使用FTP软件，如软件，如LeapFTP、CuteFTP等，使用这种方法上传下载速度都很快。等，使用这种方法上传下载速度都很快。6

30、0网站推广网站推广活动一般发生在网站发布之后，当然有网站推广活动一般发生在网站发布之后，当然有一些网站在筹备期间就开始进行宣传。网站推广一些网站在筹备期间就开始进行宣传。网站推广是网络营销的主要内容，可以说，大部分的网络是网络营销的主要内容，可以说，大部分的网络营销活动都是为了网站推广的需要，如发布新闻、营销活动都是为了网站推广的需要，如发布新闻、搜索引擎登记、交换链接以及网络广告等。搜索引擎登记、交换链接以及网络广告等。61后期维护站点上传到服务器后，首先要检查运行是否正常，站点上传到服务器后，首先要检查运行是否正常，如果有错误要及时更正。另外，每隔一段时间，如果有错误要及时更正。另外，每隔一段时间，还应对站点中的内容进行更新，以便提供最新消还应对站点中的内容进行更新，以便提供