网 页 设 计 与 制 作

1. 网 页 设 计 与 制 作 安庆职业技术学院 jpkc.aqvtc.cn

2. 1 2 3 7 3 5 6 一、网络 二、 网站与网页 三、网页设计 七、习题 四、实例介绍HTML语言设计 五、网页制作素质和修养 六、网站与网页的关系 本讲内容 安庆职业技术学院 jpkc.aqvtc.cn

3. 第一章 网站网页的基础知识 安庆职业技术学院 jpkc.aqvtc.cn

4. 信息(information),已经成为哲学、自然科学、技术科学和社会科学等各个领域所广泛应用的概念。随着信息技术的发展，网络成为人们共享信息的必然。建立网站也就是必然逝在必行。如何建好网站，如何建立有特色的网站将是我们这门课程所要讲述的内容。 第一节 网络 安庆职业技术学院 jpkc.aqvtc.cn

5. 目前计算机网络的比较公认的定义是：计算机网络是指在网络协议的控制下，通过通讯设备和线路来实现地理位置不同且具有独立功能的多个计算机系统之间的连接，并通过网络操作系统等网络软件来实现资源共享的系统。 一、网络的定义 安庆职业技术学院 jpkc.aqvtc.cn

6. 在20世纪50年代中期，许多系统都将地理上分散的多个终端通过通讯线路连接到一台中心计算机上，这样就是出现了计算机系统。随着远程终端的增多，在主机前增加了前端机，但是人们把计算机网络定义为“以传输信息为目的的而连接起来，实现远程信息处理或进一步达到资源共享的系统”，这就是网络的趋形。20世纪70年代至80年代中期计算机网络得到了迅速的发展。ISO在1984年颁布了OSI/RM。定义为新一代计算机网络体系结构的基础，这七层模型分别为：物理层、链路层、网络层、传输层、会话层、表示层、应用层 二、计算机网络的定义和发展 安庆职业技术学院 jpkc.aqvtc.cn

7. 计算机网络分类方法多种多样，常用的方法有：按网络的拓扑结构分类、按传输介质分类、按速率的分类、按数据交换方式分类以及按网络覆盖的地理范围分类。按照网络覆盖的地理位置范围的大小分为：局域网，城域网，广域网。我们通常说的上网是指广域网。 三、计算机网络的分类 安庆职业技术学院 jpkc.aqvtc.cn

8. 1 2 数据通讯 资源共享 四、网络的功能 安庆职业技术学院 jpkc.aqvtc.cn

9. 一、网站 1、网站功能：网站是提供发布信息、收集信息的平台。 2、网站概念：简单地说，网站是由网页通过超级链接有机地集合而成，通过浏览器看到的画面就是网页。 第二节 网站与网页 安庆职业技术学院 jpkc.aqvtc.cn

10. 从网站的目的将网站分为： 企业网站； 政府网站； 专业网站； 个人网站。 二、网站的分类 安庆职业技术学院 jpkc.aqvtc.cn

11. 故障管理； 计费管理； 配置管理； 性能管理； 安全管理； 站点信息管理。 三、网站的管理功能 对网络的故障检测和排除 记录网络资源实时计费 配置网络优化网络 对通信效率评价 授权、访问、加密机制管理 对信息的跟踪确保完整可靠 安庆职业技术学院 jpkc.aqvtc.cn

12. 中科院系统的12个分院和123个研究所(95年) 四、中国Internet 概况 CSNET 中国科技网 原国家教委94年12月组织清华、北大等高校承建 CERNET中国教育网 Internet CHINANET中国电信网 CHINAGBN 中国经济网 中国公用计算机互联网，即163、169 UNINET 中国联通网 中国国家公用经济信息通信网（金桥网） 中国联通公司 2000年 安庆职业技术学院 jpkc.aqvtc.cn

