网站规划与网页设计.

Slides:



Advertisements
Similar presentations
第5章 表格的设计与 制作. 内容提要 表格的创建、编辑 表格的属性设置 特效表格的制作 布局表格的基本操作 表格和布局表格的应用.
Advertisements

Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.
HyperText Markup Language
第六章 网页设计与制作基础.
第六 章数据库访问页 6.1 数据访问页视图 6.2 创建数据访问页 6.3 编辑数据访问页 6.4 查看数据访问页 退出.
项目2 字符格式和段落编排 2017年3月7日6时54分.
第5章 HTML 標籤介紹.
佛山科学技术学院 第7章 HTML Internet及多媒体应用.
第8讲 HTML与PHP基础 静态网页 vs. 动态网页.
第2章 XHTML语言基础 标记语言简介 1 XHTML文档基础 2 文本及段落标记 3 列表标记 4 超链接 5.
HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。
教学内容 1、演示并讲解用表格布局制作的网页 2、用表格制作网页.
插入超链接 高邮市第一实验小学 范太国 任务一:设置文本超链接 任务一:设置文字超链接 步骤:1、选定文字并右击,在快捷菜单 中选择“超链接”命令。 2、在弹出的对话框中选择左侧“链接到:”中的“本文档中的位置(A)”项,在“请选择文档中的位置(C):”中选择需要链接的幻灯片,单击“确定”按钮。
第3章 HTML语言 3.1 HTML文档的基本结构 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
第7章 Web技术和HTML 孙焘.
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
第二部分 HTML语言控制 本次课的主要内容: 1、认识网页文件的结构 2、HEAD、TITLE、BODY等基本标记符的使用
HTML 語法教學 授課:彭穎聰 老師.
第6章 网页图像处理 通过本章学习,应该掌握以下内容: 能够选择合适的网页颜色 了解网页图像的基本格式 掌握使用网页图像的要点
永安广播电视大学 学生计算机技能培训 2005年3月26日.
第6章 制作网站链接 本章内容 练习思考 实验操作.
在PHP和MYSQL中实现完美的中文显示
HTML簡介、文字的變化、超連結的使用 主講:朱漢琳.
CT212 (02/03)-Network Programming and design
武汉纺织大学传媒学院 cm.wtu.edu.cn
ASP HTML知识.
第二章 網際網路網頁的設計.
HTML.
Xhtml常用标记.
ASP动态网页设计实用教程 主讲教师: 开课单位:.
第3章 超文本标记语言(HTML) 3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A>
UI 软件 设计 网页基本元素设计(二).
建國技術學院資訊管理學系 饒瑞佶 2004/7/5 彰化縣政府補助辦理網頁設計資料庫應用班 建國技術學院資訊管理學系 饒瑞佶 2004/7/5.
HTML網頁設計 Chapter 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法
第2章 超文本标记语言HTML.
8 网页制作基础知识 赵国庆 博士 北京师范大学教育技术学院
第八章 菜单设计 §8.1 Visual FoxPro 系统菜单 §8.2 为自己的程序添加菜单 §8.3 创建快捷菜单.
W3C标准网页制作 主讲教师:张 涛.
授课教师:姬广永 QQ: TEL: 学习交流网站:
网 站 设 计 与 建 设 Website design and developments
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
主讲:陶建平 华中科技大学网络与计算中心
网页设计与制作 网页基本标签(三) 北京农业职业学院刘丽霞.
网页制作基础 CNIC 王桦.
网站设计 前端 选择器(复习),表单.
W3C标准网页制作 主讲教师:张 涛.
第3章 行级标签 主讲人:刘泰然 经济管理学院.
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
UI 软件 设计 页面布局(三).
编程作业3:网页正文抽取 (10分).
表格页面 表格标签 1、标题标签<Caption>用于定义表格的标题。 align属性:控制标题位置。 取值为:
姚金宇 MIT SCHEME 使用说明 姚金宇
计算机网络与网页制作 Chapter 07:Dreamweaver CS5入门
项目二:HTML语言基础.
第4章 Excel电子表格制作软件 4.4 函数(一).
段磊 王慧锋 TEL: 数据库系统原理课程设计 实验环节4 段磊 王慧锋 TEL:
iSIGHT 基本培训 使用 Excel的栅栏问题
文档创建与发布操作要点 青海省教育信息中心 2018年12月18日.
第6章 框架实现多窗口网页.
Python 环境搭建 基于Anaconda和VSCode.
武汉纺织大学传媒学院 cm.wtu.edu.cn
基于列存储的RDF数据管理 朱敏
第2章 块级标签 经济管理学院.
第8章 创建与使用图块 将一个或多个单一的实体对象整合为一个对象,这个对象就是图块。图块中的各实体可以具有各自的图层、线性、颜色等特征。在应用时,图块作为一个独立的、完整的对象进行操作,可以根据需要按一定比例和角度将图块插入到需要的位置。 2019/6/30.
创建、启动和关闭Activity 本讲大纲: 1、创建Activity 2、配置Activity 3、启动和关闭Activity
使用Fragment 本讲大纲: 1、创建Fragment 2、在Activity中添加Fragment
表单页面 表单是用户利用浏览器对Web站点网络数据库进行查询的一种界面,用户利用表单可以输入信息或选择选项等,然后将这些信息提交给服务器进行处理。通过表单,既可以将浏览器的信息发送到Internet服务器上,同时表单也可以使用户与站点的浏览者交互或从浏览者那里收集信息。它是网页的设计者和使用者相互交流的工具。表单对象包括文本域(单行、多行、密码)、列表、菜单、复选框、单选框、按钮等。
HTML5.
教师:李金双 网页制作 教师:李金双
Presentation transcript:

