项目HTML语言.ppt

项目3 HTML语言,2,任务5 表单标记,任务4 超链接标记,任务3 表格标记,任务2 页面排版标记,任务1 认识HTML语言,项目3 HTML语言,3,任务分析 该任务通过一个简单的网页实例来认识HTML文件的基本结构和HTML语言的基本语法。网页背景颜色为深红色，文本颜色为白色。,任务1 认识HTML语言,4,一什么是HTML语言,HTML（Hyper Text Markup Language，超文本标记语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，通常它的扩展名为“.html”或“.htm”。,任务1 认识HTML语言,5,二HTML基本语法,任务1 认识HTML语言,1单标记 单独使用就可以表达语意的标记。 语法： 如，换行标记 。,2双标记 双标记必需成对出现，由“始标记”和“尾标记”两部分 组成。“尾标记”是在“始标记”前加一个斜杠（/）。 语法： 如，段落标记 ,6,二HTML基本语法,任务1 认识HTML语言,为了使呈现的页面更加美观，除了使用标记，还可以使用标记的属性对 标记之间的内容进行修饰， 其语法为： 如，,7,二HTML基本语法,任务1 认识HTML语言,头部,主体,HTML文档,HTML文档通常由包含在 标记和 标记之间的头部和正文两大 部分构成，基本结构如图：,8,二HTML基本语法,任务1 认识HTML语言,表示文档的开头和结尾，在文档的最外层，文档中的所有 信息都是都包含在这一对标签中。,是html文档的头部，这一对标签中的内容用于说明网页 文件的标题()和其他公共的属性，是不显示在浏览器窗口中的。,这对标记之间的内容是浏览器窗口中显示的内容。,9,二HTML基本语法,任务1 认识HTML语言,标记对应网页的主体部分，其标记属性就是页面的属性。 如bgcolor、background、text等。 bgcolor=“颜色“ 设置文档背景色 background=“图像文件的路径/图像文件的名字“ 设置文档背景图像文件 text=“颜色“ 设置文档文字默认颜色,10,三. 任务实施,任务1 认识HTML语言,2打开Windows记事本程序。输入如下HTML语句：,1使用“我的电脑”或“资源管理器”在我们已经创建的example站点（mwmw文件夹）， 创建一个新文件夹，命名为exam。,11,三. 任务实施,任务1 认识HTML语言,4打开mwmw文件夹中的exam文件夹，双击ex01.html网页文件，在浏览器中可以 观察到其效果。,3保存此文件到exam文件夹中，命名为ex01.html。,12,任务1 认识HTML语言,网页的预览效果,返回,13,任务分析 该任务结合“优秀员工评比的通知”网页，介绍页面标记的使用方法。,任务2 页面排版标记,14,一标题标记,任务2 页面排版标记,常用属性：align，用于定义标题的对齐方式， 默认值为“左对齐”，属性值如表所示。,15,二版面格式标记,任务2 页面排版标记,1说明标记 格式： 作用：为文档加上说明，但是不显示在网页页面中。,2段落标记 格式：或者 作用：使标记后的内容另起一段，并加一个空白行。 常用属性：align，用于定义段落的对齐方式。 （取值方式如上表 ）,3换行标记 格式： 作用：使标记后的内容换一行显示，但是不换段落。,16,二版面格式标记,任务2 页面排版标记,4字体标记 格式： 作用：设置标记间内容的字体、大小、颜色等格式。 常用属性：如表所示。,17,二版面格式标记,任务2 页面排版标记,5字体修饰标记 作用：设置标记间内容的粗体、斜体、下划线等特殊效果，,18,二版面格式标记,任务2 页面排版标记,6文本居中对齐标记 格式： 作用：设置居中对齐方式。 功能与等标记中的属性align=“center“相同。,19,二版面格式标记,任务2 页面排版标记,7水平线标记 格式： 作用：在文档中插入一根水平线。 常用属性：如表所示。,20,二版面格式标记,任务2 页面排版标记,8特殊符号 作用：在文档中显示特殊符号。 各种特殊符号的字符名称如表所示。,21,三项目符号标记,任务2 页面排版标记,有序列表：它的主要标记有和 。其中，标记 放在外层，标记放在内层用于区分 每个列表项。列表效果如图所示。,22,三项目符号标记,任务2 页面排版标记,无序列表:即项目符号，它的主要标记有 和。其中，标记放在外 层，标记放在内层用于区分每个列表项。 列表效果如图所示。,23,三项目符号标记,任务2 页面排版标记,24,四图像标记,任务2 页面排版标记,25,五. 任务实施,任务2 页面排版标记,1运行Dreamweaver CS3，打开站点example。,2新建一个文件夹article，在此文件夹中新建一个空白的网页文件 notice.html。切换到代码视图。,3删除其中原有的语句，输入语句。,4认识并分析网页文件中所使用的标记及其属性。,5保存此网页文件，并浏览。,26,任务2 页面排版标记,网页的预览效果,返回,27,任务分析 任务2中的通知网页结构过于单调，在网页中增加一些相关元素后就会有较好的显示效果。为了使得这些增加的内容和原先的通知内容有机结合、统一布局，使用表格是一种可取的方法。,任务3 表格标记,28,一几种表格标记,任务3 表格标记,1表格标记 格式： 作用：标志表格的开始和结束。 常用属性：如表所示。,29,一几种表格标记,任务3 表格标记,2表格标题标记 格式： 作用：用于设置表格的标题，该标记可省略。,30,一几种表格标记,任务3 表格标记,3行标记 格式： 作用：表格中的一行。 常用属性：如表所示。,31,一几种表格标记,任务3 表格标记,4单元格标记 格式： 作用：表示表格中的一个普通单元格，但是该标记必须放在标记中。 常用属性：如表所示。,32,一几种表格标记,任务3 表格标记,5表头单元格标记 格式： 作用：表示表格中的表头单元格，该标记也必须放在标记中， 但是该标记可以省略。 常用属性：同标记的常用属性，如上表所示。,33,二合并单元格,任务3 表格标记,右图所示的表格就左图表格通过合并单元格后得到的。右图 中的A2单元格是纵向合并（设置rowspan=“2”）得到的， B3和C2单元格都是横向合并（分别设置colspan=“2”和 colspan=“3”）得到的。,34,二合并单元格,任务3 表格标记,整个表格中，每行的列数和是相同的。,如果在某行中使用了colspan属性，即在该行中横向合并。 例如：colspan=“2”，则从当前单元格向右合并2个两个 单元格，那么在当前行标记中就要少包含一个 标记，以此类推。,如果在某列中使用了rowspan属性，即在该列中纵向合并。 例如：rowspan=“2”，则从当前单元格向下合并2个两个 单元格。那么在下一行中，就少包含一个单元格，即下一行的 标记中要少写一个标记，以此类推。,35,三. 任务实施,任务3 表格标记,1运行Dreamweaver CS3，打开站点example的中article文件夹中 的notice.html文件。,2切换到代码视图。,3在原有的语句，进行补充。,4认识并分析网页文件中所使用的标记及其属性。,5保存此网页文件，并浏览。,36,任务3 表格标记,网页的预览效果,返回,37,任务分析 创建超链接是HTML语言中一个重要的部分，网站是有多个网页构成的，每个网页之间就是通过超链接将他们连接在一起，可以互相访问。,任务4 超链接标记,38,一超链接标记,任务4 超链接标记,格式： 作用：通过点击网页中的文本、 图像等对象连接到其他的网页、 图像或文件等。 常用属性：如表所示。,39,二绝对路径和相对路径,任务4 超链接标记,1绝对路径 完整的描述文件位置的路径就是绝对路径。 如，F:/mwmw/image/top.jpg或者 http:/www.baidu.com。,2相对路径 与文档保存位置相对的位置叫相对路径。,40,二绝对路径和相对路径,任务4 超链接标记,如果网页文档和引用的文件在同一个文件夹中，直接 写引用文件的文件名。 如：在当前站点中有index.html文件和home.html文件。 当网页文档index.html的超链接中引用home.html时， 可以直接写。,如果引用的文件在网页文档的下级文件夹中，直接写文件 夹的路径即可。 如：在当前站点中有文件夹images，在images中有图像 文件top01.jpg,当网页文档index.html中引用top1.jpg 时，可以写。,“/”来表示网页文档的上一级文件夹，“/”表示 网页文档的上上级的文件夹，以此类推。 如：在当前站点中有文件夹article，在此文件夹中有 notice.html文件。则，此网页文件中要引用images文件夹 中的top.jpg文件，可以写。,41,三任务实施,任务4 超链接标记,1运行Dreamweaver CS3，打开站点example的中index.html文件。,2切换到代码视图。,42,三任务实施,任务4 超链接标记,4保存文件，并浏览网页。鼠标点击“点击进入”时，会产生页面跳转。,3在文档偏后的位置找到下列语句： 点击进入 修改成： 点击进入 ,43,任务4 超链接标记,网页的预览效果,返回,44,任务分析 表单是网页上的一个特定的区域，是用户交互的控件集合，相当于一个容器，其中可以包含按钮、文本框，下拉框等，表单在HTML页面中发挥了重要作用，利用表单可以收集用户端提交的信息，是联系用户和站点拥有者的重要桥梁，是实现交互的重要手段。,任务5 表单标记,45,一表单,任务5 表单标记,格式： 作用：标志表单的开始和结束，在和之间，可以使用 以外 的任何HTML标记，这使表单变得非常灵活。 常用属性：如表所示。,46,二常用的表单标记,任务5 表单标记,47,二常用的表单标记,任务5 表单标记,文本框和密码框 类型分别：type=“text”文本框， type=“password“密码框。 常用的属性见下表：,48,二常用的表单标记,任务5 表单标记,例如，下面这段语句对应下图所示的效果。 用户名： 密码：,49,二常用的表单标记,任务5 表单标记,按钮 按钮分为：普通按钮、提交按钮、复位按钮。 普通按钮：（type=“buttom“）单击后执行设定的代码。 提交按钮：（type=“submit”）当用户单击这个按钮后， 用户的输入信息即被传送到服务器。 重置按钮：（type=“reset”）当用户单击这个按钮后， 用户输入的信息全部清除，用户重新输入信息。 常用的属性如表所示。,50,二常用的表单标记,任务5 表单标记,单选框 类型为type=“radio”，单选框是好将多个选项让使用者 选择，一次只能选一个。 常用的属性见下表：,51,二常用的表单标记,任务5 表单标记,例如，下面这段语句对应下图所示的效果。 性 别： 男 女,52,二常用的表单标记,任务5 表单标记,复选框 类型为type=“checkbox”，复选框是将多个选项让使用者 选择，一次能选多个。常用的属性见下表：,53,二常用的表单标记,任务5 表单标记,例如，下面这段语句对应下图所示的效果。 爱好： 上网 运动 看书 看电视,54,二常用的表单标记,任务5 表单标记,标记的常见属性为： Selected，用于设定选项 被默认 选中的初始状态。,55,二常用的表单标记,任务5 表单标记,例如，下面这段语句对应下图所示的效果。 说明1 说明2 说明3 ,56,二常用的表单标记,任务5 表单标记,57,二常用的表单标记,任务5 表单标记,例如，下面这段语句对应下图所示的效果。 评论： 好评 中评 差评 ,58,三任务实施,任务5 表单标记,1运行Dreamweaver CS3，打开教学参考资源站点的中mark.html文件。,2切换到拆分视图。,3逐点认识表单对象的HTML标记及其使用方法。,59,三任务实施,任务5 表单标记, 请选择店名 上海南京路店 ,60,三任务实施,任务5 表单标记, 散座 包间 ,61,三任务实施,任务5 表单标记,文本框,文本域,按钮,62,任务5 表单标记,网页的预览效果,返回,63,Thank You !,