第七章HTML语言的编写_第1页
第七章HTML语言的编写_第2页
第七章HTML语言的编写_第3页
第七章HTML语言的编写_第4页
第七章HTML语言的编写_第5页
已阅读5页，还剩23页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计与制作主讲：xxx第七章HTML语言应用项目展示与项目目标1项目展示与项目目标

了解HTML语言简介掌握HTML的基本结构掌握HTML的常用标记掌握使用HTML编写网页页面的方法能够熟练浏览并修改HTML代码1．项目需求

2.项目资讯

为迎接国家教育部高职高专教学工作水平评估，要体现“以评促建，以评促改，以评促管，评建结合，重在建设”的方针，实现评估倒计时，现建设“淮安信息职业技术学院高职高专教学工作水平评估网”，网站主要包括“组织机构”、“评估文件”、“评建动态”、“迎评简报”、“评建知识”、“他山之石”等模块，网站中应包含“学院主页”与“教务在线”链接，网站风格要简介、清爽。

2.项目资讯关键知识点一：HTML语言简介

HTML（HyperTextMarkupLanguage，超文本标记语言），是用来描述超文本文档的标记语言。它由HTML标记和用来表示信息的文本组成。使用HTML语言描述的文件，需要通过浏览器显示效果。

所有的网页都可以以HTML格式的文件为基础，再加上一些其他语言（如Javascript、VBScript等）编写的代码。这些文件除了一些基本的文字外还包含一些标记，这些标记均由“<”和“>”符号以及一个字符串组成。而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画并播放声音等。

2.项目资讯关键知识点二：HTML的基本结构

1）HTML概述与编写方法

HTML文件是分层组织的，最外层是<html>标记，在此标记内一般有两层：head层（文档头）和body层(文档体)。这两部分内容都包含在<html>和</html>之间。在这些标记内可以嵌套其他标记。一般情况下文档头存储网页的信息，比如网页标题存放在<title>标记中，网页关键字存放在<meta>标记中。文档体是网页内容的显示部分。主要由表格标记、段落标记、图像标记等组成。<html><head>

文档头部分

</head><body>

文档主体部分

</body></html>2.项目资讯关键知识点二：HTML的基本结构

<html> <head> <title>欢迎访问俞晨视觉传奇网站!</title> </head> <body> <center> <imgsrc="images/index.jpg"width="778"height="430"><br> 2007-2009版权所有：俞晨建议1024*768以上分辨率浏览

</center> </body></html>2.项目资讯关键知识点二：HTML的基本结构

2.项目资讯关键知识点二：HTML的基本结构

1）HTML标记在HTML文档中由许多用“<”和“>”括起来构成的代码，这种代码称它为标记，标记是HTML语言中定义网页内容格式和显示的指令。而标记的属性用于进一步控制网页内容的显示效果。（1）单标记<br><hr>（2）双标记

<标记>内容</标记><strong>第一</strong>（3）标记属性<标记名称属性1=属性值1属性2=属性值2属性3=属性值3…>

<hrsize="3"align="center"width="80%"/>2.项目资讯关键知识点三：HTML的常用标记

1）基本标记（1）html标记（2）head标记（3）title标记（4）body标记<html> <head> <title>欢迎访问HTML初级学习网站!</title> </head><body>通过项目锻炼，网页设计师是可以速成的，一定要好好学习!</body></html>2.项目资讯关键知识点三：HTML的常用标记

2）网页布局与文字设计（1）标题（2）换行（3）段落标记（4）文字的字体和样式3）列表

（1）无序号列表（2）序号列表4）TABLE表格（1）表格的基本结构

<table>…</table>定义表格

<caption>…</caption>定义标题

<tr>定义表行

<th>定义表头

<td>定义表元（表格的具体数据）

2.项目资讯关键知识点三：HTML的常用标记

（2）表格的标题

设置标题位于表格上方：

<captionalign="top">…</caption>

（3）表格尺寸设置

<tablewidth="n1"height="n2">