网站规划与网页设计

第4章 XHTML 基础 4.1 XHTML简介 4.2 XHTML文档的基本结构 4.3 网页文件的创建过程 4.4 段落标记 4.3 网页文件的创建过程 4.4 段落标记 4.5 文字标记 4.6 超链接 4.7 图像 4.8 表格 4.9 框架(多窗口页面) 4.10 表单

4.1 XHTML简介 4.1.1 XHTML的产生 HTML语言依然有缺陷和不足,人们仍在不断的改进它,使它更加便于控制和有弹性,以适应网络上的应用需求。 2000年,W3C组织公布发行了XHTML 1.0版本。 XHTML 1.0是一种在HTML 4.0基础上优化和改进的新语言,目的是基于XML应用。 XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。

4.1 XHTML简介 4.1.2 XHTML的优点 1.XHTML文档遵从XML标准 XHTML 内容既符合XML,并且如果依照一些简单的指导方针,也能被HTML 4.0用户代理程序识别。 1.XHTML文档遵从XML标准 用标准的XML工具很容易查看、编辑和检验它们.在现有的HTML 4.0代理用户程序中使用,也可以在新的XHTML用户代理程序中使用,在后者中使用可以达到与前者同样或更好的效果。 2.在XHTML文档中可使用更多的应用程序 XHTML文档中使用的应用程序(如Script和Applet)可以是HTML的文档对象模型DOM,也可以是XML的DOM。

4.1 XHTML简介 4.1.3 XHTML代码规范 1.所有的标记都必须有一个相应的结束标记 单独不成对的标签,则在标签最后加一个“/”来关闭它 <p>一定写对应的</p> <br /> <img height="80" alt="网页设计师" src="../images/logo_w3cn.gif" width="200" /> 2.所有标签的元素和属性的名字都必须使用小写 XHTML对大小写是敏感的。XHTML要求所有的标签和属性的名字都必须使用小写字母。

4.1 XHTML简介 4.1.3 XHTML代码规范 3.所有的标记都必须合理嵌套 按照XHTML要求必须修改为: <p><b></p></b>错误 按照XHTML要求必须修改为: <p><b></b>/p> 4.所有的属性必须用引号括起来 在HTML中可写为: <input name=guitar type=checkbox value=guitar> 而按照XHTML要求必须修改为: <input name="guitar" type="checkbox" value="guitar" />

