《网页制作概述》PPT课件.ppt

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