13. ＋ 网页文件 ＋ I P地址 ＝ Web网站 Web服务器 Web 服务器 客户机 五、 浏览器——Internet泛游之舟 WWW采用客户机/服务器系统。在客户机方面（用户）使用的程序叫做Web浏览器。服务器上则主要存放网页文件，通常称为Web站点或“Web网站”。在Web网站上除了Web网页文件外，还有Web服务程序。 1、网站 浏览器 成套 网页 安庆职业技术学院 jpkc.aqvtc.cn

14. 正如每部电话必须有一个由邮电部门分配的唯一的电话号码用户才能与之通话一样，IP地址相当于Internet系统的电话号码。 Internet 将世界各地成千上万个网络互连起来，这些网络上又各有许多计算机接入。为了使用户上网后能从繁若星空的方便快捷地找到网上的某一台主机， Internet 采用所谓“IP地址”的方法，即为网上的每一个网络和每台提供服务的主机都分配一个网络地址。这就是IP地址。对于因特网上的主机而言，这个地址是全球唯一的。 六、IP地址 安庆职业技术学院 jpkc.aqvtc.cn

15. IP地址为4个字节长，每个字节为一个小于256的十进制整数，字节间用点号分隔，形如：XXX.XXX.XXX.XXX。 安庆职业技术学院 jpkc.aqvtc.cn

16. IP地址其结构说明如下： 安庆职业技术学院 jpkc.aqvtc.cn