（4）表格内文字的对齐/布局（5）单元格的合并<tablewidth="327"border="1"><tr><tdwidth="76"rowspan="2">学生</td><tdwidth="69">姓名</td><tdwidth="79">学号</td><tdwidth="75"rowspan="2">共青团员</td></tr><tr><td>王刚</td><td>33081001</td></tr></table>2.项目资讯关键知识点三：HTML的常用标记

5）文件之间的链接超文本链接是网页最重要的特性之一，浏览者可以从一个页面直接跳转到其它页面、图像或者服务器。链接标签的基本格式如下：<ahref="资源地址">链接文字</a>说明：（1）标记<a>表示一个链接的开始，标记</a>表示链接的结束。（2）属性“href”定义了这个链接所指的网页路径。（3）通过点击“链接文字”可以链接到指定的网页。例如：<ahref="">新浪网</a>即可给“新浪网”三个字加上链接到新浪主页的链接。2.项目资讯关键知识点三：HTML的常用标记

6）多媒体效果在网页中加入多媒体，可使网页元素更加丰富，更加美观，使网页更具吸引力。下面将学习在一个页面中如何插入图像。（1）插入图像超文本支持的图像格式一般有XBitmap（XBM）、GIF、JPEG三种，所以将图片处理后要保存为这三种格式的任何一种，这样才可以在浏览器中看到。插入图像标记是<img>，其格式为：<imgsrc="图像文件地址">图像按钮就是浏览者通过在图像上单击就能链接到某个地址的网页。很简单，只要利用前面所学的知识就可以完成了。其基本格式如下：<ahref="资源地址"><imgsrc="图像文件地址"></a>例如：<ahref="index.html"><imgsrc="html.gif"></a>2.项目资讯关键知识点三：HTML的常用标记

2）播放音频与视频

HTML除了可以插入图像之外，还可以播放音乐和视频等。用浏览器可以播放的音乐格式由MIDI音乐、WAV音乐、AU格式。另外，在利用网络下载的各种音乐格式中，MP3是压缩率最高、音质最好的的文件格式。点播音乐的方式是将音乐做成一个超链接，只需要用鼠标在上面单击，就可以听到动人的音乐了，其实这样做的方法很简单：<ahref="音乐地址">乐曲名</a>自动载入音乐或视频是前面借助链接来实现网上播放音乐这一功能，还可以让音乐自动载入，让它出现控制面板或作为背景音乐来使用。基本语法为：<embedsrc="音乐文件地址">

2.项目资讯关键知识点三：HTML的常用标记

<body><embedsrc="sound/gsls.mp3"loop=truewidth="145"height="60"></embed></body></html>如果将<embedsrc=“sound/gsls.mp3”loop=“true”width=“145”height=“60”></embed>改为以下代码：<embedsrc="video/dog.wmv"width="218"height="208"></embed>已保存为example6.html，效果如图

3.项目计划与决策

为满足项目需求，体现“以评促建，以评促改，以评促管，评建结合，重在建设”的方针，完成“组织机构”、“评估文件”、“评建动态”、“迎评简报”、“评建知识”、“他山之石”等模块的布局，界面清爽的网站风格。整体风格以橙色或天蓝色的渐变为背景，主体颜色以橙色或天蓝色和黑色、白色、灰色搭配，局部使用草绿色。网站采用虚线对各个模块实现划分，使整个网站格调清晰、明朗。

学院名称与标志“学院主页”与“教务在线”网站名称网站导航组织机构评估文件评建动态迎评简报评建知识他山之石倒计时体现“以评促建，以评促改，以评促管，评建结合，重在建设”二十字方针的动画评建动态图片新闻通知公告评估文件评建知识迎评简报组织机构他山之石友情链接版权信息4.项目实施

1）新建网页文件index.html，编写框架代码（并设置背景图片和左边距与上边距为0）：

<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>欢迎访问淮安信息职业技术学院教学工作水平评估评建网！</title></head><bodybackground="images/bg.jpg"leftmargin="0"topmargin="0"></body></html>4.项目实施

