第1讲网页设计概33课件.ppt

1、第第1讲网页设计概讲网页设计概3321.1网页中的基本概念网页中的基本概念1万维网万维网(WWW)万维网(World Wide Web，WWW)是Internet的多媒体信息查询工具，由三部分组成：客户机、服务器和HTTP，它是促使Internet迅速发展和普及的重要技术。用户只要在WWW浏览器中的Web页面上轻松点击链接，就可以转到相应的信息服务资源中去。多媒体的Web界面带来生动活泼的效果，简单和直观的操作手段给用户提供了很大的便利。32网页和网站网页和网站网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地讲，网站就是由网页组成的。网页可由文字、图像、动画、声音和程序等多种媒体信息

2、链接组成，通过链接实现与其他网页或网站的关联和跳转。43浏览器浏览器浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。网页浏览器主要通过HTTP协议与网页服务器交互并获取网页，这些网页由URL指定，文件格式通常为HTML。一个网页中可以包括多个文档，每个文档都是分别从服务器获取的。54URLURL(Uniform Resource Locator，统一资源定位符)也被称为网页地址，是因特网上标准资源的地址，是用于完整地描述Internet上网页和其他资源的地址的一种标识方法。在Internet上所有资源都有一个独一无二的URL地址，这种地址可以是本地

3、磁盘，也可以是局域网上的某一台计算机，更多的是Internet上的站点。简单地说，URL就是Web地址，俗称“网址”。例如http:/www.C。65Internet协议协议协议(Protocol)是关于信息格式及信息交换规则的描述。在信息技术中，协议就是些特殊规则的集合，它被通信的接收方和发送方认可，接收到的信息和发送的信息均以这种规则加以解释。在网络的各层中存在着许多协议。接收方与发送方同层的协议必须一致，否则一方将无法识别另一方发出的信息，以这种规则规定双方完成信息在计算机之间的传送过程。76IP地址地址IP地址是网上的通信地址，是计算机、服务器和路由器的端口地址，每个IP地址在全球都是

4、惟一的，是远行TCP/IP的惟一标识。每台Internet上的计算机由一个独有的IP地址来惟一标识。目前Internet使用的是IPv4版本，IP地址是一个由32位的二进制数组成的号码，该号码分为4段，每段8位，每段取值范围为0255。例如202.99.2.60。87HTTPInternet的基本协议是TCP/IP协议，然而在TCP/IP摸型最上层的是应用层(Application layer)，它包含所有高层的协议。高层协议有文件传输协议FTP、电子邮件传输协议SMTP、域名系统服务DNS、网络新闻传输协议NNTP和HTTP协议等。98HTMLHTML是Hypertext Markup La

5、nguage(超文本标记语言)的缩写，它是构成Web页面的主要工具，是用来表示网络上信息的符号标志语言。在万维网上，如果要向全球范围出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的“母语”。109静态网页与动态网页静态网页与动态网页在网站设计中，纯粹HTML格式的网页通常被称为静态网页，静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“？”。静态网页一经编写完成，其显示效果就确定了。在HTML格式的网页上，也可以出现各种动态的效果，但这些“动态效果”只是视觉上的，与动态网页是不同的概念。动态

6、网页有asp，jsp和php等。111.2页面组成元素页面组成元素现在的网页已经不再是简单的文字和图像组合，而是添加了各种设计元素，这使网页变得更加丰富多彩。组成网页的最基本元素通常包括网站LOGO、BANNER、导航栏、文本和图像、动画、超级链接、表单和多媒体等。121LOGO网站LOGO，也叫网站标志。它是一个站点的象征，一般放在网站首页的左上角或显眼位置，访问者能明显地看到它。成功的网站标志有着独特的形象标识，在网站的推广和宣传中起到事半功倍的效果。如新浪用字母sina和大眼睛作为标志。132BANNERBANNER一般翻译为网幅广告、旗帜广告和横幅广告等。BANNER通常为一幅表现商家

7、广告内容的图片，放置在广告商的页面上，是互联网广告中最基本的广告形式。横幅广告的标准尺寸是468*60像素，而弹出窗口广告一般为360*300像素。BANNER可以是使用GIF格式的图像文件，可以使用静态图形，也可用多帧图像拼接为动画图像。14BANNER的设计原则包括具有鲜明的色彩、语言具有号召力、文字的字体清晰和图形位置合适这4个方面。如图1.6所示为一个静态图形格式的BANNER。图图1.6 网站的网站的BANNER153导航栏导航栏导航栏是用户在规划好站点结构、开始设计主页时必须考虑的一项内容。导航栏的作用就是让浏览者在浏览站点时，不会因为迷路而中止对站点的访问。事实上，导航栏就是一组

