第五章网页设计与制作
网页设计与制作案例教程(HTML5+CSS3)第5章使用CSS设置图像样式
规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
默认。背景颜色为透明。 规定应该从父元素继承 background-color 属性的设置。
WEB
32
5.4 知识库：CSS背景样式
5.4.2 背景图像样式
第5章 使用CSS 设置图像样式
5.1 基础项目1：制作“李彦宏——众里寻他千百 度”网页 5.2 知识库：CSS图像样式
目录
5.3 基础项目2：制作“少年中国说”网页 5.4 知识库：CSS背景样式 5.5 提高项目：制作“低碳生活 从我做起”网页 5.6 拓展项目：制作“春节民俗”网页
WEB
2
background-color属性可用于设置图像或其它网页元素的背景颜色。其可 能的属性值如下：
属性值
color_name hex_number
描述
规定颜色值为颜色名称的背景颜色（比如 red）。 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number
transparent inherit
name属性或id属性相关联，创建图像与映射之间的联系。具体
是name属性还是id属性由浏览器决定，所以应同时向<map>标 签添加name和id两个属性。
5.2.3 图像映射
<area>标签永远嵌套在<map>标签内部。<area>标签 定义图像映射中的区域，其属性及属性值如下：
必需的属性 属性 alt 属性 coords href nohref shape 值 text 描述 定义此区域的替换文本。
效果
5.2.2 CSS常用图像样式
提示： 当vertical-align的值为bottom或者sub时，IE与Firefox 的显示结果是不一样的，它们无所谓谁对谁错。在工作中，建 议尽量少地使用浏览器间显示效果不一样的属性值。
《网页设计与制作》电子教案课程课件PPT 第五章
HTML语言含有大量的标记符号， 并且还在不断的增加当中。本节 将介绍HTML一些常用的标记符号， 以及它们使用时的语法规则
5.1.1 网页和HTML语言的关系
在Dreamweaver的可视化窗口中制作网页时， 形成的目标文件仍然是HTML代码，如果切换 到代码窗口中，马上就可以看到对应的HTML 代码。 1．一个空白网页的HTML代码 当新建一个网页时，网页上没有什么对象， 这就是一个空白页，现在看一下空白页的 HTML代码。如图5-1所示。
在HTML语言中规定，两个 <Body>之间是输入网页对象 的位置。那么，如果是一幅 图像，情况又会怎样呢？ 注意：在代码窗口调试 HTML代码时，如果有语法 或格式错误，代码将会用黄 色显示。
图5-5代码窗口中的文本对照
3．在网页中插入图像 在网页中输入一行文本，采用5号字，再插入一幅大小为 150×100像素的图像，在两个窗口中观察对比一下。如图5的语法规则
1．HTML语言文件的基本结构 对于一个网页，即一个HTML文档，其基本结构为： <html> <head> 文档标题部分 </head> <body> 页面主体部分 </body> </html> · 从上面的格式可以看出，文档内容以<标记符>开始，以</标记符>结束。 · <head>文档标题</head> 是文件标题标记。 · <body>文档标题部分</body> 是页面主体部分标记。 · <html> </html>是一个页面的开始和结尾。
Dreamweaver CS5网页设计与制作教程第五章
5.1 认识行为
行为是由对象、动作和事件构成的，事件是产生行为的条件，动作是行为 的具体结果。 对象：是产生行为的主体。对象可以是网页中的很多元素，如网页中的一 段文字、一幅图片等元素，也可以整个网页文档。 动作：通常是一段JavaScript代码，用于完成某些特殊的任务。如打开一 个窗口自动弹出“欢迎”窗口、鼠标经过图片图片晃动等效果。 事件：是由用户或浏览器引发动作产生的事情。事件经常是针对页面元素 的，也就是行为的对象，如鼠标经过、鼠标离开、鼠标单击等。
5.2 使用行为
文本域文字的行为 页面中的用户登录需要输入用户名、密码，因此在页面会插入给用户输入的 文本域。常常可以设计这样的效果：当鼠标移到文本域时，文本域中显示“ 请输入用户名”，当文本域获得焦点时，之前的文字消失，用户则可以输入 用户名信息。这种效果是添加了文本域文字的行为
5.2 使用行为
制作交换图像 “交换图像”这一动作的特效是恢复交换的图像。当鼠标经过图像时，原图 像会变成另外一幅图像，否则恢复原图像。其实，一个交换图像是由两幅图 像组成的，包括原始图像和鼠标经过时显示的交换图像。
5.2 使用行为
制作交换图像 2.选择行为的事件。
<img src="images2/cp2.jpg" alt="" name="Image1" width="256" height="226" hspace="10" vspace="10" id="Image1" onmouseover="MM_swapImage('product', '','images2/cp2.jpg',1)" onmouseout="MM_swapImgRestore()" />
网页设计与制作5 网站规划和方案设计
第五单元：图层在图像设计中的应用
5.1.1 图层窗体
图层窗体可以完成大部分的图层操作任务，图层窗体如图所示。若默
认状态下没有展开图层窗体可点击菜单【窗体】|【图层】来显示窗体。
第五单元：图层在图像设计中的应用
5.1.2 图层菜单 图层菜单包括了图层的几乎所有功能，图层菜单功能可以等价为图
层窗体及在图层窗体鼠标右击出现的上下文菜单功能之和，系统图层菜单
如图所示。图层窗体选中某图层后，鼠标右击的上下文菜单如图所示。
第五单元：图层在图像设计中的应用
5.1.3 常用术语
在介绍如何使用图层之前，有一些常用的专业术语必须要掌握
1、通道：通道的概念比较复杂，实际上通道可以理解为图层中各种 单色分量的分布状态。换句话说，通道就好像从彩色图片中抽取出的单
色图片，如果抽取的是图片的红色成分，就称之为图片的“红色通道”
用菜单【图层】|【图层样式】| 【拷贝/粘贴图层样式】可以实 现同样的效果，不过后面这种方法只能用于拷贝图层的所有样式，
而不能用来拷贝某一个样式。如果你只需要复制一个样式，应该使
用拖动的方式。同样，要删除样式可以将其直接拖放到层面板下边 的垃圾桶图标上。 方法 4 ： 将样式面板中 Photoshop 预定义的样式，直接应用到 层面板中的当前图层上。 层面板左侧的 图标可以用来设置样式为可见或者不可见，如果 设置为“不可见”，样式的效果将不会显示在图片中，但是你可以 随时使其重新显示出来。
第五单元：图层在图像设计中的应用
5.2 图层样式的设置 图层样式是Photoshop中制作图片效果的重要手段之一，图层 样式可以运用于一幅图片中除背景层以外的任意一个层。如果要对背 景层使用层样式，可以在背景层上双击鼠标并为其另外命名。
网页设计与制作第5章
网页设计与制作
第5章 创建网页对象
图5.2.3 插入的占位图像
在发布站点之前，应该使用普通图像替换所有的占位图 像，方法如下： （1）双击占位图像。 （2）在弹出的“选择图像源文件”对话框中选择要替换 占位图像的普通图像。 （3）单击“确定”按钮，即可将占位图像替换掉，如图 5.2.4所示。
网页设计与制作
网页设计与制作
第5章 创建网页对象
5.2.1 图像的插入 根据图像在网页中作用的不同，可以将其分为普通图像、占 位图像和鼠标经过图像3种，下面分别介绍它们的插入方法。 1．插入普通图像 插入普通图像的方法如下： （1）将鼠标指针置于需要插入图像的位置。 （2）选择“插入”→“图像”命令，弹出 “选择图像源 文件”对话框，如图5.2.1所示，在该对话框中选择合适的图像， 单击“确定”按钮即可。
图5.1.7 不同样式下的文本
网页设计与制作
第5章 创建网页对象
4．设置文本的大小 文本的大小即文本的字号，在Dreamweaver 8中，字号用 数字来表示，值越大，所对应的文本就越大。设置文本大小的 操作步骤如下： （1）选中要设置大小的文本。 （2）在“属性”面板的“大小”下拉列表中选择所需的 字号即可。如图5.1.8所示为不同字号下的文本。
2．插入占位图像 占位图像实际上是一种图像占位符，在实际制作网页的 过程中，当网页的整体排版已经完成，但是需要插入的图像 还没有制作出来时，可以插入一个占位图像，来配合排版的 需要，等到图像制作出来后，再将占位的图像替换掉。插入 占位图像的方法如下： （1）将鼠标指针置于需要插入占位图像的位置。 （2）选择“插入”→“图像对象”→“图像占位符”命 令，弹出“图像占位符”对话框，如图5.2.2所示。
网页设计与制作
五章超链接ppt课件
第五章 超链接
14
5.3 超链接的设置
5.3.4 锚点链接
所谓锚点链接，是指同一页面中的不同位置链接，锚记链接主 要应用于文本内容较多的网页。 （1）将光标定位在要设置标记的位置，在【插入】面板的【常 用】模式中，选择【命名锚记】按钮，如下图所示。
第五章 超链接
15
5.3 超链接的设置
5.3.4 锚点链接
（2）在弹出的【命名锚记】对话框中键入该锚记的名称，如top， 然后单击【确定】按钮（注意：区分大小写），名为top的锚点即 被插入到文档中的相应的位置。如图所示。
第五章 超链接
16
5.3 超链接的设置
5.3.4 锚点链接
（3）选择要创建链接的文本或图像，例如选中“返回顶部”四个字， 在【属性】面板的“链接”文本框中，键入＃号和锚记名称“＃top”。 如图所示。
18
5.3 超链接的设置
5.3.5 下载链接与空链接
2. 空链接
空链接也叫无址链接，也就是没有链接对象的链接即是未指派
的链接，在空链接中，目标URL是用“#”来表示的。即在【属性】 板的链接输入框中录入#标记，如图所示。
第五章 超链接
19
5.3 超链接的设置
5.3.6 图像链接
方法与文本链接一样，选择“图像”对象，在【属性】板的链
• 站点根目录相对路径
提供了站点根文件夹到所链接页面文档的路径，与当前页面 文档位置无关。站点根目录相对路径以“/”开始，该符号表示站点 根文件夹，例如：/index/index.html。
第五章 超链接
5
5.2 超链接路径
• 相对路径
指某个文件（文件夹）相对于别外一个文件（文件夹）的相对位置。
网页设计与制作(第三版) (5)
发光属性设置
文本效果
返回 上一页 下一页
任务4 添加滤镜与制作动画
(3)制作文本图形的分布路径。
文本附加到路径
文本属性设置
返回 上一页 下一页
任务4 添加滤镜与制作动画
(4)开始制作动画。
“转化为元件”对话框
文本转化为元件
返回 上一页 下一页
任务4 添加滤镜与制作动画
(5)克隆其他图例。
克隆并旋转多个元件
网页设计与制作
第三版
项目四 利用Fireworks CS6制作网页
1
认识Fireworks CS6
2 制作网站LOGO中的各类字体
3 制作网站LOGO中的各类图形
4
添加滤镜与制作动画
任务1 认识Fireworks CS6
Fireworks CS6的主界面
工作区
工具条
“属性”面板
组合面板
返回 上一页 下一页
(11)弹出“交换图像”对话框，选择要替代的切片是电视屏幕所在的切片 monitor，并选择替代源为“图像文件”，然后单击文本框后面的浏览按钮， 打开资源管理器，选择一个动画文件(用实例1中的动画)后单击“确定”按钮， 如图所示。
切片的动作设置
替代图像设置
返回
上一页 下一页
任务4 添加滤镜与制作动画
返回 上一页 下一页
任务4 添加滤镜与制作动画
(10)这时闪字动画已经制作好，预览效果如图所示。 闪字动画预览效果
(11)闪字动画制作完成后，接下来就是将这个闪字图像保存为GIF动画格式。
返回 上一页 下一页
任务4 添加滤镜与制作动画
(1)启动Fireworks CS6，在起始界面中选择“文件”一“新建”命令，打开 “新建文档”对话框，设置画布宽度为300像素，画布高度为300像素，分辨率 为72像素/英寸，画布底色为白色，然后单击“确定”按钮，出现编辑文档。
网页设计与制作-自考-第五章HTML历年考题整理
网页设计与制作-自考-第五章HTML历年考题整理第五章HTML语言历年考题一、单选题1.在HTML语言中，标记</body>代表（）A.文件头开始B.文件头结束C.文件体开始D.文件体结束2.在HTML语言中，符号<pre>表示（）A.预排版标记B.文字效果标记C.特殊符号标记D.转行标记3.在HTML文件中，使一段文字按照原来的格式显示的标记是( )A.<form>B.<tr>C.<nobr>D.<pre>4.在HTML文件中，<u><／u>标记表示( )A.文本加粗B.文本加注底线C.文本斜体D.删除线5.在HTML语言中，<sup>代表( )A.倾斜标记B.文字闪烁标记C.下标标记D.上标标记6．在HTML语言中转行的标记是 ( )A．<p> B．<br> C．<title> D．<pre> 7．在HTML中，关于文字效果标记的说法错误的是( )A．可以使用font标记color属性指定文字颜色B．可以使用font标记size属性指定文字大小C．可以使用em标记指定文字的斜体效果D．可以使用cite标记指定粗体字体8.在HTML页面中，&；表示的符号是( )A.<B.>C.&D.’’9．在HTML语言中，有些符号由于被标记或标记的属性所占用，在HTML文本中用特殊符号表示，“<；”代表的符号是()A．& B．" C．> D．<10.在HTML标记中，关于<hx>的描述正确的是（）A.<hx>表示横线标记B.<hx>中的x表示1～6的数字标题字体标记有6种C.<hx>本身是一个独立的标记，表示新的行的开始D.<hx>必须与<／.hx>标记一起使用11.在HTML中，关于预排版标记<pre>…<／pre>叙述正确的是（）A.不需要重新排版的内容，可以用<pre>…<／pre>标记通知浏览器B.使用该标记时与<p>标记效果相同C.使用该标记与<quot>标记效果相同D.该标记已不在新版本中使用，取代它的是<quot>标记12.在HTML标记中，&表示的符号是（）A.<B.>C.＆D.@13.在HTML中，关于<br>的描述不正确．．．的是（）A. <br>是转行标记 B. <br>必须与</br>成对使用C. 与<br>相反的标记是<nobr> D. <br>与</br>之间的文字即使有回车符也不能自动换行14.下列标记中，字体最小的是( )A.〈H1〉B.〈H3〉C.〈H5〉D.〈H6〉15.不能．．使文字换行的标记是( )A.〈PRE〉B.〈BR〉C.〈P〉D.〈BLOCK〉16.对文字使用下划线的标记是( )A.〈X〉B.〈P〉C.〈U〉D.〈B〉17.上标标记是( )A.〈SUP〉B.〈SUB〉C.〈STRIKE〉D.〈BLINK〉18.BACKGROUND属性指定的是( )A.背景色B.背景音乐C.背景图片D.背景有无19.>表示的符号是( )A.<B.>C."D.&20.&表示的符号是( )A.<B.>C."D.&21.在HTML标记中，"表示的符号是（）A. QUOTB. &C. ＂D. < 22．下列标记不能．．改变文字颜色的是（）A．<FONT COLOR=RED> B．<FONT COLOR="RED">C．<FONT COLOR=#FF0000> D．<FONT COLOR=#12>23．<表示的符号是（）A．< B．> C．″D．&24．下列不是．．文字斜体标记的是（）A．<em> B．(embed) C．(i> D．(cite) 25．对文字使用删除线的标记是（）A．(d) B．(delete) C．(del) D．(strike)26.在HTML语言中，嵌入图片的标记是（）A.<caption>……</caption>B.<img src=¨URL¨>C.<embed src="URL">D.<a href="URL">字符串</a>27.在HTML中，符号清单的type属性值square表示( )A.实心圆点B.空心圆点C.实心方块D.空心方块28.在HTML文件中，单击一个链接，自动跳转到某网页的某一指定位置，此链接为( )A.邮件链接B.位置链接C.跳转链接D.书签链接29.下列标记属于单选按钮的是( )A.<input type="text">B.<input type="radio">C.<input type="button">D.<inputtype="checkbox">30.在表格标记中，cellpadding属性的作用是( )A.数据与表边框的距离B.表格边框的高度C.表格的扩展边距D.表格边框的宽度31.在HTML文件中，可以设置声音文件始终循环播放的是( )A.loop=″true″B. loopdelay=″true″C. loop=″no″D. loopdelay=″no″32.在HTML中，要定义一个书签应该使用的标记是( )A.<a target=″#object-name″>text<／a>B.<alink=″#object-name″>text<／a>C.<a name=″object-name″>text<／a>D.<a href=″#object-name″>text<／a>33.在HTML中，文本域的标记是( )A.<text…>B.<input type=text…>C.<input type=textarea…>D.<textarea…>34.在HTML中插入图片标记，对插入的图片进行文字说明，使用的属性是( )A.hspaceB.alignC.altD.src35．在HTML中，对于表格的标记，若单元格在水平方向上跨多个单元格，需使用的属性是 ( )A．valign B．colspan C．nowrapD．rowspan36．在HTML页面中插入图片时，关于图像边框属性的说法错误的是 ( )A．图像和文字之间的距离是可以调整的B．可以用vspace属性调整图像和文字之间的上下距离C．默认值为1D．单位为像素37．在HTML中，属于复选框标记的是 ( )A．<input type="text"> B．<input type="checkbox">C．<input type="password"> D．<input type="radio">38．符号清单包括()A．选项清单和说明式清单B．标号清单和说明式清单C．选项清单和标号清单D．标号清单和嵌套清单39．在HTML中，指定Wav声音文件在网页中播放次数的是()A．loop属性B．loopdelay属性C．start属性D．src属性40．在HTML中使用图像地图时，设置图像区域的形状为多边形的是()A．triangle B．rect C．poly D．circle 41．下列可以指定横向框架的是()A．<frame cols="20％，*"> B．<frameset cols="20％，*">C．<rows="20％，*"> D．<frameset rows="20％，*">42.关于HTML文档的描述正确的是（）A.HTML文档不是ASCII文件B.HTML语法虽然简单，但也不能脱离如FrontPage、DreamWeaver等其它工具C.在学习HTML之前，首先要掌握一门编程语言D.创建一个HTML文档，所需的最基本标记是<html>和<／html>43.在HTML中，定义表格标题行的标记是( )A.<caption>B.<th>C.<td>D.<tr>44.在HTML中，表格合并水平单元格的标记是（）A.<td align=列>B.<td align=行>C.<td colspan=3>D.<td rowspan=3>46.在HTML中，图片的超级链接<area>标记不包．．含．的属性是（）A.shapeB.img C．coords D.href47.关于HTML文档的描述正确的是（）A. <HTML>和</HTML>是最基本的两个标记B. 浏览器能够看到HTML文档的内容，主要原因是HTML文档是可执行的文档C. HTML文档可以是一门开发语言，可以编译成机器语言D. HTML文档是ASCII文件，无其它特殊功能48.在HTML中，说明表格行的标记是（）A. <caption>B. <tr>C. <th>D. <td>49.<input type =hidden name=mail value =＂liming@＂>的作用是（）A. 暂时不执行该域B. 隐藏该域名称，供需要时使用C. 在页面上不会显示这个元素，但是当发送信息时可以把名为mail的值传递给处理程序D. 隐藏电子邮件，以防被浏览者使用50.在HTML中，合并表格垂直单元格使用的标记是（）A. <td align=列>B. <td align=行>C. <td colspan=3>D. <td rowspan=3>51.在HTML中，要想输入多行文本，应使用的标记是（）A. <input type=text…>B. <input type=textarea…>C. <text…>D. <textarea…>52.在HTML中，关于图片链接<area>标记中，shape 属性的值不包含．．．（）A. triangleB. rectC. circleD. poly53.标号清单的数字形式属性中，TYPE=#格式中，不．包含．．的格式是( )A.1,2,3…B.A,B,C…C.i,ii,iii…D.甲,乙,丙…54.设置表格格内垂直对齐的HTML标记是( )A.〈td valign=?〉B.〈td colspan=#〉C.〈td rowspan=#〉D.〈td nowrap〉55.〈img src="name"align="left"〉意思是( )A.图像向左对齐B.图像向右对齐C.图像与底部对齐D.图像与顶部对齐56.创建一个滚动菜单的HTML代码是( )A.〈form〉〈/form〉B.〈select multiple name="NAME" size=?〉〈/select〉C.〈option〉D.〈select name="NAME"〉〈/select〉57.框架中“边缘宽度”的标记是( )A.〈img src="url" border=?〉B.〈frame marginheight=?〉C.〈frame marginwidth=?〉D.〈textarea wrap=off｜virtual｜physical〉〈/textarea〉58．不能．．使用CENTER属性的标记是（）A．<BODY> B．<TITLE> C．<P> D．<H3>5．<SUB>的标记是（）A．子串标记B．居中标记C．下标标记D．上标标记59．清单前的符号可由最外层加TYPE属性来控制，不属于．．．符号清单的标记属性是（）A．DISC B．CIRCLE C．TRIANGLED．SQUARE60．<CAPTION>标记设置的是表格的（）A．标题B．列标题C．带表框的表格D．居中且加粗的表格61．不属于．．．TD标记属性的是（）A．WIDTH B．ALIGN C．BACKCOLORD．NOWARP62．<TD COLSPAN=3>设置的是表格的（）A．宽度B．高度C．合并水平格D．边框63．在WEB页中插入图片使用的标记是（）A．<SRC> B．<IMG> C．<BGGROUND> D．<URL>64．下列标记不正确．．．的是（）A．<a href=″test1.htm″>test</a>B．<a href=″test1.htm#Nokia8850″>Nokia 8850</a> C．<a name=″test.htm″>test</a>D．<a href=″#test.htm″>test</a>65．在菜单标记中，默认选中的标记是下列哪一项？（）A．<img src=″url″border=?>B．<option selected>C．<isindex prompt=″* * *″>D．<textarea wrap=ff | virtual | physical >< /textarea > 66．下列特殊符号的HTML表示法正确的是（） A．B．C．D．67．超级链接应该使用的标记是（）A．(title) B．(body) C．(a) D．(head) 68．下列标记可以不成对出现的是（）A．(html)(／html) B．(p)(／p) C．(title)<／title) D．(body)(／body)69．不能．．在网页中嵌入的声音文件是（）A．后缀为．wav的文件 B．后缀为．mid的文件C．后缀为．au的文件 D．后缀为．md的文件70．设置背景音乐除了使用bgsound标记外，还可以使用的标记是（）A．<sound> B．<bgground) C．<embed) D．<gbmusic>71．<a name=“second”>text<／a>的作用是（）A．设置超级链接，链接到second页面上B．设置—个书签为second的标记C．设置—个链接，指向second文件D．设置第二个链接72．单图单向超级链接的格式是（）A．<a href=“URL”><img=“URL”>(／a)B．<a href=“URL”><URL=“URL”>(／a>C．<img src=“URL”>D．<img=“URL”>73．对于标记(input type=*)，其中t位置放上一个值，表示输入时显示*号。
网页设计与制作 自考 第五章HTML历年考题整理
第五章HTML语言历年考题一、单选题1.在HTML语言中，标记</body>代表（）A.文件头开始B.文件头结束C.文件体开始D.文件体结束2.在HTML语言中，符号<pre>表示（）A.预排版标记B.文字效果标记C.特殊符号标记D.转行标记3.在HTML文件中，使一段文字按照原来的格式显示的标记是( )A.<form>B.<tr>C.<nobr>D.<pre>4.在HTML文件中，<u><／u>标记表示( )A.文本加粗B.文本加注底线C.文本斜体D.删除线5.在HTML语言中，<sup>代表( )A.倾斜标记B.文字闪烁标记C.下标标记D.上标标记6．在HTML语言中转行的标记是 ( )A．<p> B．<br> C．<title> D．<pre>7．在HTML中，关于文字效果标记的说法错误的是 ( )A．可以使用font标记color属性指定文字颜色B．可以使用font标记size属性指定文字大小C．可以使用em标记指定文字的斜体效果D．可以使用cite标记指定粗体字体8.在HTML页面中，&；表示的符号是( )A.<B.>C.&D.’’9．在HTML语言中，有些符号由于被标记或标记的属性所占用，在HTML文本中用特殊符号表示，“<；”代表的符号是()A．& B．" C．> D．<10.在HTML标记中，关于<hx>的描述正确的是（）A.<hx>表示横线标记B.<hx>中的x表示1～6的数字标题字体标记有6种C.<hx>本身是一个独立的标记，表示新的行的开始D.<hx>必须与<／.hx>标记一起使用11.在HTML中，关于预排版标记<pre>…<／pre>叙述正确的是（）A.不需要重新排版的内容，可以用<pre>…<／pre>标记通知浏览器B.使用该标记时与<p>标记效果相同C.使用该标记与<quot>标记效果相同D.该标记已不在新版本中使用，取代它的是<quot>标记12.在HTML标记中，&表示的符号是（）A.<B.>C.＆D.@13.在HTML中，关于<br>的描述不正确．．．的是（）A. <br>是转行标记B. <br>必须与</br>成对使用C. 与<br>相反的标记是<nobr>D. <br>与</br>之间的文字即使有回车符也不能自动换行14.下列标记中，字体最小的是( )A.〈H1〉B.〈H3〉C.〈H5〉D.〈H6〉15.不能．．使文字换行的标记是( )A.〈PRE〉B.〈BR〉C.〈P〉D.〈BLOCK〉16.对文字使用下划线的标记是( )A.〈X〉B.〈P〉C.〈U〉D.〈B〉17.上标标记是( )A.〈SUP〉B.〈SUB〉C.〈STRIKE〉D.〈BLINK〉18.BACKGROUND属性指定的是( )A.背景色B.背景音乐C.背景图片D.背景有无19.>表示的符号是( )A.<B.>C."D.&20.&表示的符号是( )A.<B.>C."D.&21.在HTML标记中，"表示的符号是（）A. QUOTB. &C. ＂D. <22．下列标记不能．．改变文字颜色的是（）A．<FONT COLOR=RED> B．<FONT COLOR="RED">C．<FONT COLOR=#FF0000> D．<FONT COLOR=#12>23．<表示的符号是（）A．< B．> C．″D．&24．下列不是．．文字斜体标记的是（）A．<em> B．(embed) C．(i> D．(cite)25．对文字使用删除线的标记是（）A．(d) B．(delete) C．(del) D．(strike)26.在HTML语言中，嵌入图片的标记是（）A.<caption>……</caption>B.<img src=¨URL¨>C.<embed src="URL">D.<a href="URL">字符串</a>27.在HTML中，符号清单的type属性值square表示( )A.实心圆点B.空心圆点C.实心方块D.空心方块28.在HTML文件中，单击一个链接，自动跳转到某网页的某一指定位置，此链接为( )A.邮件链接B.位置链接C.跳转链接D.书签链接29.下列标记属于单选按钮的是( )A.<input type="text">B.<input type="radio">C.<input type="button">D.<input type="checkbox">30.在表格标记中，cellpadding属性的作用是( )A.数据与表边框的距离B.表格边框的高度C.表格的扩展边距D.表格边框的宽度31.在HTML文件中，可以设置声音文件始终循环播放的是( )A.loop=″true″B. loopdelay=″true″C. loop=″no″D. loopdelay=″no″32.在HTML中，要定义一个书签应该使用的标记是( )A.<a target=″#object-name″>text<／a>B.<a link=″#object-name″>text<／a>C.<a name=″object-name″>text<／a>D.<a href=″#object-name″>text<／a>33.在HTML中，文本域的标记是( )A.<text…>B.<input type=text…>C.<input type=textarea…>D.<textarea…>34.在HTML中插入图片标记，对插入的图片进行文字说明，使用的属性是( )A.hspaceB.alignC.altD.src35．在HTML中，对于表格的标记，若单元格在水平方向上跨多个单元格，需使用的属性是 ( ) A．valign B．colspan C．nowrap D．rowspan36．在HTML页面中插入图片时，关于图像边框属性的说法错误的是 ( )A．图像和文字之间的距离是可以调整的B．可以用vspace属性调整图像和文字之间的上下距离C．默认值为1D．单位为像素37．在HTML中，属于复选框标记的是 ( )A．<input type="text"> B．<input type="checkbox">C．<input type="password"> D．<input type="radio">38．符号清单包括()A．选项清单和说明式清单B．标号清单和说明式清单C．选项清单和标号清单D．标号清单和嵌套清单39．在HTML中，指定Wav声音文件在网页中播放次数的是()A．loop属性B．loopdelay属性C．start属性D．src属性40．在HTML中使用图像地图时，设置图像区域的形状为多边形的是()A．triangle B．rect C．poly D．circle41．下列可以指定横向框架的是()A．<frame cols="20％，*"> B．<frameset cols="20％，*">C．<rows="20％，*"> D．<frameset rows="20％，*">42.关于HTML文档的描述正确的是（）A.HTML文档不是ASCII文件B.HTML语法虽然简单，但也不能脱离如FrontPage、DreamWeaver等其它工具C.在学习HTML之前，首先要掌握一门编程语言D.创建一个HTML文档，所需的最基本标记是<html>和<／html>43.在HTML中，定义表格标题行的标记是( )A.<caption>B.<th>C.<td>D.<tr>44.在HTML中，表格合并水平单元格的标记是（）A.<td align=列>B.<td align=行>C.<td colspan=3>D.<td rowspan=3>46.在HTML中，图片的超级链接<area>标记不包．．含．的属性是（）A.shapeB.img C．coords D.href47.关于HTML文档的描述正确的是（）A. <HTML>和</HTML>是最基本的两个标记B. 浏览器能够看到HTML文档的内容，主要原因是HTML文档是可执行的文档C. HTML文档可以是一门开发语言，可以编译成机器语言D. HTML文档是ASCII文件，无其它特殊功能48.在HTML中，说明表格行的标记是（）A. <caption>B. <tr>C. <th>D. <td>49.<input type =hidden name=mail value =＂**************＂>的作用是（）A. 暂时不执行该域B. 隐藏该域名称，供需要时使用C. 在页面上不会显示这个元素，但是当发送信息时可以把名为mail的值传递给处理程序D. 隐藏电子邮件，以防被浏览者使用50.在HTML中，合并表格垂直单元格使用的标记是（）A. <td align=列>B. <td align=行>C. <td colspan=3>D. <td rowspan=3>51.在HTML中，要想输入多行文本，应使用的标记是（）A. <input type=text…>B. <input type=textarea…>C. <text…>D. <textarea…>52.在HTML中，关于图片链接<area>标记中，shape属性的值不包含．．．（）A. triangleB. rectC. circleD. poly53.标号清单的数字形式属性中，TYPE=#格式中，不包含．．．的格式是( )A.1,2,3…B.A,B,C…C.i,ii,iii…D.甲,乙,丙…54.设置表格格内垂直对齐的HTML标记是( )A.〈td valign=?〉B.〈td colspan=#〉C.〈td rowspan=#〉D.〈td nowrap〉55.〈img src="name"align="left"〉意思是( )A.图像向左对齐B.图像向右对齐C.图像与底部对齐D.图像与顶部对齐56.创建一个滚动菜单的HTML代码是( )A.〈form〉〈/form〉B.〈select multiple name="NAME" size=?〉〈/select〉C.〈option〉D.〈select name="NAME"〉〈/select〉57.框架中“边缘宽度”的标记是( )A.〈img src="url" border=?〉B.〈frame marginheight=?〉C.〈frame marginwidth=?〉D.〈textarea wrap=off｜virtual｜physical〉〈/textarea〉58．不能．．使用CENTER属性的标记是（）A．<BODY> B．<TITLE> C．<P> D．<H3>5．<SUB>的标记是（）A．子串标记B．居中标记C．下标标记D．上标标记59．清单前的符号可由最外层加TYPE属性来控制，不属于．．．符号清单的标记属性是（）A．DISC B．CIRCLE C．TRIANGLE D．SQUARE60．<CAPTION>标记设置的是表格的（）A．标题B．列标题C．带表框的表格D．居中且加粗的表格61．不属于．．．TD标记属性的是（）A．WIDTH B．ALIGN C．BACKCOLOR D．NOW ARP62．<TD COLSPAN=3>设置的是表格的（）A．宽度B．高度C．合并水平格D．边框63．在WEB页中插入图片使用的标记是（）A．<SRC> B．<IMG> C．<BGGROUND> D．<URL>64．下列标记不正确．．．的是（）A．<a href=″test1.htm″>test</a>B．<a href=″test1.htm#Nokia8850″>Nokia 8850</a>C．<a name=″test.htm″>test</a>D．<a href=″#test.htm″>test</a>65．在菜单标记中，默认选中的标记是下列哪一项？（）A．<img src=″url″border=?>B．<option selected>C．<isindex prompt=″* * *″>D．<textarea wrap=ff | virtual | physical >< /textarea >66．下列特殊符号的HTML表示法正确的是（）A．B．C．D．67．超级链接应该使用的标记是（）A．(title) B．(body) C．(a) D．(head)68．下列标记可以不成对出现的是（）A．(html)(／html) B．(p)(／p) C．(title)<／title) D．(body)(／body)69．不能．．在网页中嵌入的声音文件是（）A．后缀为．wav的文件 B．后缀为．mid的文件C．后缀为．au的文件 D．后缀为．md的文件70．设置背景音乐除了使用bgsound标记外，还可以使用的标记是（）A．<sound> B．<bgground) C．<embed) D．<gbmusic>71．<a name=“second”>text<／a>的作用是（）A．设置超级链接，链接到second页面上B．设置—个书签为second的标记C．设置—个链接，指向second文件D．设置第二个链接72．单图单向超级链接的格式是（）A．<a href=“URL”><img=“URL”>(／a)B．<a href=“URL”><URL=“URL”>(／a>C．<img src=“URL”>D．<img=“URL”>73．对于标记(input type=*)，其中t位置放上一个值，表示输入时显示*号。
信息技术《制作网站首页》教案
（2）网页布局方法：学生可能对表格布局与层布局的适用场景和优缺点理解不深。
举例：讲解表格布局适用于较为简单的页面布局，但灵活性较差；层布局适用于复杂、灵活的页面布局，但需要掌握CSS样式。
（3）网站首页设计技巧：学生在设计网站首页时可能缺乏创新和审美能力，难以把握整体风格和布局。
举例：提供一些设计技巧，如使用统一的色彩搭配、合理的空间布局、关注用户体验等。
四、教学流程
（一）导入新课（用时5分钟）
同学们，今天我们将要学习的是《制作网站首页》这一章节。在开始之前，我想先问大家一个问题：“你们在日常生活中是否访问过各种网站，有没有注意过它们的首页是如何设计的？”这个问题与我们将要学习的内容密切相关。通过这个问题，我希望能够引起大家的兴趣和好奇心，让我们一同探索制作网站首页的奥秘。
3.成果展示：每个小组将向全班展示他们的讨论成果和实验操作的结果。
（四）学生小组讨论（用时10分钟）
1.讨论主题：学生将围绕“网站首页在实际生活中的应用”这一主题展开讨论。他们将被鼓励提出自己的观点和想法，并与其他小组成员进行交流。
2.引导与启发：在讨论过程中，我将作为一个引导者，帮助学生发现问题、分析问题并解决问题。我会提出一些开放性的问题来启发他们的思考。
五、教学反思
在本次《制作网站首页》的教学过程中，我发现学生们对网页设计充满好奇，但同时也存在一些挑战。首先，对于HTML标签和属性的使用，虽然大部分学生能够跟随课堂进度，但仍有个别学生对此感到困惑。在今后的教学中，我需要更加耐心地辅导这部分学生，可以通过更多的实际操作和案例解析来帮助他们理解和记忆。
举例：介绍如何利用表格进行网页布局，以及如何使用层布局实现网页元素的自由排列。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
为便于操作，这里选择“高级”选项卡，进入如 图所示的界面。
在对话框中输入自己的“站点名称”，如本例取 名为“快乐家园”。再单击“本地根文件夹”文 本框右侧的“”按钮，确认站点文件夹的路径， 本例为“E:\我的网站”。
5.3.2 站点管理
单击“确定”按钮，完成站点的建立。同时， “文件”面板变成如图所示的状态。
5.1.2 网页设计与制作主要技术
音频视频处理技术 WEB编程技术
在网页制作中，有一类应用需求是以上 任何一种技术都无法替代的，如用户注册时 需要记录下用户名和密码，以便在下一次用 户登录时对其身份进行验证，或者记录下用 户的留言，供其他人查看和发表评论等等。 这一类需求都需要用到另一类非常重要的技 术——WEB编程技术。 目前，主流的WEB编程脚本语言有ASP、 PHP和JSP等。
5.3.2 站点管理
删除站点
对已创建的站点，若不想继续使用，则可将其删除。 具体操作步骤如下： 执行“站点”菜单下的“管理站点”命令，打开 如图所示的“管理站点”对话框。
选中要删除的站点名称， 单击“删除”按钮。 说明：从站点列表中删 除站点之后，有关该站 点的所有设臵信息将永 久丢失，但站点中的文 件和目录不会被删除。
5.3.2 站点管理
新建站点 【实例5-1】新建站 点“我的网站”
操作步骤如下： 在“文件”面板中单 击“管理站点”命令， 弹出“管理站点”对 话框，单击“新建” 按钮；或直接执行 “站点”菜单下的 “新建站点”命令， 都会打开如图所示的 “未命名站点1的站 点定义为”对话框。
5.3.2 站点管理
标题栏、菜单栏、工具栏、工作区、其他控制面板
5.3.2 站点管理
本地计算机：指浏览者所使用的计算机； 服务器：指用于提供Internet各种服务的计算机。对于 WWW浏览服务，服务器主要用于存储用户所浏览的 Web站点和页面； 本地计算机和服务器之间通过各种通信线路进行连接， 以实现相互通信。 站点：本质上是一个文件夹，网站的所有网页文件、用 到的图片、动画、媒体文件等都要存放在这个文件夹中。 其次，它还保存着所有链接信息。用户在网上浏览网站， 实质就是用浏览器打开存储于服务器上的站点内的文档。 因此，通常将存储于远程服务器上的站点和相关文档称 作远端站点。 利用Dreamweaver软件，用户可在本地计算机上模拟 服务器功能，建立一个本地站点，并完成站点的设计， 设计完毕后再上传到服务器上，形成远端站点。这样， 在整个网站制作过程中，本地计算机就同时充当了服务 器和客户端的双重角色。
EditPlus
对于习惯直接书写代码的设计者来说，EditPlus是一个不 错的选择。
5.3 Dreamweaver网页制作
Dreameaver 8界面 站点管理 用表格实现网页布局 文字操作 图像操作 超链接操作 多媒体的应用 CSS样式的应用 行为的使用
5.3.1 Dreameaver 8界面
5.1.1基本概念
主页 主页又叫首页，是用户进入一个网站时所看到的 第一个页面。主页的文件名通常为index或 default， 扩展名依不同网页类型而定。与之对应， 和主页相 链接的页面被称为“子页”。 超链接 超链接是WWW技术的核心，网页的出色之处就 在于能够把超链接嵌入其中，使用户能够从一个网页 方便地转移到另一个相关的网页。 URL URL是Uniform Resoure Locator的简写，被 译为“统一资源定位器”，主要用来定位网络信息资 源 的地址或本地系统要访问的文件。
提示：如果需要重新选择表格，可单击表格 的边线，或者直接单击“状态栏”中的 <table>标签。
5.3.3 用表格实现网页布局
确认表格处于选中状态后，在如图所示的 “表格属性”面板中，通过相关参数的设臵， 可对表格的属性做进一步调整。本例中设臵 “填充”、“间距”和“边框”均为0。
5.3.2 站点管理
新建网页
【实例5-3】新建首页“index.htm”
在站点名称上单击鼠标右键，从中选择“新建文件”命令， 出现如右图所示界面。 为该网页文件更改名字，本例的文件名为“index.htm”， 单击鼠标左键确认。 双击该网页文件名，进入编辑状态对该页面进行编辑。
5.3.3 用表格实现网页布局
5.1.3 网页设计与制作的主要原则
网站的物理结构
不要将所有文件都存放在根目录下。 对大型网站应按栏目内容建立相应的子目录，对小型网站可 按文件类型建立子目录，如“images”、“media”等，并根 据文件类型将其存放于相应的子目录中。 目录的层次不要太深，建议不要超过3层。 为文件夹和文件命名时，不要使用中文名称，可采用英文或 汉语拼音作为文件名，但要做到见名知意。
1、网页布局技术
层叠样式表 表格 框架
2、表格操作
【实例5-4】制作如图所示的外层表格
标题区域 导航区域 分隔区域 正文区域 版权区域
5.3.3 用表格实现网页布局
执行“插入”菜单下的“表格”命令，弹出“表 格”对话框。 在“表格”对话框中，设臵“行数”为5，“列 数”为2，“表格宽度”为790像素，单击“确 定”按钮，即可在网页中插入一个5行2列的表格。 此时，该表格应处于选中状态。
教学内容：
5.1 网页设计与制作概述
网页、网站、主页、超链接和URL基本概念 网页设计与制作主要技术 网页设计与制作的主要原则
5.1.1基本概念
网页 网页是一个用超文本标记语言（HTML）描述的 文档，它是一个纯文本文件。HTML语言通过各式各 样的标记对页面上的文字、图片、表格、声音等元素 进行描述，并通过浏览器对这些标记进行解释以生成 实际的页面。网页有多种类型，分别用不同的后缀名 加以区分，如常见的“.htm”静态网页，以“.cgi”、 “.asp”、“.php”、“.jsp”等结尾的动态网页等。 网站 简单来说，网站就是一组逻辑上具有整体意义的 多个网页的集合，也就是说网站设计者事先规划好网 站构架，然后再分别制作出不同的网页，并通过超链 接实现网页间的彼此连通，这样完整的构架就称为 “网站”。网站通常有一个主题，如个人网站、音乐 网 站、足球网站等。
5.3.2 站点管理
编辑建好站点之后，若需要更换站点目录或进行其他 修改，可以执行以下操作： 执行“站点”菜单下的“管理站点”命令；或者 单击“文件”面板中的“管理站点”命令，打开 如图所示的“管理站点”对话框。
5.3.2 站点管理
在“管理站点”对话框中选中要编辑的站点名称， 单击“编辑”按钮，可重新进入如图所示的界面， 再用新建站点的方法对站点进行重新设臵。
5.1.2 网页设计与制作主要技术
图形图像处理技术 目前，常用的图形图像处理工具如Adobe公司的 Photoshop、Macromedia 公司的Fireworks等， 熟练掌握其中一种工具，对于制作漂亮的网页将起到 事半功倍的作用。 动画制作技术 目前，除传统的GIF动画外，由Macromedia公 司推出的Flash动画由于其体积小巧、下载速度快、 色彩艳丽、而且支持交互性，正逐渐成为网络动画的 主流。用于制作GIF动画的常用软件如台湾Ulead公 司的Ulead GIF Animator、Adobe公司的 ImageReady等，用于制作Flash动画的软件当然首 推Macromedia Flash。
5.1.2 网页设计与制作主要技术
JavaScript JavaScript是由Netscape公司开发并随 Navigator2.0浏览器一起发布的。它是一种介于 Java与HTML之间、基于对象(Object)和事件驱动 (Event Driven)、并具有安全性能的脚本语 言。 JS通常定义在页面头部，成为HTML文档的一部 分。它是一种描述性语言，和HTML一样，用户可以 用任何一种文本编辑工具对它进行编辑，并在浏览器 中进行预览。同时，它也是一种解释性编程语言，即 当用户向服务器请求页面资源时，其源代码在发往客 户端前并不需经过编译，而是将文本格式的字符代码 随HTML一起发送给客户端，完全由客户端浏览器来 解释和执行。
色彩设计
5.1.3 网页设计与制作的主要原则
5 其他原则 字体和字号：在对网页中的文字进行属性设臵时，字 体和字号应尽量采用标准字体和字号。 表格：在使用表格进行网页布局时，不要使用过多的 嵌套表格，以免影响网页的下载速度。对于布局版面 较复杂的大型表格，应尽量按版块将其分解为多个表 格。 图像的应用：应尽量少用图像来对网页内容进行描述， 同时应将大的图片裁切为若干小图片，以免影响网页 的浏览速度。在使用图像时，应注意选择合适的图像 格式，目前常用的图片格式有“GIF”、“JPG”和 “PNG”三种。
5.1.2 网页设计与制作主要技术
HTML语言 HTML是Hypertext Markup Language的缩写，它是一 种描述文档结构的语言。一个HTML文件中包含了所有将要显示 在网页上的内容信息，其中也包括对浏览器的指示，如文字应 放在何处，显示模式如何等。 一个用HTML语言描述的网页，其基本结构如下： <!--网页的基本结构--> <html> <head> <title>第一个网页</title> </head> <body> <center><font size=4 color=blue>这是我的第一个网页 </font></center> </body> </html>