网页制作案例教程-清华大学
《第5课 统一风格——制作框架网页》学历案-初中信息技术清华大学版12八年级下册自编模拟
《统一风格——制作框架网页》学历案（第一课时）一、学习主题本课学习主题为“统一风格——制作框架网页”，属于初中信息技术课程中的重要内容。
本课旨在让学生掌握网页制作的基本框架和统一风格的重要性，通过实践操作学会使用相关软件制作具有统一风格的简单框架网页。
二、学习目标1. 知识与技能：（1）了解网页的基本构成元素和框架设计的基本原则。
（2）掌握使用软件创建网页框架的基本操作。
（3）学会应用统一的风格设计网页，提升网页的视觉效果和用户体验。
2. 过程与方法：（1）通过观察和分析优秀网页案例，学习如何运用统一风格进行网页设计。
（2）通过实践操作，掌握网页框架的制作流程。
3. 情感态度与价值观：（1）培养学生对网页设计的兴趣和热爱，激发其创新意识和审美能力。
（2）让学生理解统一风格在网页设计中的重要性，并能在实际设计中运用。
三、评价任务1. 知识点评价：通过课堂小测验和课后作业，评价学生对网页基本构成元素和框架设计原则的理解程度。
2. 操作技能评价：通过学生制作的网页框架作品，评价其操作技能的掌握情况。
3. 创意与审美评价：通过学生对网页统一风格的应用，评价其创意和审美能力。
四、学习过程1. 导入新课：通过展示几个具有统一风格的优秀网页案例，引导学生了解网页设计的基本要求和美感，激发学生的学习兴趣。
2. 新课讲解：讲解网页的基本构成元素和框架设计的基本原则，让学生了解网页的构成和设计思路。
3. 实践操作：指导学生使用相关软件进行网页框架的制作，包括设置页面布局、添加元素、调整样式等操作。
4. 案例分析：分析几个具有统一风格的网页案例，让学生了解如何运用统一风格进行网页设计，并引导学生思考如何在自己的作品中应用。
5. 学生实践：学生自主设计并制作一个具有统一风格的简单框架网页，教师巡视指导，及时解答学生疑问。
6. 作品展示与评价：学生展示自己的作品，互相评价和学习，教师根据评价任务进行评价，并给出改进建议。
网页设计与制作教程(第3版)
2014年清华大学出版社出版的图书
01 成书过程
03 教材目录 05 教材特色
目录
02 内容简介 04 教学资源 06 作者简介
《网页设计与制作教程（第3版）》是由杨选辉编著，2014年清华大学出版社出版的普通高等教育“十一五” 国家级规划教材、高等学校计算机基础教育精选教材。该教材可作为高等院校“网页设计与制作”课程的教材和 网页制作培训班的教材，也可作为网页设计与制作爱好者的自学参考书。
感谢观看
2014年9月1日，该教材由清华大学出版社出版。
内容简介
该教材是介绍网页设计与制作技术的教程，以网页设计软件作为技术支持，介绍了网页的构思、规划、制作 和网站建设的全过程。全书分为两篇共8章，并包括三个附录。第1篇（第1～5章）是基础篇，介绍了网页制作基 础知识、HTML简介、CSS基础知识、网站建设概论和当时主流的网页制作工具DreamweaverCS5；第2篇（第6～8 章）是提高篇，介绍了网页布局方法CSS+Div、网页制作辅助工具PhotoshopCS5和FlashCS5；附录中提供了网页 特效源代码和辅助设计小软件及每章课后习题的参考答案。
该教材是介绍网页设计与制作技术的教材，分为两篇共8章，并包括三个附录，以网页设计软件作为技术支持， 介绍了网页的构思、规划、制作和网站建设的全过程。
成书过程
修订情况
出版工作
该次改版主要对Dreamweaver部分的内容进行了优化，删除了FrontPage和Fireworks的内容，增加了CSS方 面的内容，以适应网页设计技术发展的趋势。
该教材各章内容主要由杨选辉编写完成，其中谷艳红参与编写了该教材第5、6、8章的部分内容，曾群、郭 路生、李晚照、龚花萍、方玉凤、葛伟、屈文建分别参与编写了该教材的第1、2、3、4、6、7章和附录的部分内 容，孙斌、赵珑、郭晓虹、饶志华、敖建华、张婕钰参与了该教材第2、3、5、6、7、8章部分案例的设计和编写 工作。全书由杨选辉拟定大纲和统稿。该教材得到了南昌大学教材出版项目的资助。
网页制作案例教程-清华大学出版社-第1章-网页制作基础概论
动态网页中的“？”对搜索引擎检索存在一定的问题，搜 索引擎一般不可能从一个网站的数据库中访问全部网页， 或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中“？ ”后面的内容，因此采用动态网页的网站在进行搜索引擎 推广时需要做一定的技术处理才能适应搜索引擎的要求。
5、常见网站类型
个人类网站 信息类网站 机构类网站、 电子商务类网站 娱乐休闲类网站 购物类网站
特点：
静态网页每个网页都有一个固定的URL，且网页URL以 .htm、.html、.shtml等常见形式为后缀，而不含有“?”；
网页内容一经发布到网站服务器上，无论是否有用户访问 ，每个静态网页的内容都是保存在网站服务器上的，也就 是说，静态网页是实实在在保存在服务器上的文件，每个 网页都是一个独立的文件；
特点：
动态网页以数据库技术为基础，可以大大降低网站维护的 工作量。
采用动态网页技术的网站可以实现更多的功能，如用户注 册、用户登录、在线调查、用户管理、订单管理等等。
动态网页实际上并不是独立存在于服务器上的网页文件， 只有当用户请求时服务器才动态生成一个完整的网页，并 以静态的形式返回客户端浏览器。
提高篇 JavaScript篇 CSS篇
HTML篇 基础篇
网站发布、测试和维护 Web服务器创建 网页中常见Flash制作 JavaScript网页应用 Javascript概述 使用CSS布局规划网页 CSS样式表 利用模板和库创建网页 交互式网页表单的设计与使用 网页布局规划设计 网页基本元素设计 HTML基础 网页设计与开发流程 （AscentSys医药商务系统） 网页制作基础
网页制作案例教程
毋建军 郑宝昆 郭锐 编著
清华大学出版社
第1章 网页制作基础
网页设计与开发HTML、CSS、JavaScript实例教程 (郑娅峰 著) 清华大学出版社课后习题1-10章答案
第一章习题1．HTML指的是（ A ）。
A超文本标记语言（Hyper Text Markup Language）B家庭工具标记语言（Home Tool Markup Language）C超链接和文本标记语言（Hyperlinks and Text Markup Language）2．web标准的制定者是（ B ）。
A 微软B万维网联盟（W3C）C网景公司（Netscape）3．用HTML标记语言编写一个简单的网页，网页最基本的结构是（ D ）。
A <html> <head>…</head> <frame>…</frame> </html>B <html> <title>…</title> <body>…</body> </html>C <html> <title>…</title> <frame>…</frame> </html>D <html> <head>…</head> <body>…</body> </html>4．从IE浏览器菜单中选择____查看 源文件______命令，可以在打开的记事本中查看到网页的源代码。
5．实现网页交互性的核心技术是_______ JavaScript _______________。
6．CSS的全称是________ Cascading Style Sheet __________ ______。
7．写出你了解的专业网页编辑制作工具_____Dreamweaver_，_ EditPlus ___________。
8．URL的全称是____Uniform Resource Locator _____________________________。
《第6课事半功倍——制作网页模板》学历案-初中信息技术清华大学版12八年级下册自编模拟
《事半功倍——制作网页模板》学历案（第一课时）一、学习主题本课学习主题为“事半功倍——制作网页模板”。
在信息技术课程中，网页制作是培养学生数字化技能和逻辑思维的重要环节。
本课时将重点学习如何高效地制作网页模板，包括网页布局、色彩搭配和素材应用等基础知识。
二、学习目标1. 了解网页模板的概念和作用，认识常见的网页布局方式。
2. 掌握使用HTML和CSS基础语法制作简单的网页模板。
3. 学会使用常见的设计软件进行网页素材的选取与编辑。
4. 培养创新思维，能结合实际需求设计出具有个性的网页模板。
5. 学会在团队合作中分工协作，共同完成一个网页模板的设计与制作。
三、评价任务1. 课堂表现评价：学生在课堂上的参与度、互动性以及实际操作能力。
2. 作品质量评价：学生制作的网页模板的布局、色彩搭配、素材应用及HTML、CSS代码的规范性。
3. 团队合作评价：学生在团队合作中展现的沟通能力、协作能力和贡献度。
四、学习过程1. 导入新课（5分钟）- 老师简要介绍网页模板的重要性和应用场景，激发学生的兴趣。
2. 基础知识讲解（15分钟）- 讲解网页模板的概念、作用及常见的网页布局方式。
- 介绍HTML和CSS基础语法，以及如何使用这些语言制作简单的网页模板。
3. 软件操作演示（10分钟）- 老师演示使用设计软件进行网页素材的选取与编辑，展示如何将设计转化为实际可用的网页模板。
4. 实践操作（20分钟）- 学生根据老师提供的素材或自行设计素材，使用HTML和CSS编写简单的网页模板。
- 学生之间可相互讨论、交流心得，老师在此过程中给予指导和帮助。
5. 分组合作（20分钟）- 学生分组，每组选择一个主题（如学校官网、社团活动等），共同设计并制作一个完整的网页模板。
- 每组成员需明确分工，如布局设计、色彩搭配、素材选取等，确保团队合作顺利进行。
6. 课堂总结（5分钟）- 老师总结本课学习的重点和难点，强调网页模板的重要性和实际应用价值。
清华大学主页网页设计代码
二、实验过程（实验步骤、记录、数据、分析）代码为：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>清华大学</title><style type="text/css">* {margin: 0;padding: 0;border: none;}body {margin: 0 auto;width: 1000px;font-size: 12px;}.menu ul li {float: left;list-style: none; position: relative;}.menu ul li a {display: block; background-color: #900; background: #9FF; padding: 0 20px;text-decoration: none; line-height: 35px;}.menu ul li a:hover {background-color: #C0F; color: #000;}.menu ul li ul { visibility: hidden; width: 100px;position: absolute;left: 5px;top: 35px;}.menu ul li ul li {font-size: 12px;}.menu ul li ul li a { display: block;width: 120px;height: 35px;background: #3F0;}.menu ul li ul li a:hover {color: #000;background-color: #9F3;}.menu ul li:hover ul, .menu ul li a:hover ul { visibility: visible;}#id1{width:1000px;height:auto;float:left;}#id2 {float:left;}#id3 {width:200px; height:290px; font-size:30px; float:left;}#id4 {font-size:14px; }#id5 {width:250px; height:300px; font-size:24px; float:left;}#id6 {width:235px;font-size:17px; }#id7 {width:235px; font-size:17; float:left;}#id8{width:230px; height:300;font-size:17px; }#id9 {width:170px; height:300px; float:left;}#id10 {width:190px;height:300px;font-size:17px;float:left;}#id11 {width:1000px;height: auto;float:left;}</style></head><body><div id="id1"><img src="7.jpg" width="870" /></div> <div ><ul><li><a href="#">清华新闻</a></li> <li><a href="#">学校概况</a><ul><li><a href="#">校长致辞</a></li> <li><a href="#">学校沿革</a></li> <li><a href="#">历任领导</a></li> <li><a href="#">现任领导</a></li> <li><a href="#">组织机构</a></li> <li><a href="#">统计资料</a></li> </ul></li><li><a href="#">院系设置</a> </li> <li><a href="#">师资队伍</a><ul><li><a href="#">概况</a></li><li><a href="#">杰出人才</a></li> </ul></li><li><a href="#">教育教学</a><ul><li><a href="#">本科生教育</a></li><li><a href="#">研究生教育</a></li><li><a href="#">留学生教育</a></li><li><a href="#">继续教育</a></li></ul></li><li><a href="#">科学研究</a><ul><li><a href="#">科研项目</a></li><li><a href="#">科研机构</a></li><li><a href="#">科研合作</a></li><li><a href="#">科研成果和知识产权</a></li> <li><a href="#">学术交流</a></li></ul></li><li><a href="#">招生信息</a><ul><li><a href="#">本科生招生</a></li> <li><a href="#">研究生招生</a></li> <li><a href="#">留学生招生</a></li> </ul></li><li><a href="#">人才招聘</a><ul><li><a href="#">招聘计划</a></li> <li><a href="#">招聘信息</a></li> <li><a href="#">我要应聘</a></li> </ul></li><li><a href="#">图书馆</a> </li><li><a href="#">走进清华</a><ul><li><a href="#">校园生活</a></li><li><a href="#">校园风光</a></li><li><a href="#">实用信息</a></li></ul></li></ul></div><div id="id2"><img src="1.jpg" width="870" /></div><div id="id3"><td>清华新闻</td><div id="id4"><li><a href="#"> 【群众路线教育实践】马院领导班子召开会议对照检查材料</a> </li><td> </td><li><a href="#">973首席科学家林圣彩作客清华讲解代谢平衡</a></li><td> </td><li><a href="#">清华美院陈楠当选中华海外联谊会理事会理事</a></li><td> </td><li><a href="#">【群众路线教育实践】胡和平到核研院进行教育实践活动专题调研</a></li><td> </td><li><a href="#">"袁驷到经管学院进行24次教育工作讨论会调研</a></li></div></div><div id="id5"><img src="2.jpg" /><img src="3.jpg" /><div id="id6"><td><a href="#">"清华柴继杰研究组在《科学》发文揭...</a></td><ul> </ul><ul>柴继杰教授等在《科学》发文，首次报道植物模式识别受体FLS2及共受体BAK1与细菌模式分子鞭毛蛋白保守基序flg22三元复合物晶体结构，并通过结构分析和体内外生化实验揭示该复合物活化的分子机制。
网页设计与开发HTML、CSS、JavaScript实例教程 (郑娅峰 著) 清华大学出版社课后习题1-10章答案
第一章习题1．HTML指的是（ A ）。
A超文本标记语言（Hyper Text Markup Language）B家庭工具标记语言（Home Tool Markup Language）C超链接和文本标记语言（Hyperlinks and Text Markup Language）2．web标准的制定者是（ B ）。
A 微软B万维网联盟（W3C）C网景公司（Netscape）3．用HTML标记语言编写一个简单的网页，网页最基本的结构是（ D ）。
A <html> <head>…</head> <frame>…</frame> </html>B <html> <title>…</title> <body>…</body> </html>C <html> <title>…</title> <frame>…</frame> </html>D <html> <head>…</head> <body>…</body> </html>4．从IE浏览器菜单中选择____查看 源文件______命令，可以在打开的记事本中查看到网页的源代码。
5．实现网页交互性的核心技术是_______ JavaScript _______________。
6．CSS的全称是________ Cascading Style Sheet __________ ______。
7．写出你了解的专业网页编辑制作工具_____Dreamweaver_，_ EditPlus ___________。
8．URL的全称是____Uniform Resource Locator _____________________________。
网页制作,清华大学出版社第6章
6.2文件的优化及导出 6.2文件的优化及导出
在Fireworks 8中，对图像的优化首先是选择 8中，对图像的优化首先是选择 一个最佳的文件储存格式。选择一个最佳的文件 储存格式是保证图像质量和压缩效果的前提。 其次是设置文件格式的明细选项，每一种网络文 件格式对于图像压缩都有一系列的选项可供选择， 应尽可能的兼顾文件大小和图像质量两个方面。 在网页制作中采用的图像文件格式主要是JPEG和 在网页制作中采用的图像文件格式主要是JPEG和 GIF两种。 GIF两种。
（4）在【保存类型】下拉列表中有很多选项，一 ）在【保存类型】 般选【仅图像】 般选【仅图像】或【HTML和图像】。选【仅图 HTML和图像】。选【 像】仅把切片输出为一系列的图像文件，选 【HTML和图像】不仅输出切片的图像文件，还 HTML和图像】 会输出一个把切片组合起来显示的网页文件。 （5）在【切片】下拉列表中有三个选项。 ）在【切片】 ①无：选择该选项会忽略切片对象，将整个图像 导出为一个图像文件。 ②导出切片：选择该选项会将每一个切片生成一 个切片图像文件。 ③沿辅助线切片：选择该选项会根据图像中现有 的辅助线划分的一系列矩形区域导出切片图像文 件，而与图像上的切片对象无关。
第6章 切片与文件优化
6.1 6.2 6.3 6.4 切片的基本操作 文件优化及导出 应用实例 本章小结
本章重点：
切片的概念与操作 切片的行为 优化及导出GIF格式的图像 优化及导出JPEG格式的图像 优化及导出动画
切片顾名思义就是将一幅大图像分割为一些小的 图像切片，在网页中可以将这些小的图像切片放入一 个表格，将表格的单元格之间的间距设为0，从而将 这些小的图像切片没有缝隙的重新组合起来，还原为 一幅完整的图像。 对图像采用切片以后，每一个切片上都可以采用 不同的优化方式，达到兼顾减小整个图像文件的大小 和保持图像的总体质量的效果。 使用切片还可以在切片上加各种动作，创造出交 互的效果 。
清华大学 网页设计培训教程 Dreamweaver 10章
/webnew/
10.1.1
认识Fireworks 8的工作环境
Fireworks是一个专业化的Web图像设计程序。它是第一个专门针对Web开 发的图像设计软件，目前已经得到广泛的应用。 使用Fireworks既可以编辑Web图像，又可以编辑Web动画。Fireworks的 一个很大优势就在于它将位图处理和矢量处理合二为一。换句话说，它 既是一个优秀的位图图像处理程序，又是一个矢量图像处理程序，这使 它的应用范围更加广泛。 在安装Fireworks MX后，它会自动在Windows的【开始】菜单中创建程序 组，选择【开始】|【程序】| Macromedia | Macromedia Fireworks 8 命令，即可启动Fireworks 8。Fireworks 8的程序界面如图10.1所示。 Fireworks 8是一个多文档编辑程序，它可以同时打开多个图像进行编辑， 而且每个图像都处于一个图像窗口中。一个Fireworks 8程序窗口包含以 下几个部分。
/webnew/
10.1.2
制作网站徽标
图10.2 原始图像
/webnew/
10.1.2
制作网站徽标
图10.3 笔触【属性】面板
/webnew/
10.1.2
10.1.3
制作按钮图像
图10.18 设置投影效果
图 10.19 进行投影效果处理后的矩形
/webnew/
10.1.3
制作按钮图像
(7) 选择工具箱中的【文本】编辑工具，然后在输入“文学作品”4个字，如图10.20所示，并设置 文本的各种格式，如：字体为“华文新魏”、粗体；字体大小为“23像素”；字体颜色为“黑色”(＃ 000000)和字间距为“105%”等。 (8) 利用工具箱中的箭头工具在画布中适当调整文本的位置，使文本“文学作品”位于矩形条的左 上部分，如图10.21所示。 (9) 单击【属性】面板上对齐格式上面的颜色框，在弹出的调色板中单击【填充选项】按钮，这时 会出现如图10.22所示的填充效果设置框。 (10) 在填充工具面板中利用图案填充工具，为文本进行填充效果的处理如下：填充类型为“图案”； 填充名称为“气泡”；【边缘】为“消除锯齿”；【纹理】为“DWA”。则文本的填充效果如图10.23所 示。 (11)单击【属性】面板中【效果】区域的“＋”按钮，在弹出的菜单中选择【阴影和光晕】|【投影】 命令，为文本进行投影效果处理，这时会出现如图10.24所示的对话框。为文本进行如下投影效果处理： 投影距离为“7”；投影颜色为“黑色”(＃000000)；不透明度为“65％”；柔和度为“4”；角度为 “342”；不选中【去底色】复选框，使得文本具有如图10.25所示的立体效果。 (12) 对图像按钮的制作完成后，选择【文件】|【保存】命令，在保存文件对话框中为按钮确定一个 比较好记的名称，如“Button_1”。单击【保存】按钮将图像保存在网站的子文件夹中。 用户可以选择【文件】|【新建】命令新建一个文件，并按照上面的方法继续制作其余的图像按钮。
清华大学网页设计第4章
整理ppt
4
整理ppt
5
4.1.3在网页中插入图片
• 将文本光标移到要插入图片的地方。选择 “插入”|“图像”命令，在出现的文件选择 对话框中选择要插入的图片，在“相对于” 下拉列表框中，选择“文档”选项。“文 档”选项是与文档的相对路径，另一个 “站点根目录”选项是与根目录的相对路 径。整理pptFra bibliotek整理ppt
16
• （10） 还可以插入一个比较酷的Flash效果， 可以单击“插入”工具栏中“常规”选项 的“媒体”按钮，选择其中的“Flash对象” 选项，然后在弹出的对话框中找到要插入 的Flash文件就可以了
整理ppt
17
（11）在“属性”面板中可以设置Flash是否 循环和自动播放
• （12） 单击“属性”面板中的“参数”按 钮，打开“参数”对话框，在“参数”栏 中输wmode，在“值”栏中输入 transparent，这样该Flash动画就会以透明 背景方式播放。
整理ppt
2
4.1.1插入文本
• 第一种方法： 直接在文档中输入文本，将 鼠标指针定位在插入点，然后用键盘直接 输入即可
• 第二种方法： 在其他应用程序中直接复制 文本到Dreamweaver中。
• 第三种方法： 执行“文件”|“导入”命令， 在子菜单中可以选择导入到网页中的文档 类型，分别为“XML到模板”、“表格式 数据”、“Word文档”和 “Excel文档”。
图片超链接主要使用图片属性面板中的热点工具按 钮实现。
在图像的“属性”面板的下方有四个按钮，功能分 别介绍如下。
• “指针热点”工具按钮： 选择热点区域或热点区 域的边界顶点。
• “矩形热点”工具按钮： 选中该按钮后，在图像 上拖动鼠标，可以画出一个矩形的热点区域。
网页制作,清华大学出版社第17章
（5）将光标插入到表单内，输入标识提示文字 “您的姓名：”。
（6）单击【表单】选项中的【文本字段】按钮 ， 就会在表单中生成一个【文本字段】表单域，如 图17-3所示。
图17-3创建此时【文本字段】 的【属性】面板，如图17-3所示。
在【初始值】文本框中输入表单域的预先设置的 值。
在【换行】中设置多行文本框表单域的换行方式。 当选择【类型】为多行单选项时，【换行】下拉 式列表就被激活，可选择设置多行文本表单域中 不同的换行方式。
(8)用同样的方法在表单的下一行生成“您的Email地址：”的文本框表单域，如图17-3所示。
(9)在【文本字段】的【属性】面板中的【字符宽 度】文本框中输入45。并选中单行选项，表示此 文本框为单行类型。
表单有两个重要的组成部分：
（1）由Dreamweaver 8生成的表单的HTML页面。
（2）用于处理浏览者在表单域中输入的信息的服 务器端应用程序或客户端脚本。
浏览者在网页上看到有关表单的页面，只是 供浏览者输入信息的表单页面。当浏览者按要求 在表单中填写有关信息，单击表单的递交 （Submit）按钮之后，表单内容就会上传到服务 器，并且由事先编好的服务器端程序来处理这些 信息，最后服务器再将处理结果发送给浏览者的 浏览器。由此可见，表单的应用必须依赖于服务 器端脚本才能真正发挥其功能。
【文本字段】的【属性】面板各项属性意义如下。
在【文本域】文本框中输入当前表单域的名称， 系统将以此名称保存文本框表单域中的内容。
在【字符宽度】文本框中输入当前表单域的宽度， 即设置文本框中每行所允许输入的字符数目。
在【最大字符数】文本框中设置文本框表单域中 最多可允许输入的字符数。
清华大学 网页设计与制造 4
尽量使用mid格式的音乐 文件，避免产生慢速网页
36
网页背景音乐处理
设置开启新窗口的超链接
如何让主页音乐贯穿整个网站？
37
利用框架使网页背景音乐连贯
1.把index.htm重命名为index-content.htm 2.新建一个 “上方固定”框架网页 3.下框架设置初始网页为index-conten.htm
29
框架网页的保存-新建子框架页面
执行“文件”/ “保存全部”命令,将逐一保存在框架集 中打开的所有网页文件和框架集文件。对于尚未保存的每 个框架和框架集本身，在框架的周围会出现粗边框，显示 当前要保存框架
30
创建框架网页-新建子框架页面
单击具体框架，直接制作该框架中 的网页
31
设置框架属性
选中要设置属性的框架： • 按住 Alt 键的同时单击一个框架 • 在“框架”面板单击选择的框架
CSS布局
CSS布局建立符合WEB标准的网页，使表现与内容分 开，可以实现任何形式的布局。
11
表格布局实例
12
表格布局实例
13
表格布局实例14表格ຫໍສະໝຸດ 局实例15创建表格
“插入”/“表格”命令 单击插入栏上表格按钮
16
表格基本操作
选中表格 • 鼠标放在表格的四周，鼠 标指针变为表格图标时，单 击鼠标左键 • 光标定位在表格任一单元 格内，单击鼠标右键，从弹 出的快捷菜单中选择 “表 格”/ “选择表格”命令
34
浮动框架
浮动框架是一种特殊的框架页面，在浏览器窗口中可以嵌 套子窗口，在其中显示页面的内容。 <iframe src height width name align> </iframe>
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3、格式标签
1）常用格式标签 在HTML文档中，通常我们要通过格式标签来设定文本 显示格式，常用的一些格式标签如表3-2-2所示
2）特殊字符 为了避免那些和HTML的关键字或保留字冲突，有些字 符需要用特殊方法表示才能够正确的在浏览器中显示 。
案例3-11特殊字符应用
3）闪烁标签<blink> <blink> 使得被标记的文字闪烁，使用的格式为 <blink>文字内容</blink>
3.2.2 文本属性设置
1、文本对齐方式属性（align） 该属性用来设置文字的对齐方式，可以是标题也 可以是一般文字，对齐方式共三种：左对齐、居 中对齐和右对齐，默认情况下为左对齐。三种对 齐方式的属性值分别为left、center和right。
案例3-12文本字体属性应用
2、文本字体、大小、颜色属性（face、size、 color）
3.4.3超链接的应用
1、内部链接
内部链接是指链接的对象是在同一个网站内部不同页 面之间的链接关系，内部链接一般使用相对路径进行 链接比较好。
2、书签链接
建立书签的语法格式为： <a name=”书签名称”>文字</a> 这里的书签名称就是为了跳转建立的书签代号，文字是 指跳转过来的位置指定。
使用<ul>标签建立无序列表，每个列表项前使 用<li>，无序列表的type属性有三个可选值，这 三个可选值必须用小写，分别是disc表示实心圆 ，circle表示空心圆，square表示小方块。如果 不选择type属性默认为空心圆。
案例3-16无序列表标签应用
3.3.3 嵌套列表
案例3-17 嵌套列表标签应用
<hi>设置网页内容标题标签，通过<hi>…..</hi>标签 配对使用设置HTML网页内容标题，标题标签共分6种 ，分别表示不同字号的标题，i可以取值为1-6。 在<hi>中可以在使用属性<align>来设置标题对齐方 式，如果没有设置<align>属性，默认对齐方式是left （左对齐）。
<h1 align=“对齐方式”>…..</h1> <h2>…..<h2> <h3>…..<h3> <h4>…..<h4> <h5>…..<h5> <h6>…..<h6>
文本字体、大小、颜色属性,主要是通过在<font>标签 中设置face、size、color的值，设置文本的字体、大 小和颜色。
案例3-13文本字体属性应用
3、<hr>标签的属性
ห้องสมุดไป่ตู้
在<hr>标签中，通过设置width和size属性，用来控制 水平线的长度和宽度，默认情况下，水平线的宽度是 100%，1像素的高度，在设置宽度和高度时可以是确 定的像素值也可以是占窗口的百分比。 color属性可以设置水平线的颜色，颜色表示和字体 颜色的表示相同.
2、<ol>标签属性
<ol>标签有两个属性，分别是start和type。start用来 设置标签首项的开始值，如果省略该属性值则从第一 个字符开始，也可以在<li>中设置value值来改变表行 项目的特定编号。而type用来设置项目编号的类型。
案例3-15 有序列表标签应用
3.3.2 无序列表标签<ul>
Coords属性是用来定义区域的坐标的，它的取值和 shape的形状有关系。
Shape= rect，则coords包含4个参数，分别为left、 top、right和bottom。前两个数字为左上角座标，后 两个数字为右下角座标。 案例3-22 图像超链接应用
案例3-4 换行标签应用
3）取消换行标签nobr
案例3-5 取消换行标签应用
4）原样显示文字标签pre
案例3-6原样显示文字标签pre应用
5）右缩进标签blockquote 案例3-7 右缩进标签应用
6）居中对齐标签center 案例3-8 居中对齐标签应用
7）文字的分区显示标签div 案例3-9 文字的分区显示标签应用
表格标签、属性、单元格以及表格嵌套应用 框架基本结构、分割方式、属性及链接、浮动 窗口
本章学习导航
HTML标签的学习，是初学者掌握网页制作的 入门技术，也是后续学习创建静态、动态网站 必备基础知识，了解JavaScript的基本标签、 属性运用及作用，并使用它们制作精美的网页 ，是初学者掌握本章内容的基本要求。 本章内容在全书知识结构中所处位置如图所示
表示一级标题 表示二级标题 表示三级标题 表示四级标题 表示五级标题 表示六级标题
案例3-2 文字标题
2、段落标签
1）分段标签<p> <p>用来标记段落的开始，用</p>可以标记一个 段落的结束，也可以省略，则到下一个<p>开始 新的段落。 案例3-3 <p>标签应用
2）换行标签<br> <br>可以将文字强制换行，段落标签<p>是隔行换 行，而<br>则使得换行更紧凑。
<a href=”链接地址” ><img src=”图像文件的地址 ”></a>
2、热点图像超链接
热点地图（Image Map）标签的使用格式： <img src="图形文件名" usemap="影像地图名称">
然后需要定义热区图像以及热区的链接属性如下： <map name="影像地图名称"> <area shape=”热区形状” coords=”热区坐标” href="链接地址"> <area shape=”热区形状” coords=”热区坐标” href="链接地址"> …… </map> 这里的两个属性shape和coords的取值说明如下： Shape属性有三个取值，分别是：rect(矩形)、circle（ 圆形区域）、poly（多边形区域）。
3.1 HTML入门
3.1.1 HTML简介
HTML( Hypertext Markup Language )即超文 本链接标示语言 ，目前HTML编辑器有很多，可以 是任何文本编辑器或者网页编辑制作工具，如 FrontPage、Dreamweave。生成的HTML文件最常 用的扩展名是.html，也有.htm。
2、超级链接属性 标签<a>的属性href指定了链接到的目标地址， 该地址可以是文件所在位置也可以是一个URL， 只有正确指定目标地址，才能正确访问需要的资 源。
属性target用于指定打开链接的目标窗口，其默 认方式是原窗口。
3.4.2 超级链接路径
在超链接中，文件的存放位置和路径以及URL必 须指定清楚才可以正确链接，超级链接的路径分 为两种：绝对路径、相对路径。
案例3-20 外部超级链接应用
3.5 图像
3.5.1图像格式
目前浏览器可以显示的图像格式主要有JPEG、 GIF和BMP
3.5.2 图像标签<img>
1、<img>语法格式
语法格式为： <img src=”图像文件的地址”>，这里的地址可以 是相对地址也可以是绝对地址。
2、<img>标签属性
6）hspace属性 语法格式为： <img src=”图像地址” hspace=”水平间距”> 7）vspace属性 语法格式为： <img src=”图像地址” vspace=”水平间距”>
案例3-21 图像标签<img>应用
3.5.3 图像超链接
1、设置图像的超链接 语法格式为：
案例3-14 <hr>标签属性应用
3.3 列表
在HTML中列表有三种形式，分别为：有序列 表(Ordered List)，无序列表(Unordered List) 和定义列表(Definition List)。
3.3.1有序列表标签<ol>
1、语法格式为：
<ol type=编号类型 start=value> <li>第1项 <li>第2项 <li>第3项 </ol>
3.1.2 HTML基本结构及书写规范
1、HTML基本结构
在HTML中，由<>和</>括起来的文本叫做“标签”，<> 表示开始标签；</>表示结束标签，开始标签和结束标签配 对使用，它们之间的部分是该标签的作用域，比如 <html></html>等。HTML就是以这些标签来控制内容的显 示方式。
2、HTML书写规范
在HTML中按照格式来看标签有两类，大部分标签是成 对出现的，需要开始标签和结束标签 。也有一些标签 不需要成对出现，单独出现一次就可以，这类标签通 常不控制显示形态 标签是不区分大小写的。
3.2 文本
3.2.1 常用文本标签
常用的文本标签分为标题标签、段落标签、格式化 标签三类： 1、标题标签<hi>