第1章 网页设计基础

2020/2/201网页设计与制作课程安排：上课时间：1-11周。上课地点：仙Z2-113上课方式：讲课+实践上课要求：课上认真听，课下多练习联系方式：[e-mail]参考教材：网页设计与制作(CS4中文版)从新手到高手--唐有明张春蓉等编著--清华大学出版社2020/2/202第1章网页设计基础Internet是由遍布全球的各种网络系统、主机系统，通过统一的协议TCP/IP联接在一起所组成的世界性计算机网络系统。2020/2/203第1章网页设计基础1969年美国国防部高级研究所计划局（ARPA）建立ARPAnet，1986年美国国家科学基金会（NSF）建立了NSFnet。1991年6月中国第一条与国际互联网连接的专线建成，我国1994年3月正式加入Internet，目前我国有权管理Internet国际出口的单位有5家。ARPA于1962年10月开始了研制大型网络的计划ARPANET，1969年12月初步建成这个试验性网络。1980年发展成为TCP/IP协议，1983年美国军方将TCP/IP协议确定为网络协议标准1986年美国国家科学基金会（NSF）建立了NSFnet。2020/2/204第1章网页设计基础1987年，IBM、MCI和Merit共同组建了ANS。1992年ANS建立了一个新的主干网ANSNET。1989年3月，欧洲粒子物理实验室（CERN）英国计算机学者TimBerners-Lee建议建立一个由超文本链接方式组成的信息网Web。1990年11月，NeXT公司（Apple创始人斯蒂夫·乔布斯组建）发布了最初的WorldWideWeb（后来简称）模型。1991年，CERN正式向外界发布了协议标准。在标准基础上，由美国麻省理工学院、CERN及法国计算机与控制国家研究院参加组成的合作机构提出了新的、更为复杂的超文本标记语言HTML草案，发布了HTML标准1.0版，后来升级为HTML2.0版和3.0版。1994年11月，NetscapeCommunicator（网景公司）开发的NetscapeNavigator（导航者）问世。Microsoft也于一年后的1995年11月推出自己的浏览器InternetExplorer。2020/2/205第1章网页设计基础Internet在中国的发展三个阶段：第一阶段（1987～1993年），电子邮件使用阶段1991年6月中国第一条与国际Internet联网的专线由北京的中国科学院高能物理所建成。第二阶段（1994～1995年），教育科研网发展阶段1994年4月正式开通了中国与国际Internet的64Kbps专线连接，并设立了中国最高域名（CN）服务器。到1995年初，高能所将卫星专线改用海地电缆，通过日本进入Internet。这时，我国才算是真正加入了国际Internet行列之中。2020/2/206第1章网页设计基础1994年9月，中国邮电部门开始计划进入Internet，建立中国公用Internet网，即CHINANET，作为公共商用网向公众提供Internet服务。第三阶段（1995年至今），商业应用阶段中国现有的五大Internet网络中国公用计算机互联网络（CHINANET）中国教育与科研网络（CERNET）中国科技网（CSTNET）中国金桥信息网（CHINAGBNET）中国公众多媒体通信网（169网）2020/2/207第1章网页设计基础Internet的功能1.电子邮件〔E-mail〕电子邮件（E-mail）POP3SERVERSMTPSERVERSMTP（SimpleMailProtocol，简单邮件传输协议）POP3（PostOfficeProtocolversion3，邮局协议）2.FTP文件传输协议FTPSERVER文件传输（FTP：FileTransferProtocol）2020/2/208第1章网页设计基础3.远程登录远程登录（Telnet）4.网上查询•名称地址录信息检索工具•索引式信息检索工具•交互式信息检索工具5.网上交流•公告板系统BBS•网络新闻组•电子邮件通信组•聊天2020/2/209第1章网页设计基础TCP/IP简介协议是关于信息格式和信息交换规则的正确描述。网络通信协议就是计算机之间为互相通信、传递信息而所约定的规则。协议的实质是网络通信所使用的一种语言。2020/2/2010第1章网页设计基础IP地址是网上的通信地址，是计算机、服务器、路由器的端口地址，每一个IP地址在全球是惟一的，是运行TCP/IP协议的惟一标识。207.49.68.15网络地址域名（UniqueResourceLocation，中文意义为“统一资源定位符”），IP地址由四个从0到255之间的32位二进制组成，分为网络地址和主机地址。主机地址2020/2/2011第1章网页设计基础随着Internet的快速发展，各种类型的网站正被不断的建立。无论建立任何网站，都离不开网页设计技术。这一章首先介绍网站建设的基本流程，了解网站是如何从无到有的；接着再介绍网页的相关版式与风格；最后在介绍设计网页的一些主要技术和软件。2020/2/20121.1基本概念网站（WebSite）是各种各样网页的集合，有的网站内容众多，如新浪、搜狐等门户网站；有的网站只有几个页面，如个人网站。网页（WebPage）实际上是一个文件，网页经由网址（URL）来识别与存取。当浏览者输入一个网址或单击某个链接，在浏览器中显示出来的就是一个网页。2020/2/20131.1基本概念静态网页是在动态网页出现后相对而言的传统采用HTML编写的网页。动态网页指的是采用ASP、PHP、CGI等程序动态生成的页面，在网络空间中并不存在这个页面，只有在接到用户的访问要求后才生成并传输到用户的浏览器中。2020/2/20141.1基本概念浏览器：用于打开显示网页的软件。最常见的是Windows系统自带的IE浏览器。还有火狐Firefox、360安全浏览器、遨游等等。1）网址：用于定位某个网站某个页面的一串字符，通常是这种格式）主页：访问网站时，默认打开的第一个页面就是主页也叫首页。2020/2/20151.2网站整体策划规范的网站建设需要进行整体的策划，具体流程如图所示。2020/2/20161.3网页的基本构成虽然网页种类繁多，形式内容各有不同。但网页的基本构成要素大体相同。•LogoLogo是网站的标志。•导航条导航条可以帮助浏览者迅速的找到需要的信息。2020/2/20171.3网页的基本构成•Banner网页中的一些广告。•内容板块取决与网站的类型。2020/2/20181.3网页的基本构成•版尾模块置于网页的最底端，通常放置网站的版权信息。2020/2/20191.4网页的基本布局“同”字型也称“国”字型或“口”字型结构布局，此种布局的最上边是网站的标题及横幅广告，左右分列两条内容，中间是主要部分，最下边的是版权区。该布局的优点是充分利用版面，信息量大，与其它页面的链接多，切换方便。缺点是页面拥挤，不够灵活。如图：2020/2/20201.4网页的基本布局“T”字型结构布局也称“拐角型”结构布局，该页面顶部是标题及横幅广告，左侧通常放导航链接，右侧大部分空间用来显示网页的内容。此种布局的优点是页面结构清晰，主次分明，栏目扩充便利。缺点是规矩呆板，如果细节色彩上不加注意，很容易落入“看之无味”的感觉。如图：2020/2/20211.4网页的基本布局左右框架型这是一种左右分割屏幕的框架结构，一般在左面是导航链接，最上面有时会有一个小的标题或标志，右面通常显示左边的链接内容。优点是结构清晰，自由活泼，可显示较多的文字、图像。缺点是将两部分有机的结合比较困难，不适合数据巨大的网站。2020/2/20221.4网页的基本布局上下框架型上下框架型与左右框架型类似，区别仅在于这里采用上下分割。封面型也称“pop型”或自由型布局，通常以一张精美图片作为页面的设计中心，菜单栏目自由地摆放在页面上。其优点是页面令人赏心悦目，缺点是显示速度慢，文字信息量少，只适合以图像为主要内容的站点。2020/2/20231.4网页的基本布局Flash型这种结构与封面型类似，只是这里采用了目前流行的Flash设计，与封面型不同的是，页面所表达的信息因Flash的强大功能而更为丰富，页面上不仅可以有文字、图像，还可以加入动画、视频与音频效果。变化型变化型是上面几种类型的综合与演变。2020/2/20241.5网页色彩三原色（RGB）常见色彩的RGB值：Black=#000000Green=#008000Silver=#C0C0C0Lime=#00FF00Gray=#808080Olive=#808000White=#FFFFFFYellow=#FFFF00Maroon=#800000Navy=#000080Red=#FF0000Blue=#0000FFPurple=#800080Teal=#008080Fuchsia=#FF00FFAqua=#00FFFF2020/2/20251.5网页色彩不同色系的应用蓝色系：商业和宣传用色，体现一种专业和正式的氛围；绿色系：自然色，有很强的自然效果，缓解视力上的疲劳，用于环保相关的场合；红色系：运动的色彩，有很强的视觉感染力和号召力；黄色系：轻松随意的生活气息，体现一种友善和多维的效果，非常鲜明可以与许多种颜色搭配；黑色系：神秘而庄重。2020/2/20261.6常用网页设计软件Photoshop简介Photoshop是Adobe公司开发的强大的图像处理软件，在图像设计及处理方面得到广泛的应用，是公认最出色的图像处理软件。目前几乎所有的广告出版、平面印刷等领域都选择Photoshop做为制作软件。2020/2/20271.6常用网页设计软件图形绘制主要功能图像处理2020/2/20281.6常用网页设计软件2020/2/20291.6常用网页设计软件2020/2/20301.6常用网页设计软件2020/2/20311.6常用网页设计软件DreamweaverCS4简介网页三剑客：网页三剑客，顾名思义，是一套强大的网页编辑工具，最初是由Macromedia公司(现被Adobe公司收购)开发出来的。由Dreamweaver(网页制作)，Fireworks(矢量图形制作和图像处理)，Flash(动画制作)三个软件组成，俗称三剑客。现已逐渐被Photoshop取代2020/2/20321.6常用网页设计软件AdobeDreamweaverCS4是建立Web站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于CSS的设计的领先支持到手工编码功能Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用Dreamweaver及所选择的服务器技术来创建功能强大的Internet应用程序，从而使用户能连接到数据库、Web服务和旧式系统。2020/2/20331.6常用网页设计软件2020/2/20341.6常用网页设计软件2020/2/20351.6常用网页设计软件2020/2/20361.6常用网页设计软件Flash简介Flash是Macromedia公司开发的矢量动画及多媒体开发软件。基于矢量绘图流式播放技术多媒体特性强大的交互功能广泛的平台支持易学易用、可扩展性好2020/2/20371.6常用网页设计软件矢量图像仅由线条和线条所封闭的填充区域组成，所需存储空间小，可任意缩放尺寸而不影响画面质量；位图图像由大量的像素点组成，比较逼真，但所需存储空间大，随着图像尺寸的放