第5章 网页设计
第5章 网页布局
图5-11 单元格间距为8
返回本节
第5章 网页布局
5.2.1 在页面中插入表格
5．页眉设置 页眉设置其实就是为表格选择一个加粗文字的标题栏，这样对于 要求标题以默认粗体显示的表格，省去了每次手工执行加粗动作，提 高了工作效率。可将页眉设置为无、左部、顶部，或者左部和顶部同 时设置。如图5-12和图5-13就是分别将页眉设置在左部和顶部时的效 果。
5.2.3 表格标签
第5章 网页布局
5.2.4 在普通模式下用表格布局网页
表格是最常用的网页布局实现方式。在表格中，很容易实现表格行和 列的大小操作，从而方便地实现网页布局。本节通过实例介绍利用表格进 行网页布局的方法。 网页布局实例效果如图5-20。这个页面是由4个表格组成的，某些单 元格中又嵌套有表格。布局示意图如图5-21示。表1为网页的顶部，包括 网站的Logo及Banner；表2是网站导航条；表3是页面的主体区，包括左侧 的文章列表，右侧的其他链接和下部的搜索条，其中分别嵌套有小表格； 表4是网站的底部，是网站的版权栏。
第5章 网页布局
第5章 网页布局
网站的设计，不仅体现在具体内容与细节的设计制作上， 也需要对框架进行整体的把握。在进行网站设计时，需要对网 站的版面与布局进行一个整体性的规划。
本章主要内容：
网页布局类型 用表格进行网页布局
框架
用CSS进行网页布局
开 始
第5章 网页布局
5.1
网页布局类型述
5.2.2 设置表格属性
在页面中插入表格以后，可以在“属性”面板中对表格进行设置，除 了某些属性和“表格”对话框中的设置一样外，还可以设置表格的背景 颜色、边框颜色和对齐方式等属性。
图5-14 表格属性面板
网页设计与制作自考第五章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．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位置放上一个值，表示输入时显示*号。
网页设计教学教案
网页设计教学教案第一章：网页设计概述1.1 教学目标让学生了解网页设计的概念和重要性让学生掌握网页设计的基本原则和流程1.2 教学内容网页设计的定义和作用网页设计的基本原则（如用户体验、界面设计、内容组织等）网页设计的流程（如需求分析、设计稿制作、编码实现等）1.3 教学方法讲授法：讲解网页设计的概念和原则案例分析法：分析优秀网页设计案例，让学生了解设计要点实践操作法：让学生动手制作简单的网页设计稿1.4 教学评估课堂问答：检查学生对网页设计概念和原则的理解案例分析报告：评估学生对优秀网页设计案例的分析能力网页设计稿：检查学生的实际操作能力第二章：网页界面设计2.1 教学目标让学生掌握网页界面设计的基本原则和方法让学生了解网页界面设计的常见元素和布局方式2.2 教学内容网页界面设计的基本原则（如清晰性、一致性、美观性等）网页界面设计的常见元素（如文字、图片、按钮等）网页界面设计的布局方式（如网格布局、分区布局等）2.3 教学方法讲授法：讲解网页界面设计的原则和常见元素案例分析法：分析优秀网页界面设计案例，让学生了解设计要点实践操作法：让学生动手制作网页界面设计稿2.4 教学评估课堂问答：检查学生对网页界面设计原则和常见元素的理解案例分析报告：评估学生对优秀网页界面设计案例的分析能力网页界面设计稿：检查学生的实际操作能力第三章：网页布局与排版3.1 教学目标让学生掌握网页布局和排版的基本原则和方法让学生了解网页布局和排版的常见技术和工具3.2 教学内容网页布局和排版的基本原则（如清晰性、一致性、美观性等）网页布局和排版的常见技术（如HTML、CSS等）网页布局和排版的工具（如网页编辑器、设计软件等）3.3 教学方法讲授法：讲解网页布局和排版的原则和技术案例分析法：分析优秀网页布局和排版案例，让学生了解设计要点实践操作法：让学生动手制作网页布局和排版设计稿3.4 教学评估课堂问答：检查学生对网页布局和排版原则和技术的理解案例分析报告：评估学生对优秀网页布局和排版案例的分析能力网页布局和排版设计稿：检查学生的实际操作能力第四章：网页色彩与字体设计4.1 教学目标让学生掌握网页色彩和字体设计的基本原则和方法让学生了解网页色彩和字体设计的常见技巧和搭配规律4.2 教学内容网页色彩设计的基本原则（如对比度、饱和度、色调等）网页字体设计的基本原则（如易读性、一致性、美观性等）网页色彩和字体的常见搭配规律和技巧4.3 教学方法讲授法：讲解网页色彩和字体设计的原则和方法案例分析法：分析优秀网页色彩和字体设计案例，让学生了解设计要点实践操作法：让学生动手实践，进行网页色彩和字体设计4.4 教学评估课堂问答：检查学生对网页色彩和字体设计原则和方法的理解案例分析报告：评估学生对优秀网页色彩和字体设计案例的分析能力网页色彩和字体设计稿：检查学生的实际操作能力第五章：网页交互设计让学生了解网页交互设计的基本概念和重要性让学生掌握网页交互设计的常见技术和方法5.2 教学内容网页交互设计的定义和作用网页交互设计的常见技术（如JavaScript、jQuery等）网页交互设计的常见方法（如按钮、滑动门、下拉菜单等）5.3 教学方法讲授法：讲解网页交互设计的概念和技术案例分析法：分析优秀网页交互设计案例，让学生了解设计要点实践操作法：让学生动手实践，进行网页交互设计5.4 教学评估课堂问答：检查学生对网页交互设计概念和技术的理解案例第六章：网页素材的使用6.1 教学目标让学生了解网页素材的种类和作用让学生掌握网页素材的使用方法和技巧6.2 教学内容网页素材的种类（如图片、音频、视频等）网页素材的作用和选择原则网页素材的使用方法和技巧（如插入、优化、压缩等）讲授法：讲解网页素材的种类和作用案例分析法：分析优秀网页素材使用案例，让学生了解设计要点实践操作法：让学生动手实践，使用网页素材6.4 教学评估课堂问答：检查学生对网页素材种类和作用的理解案例分析报告：评估学生对优秀网页素材使用案例的分析能力网页设计稿：检查学生的实际操作能力第七章：网页代码基础7.1 教学目标让学生了解网页代码的种类和作用让学生掌握网页代码的基本编写方法和技巧7.2 教学内容网页代码的种类（如HTML、CSS、JavaScript等）网页代码的作用和编写原则网页代码的基本编写方法和技巧7.3 教学方法讲授法：讲解网页代码的种类和作用案例分析法：分析优秀网页代码编写案例，让学生了解设计要点实践操作法：让学生动手实践，编写网页代码7.4 教学评估课堂问答：检查学生对网页代码种类和作用的理解案例分析报告：评估学生对优秀网页代码编写案例的分析能力网页设计稿：检查学生的实际操作能力第八章：网页兼容性与优化8.1 教学目标让学生了解网页兼容性和优化的概念和重要性让学生掌握网页兼容性和优化的方法和技巧8.2 教学内容网页兼容性的概念和原因网页优化的概念和方法网页兼容性和优化的方法和技巧（如代码优化、图片优化等）8.3 教学方法讲授法：讲解网页兼容性和优化的概念和方法案例分析法：分析优秀网页兼容性和优化案例，让学生了解设计要点实践操作法：让学生动手实践，进行网页兼容性和优化8.4 教学评估课堂问答：检查学生对网页兼容性和优化概念和方法的理解案例分析报告：评估学生对优秀网页兼容性和优化案例的分析能力网页设计稿：检查学生的实际操作能力第九章：网页设计案例分析9.1 教学目标让学生了解网页设计案例的分析方法和流程让学生掌握分析优秀网页设计案例的技巧和要点9.2 教学内容网页设计案例分析的方法和流程分析优秀网页设计案例的技巧和要点网页设计案例的评析和总结9.3 教学方法讲授法：讲解网页设计案例分析的方法和流程案例分析法：分析优秀网页设计案例，让学生了解设计要点实践操作法：让学生动手实践，进行网页设计案例分析9.4 教学评估课堂问答：检查学生对网页设计案例分析方法和流程的理解案例分析报告：评估学生对优秀网页设计案例分析的技巧和要点的掌握情况网页设计稿：检查学生的实际操作能力第十章：网页设计项目实践10.1 教学目标让学生了解网页设计项目的流程和规范让学生掌握完成网页设计项目的方法和技巧10.2 教学内容网页设计项目的流程和规范完成网页设计项目的方法和技巧网页设计项目的评析和总结10.3 教学方法讲授法：讲解网页设计项目的流程和规范案例分析法：分析优秀网页设计项目，让学生了解设计要点实践操作法：让学生动手实践，完成网页设计项目10.4 教学评估课堂问答：检查学生对网页设计项目流程和规范的理解案例分析报告：评估学生对优秀网页设计项目分析的技巧和要点的掌握情况网页设计稿：检查学生的实际操作能力重点和难点解析1. 网页设计概述2. 网页界面设计补充和说明：介绍如何使用设计原则（如对齐、对比、重复和亲密性）来创建直观且吸引人的界面。
网页设计与制作案例教程(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 的显示结果是不一样的，它们无所谓谁对谁错。在工作中，建 议尽量少地使用浏览器间显示效果不一样的属性值。
《Dreamweaver网页设计》-第5章
站点根目录相对路径 站点根目录相对路径是指从站点的根文件夹到文档的路径。 当在处理使用多个服务器的 Web 站点，或者在使用承载 有多个不同站点的服务器时，则可能考虑使用这种类型的 路径。不过，如果您不太熟悉此类型的路径，最好使用上 面提到的相对路径。 站点根目录相对路径以一个正斜杠“/”开始，该正斜杠表示 站点根文件夹。比如，/inf/info.html 是文件的站点根目录 相对路径，该文件位于站点根文件夹的inf子文件夹中。 在某些 Web 站点中，需要经常在不同文件夹之间移动 HTML 文件，在这种情况下，站点根目录相对路径通常是 指定链接的最佳方法。当移动含有根目录相对链接的文档 时，不需要更改这些链接；当移动该HTML文件后，其相 关文件链接依然有效。 但是，如果移动或重命名根目录相对链接所链接的文档，即 使文档彼此之间的相对路径没有改变，仍必须更新这些链 接。例如，如果移动某个文件夹，则指向该文件夹中文件 的所有根目录相对链接都必须更新。
当要链接到与当前文档处于同一文件夹中的文档时，只需 输入文件名。比如要从 aboutus.htm 链接到 yewu.htm （两个文件在同一文件夹“bm”中，且目录深度相同）， 则其相对路径为yewu.htm。 当要链接到当前文档所在文件夹的子文件夹文档时，先要 有子文件夹名称，然后跟符号“/”，在加文件名。比如要 从 index.html 链接到 yewu.htm（两个文件在同一文件夹 “eshop”中，index.html处于父目录中，而yewu.htm处于 子目录bm中），则其相对路径为bm/yewu.htm。 反过来，当要链接到当前文档所在文件夹的父文件夹的文 档时，在文档名前要加“../”。比如要从yewu.htm链接到 index.html（两个文件在同一文件夹“eshop”中， index.html处于父目录中，而yewu.htm处于子目录bm中）， 则其相对路径为../ index.html。 当要链接到非同一目录的文档时，要先加“../”，后加文件 夹名再加链接到的文件名。比如要从 tupian.htm 链接到 aboutus.htm（两个文件在不同的目录中，tupian.htm在 “album”目录中，aboutus.htm在“bm”目录中），则其 相对路径为../bm/ aboutus.htm。
网页设计与开发第5章试卷及答案
《网页设计与开发第5章》试卷一、选择题1．下列哪一项是在新窗口中打开网页文档（）。
A．_selfB．_blankC．_topD．_parent答案: B2 .超链接是建立网站、网页主要元素之一。
若要建立在同一网页内的链接，应采用以下（）链接形式。
A．链接到一个E-mailB．书签式链接C．框架间链接D．链接到一个网站答案: B3 .若要在页面中创建一个图像超链接，要显示的图形为myhome.jpg，所链接的地址为，以下用法中正确的是（）。
A．<a href=">myhome.jpg</a>B．<a href=""><img src="myhome.jpg"></a>C．<img src="myhome.jpg"><a href =""></a>D．<a href =><img src="myhome.jpg">答案: B4.下面是相对路径的是（）。
A．B．ftp://219.153.40.150C．../a.htmlD．/a.html答案: C5．表示跳转到页面的”bn”锚点的代码是：（）A. <a link="#bn"> ... </a>B. <a href="bn"> ... </a>C. <a href="#bn"> ... </a>D. <a herf="bn"> ... </a>答案: C6. <a href="hello.html#top"> ... </a>,表示（）A．跳转到”hello.html”页面的顶部B．跳转到”hello.html”页面的”top”锚点C．跳转到”hello.html”页面的底部D．跳转到”hello.html”页面的文字”top”所在链接答案: B7. 表示新开一个窗口的超链接代码是（）A. <a href=URL target=_new>..</a>B. <a href=URL target=_self>..</a>C. <a href=URL target=_blank>..</a>D. <a href=URL target=_parent>..</a>答案: C8.在父窗口打开超链接的代码是（）A. <a href=URL target=_top>..</a>B. <a href=URL target=_parent>..</a>C. <a href=URL target=_blank>..</a>D. <a href=URL target=_self>..</a>答案: B9.html语言中，创建一个位于文档内部的靶位的标记是？A. <name="NAME">B. <name="NAME"></name>C. <a name="NAME"></a>D. <a name="NAME"答案: C10、要想在新的浏览器窗口中打开链接页面，应将链接对象的“目标（target）”属性设为（）。
140701第5章 HTML5网页表单设计(定稿)
网页设计技术实用教程--从基础到前沿第5章HTML5网页表单设计（字数3万）参考文献：我chp6；陆chp4；格式类似我P73；目录5.1表单简介及应用案例5.2 表单主体设计---form 标记5.2表单主体设计（form）包括新增元素5.3表单输入域设计---input标记5.3 表单设计的相关属性包括新增属性input元素type属性的新增类型：电子邮件类型；搜索类型；URL类型；电话号码类型；数字类型；范围类型；日期类型；周类型；月份类型；时间类型；日期与时间类型；本地日期与时间类型；颜色类型；新增属性：form属性；formaction；formmethod；placeholder；autofocus；list；autocomplete；5.4 文本区与列表选择框设计--- textarea、select标记5.5标签与按钮设计---label、button标记5.6表单控件分组设计--- fieldset、legend标记5.7 HTML5表单设计前沿内容知识技术5.7.1 新增与改进的表单元素；HTML5表单新增与改进的元素5.7.2 新增与改进的表单属性；HTML5表单新增与改进的属性5.7.3 input域控件的type属性的新增与改进5.4 表单设计示例如果例子多，需要单独成节，可增加该节例子（见陆p46-59）按功能划分：input元素使用示例；form等属性示例；表单验证示例……5.8 使用DWCS5进行网页表单设计实例（薛凯7.3.5；对5.1节的案例用工具制作、设计）5.9本章小结5.10进阶学习5.11 思考与实践第5章HTML5表单设计本章导读：上一章我们学习了、了解了……网页中链接的设计。
而在网站注册或购物时不可或缺的元素就是表单，本章就引导大家读者学习表单的设计。
首先，通过一个案例的介绍，让大家领略了解表单在网站中的重要魅力作用，同时在读者建立起了对表单有了大概的初步感性认识印象后；接着通过理论与示例结合的方式，、详细具体讲解介绍表单主体及其内部各种标记和属性的知识；同时，紧跟技术的发展，讲述介绍HTML5表单设计前沿内容；如果有该节则加入此句有了在掌握了表单设计的基本知识、技术的理论储备准备之后，我们通过几个综合示例讲解表单设计中各种元素的实用方法，完成理论向实践的转变。
第5章 网页制作软件 Dreamweaver CS5(实验教程)
5.2 Dreamweaver CS5站点管理
5.2.3 站点的发布（Windows 7旗舰版平台 ）
1. 安装Internet信息服务
单击“开始”菜单 “控制面板”命令，在窗体中选择“卸载程 2. Web服务器设置 序”，再单击窗体左侧“打开或关闭Windows功能”。 在弹出的“Windows 功能”对话框中，若“Internet信息服务”复 单击“开始”菜单 |“控制面板”命令，在窗体中选择“系统和安 3. IE浏览 选框已勾选，说明本机已安装该组件，否则选中此复选框，单击 全”，再单击窗体右侧“管理工具”，然后启动“ Internet信息服务 启动本机（ Web服务器）IE浏览器，在地址栏输入本机IP地址或 “确定”按钮，等待安装完成。 (IIS) 管理器”应用程序 localhost，进入网站的首页“index.html”
微视频5-2 演示
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
滚动字幕是用来显示滚动文本的，如网站的最新通知等。字幕 可以水平滚动，也可以上下滚动。 在Dreamweaver CS5中利用<marquee>标签插入字幕 。
选中要做字幕的 文本 ，单击菜单 栏“插入”|“标 签”命令，打开 “标签选择器” 对话框
• 网站与网页的创建与管理
• 网页制作的基本操作
• CSS样式表的创建与使用 • 网页的各种布局方式 • 行为的应用
5.1 Dreamweaver CS5概述
5.1.1 Dreamweaver的发展
Dreamweaver 1.0 Dreamweaver CS3
Dreamweaver 2.0
Dreamweaver 2.01 Dreamweaver 3 Macromedia Dreamweaver 4 时代 Dreamweaver 5 Dreamweaver MX Dreamweaver MX 2004 Dreamweaver 8.0 Adobe 时代
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
5.4 CSS的属性及其取值 CSS的属性及其取值
例5-6： <html> <head> <style > .font1{text.font1{text-decoration: line-through } line.font2{line.font2{line-height:10%} .font3{ letter-spacing:10px } letter</style> </head> <body> <p class=font1>这段文字由“.font2”样式定义为使用删除线字体。 class=font1>这段文字由 .font2”样式定义为使用删除线字体 这段文字由“ 样式定义为使用删除线字体。 <p class=font2>这段文字由“.font1”样式定义为行间距等于文字 class=font2>这段文字由“.font1”样式定义为行间距等于文字 这段文字由 大小的10%。 大小的10%。 <p class=font3>这段文字由“.font3”样式定义为字符间距等于 class=font3>这段文字由 .font3”样式定义为字符间距等于 这段文字由“ 10px。 10px。 </body> </html>
5.4 CSS的属性及其取值 CSS的属性及其取值
例5-6的运行效果
5.4 CSS的属性及其取值 CSS的属性及其取值
5.4.3 颜色和背景属性 该属性包含网页中元素的颜色及背景等。如表5 该属性包含网页中元素的颜色及背景等。如表5-3。
5.4 CSS的属性及其取值 CSS的属性及其取值
例5-7： <html> <head> <style > .title{background.title{background-color:#e6e600; font-family:楷体 font-family:楷体 _gb2312;font_gb2312;font-size:30pt} .backimg{background-image:url(Blue.jpg);font.backimg{background-image:url(Blue.jpg);fontweight:900} </style> </head> <body> <p class=title>题目 class=title>题目 <p class=backimg>这段文字由“backimg”样式定义为使用 class=backimg>这段文字由 backimg”样式定义为使用 这段文字由“ 图像“Blue.jpg”作为文字背景 作为文字背景。 图像“Blue.jpg”作为文字背景。 </body> </html>
5.1 CSS的基本概念 CSS的基本概念
5.1.2 层叠式样式表的类型
CSS 的每一条定义都有如下的形式: 的每一条定义都有如下的形式: selector {property1:value1; property2:value2; ...} 其中：selector称为选择器 property:value是属 称为选择器， 其中：selector称为选择器，property:value是属 性和属性的取值。 性和属性的取值。 选择器selector有三种类型 选择器selector有三种类型: 有三种类型:
5.1 CSS的基本概念 CSS的基本概念
5.1.2.1 为某个具体标签定义样式 是为HTML 的标签定义样式, 等等。 是为HTML 的标签定义样式, 比如 P, BODY, A 等等。如： h1{ background-color:#336699; color:red } backgroundhtml文件中应用时的形式为 <h1>大家好 文件中应用时的形式为： 大家好<h1> 在html文件中应用时的形式为： <h1>大家好<h1> 显示的效果是“大家好”使用了背景颜色“#336699”和文字颜色 显示的效果是“大家好”使用了背景颜色“#336699”和文字颜色 red”。 “red”。 5.1.2.2 为一类标签定义样式 又称为“class”类选择器 如定义样式： 类选择器。 又称为“class”类选择器。如定义样式： .text{ font-family:隶书; color:#ff00ff }，定义了类名为“text” font-family:隶书 隶书; }，定义了类名为“ 的样式。 的样式。 html文件中应用时的形式为 文件中应用时的形式为： class=text>大家好 大家好</p> 在html文件中应用时的形式为：<p class=text>大家好</p> 显示的效果是“大家好”使用了字体“隶书” 显示的效果是“大家好”使用了字体“隶书”和文字颜色 #ff00ff”。 “#ff00ff”。 5.1.2.3 为标签设定唯一可用的样式 又称为“ID”选择器 如定义样式： 选择器。 又称为“ID”选择器。如定义样式： #tdcolor{ color:red }，定义了ID为“tdcolor”的样式。 }，定义了ID为 tdcolor”的样式 的样式。 html文件中应用时的形式为 文件中应用时的形式为： id=tdcolor>大家好 大家好</td> 在html文件中应用时的形式为：<td id=tdcolor>大家好</td>
例5-5： <html> <head> <style > .font1{font-size:20;font-variant:small.font1{font-size:20;font-variant:small-caps} .font2{font-family:楷体 .font2{font-family:楷体_gb2312;} 楷体_gb2312;} .font3{font-style:italic;font.font3{font-style:italic;font-weight:bold} </style> </head> <body> <p class=font1>这段文字由“.font1”样式定义为20像素大 class=font1>这段文字由 .font1”样式定义为 像素大 这段文字由“ 样式定义为20 并将小写字母转换为大写。 小，并将小写字母转换为大写。 <p class=font2>这段文字由“.font2”样式定义为楷体字体。 class=font2>这段文字由 .font2”样式定义为楷体字体 这段文字由“ 样式定义为楷体字体。 <p class=font3>这段文字由“.font3”样式定义为斜体并加 class=font3>这段文字由 .font3”样式定义为斜体并加 这段文字由“ 粗。 </body> </html>
续
5.4 CSS的属性及其取值 CSS的属性及其取值
例5-8： <html> <head> <style > .title{border.title{border-style:double; border-color:red;borderborder-color:red;borderwidth:10;fontwidth:10;font-size:20pt} .backimg{border.backimg{border-style:dotted; border-color:red;border-width:5; border-color:red;borderbackground-image:url(blue.gif);fontbackground-image:url(blue.gif);font-weight:900} </style> </head> <body> <p class=title>使用双线边框的题目 class=title>使用双线边框的题目 <p class=backimg>这段文字由“backimg”样式定义为使用图像 class=backimg>这段文字由 backimg”样式定义为使用图像 这段文字由“ blue.gif”作为文字背景 并且使用虚线边框。 作为文字背景， “blue.gif”作为文字背景，并且使用虚线边框。 </body> </html>
例5-1的运行效果 的运行效果
5.4 CSS的属性及其取值 CSS的属性及其取值
5.4.1 字体属性 字体属性主要包含字体名称、字体风格、字体加粗、 字体属性主要包含字体名称、字体风格、字体加粗、 大小等，如表5 所示。 大小等，如表5-1所示。
5.4 CSS的属性及其取值 CSS的属性及其取值
5.1 CSS的基本概念 基本概念
5.1.1 了解层叠样式表 CSS（ CSS（Cascading Style Sheets）是层叠样 Sheets） 式表的简称 的简称。 式表的简称。
CSS是一系列格式设置规则 CSS是一系列格式设置规则，可以非常灵活并更 是一系列格式设置规则， 好地控制具体的页面外观， 好地控制具体的页面外观，从精确的布局定位到 特定的字体和样式。 特定的字体和样式。 将内容与表现形式分开。 将内容与表现形式分开。
5.4 CSS的属性及其取值 CSS的属性及其取值
例5-5的运行效果
5.4 CSS的属性及其取值 CSS的属性及其取值
5.4.2 文本属性 字体属性用于控制网页文本的段落格式效果。 字体属性用于控制网页文本的段落格式效果。主要包含字母 间隔、文字修饰、文本排列、缩进、大小等。如表5 所示。 间隔、文字修饰、文本排列、缩进、大小等。如表5-2所示。