《Java Web应用开发技术与案例教程 教学课件 ppt 作者 张继军 第2章_静态网页开发技术》由会员分享，可在线阅读，更多相关《Java Web应用开发技术与案例教程 教学课件 ppt 作者 张继军 第2章_静态网页开发技术（84页珍藏版）》请在金锄头文库上搜索。
1、第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的开发案例,教学内容,学习并掌握静态网页的设计技术：
2、 1、 HTML HTML的网页的基本结构、各种常用标签的使用格式和使用方法，重点是个类标签的属性设置。 2、CSS 对网页的格式进行美化。 3、JavaScript 简单的脚本设计语言（类似于Java语言，但很简单易学），主要完成各类事件的响应与处理。,教学目标,1、掌握静态网页的常用设计技术 2、利用这些设计技术，能够根据所给出的设计要求，较熟练的设计静态网页。 3、三种设计技术必须掌握。,引言1静态网页的有关预备知识,静态网页是指没有后台数据库、不含程序、不可交互的网页。 静态网页是以htm或html结尾的html文件编写的。在程序设计中一般又把html网页称为静态网页。 HTML是Hy
3、pertext 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 HT
4、ML基本标记与使用 2.1.3 HTML表单标签与表单设计 2.1.4 表单设计案例学生入校注册页面设计 2.1.5 HTML框架标签与框架设计 2.1.6 框架设计案例多媒体播放系统设计,2.1.1 HTML文档结构与基本语法,网页结构：,设计完成该网页的代码：,1HTML标记,用HTML编写的超文本文档称为HTML文档（文件），是一个放置了“标签”的文本文件，以“.html”或“.htm”为扩展名，可供浏览器解释执行的网页文件。 网页文件是利用HTML所规定的标签定义网页中的各种元素的性质和特点，从而完成网页所要求的功能。,标签的分类（类型）,网页就像我们平时利用word编辑显示文件一样。
5、在网页上要展示的不同元素，需要采用不同的标签给出定义和说明。 主要有： 定义网页结构的标签； 定义网页头部的标签； 定义网页网体内容的标签，该类标签中主要包含； 文字、行、 段落、列表标签 表格、图形 超链接、视频、音频 表单,标签的使用格式,标签有单表和双标签。 单标签： 例如，换行标记： 双标签： 例如，标题标记： 内容,2标记的属性,基本语法： 语法说明： 属性应写在首标记内，并且和标记名之间有一个空格分隔。 例如： 标记的作用是在网页中插入一条水平线，但是，要绘制什么类型（线的粗细、颜色等）的直线呢？对直线的粗细、颜色的限制，就需要标记的属性。 其中：align为属性，center为属
6、性值（表示居中）；color为颜色属性，其属性值为blue（蓝色）；size为字体大小属性，其属性值为5px。,3注释标记 注释标记用于在HTML源码中插入注释。注释会被浏览器忽略。 基本语法： ,2.1.2 HTML基本标记与使用,1、结构标签 例如：,2、文本与段落标记,【例2-2】图2-2给出了一首唐诗欣赏的页面，根据该页面，设计HTML文档：ch02_2.html。请仔细分析所使用的标记及其属性，以及它们的作用,3. 列表标签,列表标签分两类：有序标签和无序标签。 （1）有序列表标记： 格式： . 其中，属性type指定列表项前的项目编号的样式，其取值： “1”：编号为阿拉伯数字（默认
7、值）； “a”：小写英文字母； “A”：大写英文字母； “i”：小写罗马数字； “I”：为大写罗马数字。,（2）无序列表标记： 格式： . 其中： 属性TYPE指定列表项前的项目符号的样式，其取值为 disc：实心圆点（默认值）； circle：空心圆点； square：实心方块。,【例2-3】有序列表与无序列表应用示例，设计图2-3所示的运行界面, 有序列表与无序列表 班级新闻 最新课程表 关于普通话考试的通知 div+css高级应用学习 报名 报名时间：3月1621 日。 报名地点：所在院系办公室。 报名费用：按物价局规定85元/人/次（含培训费用），报名时交齐。 ,4超链接标签 超链接是
8、指从一个对象指向另一个对象的指针，它可以是网页中的一段文字也可以是一张图片。实现从一个页面到另一个页面的跳转。 格式： 超链接名称或图片 其中： 属性href：指定链接的目标（另一个网页的路径）,5. 图片标记 格式： 其中： 属性src：指定图像源的URL路径 alt：替代文本； height：图片的高度； width：图片的宽度。,【例2-4】设计如图的页面（ch2_4.html），该页面中有超链接和图片链接，当单击其中之一（单击超链接或图片），都跳转到“泰山自然网页”。 网址为： http:/www.mount- 超链接页面 超链接标签的使用 泰山风景介绍 图片链接标记的使用 泰山风景介
9、绍 ,6. 定时刷新或跳转 （1）定时自刷新， 基本语法： 该语句表示，页面每隔一秒刷新一次，其中属性content的值，代表间隔的时间。 （2）定时自动跳转， 基本语法： 该语句表示，页面3秒后自动转到搜狐主页。 注意：上述标签一般放在head标签中。,7. 表格 表格由行、列、单元格组成，一个表格是由、或标记来定义的，分别表示表格、表格行、单元格。 （1）基本语法： 表格标题 列名一列名二. 数据一数据二. ,（2）表格属性（属性）,【例2-5】设计如图所示的表格，该表格中有跨行、跨列单元格。, 表格标记举例 期中成绩表 姓名语文 数学 张三100 李四9843 王晓彬97 78 成大才
10、94 ,2.1.3 HTML表单标签与表单设计,表单是由文本框、密码框、多行文本框、单选、复选框、下拉菜单/列表、按钮、文件域、隐藏域等各种表单元素及其标记组成的。,1. 标记及其属性 表单使用和来定义的，标记有属性：name、method、action、target等属性。 语法格式： 其中：属性name是表单对象名称，,2. 标记及其属性 基本语法： 标记主要有六个属性： type，name，size，value，maxlength，check。 其中，name和type是必选的两个属性： name：属性的值是响应程序（由form标记中的action属性指定）中的变量名,type主要有9种
11、类型：,3下拉列表框：、 在表单中，通过和标记可设计一个下拉式的列表或带有滚动条的列表，用户可以在列表中选中一个或多个选项。 基本语法： ,4. 多行文本框标记 基本语法： 初始值 其中： rows设置输入域的行数， cols设置输入域的列数， wrap设置是否自动换行。,2.1.4 表单设计案例 学生入校注册页面设计,【例2-6】设计所示的学生信息注册网页。,【分析】 该页面采用表单的方式设计，为了使页面各元素整齐，采用表格的方式控制元素的位置。该例中给出了表单常用的各种元素，请注意它们的使用特点。 【实现】实现步骤及其源代码如下。,2.1.5 HTML框架标签与框架设计,框架将浏览器窗口分
12、割为几个窗口，下图就是一个框架，该框架被分为4个窗口。,1.窗口的分割与设置 分割框架的语法结构： 2.子窗口的设置 基本语法： ,3. target属性 在框架结构子窗口的HTML文档中如果含有超链接，当用户点击该链接时，目标网页显示的位置由target属性指定，若没有指定则在当前子窗口打开。 target属性使用格式： 超链接文字,2.1.6 框架设计案例 多媒体播放系统设计,【例2-7】设计如图所示的页面，被划分为3个子窗口，上面的窗口为页面功能提示区，下左部分为不同类型播放的功能选项，下右部分为播放系统显示播放信息窗口。图示显示的是，当单击“图像显示”时，所显示的图像（小鸭）。,【分析
13、】 该题目首先进行页面框架设计，采用的是“厂”型的结构，整个页面分上下两部分，而下部分又分为左右两部分。架构结构设计由程序ch02_7_main.html实现 上部分显示标题，由程序ch02_7_top.html实现， 下左部分显示操作菜单，由ch02_7_left.html实现， 右下部分显示运行界面，由ch02_7_right.htm实现， 由imgTag.html、imgTag.html和soundTg.html实现具体的功能，通过主页面左边的操作选项，超链接实现。 【实现】实现步骤及其源代码如下。,2.2 CSS样式表,CSS是Cascading Style Sheets（层叠样式表）
14、，也就是通常说的样式表。CSS是一种美化网页的技术。 本节主要内容： 2.2.1 CCS样式表的定义与使用 2.2.2 CSS常用属性 2.2.3 案例利用CCS对注册页面实现修饰,2.2.1 CCS样式表的定义与使用,定义选择器的基本语法： selector属性:属性值;属性:属性值; 说明： （1）CSS选择器分为3种类型： 标记选择器，通过HTML标签定义选择器。 类别选择器，使用class定义选择器。 ID选择器，使用id定义选择器。 （2）属性和值被冒号分开，属性之间用分号间隔，并由花括号包围。例如： p background-color:blue;color:red /定义标记p选
15、择器 .cs1font-family:华文行楷;font-size:15px /定义类别选择器.csl #cs2color:yellow /定义ID选择器#cs2,1CCS样式表的定义 CCS样式表的定义实际就是定义CCS选择器。 （1）标记选择器通过HTML标签定义样式表 基本语法格式： 引用样式的对象标签属性:属性值;标签属性:属性值;标签属性:属性值; （2）类别选择器使用class定义样式表 格式1： 标签名.类名标签属性:属性值;标签属性:属性值;标签属性:属性值; 格式2： .类名标签属性:属性值;标签属性:属性值;标签属性:属性值; （3）ID选择器使用id定义样式表 基本语法：
16、 #id名称标签属性:属性值标签属性:属性值;标签属性:属性值;,2样式表的使用 在HTML中使用CSS的方法有4种方式：行内式、内嵌式、链接式、导入式。 （1）行内式：利用style属性直接为元素设置样式。 例： 正文内容1 正文内容2,（2）内嵌式： 需要先定义有关的选择器，然后再使用。利用标签对，将样式表（选择器）定义在标签对之间。 例： 页面标题 pcolor:#0000FF;text-decoration:underline;font-weight:bold; font-size:25px; .infofont-size:12px;color:red; 这是第1行正文内容 这是第2行正文内容 ,（
