第1章 网页设计基础

1、2021-10-191网页设计与制作课程安排：上课时间：1-11周。上课地点：仙z2-113上课方式：讲课+实践上课要求：课上认真听，课下多练习联系方式：参考教材：网页设计与制作(cs4中文版)从新手到高手 -唐有明 张春蓉等编著 -清华大学出版社2021-10-192第1章 网页设计基础internet是由遍布全球的各种网络系统、主机系统，通过统一的协议tcp/ip联接在一起所组成的世界性计算机网络系统。 2021-10-193第1章 网页设计基础1969年美国国防部高级研究所计划局（arpa）建立arpanet，1986年美国国家科学基金会（nsf）建立了nsfnet。 1991年6月中国

2、第一条与国际互联网连接的专线建成，我国1994年3月正式加入internet，目前我国有权管理internet国际出口的单位有5家。 arpa于1962年10月开始了研制大型网络的计划arpanet，1969年12月初步建成这个试验性网络。 1980年发展成为tcp/ip协议，1983年美国军方将tcp/ip协议确定为网络协议标准1986年美国国家科学基金会（nsf）建立了nsfnet。 2021-10-194第1章 网页设计基础1987年，ibm、mci和merit共同组建了ans。1992年ans建立了一个新的主干网ansnet。1989年3月，欧洲粒子物理实验室（cern）英国计算机学者

3、tim berners-lee建议建立一个由超文本链接方式组成的信息网web。 1990年11月，next公司（apple创始人斯蒂夫乔布斯组建）发布了最初的world wide web（后来简称www或w3）模型。1991年，cern正式向外界发布了www协议标准。在www标准基础上，由美国麻省理工学院、cern及法国计算机与控制国家研究院参加组成的合作机构提出了新的、更为复杂的超文本标记语言html草案，发布了html标准1.0版，后来升级为html2.0版和3.0版。1994年11月，netscape communicator （网景公司）开发的netscape navigator（导航

4、者）问世。 microsoft也于一年后的1995年11月推出自己的浏览器internet explorer。 2021-10-195第1章 网页设计基础internet在中国的发展 三个阶段 ：第一阶段（19871993年），电子邮件使用阶段 1991年6月中国第一条与国际internet联网的专线由北京的中国科学院高能物理所建成。 第二阶段（19941995年），教育科研网发展阶段1994年4月正式开通了中国与国际internet的64kbps专线连接，并设立了中国最高域名（cn）服务器。到1995年初，高能所将卫星专线改用海地电缆，通过日本进入internet。这时，我国才算是真正加入了

5、国际internet行列之中。 2021-10-196第1章 网页设计基础1994年9月，中国邮电部门开始计划进入internet，建立中国公用internet网，即chinanet，作为公共商用网向公众提供internet服务。 第三阶段（1995年至今），商业应用阶段中国现有的五大internet网络 v中国公用计算机互联网络（chinanet） v中国教育与科研网络（cernet） v中国科技网（cstnet） v中国金桥信息网（chinagbnet） v中国公众多媒体通信网（169网） 2021-10-197第1章 网页设计基础internet的功能 1. 电子邮件e-mailpop3

6、 serversmtp serversmtp（simple mail protocol，简单邮件传输协议）pop3（post office protocol version 3，邮局协议） 2.ftp文件传输协议ftp server2021-10-198第1章 网页设计基础3.远程登录4.网上查询名称地址录信息检索工具索引式信息检索工具交互式信息检索工具 5.网上交流公告板系统bbs网络新闻组电子邮件通信组 聊天 2021-10-199第1章 网页设计基础tcp/ip简介网络通信协议就是计算机之间为互相通信、传递信息而所约定的规则。协议的实质是网络通信所使用的一种语言语言。2021-10-19

