网页制作与网站设计教学课件 网页制作与网站设计课程组开发 淮安信息职业技术学院
情境2：书法家庄辉个人网站建设 任务7：书法家庄辉个人网站HTML编辑静态页面 1. 任务解析与项目目标 2. 核心技能与概念 3. 任务计划与决策 4. 任务实施 5. 项目检查与评估 6. 项目开发策略与技巧 网页制作与网站设计教程
1任务解析与项目目标 任务解析与项目目标 使用Dreamweaver编辑网页是网页设计的基本功，使用HTML语言编写静态页面是今后动态网页编程的基础，所以编写HTML代码要掌握编写的方法、HTML的基本结构等相关知识。
2. 核心技能与概念 核心技能点一：HTML语言简介 HTML（HyperText Markup Language，超文本标记语言），是用来描述超文本文档的标记语言。它由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> <img src="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…> <hr size="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的常用标记 <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> （2）表格的标题 设置标题位于表格上方： <caption align="top">…</caption> （3）表格尺寸设置 <table width="n1" height="n2"> （4）表格内文字的对齐/布局 （5）单元格的合并
2. 核心技能与概念 核心技能点三：HTML的常用标记 5）文件之间的链接 超文本链接是网页最重要的特性之一，浏览者可以从一个页面直接跳转到其它页面、图像或者服务器。链接标签的基本格式如下： <a href="资源地址">链接文字</a> 说明： （1）标记<a>表示一个链接的开始，标记</a>表示链接的结束。 （2）属性“href”定义了这个链接所指的网页路径。 （3）通过点击“链接文字”可以链接到指定的网页。 例如：<a href ="http://www.sina.com.cn">新浪网</a>即可给“新浪网”三个字加上链接到新浪主页的链接。
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>
2. 核心技能与概念 核心技能点三：HTML的常用标记 2）播放音频与视频 HTML 除了可以插入图像之外，还可以播放音乐和视频等。用浏览器可以播放的音乐格式由MIDI音乐、WAV音乐、AU格式。另外，在利用网络下载的各种音乐格式中，MP3是压缩率最高、音质最好的的文件格式。 点播音乐的方式是将音乐做成一个超链接，只需要用鼠标在上面单击，就可以听到动人的音乐了，其实这样做的方法很简单：<a href ="音乐地址">乐曲名</a> 自动载入音乐或视频是前面借助链接来实现网上播放音乐这一功能，还可以让音乐自动载入，让它出现控制面板或作为背景音乐来使用。基本语法为：<embed src="音乐文件地址">
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，效果如图
3. 项目实施 任务1：主页中添加背景音乐。 1）打开百度网站，搜索古典音乐gsls.wmv，然后将下载的音乐文件存放到庄辉个人站点的“sound”文件夹中。 2）继续在百度中搜索“网页背景音乐”关键字，然后可找到设置背景的代码，对于本项目来讲代码如下： <bgsound src="sound/gsls.mp3" loop="-1"> 代码写在<head></head>标签之间。
3. 项目实施 任务2：编辑国画作品页面的HTML代码 HTML代码 编写演示
谢谢大家