第1章网页制作概述ppt课件

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,网页制作,主讲教师：郭凤英,网页制作主讲教师：郭凤英,教材选用,新世纪全国高等中医药院校规划教材,网页制作,主编：李书珍,出版社 ： 中国中医药出版社,教材选用新世纪全国高等中医药院校规划教材,课程介绍,1,、网页制作概述,2,、网页制作基础语言,3,、,Dreamweaver mx 2004,基本功能,4,、,Dreamweaver mx 2004,高级功能,5,、,Fireworks mx 2004,基本功能,6,、,Flash MX 2004,基本功能,7,、网站设计综合实例,8,、站点的测试和发布；综合复习,课程介绍1、网页制作概述,课程要求,按时上课，不迟到、不早退,勤于动手，完成课堂学时任务,按时完成课后作业,能够设计制作出规范的网站,课程要求按时上课，不迟到、不早退,第一章 网页制作概述,第一章 网页制作概述,章节概要,1.1,有关万维网的基本概念,1.2,网页编辑语言,1.3,网页制作的常用软件,1.4,规划站点与网页,1.5,构成网页的基本元素,章节概要1.1 有关万维网的基本概念,1,、万维网,问题,1,：,什么是万维网？,问题,2,：,什么是网站、网页和主页？,问题,3,：,现在流行的浏览器有哪些？,问题,4,：,什么是,Web,服务器？什么是,Web,浏览器,1、万维网问题1：什么是万维网？,万维网,万维网（,World Wide Web,，又称,WWW,、,3W,或,Web,）是,Internet(,因特网,),上使用最广泛的一种信息服务。通过万维网可以查找资料、阅读报刊、欣赏音乐、观看视频、获取遍布全球的信息资源。,万维网 万维网（World Wide Web,万维网,跟网站相关的概念,网站：网站就是一个组织（可能是一个公司、学校、机关、部门）或者是个人建立在,Internet,上的站点,域名：网站的名称，建立在,internet,的站点，比如,一个网站由多个网页组成,主页：网站的第一个网页，常见的名称有：,default.html,index.html,等,万维网跟网站相关的概念,万维网,客户端（,web,浏览器）,-,服务器端（,web,服务器）,-,客户端就是网友的电脑,服务器端是远程服务器，运行结果是由服务器产生的,所有的动态网页都是在服务器端执行的，例如,ASP,、,PHP,、,JSP,；所有的静态网页都是在客户端执行的，例如,JavaScript,、,Flash,都是属于静态网页。,万维网客户端（web浏览器）-,万维网,客户端（,web,浏览器）,-,建立连接,发出请求,接收服务器传送来的网页,对,HTML,文档进行解释并显示网页的内容,浏览器由一组客户程序、一组解释器和一个管理它们的控制程序组成。,问题 ：,你上网使用过的主流的浏览器有哪些？,万维网客户端（web浏览器）-,万维网,浏览器可完成多种传统的因特网服务，主要协议有：,http,：执行超文本传输协议，向用户提供访问,Web,资源的服务。,ftp,：执行文件传输协议，使,FTP,服务器与用户的计算机进行远程文件传输操作。,mailto,：执行简单邮件传输协议（,SMTP,），向远程计算机发送电子邮件。,telnet,：提供登录远程计算机的服务。,News,：执行,NNTP,协议，提供网络新闻服务。,万维网浏览器可完成多种传统的因特网服务，主要协议有：,万维网,web,服务器端,-,Web,服务器程序从网络接受并回复,HTTP,请求，,HTTP,回复一般是一个,HTML,文件，也可以是其他类型的文件。,主流的,Web,服务器软件有,Apache,，,IIS,，,tomcat,等。,万维网 web服务器端-,万维网,网页,发出请求,服务器端,用户通过浏览器向分布在网络上的许多服务器发出请求，服务器对浏览器的请求进行处理，将用户所需信息返回到浏览器。,其余如数据请求、加工、结果返回以及动态网页生成、对数据库的访问和应用程序的执行等工作全部由,Web,服务器完成,发出请求,信息返回,信息返回,用户名：,密 码：,邮 箱：,登录,重置,万维网网页发出请求服务器端 用户通过浏览器向分布,万维网,统一资源定位器,url,：,用于标识,www,网中每个信息资源的位置。如：, (,超文本传输协议,),、,FTP(,文件传输协议,),、,Gopher(Gopher,协议,),和,News,（新闻组）等。,主机域名或,IP,地址：上面例子中的,“,”,即为域名，也可直接用服务器的,IP,地址来取代域名，如,“,http:/202.195.208.44/,”,。虽然使用域名和,IP,地址都可以，但域名更便于记忆和使用。,所要访问的文件路径及文件名：如上面例子中的,“,/index.htm,”,部分，它指明要访问资源的具体位置。主页文件名可缺省。,万维网 统一资源定位器url：用于标识www网中每个信,2,、,网页编辑语言,HTML,XML,XHTML,CSS,JavaScript,2、网页编辑语言 HTML,2,、,网页编辑语言,Html,语言,HTML,（,Hyper Text Markup Language,，超文本标记语言）是一种网页制作的排版语言，,以,.htm,或,.html,为文件扩展名保存,它支持丰富的样式表、脚本、框架、表格和表单，而且通过在,HTML,语言中嵌入,JavaScript,、,VBScript,等语言,2、网页编辑语言Html语言,2,、,网页编辑语言,Xml,语言,XML,（,Extensible Markup Language,），中文名为可扩展的标记语言，是一种类似于,HTML,的标记语言。,XML,标记是由网页设计者自己定义的,自由性、可扩展性,XML,主要用来描述是什么数据，而,HTML,主要用来描述如何显示数据,2、网页编辑语言Xml语言,2,、,网页编辑语言,XHTML,XHTML,（,Extensible HyperText Markup Language,），中文名为可扩展超文本标记语言。,XHTML 1.0,是一种在,HTML 4.0,基础上，用,XML,的规则进行优化和扩展而成的。,它结合了部分,XML,的强大功能及大多数,HTML,的简单特性，以便适应未来网络应用更多的需求。,XHTML,将来可完全替代,HTML,。,2、网页编辑语言XHTML,课堂作业,1,、目前流行的浏览器软件有哪些？他们有什么区别？,2,、上网查看,html,和,xhtml,的区别,课堂作业1、目前流行的浏览器软件有哪些？他们有什么区别？,2,、,网页编辑语言,CSS,CSS,（,Cascading Style Sheets,），中文名为层叠样式表，有时简称为样式表。,统一规范网页的风格，修改样式表，网页样式可以随时更新,2、网页编辑语言CSS,2,、,网页编辑语言,JavaScript,JavaScript,是由,Netscape,公司推出的一种面向对象的脚本语言，用于开发动态交互的网页,JavaScript,由浏览器解释并执行,直接嵌入在,HTML,源代码中，无需被编译,可通过在浏览器中查看源文件看到,JavaScript,脚本,2、网页编辑语言JavaScript,2,、,网页编辑语言,VBScript,VBScript,是,Visual Basic Script,的简称，即,Visual Basic,描述语言，有时也被缩写为,VBS,VBScript,是微软开发的一种脚本语言，可以看作是,VB,语言的简化版，与,VBA,的关系也非常密切。,目前广泛应用于网页和,ASP,程序制作，同时还可以直接作为一个可执行程序。用于调试简单的,VB,语句非常方便。,2、网页编辑语言VBScript,3,、,网页制作的常用软件,网页制作软件,Dreamweaver,FrontPage,3、网页制作的常用软件 网页制作软件,3,、,网页制作的常用软件,网页制作软件,Dreamweaver,它是,Macromedia,公司推出的网页编辑工,.,-,所见即所得,-,支持最新的,DHTML(Dynamic HTML,，动态,HTML),和,CSS,标准,-,提供了完善的站点管理功能,-,集网页创作和站点管理功能于一身的创作工具,-,设计视图编辑,-,代码视图编辑,-,可以使用服务器语言,(,例如,ASP,、,ASP,NET,、,ColdFusion,标记语言、,JSP,和,PHP),生成支持动态数据库的,Web,应用程序,打开,dreamweaver,3、网页制作的常用软件 网页制作软件打开dreamweave,3,、,网页制作的常用软件,网页制作软件,FrontPage,FrontPage,是,Microsoft,公司开发的设计网页和管理网站的软件,-,所见即所得,-,直接编辑,HTML,标记,-,可以利用,Office,套件中其他软件,(,如,Access,数据库软件、,Excel,电子报表软件、,Word,文字编辑软件等,),的功能，实现功能上的互补,3、网页制作的常用软件 网页制作软件,3,、,网页制作的常用软件,网页图形制作软件,Fireworks,Photoshop,CorelDraw,3、网页制作的常用软件 网页图形制作软件,3,、,网页制作的常用软件,网页图形制作软件,Fireworks,- Fireworks,以处理网页图片为特长，通过它可以把图做得又小又漂亮。,-Fireworks,是基于屏幕的图像处理软件，而不是基于出版印刷，所以它对可编辑图像的分辨率要求不高,-,Fireworks,不仅可生成静态的图像，也可轻松创作,GIF,小动画，还可生成包含,HTML,和,JavaScript,代码的动态图像，甚至可以编辑整幅网页,例如：可在,Fireworks,中直接生成动态按钮、图像热区和切片。,3、网页制作的常用软件 网页图形制作软件,3,、,网页制作的常用软件,网页图形制作软件,Photoshop,Photoshop,是,Adobe,公司推出的功能强大的平面图像处理软件,-Photoshop,在图像编辑、桌面出版、网页图像编辑、广告设计、婚纱摄影等各行各业的广泛应用，它已成为许多涉及图像处理的行业的事实标准,-Photoshop,中包含的,ImageReady,是用于网页图片制作的，其缺点是体积庞大，操作比较复杂，非专业人士很难熟练掌握它,3、网页制作的常用软件 网页图形制作软件,3,、,网页制作的常用软件,网页图形制作软件,CorelDraw,CorelDraw,是加拿大,Corel,公司开发的著名绘图软件包，它既是一个大型的矢量图形制作工具软件，也是一个大型的工具软件包,-CorelDraw,将矢量插图、版面设计、点阵图编辑、图像编辑及绘图工具等多种功能合为一体,-,CorelDraw,绘图套件广泛应用于网页制作、演示文稿制作和排版印刷的专业图形领域,3、网页制作的常用软件 网页图形制作软件,3,、,网页制作的常用软件,网页动画制作软件,Flash,Ulead GIFAnimator,3、网页制作的常用软件 网页动画制作软件,3,、,网页制作的常用软件,网页动画制作软件,Flash,Flash,是一款优秀的网页动画开发软件，从简单的动画到复杂的交互式,Web,应用程序，它使用户可以创建任何作品。,-,拖放用户界面组件,-,将动作脚本添加到文档的内置行为,-,添加到对象的特殊效果,-s,WF,文件体积很小，并且可以以插件的形式加入到网页中,3、网页制作的常用软件 网页动画制作软件,4,、规划站点与网页,确定站点的主题，体现自己的特色,站点的结构,网页的布局,网页的编排,4、规划站点与网页 确定站点的主题，体现自己的特色,4,、规划站点与网页,第一步：确定站点的主题，体现自己的特色,对于题材的选择，应注意：,（,1,）主题要小而精。,（,2,）题材最好是你自己擅长或者喜爱的内容。,（,3,）题材不要太滥或者目标太高。,4、规划站点与网页 第一步：确定站点的主题，体现自己的特色,4,、规划站点与网页,第一步：确定站点的主题，体现自己的特色,恰当确定网站域名和名称，应注意：,（,1,） 名称要正。也就是要合法，合理，合情。,（,2,）名称要易记。网站名称最好用中文名称，不要使用英文或者中英文混合型名称。,（,3,） 名称要有特色。如：音乐前卫，网页陶吧，天籁绝音。在体现出网站主题的同时，能点出特色之处。,域名的选择也是如此，选一个简单易记，比如可以模仿知名网站扩大自己的影响，有一定含义的域名也是网站成功的一部分。,4、规划站点与网页 第一步：确定站点的主题，体现自己的特色,4,、规划站点与网页,第二步：确定站点结构,应注意：,（,1,）尽量简洁明了 。易于浏览者访问每个网页，而不应使他们迷失方向,（,2,）网页上的链接是必不可少的，可以是同一页面内的跳转，也可以是在不同页面之间跳转。,（,3,）浏览者设计一条路径，使他们能够在最短的时间内浏览到想看的内容，最好在每页设计一个,“,返回首页,”,的链接,4、规划站点与网页 第二步：确定站点结构,4,、规划站点与网页,第三步：确定网页布局,网页的布局起着主导作用，好的布局能够给人一种舒适的感觉 。,建议用户先制作有代表性的一个网页，将页面的结构、图片的位置、链接的方式设计周全，然后根据此结构去设计其他的网页，再填入相应的内容，使人感觉网页的布局和谐统一。,4、规划站点与网页 第三步：确定网页布局,4,、规划站点与网页,第三步：确定网页布局,T,型结构,4、规划站点与网页 第三步：确定网页布局,4,、规划站点与网页,第三步：确定网页布局,同字结构,4、规划站点与网页 第三步：确定网页布局,4,、规划站点与网页,第三步：确定网页布局,川字结构,4、规划站点与网页 第三步：确定网页布局,4,、规划站点与网页,第三步：确定网页布局,三字结构,4、规划站点与网页 第三步：确定网页布局,4,、规划站点与网页,第三步：确定网页布局,单一结构,4、规划站点与网页 第三步：确定网页布局,4,、规划站点与网页,第四步：编排网页,应注意以下几点：,文字的颜色和页面背景的颜色,整体的视觉感受要单纯，不要选用会使页面难以阅读的页面背景,页面文字颜色的设置应与页面背景相匹配,不要采用过大的字体，字与字、行与行的排列不宜过密,网页设计要求色调明确 ；过多地使用颜色和只使用很少的一两种颜色都是不可取的,4、规划站点与网页 第四步：编排网页,4,、规划站点与网页,第五：其他方面：,形式与内容的统一,适当插入一些图片与注解,了解站点是否兼容于浏览器,现在的浏览器比较多，应该让自己的站点尽量与大部分的浏览器兼容。许多浏览器有自己不同的,HTML,解释方法，常用的浏览器是,Internet Explorer,和,Netscape Navigator,，设计好的站点应该在两种浏览器上均进行测试。,4、规划站点与网页 第五：其他方面：,5,、构成网页的基本元素,文本,图片，常用的图片格式为,gif,，,jpg,超链接,，,它是从一个网页指向另一个目的端的链接,动画,声音和视频，常见的格式有,MIDI,、,WAV,、,MP3,和,AIF,等,导航栏,表格,。表格用来控制网页中信息的布局方式，,表单。,表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到网页设计者设置的目标端。,其他常见元素,。悬停按钮、,Java,特效、,ActiveX,等各种特效,5、构成网页的基本元素 文本,习题,1,1,、判断题,（,1,）在网上浏览时看到的一个个页面就是网页。（ ）,（,2,）放在网站最前面的页面叫主页。（ ）,（,3,）,HTML,和,XML,将被,XHTML,完全取代。（ ）,（,4,）,HTML,将被,XHTML,取代。（ ）,（,5,）,JavaScript,脚本是由,Web,服务器解释并执行的。（ ）,2,、简答题,（,1,）制作网页时需要哪些软件？,（,2,）现在流行的浏览器有哪些？,（,3,）,XML,与,HTML,相比，有哪些优点？,（,4,）浏览器除了用于浏览,Web,页外，还有什么作用？,习题 1,