网页设计与制作基础.ppt

《网页设计与制作基础.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作基础.ppt（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计与制作基础网页设计与制作基础主讲人主讲人:黄云飞黄云飞联系方式：联系方式：第第1章章 网页设计与制作基础网页设计与制作基础本章内容：本章内容：网页制作基本知识；网页制作基本知识；Internet的产生、发展与现状；的产生、发展与现状；TCP/IP模型、模型、IP的基本内容；的基本内容；网络互联的基本概念及接入网络互联的基本概念及接入Internet网页设计与制作基础网页设计与制作基础安徽师范大学安徽师范大学2010年年8月月1.1 Internet概述概述&1.1.1 Internet 的起源的起源&什么是什么是Internet呢呢？简单地说，简单地说，Internet是由遍布全球的各

2、种网是由遍布全球的各种网络系统、主机系统，通过统一的协议络系统、主机系统，通过统一的协议TCPIP连接在一起所组成的世界性计算机网络系连接在一起所组成的世界性计算机网络系统。统。&Internet是世界上最大的互联网络是世界上最大的互联网络 网页设计与制作基础网页设计与制作基础安徽师范大学安徽师范大学2010年年8月月全球信息网即全球信息网即全球信息网即全球信息网即WWW(World Wide Web)WWW(World Wide Web)又被人们称为又被人们称为3W、万维网等，是、万维网等，是Intemet上最受欢上最受欢迎、最为流行的信息检索工具。迎、最为流行的信息检索工具。Interne

3、t网中的客网中的客户使用浏览器只要简单地点击鼠标，户使用浏览器只要简单地点击鼠标，即可访问分布即可访问分布在全世界范围内在全世界范围内Web服务器上的文本文件，以及与服务器上的文本文件，以及与之相配套的图像、声音和动画等，进行信息浏览或之相配套的图像、声音和动画等，进行信息浏览或信息发布。信息发布。超文本（超文本（超文本（超文本（HypertextHypertext）数据结构）数据结构）数据结构）数据结构 是一种用计算机来实现连接相关文档的结构，该连是一种用计算机来实现连接相关文档的结构，该连接以高亮单词或图象形式嵌入在文档的文字之中。接以高亮单词或图象形式嵌入在文档的文字之中。当被激活时，便

4、立即检索连接的文档并显示出来，当被激活时，便立即检索连接的文档并显示出来，在被连接的文档中又可以嵌套别的连接，如此多重在被连接的文档中又可以嵌套别的连接，如此多重嵌套，以至无穷。嵌套，以至无穷。网页设计与制作基础网页设计与制作基础安徽师范大学安徽师范大学2010年年8月月WWWWWW组成组成组成组成&1.Web节点节点（Web服务器或称服务器或称HTTP服务器）服务器）主要提供主要提供HTTP服务。服务。&2.主页主页“主主页页(Home Paper)”是是某某个个Web节节点点的的起起始始点点，就就像像一一本本书书的的封封面面。主主页页是是链链接接到到一一个个Web服服务务器器上上时时显显示

5、示的第一个网页的第一个网页。&3.超级链接超级链接Web上上的的页页是是互互相相连连接接的的，单单击击被被称称为为超超级级链链接接的的文文本本或或图图形形就就可可以以连连接接到到其其他他页页，超超级级链链接接是是带带下下划划线线或或边边框框并并内内嵌嵌了了Web地址地址网页设计与制作基础网页设计与制作基础安徽师范大学安徽师范大学2010年年8月月WWWWWW服务采用了客户服务器工作模式服务采用了客户服务器工作模式服务采用了客户服务器工作模式服务采用了客户服务器工作模式 在该模式中，信息资源以页面（也称网页或在该模式中，信息资源以页面（也称网页或Web页）页）的形式存储在的形式存储在Web服务器

6、中；用户查询信息时执行服务器中；用户查询信息时执行一个客户端的应用程序，简称客户程序（一个客户端的应用程序，简称客户程序（Cient）或称为浏览器（或称为浏览器（Browser）程序。）程序。超文本（超文本（超文本（超文本（HypertextHypertext）数据结构）数据结构）数据结构）数据结构 是一种用计算机来实现连接相关文档的结构，该连是一种用计算机来实现连接相关文档的结构，该连接以高亮单词或图象形式嵌入在文档的文字之中。接以高亮单词或图象形式嵌入在文档的文字之中。当被激活时，便立即检索连接的文档并显示出来，当被激活时，便立即检索连接的文档并显示出来，在被连接的文档中又可以嵌套别的连接

