1、第一章 网页设计基础,1.1 WEB概述,1.1.1 Web中的基本概念,1.网站与网页,网页可分为动态页面和静态页面。静态页面扩展名：.htm、.html、.shtml等。动态页面是通过执行ASP、PHP、JSP等程序生成客户端网页代码的网页。动态页面扩展名：.asp、.aspx、.php、.jsp、.cgi等。,2.超文本与超媒体,超媒体可以包含文字，还可以包含图形、图像、声音、动画或影视片断等多种媒体来表示信息，媒体之间用超级链接组织。,3. HTTP和HTTPS,HTTP称为超文本传输协议（Hypertext Transfer Protocol），是用于访问WWW上信息的客户机/服务器
2、协议。 HTTP协议建立在TCP/IP协议的应用层之上。其实现过程一般包括4个阶段。HTTPS称为以安全为目标的HTTP通道，HTTPS的安全基础是SSL，主要作用为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。,4. 浏览器,浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。,5. URL,URL：统一资源定位符，是对特网上资源的位置和访问方法的一种简洁表示。URL格式如下：协议:/主机.域名:端口/路径/文件名常见的协议有以下几种类型：File：本地文件服务。FTP：FTP服务器文件。HTTP：WWW服务器文
3、件。NEWS：电子新闻组。Telnet：远程登录服务。Mailto：电子邮件服务。,6. Cookie文件,网站服务器放在客户端的一个很小的TXT文件，存储了一些与访问的这个网站有关的一些信息。Cookie的内容一般都是加密的，只有对应的服务器才能识别。Cookie的作用在于帮助嵌入代码类的网站分析工具记录网站的访问和访问者的信息。,1.1.2 WEB的发展,静态网页阶段,动态网页阶段,WEB2.0阶段,1.1.3 WEB的特点,1. 一种超文本信息系统,2.图形化、易于导航,3.平台无关性,4.分布式特性,5.动态特性,6.交互特性,1.1.4 Web的工作原理,常见的中间件技术：CGI技术
4、API技术JDBC技术,1.1.5 HTML简介,HTML称为超文本标记语言，是Web上的专用表述语言，可以规定网页中信息陈列的格式，指定需要显示的图片，嵌入其他浏览器支持的描述型语言，以及指定超文本链接对象等。,1HTML语言的组成,HTML就是使用标记表示各种元素，用于指示浏览器以什么方式显示信息。,2. HTML基本语法,HTML语法由标签（Tags）和属性（Attributes）组成。,1.1.6 CSS简介,CSS中文译作层叠样式表单，是一种用来为结构化文档添加样式（字体、间距和颜色等）的计算机语言。CSS能够对网页中对象的位置排版进行精确控制，支持几乎所有的字体字号样式，拥有网页对
5、象和模型样式的编辑能力，并能够进行初步交互设计。, body background:#fff; color:#777; h1 font:bold italic sans-serif; color:green; 綠色、粗体和斜体字格式 普通字。 取代通用的h1样式,新样式为：绿色背景，文字为红色斜体。 綠色、粗体和斜体字,1.2 网页设计,1.2.1 网页的构成元素,1感知信息,文本 图像 Flash动画声音和视频 表格 导航栏交互式表单,2互动信息,交互式文本 互动插图 按钮 超链接,3内部信息,注释 通过超链接链接到某文件样式信息 脚本,1.2.2 网页的布局设计,1. 网页布局类型,大致可
6、分为国字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型等。,2首屏布局,首屏布局要具体情况具体分析：如果内容非常多，考虑用国字型或拐角型；内容不多，说明性的较多，考虑标题正文型；框架结构浏览方便，速度快，但结构变化不灵活；展示企业形象或展示个人风采，封面性是首选；Flash型更灵活一些，不能表达过多的文字信息。,1.2.3网页中的点线面协调,1.点,居中：引起视觉集中注意 上方：引起下跌落感下方中点：产生踏实感 左下右下：增加了动感在上左或上右：引起不安定感,2.线,直线：给人以速度，明确而锐利的感觉，具男性感。水平线代表平稳、安定、广阔，具踏实感。垂直线则有
7、强烈的上升及下落趋势，可增加动感。斜线会造成不安定感。曲线：优美轻快，富于旋律。,3.面,面为几何形和任意形，不同的几何形含义不同：圆形：运动、和谐美 矩形：单纯、明确、稳定 梯形：最稳定，令人联想到山。正方形：稳定的扩张。正三角形：平稳的扩张。倒三角形：不安定，动态及扩张、幻想。平行四边形：有向一方运动的感觉。,4.点线面的协调,平面的东西，要产生合理的视觉中心。 一副美图使观者产生美的共鸣。重复虽给人以视觉印象，但会使人疲劳并产生厌烦。,1.2.4网页设计里的一些标准尺寸,1网页设计标准尺寸,800600下，网页宽度保持在778以内。1024768下，网页宽度保持在1002以内。页面长度原
8、则上不超过3屏，宽度不超过1屏。,2标准网页广告尺寸规格,8831：主要用于网页链接，或网站小型LOGO。12060：这种广告规格主要用于做LOGO使用。12090：主要应用于产品演示或大型LOGO。120120：适用于产品或新闻照片展示。125125：适于表现照片效果的图像广告。23460：适用于框架或左右形式主页的广告链接。39272：主要用于有较多图片展示的广告条，用于页眉或页脚。46860：应用最为广泛的广告条尺寸，用于页眉或页脚。,3.常见广告尺寸,1.2.5页面的色彩搭配,特色鲜明搭配合理讲究艺术性,1.2.6网页设计中的常用背景,1.照片背景,2.局部背景,3条状背景,4.沙纹背景,5.颜色背景,1.3网页设计的常用工具,1.3.1 网页制作软件,1. Dreamweaver,2. Frontpage,3. Golive,1.3.2图形图像处理软件,1. Photoshop,2. corelDraw,3. Fireworks,
