网页程序设计教案.doc
《网页程序设计教案.doc》由会员分享,可在线阅读,更多相关《网页程序设计教案.doc(151页珍藏版)》请在三一办公上搜索。
1、网页程序设计本讲义共分9章,具体结构为:第1章 网页基础知识。概述介绍了Internet的基础知识,以及基本网页开发技术和网页开发工具,最后向读者展示了网页设计的主要步骤。第2章 HTML设计基础。主要介绍网页设计的基础语言HTML,包括HTML基础知识;HTML文档的设计原则、语言结构;超链接、表格与框架的使用方法;对象和表单,JavaScript脚本语言的嵌入方法;最后还介绍了几个动态HTML的实例。第3章 CSS使用基础。CSS是Cascading Style Sheets的缩写,Cascading是串接、连接之意;Style则是风格、款式之意;Sheets则是一页纸、表的意思。所以呢,
2、若要以中文来解释CSS,可以称之为串接样式表。CSS可以说它是网页的美容师,凡是网页上看得到的文字、图片、表格、窗体都有它发挥的空间,在文字方面,可以利用CSS来随意设定字体的大小,设定行距、间距、去除连结底线等。第4-8章 JavaScript编程基础。主要介绍JavaScript语言以及在动态网页中的基础用法,包括JavaScript基础知识、与HTML页面结合、编码约定、数据类型、常数、变量、运算符、数组、基本输入与输出、分支控制语句、循环控制语句、过程、对象编程等。第9章 课程设计。本章的重点是“应用”和“综合”两个关键字,除了强调要将前面学到的知识应用于实际例子之外,还强调“综合”一
3、词。前面的章节我们学习了动态网页技术的各个组成部分:HTML、CSS、JavaScript等,但这些部分是分开来各自介绍,以便于循续渐进、各个击破地掌握。本章将介绍几个通过综合本书所介绍过的网页技术而实现的网页应用实例,目的在于抛砖引玉,希望读者在阅读时能做到举一反三、灵活运用。 第1章 网页基础知识“工欲善其事,必先利其器”,本章作为全书的开端,为了让读者对网页的生存环境互联网和网站有一个初步认识,首先概述介绍了Internet的基础知识,以及基本网页开发技术和网页开发工具,最后向读者展示了网页设计的主要步骤。1.1 Internet概述1.1.1 Internet互联网介绍Internet
4、(因特网)是由全世界各国、各地区的成千上万个计算机网互联起来而形成的一种全球性网络。各种各样的计算机和网络只要遵循共同的网络通讯协议TCP/IP,就可以加入Internet中,从而实现全球范围内的信息交流和资源共享。 TCP/IP:Transmission Control Protocol/ Internet Protocol的简写,中文译名为传输控制协议/互联网络协议1.1.2 Internet的服务和工具Internet是一个客户机/服务器模式的信息服务系统。1.1.2.1 电子邮件(Email)电子邮件是利用计算机网络进行信息传递的现代化通讯工具。与传统邮件相比,它的主要优点是高效、廉价
5、。1.1.2.2 WWW服务WWW是World Wide Web的缩写,中文译名为“万维网”或“环球网”。它是全球规模的信息服务系统,提供了Internet上的一种十分高效的浏览、检索和查找信息的方式。l1.2 Web开发技术介绍1.2.1 Web基本编辑技术(HTML)Web页面的核心是HTML,它是一系列标准化标记的集合,编写十分方便。它不需要有特定的语言环境或额外的编译,可以用任何一种编辑器书写(记事本也可以),并可以通过浏览器(如Internet Explorer、Netscape)观察结果。 1.2.2 动态网页技术DHTML动态HTML就是将网页装载入浏览器后,仍然能够随时变换显示
6、的HTML。但是DHTML并不是一种专门技术,而是通过各种技术的综合发展和使用才能实现的概念,这些技术有SCRIPT(脚本语言)、Document Object Model(DOM,文件目标模块)、Cascading Style Sheets(CSS,层叠样式表单)、Layers(层)等。 1.2.3 Web高级开发技术l SCRIPT脚本语言:JavaScript和VBScriptl CGI通用网关接口:Common Gateway Interfacel ASP:Active Server Pages l PHP:Personal Home Pagel XML:eXtensible Mark
7、up Languagel WML:Wireless Markup Languagel VRML:Virtual Reality Modeling languagel1.3 基本网页开发工具1.3.1 网页编辑开发工具l FrontPage :Microsoft公司推出的一种用于设计和维护Web站点的开发工具,集成于Microsoft Office应用程序套件中。 l Dreamweaver :与FrontPage相同,支持层的操作和行为绑定,可以制作出充满动感的网页,而生成的代码比FrontPage更为简洁 l HotDog :Sausage公司的,HTML的代码编写器。l HomeSite
8、:与HotDog类似。1.3.2 图形和动画设计工具l PhotoShop :Adobe公司的产品,它是功能十分强大的专业图形图像处理软件。 l Paint Shop Pro:很多功能与 PhotoShop 不相上下。l Fireworks:Macromedia公司的产品,它是一款专门为网页图形的制作而度身定做的软件。 l Flash:Macromedia公司的产品,它和Dreamweaver、Fireworks并称网页制作三剑客。 1.4 网站的设计步骤网站是存放在服务器上的完整信息的集合体,它由主页和其他网页组成。主页(Home Page)是WWW站点上查找信息资源的起始页面,这些网页依照
9、一定的组织结构,用链接的方式连接成一个统一的整体,以描述设计者所要表达的完整的信息。本节将较详细的介绍网站的设计过程。 1.4.1 确定Web站点的类型现在的WWW上有各种各样的Web站点,令人过目不暇。不同的网站,其设计目的、风格、内容、形式、功能都不尽相同。所以我们设计网站时必须要首先分析建设网站的目的,做到量体裁衣,同时明确将要面对的访问群众,从而确定网站的类型。 1.4.2 确定Web站点的风格由于设计者建立网站的目的不同,而不同类型的网站又有着不同的访问对象。所以建设网站时要根据网站主题和浏览人群确定自己的风格特色,即围绕主题,对栏目设置、内容安排、背景图象、颜色搭配等要素综合分析,
10、用自己独特的视觉语言向浏览者描述。 1.4.3 确定Web站点的内容与表现形式网页的内容与Web站点的主题密切相关,因为Web站点的主题主要靠网页的内容予以体现。不同性质的网站,不仅内容不同,表现形式也不同,通常一个网站的网页有以下几项基本内容:l 标题:醒目、具有概括性、起标志作用。l 背景:与网页内容协调,达到陪衬的效果。l 导航条:置于醒目位置,与整体协调。l 文本:实用、趣味、独特。l 图片:不宜过大、过多,采用压缩图形格式。l 其他:分门别类地组织,可加音乐或动态效 果,但不宜过多,应整体结构统一。1.4.4 确定Web站点的结构l 树型结构具有很强的层次性,但不利于各页面之间的链接
11、与沟通。ll 线性结构 具有较强的条理性,可以沿水平方向按部就班地访问整个Web站点,但不利于各页面之间的跳转。l 星型l 结l 构llll网型结构可以使浏览者十分方便、快捷地进入想访问的信息页面。但是过多的超级链接占据了大量有效的网页浏览面积。主页l 网型结构可以使每个网页既有固定不变的内容(如标题、导航栏等),又有丰富的布局变化,链接的深度较浅,层次较小,既提高了浏览速度,又方便浏览者的信息查询,但结构设计比较麻烦,是目前大多数网站所采用的一种结构。1.4.5 制作Web站点的页面页面的制作一般分以下几步进行:l 进行结构分析,确定页面的布局结构。l 在设计好的布局结构内填充文本、链接、图
12、像、表格、列表、多媒体等信息内容。l 为网页加入动态元素和交互性内容,包括SCRIPT脚本语言、ActiveX控件、CGI/ASP/PHP程序等,实现静态页面向动态交互性页面的转变。l 用CSS样式为各网页元素进行美工优化设计,包括网页背景、各元素的定位、元素属性、链接属性等,做到各元素、色彩的协调统一与风格的独特新颖,给浏览者赏心悦目的感觉。1.4.6 Web站点的测试与发布l 检测网页在浏览器的下载速度,尽可能限制在大多数浏览者满意的范围内。l 检测网页各元素在浏览器的实际显示效果和功能,主要有:文本、图片、声音、超链接、控件、应用程序的显示和功能是否正常;版面布局是否合理。1.4.7 W
13、eb站点的管理与维护Web站点正式发布后,就必须进行不断的管理维护,以保证站点的“可持续发展”,这样才能使网站具有持久的生命力。1.5 本章小结首先,概括介绍了互联网的一些基础知识,包括Internet的介绍和Internet的服务和工具的介绍。其次,简单介绍了Web开发技术,包括Web编辑技术,动态网页技术DHTML,高级开发技术。再次,对基本网页开发工具(包括网页编辑开发工具、图形动画设计工具、网页发布及管理工具)有个初步认识。最后,重点介绍了Web站点完整的设计步骤,让读者为网页制作流程不再感到陌生。这是本章的重点,也是难点,希望读者好好把握。 1.6 作业设计一份开发个人网站的策划书。
14、思路:l 确定站点类型l 确定站点风格l 确定站点的内容与表现形式l 确定站点的结构l 制作站点的页面布局第2章 HTML设计基础本章主要介绍网页设计的基础语言HTML,包括HTML基础知识;HTML文档的设计原则、语言结构;超链接、表格与框架的使用方法;对象和表单,JavaScript脚本语言的嵌入方法;最后还介绍了几个动态HTML的实例。2.1 HTML基础知识2.1.1 什么是HTMLHTML语言是超文本标记语言(Hyper Text Markup Language)的缩写,是现在网页编辑的核心语言。 HTML 不是C+和Java之类的程式语言,它只是标示语言,也就是说,只要明白了各种标
15、记的用法便算学懂了HTML。HTML 的格式非常简单,只是由文字及标记组合而成,而不能描述实际的表现形式。2.1.2 HTML文档设计原则l 考虑HTML文档的兼容性和可观性 ll 将文档结构与风格页分开 ll 正确使用表格,以加快文档显示速度 2.2 创建HTML文档2.2.1 HTML元素及其属性的使用规则一个HTML元素一般由三部分组成:元素起始标记、元素内容、元素结束标记。元素起始标记由一对尖括号“括起来的元素名组成;元素内容就是在网页中被显示的内容;元素结束标记由一对尖括号括起来的斜杠“/”后加元素名构成,这时,该元素也称为双边元素。如: 超文本标记语言 在HTML文档中,除了双边元
16、素,还存在单边元素。如:换行元素表示回车换行,表示显示一条水平线。如: 超文本标记语言: 元素及其属性的使用规则 元素可以嵌套。如: 超文本标记语言 可为元素添加属性。属性是对元素的更详细的规定,并具有不同的取值。属性的具体内容及格式由元素的相应功能来决定。在元素起始标记中添加属性名和它的取值就完成了属性的添加,属性不会在浏览器中显示。一个元素可以有多个属性,用空格分开。带属性的双边元素通常的语法格式为: 网页显示内容 带属性的单边元素通常的语法格式为:一个属性的作用域一般只在定义它的元素范围内。但对于嵌套元素结构,内层可继承外层元素的某些属性。HTML元素和属性是不区分大小写的。2.2.2
17、HTML文档框架 HTML的标题 HTML文档的正文部分 l 起始标记:l 结束标记:2.2.2.1 首部由和定义,是放置网页标题元素、基本元素、样式元素、脚本语言元素和一些其他元素的地方。与内部的主要元素包含TITLE、ISINDEX、BASE、STYLE、LINK、META、SCRIPT等。l TITLE:标题元素,用来定义浏览器标题栏中显示的标题。l ISINDEX:索引元素,用来为文档建立内置索引,浏览器将会生成一个让访问者输入搜索关键字的提示框。l BASE:基本元素,用来指定一个基本的URL,由它来引用文档中的所有其他相关URL。该元素为单边元素,其属性有HREF和TARGET。属
18、性HREF用来指定当前页面的根URL,属性TARGET用来指定一个或多个链接的目标窗口,取值为:n _blank:指定将链接加载到一个新的无标题窗口。n _parent:指定将链接加载到当前链接文档的父文档窗口。n _self:指定将链接加载到当前链接文档的同一框架窗口。n _top:指定将链接加载到整个窗口。l STYLE:样式元素,用来定义网页的样式本单(如CSS本单),其属性TYPE指定样式语言。l LINK:链接元素,用来指定当前文档与其他文档或对象之间的关系,该元素为单边元素,其属性REL定义链接文档与当前文档之间的关系,属性REV定义当前文档与链接文档之间的关系,属性TYPE表明一
19、个链接的样式单类型和参数。REV常取值为”next”(后翻页)、”previous”(前翻页)、”index”(索引)、”help”(帮助)、”home”(主页)、”copyright”(版权)、l META:哑元素,用来指定一些关于文档的信息(称为META数据),或指示浏览器执行一个操作。该元素为单边元素,其属性HTTP-EQUIV用于定义元素的特性,属性NAME用来指定文档的一个特性名(缺省时同HTTP-EQUIV),常见值为”keywords”、”description”等,属性CONTENT为特性提供响应值。l SCRIPT:脚本元素,用来定义脚本部分并植入SCRIPT脚本语言。应包含
20、注释标记“,目的是能够在不支持脚本语言的浏览器中隐藏脚本代码。其属性LANGUAGE用来指定脚本的编码语言,如JavaScript、VBScript等,属性SRC用来指定从外部调入的SCRIPT脚本语言所在的文件名称。虽然脚本代码可放置于文档的任何位置,但为了实现HTML文档外观的一致性,建议将其放置于文档首部。2.2.2.2 主体由和定义,包含了显示在网页上的实质内容,还包含了对文档的注释、ADDRESS元素以及特殊字符的使用。BODY元素属性BACKGROUND、TEXT、LINK、LEFTMARGN等可以实现对文档的着色、背景填充和边框设置等,其属性及功能如下表:表2-1 BODY元素的
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 程序设计 教案

链接地址:https://www.31ppt.com/p-2881394.html