第1章 网页设计概论要点

1、第一章web设计概述，学习目标：通过本章学习，熟悉web设计相关基本知识和基本概念，熟悉web页面的组件，了解可用于web设计的开发软件和常用技术，对web网站的设计过程和web页面制作原理有初步的了解和理解。1.1网页的基本概念1万维网(WWW)万维网(WWW)是internet上的多媒体信息查看工具，由三部分组成。客户端、服务器和HTTP是促进互联网快速发展和普及的重要技术。用户只需单击WWW浏览器网页上的链接，即可导航到相应的信息服务资源。多媒体的web界面提供丰富生动的效果，简单直观的操作方法为用户提供了很多便利。2网页和网站页面是构成网站的基本元素，是承载各种网站应用程序的平台。网站

2、通常由网页组成。网页可以由各种媒体信息链接(如文字、图像、动画、声音和程序)组成，通过链接实现与其他网页或网站的关联和跳转。3浏览器浏览器是显示web服务器或文件系统上HTML文件内容并使用户与这些文件交互的软件。web浏览器主要通过HTTP协议与web服务器交互，并获得指定为URL且通常文件格式为HTML的web页。网页可以包含多个文档，每个文档都是从服务器上单独导入的。4URLURL(UniformResourceLocator，UniformResourceLocator)也称为web地址，是internet上标准资源的地址，是用于完整描述internet上网页和其他资源地址的标识方法。

3、internet上的所有资源都有唯一的URL地址，例如本地磁盘或LAN上的计算机、internet上的站点等。简而言之，URL是通常称为“网址”的web地址。示例：http:/www。c、5 internet协议(Protocol)是信息格式和信息交换规则的说明。在信息技术中，协议是通信的接收方和发送方接受和接收的信息和发送的信息都解释为这些规则的特殊规则的集合。网络的每一层都有很多协议。收件人和发件人同一层上的协议必须匹配。否则，一方无法识别另一方发送的信息，根据这些规则，可以在计算机之间完成信息传递过程。6IP地址IP地址是计算机、服务器和路由器的端口地址，每个IP地址在世界范围内是唯一的

4、，用于唯一标识远距离TCP/IP。每个internet上的计算机由唯一的IP地址唯一标识。目前，internet使用的是IPv4版本，IP地址由32位二进制文件组成，包含4个段、8个段和1个段的值范围0255。范例：0。7 http internet的默认协议是TCP/IP协议，但在TCP/IP触摸的顶部是包含所有高级协议的应用程序层(Applicationlayer)。高级协议包括文件传输协议FTP、电子邮件传输协议SMTP、域名系统服务DNS、网络新闻传输协议NNTP和HTTP协议。8HTMLHTML是构成网页的主要工具HypertextMarkupLanguage的缩

5、写，是用于在网络中表示信息的符号标志语言。在万维网上发布和发布信息需要能够被广泛理解的语言，即所有计算机都能理解的出版“母语”。9在静态和动态web页web设计中，纯HTML格式的web页通常称为静态web页，静态web页各有一个固定的URL，web页URL为“？”没有。htm，html，以常规形式(如shtml)指定后缀。建立静态网页时，会决定其显示效果。HTML格式的网页也可能出现各种动态效果，但是这些“动态效果”只是视觉效果，与动态网页不同。，1.2页组件，现在网页不再是简单的文本和图像组合，而是添加多种设计元素，使网页更加丰富多彩。构成网页的最基本元素通常包括网站LOGO、BANNER

6、、导航栏、文本和图像、动画、超链接、表单和多媒体。也称为1LOGO网站徽标和网站徽标。它通常是放置在网站主页左上角或显眼位置的网站的象征，访问者可以清楚地看到。成功的网站标志有其独特的图像标志，在网站的宣传和宣传方面取得了更多的成果。新浪用新浪和大眼睛作为标志的时候。2BANNERBANNER通常翻译为横幅广告、横幅广告和横幅广告等。通常，“BANNER”(横幅广告)是网络广告中最基本形式的广告，即广告商页面上企业广告的内容的图示。横幅广告的标准大小为468*60像素，弹出广告通常为360*300像素。BANNER可以是使用GIF格式的图像文件，也可以使用静态图形或将多帧图像拆分为动画图像。B

7、ANNER的设计原则包括鲜明的颜色、强大的语言、清晰的文本字体和适当的图形位置。图1.6是静态图形格式的BANNER。图1.6网站的横幅，3导航栏是用户计划网站结构和开始设计主页时需要考虑的事项之一。导航栏的作用是防止访问者在浏览站点时迷路，从而中断对站点的访问。实际上，导航栏是一组以站点主页和其他重要页面为目标的超链接。4文本和图像文本始终是人类最重要的信息传递者和通信工具，网页上的信息也是文本中心。在网页上，虽然文字没有图像那么快吸引访问者的注意，但可以准确地表达信息的内容和意义。网页设计和创作者可以设置字体、大小、颜色、底纹和边框等属性，以改变文本的视觉效果，通过不同格式的区分强调重要内