7、，如此多重在被连接的文档中又可以嵌套别的连接，如此多重嵌套，以至无穷。嵌套，以至无穷。网页设计与制作基础网页设计与制作基础安徽师范大学安徽师范大学2010年年8月月WebWeb浏览器浏览器浏览器浏览器 是一个程序，是互联网应用中最常用的工具软件，是一个程序，是互联网应用中最常用的工具软件，它能对它能对HTML文档的格式及其所含有的漫游指令进文档的格式及其所含有的漫游指令进行转换。浏览器和服务器通过另一种公开的标准，行转换。浏览器和服务器通过另一种公开的标准，即即HTTP(Hyper Text Transfer Protocol)来实现它来实现它们之间的通信。们之间的通信。例如：例如：IE 浏览

8、器浏览器 IE IE 浏览器浏览器浏览器浏览器 是客户端的浏览器软件具有是客户端的浏览器软件具有Internet地址地址(Web地址地址)和文件路径导航能力，它向和文件路径导航能力，它向Web服务器发出请求，服务器发出请求，从从Web 服务器上搜索需要的信息、浏览服务器上搜索需要的信息、浏览Web 网页、网页、查看源文件、收发电子邮件，上传网页等。查看源文件、收发电子邮件，上传网页等。网页设计与制作基础网页设计与制作基础安徽师范大学安徽师范大学2010年年8月月1.1.2 计算机网络分类、功能和应用计算机网络分类、功能和应用&计算机网络分为以下计算机网络分为以下3类：类：局域网（局域网（Loc

9、al Area Network，LAN）城域网（城域网（Metropolitan Area Network，MAN）广域网（广域网（Wide Area Network，WAN）&计算机网络的应用计算机网络的应用(1)信息的获取与发布信息的获取与发布 (2)电子邮件（电子邮件（E-mail）(3)网上交际网上交际 (4)电子商务电子商务(5)网络电话网络电话 (6)网上事务处理网上事务处理(7)远程登录远程登录 (8)文件传输文件传输(9)电子公告板电子公告板 (10)全球信息网全球信息网网页设计与制作基础网页设计与制作基础安徽师范大学安徽师范大学2010年年8月月1.1.3 网络传输协议和域名

10、地址解析网络传输协议和域名地址解析&一个完整的一个完整的web 网站构成包括：网站构成包括：web 服务器服务器+网页文件网页文件+IP地址。地址。&服务器在解析网页时要遵循如下相关协议：服务器在解析网页时要遵循如下相关协议：&(1)TCP/IP协议协议 Transfer Control Protocol/Internet Protocol（传输控制协议（传输控制协议/网际协议）。它是网际协议）。它是Internet国际互联网络的基础。国际互联网络的基础。包括包括TCP协议、协议、IP协议和协议和 IP地址。地址。&(2)HTTP协议协议（Hypertext Transfer Protocol

11、，超文本传输协议）是网络浏览，超文本传输协议）是网络浏览的最常用，最基本的协议。是用于从的最常用，最基本的协议。是用于从WWW服务器传输超文本到服务器传输超文本到本地浏览器的传送协议。本地浏览器的传送协议。&(3)域名和域名系统域名和域名系统&(4)URL（Universal Resource Locator，统一资源定位器）网址，统一资源定位器）网址 网页设计与制作基础网页设计与制作基础安徽师范大学安徽师范大学2010年年8月月1.1.4 Internet的主要服务的主要服务&1.电子邮件电子邮件 登录名登录名主机名主机名.域名域名&2.远程登录远程登录 Telnet是一个强有力的远程登录工

12、具。是一个强有力的远程登录工具。&3.文件传输文件传输 FTP（File Transfer Protocol）是文件传输协议的英文缩）是文件传输协议的英文缩写，是一种与写，是一种与Telnet类似的联机服务。类似的联机服务。&4.新闻讨论组新闻讨论组 新闻组新闻组(Usenet)是一个在是一个在Internet上提供给网络用户用来彼上提供给网络用户用来彼此交换信息或是讨论某一共同话题的系统。此交换信息或是讨论某一共同话题的系统。网页设计与制作基础网页设计与制作基础安徽师范大学安徽师范大学2010年年8月月1.2 网页与网站的概念网页与网站的概念&网页、网站和主页网页、网站和主页&1.网页（网页

13、（Web Page）网网页页是是按按照照网网页页文文档档规规范范编编写写的的一一个个或或多多个个文文件件。是是网网站站中中的的一一页页，通通常常是是HTML格格式式（文文件件扩扩展展名名为为.html 或或.htm或或.asp或或.aspx或或.php或或.jsp等等）。网网页页通通常常用用图像图像档来提供档来提供图画图画。网页要使用网页浏览器来阅读。网页要使用网页浏览器来阅读。文字与图片是构成一个网页的两个最基本的元素。文字与图片是构成一个网页的两个最基本的元素。网网页页是是构构成成网网站站的的基基本本元元素素，是是承承载载各各种种网网站站应应用用的的平平台。台。网页设计与制作基础网页设计与

