1、实例一1.要求：知识要点： html 文档的基本结构，html 标签的书写格式、作用、用法 实训目的： 掌握 html 文档的基本结构，掌握 html 代码网页编辑的基本方法实训内容： 标签等, 在网页中插入文字标签及其属性：bgcolor、 background、 text、 link、 alink、 vlink、 leftmargin、 topmargin 特别提醒： 当有而丢掉或书写错误时，文档不能正确浏览在 html 文档中，、 被完全省略、部分省略或嵌套不严格，是允许的，但这却不是一个好习惯用记事本编辑网页文件，在保存文件时，一定要注意文件扩展名写为 .html 或 .htm 问题导
2、学： 请听本页有优美的背景音乐 “贝多芬第五交响乐”，如果想删除背景，如何改写代码？2.代码：简单的 html 示例我的第一个网页这是我做的第一个网页，欢迎光临！谢谢！ This is my first web. Welcome.3.效果：实例二1.要求：知识要点： 以默认格式显示文字，用 FONT 标签设置显示文字的格式实训目的： 掌握设置网页中文字的大小、字体、字型、字号、颜色等实训内容： 标签及其属性： face、size、color 、 标签等知识扩展： 控制文字的大小、字体、字型、字号、颜色，还可以使用 CSS 样式操作提示： 按下 “新窗口浏览 “ 按钮可在新窗口中浏览所编辑的网页
3、本网页下部有图片素材和音乐素材 , 可用作背景图片或背景音乐插入网页中, 路径在其下方可复制引用2.代码：设置字体字型字号及文字颜色幼圆黑色size=1 隶书蓝色size=2 黑体红色size=3 楷体绿色size=4方正舒体紫色size=5 华文彩云深灰色size=6华文琥珀灰色size=7B 加粗I 斜体U 下划线 strike 删除线3.效果：实例三1.要求：知识要点： 设置文章及章节的标题实训目的： 掌握在网页中设标题文字的方法，包括标题文字的大小、对齐方式等。实训内容： 标签及其属性：align 提高练习： 练习设置标题文字的 字体、颜色、字型等操作提示： 编辑左框中的代码 ,按下
4、“查看结果“ 按钮, 网页的浏览效果会显示在右框中 在新窗口中浏览网页 ,可改变窗口大小以详细观察效果2.代码：设置文章标题一级标题，默认左对齐二级标题，用“center”设置为居中对齐三级标题，用“left”设置为左对齐四级标题，用“right”设置为右对齐五级标题，用“center”标签设置为居中对齐六级标题，默认左对齐3.效果：实例 41.要求：实训目的： 掌握网页中文字的排版控制等实训内容： 等标签及其属性：style，注意 与 的区别 设计技巧： hmtl 代码中的空格及回车换行符，在浏览器释读时会被略，网页中需用空格时，可用字符实体 “或全角空格代替； 回车换行符可用标记 或 代替
5、知识扩展： “ ： 操作提示： 在新窗口中浏览网页，并改变窗口大小，可以详细观察 所控制的段落的排版规律 2.代码：文字排版控制示例标准的 FTP 客户端程序，有直观的操作界面，以左右两个窗口显示，功能和一般的 FTP 软件差不多本指南介绍如何使用 Macromedia Dreamweaver。本指南中的教程将引导您完成创建一个简单但具备一定功能的 Web 站点的过程。学习如何使用 Macromedia Dreamweaver 8 文档和其它资源，以及了解如何设置 Dreamweaver 工作区使其符合您自己的工作习惯。然后计划并设置站点，开始创建页面。3.效果：实例 51.要求：实训目的：
6、掌握在网页中插入图片并设置图片的大小、对齐方式、替代文字、是否有边框及边框的宽度等实训内容： 标签及其属性： src、 align、 border、 alt、 hspace、 vspace、 width、 height 等 注意： src 是 标签的最关键属性，用来描述图片的来源（url），可用绝对路径或相对路径，绝对路径是包括网站域名在内的完全路径，一般用于实现外部链接；相对路径又分为根相对路径和文档相对路径，不能使用本地绝对路径。 文件路径描述的更多知识， 请参考有关资料 目标地址(URL)，可用绝对路径或相对路径来描述。绝对路径是包括网站域名在内的完全路径，一般用于实现外部链接。相对路径
7、又分为根相对路径和文档相对路径。在编辑网页时，要在本地磁盘上选定一个文件夹，作为站点的本地文件夹，站点内链接用到的所有本地文件，都应该放在该文件夹内，以确保将这个文件夹上传到服务器后，所有的链接仍能保持有效。这个模拟服务器上的站点的文件夹，就是站点的根文件夹，系统就是根据这个文件夹确定本地文件的位置。根相对路径以“/”开头，路径从当前站点的根文件夹开始计算，但使用根相对路径在本地浏览时，必须设置本地站点，否则本地浏览时链接失效，这是因为 Windows 不支持把站点文件夹作为根目录。建议不要使用本地绝对路径来描述目标文件的位置，如：d:myweb2htmlweb1.htm。因为本地绝对路径在本
8、地浏览时链接正常，但上传到服务器后，链接失效。文档相对路径是以当前网页文档的位置为基础开始计算路径。相对路径多用于链接保存在同一文件夹(如站点根文件夹)中若干子文件夹中的文档，这种路径在本地和服务器上都是可靠的，是使用最多的一种。当超链接的目标是 HTML 文档，或能用浏览器打开的非 HTML 文档时，点击这个超链接将自动用浏览器打开目标，但当超链接的目标是不能用浏览器打开的文档时，点击这个超链接将打开“文件下载”对话框。操作提示： 插入图片，可使用本网页下部的素材，其路径描述位于对应图片的下面，可以直接“复制粘贴”2.代码：插入图片示例小娃娃与小狗狗3.效果：实例 61.要求：知识要点： 在
9、网页中插入 flash 动画使用 标签 在网页中加入视频剪辑使用 IMG 标签的 dynsrc 属性实训目的： 掌握在网页中插入 flash 动画并设置其位置、大小等属性掌握在网页中插入视频剪辑并设置其位置、大小、循环播放次数等属性，了解常用的多媒体文件类型实训内容： 在网页中插入一段视频剪辑和一个 flash 动画2.代码：插入多媒体示例3.效果：实例 71.要求：实训目的： 掌握在网页中插入水平线，并设置线长、线宽、对齐方式、颜色、是否有阴影等实训内容： 标签及其属性：align、width、color 、size、 noshade 等思考题： 在网页中是否能方便地插入一条竖直线？ 要插入
10、竖直有什么办法？操作提示： 在新窗口中浏览网页，并改变窗口大小，以详细观察 线长、对齐方式 的变化2.代码：水平线示例水平线 1：左对齐，宽 15%，粗细 8，绿色水平线 2：宽 50%，粗细 5，红色，无阴影，默认居中 水平线 3：默认线粗，宽 300 像素，右对齐3.效果：实例 81.要求：实训目的： 掌握在网页中设置滚动字幕的方法，包括字幕的对齐方式、滚动方向、宽度、高度、背景颜色、循环次数、移动速度等实训内容： 标签及其属性：align、bgcolor、width、height、loop、behavior、hspace、vspace、scrollamount、 scrolleday 等
11、 注意： 请不要设置滚动字幕的滚动方向为 “向右”和“向下”，因为这不符合中文的阅读习惯思考题： 有些网页中的字幕，在鼠标指上时即停止滚动，鼠标移开时又开始滚动，这种效果如何实现？ 2.代码：制作滚动字幕、播入多媒体示例欢迎光临电脑乐园欢迎光临电脑乐园3.效果：实例 91.要求：知识要点： 超链接(Hyperlink) 是 html 的精华，它为快速查找所需的信息提供了方便 锚点链接适用于网页内容较多，并有多个标题的情况实训目的： 掌握网页内的锚点链接，包括锚记的设置，链接的设置等。锚点链接是实现同一网页一处到另一处的链接实训内容： 标签及其属性： href、name、target、style
12、 等操作提示： 当网页内容较少且浏览窗口较大时，使用锚点链接无法看到效果注意观察： 在本系统的每一个页面上有一个 链接，这就是一个锚点链接的实例，可模仿应用2.代码：网页内的超链接第三课复习指导知识要点扫描 知识网络重点、难点研究 金题解析延伸能力迁移训练 助学资料知识要点扫描 SGML(Standard Generalized Markup Language，标准通用标记语言 )是一种用于描述文档资料的通用标记语言。它的语法是可扩展的，数据描述功能很强，但十分复杂，不易学习，难以使用，在计算机上实现也很难，所以 Web 发明者 Tim Berners-Lee 等人于 1989 年根据当时的计
13、算机及网络技术，提出了 html语言。html 是基于 SGML 的。html 自诞生以来不断发展完善，目前 WWW 上使用 html 4.0 版本。html(Hypertext Markup Language，超文本标记语言 )是一种用来制作超文本文档的简单标记语言。html 语言可用于网页的排版，是网页设计的基础。用 html 编写的超文本文档称为 html 文档，它能独立于各种操作系统平台。使用 html 语言描述的文件，需要通过 WEB 浏览器显示出效果。 top知识网络 1) 标签 一个 html 文档是由一系列标签组成的。html 语言中的“标签”是用两个尖括号括起来的标签指令，用
14、来控制文本、图像的显示方式及加于其上的动作。标签的格式：标签指令例如：title，/title，hr/ 等。html 标签可分单标签和双标签，如上例中的水平线标签hr、回车换行标签br就是单标签。而html要与最后的 /html配合使用，title必须与后面的/title配合使用，这种起始标签和结束标签的组合，就是双标签。2) 标签的属性有些标签具有参数，这些参数精确地定义显示方式或行为等，被称为该标签的属性。属性的用法：标签指令 属性名 = 属性值 top重点、难点研究 4) html 文档的基本结构一个 html 文档的基本结构是以html开始，以/html结束，中间包含文档首部(head
15、)和文档主体(body)两部分。head 标签中可以嵌套描述文档特征和属性的标签，例如 title 标签。body 标签中描述网页的内容，浏览时将显示在浏览器窗口中。 top金题解析延伸 为了满足 W3C 的 MXL 文档标准，在新的 Xhtml 规范中，要求文档是格式良好的(Well-formed)，即必须满足以下要求：有且仅有一个根元素，其中可以包含若干子元素。即 Xhtml 文档必须以html开始，以/html结束，其中可以包含 head 元素和 body 元素，也就是说，标签必须严格嵌套。 标签必须有结束标签。标签中属性的值必须使用引号。标签、属性以及属性的值都是大小写敏感的。 top
16、能力迁移训练 1) head 标签head 标签用于定义 html 文档的首部 格式：head/head文档的首部描述了文档的很多特征和属性，包括文档的标题、和其他文档的关系等。除文档标题外，head部分的大多数内容都不会真正显示在浏览器中。2) title 标签title 标签用于定义 html 文档的标题格式：title/title该标签定义了文档的标题，title与/title中间的文字在网页被浏览时会显示在浏览器的标题栏上。标题通常用简明扼要的文字概括该网页的主要内容或主题。 top助学资料 html 文档的主体是网页的实质部分，是放置文档核心内容的地方。body 标签用于定义文档主体
17、格式：body/body常用属性：background、bgcolor、bgpropertieslink、alink、vlink、text、leftmargin、topmargin top3.效果：实例 101.要求：知识要点： 各个网页链接在一起后才能构成一个网站，按链接目的可分为锚点链接、内部链接、外部链接、E-mail 链接等内部超链接是实现同一站点内一个网页到另一个网页的链接知识温故： 内部链接目标网页的路径（ url）表达形式，可使用 根相对路径 或 文档相对路径实训目的： 掌握超链接的设置方法实训内容： 标签及其属性： href、name、target、style 等注意观察： 在
18、本系统的每一个页面上的 和 链接，就是内部链接的实例，可模仿应用2.代码：指向其它页面的超链接课程复习指导第一课复习指导 第二课复习指导第三课复习指导 知识要点扫描知识网络重点难点研究金题解析延伸能力迁移训练助学资料第四课复习指导 第五课复习指导3.效果：课程复习指导第一课复习指导第二课复习指导第三课复习指导知识要点扫描知识网络重点难点研究金题解析延伸能力迁移训练助学资料第四课复习指导第五课复习指导实例 111.要求：知识要点： 超链接的功能很强，可以在 WWW 上随意链接到其它站点，没有类别之分，没有国界限制实训目的： 掌握外部链接的设置方法，掌握目标网页地址（ URL）的表示方法实训内容：
19、 标签及其属性： href、name、target、style 等知识扩展： 绝对路径是包括网站域名在内的完全路径 ,用于实现外部链接；链接到外部站点的首页,可只写域名省略文件名注意观察： 当超链接的目标是不能用浏览器打开的文档时，点击这个超链接将打开“文件下载”对话框超链接“ HTML 参考资料 ”所链接的目标是一个 .rar 类型的文件，点击该超链接，观察其运行效果操作提示： 外部超链接可能因目的网站停止服务而链接失效2.代码：超链接到站点外、超链接到浏览器不能打开的文件网易海王科技域名知识html 参考资料 3.效果：网易海王科技域名知识html 参考资料实例 121.要求：实训目的：
20、掌握电子邮件链接的格式，了解常用的电子邮件收发器，如：Foxmail OutlookExpress 实训内容： 电子邮件链接格式 操作提示： 浏览器端单击电子邮件链接，将打开默认邮件收发管理软件，如 Foxmail、Outlook Express 等，为发送一个电子邮件做好准备2.代码：电子邮件链接为您服务3.效果：为您服务实例 131.要求：知识要点： 按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，多媒体文件链接，空链接等实训目的： 掌握在图片上作超链接的方法实训内容： 图片上作超链接的格式 知识扩展： 在 Dreamweaver 中还可以将一幅图片划分为多个热区，作多
21、个超链接注意区别： 描述链接目标 url 使用 标签的 href 属性， 描述插入图片来源的 url 使用 标签的 src 属性2.代码：图片超链接示例3.效果：实例 141.要求：知识要点： 表格由表行组成，表行由表项 (单元格)组成。表格由 TABLE 定义，表行由 TR 定义，单元格由 TD 或 TH 定义实训目的： 掌握表格的定义格式（表格、表行、单元格），表格的对齐方式、表项的对齐方式、表格中文字的设置等。实训内容： 标签及其属性 align、bgcolor、 border、 bordorcolor、 height、 cellspacingwidth、 cellpadding ， 标
22、签及其属性 align 、 valign表格内文字的字体、字型、大小、颜色、对齐方式等操作提示： 在网页设计中表格的主要用途是网页排版布局，所以熟练掌握和运用表格这一排版布局工具，是非常重要的2.代码：表格示例学号 姓名 语文数学 均分 0301 张大山 7897 87.5 0302 李海燕 8987 88 0303 王华清 8998 93.5 3.效果：学号 姓名 语文 数学 均分0301 张大山 78 97 87.50302 李海燕 89 87 880303 王华清 89 98 93.5实例 151.要求：实训目的： 掌握表格中单元格的合并、表格标题格式的设置、对齐方式等。实训内容： 同一
23、行内若干单元格的合并 格式： 表项 或： 表项 同一列内若干单元格的合并 格式： 表项 或： 表项 同时合并多行多列 格式： 表项 表格标题 格式： 表格标题 注意观察： 合并单元格后，填写表项时很容易造成错位，可以参考下面的例题，总结合并单元格后表项的填写规则分析思考： 注意观察 与 所描述的单元格有什么区别 ，分别适用于什么场合 ？ 2.代码：表格标题及合并单元格学生基本情况表姓名王美丽性别女年龄15E-照片 称谓姓名职业电话父亲王正医生88888888母亲李英教师99999999地址北京市雨儿胡同3.效果：学生基本情况表姓名 王美丽 性别 女 年龄 15 E-mail 称谓 姓名 职业
24、电话父亲 王正 医生 88888888母亲 李英 教师 99999999照片地址 北京市雨儿胡同实例 161.要求：知识要点： 在网页应用各种样式的 “列表”， “列表”与 MricroSoft Offic Word 中的“项目符号和编号”相似实训目的： 掌握无序号列表、 选单列表、 有序列表、 定义列表的标签格式及各种列表形式嵌套的用法实训内容： 、 、 、 、 、 、 、 等标签及其常用属性：type 扩充提高： 本例排版使用了表格，网页设计中表格是最常用的排版工具，需要熟练掌握 2.代码：列表示例边学边练，学以致用学习进度，尽在掌握 洪恩本色，人性设计主要内容Internet 应用网页设
25、计网站建设精通 Windows精通 Office常用工具软件Photo 实例精通 Windows 学习时间 1012 小时，从简单的启动程序，拷贝文件，到优化系统，设置网络，相信不同层次的用户都可以获得自己需要的知识。精通 Office 充分利用多媒体技术 ，以实例讲 Word、Excel、access、PowerPoint、Outlook，让你迅速成为 Office 专家。Photo 实例 感受功能强大的图形图像处理软件，结合实际 10 个综合例子，让你迅速成为美术大师。3.效果： 边学边练，学以致用 o 学习进度，尽在掌握 o 洪恩本色，人性设计 主要内容 Internet应用 网页设计
26、网站建设 a. 精通 Windows b. 精通 Office c. 常用工具软件 d. Photo 实例 精通 Windows 学习时间 1012 小时，从简单的启动程序，拷贝文件，到优化系统，设置网络，相信不同层次的用户都可以获得自己需要的知识。 精通 Office 充分利用多媒体技术，以实例讲Word、Excel、access、PowerPoint、Outlook，让你迅速成为 Office 专家。 Photo 实例 感受功能强大的图形图像处理软件，结合实际 10 个综合例子，让你迅速成为美术大师。 实例 171.要求：知识要点： 框架也是布局网页的一种方法，但它与表格布局方法不同。实训
27、目的： 掌握框架集的概念、框架集中各网页间的关系、框架集中超链接的实现等。实训内容： 标签及其常用属性： rows 、cols、frameborder、framespacing标签及其常用属性： src、name、marginwidth 、marginheight、scrolling、noresize 操作步骤： 创建 5 个 html 文档并将其存放在同一个文件夹中，其中，框架网页文件名为“web17.htm”，另外 4 个文件名分别为 “web17a.htm”、 “web17b.htm”、 “web17c.htm”、 “web17d.htm”。注意观察： 注意观察在浏览器中的初始显示的效果
28、 与点击“球星风采” 超链接后的显示效果，思考框架网页中实现超链接的方法2.代码：框架集文档，设计用意： 定义一个浏览器窗口的分割形式，并指定在每一个子窗口中显示 html 网页文档的名称Frame Example设计用意： 显示在上部子窗口的网页这是框架网页的顶部窗口，通常在这里放置站点的 Logo 和 banner、网站的主栏目导航菜单等。设计用意： 显示在左边子窗口的网页这是框架网页的左窗口，通常子栏目导航菜单可放在这里。这里的超链接目标通常在右面窗口中打开。球星风采设计用意： 显示在右边子窗口的网页这是框架网页的右窗口。通常在这里打开左边窗口中超链接的目标。例如，单击左边窗口中的“球星
29、风采 “，这里将看到一个新的网页。设计用意： 点击左子窗口中的超链接，显示在右子窗口的网页姚明一跃而起，两个大个子抱在了一起。姚明高他俩头，黑大汉有 1.98 米，眉毛在额头上乱跳，开心得不得了。“哥们儿，又见面了！“ 他叫泰佑约翰逊，是 NFL(美式橄榄球)奥克兰骑士队的球星3.效果：实例 181.要求：知识要点： 表单可实现用户的信息输入， 使网页具有了交互功能实训目的： 掌握表单中各种控件的用法、功能、及格式，理解表单的交互功能，学会制作表单实训内容： 表单及其中按钮、复选框、单选按钮、文本输入框、图像、文件、隐藏项、文本区域、列表框等各种表单控件的定 义格式及用法用途两个特殊按钮： “
30、 提交”、“重置”的定义和用法用途， 一个特殊文本框“密码框”的用法用途知识扩展： 表单中的数据处理须要应用程序的支持，本课程中 “ASP”部分将会介绍2.代码：意见建议请您填写详细资料并提出宝贵意见登录名：输入登录密码：性别：男 女 所在省份： 安徽 北京重庆 福建甘肃 广东广西 贵州海南 河北黑龙江 河南湖北 湖南江苏 江西吉林 辽宁宁夏 内蒙古青海 上海山西 山东四川 陕西天津 西藏新疆 云南浙江 台湾香港 澳门澳洲 北美洲亚洲其他国家欧洲 其他个人爱好音乐 运动请提供附加文件3.效果：请您填写详细资料并提出宝贵意见登录名：输入登录密码：性别： 男 女 所在省份： 安 徽个人爱好 音乐 运动请提供附加文件提 交 全 部 重 写