8、超链接，这组超链接的目标就是本站点的主页以及其他重要页面。164文本和图像文本和图像文本一直是人类最重要的信息载体和交流工具，网页中的信息也以文本为主。在网页中，虽然文字不像图像那样能够很快地引起浏览者的注意，但却能够准确地表达信息的内容和含义。网页设计与制作者还可以通过设置字体、字号、颜色、底纹和边框等属性来改变文本的视觉效果，通过不同格式的区别，突出显示重要的内容。175动画动画动画是构成网页的重要元素之一，目前，最常用的网页动画软件是Flash、ImageReady和Gif Animation等，使用较多的动画格式通常有GIF动画和SWF动画。动画能提供信息、展示作品、装饰网页、动态交互

9、等，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果，甚至有的网站中的所有网页也全部都是用Flash完成。186超链接超链接在网上用鼠标点击一段文字或一幅图片，就会有一个新的页面被打开，这就是超链接技术。超链接技术是WWW流行起来的原因。链接源可以是带下划线的文本，也可以是图像或图像切片，甚至可以是一些不可见的程序代码。当链接源被鼠标单击激活后，其链接目的端将会显示在Web浏览器上，并根据目的端的类型不同选择以不同的方式打开。197表单表单表单通常用于填写申请或提交信息的交互页面，如电子邮箱、主页空间、QQ密码等申请页面以及论坛、留言簿等都是通过表单来实现交

10、互的。通常表单的用途是：收集联系信息、接收用户要求、获得反馈意见、设置访问者签名、让浏览者输入关键字去搜索相关网页、让浏览者注册会员或以会员身份登录等。208声音和视频声音和视频声音是多媒体网页的一个重要组成部分。从目前来看，网络上使用范围最广的音频格式主要有MP3、MIDI和WAV等。设计者在采用音频前需要考虑其用途、格式、文件大小、声音品质和浏览器兼容差别等因素。211.3网站规划与网页设计网站规划与网页设计我们所见到的网站，虽然在规模、内容和功能上各不相同，但网站设计制作的基本流程是相似的。从简单的个人网站到复杂的门户型网站，都遵循着一个基本的制作流程。同时，网站的定位、策划、创意和风格

11、，网站的版面布局，网页的色彩应用及网页的艺术原则等都直接关系到网站的生存和效果评估。221.3.1网站的策划网站的策划网站的前期策划是一个网站成功与否的关键，也是进行网站建设和网页制作整个流程中的第一步。策划的目的是为了完成需求分析，确定网站的主题、目标、规模、风格和类型等。网站的主题就是将要创建的网站的主要内容，也就是网站的题材。一个网站必须有一个明确的主题。网站按照其功能和结构形式大体上可以分为4类，即门户网站、职能网站、专业网站和个人网站。231.3.2网页版面布局设计网页版面布局设计网页制作本质上就是排版，是以浏览器作为阅读平台的电子出版物的图文排版。网页设计表面上看是一种全新的视觉表

12、现形式，但仔细想想，网页设计与日常所见的传统报刊排版并没有太多不同，只不过在单一静止的图文编辑基础上添加了新的交互元素和多媒体元素，它们的基本原理是相通的。网页版面布局是个性思维的展示，因此没有固定的网页版式模式，设计者可以根据自己的喜好随心所欲地设计。24页面布局设计页面布局设计l1构思构图构思构图l在真正开始页面布局设计之前，都要对页面的整体布局进行认真的构思。在这个阶段，可以借鉴他人的布局经验，参考他人的布局结构，吸取别人的精华，融入到自己的整体构思中。要充分发挥艺术想象力，锐意创新、大胆突破，结合现有的网页素材考虑，进行整合创作。构思结果一定要有自己的独特创意，并要考虑技术实现的可行性

13、。有时候，尽管构思巧妙，见解独到，但用现在的计算机技术和网络技术却不能实现，创意也就变成了空想。25l2绘制草图绘制草图l网页布局设计就像写文章一样，要事先打草稿绘制草图。新建页面就像一张白纸，没有任何表格和框架，没有约定俗成的条条框框的约束，可以尽可能地发挥你的想象力，将想到的“景象”画上。绘制草图就是把头脑中构思的页面布局轮廓具体化的过程，可以在纸上绘画，也可以用软件在计算机上绘制。26某某网上商城草图某某网上商城草图27l3草图细化和方案确定草图细化和方案确定l草图细化和方案确定就是在绘制出来的轮廓草图上，具体摆布页面元素，包括网站的站标、导航栏、栏目标题、广告、图片和搜索引擎等。按照平

14、面设计的规律做出平面的基本样式。这一步可以用一些图像处理软件（如Photoshop、PageMaker和Illustrator等）在计算机上完成。在具体布局页面元素时，可以借鉴平面构图的一些基本原则，如平衡、呼应、对比和疏密等。这个阶段的设计结果仍然是草图，但是已经是一个布局完善的设计方案了，除了文字内容之外，其他所有内容应该基本接近将来网页的实际效果。这个方案供客户和技术开发人员讨论确定最后方案时参考。2829l4量化描述量化描述l量化描述就是确定各种页面元素的具体尺寸。主要包括下面几个方面。l(1)网页的外形尺寸。l(2)图形图像的尺寸。l(3)字体大小。l(4)色彩代码。l(5)网页的文