14、制作基础安徽师范大学安徽师范大学2010年年8月月2.2.网站（网站（网站（网站（Web SiteWeb Site）网站是指存放在网络服务器上的完整信息的网站是指存放在网络服务器上的完整信息的集合体，是一系列网页的组合，它包含一个集合体，是一系列网页的组合，它包含一个或多个网页，这些网页拥有相同或相似的属或多个网页，这些网页拥有相同或相似的属性，并以超链接方式连接在一起，形成一个性，并以超链接方式连接在一起，形成一个整体，描述一组完整的信息。整体，描述一组完整的信息。3.3.主页（主页（主页（主页（Home PageHome Page）就是网站默认的首页。主页默认的文件名格式为就是网站默认的首

15、页。主页默认的文件名格式为index.htm 或或default.htm。一般来说，主页是一个。一般来说，主页是一个网站中最重要的网页，也是访问最频繁的网页。它网站中最重要的网页，也是访问最频繁的网页。它是一个网站的标志是一个网站的标志。网页设计与制作基础网页设计与制作基础安徽师范大学安徽师范大学2010年年8月月1.2.2 静态网页和动态网页静态网页和动态网页&1.静态网页静态网页 静静态态网网页页是是一一个个html或或htm文文件件，服服务务器器传传送送HTML代代码码的的文文件件，不不加加处处理理直直接接下下载载到到客客户户端端的的浏浏览览器器，再再由由浏浏览览器器解解释释为为可可见见

16、的的对对象象呈呈现现给给浏浏览览者者。运运行行在在客客户户端端的的页页面面是是已已经经事事先先做做好好并并存存放放在在服务器中的网页。服务器中的网页。静态网页的缺点：呆板、缺乏交互性等静态网页的缺点：呆板、缺乏交互性等网页设计与制作基础网页设计与制作基础安徽师范大学安徽师范大学2010年年8月月2.2.动态网页动态网页动态网页动态网页 动态网页是网页能够按照客户的需求做出动态响应动态网页是网页能够按照客户的需求做出动态响应的网页。需要与客户端共同参与，客户通过浏览器的网页。需要与客户端共同参与，客户通过浏览器发出页面请求后，服务器根据发出页面请求后，服务器根据URL携带的参数运行携带的参数运行

17、服务器端程序，产生的结果页面再返回客户端。动服务器端程序，产生的结果页面再返回客户端。动态网页的格式通常有三种：态网页的格式通常有三种：a)ASP;b)JSP;c)PHP 动态网页技术包括网页的动态表现技术与网页的动动态网页技术包括网页的动态表现技术与网页的动态内容技术态内容技术 网页中常见的论坛和网页中常见的论坛和BBS留言本即是动态网页的实留言本即是动态网页的实际应用。际应用。网页设计与制作基础网页设计与制作基础安徽师范大学安徽师范大学2010年年8月月&3.音频音频通过计算机的声卡等多媒体设备来实现声音通过计算机的声卡等多媒体设备来实现声音的传输和播放。一般有的传输和播放。一般有Wave

18、波形音频、波形音频、MIDI音频和音频和CD音频，音频，MP3。&4.视频视频通过视频采集和处理实现图象的传输和播放。通过视频采集和处理实现图象的传输和播放。一般有一般有AVI，MOV，MPEG等格式的文件。等格式的文件。网页设计与制作基础网页设计与制作基础安徽师范大学安徽师范大学2010年年8月月1.2.3 网站的分类网站的分类&1.根据网站提供的服务分类根据网站提供的服务分类 信息类网站、交易类网站、互动游戏类网站、有偿信息类网信息类网站、交易类网站、互动游戏类网站、有偿信息类网站、综合类网站等等。站、综合类网站等等。&2.根据网站的性质分类根据网站的性质分类政府网站、企业网站、商业网站、

19、教育科研机构网站、个人政府网站、企业网站、商业网站、教育科研机构网站、个人网站、非营利机构网站、其他类型的网站；网站、非营利机构网站、其他类型的网站；&3.根据在大型搜索引擎上的设置分类根据在大型搜索引擎上的设置分类新闻与媒体类网站、政府与政治类网站、科学与教育类网站、新闻与媒体类网站、政府与政治类网站、科学与教育类网站、商业与经济类网站、健康与医药类网站、电脑与网络类网站、商业与经济类网站、健康与医药类网站、电脑与网络类网站、社会与文化类网站、艺术与人文类网站、娱乐与休闲类网站、社会与文化类网站、艺术与人文类网站、娱乐与休闲类网站、参考资料类网站等等。参考资料类网站等等。网页设计与制作基础网