4.1 XHTML简介 4.1.3 XHTML代码规范 5.特殊符号“<”、“>”和“&”用编码表示  小于(<)号,不是标签一部分的,必须被编码为&lt; 大于(>)号,不是标签一部分的,必须被编码为&gt;  (&)号,不是实体的一部分的,必须被编码为&amp。 6.每个属性必须赋值 XHTML规定所有属性都必须有一个值,没有值的就重复本身。例如: <td nowrap> <input type="checkbox" name="shirt" value="medium" checked> 按照XHTML要求必须修改为: <td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked" /> </td> 7.不要在注释内容中使用“--” “--”只能出现在XHTML注释的开头和结束位置。

4.2 XHTML文档的基本结构 4.2.1 标记及其属性 XHTML文档由标记和被标记的内容组成。格式为: 4.2.1 标记及其属性 1.标记 XHTML文档由标记和被标记的内容组成。格式为: <标记> 受标记影响的内容 </标记> <title> 我的第一个网页 </title> 需要注意: ① 每个标记都要用“<”(小于号)和“>”(大于号)括起来,如<p>,<table>,以表示这是XHTML代码而非普通文本。 “<”、“>”与标记名之间不能留有空格或其他字符。 ② 在标记名前加上符号“/”便是其结束标记,表示该标记内容的结束,如</h1>。标记也有不用</标记>结尾的,称之为单标记。

4.2 XHTML文档的基本结构 4.2.1 标记及其属性 2. 标记的属性 标记只是规定这是什么信息,或是文本,或是图片,但怎样显示或控制这些信息,就需要在标记后面加上相关的属性来表示,每个标记有一系列的属性。格式为: <标记 属性1="属性值1" 属性2="属性值2" …> 受影响的内容 </标记> <h1 align="left"> 欢迎!</h1>

4.2 XHTML文档的基本结构 4.2.2 XHTML的基本结构 XHTML文档是一种纯文本格式的文件,XHTML文档的基本结构为: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title> 网页的标题 </title> </head> <body> 网页的内容 </body> </html> 【例4-1】

4.2 XHTML文档的基本结构 4.2.2 XHTML的基本结构 【说明】 ①DOCTYPE必须为大写。 DTD叫做文档类型定义,里面包含了文档的规则。浏览器根据定义的DTD来解释页面的标记,并显示出来。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分。 DOCTYPE声明必须放在每一个XHTML文档的最顶部,在所有代码和标记之前。

4.2 XHTML文档的基本结构 4.2.2 XHTML的基本结构 【说明】 ② “xmlns”是XHTML namespace的缩写,称为“名字空间”。由于XHTML是HTML向XML过渡的标记语言,它需要符合XML文档规则,因此也需要定义名字空间。又因为XHTML1.0不能自定义标记,所以它的名字空间都相同,就是http://www.w3.org/1999/xhtml。 ③ 第5行定义语言编码。为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言。一般使用gb2312(简体中文)。

4.3 网页文件的创建过程 4.3.1 编辑和保存网页 用最简单的“记事本”来编辑网页。 4.3 网页文件的创建过程 4.3.1 编辑和保存网页 用最简单的“记事本”来编辑网页。 ① 打开记事本。单击Windows的“开始”按钮,在“程序”菜单中的“附件”子菜单中单击“记事本”。 ② 创建新文件,并按HTML语言规则编辑。在“记事本”窗口中输入HTML语言,输入的内容。 ③ 保存网页。打开“记事本”的“文件”菜单,选择“保存”。此时将出现“另存为”对话框,在“保存在”下拉列表框中选择文件要存放的路径;在“文件名”文本框输入以.html或.htm为后缀的文件名,如welcome.html;在“保存类型”下拉列表框中选择“文本文档”。最后单击“保存”按钮,将记事本中的内容保存在磁盘中。 如果希望这一页是网站的首页(主页),想让浏览者输入网址后,就显示这一页的内容,可以把这个文件设为默认文档,文件名为index.html或index.htm。