15、件大小。30l5方案实施方案实施l根据上述步骤确定的最终方案用网页编辑软件（如Dreamweaver或Frontpage）和图像处理软件（如Photoshop和Fireworks）进行布局设计。31常见的网页结构类型常见的网页结构类型 l(1)“同同”字型布局字型布局l“同”字型布局（又叫“国”字型布局）的结构特点是：页面顶部为水平放置的主导航栏，其下大体上分为左中右三栏，左边一般放置内容导航、二级栏目或热点内容等；右边一般放置站点图片链接、动画广告、搜索引擎、友情链接和注册登录信息等；中间为主要内容板块。32“中国人民大学中国人民大学”首页首页 33l这种结构布局是互联网上最常见的布局，其优

16、点是：页面结构清晰、直观、平衡均衡和主次分明。缺点是版次过于呆板、僵化，往往给人一种“单调乏味”的感觉。因此，采用这种布局结构时，必须在设计过程中更加注重色彩的搭配和细节的处理，调节页面的整体韵律，弥补它的不足。34l(2)“匡匡”字型布局字型布局l“匡”字型布局（又叫“拐角型”布局）是把“同”字型布局右边的内容移到底部而成，它们的结构特点和优缺点也大体相同。如北京交通大学首页就属于这种布局。3536l(3)“吕吕”字型布局字型布局l“吕”字型布局的特点是把页面分为上下两大块，其中每一块都具有同字型结构的特点。这种结构在设计技术上采用上下两个表格进行页面元素的定位，两个表格之间往往插入条幅广告

17、。这种布局能够容纳大量信息，目前各大型门户网站的二级模块通常都是采用“吕”字型的布局。如“新浪体育”、“网易新闻”和“搜狐财经”等网页。3738l(4)自由式布局自由式布局l自由式布局打破上述结构的“规规矩矩”，尽情挥洒。页面布局就像一张宣传海报，极具创意。这种页面常常以一幅精美的图片作为设计中心，导航栏则作为次要的设计元素，自由摆布，起到点缀、修饰和均衡的作用。一些时尚网站常常采用这种布局，如艺术设计、时装服饰和化妆品等站点。这种布局的优点是漂亮、现代、轻松和明快，极具美感，给人以美的享受。39401.4网页的色彩搭配及应用网页的色彩搭配及应用在网页设计中，色彩搭配是体现网页风格的重要元素之

18、一。一个网站设计的成功与否，很大程度上取决于网页色彩的搭配。色彩搭配是一项艺术性很强的工作，因此在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，这样才能设计出色彩鲜明、性格独特的网站。411.4.1网页色彩搭配的原理网页色彩搭配的原理网页的色彩是树立网站形象的关键之，网页的背景、文字、图标、边框和链接等应该采用什么样的色彩，应该搭配什么色彩才能最好地表达网站的内涵和主题呢?下面将介绍网页色彩搭配的一些原理。1色彩的鲜明性 2色彩的独特性 3色彩的艺术性 4色彩搭配的合理性421.4.2网页色彩搭配的技巧网页色彩搭配的技巧网页配色很重要，网页颜色搭配得好坏与否会直接影响到访问者的情

19、绪。好的色彩搭配会给访问者带来很强的视觉冲击力，不好的色彩搭配则会让访问者产生抵触情绪。下面就来讲述网页色彩搭配的一些技巧。43 1使用单色 2使用邻近色 3使用对比色 4黑色的使用 5背景色的使用 6色彩的数量441.4.3网页色彩选择标准网页色彩选择标准选择网页色彩，在遵从艺术规律的同时，还应考虑人的生理特点。色彩搭配一定要合理，给人一种和谐、愉快的感觉，避免采用容易造成视觉疲劳的纯度很高的单一色彩。在选择网站颜色时，应遵循以下标准。451了解网站所要传达的信息和品牌2了解网站的访问群体3不要使用过多的颜色4在文字的部分使用对比色5选择颜色要注意时效性6选择色盘时应考虑功能性的颜色7注意网站色差问题461.5网页的设计原则网页的设计原则 尽管网页设计和网站的开发有多种多样的方式和技巧，但要完成一个完美的、既让浏览者爱好又便于日后维护的网站，在设计时必须要牢记以下网页设计原则。471内容第一、形式第二2重点信息要醒目突出3网页文件的命名原则4设置合理的网站目录5确保链接的有效性6流畅的访问速度7清晰的导航结构8良好的兼容性9慎用多媒体元素10真实有效的客服信息481.6小结小结本章主要讲述了制作网页时需要注意的一些事项、网页设计的艺术原则、网页的实用布局结构、网页的色彩搭配等网页设计知识，最后介绍了网页制作的流程。使读者有个整体认识，为后面制作复杂的网页奠定基础。谢谢大家！