第1章网页设计与制作基础.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,网页设计与制作,教师：先强,参考书籍：,网页设计与制作教程,HTML,教程,网页设计三合一教程,DreamWeaver,教程,ASP,教程,教学要求：,不断增加丰富网站设计方面的知识,能够熟悉地使用常用网站开发工具,反复练习课堂上的演示实例,做好上机实验，联系平时网站设计学习,增强动手能力，不断实践总结网站建设和维护方面的经验,网站建设所需知识,一、基础知识包括一定的美术创意，去掌握一定的美术基础知识。计算机基础知识，计算机原理、计算机软硬件配置，安装和维护。,二、基本技能包括：,Html,Dreamweaver,Fireworks,Photoshop,Flash,Frontpage,CSS,Access,三、中级技能包括：,javascript,Vbscript,ASP,JSP,DHTML,四、高级技能包括：,PHP,SQLServer,ActiveX,五、附加知识包括：,Ultraedit,3DMax,多媒体，,CorelDraw,Illustrator,Freehand,网站建设需要人员,网站项目经理：负责与客户沟通，采集客户的需求，确定网站的风格、栏目、功能，制定网站策划书、指派监督任务，与项目实施人员沟通协调，测试网站，最终促使项目顺利完成。,网站内容结构设计师：根据项目经理提供的项目材料，生成高度结构化的文档，并形成初始网页（不含任何样式）。,网页设计师（美工）：根据项目经理提供的策划书和内容结构师制作的初始网页，进行网页效果图的设计，包括首页、栏目页、内容页、功能页等。,网站样式设计师（网站制作）：参照网页设计师的效果图以及内容设计师的初始网页，编写网页样式，须保证样式的高效简洁。最终实现符合效果图的网页。,网站程序员：根据项目经理的网站功能设计策划，编制实现功能的后台程序。需要在页面输出的，就将页面的静态内容换成动态输出的。要求了解,web,标准。,1.1,网站基础知识,1.2,网站制作基础,1.3,网站管理基础,1.4,网页制作工具,第1章 网页设计与制作基础,11,网站基础知识,1.1.1,网站,在因特网中有许多用于存放信息和发布信息的计算机，“网站”就是存放于这些机器上的一系列文档的组合，也称为“站点”。网站中信息的发布用“网页”来实现。网站中的文档通过超链接关联起来，利用浏览器可以从一个文档跳转到另一个文档，实现整个网站的浏览。通过超链接还可以与因特网中任何一个网站关联起来，实现在整个因特网上的浏览。可以这样说，网站是因特网的灵魂。,1.1,网站基础知识,1.1.2,本地计算机和,Internet,服务器,浏览网站的用户所使用的计算机被称为本地计算机，启动浏览器、打开网页等操作，都在本地计算机上完成。,Internet,服务器是指提供,Internet,服务的计算机，如,WWW,服务、,FTP,服务、,Email,服务。,Internet,服务器主要用于存贮,Web,站点和页面，浏览网页时只要在地址栏中输入网址按下回车键，就能实现对网页的访问，不需要知道存贮该网页的服务器的实际位置。,本地计算机与,Internet,服务器之间通过各种通信线路连接，以实现相互通信。,1.1,网站基础知识,1.1.3,本地站点与远端站点,我们把存贮于,Internet,服务器上站点称为远端站点。我们把存贮在本地机上的站点称为本地站点。远端站点的网站文件和磁盘组织形式，一般都在本地机上做好并调试完毕后，上载到,Internet,服务器，,在本地机上构建站点框架，完成站点设计，进行站点测试，上传,到,Internet,后便形成远端站点。在本地机上对站点文档编辑、修改、管理，测试成功后，上传到,Internet,便实现对远端站点的管理和修改。,1.1,网站基础知识,1.1.4,WWW,和超文本,WWW（World Wide Web）,是建立在,Internet,上的网络服务，也称为“万维网”，是全球性、交互、动态、多平台、分布式、图形信息系统。遵循,HTTP,协议（,Hypertext Transfer Protocol,超文本传输协议），使用加入图片、声音、动画、影视等内容的超文本（,Hypertext），,可以从一个文件跳转到另一个文件，与世界各地主机文件链接。,1.1,网站基础知识,1.1.5,IP,地址和域名地址,Internet,为每个站点分配一个惟一的地址，称为“,IP,地址”。,IP,地址也称为,URL,（Unique Resource Location），,译为“统一资源定位器”，由4个从0到255之间的数字组成，数字之间用圆点隔开（如：202.102.138.66）。域名地址由几个具有一定意义的英文单词组成，之间用圆点隔开（如：,），,字母不区分大小写，除字母之外还可以使用阿拉伯数字、减号和下划线。域名地址和,IP,地址代表同一个网站，访问一个站点时输入哪种地址都可以。因为,IP,地址,在,Internet,中是惟一的，所以域名地址在,Internet,中也是惟一的。,1.1,网站基础知识,1.1.6,主页和网页,网站主页（,Home Page）,和网页（,Web page）,严格来说是两个不同概念。主页是用户登陆到网站后看到的第一个页面，是最重要的一页。被主页调用的网页称为子页，子页又可以调用其他子页，通过超链接实现。网站的中主页使用规定的文件名，不能随便起。不同的服务器对主页默认名称的规定也不尽相同，其文件名多为,index.htm,或,index.html,或,default.htm,或,default.html。,采用了动态页面作为主页的网站，主页文件名后缀是诸如,asp、php、jsp,等。在浏览器中输入网址后，主机会自动执行默认主页。主页的一个重要的功能是导航，利用超链接指引用户浏览本网站或其他网站的信息。,1.2,网站制作基础,1.2.1,网站制作步骤,1,站点总体规划,2,站点结构规划,3,网页创作,4,网站编辑调试,5,发布网站,1.2,网站制作基础,1.2.2,网站定位,1,信息发布类网站,2,门户网站和在线查询网站,3,电子商务类网站,4,服务类网站,5,个人网站和娱乐游戏类网站,1.2,网站制作基础,1.2.3,网站基本功能,1,信息展示,2,条目列表,3,公共导航,4,联系方式,5,在线表单,6,访客留言,7,友情链接,8,网站地图,1.2.,4,构成网页的基本元素,构成网页的常见元素主要有文本、图片、超级链接、动画、音乐、表单等。如图所示是一个站点的首页。,Flash,动画,导航栏,GIF,动画,文字,表单,图片,超级链接,1.,文本,网页中的信息也以文本为主。与图片相比，文字虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。,2.,图片,用户在网页中使用的图片格式主要包括,GIF,、,JPEG,和,PNG,等，其中使用最广泛的是,GIF,和,JPEG,两种格式。,3.,超级链接,超级链接技术是,WWW,流行起来的最主要的原因。它是从一个网页指向另一个目的端的链接。,4.,动画,在网页中为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。网页中的动画主要有两种：,GIF,动画和,Flash,动画。其中,GIF,动画只能有,256,种颜色，主要用于简单动画和图标。,1.2.,4,构成网页的基本元素,5.,声音和视频,声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多，常用的有,MIDI,、,WAV,、,MP3,和,AIF,等。很多浏览器不要插件也可以支持,MIDI,、,WAV,和,AIF,格式的文件，而,MP3,和,RM,格式的声音文件则需要专门的浏览器播放。,6.,导航栏,导航栏的作用就是引导浏览者游历站点。事实上，导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。7.,表格,在网页中表格用来控制网页中信息的布局方式，包括两个方面：一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是可以使用表格来精确控制各种网页元素在网页中出现的位置。,1.2.,4,构成网页的基本元素,8.,表单,网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到网页设计者设置的目标端。这个目标可以是文本文件、,Web,页、电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登录站点等。,9.,其他常见元素,网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、,Java,特效、,ActiveX,等各种特效。它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用。,1.2.,4,构成网页的基本元素,1.3,网站管理基础,1.3.1,测试网站,1.3.2,为网站起名,1.3.3,选择接入,Internet,的方式,1.3.4,申请域名和空间,1.3.5,网站发布,1.3.6,网站发布举例,1.3.7,浏览网站,1.3.8,管理和维护网站,一、网站简介,网站是因特网上最基本的信息发布平台，有很多分类方法，例如按照其是否提供网络服务可分为门户网站和非门户网站，门户网站根据所提供的服务又可分为搜索引擎、电子邮件、网络聊天室、新闻组和电子公告牌等。按照网站所属部门的性质可分为企业网站、政府网站、学校网站或个人网站等。按照网站的主题可分为综合网站和专业网站等。,但所有网站都具有许多的共同特征：,明确的主题,统一的风格,便捷的导航系统,方便的交流方式,二、,网站的体系结构,现在的网站基本都采用,Browse/Server(,简称,B/S),体系结构，即客户机,/,服务器体系结构。,WWW,客户机和服务器之间的通信通常分为四个步骤：,1),首先客户机通过浏览器向服务器发送,HTTP,请求，请求一个特定的网页。,2)HTTP,请求通过,Internet,网络传送到服务器。,3),服务器接受这个请求，找到所请求的网页，然后用,HTTP,协议再将这个网页通过,Internet,网络发送给客户机。,4),客户机接收这个网页，并在浏览器中显示。,Internet,网络,信息,(,请求,),信息,(,响应,),HTTP,协议,HTTP,协议,HTTP,协议,HTTP,协议,客户机,服务器,客户端,浏览器,客户端,浏览器,Web,服务器,数据库服务器,数据请求,ODBC,检索结果,随着网站的规模越来越大，产生了浏览器,/,服务器模式的三层分布结构，即浏览器,Web,服务器,数据库服务器的三层体系结构。第一层是客户层，只要用户拥有电脑可以上网，在任何时候，任何地点，都可以访问数据库中的数据；,第二层是,Internet,网上的,Web,服务器，它的主要作用是接受各用户的访问请求，并把处理结果通过网络返回给用户；第三层是数据库服务器层，用来接收,Web,服务器发来的查询数据请求（主要是,SQL,语句），并返回数据结果集。,网站的建设步骤,规划网站时必须明确两点。首先要明确为什么要建这个网站，即建设网站的目的；其次，要明确这个网站的主题，即网站的主要内容。明确之后再制定具体建站的框架。,建立一个网站如同开发软件一样，应该按照以下几步进行：,目标规划,系统分析,系统设计,网站实现,网站发布,网站调试,维护与管理,以上的七个步骤是建设一个网站大体上应遵循的。在实际的工作中，我们可以根据实际情况进行具体的设计。,1.4,网页制作工具,1.4.1,网页制作主流软件,1,Dreamweaver,Dreamweaver,是“所见即所得”的网页编辑软件，由,Macromedia,公司出品，它的最大特点是直观性和高效性，能在可视化操作和源代码操作中同时看到工作进程，实现了对,HTML,源,代码和可视化操作的双重管理，是网页设计者的首选软件。,1.4,网页制作工具,2,Flash,由,Macromedia,公司出品，用于制作网页的动画插图和页面广告，它生成的,SWF,作品不但画面精美，而且文件非常小。稍微复杂一点的动画一般都用,Flash,制作。,Dreamweaver,中专门提供了插入,Flash,文件的功能。1.4,网页制作工具,3,Fireworks,由,Macromedia,出品，与,Flash,和,Dreamweaver,一起合称为,Macromedia,的网页制作三剑客。用于制作网站,Logo，,进行平面图像处理。还可以制作,gif,格式的动画，当动画比较简单并且颜色较少时，一般用,Fireworks,做成,gif,动画。,1.4,网页制作工具,1.4.2,网页制作主流编程技术,1,HTML,HTML（Hypertext Marked Language）,称为超文本标记语言，用来制作超文本文件，描述网页格式和网页之间的链接，是最基本的,Web,页面开发语言。用,HTML,编写的文档属于纯文本类型，可以用任何文本编辑器打开，查看和编辑其中的源代码。另外，,HTML,还,独立于各种操作平台（如,Windows、UNIX）。,大部分用动态语言编写的脚本都要嵌入到,HTML,代码,中。,1.4,网页制作工具,2,XML,XML（Extensible Markup Language）,称为可扩展的标记语言，所谓“可扩展”是指允许用户自己创建标记，而在,HTML,中是,不允许的。,XML,文档和数据有自解释性，可以平衡客户端与服务器端的处理负荷，服务器只须向用户发送,XML,格式的纯数据，显示和转化都在客户端进行，既减轻服务器运算压力，又降低网络负荷。,XML,与,HTML,的不同是：,XML,文档的内容与显示分离，内容的改变可以自动反映到多个输出实例中。,1.4,网页制作工具,3,ASP,ASP（Active Server Pages）,是动态服务器主页的简称，由微软公司设计开发的动态,Web,页面脚本语言，是面向对象的程序设计。,ASP,语言与,IIS Web,紧密集成，在服务器端解释执行，与客户端没有任何关系。,ASP,脚本完全嵌入到,HTML,中，支持任何浏览器。,ASP,不足之处是对平台依赖性太强。,1.4,网页制作工具,4,JavaScript,JavaScript,由,Netscape,公司与,SUN,公司合作推出，是跨平台、面向对象、嵌入式的脚本语言，由,JavaScript,编写的脚本可嵌入到网页里，并在浏览器端解释执行。,JavaScript,语言相对简单易学，如果学过,C/C+,或,Java,等语言，学习,JavaScript,会节省很多时间。,1.4,网页制作工具,5,VBScript,VBScript,是一种脚本语言，也是,ASP,的缺省语言，它通过变量、操作符、循环、分支、函数和子例程扩展了,HTML,。,可以在,HTML,文件中直接嵌入,VBScript,脚本，使静态,HTML,网页变为动态网页。,VBScript,可以作为客户端编程语言，由浏览器解释执行。客户端编程语言的优点是不必通过网络让服务器做出响应，而是由浏览器完成所有工作，减轻服务器负担，运行速度比服务器端程序快得多。,