4.3 网页文件的创建过程 4.3.2 预览网页 1. 用浏览器打开 2. 在“Windows资源管理器”或“我的电脑”中打开 4.3 网页文件的创建过程 4.3.2 预览网页 1. 用浏览器打开 2. 在“Windows资源管理器”或“我的电脑”中打开 在“Windows资源管理器”或“我的电脑”中双击要打开的.html文件,这时将直接在默认的浏览器中打开该.html文件。

4.4 段落标记 1 注释标记<!--...--> <!-- 注释内容 --> 4.4 段落标记 1 注释标记<!--...--> <!-- 注释内容 --> 2 强制换行和不换行标记<br />、<nobr>...</nobr> <br>放在一行的末尾,可以使后面的文字、图片、表格等显示于下一行,而又不会在行与行之间留下空行,即强制文本换行。强制换行标记的格式为: 文字 <br /> 不换行标记可令文字不能因太长使浏览器无法显示而换行,它对住址、数学公式、一行数字等尤其有用。其格式为: <nobr> 文字 </nobr>

4.4 段落标记 3 段落标记<p>...</p> 4.4 段落标记 3 段落标记<p>...</p> 段落标记放在一个段落的头尾,用于定义一个段落。<p>...</p>标记不但能使后面的文字换到下一行,还可以使两段之间多一空行。段落标记的格式为: <p align="left|center|right"> 文字 </p> 一个段落标记<p>可以看作是两个<br />标记,即<br /><br />。

4.4 段落标记 4 定位标记<div>…</div> 4.4 段落标记 4 定位标记<div>…</div> 设定文字、图像、表格的摆放位置。当在许多段落中设置对齐方式时,常使用<div>…</div>标记。定位标记的格式为: <div align="left|center|right"> 文本、图像或表格 </div> 缺省时默认为left。

4.4 段落标记 5 水平线标记<hr /> 4.4 段落标记 5 水平线标记<hr /> 当浏览器解释到HTML文档中的<hr/>标记时,会在此处换行,并加入一条水平线段。 水平线标记的格式为: <hr align="left|center|right" size="横线粗细" width="横线长度" color="横线色彩" noshade=“ noshade” /> size设定线条粗细,以像素为单位,默认为2。 width设定线段长度,可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)。 color设定线条色彩,默认为黑色。可以采用色彩的名称。色彩可以用相应英文单词或以“#”引导的一个十六进制数代码来表示。

4.4 段落标记 6.段落标记综合实例 【例4-2】本例文件ex4-2.htm在浏览器中的显示效果如图4-4所示。 【例4-2】 4.4 段落标记 6.段落标记综合实例 【例4-2】本例文件ex4-2.htm在浏览器中的显示效果如图4-4所示。 图4-4 段落标记综合实例 【例4-2】

4.5 文字标记 1 标题文字标记<h#>…</h#> 4.5 文字标记 1 标题文字标记<h#>…</h#> <h# align="left|center|right"> 标题文字 </h#> #用来指定标题文字的大小,#取1~6的整数值,取1时文字最大,6时文字最小。 属性align设置标题在页面中的对齐方式:left、center或right。缺省时默认为left。 <h#>…</h#>标记缺省显示宋体,在一个标题行中无法使用不同大小的字体。 与用<title>…</title>定义的网页标题不同,标题格式显示在浏览器窗口内,而不显示在浏览器的标题栏中。

4.5 文字标记 2.文字标记实例 【例4-3】 【例4-3】设置文字的标题。本例文件ex4-3.htm在浏览器中的显示效果如图4-5所示。 4.5 文字标记 2.文字标记实例 【例4-3】设置文字的标题。本例文件ex4-3.htm在浏览器中的显示效果如图4-5所示。 【例4-3】 图4-5 文字标记综合实例