20、页设计与制作基础安徽师范大学安徽师范大学2010年年8月月1.2.4 网页设计的基本原则与构成元素网页设计的基本原则与构成元素&网页设计一般遵循如下基本原则：主题鲜明、结构合理、形式与内网页设计一般遵循如下基本原则：主题鲜明、结构合理、形式与内容统一、技术与艺术统一、整体与局部统一。容统一、技术与艺术统一、整体与局部统一。&而构成网页的基本元素包括有：文字、图像、超链接、表格、表单、而构成网页的基本元素包括有：文字、图像、超链接、表格、表单、事件与行为、动画、框架、音频、视频、交互等。事件与行为、动画、框架、音频、视频、交互等。1.文本文本 2.图片图片3.超级链接：超级链接技术是超级链接：超

21、级链接技术是WWW流行起来的最主要原因。流行起来的最主要原因。它是从一个网页指向另一个目的端的链接。它是从一个网页指向另一个目的端的链接。4.动画动画5.声音和视频声音和视频6.导航栏导航栏7.表格表格8.表单表单9.其他常见元素：悬停按钮、其他常见元素：悬停按钮、Java特效、特效、ActiveX等各种特效。等各种特效。网页设计与制作基础网页设计与制作基础安徽师范大学安徽师范大学2010年年8月月1.3 网页制作常用工具简介网页制作常用工具简介&网页制作工具网页制作工具&目前有许多设计目前有许多设计Web页面的工具软件，总体上可以分页面的工具软件，总体上可以分为为“非可视化非可视化”和和“可

22、视化可视化”两大类：两大类：第第一一类类是是采采用用HTML语语言言，并并直直接接利利用用编编辑辑软软件件来来编编制制Web页页面面，称称为为“批批处处理理”方方式式，属属于于“非非可可视化视化”类；制作效率低，但制作的页面简洁。类；制作效率低，但制作的页面简洁。另另一一类类为为使使用用Dreamweaver、FrontPage等等页页面面设设计计软软件件，不不需需了了解解HTML就就可可直直接接对对页页面面进进行行排排版版，称称为为“所所见见即即所所得得”可可视视化化方方式式。制制作作效效率率高高，但但是是用用这这种种方方法法形形成成的的页页面面，最最终终都都要要被被翻翻译译为为HTML源文

23、。源文。网页设计与制作基础网页设计与制作基础安徽师范大学安徽师范大学2010年年8月月&1.Microsoft FrontPage Frontpage是是一一款款功功能能强强大大，简简单单易易用用的的可可视视化化网网页页编编辑辑软软件件。页页面面制制作作Editor完完成成，其其工工作作窗窗口口由由“所所见见即即所所得得”的的编编辑辑页页、HTML代代码码编编辑辑页页和和预预览页览页3个标签页组成。个标签页组成。&2.Dreamweaver由由Macromedia公司出品的公司出品的Dreamweaver，是，是“所见即所得所见即所得”的专业的网页编辑软件，属于网页三的专业的网页编辑软件，属于

24、网页三剑客之一。包括可视化编辑、剑客之一。包括可视化编辑、HTML代码编辑的软代码编辑的软件包，可视化编辑界面，用户不必编写复杂的件包，可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页。源代码就可以生成跨平台、跨浏览器的网页。网页设计与制作基础网页设计与制作基础安徽师范大学安徽师范大学2010年年8月月1.3.2 网页素材处理工具网页素材处理工具&制作网页必须掌握一些常用的网页图片等素材处理的工具软件，目制作网页必须掌握一些常用的网页图片等素材处理的工具软件，目前这类软件非常之多，常见的有：前这类软件非常之多，常见的有：&1.Photoshop集图像扫描、编辑修

25、改、图像制作、广告创意，图像输入与输出集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件于一体的图形图像处理软件。&2.Fireworks 网网页页制制作作三三剑剑客客。用用于于制制作作网网站站Logo，进进行行平平面面图图像像处处理理，还还可可以以制制作作gif格格式式的的动动画画，有有机机地地把把矢矢量量图图像像处处理理和和位位图图处处理理结结合合起来起来。&3.Flash：一种交互式一种交互式Web矢量动画软件矢量动画软件&4.CorelDRAW：用于商业设计和美术设计用于商业设计和美术设计&5.Ulead Gif Animator：动画动画GIF制作软件制作软件