《网页制作概述》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网中每个信息资源的位置。如：/index.htm 表现形式为：通信协议:/主机域名或IP地址/文件路径/文件名 通信协议：包括HTTP (超文本传输协议)、FTP(文件传输协议)、Gopher(Gopher协议)和News（新闻组）等。 主机域名或IP地址：上面例子中的“”即为域名，也可直接用服务器的IP地址来取代域名，如“4/”。虽然使用域名和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等 导航栏 表格 。表格用来控制网页中信息的布局方式， 表单。表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到网页设