2）编写页眉部分的代码，编写2行8列的表格代码，然后将第1与2行的第1个单元格合并，将第2行其余7个单元格各并，设置单元格的宽度与高度，插入相应的图片与文本，代码如下：<tablewidth="776"height="86"border="0"align="center"cellpadding="0"cellspacing="0"><trbgcolor="#FFFFFF"><tdwidth="296"rowspan="2"><imgsrc="images/top1.jpg"width="296"height="86"></td><tdwidth="192"height="34"bgcolor="#FFFFFF"> </td><tdwidth="36"><imgsrc="images/top11.jpg"width="36"height="34"></td><tdwidth="60"><divalign="center">学院主页</div></td><tdwidth="36"><imgsrc="images/top12.jpg"width="36"height="34"></td><tdwidth="60"><divalign="center">教务在线</div></td><tdwidth="36"><imgsrc="images/top13.jpg"width="36"height="34"></td><tdwidth="60"><divalign="center">联系我们</div></td></tr><tr><tdheight="52"colspan="7"><imgsrc="images/top2.jpg"width="480"height="52"></td></tr></table>4.项目实施

3）编写网页的导航代码，编写1行8列的表格，设置属性，代码如下：

<tablewidth="776"height="31"border="0"align="center"cellpadding="0"cellspacing="0"background="images/dhbg.jpg"><tr><tdwidth="84"><divalign="center">网站首页</div></td><tdwidth="84"><divalign="center">组织机构</div></td><tdwidth="84"><divalign="center">评估文件</div></td><tdwidth="84"><divalign="center">评建动态</div></td><tdwidth="84"><divalign="center">迎评简报</div></td><tdwidth="84"><divalign="center">评建知识</div></td><tdwidth="84"><divalign="center">它山之石</div></td><td><divalign="center"class="pg">离教学工作评估还有200天</div></td></tr></table>4.项目实施

4）编写HTML代码，插入1行1列的表格，然后设置表格的属性，在单元格<td></td>中编写插入图片的代码，整个代码如下：

<tablewidth="776"height="149"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdbgcolor="#FFFFFF"><imgsrc="images/dhtest4.jpg"width="776"height="149"></td></tr></table>4.项目实施

5）编写“评建动态”与“评建通知”两个栏目，代码如下（使用了表格的嵌套结构）：

<tablewidth="776"height="200"border="0"align="center"cellpadding="0"cellspacing="0"><trvalign="top"><tdwidth="590"bgcolor="#FFFFFF"><tablewidth="590"border="0"cellspacing="0"cellpadding="0"><tr><tdcolspan="2"><imgsrc="images/left1.jpg"width="590"height="26"></td></tr><tr><tdwidth="242"align="center"valign="middle"> </td><tdwidth="348"height="172"valign="top"> </td></tr></table></td><tdwidth="186"background="images/rightbg.jpg"bgcolor="#FFFFFF"><tablewidth="186"border="0"cellspacing="0"cellpadding="0"><tr>4.项目实施

<tdheight="26"colspan="3"><imgsrc="images/right1.jpg"width="186"height="26"></td></tr><tr><tdheight="150"> </td><tdwidth="170"height="150"valign="middle"> </td><tdheight="150"> </td></tr><tr><td> </td><td><divalign="right"><imgsrc="images/more.jpg"width="40"height="18"></div></td><td> </td></tr></table></td></tr></table>4.项目实施

6）继续编写“评估文件”、“评建知识”、“迎评简报”模块，代码如下：

<tablewidth="776"border="0"align="center"cellpadding="0"cellspacing="0"><trvalign="top"><tdwidth="300"bgcolor="#FFFFFF"><tablewidth="300"border="0"cellspacing="0"cellpadding="0"><tr><tdheight="29"background="images/midleft.jpg"> </td></tr><tr><tdheight="160"> </td></tr></table></td><tdwidth="290"bgcolor="#FFFFFF"><tablewidth="290"border="0"cellspacing="0"cellpadding="0"><tr><tdheight="29"background="images/midright.jpg"> </td>4.项目实施

</tr><tr><tdheight="160"background="images/midbg.jpg"> </td></tr></table></td>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论