4.6 超链接 超链接从当前网页定义的位置跳转到其他位置,包括当前页的某个位置、Internet或本地硬盘或局域网上的其他文件,甚至跳转到声音、图片等多媒体文件。 通过超链接还可以获得不同形态的服务,如文件传输、资料查询、电子邮件、远程访问等。 当网页包含超链接时,网页中的外观形式为彩色(一般为蓝色)且带下划线的文字或图片。单击这些文本或图片,可跳转到相应位置。 超文本链接使用锚点标记<a>来定义。

4.6 超链接 1 锚点标记<a>...</a> 4.6 超链接 1 锚点标记<a>...</a> 锚点(anchor)标记由<a>定义,它在网页上建立超文本链接。 通过单击一个词、句或图片,可从此处转到另一个链接资源(目标资源),这个目标资源有惟一的URL。具有以上特点的词、句或图片就称为热点。 <a>标记的格式为: <a href="URL" target="打开窗口方式"> 热点 </a> href属性为超文本引用,它的值为一个URL,是目标资源的有效地址。 如果要创建一个不链接到其他位置的空超链接,可用“#”代替URL,即<a href="#"> 热点 </a>。

target属性 target设定链接被单击后结果所要开始窗口的方式。可选值为:_blank,_parent,_self,_top。

4.6 超链接 2 指向其他页面的链接 (1) 链接到同一目录内的网页文件 链接到同一目录内的网页文件的格式为: 4.6 超链接 2 指向其他页面的链接 (1) 链接到同一目录内的网页文件 链接到同一目录内的网页文件的格式为: <a href="目标文件名.html"> 热点文本 </a> (2) 链接到下一级目录中的网页文件 链接到下一级目录中网页文件的格式为: <a href="子目录名/目标文件名.html"> 热点文本 </a> (3) 链接到上一级目录中的网页文件 链接到上一级目录中网页文件的格式为: <a href="../目标文件名.html"> 热点文本 </a> 其中“. . /表示退到上一级目录中。 (4) 链接到同级目录中的网页文件 链接到同级目录中网页文件的格式为: <a href="../子目录名/目标文件名.html"> 热点文本 </a>

4.6 超链接 3 指向本页中的链接 <a href="#记号名"> 热点文本 </a> 4.6 超链接 3 指向本页中的链接 要在当前页面内实现超链接,需要定义两个标记:一个为超链接标记,另一个为书签标记。超链接标记的格式为: <a href="#记号名"> 热点文本 </a> 书签就是用<a>标记对该文本作一个记号。格式为: <a name="记号名"> 目标文本附近的字符串 </a>

建立指向其他页面某处的文本 格式为: <a href="URL#记号名"> 热点文本 </a> 要在跳转到的位置处加上链接标记: <a name="记号名"> 文字串 </a> 如果链接指向其他文件的某一部分,格式为: <a href="目标文件路径/文件名#记号名"> 热点文本 </a>

4.6 超链接 4 指向下载文件的链接 <a href="下载文件名"> 热点文本 </a> 5 指向电子邮件的链接 4.6 超链接 4 指向下载文件的链接 如果链接到的文件不是HTML文件,则该文件将作为下载文件,其格式为: <a href="下载文件名"> 热点文本 </a> 5 指向电子邮件的链接 单击指向电子邮件的链接,将打开缺省的电子邮件程序,如FoxMail、Outlook Express,并自动填写邮件地址。指向电子邮件链接的格式为: <a href="mailto:E-mail地址"> 热点文本 </a>

4.6 超链接 6.超链接综合实例 【例4-4】超链接综合实例。在浏览器中的显示效果如图4-6所示。 【例4-4】 图4-6 超链接综合实例

4.7 图像 1 网页的背景 (1) 设置背景色 <body bgcolor="色彩值"> 4.7 图像 1 网页的背景 (1) 设置背景色 <body bgcolor="色彩值"> “色彩值”可以为色彩的英文名或相应十六进制值。 (2) 用图片作为背景 <body background="图片文件名"> background取值为一个图片文件名,并且要指出文件存放的路径,可以是相对路径,也可以是绝对路径。图片文件可为GIF格式或JPEG格式的文件。 在浏览器中,作为背景的图片将按原来的大小复制,重复铺满整个网页。

