网页设计与制作PPT课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<html>
<head> <title>第一个网页</title>
</head>
<body> <center><font size=4 color=blue>这是我的第一个网页
</font></center>
</body>
</html>
*
6
5.1.2 网页设计与制作主要技术
CSS
CSS（Cascading Style Sheets）称为“层叠 样 式表”，简称“样式表”，是一种设计网页样式 的工 具。1997年，W3C颁布HTML4标准的同时也 公布 了有关样式表的第一个标准CSS1，在CSS1版 本之 后，又在1998年5月发布了CSS2版本。W3C 把 DHTML（Dynamic HTML）分为三个部分来实 现： 脚本语言（包括JavaScript、VBScript等）、 支持 动态效果的浏览器（包括Internet Explorer、 Netscape Navigator等）和CSS样式表。
*
9
5.1.2 网页设计与制作主要技术
音频视频处理技术
WEB编程技术
在网页制作中，有一类应用需求是以上 任何一种技术都无法替代的，如用户注册时需 要记录下用户名和密码，以便在下一次用户登 录时对其身份进行验证，或者记录下用户的留 言，供其他人查看和发表评论等等。这一类需 求都需要用到另一类非常重要的技术—— WEB编程技术。
目前，主流的WEB编程脚本语言有ASP、 PHP和JSP等。
*
10
5.1.3 网页设计与制作的主要原则
网站的物理结构
不要将所有文件都存放在根目录下。 对大型网站应按栏目内容建立相应的子目录，对小型网站可
按文件类型建立子目录，如“images”、“media”等，并根 据文件类型将其存放于相应的子目录中。 目录的层次不要太深，建议不要超过3层。 为文件夹和文件命名时，不要使用中文名称，可采用英文或 汉语拼音作为文件名，但要做到见名知意。
网站的逻辑结构
网站的逻辑结构（又称“链接结构”），是指页面之间相互 链接的拓扑结构。它建立在物理结构基础之上，但可以跨越目录。 树状链接结构 星状链接结构
网站
简单来说，网站就是一组逻辑上具有整体意义的 多个网页的集合，也就是说网站设计者事先规划好网 站构架，然后再分别制作出不同的网页，并通过超链 接实现网页间的彼此连通，这样完整的构架就称为 “网站”。网站通常有一个主题，如个人网站、音乐 网 站、足球网站等。
*
4
5.1.1基本概念
主页
主页又叫首页，是用户进入一个网站时所看到的 第一个页面。主页的文件名通常为index或 default， 扩展名依不同网页类型而定。与之对应， 和主页相 链接的页面被称为“子页”。
*
2
5.1 网页设计与制作概述
网页、网站、主页、超链接和URL基本概念 网页设计与制作主要技术 网页设计与制作的主要原则
*
3
5.1.1基本概念
网页
网页是一个用超文本标记语言（HTML）描述的 文档，它是一个纯文本文件。HTML语言通过各式各 样的标记对页面上的文字、图片、表格、声音等元素 进行描述，并通过浏览器对这些标记进行解释以生成 实际的页面。网页有多种类型，分别用不同的后缀名 加以区分，如常见的“.htm”静态网页，以“.cgi”、 “.asp”、“.php”、“.jsp”等结尾的动态网页等。
借助CSS的强大功能，可实现丰富的网页效果。
*
7
5.1.2 网页设计与制作主要技术
JavaScript
JavaScript是由Netscape公司开发并随 Navigator2.0浏览器一起发布的。它是一种介于 Java与HTML之间、基于对象(Object)和事件驱动 (Event Driven)、并具有安全性能的脚本语 言。
HTML语言 HTML是Hypertext Markup Language的缩写，它是一
种描述文档结构的语言。一个HTML文件中包含了所有将要显示 在网页上的内容信息，其中也包括对浏览器的指示，如文字应 放在何处，显示模式如何等。 一个用HTML语言描述的网页，其基本结构如下： <!--网页的基本结构-->
*
8
5.1.2 网页设计与制作主要技术
图形图像处理技术
目前，常用的图形图像处理工具如Adobe公司的 Photoshop、Macromedia 公司的Fireworks等， 熟练掌握其中一种工具，对于制作漂亮的网页将起到 事半功倍的作用。
动画制作技术
目前，除传统的GIF动画外，由Macromedia公 司推出的Flash动画由于其体积小巧、下载速度快、 色彩艳丽、而且支持交互性，正逐渐成为网络动画的 主流。用于制作GIF动画的常用软件如台湾Ulead公 司的Ulead GIF Animator、Adobe公司的 ImageReady等，用于制作Flash动画的软件当然首 推Macromedia Flash。
JS通常定义在页面头部，成为HTML文档的一部分。 它是一种描述性语言，和HTML一样，用户可以用任 何一种文本编辑工具对它进行编辑，并在浏览器中进 行预览。同时，它也是一种解释性编程语言，即当用 户向服务器请求页面资源时，其源代码在发往客户端 前并不需经过编译，而是将文本格式的字符代码随 HTML一起发送给客户端，完全由客户端浏览器来解 释和执行。
超链接
超链接是WWW技术的核心，网页的出色之处就 在于能够把超链接嵌入其中，使用户能够从一个网页 方便地转移到另一个相关的网页。
URL
URL是Uniform Resoure Locator的简写，被 译为“统一资源定位器”，主要用来定位网络信息资 源 的地址或本地系统要访问的文件。
*
5
5.1.2 网页设计与制作主吴春明 Email:
*
1
第五章 网页设计与制作
教学要求：
了解网页设计中的相关概念与技术； 了解常用的网页制作软件； 掌握使用Dreamweaver进行网页设计的基本操作。
教学内容：
网页设计与制作概述 网页制作软件简介 Dreamweaver网页制作 Dreamweaver框架 Dreamweaver模板 网络测试和发布
<head> <title>第一个网页</title>
</head>
<body> <center><font size=4 color=blue>这是我的第一个网页
</font></center>
</body>
</html>
*
6
5.1.2 网页设计与制作主要技术
CSS
CSS（Cascading Style Sheets）称为“层叠 样 式表”，简称“样式表”，是一种设计网页样式 的工 具。1997年，W3C颁布HTML4标准的同时也 公布 了有关样式表的第一个标准CSS1，在CSS1版 本之 后，又在1998年5月发布了CSS2版本。W3C 把 DHTML（Dynamic HTML）分为三个部分来实 现： 脚本语言（包括JavaScript、VBScript等）、 支持 动态效果的浏览器（包括Internet Explorer、 Netscape Navigator等）和CSS样式表。
*
9
5.1.2 网页设计与制作主要技术
音频视频处理技术
WEB编程技术
在网页制作中，有一类应用需求是以上 任何一种技术都无法替代的，如用户注册时需 要记录下用户名和密码，以便在下一次用户登 录时对其身份进行验证，或者记录下用户的留 言，供其他人查看和发表评论等等。这一类需 求都需要用到另一类非常重要的技术—— WEB编程技术。
目前，主流的WEB编程脚本语言有ASP、 PHP和JSP等。
*
10
5.1.3 网页设计与制作的主要原则
网站的物理结构
不要将所有文件都存放在根目录下。 对大型网站应按栏目内容建立相应的子目录，对小型网站可
按文件类型建立子目录，如“images”、“media”等，并根 据文件类型将其存放于相应的子目录中。 目录的层次不要太深，建议不要超过3层。 为文件夹和文件命名时，不要使用中文名称，可采用英文或 汉语拼音作为文件名，但要做到见名知意。
网站的逻辑结构
网站的逻辑结构（又称“链接结构”），是指页面之间相互 链接的拓扑结构。它建立在物理结构基础之上，但可以跨越目录。 树状链接结构 星状链接结构
网站
简单来说，网站就是一组逻辑上具有整体意义的 多个网页的集合，也就是说网站设计者事先规划好网 站构架，然后再分别制作出不同的网页，并通过超链 接实现网页间的彼此连通，这样完整的构架就称为 “网站”。网站通常有一个主题，如个人网站、音乐 网 站、足球网站等。
*
4
5.1.1基本概念
主页
主页又叫首页，是用户进入一个网站时所看到的 第一个页面。主页的文件名通常为index或 default， 扩展名依不同网页类型而定。与之对应， 和主页相 链接的页面被称为“子页”。
*
2
5.1 网页设计与制作概述
网页、网站、主页、超链接和URL基本概念 网页设计与制作主要技术 网页设计与制作的主要原则
*
3
5.1.1基本概念
网页
网页是一个用超文本标记语言（HTML）描述的 文档，它是一个纯文本文件。HTML语言通过各式各 样的标记对页面上的文字、图片、表格、声音等元素 进行描述，并通过浏览器对这些标记进行解释以生成 实际的页面。网页有多种类型，分别用不同的后缀名 加以区分，如常见的“.htm”静态网页，以“.cgi”、 “.asp”、“.php”、“.jsp”等结尾的动态网页等。
借助CSS的强大功能，可实现丰富的网页效果。
*
7
5.1.2 网页设计与制作主要技术
JavaScript
JavaScript是由Netscape公司开发并随 Navigator2.0浏览器一起发布的。它是一种介于 Java与HTML之间、基于对象(Object)和事件驱动 (Event Driven)、并具有安全性能的脚本语 言。
HTML语言 HTML是Hypertext Markup Language的缩写，它是一
种描述文档结构的语言。一个HTML文件中包含了所有将要显示 在网页上的内容信息，其中也包括对浏览器的指示，如文字应 放在何处，显示模式如何等。 一个用HTML语言描述的网页，其基本结构如下： <!--网页的基本结构-->
*
8
5.1.2 网页设计与制作主要技术
图形图像处理技术
目前，常用的图形图像处理工具如Adobe公司的 Photoshop、Macromedia 公司的Fireworks等， 熟练掌握其中一种工具，对于制作漂亮的网页将起到 事半功倍的作用。
动画制作技术
目前，除传统的GIF动画外，由Macromedia公 司推出的Flash动画由于其体积小巧、下载速度快、 色彩艳丽、而且支持交互性，正逐渐成为网络动画的 主流。用于制作GIF动画的常用软件如台湾Ulead公 司的Ulead GIF Animator、Adobe公司的 ImageReady等，用于制作Flash动画的软件当然首 推Macromedia Flash。
JS通常定义在页面头部，成为HTML文档的一部分。 它是一种描述性语言，和HTML一样，用户可以用任 何一种文本编辑工具对它进行编辑，并在浏览器中进 行预览。同时，它也是一种解释性编程语言，即当用 户向服务器请求页面资源时，其源代码在发往客户端 前并不需经过编译，而是将文本格式的字符代码随 HTML一起发送给客户端，完全由客户端浏览器来解 释和执行。
超链接
超链接是WWW技术的核心，网页的出色之处就 在于能够把超链接嵌入其中，使用户能够从一个网页 方便地转移到另一个相关的网页。
URL
URL是Uniform Resoure Locator的简写，被 译为“统一资源定位器”，主要用来定位网络信息资 源 的地址或本地系统要访问的文件。
*
5
5.1.2 网页设计与制作主吴春明 Email:
*
1
第五章 网页设计与制作
教学要求：
了解网页设计中的相关概念与技术； 了解常用的网页制作软件； 掌握使用Dreamweaver进行网页设计的基本操作。
教学内容：
网页设计与制作概述 网页制作软件简介 Dreamweaver网页制作 Dreamweaver框架 Dreamweaver模板 网络测试和发布