第1章 网页设计基础.ppt
2019/2/10,1,网页设计与制作,课程安排：,上课时间：1-11周。 上课地点：仙Z2-113 上课方式：讲课+实践 上课要求：课上认真听，课下多练习,联系方式：liyan94hotmail.com,参考教材：,网页设计与制作(CS4中文版)从新手到高手 -唐有明 张春蓉等编著 -清华大学出版社,2019/2/10,2,第1章 网页设计基础,Internet是由遍布全球的各种网络系统、主机系统，通过统一的协议TCP/IP联接在一起所组成的世界性计算机网络系统。,2019/2/10,3,第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。,2019/2/10,4,第1章 网页设计基础,1987年，IBM、MCI和Merit共同组建了ANS。1992年ANS建立了一个新的主干网ANSNET。 1989年3月，欧洲粒子物理实验室（CERN）英国计算机学者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（导航者）问世。 Microsoft也于一年后的1995年11月推出自己的浏览器Internet Explorer。,2019/2/10,5,第1章 网页设计基础,Internet在中国的发展,三个阶段 ：,第一阶段（19871993年），电子邮件使用阶段,1991年6月中国第一条与国际Internet联网的专线由北京的中国科学院高能物理所建成。,第二阶段（19941995年），教育科研网发展阶段,1994年4月正式开通了中国与国际Internet的64Kbps专线连接，并设立了中国最高域名（CN）服务器。到1995年初，高能所将卫星专线改用海地电缆，通过日本进入Internet。这时，我国才算是真正加入了国际Internet行列之中。,2019/2/10,6,第1章 网页设计基础,1994年9月，中国邮电部门开始计划进入Internet，建立中国公用Internet网，即CHINANET，作为公共商用网向公众提供Internet服务。,第三阶段（1995年至今），商业应用阶段,中国现有的五大Internet网络,中国公用计算机互联网络（CHINANET）,中国教育与科研网络（CERNET）,中国科技网（CSTNET）,中国金桥信息网（CHINAGBNET）,中国公众多媒体通信网（169网）,2019/2/10,7,第1章 网页设计基础,Internet的功能,1. 电子邮件E-mail,电子邮件（E-mail）,SMTP（Simple Mail Protocol，简单邮件传输协议） POP3（Post Office Protocol version 3，邮局协议）,2.FTP文件传输协议,文件传输（FTP：File Transfer Protocol）,2019/2/10,8,第1章 网页设计基础,3.远程登录,远程登录（Telnet）,4.网上查询,名称地址录信息检索工具 索引式信息检索工具 交互式信息检索工具,5.网上交流,公告板系统BBS 网络新闻组 电子邮件通信组 聊天,2019/2/10,9,第1章 网页设计基础,TCP/IP简介,协议是关于信息格式和信息交换规则的正确描述。,网络通信协议就是计算机之间为互相通信、传递信息而所约定的规则。协议的实质是网络通信所使用的一种语言。,2019/2/10,10,第1章 网页设计基础,IP地址是网上的通信地址，是计算机、服务器、路由器的端口地址，每一个IP地址在全球是惟一的，是运行TCP/IP协议的惟一标识。,207 . 49 . 68 . 15,网络地址,域名www.microsoft.com 代表IP地址 207.46.156.252,IP地址也称为URL（Unique Resource Location，中文意义为“统一资源定位符”），IP地址由四个从0到255之间的32位二进制组成，分为网络地址和主机地址。,主机地址,2019/2/10,11,第1章 网页设计基础,随着Internet的快速发展，各种类型的网站正被不断的建立。无论建立任何网站，都离不开网页设计技术。这一章首先介绍网站建设的基本流程，了解网站是如何从无到有的；接着再介绍网页的相关版式与风格；最后在介绍设计网页的一些主要技术和软件。,2019/2/10,12,1.1 基本概念,网站（Web Site）是各种各样网页的集合，有的网站内容众多，如新浪、搜狐等门户网站；有的网站只有几个页面，如个人网站。 网页（Web Page）实际上是一个文件，网页经由网址（URL）来识别与存取。当浏览者输入一个网址或单击某个链接，在浏览器中显示出来的就是一个网页。,2019/2/10,13,1.1 基本概念,静态网页是在动态网页出现后相对而言的传统采用HTML编写的网页。,动态网页指的是采用ASP、PHP、CGI等程序动态生成的页面，在网络空间中并不存在这个页面，只有在接到用户的访问要求后才生成并传输到用户的浏览器中。,2019/2/10,14,1.1 基本概念,浏览器：用于打开显示网页的软件。最常见的是Windows系统自带的IE浏览器。 还有火狐Firefox、360安全浏览器、遨游等等。 1）网址：用于定位某个网站某个页面的一串字符，通常是这种格式 http:/www.sina.com 2）主页：访问网站时，默认打开的第一个页面就是主页也叫首页。,2019/2/10,15,1.2 网站整体策划,规范的网站建设需要进行整体的策划，具体流程如图所示。,2019/2/10,16,1.3 网页的基本构成,虽然网页种类繁多，形式内容各有不同。但网页的基本构成要素大体相同。,Logo Logo 是网站的标志。,导航条 导航条可以帮助浏览者迅速的找到需要的信息。,2019/2/10,17,1.3 网页的基本构成,Banner 网页中的一些广告。,内容板块 取决与网站的类型。,2019/2/10,18,1.3 网页的基本构成,版尾模块 置于网页的最底端，通常放置网站的版权信息。,2019/2/10,19,1.4 网页的基本布局,“同”字型 也称“国”字型或“口”字型结构布局，此种布局的最上边是网站的标题及横幅广告，左右分列两条内容，中间是主要部分，最下边的是版权区 。该布局的优点是充分利用版面，信息量大，与其它页面的链接多，切换方便。缺点是页面拥挤，不够灵活。 如图：,2019/2/10,20,1.4 网页的基本布局,“T”字型结构布局 也称“拐角型” 结构布局，该页面顶部是标题及横幅广告，左侧通常放导航链接，右侧大部分空间用来显示网页的内容。此种布局的优点是页面结构清晰，主次分明，栏目扩充便利。缺点是规矩呆板，如果细节色彩上不加注意，很容易落入“看之无味”的感觉。如图：,2019/2/10,21,1.4 网页的基本布局,左右框架型 这是一种左右分割屏幕的框架结构，一般在左面是导航链接，最上面有时会有一个小的标题或标志，右面通常显示左边的链接内容。优点是结构清晰，自由活泼，可显示较多的文字、图像。缺点是将两部分有机的结合比较困难，不适合数据巨大的网站。,2019/2/10,22,1.4 网页的基本布局,上下框架型 上下框架型与左右框架型类似，区别仅在于这里采用上下分割。 封面型 也称“pop型”或自由型布局，通常以一张精美图片作为页面的设计中心，菜单栏目自由地摆放在页面上。其优点是页面令人赏心悦目，缺点是显示速度慢，文字信息量少，只适合以图像为主要内容的站点。,2019/2/10,23,1.4 网页的基本布局,Flash型 这种结构与封面型类似，只是这里采用了目前流行的Flash设计，与封面型不同的是，页面所表达的信息因Flash的强大功能而更为丰富，页面上不仅可以有文字、图像，还可以加入动画、视频与音频效果。 变化型 变化型是上面几种类型的综合与演变。,2019/2/10,24,1.5 网页色彩,三原色（RGB） 常见色彩的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 = #00FFFF,2019/2/10,25,1.5 网页色彩,不同色系的应用,蓝色系：商业和宣传用色，体现一种专业和正式的氛围； 绿色系：自然色，有很强的自然效果，缓解视力上的疲劳，用于环保相关的场合； 红色系：运动的色彩，有很强的视觉感染力和号召力； 黄色系：轻松随意的生活气息，体现一种友善和多维的效果，非常鲜明可以与许多种颜色搭配； 黑色系：神秘而庄重。,2019/2/10,26,1.6 常用网页设计软件,Photoshop 简介 Photoshop是Adobe公司开发的强大的图像处理软件，在图像设计及处理方面得到广泛的应用，是公认最出色的图像处理软件。目前几乎所有的广告出版、平面印刷等领域都选择Photoshop 做为制作软件。,2019/2/10,27,1.6 常用网页设计软件,2019/2/10,28,1.6 常用网页设计软件,2019/2/10,29,1.6 常用网页设计软件,2019/2/10,30,1.6 常用网页设计软件,2019/2/10,31,1.6 常用网页设计软件,Dreamweaver CS4简介 网页三剑客： 网页三剑客，顾名思义，是一套强大的网页编辑工具，最初是由Macromedia公司 (现被Adobe公司收购)开发出来的。由Dreamweaver (网页制作 )，Fireworks (矢量图形制作和图像处理 )，Flash (动画制作 )三个软件组成，俗称三剑客。,现已逐渐被Photoshop取代,2019/2/10,32,1.6 常用网页设计软件,Adobe Dreamweaver CS4是建立Web站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于CSS的设计的领先支持到手工编码功能Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用Dreamweaver 及所选择的服务器技术来创建功能强大的Internet应用程序，从而使用户能连接到数据库、Web服务和旧式系统。,2019/2/10,33,1.6 常用网页设计软件,2019/2/10,34,1.6 常用网页设计软件,2019/2/10,35,1.6 常用网页设计软件,2019/2/10,36,1.6 常用网页设计软件,Flash 简介 Flash是Macromedia公司开发的矢量动画及多媒体开发软件。 基于矢量绘图 流式播放技术 多媒体特性 强大的交互功能 广泛的平台支持 易学易用、可扩展性好,2019/2/10,37,1.6 常用网页设计软件,矢量图像仅由线条和线条所封闭的填充区域组成，所需存储空间小，可任意缩放尺寸而不影响画面质量； 位图图像由大量的像素点组成，比较逼真，但所需存储空间大，随着图像尺寸的放大画面品质将大幅度下降。,2019/2/10,38,1.6 常用网页设计软件,流式（stream）播放技术使得动画可以边播放边下载，从而缓解浏览者焦急等待的情绪。 可以将动画、视频、音乐、声效等有机融合在一起 支持多种图像格式文件导入 可导入Photoshop、Illustrator、Freehand等软件制作的图形和图像 可导入Adobe PDF电子文档和Adobe Illustrator 10文件 支持视频、音频文件导入 可从外部调用视频文件 可使用MP3 支持多种动画输出格式 SWF、SPL、GIF、AI、BMP、JPG、PNG、AVI、MOV、MAV、EMF、WMF、EPS、DXF,2019/2/10,39,1.6 常用网页设计软件,内置的ActionScript脚本语言，易于精确实现复杂的交互事件行为控制。 可在动画中加入滚动条、复选框、下拉菜单和拖动物体等各种交互组件； 可与Java或其他类型的程序融合在一起，在不同的操作平台和浏览器中播放； 支持动态数据交互，ASP功能的全面嵌入使其可用于动态电子商务网站及虚拟社区等的建设。,2019/2/10,40,1.6 常用网页设计软件,任何安装有Flash Player插件的网页浏览器都可以观看Flash动画，目前已经有95%以上的浏览器安装了Flash Player，几乎包含了所有的浏览器和操作系统 强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画； 通过第三方开发的Flash插件程序，可以方便地实现一些以往需要非常繁琐的操作才能实现的动态效果，大大提高了Flash影片的制作效率。,2019/2/10,41,1.6 常用网页设计软件,2019/2/10,42,下课了。,休息一会儿。,
