1 / 30

基于工作过程的网页设计与网站开发教程

主编：张洪斌 刘万辉. 基于工作过程的网页设计与网站开发教程. 机械工业出版社. 第七章 HTML 语言的编写. 情境 1 ：高职高专教学工作评建网 HTML 代码的编写. 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估 6. 强化拓展实训 : 计算机系迎评网主页 HTML 代码的编写. 基于工作过程的 网页设计与制作教程. 1 项目展示与项目目标. 项目展示与项目目标. 了解 HTML 语言简介 掌握 HTML 的基本结构 掌握 HTML 的常用标记

elam
Download Presentation

基于工作过程的网页设计与网站开发教程

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 主编：张洪斌 刘万辉 基于工作过程的网页设计与网站开发教程 机械工业出版社

  2. 第七章 HTML语言的编写 情境1：高职高专教学工作评建网HTML代码的编写 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估 6. 强化拓展实训:计算机系迎评网主页 HTML代码的编写 基于工作过程的 网页设计与制作教程

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

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

  5. 2. 项目资讯 关键知识点一：HTML语言简介 HTML（HyperText Markup Language，超文本标记语言），是用来描述超文本文档的标记语言。它由HTML标记和用来表示信息的文本组成。使用HTML语言描述的文件，需要通过浏览器显示效果。 所有的网页都可以以HTML格式的文件为基础，再加上一些其他语言（如Javascript、VBScript等）编写的代码。这些文件除了一些基本的文字外还包含一些标记，这些标记均由“<”和“>”符号以及一个字符串组成。而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画并播放声音等。

  6. 2. 项目资讯 关键知识点二：HTML的基本结构 <html> <head> 文档头部分 </head> <body> 文档主体部分 </body> </html> 1）HTML概述与编写方法 HTML文件是分层组织的，最外层是<html>标记，在此标记内一般有两层：head层（文档头）和body层(文档体)。这两部分内容都包含在<html>和</html>之间 。在这些标记内可以嵌套其他标记。一般情况下文档头存储网页的信息，比如网页标题存放在<title>标记中，网页关键字存放在<meta>标记中。文档体是网页内容的显示部分。主要由表格标记、段落标记、图像标记等组成。

  7. 2. 项目资讯 关键知识点二：HTML的基本结构 <html> <head> <title>欢迎访问俞晨视觉传奇网站!</title> </head> <body> <center> <img src="images/index.jpg" width="778" height="430"> <br> 2007-2009 版权所有：俞晨 建议1024*768以上分辨率浏览 </center> </body> </html>

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

  9. 2. 项目资讯 关键知识点二：HTML的基本结构 1）HTML标记 在HTML文档中由许多用“< ”和“>”括起来构成的代码，这种代码称它为标记，标记是HTML语言中定义网页内容格式和显示的指令。而标记的属性用于进一步控制网页内容的显示效果。 （1）单标记 <br> <hr> （2）双标记<标记>内容</标记> <strong>第一</ strong > （3）标记属性 <标记名称 属性1=属性值1 属性2=属性值2 属性3=属性值3…> <hr size="3" align="center" width="80%"/>

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

  11. 2. 项目资讯 关键知识点三：HTML的常用标记 2）网页布局与文字设计 （1）标题 （2）换行 （3）段落标记 （4）文字的字体和样式 3）列表 （1）无序号列表 （2）序号列表 4）TABLE表格 （1）表格的基本结构 <table>…</table>定义表格 <caption>…</caption>定义标题 <tr>定义表行 <th>定义表头 <td>定义表元（表格的具体数据）

  12. 2. 项目资讯 关键知识点三：HTML的常用标记 （2）表格的标题 设置标题位于表格上方： <caption align="top">…</caption> （3）表格尺寸设置 <table width="n1" height="n2"> （4）表格内文字的对齐/布局 （5）单元格的合并 <table width="327" border="1"> <tr> <td width="76" rowspan="2">学生</td> <td width="69">姓名</td> <td width="79">学号</td> <td width="75" rowspan="2">共青团员</td> </tr> <tr> <td>王刚</td> <td>33081001</td> </tr> </table>

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

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

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

  16. 2. 项目资讯 关键知识点三：HTML的常用标记 <body> <embed src="sound/gsls.mp3" loop=true width="145" height="60"></embed> </body> </html> 如果将<embed src=“sound/gsls.mp3” loop=“true” width=“145” height=“60”></embed>改为以下代码： <embed src="video/dog.wmv" width="218" height="208"></embed> 已保存为example6.html，效果如图

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

  18. 4. 项目实施 1）新建网页文件index.html，编写框架代码（并设置背景图片和左边距与上边距为0）： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>欢迎访问淮安信息职业技术学院教学工作水平评估评建网！</title> </head> <body background="images/bg.jpg" leftmargin="0" topmargin="0"> </body> </html>

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

  20. 4. 项目实施 3）编写网页的导航代码，编写1行8列的表格，设置属性，代码如下： <table width="776" height="31" border="0" align="center" cellpadding="0" cellspacing="0" background="images/dhbg.jpg"> <tr> <td width="84"><div align="center">网站首页</div></td> <td width="84"><div align="center">组织机构</div></td> <td width="84"><div align="center">评估文件</div></td> <td width="84"><div align="center">评建动态</div></td> <td width="84"><div align="center">迎评简报</div></td> <td width="84"><div align="center">评建知识</div></td> <td width="84"><div align="center">它山之石</div></td> <td><div align="center" class="pg">离教学工作评估还有200天</div></td> </tr> </table>

  21. 4. 项目实施 4）编写HTML代码，插入1行1列的表格，然后设置表格的属性，在单元格<td></td>中编写插入图片的代码，整个代码如下： <table width="776" height="149" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#FFFFFF"><img src="images/dhtest4.jpg" width="776" height="149"></td> </tr> </table>

  22. 4. 项目实施 5）编写 “评建动态”与“评建通知”两个栏目，代码如下（使用了表格的嵌套结构）： <table width="776" height="200" border="0" align="center" cellpadding="0" cellspacing="0"> <tr valign="top"> <td width="590" bgcolor="#FFFFFF"><table width="590" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2"><img src="images/left1.jpg" width="590" height="26"></td> </tr> <tr> <td width="242" align="center" valign="middle">&nbsp;</td> <td width="348" height="172" valign="top">&nbsp;</td> </tr> </table></td> <td width="186" background="images/rightbg.jpg" bgcolor="#FFFFFF"><table width="186" border="0" cellspacing="0" cellpadding="0"> <tr>

  23. 4. 项目实施 <td height="26" colspan="3"><img src="images/right1.jpg" width="186" height="26"></td> </tr> <tr> <td height="150">&nbsp;</td> <td width="170" height="150" valign="middle">&nbsp;</td> <td height="150">&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td><div align="right"><img src="images/more.jpg" width="40" height="18"></div></td> <td>&nbsp;</td> </tr> </table></td> </tr> </table>

  24. 4. 项目实施 6）继续编写“评估文件”、“评建知识”、“迎评简报”模块，代码如下： <table width="776" border="0" align="center" cellpadding="0" cellspacing="0"> <tr valign="top"> <td width="300" bgcolor="#FFFFFF"><table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="29" background="images/midleft.jpg">&nbsp;</td> </tr> <tr> <td height="160">&nbsp;</td> </tr> </table></td> <td width="290" bgcolor="#FFFFFF"><table width="290" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="29" background="images/midright.jpg">&nbsp;</td>

  25. 4. 项目实施 </tr> <tr> <td height="160" background="images/midbg.jpg">&nbsp;</td> </tr> </table></td> <td width="186" background="images/rightbg.jpg" bgcolor="#FFFFFF"><img src="images/rightmid.jpg" width="186" height="29"></td> </tr> </table>

  26. 4. 项目实施 7）采用同样的方法编写HTML代码完成“组织机构”、“他山之石”、“友情链接”栏目。 8）编写HTML代码完成“页脚”。 <table width="776" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="1" bgcolor="828181"><img src="images/spacer.gif" width="1" height="1"></td> </tr> <tr> <td height="100" bgcolor="#FFFFFF"><div align="center">版权所有： 淮安信息职业技术学院<BR> 校址:江苏省淮安市枚乘东路3#　邮编:223003<br> 建议使用IE5.5以上版本浏览器 1024*768分辨率访问<br> </div></td> </tr> </table>

  27. 5.项目检查与评估

  28. 6.强化拓展实训：计算机系迎评网主页HTML代码的编写6.强化拓展实训：计算机系迎评网主页HTML代码的编写 图 7-15 计算机科学与工程系迎评网初稿预览效果

  29. 第七章 HTML语言的编写 课程小结 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估 6. 强化拓展实训:计算机系迎评网主页 HTML代码的编写 基于工作过程的 网页设计与制作教程

  30. 谢谢大家

More Related