4.7 图片 2 图片标记<img> <img src="图片文件名" alt="简单说明" width="图片宽度" height="图片高度" border="边框宽度" hspace="水平方向空白" vspace="垂直方向空白" align="环绕方式|对齐方式“ /> 如果不设定图片的尺寸,图片将按照其本身的大小显示。可使用<img>标记的width和height属性来设置图片的大小。width和height属性的属性值可取像素数,也可取百分数。

4.7 图片 用图片作为热点 <a href="URL"> <img src="图片文件名"> </a> 4.7 图片 用图片作为热点 图片也可作为热点,单击图片则跳转到被链接的文本或其他文件。格式为: <a href="URL"> <img src="图片文件名"> </a> 例如,下面代码: <a href="vb_book.html"> <img src="vb.jpg" alt="VB封面" width="140" height="190" hspace="10" vspace="5“ /> </a>

4.7 图片 4.图像应用综合实例 【例4-5】图像应用综合实例。本例文件ex4-5.htm在浏览器中的显示效果如图4-7所示。 图4-7 图像应用综合实例 【例4-5】

4.8 表格 1 简单表格 表格的标记为<table>,行的标记为<tr>,表项的标记为<td>。格式为: <table border="n" width="x|x%" height="y|y%" cellspacing="i" cellpadding="j"> <tr> <th>表头1</th> <th>表头2</th> <th>…</th> <th>表头n</th> <tr> <td>表项1</td> <td>表项2</td> <td>…</td> <td>表项n</td> … </table>

4.8 表格 2 表格内文字的对齐方式 在缺省下,表项居于单元格的左端。 (1) 水平对齐 表项数据的水平对齐用标记<th>、<td>和<tr>的align属性。align的属性值分别为:center(表项数据的居中)、left(左对齐)、right(右对齐)或justify(左右调整)。 (2) 垂直对齐 valign的属性值分别为:top(靠单元格顶)、bottom(靠单元格底)、middle(靠单元格中)或baseline(同行单元数据项位置一致)。

4.8 表格 3 表格在页面中的对齐方式 表格在浏览器窗口中的位置有三种:居左、居中和居右。 4.8 表格 3 表格在页面中的对齐方式 表格在浏览器窗口中的位置有三种:居左、居中和居右。 使用<table>标记的align属性。格式为: <table align="left|center|right"> 当表格位于页面的左侧或右侧时,文本填充在另一侧。 当表格居中时,表格两边没有文本。 当align属性缺省时,文本在表格的下面。

4.8 表格 4 表格的色彩和图片背景 bgcolor=""色彩或色彩值" 设置背景色彩 background="图片文件名“ 设置背景图片 4.8 表格 4 表格的色彩和图片背景 在<table>、<th>、<tr>、<td>标记中,属性可以改变表格的背景和边框的色彩、添加背景图片,也可以为行和单元格改变色彩、添加背景图片。 bgcolor=""色彩或色彩值" 设置背景色彩 background="图片文件名“ 设置背景图片 bordercolor="色彩" 设置表格边框的色彩 bordercolorlight="色彩" 设置表格边框亮部的色彩 rules="row,cols或none" 设置表内线的显示方法,none为无内线

4.8 表格 5.表格应用综合实例 【例4-6】表格应用综合实例。本例文件ex4-6.htm在浏览器中的显示效果如图4-8所示。 【例4-6】 图4-8 表格应用综合实例

4.9 框架(多窗口页面) 框架(Frames)也称多窗口页面或帧,是在同一浏览器窗口中显示多个相互隔离的XHTML页的结构,每个区域显示一个XHTML文件。 1 建立框架 框架的建立使用<frameset>、<frame>两个标记。<frameset>用来划分窗格,<frame>标记用来声明其中框架页面的内容。框架的基本结构为: <html> <head>... </head> <frameset> <!-- 划分窗格 --> <frame src="url"> <!-- 定义第1个窗格 --> <frame src="url"> <!-- 定义第2个窗格 --> … </frameset> </html>