17. 【域名示例】 J www.aqvtc.cn (安庆职业技术学院） www.chinanet.cn.net (中国国际互联网） www.pku.edu.cn (北京大学） www.tsinghua.edu.cn (清华大学） www.hfut.edu.cn (合肥工业大学） 主机名或 网站名 网络名 机构名 最高域名 注：许多网站喜欢用 “ WWW ” 作主机名，表示是一个Web网站 安庆职业技术学院 jpkc.aqvtc.cn

18. 1 2 动态地址 静态地址 七、IP地址分类 安庆职业技术学院 jpkc.aqvtc.cn

19. 用户通过WWW（万维网）访问Internet，是在浏览器（BROWSER）的“地址”处键入所谓“网址”，术语叫“URL”（Uniform Resource Locator,统一资源定位器）。 URL看起来可能很长很复杂，但它一般是由四个部分构成的，即协议、主机名、文件夹名（目录）和文件名。网址有两种形式：IP地址与域名。 安庆职业技术学院网址： 域名： http://www.aqvtc.cn IP地址：192.168.0.8 精品课程的网址：http://jpkc.aqvtc.cn 八、网址 安庆职业技术学院 jpkc.aqvtc.cn

20. 所谓“网页”，实际上是以“图文并茂”、“有声有色”(多媒体)系列专栏形式向公众展示各种信息的网络“宣传栏”。常用的设计软件和工具有哪些呢？ 第三节 网页设计 安庆职业技术学院 jpkc.aqvtc.cn

21. 一、HTML语言 超文本文件的格式早在1945年就由Vannevar Bush提出，他在理论上建立了一个超文本文件系统。1965年Ted Nelson第一次使用“超文本”一词来形容这种管理信息的系统。与Bush一样，他的超文本文件系统“Xanadu”，最终也未获得成功。1967年，在IBM资助下，世界上第一个真正运行成功的“超文本编辑系统”建成，这项研究由Andries Van Dam主持，在美国布朗大学最终完成。1969年，美国国防部高级研究计划署建立了ARPA网，该网络最成功的技术就是TCP/IP 协议。 安庆职业技术学院 jpkc.aqvtc.cn

22. 二、HTML发展历史 发展史 1969 1945 美国国防部高级研究计划署建立了ARPA网，该网络最成功的技术就是TCP/IP 协议。 1967 Vannevar Bush提出，他在理论上建立了一个超文本文件系统。 在IBM资助下，世界上第一个真正运行成功的“超文本编辑系统”建成，这项研究由Andries Van Dam主持，在美国布朗大学最终完成 1965 Ted Nelson第一次使用“超文本”一词来形容这种管理信息的系统。失败告终。 安庆职业技术学院 jpkc.aqvtc.cn

23. 人们在通过INTERNET获取信息的同时，纷纷建立自己的主页和网站，向世界展示自己。一个网站可以包含一个或多个网页，这些网页以一定的方式连接在一起，成为一个整体。而一个成功的网站的建设离不开其中每一张制作精美的网页。 如何设计呢? 安庆职业技术学院 jpkc.aqvtc.cn

24. 虽然HTML语言是功能强且语法简单的网页设计语言。但是，直接用HTML在普通的文本编辑器上编写制作复杂精美的网页是很不方便的。网页设计者不得不花大量的时间去测试所写的文档是否合乎其语法规则，又不能在网页设计的同时就了解文档在浏览器上地显示的确切效果。其次要记忆、掌握大量的HTML语言地语法规则也不是一件容易的事情。而现在可视化网页设计工具可以使得设计者网页设计轻松自如。网页设计的工具很多，当前流行的工具有： 三、网页制作的工具 安庆职业技术学院 jpkc.aqvtc.cn

25. 它是建立和管理专业网站的简易工具，用户可以精确地将网页中的每一个元素放置在网页地任意位置上；用户可以自定义主题。它具有方便地数据库管理功能，还能提供灵活的网页发布工具。 网页制作的工具之一：Frontpage 安庆职业技术学院 jpkc.aqvtc.cn

26. 它是Macromedia公司设计推出，可以最快的方式将Photoshop等文件移至网页；它能够通过网站地地图快速制作网站雏形、设计、更新和重组网页；提供了可视化编辑与原代码编辑同步的设计工具；集成了动态出版可视编辑及电子商务功能，在动态网页设计中网页的预览无需通过浏览器；利用它设计的网页一般不受平台的限制。 网页制作的工具之二：Dreamweaver 安庆职业技术学院 jpkc.aqvtc.cn

27. 它能制作可任意放大的动画，使用方便，它提供的交互动画文件容量很小，它的使用流技术播放动画。 以上三种网页设计工具通常称为“网页设计三剑客”。 网页制作的工具之三：Flash 安庆职业技术学院 jpkc.aqvtc.cn

28. 早期的网页外观是静态的，只有文字与静态的图片，用户只能被动地阅读网页制作者提供的信息。其网页的内容也是静态的，若无外来干预，其内容不会自动改变，也无法通过网页实现与访问网页者交互信息的功能。因此，为了克服静态网页的呆板、缺乏交互性等缺点，使网页变得绚丽多彩、充满互动性，动态网页便应运而生。 四、网页设计 安庆职业技术学院 jpkc.aqvtc.cn

29. 动态网页技术包括网页的动态表现技术与网页的动态内容技术，前者是网页外观的动态表现技术，如GIF 动画、FLASH技术、DHTML（动态HTML）技术、VHTML（虚拟HTML）技术、VRML（虚拟实现造型语言）技术等。而网页的动态内容技术是通过一定的计算机语言编程如CGI、ASP、JSP等，使得计算机按照网页设计者设置的网页格式，生成所需要内容的网页并传送给访问网页者浏览。 安庆职业技术学院 jpkc.aqvtc.cn

30. 随着多媒体技术的发展，人们已经不满足简单的文件传输，电子邮件，远程登陆等网络应用。人们希望网络提供实时交互的服务，如：视频会议、视频点播、远程多媒体教学和网上购物等。 随着多媒体技术的发展，人们已经不满足简单的文件传输，电子邮件，远程登陆等网络应用。人们希望网络提供实时交互的服务，如：视频会议、视频点播、远程多媒体教学和网上购物等。 音频：通过计算机的声卡等多媒体设备来实现声音的传输和播放。一般有Wave波形音频、MIDI音频和CD音频，MP3 视频：通过视频采集和处理实现图象的传输和播放。一般有AVI，MOV，MPEG等格式的文件。 五、多媒体表现-----音频与视频 安庆职业技术学院 jpkc.aqvtc.cn

31. 例1 含有超文本标识的网页源程序。 <HTML> <HEAD><TITLE>含有超文本标识的网页源程序</TITLE></HEAD> <BODY> <H2>读书人的三个意境</H2> <OL><LI>昨夜西风凋碧树，独上高楼，望尽天涯路。 <LI>衣带渐宽终不悔，为伊消得人憔悴。 <LI>众里寻她千百度，蓦然回首，那人却在灯火阑珊处。 </OL> <MARQUEE bgcolor="#87CEFA" width=75% scrollamount=1>⒈昨夜西风凋碧树，独上高楼， 望尽天涯路。</MARQUEE> <MARQUEE bgcolor="#FFC900" behavior=alternate>⒉衣带渐宽终不悔，为伊消得人憔悴。</MARQUEE> <FONT size="3" color="#FFFFFF"> <MARQUEE bgcolor=“#FF4500”>⒊众里寻她千百度，蓦然回首，那人却在灯火阑珊处。 </MARQUEE> </FONT> </BODY> </HTML> 第四节 实例介绍HTML语言的设计 安庆职业技术学院 jpkc.aqvtc.cn

32. 其效果 安庆职业技术学院 jpkc.aqvtc.cn

33. 例2、简单的表单设计 <form action =/cgi-bin/post-query method=post> 您的姓名: <input type=text name=网址 value=http://><br> 密码: <input type=password name=密码><br> <input type=submit value="发送"><input type=reset value="重设"> </form> 安庆职业技术学院 jpkc.aqvtc.cn

34. 其效果 安庆职业技术学院 jpkc.aqvtc.cn

35. 网页制作是一个系统工程，一个网页的优劣完全取决于设计者的综合素质和动机。不仅仅是一个技术的问题，还要重视艺术性。并且不可以偏废。技术是基础，艺术是升华，艺术效果表现用技术来实现。好的网页让人留恋往返。这不仅仅是技术的高超，而是艺术效果吸引了浏览者的眼球。所以这是一个综合的系统的工程。网页制作是一个系统工程，一个网页的优劣完全取决于设计者的综合素质和动机。不仅仅是一个技术的问题，还要重视艺术性。并且不可以偏废。技术是基础，艺术是升华，艺术效果表现用技术来实现。好的网页让人留恋往返。这不仅仅是技术的高超，而是艺术效果吸引了浏览者的眼球。所以这是一个综合的系统的工程。 第五节 网页制作素质和修养 安庆职业技术学院 jpkc.aqvtc.cn

36. 网站是一个主体，是“框架”；网站突出一个主题；网站的目标是组织；网站好比一本画册。网页是被包含于网站之中的个体，是“砖瓦”；网页围绕网站主题各分项，丰富和烘托主题；网页的目标是表现；网页好比画册中的每一个分页。 网站是爸妈，网页是她们的孩子；爸爸妈妈的行为影响她的孩子，也是孩子成长的灯塔；她的孩子的优秀也使得爸爸妈妈的荣光。没有爸爸妈妈的孩子是无人问，没有孩子的爸爸妈妈只能孤独一生。 第六节 网站与网页的关系 安庆职业技术学院 jpkc.aqvtc.cn

37. 1、通常怎样对网页页面分区？各分区应放置什么内容？ 2、网页元素包括哪些？打开www.163.com，指出其中包含的网页元素请阐述网页设计与平面设计的异同点。 3、网页与网站有何不同？请举例说明。 4、请从不同角度阐述网页的功能。 5、请分析一下网页设计的基本要素和潜能。 6、请阐述网页设计与平面设计的异同点。 7、网页构成的基本元素是什么？ 8、怎样使网页内容更具合理性？ 9、说出自己熟悉的3个网页，并试分析它的归类。 10、按照网页的分类，自拟主题设计一帧页面。 第七节 习题 安庆职业技术学院 jpkc.aqvtc.cn

38. Thank You ! 安庆职业技术学院 jpkc.aqvtc.cn