[互联网]WebCh02A_____标记语言与网页制作.ppt
《[互联网]WebCh02A_____标记语言与网页制作.ppt》由会员分享,可在线阅读,更多相关《[互联网]WebCh02A_____标记语言与网页制作.ppt(110页珍藏版)》请在三一文库上搜索。
1、高等教育“十一五”国家级规划教材 计算机技术基础,第 1 章 Web技术基础 第 2 章 标记语言与网页制作 第 3 章 图像处理技术 第 4 章 音频与视频处理 第 5 章 Flash动画设计 第 6 章 客户端开发 第 7 章 服务端编程,目 录,高等教育“十一五”国家级规划教材 计算机技术基础,第 2 章 标记语言与网页制作,本章要点: 1、熟悉超文本标记语言HTML的文档结构、标记的概念和语法。 2、掌握常用的HTML文档内容标记、表格标记、表单标记、控件标记、帧标记等。 3、CSS技术的应用(实践) 4、掌握网页制作工具FrontPage的应用(实践),高等教育“十一五”国家级规划教
2、材 计算机技术基础,第 2 章 标记语言与网页制作,2.1 标记语言及其发展 2.2 超文本标记语言HTML 2.3 网页设计基础 2.4 使用Front Page,高等教育“十一五”国家级规划教材 计算机技术基础,2.1 标记语言及其发展,标准通用标记语言SGML 超文本标记语言HTML 可扩展HTML规范XHTML 可扩展标记语言XML DHTML和SHTML技术,高等教育“十一五”国家级规划教材 计算机技术基础,标准通用标记语言SGML,标记语言的概念 广义上,标记语言可以理解为对内容进行描述的规范或标准。 例如,在出版印刷行业,编辑人员在进行文档内容编辑时对内容所做的标记 标准通用标记
3、语言SGML SGML(Standard Generalized Markup Language,SGML)是一个用来定义在电子表格中如何对文件的结构和内容进行描述的国际标准(ISO-8879) ,1969年,IBM SGML设计的非常复杂,SGML的正式规范达500多页 意义 SGML定义了标记语言的基本概念,奠定了标记语言的技术基础,高等教育“十一五”国家级规划教材 计算机技术基础,超文本标记语言HTML,HTML 的诞生 超文本标记语言HTML起源于通用标准标记语言SGML 欧洲核子研究中心CERN于1991年首先提出。 HTML规范 标记 HTML主要版本和发布时间 HTML 2.0,
4、 HTML工作组开发完成,于1996年发布 HTML3.2,W3C于1997年1月14日将其列为推荐版本,在HTML2.0标准中添加了诸如:字体、表格、Java程序等特征 HTML 4.0,W3C于1997年12月18日将其列为推荐版本,第二个稍作修正的HTML 4.0 版本与1998年12月24日发布。 HTML4.0中最重要的特征是引入了样式表CSS技术。 HTML 4.01,W3C于1999年12月24日将其列为推荐版本,是HTML 4.0的升级版本,它对原版本做出了部分修正。,高等教育“十一五”国家级规划教材 计算机技术基础,可扩展HTML规范XHTML,HTML 的缺陷 HTML的标
5、记固定,HTML只是一种表现技术,不能表达语义 不能适应现在越来越多的网络设备和应用的需要,比如手机、PDA、信息家电都不能直接显示HTML 。 由于HTML代码不规范、臃肿,浏览器需要足够智能和庞大才能够正确显示HTML 数据与表现混杂,页面要改变显示,就必须重新制作HTML W3C 不再继续开发HTML 可扩展HTML-XHTML W3C制定 ,2000年1月20 日发布XHTML 1.0 。 HTML向XML过度的一个桥梁 2002年8月5日,发布XHTML 2.0的第一个工作草案。,高等教育“十一五”国家级规划教材 计算机技术基础,可扩展标记语言XML,可扩展标记语言XML XML(e
6、Xtensible Markup Language) ,1998年2月10日,XML工作组正式向W3C提交了XML的最终推荐标准,这就是XML 1.0标准。 核心思想 实现数据和显示的分离 XML地构成 DTD、XML架构等基本要素 元规范 相应规范 可扩展样式语言XSL XML路径语言XPath XML查询语言Xquery 可扩展连接语言XLL及XML文档对象模型DOM 简单应用程序接口SAX等,高等教育“十一五”国家级规划教材 计算机技术基础,DHTML和SHTML技术,DHTML技术 与Web开发相关的技术或者说开发模式 ,不是规范 涉及的内容 HTML 4.0 规范 客户端脚本语言CS
7、SL(Clent-Side Scripting Language) 文档对象模型DOM(Document Object Model) ,它将网页中的内容抽象成对象,每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events),可以通过上面的客户端脚本语言编程控制 层叠样式表单CSS 技术 SHTML技术 SHTML不是一种HTML规范,而是一种网站设计、开发与维护技术 是一种Web服务器 API,其指令可以在Web服务端运行,以产生动态的html,是一种类似于ASP的基于服务器的网页制作技术,高等教育“十一五”国家级规划教材 计算机技术基础,2.2 超文本标记语言
8、HTML,HTML标记语法和文档结构 文件头标记及子标记 文件体标记及其属性 文档内容常用标记 表格(table) 表单(form) 层次块标记 对象和脚本程序标记 层叠样式表CSS技术 帧(frame),高等教育“十一五”国家级规划教材 计算机技术基础,HTML标记语法,HTML标记语法 标记(Tag) 标记由封装在小于号()构成的一对尖括号之中 一般形式:文档内容 例如:link text 标记类型与标记属性 单标记:只需单独使用即可完整表达意思; 双标记:包含首标记和尾标记两部分,须成对使用; 标记属性 例如:,高等教育“十一五”国家级规划教材 计算机技术基础,HTML文档结构, 头部信
9、息 文档主体 (语句部分) ,高等教育“十一五”国家级规划教材 计算机技术基础,文件头标记及子标记,文件头 标记对之间的部分称为文件头 子标记 标记 标记 标记 标记 背景音乐标记,高等教育“十一五”国家级规划教材 计算机技术基础,标记,标记 用于标识网页主题,其中的内容将在浏览器的标题栏中显示,不出现在页面内 举例 计算机基础网络教学平台GSL3.0,高等教育“十一五”国家级规划教材 计算机技术基础,标记,标记为单标记,没有尾标记。 为单标记,没有尾标记。 标记属性 http-equiv属性 name属性,高等教育“十一五”国家级规划教材 计算机技术基础,标记-http-equiv属性,ht
10、tp-equiv属性 http-equiv相当于HTTP的文件头,向浏览器传回信息,以正确显示网页内容 http-equiv属性参数值 content-type(显示字符集的设定),设定页面使用的字符集。 expires(期限),用于设定网页的到期时间 pragma(Cache模式),禁止浏览器从本地计算机的缓存中访问页面内容 ,该种设定访问者将无法使用脱机浏览功能 refresh(刷新),自动刷新并指向新页面。 window-target(显示窗口的设定),强制页面在当前窗口以独立页面显示 ,可以用来防止别人在框架里调用自己的页面,高等教育“十一五”国家级规划教材 计算机技术基础,标记-na
11、me属性,name属性 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎查找信息和分类信息用的。 name属性参数值 keywords(关键字),keywords用来告诉搜索引擎该网页的关键字是什么 。 description(内容描述),description用来告诉搜索引擎网站的主要内容 author(作者),标注网页的作者 robots(机器人向导),robots用来告诉搜索机器人需要索引的页面有哪些。 ,高等教育“十一五”国家级规划教材 计算机技术基础,标记,标记 标记定义了文档的基础URL地址,在文档中所有的相对地址形式的URL都是相对于这
12、里定义的URL而言的 。 文档中的标记不能多于一个,必须放于头部,并且应该在任何包含URL地址的语句之前 标记属性 href属性 ,指定了文档的基础URL地址,该属性在标记中是必须存在的 。 target属性 target属性同框架一起使用,它定义了当文档中的链接被点击后,在哪一个框架中展开页面。 常用的target的属性值有:_blank ,_self ,_parent ,_top 表明页面上所有的链接都在新窗口打开,高等教育“十一五”国家级规划教材 计算机技术基础,标记,标记(不建议使用) 标记定义了文档之间的包含 。 在HTML的头部可以包含任意数量的标记 标记属性 type,用于指定被
13、包含的文件类型。例如,text/css是指包含一个层叠样式表文件。 href,指向被包含资源的url地址 。 title,一个字符串,用于描述该链接关系。 rel,定义HTML文档和所要包含资源之间的链接关系 例如:,高等教育“十一五”国家级规划教材 计算机技术基础,文件体标记,标记 在标记对之间的部分称为html文档的文件体。文件体中描述的是浏览器中显示的内容。 在标记对之间可包含、等标记,它们所定义的文本、图像以及超链接等将会在浏览器中显示。 标记属性 一般属性 事件属性,高等教育“十一五”国家级规划教材 计算机技术基础,标记属性-1,标记一般属性,高等教育“十一五”国家级规划教材 计算机
14、技术基础,标记属性-2,标记事件属性,高等教育“十一五”国家级规划教材 计算机技术基础,一个简单HTML文档示例,文本编辑器,高等教育“十一五”国家级规划教材 计算机技术基础,一个简单HTML文档示例(Cont1),使用FrontPage编辑,高等教育“十一五”国家级规划教材 计算机技术基础,一个简单HTML文档示例(Cont2),在浏览器中打开,高等教育“十一五”国家级规划教材 计算机技术基础,文档内容常用标记,标题、段落标记 文本格式标记 字体标记 粗体、斜体和下划线标记 图像标记 超链接标记 影像地图标记 走马灯标记 注释标记,高等教育“十一五”国家级规划教材 计算机技术基础,标题标记,
15、标题标记 标记属性 Align,使用IntelliSense(智能感知)技术 查看标记属性,高等教育“十一五”国家级规划教材 计算机技术基础,段落标记、换行标记,段落标记 ,标记一个段落,输出位置转到下一行开始,并增加一个空行。 标记属性,高等教育“十一五”国家级规划教材 计算机技术基础,水平线标记,段落标记 水平线标记 ,插入一条水平线。 单标记。 标记属性 width,代码: ,高等教育“十一五”国家级规划教材 计算机技术基础,文本格式标记,字体标记 常用的属性有face、size和color,分别设置字体、文字大小和颜色。 粗体、斜体和下划线标记 、 字体放大、缩小、上标和下标显示标记
16、、 、 标记和标记类似,都是字体加粗标记。 标记和标记类似,是斜体强调标记。 为打字字体 Courier字体,字母等宽标记。 为传记引述斜体效果标记。,高等教育“十一五”国家级规划教材 计算机技术基础,文本格式标记(举例),标记的联合使用举例,高等教育“十一五”国家级规划教材 计算机技术基础,图像标记,图像标记 单标记,用以插入图片 标记属性 align:设置图像的对齐方式 id:指定的图片id号,用于对图像的程序访问 class:指定图像所属的类型(样式类) name:用于设定图像的名称,用于对图像的程序访问。 src:设置插入图像的url地址,即插入图像的路径和文件名。 title:属性值
17、为一字符串,鼠标指向图片时,鼠标右下角显示标题文本。 alt:设置图像替代文字,主要用于在浏览器还没有装入图像(或关闭图像显示)的时候,此图像的显示信息。(另:假使浏览器没有载入图片的功能,浏览器就会转而显示Alt属性的值。) border:设置图片边框。 height和width:分别用于设置图像的高度和宽度 hspace和vspace:分别用于设置图像的左右边框大小和上下边框大小。 ismap和usemap:在应用图像地图(map)时使用。 事件属性,高等教育“十一五”国家级规划教材 计算机技术基础,图像标记(Example),Title属性 如果在提示信息中,需要换行,可以使用“ 草原风
18、光“,高等教育“十一五”国家级规划教材 计算机技术基础,例2-2图像标记的应用示例, Taishan Introduction ,高等教育“十一五”国家级规划教材 计算机技术基础,例2-2图像标记的应用示例(显示结果),在浏览器中的显示,高等教育“十一五”国家级规划教材 计算机技术基础,超链接标记 (anchor:锚),超链接的分类 文本超链接 字符串 图片超链接 定义书签 书签文本 标记其它常用属性 target属性,定义超链接打开的目标窗口。 _self(相同框架),_blank(新建窗口),_top(整页),_parent(父窗口)。 title属性,属性值为一字符串,鼠标指向超链接时,
19、鼠标右下角显示标题文本。 onclick事件属性,高等教育“十一五”国家级规划教材 计算机技术基础,例2-3超链接标记使用示例, Shandong Travel 美丽的山东 济南 青岛 曲阜 泰山 烟台 威海 日照 济南 青岛 主要旅游网 返回 关闭窗口 ,高等教育“十一五”国家级规划教材 计算机技术基础,例2-3 显示网页,在浏览器中的显示,高等教育“十一五”国家级规划教材 计算机技术基础,影像地图标记 ,什么是影像地图 所谓影像地图,就是在一个图片上定义一系列区域,每个区域对应一个超链接。 标记形式 热点标记()属性 href属性,用于设定该热点所链接的url地址。 shape和coods
20、属性,shape和coords是两个主要的参数,用于设定热点的形状和大小。 shape=“rect” ,shape=“circle” ,shape=“polygon“,高等教育“十一五”国家级规划教材 计算机技术基础,在Frontpage 2003中设置影像地图标记,首先插入一幅图片,然后在图片上右单击,执行“显示图片工具栏”命令,即可定义热点区域。,高等教育“十一五”国家级规划教材 计算机技术基础,走马灯标记,“走马灯”标记用于标记一行或多行滚动的文本,也可以将文本带有超链接,以增加网页的动态效果。 标记常用属性 align属性,设定活动字幕的位置,取值可以是left、center、righ
21、t、top或bottom。 bgcolor属性,设定活动字幕的背景颜色,一般是十六进制数。 direction属性,设定活动字幕的滚动方向,取值可以是left、right、up或down。 behavior属性,设定滚动的方式,主要有三种方式:behavior=“scroll”表示由一端滚动到另一端;behavior=“slide”表示由一端快速滑动到另一端,且不再重复; behavior=“alternate”表示在两端之间来回滚动。 height和width属性,设定滚动字幕的高度和宽度。 hspace和vspace属性,设定滚动字幕的左右边框和上下边框的宽度。 scrollamount属
22、性,设定活动字幕的滚动距离。 scrolldelay属性,用于设定滚动两次之间的延迟时间。 loop属性,用于设定滚动的次数,当loop=-1表示一直滚动下去,直到页面更新。,高等教育“十一五”国家级规划教材 计算机技术基础,走马灯标记举例,例1 活动字幕内容第一行 活动字幕内容第二行 活动字幕内容第三行 例2 欢迎光临 例3 滚动的内容带有超链接,可以将内容用标记,即: 活动字幕内容,高等教育“十一五”国家级规划教材 计算机技术基础,走马灯标记显示效果,显示,高等教育“十一五”国家级规划教材 计算机技术基础,走马灯标记举例(代码), 活动字幕内容第一行 活动字幕内容第二行 活动字幕内容第三行
23、 站点更新. 泰山欢迎您 ,高等教育“十一五”国家级规划教材 计算机技术基础,表格(Table),什么是表格? 表格是由行、列构成的。每一行可以分成若干列,每一列成为一个单元格,相邻的单元格可以合并。 应用 页面布局 相关标记 表格标记 行标记 单元格标记 ,高等教育“十一五”国家级规划教材 计算机技术基础,表格相关标记属性,标记属性 一般属性 事件属性,高等教育“十一五”国家级规划教材 计算机技术基础,例2-4使用表格示例,HTML表格,高等教育“十一五”国家级规划教材 计算机技术基础,例2-4使用表格示例(代码), 学生成绩等记表 学 语 2008000001 张三 95 90 说 明 成
24、绩=平时*20%+期末*80% 2006年1月 ,高等教育“十一五”国家级规划教材 计算机技术基础,表格的复杂设计,表格嵌套 单元格内定义表格 立体表格设计 设置表格单元格属性 表格居中,高等教育“十一五”国家级规划教材 计算机技术基础,表单(form),用户交互 表单 表单标记 表单元素 单行文本框输入 密码文本框输入 多行文本框输入 button按钮输入 radio单选钮输入 复选框输入 复选列表框输入 hidden隐藏元素 文件上传 表单提交按钮标记submit/reset,高等教育“十一五”国家级规划教材 计算机技术基础,表单标记,一般形式 表单元素 标记属性 name属性,给出表单的
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 互联网 WebCh02A_ 标记 语言 网页 制作
链接地址:https://www.31doc.com/p-1998414.html