9 html n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
项目9 HTML 语言基础 PowerPoint Presentation
Download Presentation
项目9 HTML 语言基础

Loading in 2 Seconds...

play fullscreen
1 / 68
thomas-kirby

项目9 HTML 语言基础 - PowerPoint PPT Presentation

94 Views
Download Presentation
项目9 HTML 语言基础
An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. 项目9 HTML语言基础

  2. 教学目标 掌握HTML基本概念及结构 掌握文本和图像常用的HTML标签 熟悉列表、表格和表单标签 知识目标: 技能目标: 熟练运用文本和图像常用的HTML标签 熟练运用列表、表格和表单的HTML标签 能使用HTML标记语言开发网页

  3. 项目任务 任务9.1 制作珠海航空展首页框架 2.文本和图像常用的HTML标签 3.列表标签 4.表格和表单标签

  4. 任务9.1 制作珠海航空展首页框架

  5. 任务描述 通过HTML语言的基本框架标签完成“珠海航空展首页”的主体结构,如图9-1所示。 图9-1最终首页主体效果图

  6. 1. HTML语言概述 HTML是一种超级文本标记语言,它是一种规范,一种标准, 通过标签符号来标记要显示的网页中的各个元素。网页内容本身是一种文本文件,通过在文本文件中添加标签符,控制在浏览器中文字、图片、视频等元素显示样式。   (1)HTML语言的特点 HTML语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件,其主要特点如下:    简易性:HTML语言不是程序语言,它是一种标记语言,文本语言,任何一个文本编辑器都可以编辑;    速度快:使用HTML语言描述的文件,无需解释运行,通过WWW浏览器就显示出效果;    通用性:HTML语言编写和应用与平台无关,适用于所有浏览器,正因此特点才使得万维网盛行;    与平台无关:HTML语言执行与平台无关,它独立于各种平台。 相关知识与技能

  7. (2)HTML发展   超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准): HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时 HTML 3.2——1997年1月14日,W3C推荐标准 HTML 4.0——1997年12月18日,W3C推荐标准 HTML 4.01——1999年12月24日,W3C推荐标准 HTML 5的第一份正式草案已于2008年1月22日公布,仍继续完善 HTML文档的编写方法 手工直接编写:记事本等,存成.htm .html格式; 使用可视化HTML编辑器:Frontpage、Dreamweaver等; 动态生成:由Web 服务器( 或称HTTP 服务器) 一 方实时动态地生成。

  8. 2. HTML文档的基本结构 标签由开始标签起头,一定要有对应的结束标签来收尾。 如:<p> Hello World!</p> 属性是用来描述一个事物特征的表述语言,标签中的属性值必须放在引号内。 <标记 属性名1="值1" 属性名2="值2" …>内容</标记> 如:<a href="http://www.sohu.com ">浏览进入搜狐!</a> 多个标签时必须按照嵌套的原则,即一个标签必须是嵌套在另一个标签内使用。如: <body> <p><a href="http://www.sohu.com ">浏览进入搜狐!</a></p> </body> HTML标签基本的语法:<标记>内容</标记>

  9. 页面文档的基本结构可分为4层关系,这其中涉及到5个重要的结构性标签用来构成一个页面,分别是开始标签、头标签、标题标签和文体标签。页面文档的基本结构可分为4层关系,这其中涉及到5个重要的结构性标签用来构成一个页面,分别是开始标签、头标签、标题标签和文体标签。 开始标签:定义页面开始到结束。 <html> </html> 头标签和头标签的对象:有6个特殊的标签可以放在头标签中使用。<head> </head> 标题标签:设置网页的标题名。 <title> </title> 文体标签:用来表现网页的主体内容。 <body> </body>

  10. 头标记 <title>标记 用于设置网页标题信息 <style>标记 1、头标记 用于在文档中嵌入样式表 <meta>标记 用来设置页面关键字、控制页面缓存、刷新页面等功能

  11. 我们见到的整个网页中的内容全都在这里面,所有页面的东东全是body的臣民我们见到的整个网页中的内容全都在这里面,所有页面的东东全是body的臣民 主体标记 1、头标记 标记 <body>……</body> 2、主体标记 功能 决定页面实际显示的内容 <body bgcolor=" " text=" " link=" " alink=" " Vlink=" " background=" "> 格式 Bgcolor 设 置 背 景 色 彩 Text 设 置 非 可 链 接 字 色 link可 链 接 文 字 的 色 彩 alink正 被 点 击 可 链 接 色 彩 Vlink 已 点 击 可 链 接 色 彩 Background 设 置 页 面 背 景 图 像

  12. 3.使用文本文件制作珠海航展首页框架 (1)书写HTML代码如图9-2所示。 (2)使用浏览器浏览效果如图9-3所示。 图9-2HTML文档的基本结构图 图9-3珠海航空展首页框架效果图

  13. 4. 使用Dreamweaver CS6制作HTML文档的基本结构 (1)创建HTML页面:在Dreamweaver CS6的主窗口中,选择菜单栏中的【文件】|【新建】命令,打开如9-4对话框,选择“HTML”,最后单击【创建】,进入Dreamweaver CS6代码窗口,HTML基本框架代码全部自动写好,如图9-5所示。 图9-4 Dreamweaver CS6新建页面窗口

  14. 图9-5 Dreamweaver CS6代码窗口 (2)完善代码:修改标题为“珠海航空展”,添加主体内容“珠海航空展 2014-11-11,如图9-6所示。 图9-6 修改代码示意图

  15. (3)测试效果 ①单击Dreamweaver CS6主工作区的“文档工具栏”中【设计】,看到初步效果,如图9-7所示。 图9-7 Dreamweaver CS6设计窗口 ②按【F12】键运行页面,效果如图9-3所示。

  16. 任务实现 1. 创建HTML页面,如图9-4所示。 2. 编写HTML代码 图9-8 HTML代码编写示意图

  17. 3. 最终效果 图9-9 最终效果图

  18. 任务2 编写文本的排版与格式——航展新闻列表

  19. 任务描述 文本是网页不可缺少的元素之一,是网页发布信息所采用的主要形式。为了让网页中的文本看上去编排有序、整齐美观、错落有致,我们就要设置文本的大小、颜色、字体类型以及换行换段等。通过对航展新闻列表文本的设置,效果如图9-10所示。 图9-10 最终文本网页效果图

  20. 相关知识与技能 1.编写文字排版 1.1设置标题格式 语法:<hn align=left | center | right>标题文字</hn> ,<hn>标记用于标示网页中的标题文字,被标示的文字将以粗体的方式显示在网页中。在HTML中,共有6个层次的标题,因此其中n的范围为1~6。标题文字标记中可以设置align属性,用于控制对齐方式,默认的对齐方式为靠左,如图9-11所示。 图9-11 标题标签

  21. 1.2 设置段落 语法:<p>文本</p> ,<p>为分段标记,遇到此标记将文字分段。如图9-12所示。 图 9-12 编写文字排版代码

  22. <Pre> 标签 图9-13 排版前预览效果

  23. 图9-14 排版后预览效果

  24. 2. 设置文本格式 语法:<font 属性=属性值……>文字</font>,<font>文字格式标记用于控制文字的字体、大小和颜色。控制的方式是利用<font>标记的属性设置来实现的。属性具体说明如表9-1,font相关标记如表9-2,具体HTML语言编写如图9-12所示。 表9-1 <font>标记的属性

  25. 表9-2 font相关标记

  26. 对新闻列表页面进行格式设置,如图9-15,格式设置后的效果如图9-16所示。对新闻列表页面进行格式设置,如图9-15,格式设置后的效果如图9-16所示。 图9-15 文本格式设置

  27. 图9-16 文本格式设置效果

  28. 任务实现 (1)创建HTML页面 在Dreamweaver CS6的主窗口中,选择菜单栏中的【文件】|【新建】命令,打开如9-4对话框,选择“HTML”,最后单击【创建】,进入Dreamweaver CS6代码窗口,然后点击【保存】按钮保存,名为list.html。 (2)编写文字排版 设置标题格式:按照上面的方面把所有新闻的标题设置为二级标题,即加上<h2>,如图9-11所示。 设置段落格式:把各新闻标题、时间、内容及备注内容各分成一段,如图9-12所示。 (3)编写文本格式 如图9-15所示。最终效果图如图9-16所示。

  29. 任务3 编写项目列表——航展新闻列表

  30. 任务描述 新闻列表页面list.html为了显示更多新闻列表,而且新闻列表间是并列显示的,效果如图9-17所示。 图9-17最终文本网页效果图

  31. 相关知识与技能 1. 无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。列表项内部可以使用段落、换行符、图片、链接以及其他列表等,无序列表始于<ul>标记,每个列表项始于<li>标记,其语法格式: <ul> <li>...............</li> <li>...............</li> ........ </ul> 2. 有序列表 有序列表也是一个项目的列表,此列项目使用数字进行标记。列表项内部可以使用段落、换行符、图片、链接以及其他列表等,有序列表始于<ol>标记,每个列表项始于<li>标记,其语法格式: <ol> <li>...............</li> <li>...............</li> ........ </ol>

  32. 任务实现 打开新闻列表页面 list.html,航展网站新闻列表中“珠海航展参展飞机公布”新闻设置如图9-18所示,其效果如图9-17所示。 图9-18 航展网站首页新闻列表设置 32

  33. 任务4 编写超级链接——航展新闻列表

  34. 任务实现 点击新闻列表页面中每个新闻标题即可进入详细新闻页面,浏览新闻详细内容,如点击“珠海航展参展飞机公布”新闻标题,进入canzhan.html页面。

  35. 相关知识与技能 1.站内页面链接 站内页面链接是指在“文本”上创建一个指向本网站中其它页面,如从 canzhan.html,并在空白页面上打开链接,其语法格式: <a herf=”/canzhan.html” target=”_blank”>珠海航展参展飞机清单公布</a> 2.站外页面链接 站外页面链接是指在“文本”上创建一个指向其它网站中的页面,并在新页面上打开链接,其语法格式: <a href="http://www.airshow.com.cn/cn/Exhibitor/Index.html" target="_new">第十届中国国际航空航天博览会</a> 35

  36. 任务实现 打开新闻列表页面 list.html,航展网站新闻“珠海航展参展飞机公布”标题设置内部链接,“第十届中国国际航空航天博览会”新闻标题设置为外部链接,设置如图9-19所示,其效果如图9-20所示。 图9-19 链接设置

  37. 图9-20 链接设置后效果图

  38. 点击图9-20中的“第十届中国国际航空航天博览会”标题跳转到外部页面如图9-21所示。 图9-21 外部页面

  39. 点击图9-20中的“珠海航展参展飞机公布”标题跳转到新闻详细内部页面如图9-22所示。 图9-22 内部页面

  40. 任务5表格图片设置——珠海航展参展飞机清单公布任务5表格图片设置——珠海航展参展飞机清单公布

  41. 任务描述 在“珠海航展参展飞机清单公布”新闻页面canzhan.html插入表格,并在表格中插入热点飞机图片,如图9-23所示。 图9-23 表格图片设置效果

  42. 相关知识与技能 1.表格设置 用HTML语言制作表格的基本结构是: <table>…</table>定义表格 <caption>…</caption>定义标题 <tr>…</tr>定义表行 <th>…</th>定义表头 <td>…</td>定义表元(表格的具体数据) 表9-3 TABLE标签属性

  43. 相关知识与技能 HTML中表格建立的过程 定义表格 定义行 定义列 重复”定义行””定义列”完成整个表格制作过程 利用<TABLE> . . . . </TABLE> 标签 利用<TD> . . .. </TD> 标签 利用<TR> . . .. </TR> 标签

  44. 1、示例-创建表格1 <table border="1"> <tr> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>高阳</td> <td>32</td> </tr> <tr> <td>张鹏</td> <td>33</td> </tr> </table>

  45. TABLE标签属性

  46. 1、示例-创建表格2 <HTML> <HEAD> <TITLE>使用表格</TITLE> </HEAD> <BODY> <TABLE BORDER = 2 > <TR> <TD>姓名</TD> <TD>性别</TD> <TD>分数</TD> </TR> <TR> <TD>Robert</TD> <TD>M</TD> <TD>80</TD> </TR> ....... </TABLE> </BODY> </HTML> <TABLE>代表表格的开始,border=2表示边框尺寸为2 <TR>表示行,这是表格的第一行,有三列数据,<TD>代表列 表格的第二行,有三列数据 表格的第三行,也有三列数据

  47. 2、示例-表格的标题 <BODY> <TABLE BORDER = 2> <CAPTION align=top>学员档案信息</CAPTION> <TR> <TH>姓名</TH> <TH>性别</TH> <TH>分数</TH> </TR> <TR> <TD>Robert</TD> <TD>M</TD> <TD>80</TD> </TR> ....... </TABLE> </BODY> </HTML> <CAPTION>表示表格标题 <TH>表示行或列标题,粗体显示 表格的第二行,有三列数据 表格的第三行,有三列数据

  48. 3、示例-表格的对齐方式 整个表格居中 <BODY> <TABLE border=2 align=center> <CAPTION align=top>学员档案信息</CAPTION> <TR> <TH>姓名</TH> <TH align="center">性别</TH> <TH align="right">分数</TH> </TR> <TR> <TD>Robert</TD> <TD align="center">M</TD> <TD align="right">80</TD> </TR> ....... </TABLE> </BODY> </HTML> 姓名列默认左对齐 性别列居中 分数列右对齐

  49. 4、合并单元格(跨列) <BODY> <TABLE BORDER = 2 ALIGN = CENTER> <CAPTION>创建表格 </CAPTION> <TH COLSPAN = 3>第一学期</TH> <TH COLSPAN = 3>第二学期</TH> <TR> <TD>数学</TD> <TD>科学</TD> <TD>英语</TD> <TD>数学</TD> <TD>科学</TD> <TD>英语</TD> <TR> <TD>98</TD> <TD>95</TD> <TD>80</TD> <TD>95</TD> <TD>87</TD> <TD>88</TD> .... COLSPAN=“n”属性表示跨多少列