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

1,网页设计,授课教师:,2,主要学习内容网站设计基础知识Dreamweaver、Fireworkshtml语言如何学习这门课程多实践，多动手多参考优秀网站：如网易，sohu,3,1.1网页设计相关知识,www网页的概念超文本(Hypertext)网站的概念网页浏览原理网页组成要素网页编辑工具网页布局网页的页面与版面,4,WWW,万维网WWW(WorldWideWeb)并非某种特殊的计算机网络。万维网是一个大规模的、联机式的信息储藏所，英文简称为Web。下图说明了万维网提供分布式服务的特点。,5,WWW,6,WWW,万维网是一个分布式的超媒体(hypermedia)系统，它是超文本(hypertext)系统的扩充。万维网以客户服务器方式工作。客户程序向服务器程序发出请求，服务器程序向客户程序返回客户所要的万维网文档。在一个客户程序主窗口上显示出的万维网文档称为页面(page)。,7,网页的概念,网页(WebPage)：是通过WWW发布的包含有文本、图片、声音、动画等多媒体信息的页面，它是网站最基本的组成单位。众多的网页有机地集合在一起就组成了网站。网页的主要类型HTML(HyperTextMarkupLanguage)全称超文本标记语言，利用标记（tag）来描述网页的字体、大小、颜色及页面布局的语言，使用任何的文本编辑器都可以对它进行编辑，与VB、C+等编程语言有着本质上的区别。ASP(ActiveServerPages)中文名为动态服务器主页,它是一种应用程序环境，可以利用VBscript或JavaScript语言来设计，主要用于网络数据库的查询与管理。JSP(JavaServerPage)JSP与ASP非常相似。不同之处之一在于ASP的编程语言是VBScript之类的脚本语言，而JSP使用的Java。,8,静态网页与动态网页,静态网页纯粹HTML格式的网页每个网页都有一个固定的URL，网页URL以.htm、.html、.shtml等常见形式为后缀，且不含有“?”也可以出现各种动态效果动态网页以数据库技术为基础，随不同客户、不同时间，返回不同的网页后缀通常是asp、aspx、jsp、php等，并且通常在URL中带有”？”,9,静态网页,10,动态网页,11,MSN中国网站的首页,12,超文本(Hypertext),超文本(Hypertext)：具有超级链接功能的文本文件叫超文本。超文本文件中的某些字、符号或短语起着“热链路”（Hotlink）的作用，在显示出来时其字体或颜色发生变化或者标有下横线、以区别于一般的正文.,13,网站的概念,网站：WWW服务器上相互链接的一系列网页组成一个网站（WebSite）。网站是WWW上的一个结点。如果输入地址时仅指定WWW服务器域名或IP地址，而不加路径信息，则将打开网站默认的首页（HomePage），也称为主页。首页是一个网站中最重要的网页，通常包含最重要的信息以及指向各分栏目的超链接。,14,网页浏览原理,其工作步骤如下：（1）用户启动客户端浏览器，在浏览器地址栏输入想要访问网页的URL，浏览器软件通过http协议向URL地址所在的Web服务器发出服务请求。（2）服务器根据浏览器软件送来的请求，把URL地址转化成页面所在服务器上的文件路径，找出相应的网页文件。（3）当网页中仅包含html文档，服务器直接使用http协议将该文档发送到客户端；如果html文档中还包含有JavaScript或VbScript脚本程序代码，这些代码也将随同html文档一起下载；如果网页中还嵌套有CGI或ASP程序，这些程序将由服务器执行，并将运行结果发送给客户端。（4）浏览器解释html文档，并将结果在客户端浏览器上显示。,15,网页包含的元素,文本图像动画音频视频,16,文本,文本是非常重要的网页元素之一，是网页中信息的主要载体。文字、字母、数字和符号等都可以称为文本。与漂亮的图像、优美的动画、悦耳的声音和有声有色的视频相比，文本在网页中似乎是最普通不过了，但文本却是用户创建网页应该考虑的关键因素，因为文本是表述信息的最完备的方式，绝大多数信息都是通过文本传递给浏览者的。,17,图像,图像是站点中比较重要的元素，网页的设计和创意都离不开图像的使用和处理。一个欣赏性较好的站点应有清新悦目的画面，能够吸引读者有兴趣浏览下去。同时，图像可以传递文字所无法表达的特定的信息，在Web上的大多数网页都使用图像来图文并茂地对内容加以介绍。网页中的图像既有简单的彩色背景，也有实物的真实照片。总之，根据不同的需要，配备不同的图像加以说明，但从做网页的角度来讲，网页上的图像可以分为两大类。,一类纯粹是网页本身的需要，起增添网页色彩的作用，它并不传给读者特定的信息，如某些网页背景图像、表格背景图像等。另一类是行文的需要，配合文本向读者传递信息，这就是所说的图文并茂，或者利用图像单独向读者传递信息，如图片新闻。,18,动画,动画是现代网站的重要特色，是网页制作技术的重要组成部分。在网页中，常见的动画类型有GIF动画、Flash动画等，使用编程的方法也可以制作动画。目前，网页中最流行的动画是Flash动画。Flash动画一般具有文件容量小、传输速度快、不失真、边下载边播放的特点，还具有交互性优势。Flash动画具有崭新的视觉效果，已经成为一种流行的艺术表现形式。,19,音频,MP3具有压缩程度高、音质好的特点，是目前最为流行的一种音乐文件，在网上有很多可以在线收听或下载MP3的站点。ASF和WMA都是Microsoft公司针对Real公司开发的新一代网上流式数字音频压缩技术，同时兼顾了保真度和网络传输需求，所以具有一定的先进性。WAV是MicrosoftWindows系统提供的音频格式，由于Windows本身的影响力，这个格式已经成为了事实上的通用音频格式。real格式是RealNetworks公司网络音频和视频解决方案，具有很高的压缩比，使用流式（streaming）播放媒体技术，从而使人们能够在网上实时收听音频及收看视频。,20,音频,21,视频,在网页中添加视频文件可以大大增加站点的可读性，已成为站点多媒体特性的重要体现。现在，能够在网络上运行的视频文件类型也日益丰富。AVI（.AVI）是音频视频交错（AudioVideoInterleaved）的英文缩写，它是Microsoft公司开发的一种符合RIFF文件规范的数字音频与视频文件格式。MPEG文件（.MPEG/.MPG/.DAT）是运动图像压缩算法的国际标准，它采用有损压缩方法减少运动图像中的冗余信息，同时保证每秒30帧的图像动态刷新率，已被几乎所有的计算机平台共同支持。,22,了解网页制作工具,常用的网页编辑软件有FrontPage和Dreamweaver等。Dreamweaver因其功能全面、操作灵活、专业性强，而受到网页制作人员的青睐。在制作网页时，经常使用的图像处理软件有Fireworks和Photoshop。Flash是目前最常用的网页动画制作软件。用Flash制作的动画文件小，利于网上发布，而且还能制作出具有交互功能的动画，并能很方便地与网页建立链接。,23,网页布局类型,国字型匡字型三字型川字型其他类型,24,国字型,国字型也称同字型，即最上面是网站的标题以及横幅广告条，接下来是网站的主要内容，最左侧和最右侧分列一些小条目内容，中间是主要部分，最下面是网站的一些基本信息、联系方式、版权声明等。这是使用最多的一种结构类型。,25,匡字型,匡字型也称拐角形，这种结构与国字型结构很相近，上面是标题及广告横幅，下面左侧是一窄列的链接等，右侧是很宽的正文，下面也是一些网站的辅助信息。,26,三字型,这是一种比较简洁的布局类型，其页面在横向上被分隔为3部分，上部和下部放置一些标志、导航条、广告条和版权信息等，中间是正文内容。,27,川字型,整个页面在垂直方向上被分为3列，内容按栏目分布在这3列中，最大限度地突出栏目的索引功能。,28,其他类型,常见的网页布局类型还包括标题文本型、框架型、封面型、Flash型等。标题文本型即页面内容以文本为主，最上面一般是标题，下面是正文的格式。框架型布局通常分为左右框架型、上下框架型和综合框架型。由于兼容性和美观等原因，专业设计人员很少采用这种结构。封面型基本出现在一些网站的首页，大部分由一些精美的平面设计和动画组合而成，在页面中放几个简单的链接或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种类型的网页布局大多用于企业网站或个人网站。Flash型是指整个网页就是一个Flash动画，这是一种比较新潮的布局方式。其实，这种布局与封面型在结构上是类似的，无非使用了Flash技术。,29,30,网页页面与版块,布局的设计通常需要注意网站的页面大小以及各种版块的安排1网页页面大小合理地设置页面尺寸，可以避免用户频繁地拖动滚动条。目前国内的上网者习惯使用是微软公司的InternetExplorer浏览器（简称IE浏览器）。在屏幕分辨率为1024768时，不同版本的IE浏览器的屏幕大小是不相同的。以下是各版本IE浏览器页面尺寸表。,30,31,网页页面与版块,2网页版块构成网页是由各种版块构成的。Internet中的网页内容各异。然而多数网页都是由一些基本的板块组成的，包括Logo、导航条、Banner、内容版块、版尾等。,31,32,网页版面布局技术分析,表格布局：简单但是下载速度慢框架布局：兼容性不好CSS技术：可以精准定位元素但有些复杂,33,网页版面布局原则,主次分明，中心突出大小搭配，相互呼应图文并茂，相得意彰,34,版面布局的步骤,草案：在白纸上将景象画上去粗略布局：将功能模块安置到页面上定案：将粗略布局精确化，具体化,35,Logo,Logo是企业或网站的标志，其作用是标识网站的名称，并为用户提供识别的标记。绝大多数网站都有一个独特的Logo。Logo对于网站而言是唯一的。,35,36,Logo的大小,一、120120，这种广告规格适用于产品或新闻照片展示。二、12060，这种广告规格主要用于做LOGO使用。三、12090，主要应用于产品演示或大型LOGO。四、125125，这种规格适于表现照片效果的图像广告。五、23460，这种规格适用于框架或左右形式主页的广告链接。六、39272，主要用于有较多图片展示的广告条，用于页眉或页脚。七、46860，应用最为广泛的广告条尺寸，用于页眉或页脚。八、8831，主要用于网页链接，或网站小型LOGO。,37,1.2.2导航条,导航条是网站的重要组成元素。其可以索引网站内容，帮助用户快速访问网站功能。导航条内包含的是网站功能的按钮或链接，其项目的数量不宜过多。通常同级别的项目数量以3到7个为宜。一个网站往往可包含多个级别的导航条，例如主导航条、登录导航条、友情链接导航条等。有时导航条也会与banner结合使用，通过图像增强导航条的表现力。,37,38,Banner,Banner为网页中的广告条，又被称作旗帜、网幅或横幅，是一种可以由文本、图像和动画相结合而成的网页栏目。国际广告联盟的“标准与管理委员会”联合广告支持信息和娱乐联合会等国际组织，推出了一系列网络广告宣传物的标准尺寸，被称作“IAC/CASIE”标准，共包括7种标准的Banner尺寸。在设计Banner时，既可遵循以上标准，以方便网站的广告用户设计广告。同时，也可灵活根据网页的版式对其尺寸进行调节，以符合网页整体的风格和布局。,38,39,内容版块,网页的内容版块通常是网页的主体部分。这一版块可以包含各种文本、图像、动画、超链接等。在设计内容栏时，用户可以先独立地设计多个子栏，然后再将这些子栏拼接在一起，形成整体的效果。同时，还可以对子栏进行优化排列，提高用户的体验。如网页的内容较少，则还可以使用单独的内容栏，通过大量的图像使网页更加美观。,39,40,版尾版块,版尾，顾名思义是网页页面最底端版块，通常放置网站的版权信息。版权信息的书写需要遵循国际通行的规范，其格式如下所示。Copyrightdatesbyauthor/ownerCopyright可以由copyright符号“”代替dates可以是具体的年份，也可以是由年份表现的的时间段author/owner为作者或所有者，可为个人名，也可为企业名。在作者/所有者之后，可以添加“AllRightsReserved.”表示版权所有。但“AllRightsReserved.”的大小写和最后英文句号”.”不可省略。如需要添加中文的“版权所有”，应写在英文版权所有之后。例如，清华大学网站的版尾信息为“2010TsinghuaUniversity.AllRightsReserved.”,41,1.2网站的规划:实例,确定建立网站的目标确定网站的类型确定网站主体内容确定网站风格确定网页系统树确定网页内容定制数据库考虑网络的技术问题,42,你建网站的目的是什么？,产品、服务的销售建立一种公益性服务为一种思想、观念、事业作宣传使自己的业务走向世界,43,网站的类型是什么,信息：全国性媒体，地方性媒体，商业信息，地方信息商务：公司站点，销售站点组织：法律法规，教育站点专题：旅游，财经，体育，科学，食品个人：个人展台,44,网站用户的确定,网站的用户是谁？用户的兴趣是什么？他们需要从网站中得到什么信息？,45,你的主要用户是谁？,女性男性青少年儿童学生所有人其它,46,网站主题是什么,主题选材应该小而精。选题不要太滥，目标定位不要太高。,47,网站的风格是什么？,是活泼的如迪斯尼平易近人的如网易严肃的如IBM,48,树立网站风格,风格是建立在有价值内容之上需要彻底清楚希望网站给人的印象是什么努力加强印象,49,有关风格设计的建议,使网站的LOGO尽可能出现在每个页面上突出网站的标准色彩使用同一的语气和人称使用同一的图片处理效果,50,网页系统树,确定网站的栏目以后，需要绘制出网站的结构图。通过系统树可以方便对网页进行维护，规划和设计。,51,网页内容,进一步的细化，明确网页中包含的文字，图片，网页的链接,52,网络的技术问题,带宽：浏览器与分辨率：,53,1.3网站的设计,网站设计的基本原则网站设计技巧设计主页应避免的问题,54,1.3.1网站设计的基本原则,内容明确：围绕网站功能快速下载：网页不大于60kB点击规则:浏览信息的点击次数不超过三次网站介绍：告诉浏览者网站提供什么信息慎用特殊字体和颜色：不同系统平台产生不同效果少用闪烁：喧宾夺主少用框架：,55,图像的应用：不要使用跨幅整个屏幕的图像慎用声音：影响下载速度空白万岁：吸引访问者的注意力,56,1.3.2网站设计技巧,1.定位网站的CI形象LOGO标志：不宜过大标准色彩：能体现网站形象的色彩（不超过3种）2.确定网站的整体风格（标志，色彩，版面布局，浏览方式，交互性，文字，语气，价值）3.确定网站的目录结构和命名规则（*）4.确定网站的链接结构5.首页的设计,57,网站首页的设计,确定网站首页上实现的主要内容和功能设计网页的版面：先绘制出，再实现,58,1.3.3设计主页应避免的问题,没有联系地址缺乏导航功能大量使用表格大量使用动态图像站内内容不及时更新,59,网站发布,发布站点前，必须确定网页的存储空间。如果自己有服务器，配置好后，直接发布到上面即可。如果自己没有服务器，则最好在网上申请一个空间来存放网页，并申请一个域名来指定站点在网上的位置。发布网页可直接使用DreamweaverCS3中的“发布站点”功能进行上传。对于大型站点的上传一般都使用FTP软件，如LeapFTP、CuteFTP等，使用这种方法上传下载速度都很快。,60,网站推广,网站推广活动一般发生在网站发布之后，当然有一些网站在筹备期间就开始进行宣传。网站推广是网络营销的主要内容，可