4.9 框架(多窗口页面) (1) <frameset>标记 4.9 框架(多窗口页面) (1) <frameset>标记 <frameset>标记用来定义一个框架组的属性,格式为: <frameset row="横向框架数" cols="纵向框架数" border="像素值" bordercolor="色彩值" frameborder="yes|no" framespacing="像素值“ > … </frameset> 其中属性: row 设定横向分割的框架数目 cols 设定纵向分割的框架数目 border 设定边框的宽度 bordercolor 设定边框的色彩 frameborder 设定有∕无边框 framespacing 设置各窗格间的空白

4.9 框架(多窗口页面) 框架有横向和纵向之分。对一个框架来说,其大小是很重要的。<frameset>的rows和cols属性用于设定横向分割和纵向分割的框架数目。例如,要建立有三个横向框架的页面,可写为: <frameset row="x1|y1%|z1*, x2|y2%|z2*, x3|y3%|z3*">

4.9 框架(多窗口页面) (2) <frame>标记 4.9 框架(多窗口页面) (2) <frame>标记 <frame>标记用于给各个框架指定页面的内容,也就是,它将各个框架和包含其内容的那个文件联系在一起。<frame>是一个单标记,格式为: <frame src="源文件名.html" name="框架名" border="像素值" bordercolor="色彩值" frameborder="yes|no" marginwidth="像素值" marginheight="像素值" scrolling="yes|no|auto" noresize/> <frame>标记的个数应等于在<frameset>标记中所定义的框架数,并按在文件中出现的次序按先行后列对框架进行初始化。如果<frame>标记数目少于<frameset>中定义的框架数量,则多余的框架为空。

4.9 框架(多窗口页面) 【例4-7】纵向排列多个窗格。本例中用到的其他HTM文件是在前面例题中建立的文件。本例文件ex4-7.htm在浏览器中显示的效果如图4-9所示。 框架的嵌套 图4-9 纵向排列多个窗格 【例4-7】

4.9 框架(多窗口页面) 2 框架间的链接 在一个框架中显示一个所有网页内容的目录,而通过单击其中的某项,在另一个框架中显示相应内容。这些目录是热点文本,需要在框架之间建立超链接,并指明显示的目标文件的框架。 使用<a>的target属性就可以控制目标文件在那个框架内显示。当单击热点文本时,目标文件就会出现在有target指定的框架内。target属性的值可以为框架名,使用格式为: <a href="目标文件名.html" target="框架名"> 热点文本 </a>

4.9 框架(多窗口页面) 2 框架间的链接 另外,“框架名”有4个特殊的值,分别实现4类特殊的操作: 4.9 框架(多窗口页面) 2 框架间的链接 另外,“框架名”有4个特殊的值,分别实现4类特殊的操作: target="_blank":链接的目标文件被显示在一个新的没有名字的浏览器窗口中。 target="_self":链接的目标文件被显示在当前框架窗口中,代替正在显示的热点文本所在的那个文件,是省略target属性的默认值。 target="_top":链接的目标文件被显示在整个浏览器窗口(取消了框架)。 target=“_parent”:当框架嵌套时,链接的目标文件被显示在父框架中;否则,被显示在整个浏览器窗口中。

4.9 框架(多窗口页面) 3.框架应用综合实例 【例4-9】制作一个框架集,包含上、下框架,下框架又分为左、右两部分,并实现框架间的链接。本例文件ex4-9.htm在浏览器中显示的效果如图4-11所示。 图4-11 框架应用综合实例 【例4-9】

4.10 表单 1 表单的标记<form>...</form> 4.10 表单 1 表单的标记<form>...</form> 网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。在网页中,通过表单交流和反馈信息。格式为: <form name="表单名" action="URL" method="get|post"> <input type="表项类型" name="表项名" value="缺省值" size="x" maxlength="y“ /> … </form> name属性 :表单的名字,在一个网页中用于惟一识别一个表单 action属性 :表单处理的方式,往往是E-mail地址或网址 method属性:表单数据的传送方向,是获得(GET)表单还是送出(POST)表单