7、10第1章 网页设计基础ipip地址地址是网上的通信地址，是计算机、服务器、路由器的端口地址，每一个ip地址在全球是惟一的，是运行tcp/ip协议的惟一标识。 207 . 49 . 68 . 15网络地址 域名 代表ip地址 52ip地址也称为url（unique resource location，中文意义为“统一资源定位符”），ip地址由四个从0到255之间的32位二进制组成，分为网络地址和主机地址。主机地址2021-10-1911第1章 网页设计基础 随着internet的快速发展，各种类型的网站正被不断的建立。无论建立任何网站，都离不开网页设计技术。这一章首先介

8、绍网站建设的基本流程，了解网站是如何从无到有的；接着再介绍网页的相关版式与风格；最后在介绍设计网页的一些主要技术和软件。2021-10-19121.1 基本概念l网站（web site）是各种各样网页的集合，有的网站内容众多，如新浪、搜狐等门户网站；有的网站只有几个页面，如个人网站。l网页（web page）实际上是一个文件，网页经由网址（url）来识别与存取。当浏览者输入一个网址或单击某个链接，在浏览器中显示出来的就是一个网页。2021-10-19131.1 基本概念是在动态网页出现后相对而言的传统采用html编写的网页。指的是采用asp、php、cgi等程序动态生成的页面，在网络空间中并不

9、存在这个页面，只有在接到用户的访问要求后才生成并传输到用户的浏览器中。2021-10-19141.1 基本概念l浏览器：用于打开显示网页的软件。最常见的是windows系统自带的ie浏览器。还有火狐firefox、360安全浏览器、遨游等等。 1）网址：用于定位某个网站某个页面的一串字符，通常是这种格式http:/2）主页：访问网站时，默认打开的第一个页面就是主页也叫首页。2021-10-19151.2 网站整体策划l规范的网站建设需要进行整体的策划，具体流程如图所示。2021-10-19161.3 网页的基本构成l虽然网页种类繁多，形式内容各有不同。但网页的基本构成要素大体相同。 logo

10、logo 是网站的标志。 导航条导航条 导航条可以帮助浏览者迅速的找到需要的信息。 2021-10-19171.3 网页的基本构成 banner 网页中的一些广告。 内容板块内容板块 取决与网站的类型。2021-10-19181.3 网页的基本构成 版尾模块版尾模块 置于网页的最底端，通常放置网站的版权信息。2021-10-19191.4 网页的基本布局l“同同”字型字型 也称“国”字型或“口”字型结构布局，此种布局的最上边是网站的标题及横幅广告，左右分列两条内容，中间是主要部分，最下边的是版权区 。该布局的优点是充分利用版面，信息量大，与其它页面的链接多，切换方便。缺点是页面拥挤，不够灵活。

11、 如图：2021-10-19201.4 网页的基本布局l“t”字型结构布局 也称“拐角型” 结构布局，该页面顶部是标题及横幅广告，左侧通常放导航链接，右侧大部分空间用来显示网页的内容。此种布局的优点是页面结构清晰，主次分明，栏目扩充便利。缺点是规矩呆板，如果细节色彩上不加注意，很容易落入“看之无味”的感觉。如图：2021-10-19211.4 网页的基本布局l左右框架型 这是一种左右分割屏幕的框架结构，一般在左面是导航链接，最上面有时会有一个小的标题或标志，右面通常显示左边的链接内容。优点是结构清晰，自由活泼，可显示较多的文字、图像。缺点是将两部分有机的结合比较困难，不适合数据巨大的网站。20

12、21-10-19221.4 网页的基本布局l上下框架型 上下框架型与左右框架型类似，区别仅在于这里采用上下分割。l封面型 也称“pop型”或自由型布局，通常以一张精美图片作为页面的设计中心，菜单栏目自由地摆放在页面上。其优点是页面令人赏心悦目，缺点是显示速度慢，文字信息量少，只适合以图像为主要内容的站点。2021-10-19231.4 网页的基本布局lflash型 这种结构与封面型类似，只是这里采用了目前流行的flash设计，与封面型不同的是，页面所表达的信息因flash的强大功能而更为丰富，页面上不仅可以有文字、图像，还可以加入动画、视频与音频效果。l变化型 变化型是上面几种类型的综合与演变

