Java Web应用开发技术与案例教程 教学课件 张继军 第2章_静态网页开发技术.pdfVIP

第2章静态网页开发技术 静态网页是指可以由浏览器解释执行而生成的网页， 其开发技术主要有：HTML、JavaScript和CSS 。 HTML是一组标签，负责网页的基本表现形式； JavaScript是在客户端浏览器运行的语言，负责在客 户端与用户的互动； CSS是一个样式表，起到美化整个页面的功能。 本章主要介绍HTML、JavaScript和CSS三种技术及 其使用，并给出设计案例。 第2章静态网页开发技术 2.1 HTML网页设计 2.2 CSS样式表 2.3 JavaScript脚本语言 2.4 基于HTML+JavaScript+CSS的开发案例 教学内容 学习并掌握静态网页的设计技术： 1、HTML HTML的网页的基本结构、各种常用标签的使用 格式和使用方法，重点是个类标签的属性设置。 2、CSS 对网页的格式进行美化。 3、JavaScript 简单的脚本设计语言（类似于Java语言，但很 简单易学），主要完成各类事件的响应与处理。 教学目标 1、掌握静态网页的常用设计技术 2、利用这些设计技术，能够根据所给出的设 计要求，较熟练的设计静态网页。 3、三种设计技术必须掌握。 引言1——静态网页的有关预备知识 • 静态网页是指没有后台数据库、不含程序、不可交 互的网页。 • 静态网页是以htm或html结尾的html文件编写的。在 程序设计中一般又把html网页称为静态网页。 • HTML是Hypertext Markup Language的缩写，中文也 就是超文本链接标示语言。 • HTML文本是由HTML命令组成的描述性文本，HTML命 令可以说明文字、图形、动画、声音、表格、链接 等。 引言2——静态网页开发相关技术基础知识 相关的一系列技术：HTML、JavaScript和CSS。 （1）HTML：HTML是一组标签，负责网页的基本 表现形式； （2 ）JavaScript ：JavaScript是在客户端浏览器运 行的语言，负责在客户端与用户的互动； （3 ）CSS：CSS是一个样式表，起到美化整个页 面的功能。 2.1 HTML网页设计 2.1.1 HTML文档结构与基本语法 2.1.2 HTML基本标记与使用 2.1.3 HTML表单标签与表单设计 2.1.4 表单设计案例——学生入校注册页面设计 2.1.5 HTML框架标签与框架设计 2.1.6 框架设计案例——多媒体播放系统设计 2.1.1 HTML文档结构与基本语法 网页结构：页面标题 地址栏输入文件路 页面显示的内容 设计完成该网页的代码： html head 头部： 在head与/head title第一个HTML 网页/title 之间部分 /head body text=blue Hello, bworld/b! 主体： hr size=5px align=left color=red width=50% 在body与/body 之间部分 你好！ /body /html 1．HTML标记 用HTML编写的超文本文档称为HTML文档（文件），是一 个放置了“标签”的文本文件，以“.html”或“.htm”为扩展名， 可供浏览器解释执行的网页文件。 网页文件是利用