HTML概述

1.1基本概念

上网冲浪时（即浏览网页），呈如今人们面前的漂亮页面就是网页，是网络内容的视觉呈现。网页是怎样制做的呢？网页的主体是一个HTML代码建立的文本文件，使用HTML中的相应标签，便可将文本、图像、动画及音乐等内容包含在网页中，再经过浏览器的解析，多姿多彩的网页内容就呈现出来了。

网页中能够包含不少的内容做为网页的元素，最基本的元素是文字、连接、表单。此外还包括静态的图形、动画、声音、视频等其余形式的多媒体文件。最终目的是向访问者传达有价值的信息，并留下深入的印象。

网页不是由一个单独的文件构成。

浏览器和服务器的概念

互联网--世界各地的计算机相互链接而成一个网络。

浏览网页，其实是从远程的计算机上读取一些内容，而后在本地计算机上显示出来。

浏览器发出请求，对应服务器将信息传送至用户的计算机上，浏览器再负责解析出网页的内容，并展现出来。

互联网--“万维网”，WWW--“World Wide Web”简称Web。发源于欧洲量子物理实验室。

其实是一个大型的相互链接的文件所组成的集合体。

1.2 HTML介绍

HTML(Hyper Text Markup Language)，中文一般称为“超文本标记语言”，是因特网上编写网页的主要语言。经过HTTP协议，使HTML文件能够在互联网上进行跨平台的文件交换。

HTML文档的主要特色：

一、容易建立。

二、文件占用空间小，可以尽快地在网络环境下传输和显示。

三、平台无关性。HTML独立于操做系统平台，能对多平台兼容。

四、简单易学，不须要很深的编程知识。

五、可扩展性好。

HTML的简单发展历史

1993.6 HTML1.0 互联网工程工做小组（IETF）工做草案发布

1995.11 HTML2.0 发布

1996.1 HTML3.2 W3C推荐标准

1997.12 HTML4.0 W3C推荐标准

1999.12 HTML4.01 W3C推荐标准

2008.8 HTML5.0 W3C工做草案

1.3网页的设计与开发过程

1）明确网站定位

应清楚创建站点的目标定位，肯定它将提供什么样的服务，应该提供哪些内容。肯定站点目标定位，从三个方面考虑：

A、网站的总体定位，如大型商用网站、小型电子商务网站，门户网站、我的主页、科研网站、交流平台、企业介绍性网站、服务性网站。对网站的总体进行一个客观的评估。以发展的眼光看待问题。不然将带来许多升级和更新方面的不便。

B、网站的主要内容。若是是综合性网站，便会涉及新闻、邮件、电子商务、论坛等内容，就要求网页结构紧凑、美观大方；对于侧重于某一方面的网站，如书籍网站、游戏网站、音乐网站等，则每每对网页的美工要求较高，使用模板较多，更新网页和数据库较快；若是是我的网站或介绍性网站，则更新速度较慢，浏览率低，连接较少，内容也不如其余网站丰富，但对美工要求更高一些，可以使用较鲜艳、明亮的颜色，同时添加动画等，使网页更具动感、充满活力，不然网站就没有吸引力。

C、网站浏览者的教育程度。对于不一样的浏览人群，网站的吸引力是大相径庭的，如针对少年儿童的网站，卡通和科普性的内容更符合其浏览品味，也能达到寓教于乐的目的；针对学生网站，每每对网站的动感程度和特效技术要求更高一些；对于商务浏览者，网站的安全性和易用性更为重要。

2）收集信息和素材（前期策划中最为关键的一步）栏目的设置有规划

建立目录，放置网站文件，文件名最好用英文。

A、文本内容素材的收集文本素材内容既要丰富，又要便于组织。

B、艺术内容素材的收集只有文本内容的网站，是枯燥乏味、缺少生机的。多种媒体内容，会使网页充满动感与生机。

3）策划栏目结构（肯定重点）栏目归类根据主题、功能或内容分类

合理组织站点结构，可以加快对站点的设计，提升工做效率，节省工做时间。

4）设计页面图像方案美术设计师（美工）拿出几个不一样风格的方案，考虑公司总体形象  Logo、标准色彩、导航条、首页布局等。

5）制做页面版面布局

版面，是指在浏览器中看到的完整的一个页面的大小。因显示器分辨率不一样，同一个页面的大小可能出现不一样的尺寸。640*480 800*600 1024*768  实际设计时，限制在778之内

布局，是指以最适合的方式将图片和文字排放在页面的不一样位置。这是一个创意的过程，须要必定的经验与灵感。

页面制做复杂而细致的过程，按先大后小、先简单后复杂的顺序。灵活运用模板与库，提升制做效率。

静态页面的构建，注意页面之间的逻辑关系静态与动态部分的区分

6）实现后台功能编程实现

留言板、搜索功能、新闻发布、购物网站、聊天室

7）整合、测试与发布

将网站内容上传至服务器以前，应先在本地站点进行完整测试，以保证页面外观和效果、连接和页面下载时间等与设计相同。

站点测试主要包括检测站点在各类浏览器中的兼容性、检测站点中是否有失效的连接。发现包含在网页中的错误。

发布。用软件工具，上传至服务器。

1.4 网页设计的基本原则

明确主题页面都围绕这个内容来制做

首页很重要反应整个网站给人的总体感受，可否吸引访问者，全在于首页的设计效果。条理清楚，类别选项人性化，能让人快速找到目标。

分类如按主题分类、按性质分类、按组织结构分类、按人的思考方式分类等。

互动性好的网站必须与访问者有良好的互动关系，包括总体呈现、界面引导等。

图像应用技巧具有醒目、吸引人和传达信息的功能。用得好会给网页增色，用很差拔苗助长。

避免滥用技术技术是让人着迷的东西。好的技术运用会使页面栩栩如生，给人全新的感受，不恰当的使用会起相反的效果，让人失去兴趣。

及时更新和维护访问者但愿看到新鲜的东西，没人对过期的信息感兴趣。

1.5 网页设计的成功要素

总体布局网页设计做为一种视觉语言，讲究编排和布局。就干净整洁、条理清楚。过多的闪烁、色彩、图片只能会让访问者无所适从。

信息提供有价值的内容

下载速度是吸引访问者的关键因素，若是20－30秒还不能打开，通常人会没有耐心。图像大小应控制在6－8k为宜。

图像和版面设计关系到第一印象，图像应集中反映主页所传达的主要信息内容。

文字的可读性主要是选择字体，通用字体最易阅读，特殊字体用于标题效果较好。颜色也很重要。

多媒体功能的运用可吸引访问者的注意力，但要考虑传输速度。

导向清晰使访问者能在网站上自由地前进或后退。人们习惯于从上到下，从左到右阅读，主要导航条应放置在左边，长页面底面设置简单导航。

1.6 设计网页的三要素

结构Structure、表现Presentation、行为Behavior。

是什么什么样子作什么

HTML           CSS               JavaScript

三者分离，是一个重要的思想。

1.7 与设计相关的技术因素

1）屏幕分辨率  pixel   1024*786   1280*1024   1280*800  1440*900

2）浏览器类型  IE  firefox  Opera  Mozilla   Safari  Chrome