13、。2021-10-19241.5 网页色彩l三原色（rgb）l常见色彩的rgb值： black = #000000 green = #008000 silver = #c0c0c0 lime = #00ff00 gray = #808080 olive = #808000 white = #ffffff yellow = #ffff00 maroon = #800000 navy = #000080 red = #ff0000 blue = #0000ff purple = #800080 teal = #008080 fuchsia= #ff00ff aqua = #00ffff2021-1

14、0-19251.5 网页色彩l不同色系的应用蓝色系：商业和宣传用色，体现一种专业和正式的氛围；绿色系：自然色，有很强的自然效果，缓解视力上的疲劳，用于环保相关的场合；红色系：运动的色彩，有很强的视觉感染力和号召力；黄色系：轻松随意的生活气息，体现一种友善和多维的效果，非常鲜明可以与许多种颜色搭配；黑色系：神秘而庄重。2021-10-19261.6 常用网页设计软件lphotoshop photoshop 简介简介 photoshop是adobe公司开发的强大的图像处理软件，在图像设计及处理方面得到广泛的应用，是公认最出色的图像处理软件。目前几乎所有的广告出版、平面印刷等领域都选择photosh

15、op 做为制作软件。2021-10-19271.6 常用网页设计软件图形绘制图形绘制主要功能主要功能图像处理图像处理2021-10-19281.6 常用网页设计软件2021-10-19291.6 常用网页设计软件2021-10-19301.6 常用网页设计软件2021-10-19311.6 常用网页设计软件ldreamweaver cs4dreamweaver cs4简介简介l网页三剑客：网页三剑客： 网页三剑客，顾名思义，是一套强大的网页编辑工具，最初是由macromedia公司 (现被adobe公司收购)开发出来的。由dreamweaver (网页制作 )，fireworks (矢量图形制

16、作和图像处理 )，flash (动画制作 )三个软件组成，俗称三剑客。现已逐渐被photoshop取代2021-10-19321.6 常用网页设计软件 adobe dreamweaver cs4是建立web站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于css的设计的领先支持到手工编码功能dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用dreamweaver 及所选择的服务器技术来创建功能强大的internet应用

17、程序，从而使用户能连接到数据库、web服务和旧式系统。2021-10-19331.6 常用网页设计软件2021-10-19341.6 常用网页设计软件2021-10-19351.6 常用网页设计软件2021-10-19361.6 常用网页设计软件lflash flash 简介简介 flash是macromedia公司开发的矢量动画及多媒体开发软件。l基于矢量绘图l流式播放技术l多媒体特性l强大的交互功能l广泛的平台支持l易学易用、可扩展性好2021-10-19371.6 常用网页设计软件l矢量图像仅由线条和线条所封闭的填充区域组成，所需存储空间小，可任意缩放尺寸而不影响画面质量；l位图图像由大

18、量的像素点组成，比较逼真，但所需存储空间大，随着图像尺寸的放大画面品质将大幅度下降。2021-10-19381.6 常用网页设计软件l流式（stream）播放技术使得动画可以边播放边下载，从而缓解浏览者焦急等待的情绪。l可以将动画、视频、音乐、声效等有机融合在一起l支持多种图像格式文件导入l可导入photoshop、illustrator、freehand等软件制作的图形和图像l可导入adobe pdf电子文档和adobe illustrator 10文件l支持视频、音频文件导入l可从外部调用视频文件l可使用mp3l支持多种动画输出格式lswf、spl、gif、ai、bmp、jpg、png、avi、mov、mav、emf、wmf、eps、dxf2021-10-19391.6 常用网页设计软件l内置的actionscript脚本语言，易于精确实现复杂的交互事件行为控制。l可在动画中加入滚动条、复选框、下拉菜单和拖动物体等各种交互组件；l可与java或其他类型的程序融合在一起，在不同的操作平台和浏览器中播放；l支持动态数据交互，a