8、容，5动画动画是构成网页的重要元素之一，目前最常用的web动画软件是Flash、ImageReady和GifAnimation，使用更多动画格式通常是动画GifAnimation动画可以通过提供信息、显示作品、装饰网页、动态交互等方式结合音乐、声音、动画和新界面，创建高质量的网页动态，甚至一些网站上的所有网页也可以用flash完成。6超链接在internet上用鼠标点击文本或图片将打开新页面。这就是超链接技术。超链接技术是WWW受欢迎的原因。链接源可以是带下划线的文本、图像或图像切片，也可以是某些不可见的程序代码。通过鼠标单击激活链接源后，链接目标将显示在web浏览器中，并根据目标类型以不同的

9、方式打开。7表格表格通常用于填写申请或提交信息(如电子邮件、主页空间、QQ密码)和论坛、访问记录等交互式页面。表单通常用于收集联系信息、接收用户要求、接收反馈、设置访问者签名、让访问者输入关键字搜索相关网页、让访问者注册会员、注册为会员等目的。8声音和视频声音是多媒体网页的重要组成部分。目前网络上使用最广泛的音频格式主要是MP3、MIDI和WAV等。设计人员在使用音频之前，应考虑用途、格式、文件大小、声音质量和浏览器兼容性方面的差异。1.3站点规划和web设计，我们看到的站点在大小、内容、功能方面各不相同，但站点设计制作的基本过程相似。遵循基本制作流程，从简单的个人网站到复杂的入口网站。同时，

10、网站的位置、计划、想法和样式、网站的布局、网页的色彩应用和网页的艺术原则等，都与网站的生存和效果评价直接相关。1.3.1网站规划，网站的前期规划是一个网站能否成功的关键，是网站构建和网站制作前过程的第一步。计划的目的是为了完成需求分析，决定网站的主题、目标、大小、风格和类型等。网站的主题就是要创建的网站的主要内容，即网站的主题。网站必须有明确的主题。根据其功能和结构，站点可以分为四大类别：门户、功能网站、专业网站和个人网站。1.3.2网页布局设计、网页制作本质上是排版，是以浏览器作为阅读平台的电子出版的图形排版。网页设计表面上看起来是一种全新的视觉表达，但是仔细想想，网页设计与日常生活中看到的

11、传统报纸排版没有太大的区别，添加基于一个静止图形编辑的新交互式元素和多媒体元素是基本原理相互联系的。web布局是个性思维的表现，因此没有固定的web布局模式，设计者可以根据自己的喜好随意设计。1设计阶段(1)草稿(2)地图(3)最终2布局设计原则(1)正常平衡(2)以上平衡(3)对比度(4)视线(5)空白，3一般布局类型(1)一个网站设计的成功与否在很大程度上取决于网页颜色的搭配。色彩搭配是一项艺术性很强的工作，因此设计网站时，除了网站本身的特性外，还要遵守一定的艺术方法，才能设计色彩鲜明、个性独特的网站。1 . 4 . 1 web的色彩排列原理，web的色彩是建立web形象的关键。应该使用w

12、eb的背景、文本、图标、边框、链接等什么颜色，搭配什么颜色才能最好地表达网站的意义和主题？下面介绍web颜色排列的一些原理。1颜色的鲜明度2颜色的独特性3颜色的艺术性4颜色搭配的合理性，1.4.2网页颜色搭配技巧对网页配色很重要，网页颜色搭配的好坏会直接影响访客的情绪。好的颜色组合会给访问者强烈的视觉冲击，不好的颜色组合会给访问者造成冲突。以下是有关网页颜色排列的一些提示。1使用单色2接近色3使用对比色4黑色时，使用5背景色时要使用6色数，选择1.4.3网页色选择标准，网页色，遵循艺术规律的同时要考虑人的生理特性。颜色搭配必须合理，给人和谐愉快的感觉，避免使用容易引起视觉疲劳的纯度高的单一颜色。选择网站颜色时，请遵守以下标准：1了解网站要传达的信息和品牌2网站的访问组3禁止过度使用颜色4文本的部分使用相对颜色5选择颜色时考虑有效性6选择调色板时考虑功能性颜色7网站颜色差异问题，1.4.4常用颜色方案，1红色2黄色3蓝色4白色5紫色6绿色7灰色8黑色，1.5 web设计原则，尽管web设计和网站开发的各种方法和技术，但完美的web，便于访问者的爱好和未来维护1内容第一，格