4.10 表单 2 文字和密码的输入 type属性值为text,则输入的文本以标准的字符显示; 4.10 表单 2 文字和密码的输入 type属性值为text,则输入的文本以标准的字符显示; type属性值为password,则输入的文本显示为“*”。 在表项前应加入表项的名称,如“您的姓名”等,以告诉浏览者在随后的表项中输入的内容。

4.10 表单 3 重置和提交 <input type="reset" value="按钮名“ /> 4.10 表单 3 重置和提交 如果浏览者想清除输入到表单中的全部内容,可以使用<input>标记中的type属性所设的重置(reset)按钮,当浏览者完成表单的填写,想要发送时,可使用<input>标记的属性type所设的提交(submit)按钮,将表单内容送给action中的网址或函件信箱。格式为: <input type="reset" value="按钮名“ /> <input type="submit" value="按钮名“ /> 当缺省value的设置值时,重置和提交的按钮分别显示为“重置”和“提交查询内容”。

4.10 表单 4 复选框和单选钮 选择钮可以是复选框(checkbox)或单选钮(radio)。 4.10 表单 4 复选框和单选钮 选择钮可以是复选框(checkbox)或单选钮(radio)。 用<input>标记的type属性可设置选择钮的类型 属性value可设置该选择钮的控制初值,用以告诉表单制作者选择结果。 用checked表示是否为缺省选中项。 name属性是控制名,同一组的选择钮的控制名是一样的。

4.10 表单 5 选择栏<select> 当浏览者选择的项目较多时,如果用选择钮来选择,占页面的区域就会较多。可以用<select>标记和<option>标记来设置选择栏。选择栏可分为两种,即弹出式和字段式。<select>标记的格式为: <select size="x" name="控制操作名" multiple> <option value=“”> … </select>

4.10 表单 5 选择栏<select> 其中: size:取数字,表示在带滚动条的选择栏中一次可见的列表项数 4.10 表单 5 选择栏<select> 其中: size:取数字,表示在带滚动条的选择栏中一次可见的列表项数 name: 控制操作名 multiple:不带值,加上本项表示可选多个选项,否则只能单选 <option>标记的格式为: <option select value="可选择的内容"> select 不带值,加上本项表示该项是预置的 value 指定控制操作的初始值,缺省时初值为option中的内容表示选项值

4.10 表单 6 多行文字的输入textarea>...</textarea> 4.10 表单 6 多行文字的输入textarea>...</textarea> <TEXTAREA>标记可以设置允许成段文字的输入。格式为: <textarea name="控制操作名" rows="行数" cols="列数"> 多行文本 </textarea> 其中的行数和列数是指不用滚动条就可看到的部分。

4.10 表单 7.表单应用综合实例 【例4-10】制作一个“职员调查表”,收集职员的个人资料。为了显得整洁,在表单中使用了无边框表格。本例文件ex4-10.htm在浏览器中显示的效果如图4-12所示。 【例4-10】 图4-12 表单应用综合实例

习题4 2.制作如图4-14所示的网页,单击软件名称,则下载该软件。 1.制作如图4-13所示的网页,要求章标题的级别为标题h2,居中,黑体,红色;节标题的级别为标题h3,居左,楷体,绿色;正文为宋体,蓝色。整个网页背景色为乳白色。 2.制作如图4-14所示的网页,单击软件名称,则下载该软件。 3.分别制作如图4-15(a)、(b)所示的网页,单击小图像,将显示放大的图像。 4.练习表格在页面中的应用,分别制作如图4-16(a)、(b)所示的网页。在图4-16(a)中单击“详细”超文本则打开新的浏览器窗口,显示详细内容,如图4-16(b)所示。 5.制作一个“网友推荐”表单,如图4-17所示。 6.制作如图4-18所示的框架网页。在左框架中单击项目,在右框架中显示相应的内容。