网页设计与制作5
网页设计与制作实用教程单元5 布局与美化网页
【教学导航】
（1）学会使用表格布局页面 （2）学会使用AP Div布局页面 （3）学会使用使用Div+CSS结构布局页面 （4）学会创建样式文件、设计页面的布局结构、定义页面的布 教学目标 局样式 （5）学会利用CSS样式美化页面元素 （6）学会插入Div标签对网页的页面进行布局 （7）学会插入或绘制AP Div，并合理地设置AP Div的属性 教学方法 任务驱动法、分组讨论法、理论实践一体化、讲练结合 课时建议 8课时（包含考核评价）
【任务5-3】使用Div+CSS布局 与美化网页 【任务描述】
（1）创建外部样式文件0503global.css，在该样 式文件中定义必要的CSS样式。 （2）创建外部样式文件0503pages.css，在该样 式文件中定义必要的CSS样式。 （3）创建网页文档0503.html，该网页主体结构 主要应用Div+CSS进行布局，局部结构应用了 定义列表、项目列表和段落结构进行布局。网 页0503.html还应用了CSS样式对文字、图片、 超链接和表单控件进行美化。 网页0503.html的浏览效果如图5-8所示。
3．创建网页文档0502.html
创建网页文档0502.html，保存在文件夹“5-2” 中，该网页主体结构主要应用AP Div、绝对定位和 相对定位进行布局，局部结构应用了Div+CSS和定 义列表、项目列表进行布局。 还应用了CSS样式对文字、图片、超链接和列 表进行美化。 该网页为左右结构，通过绝对定位方式实现左 右布局。
（1）插入Div标签page_wrapper （2）插入Div标签pages_nav （3）插入AP元素l_sidebar （4）插入AP元素r_content （5）插入多个Div标签和AP元素
网页设计与制作案例教程(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 的显示结果是不一样的，它们无所谓谁对谁错。在工作中，建 议尽量少地使用浏览器间显示效果不一样的属性值。
南财-网页设计与制作练习5(附答案)
南京财经大学成人高等教育网络课程网页设计与制作单元练习5 ------------------------------------------------------------------------------------------------------------------------一、选择题1、目前在Internet上应用最为广泛的服务是（）A、FTP服务B、WWW服务C、Telnet服务D、Gopher服务2、在域名系统中，域名采用（）A、树型命名机制B、星型命名机制C、层次型命名机制D、网状型命名机制3、下面说法错误的是（）A、规划目录结构时，应该在每个主目录下都建立独立的images目录B、在制作站点时应突出主题色C、人们通常所说的颜色，其实指的就是色相D、为了使站点目录明确，应该采用中文目录4、一般情况下，下列哪一种资源不适合作为商业网站服务（）。
A、租用机房B、虚拟主机C、托管主机D、免费主页空间5、下述对虚拟主机描述哪个正确（）。
A、每台虚拟主机都有独立域名，但只有共享的IP地址B、每台虚拟主机都有独立或共享的域名、独立IP地址C、每台虚拟主机都只有共享域名，独立IP地址、或者共享的IP地址D、每台虚拟主机都有独立域名，独立IP地址、或者共享的IP地址6、下列关于域名系统的说法正确的是（）A、域名转换成主机名B、主机名转换成域名C、主机名转换成IP地址D、域名转换成IP地址7、HTTP协议是（）A、远程登录协议B、邮件协议C、超文本传输协议D、文件传输协议8、对远程服务器上的文件进行维护时，通常采用的手段是（）A、POP3B、FTPC、SMTPD、Gopher9、下列Web服务器上的目录权限级别中，最安全的权限级别是（）A、读取B、执行C、脚本D、写入10、关于上传网页的说法正确的是（）。
A、上传网页需要一个存放网页的空间是指要在你的微机中创建一块区域存放网页。
B、网页制作完毕需要多方面进行检查确保无误C、上传的网页需要进行人工排序D、第一次上传网页，只上传主页即可，其他内容不用上传11、关于上传网页的说法正确的是（）。
自考网页设计与制作试卷及答案(五)
自考网页设计与制作试卷及答案（五）课程代码：00900一、单项选择题（本大题共25小题，每小题1分，共25分）在每小题列出的四个备选项中只有一个是符合题目要求的，请将其代码填写在题后的括号内。
错选、多选或未选均无分。
1．运行在互联网上用于电子邮件发送的协议是( )A．HTTP B．FTPC．SMTP D．POP32．个人网站的基本风格为( )A．非商业式、商业式B．信息发布式、个人展示形式C．单一标题形式、个人介绍形式D．主题图形式、信息发布式及介于两者之间的形式3．设计一个网页时首先要考虑的问题是( )A．页面的色彩B．页面的重心平衡C．页面的文本D．页面的构图4．选择Photoshop滤镜Distort中的Zigzag，实现的效果是整个画面做成了( )A．水纹效果B．凸凹感的墙纸效果C．隔着毛玻璃的效果 D．彩色铅笔描绘的效果5．在Photoshop中，把工具箱和调色板隐藏起来使用的快捷键是( )A．Alt B．ShiftC．Ctrl D．Tab6．在HTML语言中，有些符号由于被标记或标记的属性所占用，在HTML文本中用特殊符号表示，“<；”代表的符号是( )A．& B．"C．> D．<7．TCP协议工作在OSI模型中的( )A．会话层B．传输层C．数据链路层D．网络层8．在HTML中，标记<pre>是( )A．文字效果标记B．转行标记C．预排版标记D．标题标记9．符号清单包括( )A．选项清单和说明式清单 B．标号清单和说明式清单C．选项清单和标号清单D．标号清单和嵌套清单10．客户机可向服务器按MIME类型发送和接收信息，要求服务器接收消息的方式是( )A．SMTP B．GETC．HEAD D．POST11．在HTML中，指定Wav声音文件在网页中播放次数的是( )A．loop属性B．loopdelay属性C．start属性D．src属性12．在HTML中使用图像地图时，设置图像区域的形状为多边形的是( ) A．triangle B．rectC．poly D．circle13．下列可以指定横向框架的是( )A．<frame cols="20％，*"> B．<frameset cols="20％，*">C．<rows="20％，*"> D．<frameset rows="20％，*">14．当离开当前的网页时激发的事件为( )A．Focus B．UnLoadC．MouseOver D．Blur15．在HTML文档头部中嵌入JavaScript，应该使用的标记是( ) A．<Body></Body> B．<Script></Script>C．<Head></Head> D．<Js></Js>16．DHTML技术的核心是( )A．CSS B．HTMLC．SCRIPT D．DOM17．在CSS的BOX模型属性中，padding属性数值表示四个方向的填充值的顺序应为( )A．顶、右、底、左B．顶、左、底、右C．左、右、顶、底D．顶、底、左、右18．在CSS中，ID选择符在定义的前面需要的指示符是( )A．＆B．*C．# D．!19．使用FrontPage时，如果要检查网页的超链接是否正确有效，可以使用的视图是( )A．导航视图B．超链接视图C．报表视图D．网页视图20．在Dreamweaver中，若要在WEB浏览器中预览当前页，使用的快捷键是( ) A．Ctrl+P B．Alt+F4C．F12 D．Shift+F421．在Fireworks中颜色取样时，需要使用的工具是( )A．魔术棒B．滴管C．橡皮图章D．套索22．用Fireworks制作动画最简单的方法是( )A．手工绘制B．合并图像形成C．使用元件生成D．编写脚本生成23．在Fireworks中，利用线形工具画出45度直线需按( )A．Shift键B．Ctrl键C．Alt键D．Tab键24．在Flash中有两类动画，其中一类是帧－帧动画，实现的方法是( ) A．空白帧内插的方法 B．每个帧都作为关键帧的方法C．关键帧内插的方法 D．洋葱皮内插的方法25．HTML描述的是数据的显示方式，而XML描述的是数据的( )A．格式B．本身C．规则D．作用二、多项选择题（本大题共5小题，每小题2分，共10分）在每小题列出的五个备选项中至少有两个是符合题目要求的，请将其代码填写在题后的括号内。
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()" />
审定时间《网页设计与制作HTML5》课程教学大纲
《网页设计与制作（HTML5）》课程教学大纲课程代码适用专业计算机信息管理课程类型职业技能课学分数 4学时数64第一部分总纲一、课程性质、教学目的1．课程性质本课程是计算机信息管理专业的职业技能课。
课程主要针对行业企业在网络媒体方面的网页设计与制作员、网站开发与管理员岗位。
通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
培养学生具有诚实、守信，善于沟通和合作的团队合作能力，为从事网络媒体网页制作工作奠定良好的基础。
2．教学目的通过本课程的学习，学生可以在网络公司、软件公司、广告公司，企事业单位的制作部、技术部、信息部、网络中心等部门，担任网页设计师、网站编辑、B/S模式软件界面设计师、网站维护员等职务，从事静态网站制作、网站内容制作与维护、动态网站界面设计与制作、B/S模式软件界面设计与制作项目工作。
3．前导课程与后续课程前导课程：无后续课程：网络程序设计、移动互联网软件开发、毕业综合实践。
二、推荐教材及主要参考资料1. 传智播客高教产品研发部，《HTML5+CSS3网页设计基础教程》，人民邮电出版社，2016年3月。
2. 方锦明，《网页设计与制作》，中国科学技术出版社，2007年1月。
3. 郭子明，《网页设计与制作技能案例教程》，印刷工业出版社，2011年9月。
三、大纲执行说明1.总学时64学时，理论32学时，实践32学时；2．如无特殊情况，应严格按照教学大纲的时间、内容、课时要求及有关规定执行，如遇特殊情况，可作适当调整。
第二部分理论教学一、教学基本要求通过学习《网页设计与制作（HTML5）》这门课程，使学生掌握网页设计和制作的基本技能，能够制作企事业单位的静态网站，具备网站的策划、设计和制作能力。
具体教学要求如下：1.熟悉HTML5基本语法，掌握HTML5语法新特性。
2.掌握HTML5相关标记及属性，能够制作简单的网页页面。
网页设计与制作5 网站规划和方案设计
第五单元：图层在图像设计中的应用
5.1.1 图层窗体
图层窗体可以完成大部分的图层操作任务，图层窗体如图所示。若默
认状态下没有展开图层窗体可点击菜单【窗体】|【图层】来显示窗体。
第五单元：图层在图像设计中的应用
5.1.2 图层菜单 图层菜单包括了图层的几乎所有功能，图层菜单功能可以等价为图
层窗体及在图层窗体鼠标右击出现的上下文菜单功能之和，系统图层菜单
如图所示。图层窗体选中某图层后，鼠标右击的上下文菜单如图所示。
第五单元：图层在图像设计中的应用
5.1.3 常用术语
在介绍如何使用图层之前，有一些常用的专业术语必须要掌握
1、通道：通道的概念比较复杂，实际上通道可以理解为图层中各种 单色分量的分布状态。换句话说，通道就好像从彩色图片中抽取出的单
色图片，如果抽取的是图片的红色成分，就称之为图片的“红色通道”
用菜单【图层】|【图层样式】| 【拷贝/粘贴图层样式】可以实 现同样的效果，不过后面这种方法只能用于拷贝图层的所有样式，
而不能用来拷贝某一个样式。如果你只需要复制一个样式，应该使
用拖动的方式。同样，要删除样式可以将其直接拖放到层面板下边 的垃圾桶图标上。 方法 4 ： 将样式面板中 Photoshop 预定义的样式，直接应用到 层面板中的当前图层上。 层面板左侧的 图标可以用来设置样式为可见或者不可见，如果 设置为“不可见”，样式的效果将不会显示在图片中，但是你可以 随时使其重新显示出来。
第五单元：图层在图像设计中的应用
5.2 图层样式的设置 图层样式是Photoshop中制作图片效果的重要手段之一，图层 样式可以运用于一幅图片中除背景层以外的任意一个层。如果要对背 景层使用层样式，可以在背景层上双击鼠标并为其另外命名。
网页设计与制作-自考-第五章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位置放上一个值，表示输入时显示*号。
《网页设计与制作》模块5图文模板
模块5：HTML+CSS网页样式
学习导 入 学习目 标
任任 务任1 务任2 务任3 务任4 务任5 务任6 务任7 务任8 务任9 务任 务 1务0 11 12
○任务实施 一、必备知识 常用的标签 H1~H6标题标签（H1最大，H6最小） <p> </p> 段落标签 <br> 回车换行标签，单独出现 <title> </title> 网页标题标签 <hr > 水平线，单独出现 <img> 图像标签 <a> </a> 超链接标签
模块5：HTML+CSS网页样式
任务1
学习导 入 学习目 标
任任 务任1 务任2 务任3 务任4 务任5 务任6 务任7 务任8 务任9 务任 务 1务0 11 12
任务实施
一、必备知识
1.网页与网站
浏览网页时在浏览器中看到的一个个页面就是网页，而多个相 关的网页的集合就构成了一个网站。网址：用于定位某个网站某 个页面的一串字符，如： /nba.shtml
○任务描述 小花学习了一段时间的HTML语言，发现代码很难记，希望
能够学习一种可视化的网页开发工具减少她学习的难度。 ○任务目标
了解Dreamweaver CS5界面的构成，能在Dreamweaver CS5中 输入一些简单的代码效果如图5-10所示。
图510
模块5：HTML+CSS网页样式
任务3
标签：是HTML语言的基本部分。标签总是成对出现，每一 对标签一般都有一个开始的标记（如<body>），也有一个结束 的标记（如</body>）。标签的标记要用一对尖括号括起来，并 且结束的标记总是在开始的标记前加一个斜杠。 <html>标签：每一个html文档都是从<html>开始，结束于 <./html>。
网页设计与制作实践 第5版 模块1 创建站点与制作商品简介网页
【任务1-1-1】启动Dreamweaver与初识其工作界面
7
面 板 组 ： Dreamweaver 包 “文件”面板：网站是多个网页文件、图像文件、程序文件等有机联 括多个面板，这些面板都有 系的整体，要有效地管理这些文件及其联系，需要一个有效的工具， 不同的功能，将它们叠加在 “文件”面板便是这样的工具。 一起便形成了面板组。
5
Dreamweaver工作界面的布局与组成如图所示。
标题栏：显示网页的标题和网页文档 的存储位置。
菜 单 栏 ： Dreamweaver 的 菜 单 栏 包 含10类菜单：“文件”“编辑”“查 看”“插入”“修改”“格式”“命 令”“站点”“窗口”和“帮助”。
“插入”面板：显示“插入”面板的 方法是：选择“窗口”→“插入”， 在 Dreamweaver 主 界 面 的 右 侧 将 显 示“插入”面板。
HTML5+CSS3网页设计与制作实践（项目式）（第5版）
模块1 创建站点与制作商品简介网页
制作网页之前，应该先在本地计算机磁盘上建立一个站点，使用站点对网页文档、样式 表文件、网页素材进行统一管理。
1 学会新建网页文档和设置网页的页面属性
学习目标
2 学会在网页中插入空格、文本换行符和特殊字符
熟悉浏览器窗口的基本组成元素和网页的基本组成 3
浏览器是用户浏览网页的软件，支持多种具有交互性的网络服 务，是人们通过网络进行交流的主要工具。目前流行的浏览器为 Chrome、Firefox等。
【任务1-1-2】认识浏览器窗口的基本组成和网页的基本组成元素 9
浏览器窗口主要由网页标题、菜单栏、命令栏、地址栏和网页窗口等部分组成。Internet Explorer（简称IE）浏览器窗口如图1所示，Chrome浏览器窗口如图2所示。
网页设计与制作实践 第5版 模块6 模板应用与制作商品推荐网页
【任务6-1-1】规划与设计商品推荐网页的布局结构
4
【任务描述】
划商品推荐网页0601.html的布局结构，并绘制各组成部分的页面内容分布示意图。 编写商品推荐网页0601.html布局结构对应的HTML代码。 编写商品推荐网页0601.html布局结构对应的CSS代码。
【任务实施】
规划与设计商品推荐网页0601.html 的布局结构
【任务6-1-2】制作用于生成网页模板的网页0601.html
7
【任务描述】
制作用于生成网页模板的网页 0601.html，其浏览效果如图所示。
【任务6-1-2】制作用于生成网页模板的网页0601.html
8
【任务实施】
布局与美化商品推荐网页的左侧列表内容
➢ 网页左侧的结构与网页0501.html左侧的一致，从上至下依次为设备类型列表、“同类推荐”列 表和“最近浏览的商品”列表。
实现商品推荐网页0601.html右侧的商品广告
➢ 在网页0601.html中编写HTML代码与插入图片，实现商品推荐网页0601.html右侧的商品广告， 对应的HTML代码如表所示。
【任务6-1-2】制作用于生成网页模板的网页0601.html
9
实现商品推荐网页0601.html右侧的“热销推荐”列表
class="tjcontent"></div>”“<div class="content"></div>”定义为可编辑区域。 将 区 域 “ <div class="picrecommend"></div>” 的 标 签 “ background” 和 区 域
网页设计与制作实践 第5版 模块3 表格应用与制作购物车网页
【任务3-1-2】使用表格制作购物车网页
10
保存网页文档与浏览网页效果
保 存 网 页 文 档 0301.html ， 然 后 按 “F12”键浏览该网页，其浏览效果如 图所示。
任务3-2 制作触屏版购物车网页0302.html
【任务描述】 制 作 触 屏 版 购 物 车 网 页 0302.html ， 其
HTML5+CSS3网页设计与制作实践（项目式）（第5版）
学 习 进 步！
3 学会正确地设置表格中行和列的属性
学习目标
4 学会正确地设置表格、单元格的背景图像和背景颜色 5 学会正确地在表格中输入文字、插入图像并定位
任务3-1 制作电脑版购物车网页0301.html
【任务描述】 制作电脑版购物车网页
0301.html，其浏览效果如 图所示。
【任务3-1-1】在网页中插入与设置表格
【任务3-1-1】在网页中插入与设置表格
6
在网页030101.html中插入一个9行4列的表格 在Dreamweaver主界面中，选择“插入”→“表格”，
弹出一个“表格”对话框。
查看9行4列表格的属性 将鼠标指针指向表格边框线，出现红色外框线，鼠标
指针变为 形状时，单击即可选中整个表格。选中整个表格 后，查看表格的属性设置。
创建网页文档0302.html与链接外部样式表 在文件夹“0302”中创建网页文档0302.html，切换到网页文档0302.html的“代码”视
图，在标签“</head>”的前面输入链接外部样式表的代码，如下所示。
<link rel="stylesheet" type="text/css" href="css/base.css" /> <link rel="stylesheet" type="text/css" href="css/main.css" />
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.4 图片标记 2.4.1 网页中的图片
1.GIF格式
2.JPEG格式
3.PNG格式
4.矢量格式
2.4 图片标记
2.4.2 图片标记
格式： <IMG src=“图片文件名” alt=“简单说明” width=“图片的宽度” height=“图片的高度” hspace=“水平方向空白” vspace=“垂直方 向空白” border”边框宽度” align=“对齐方 式”> <IMG src=“logo.gif” width=100 height=100 hspace=5 vspace=5 border=2 align=“top” alt=“Logo of PenPals Garden”>
</UL>
2.3 列表标记
2.3.2 有序列表
格式：<OL type=符号类型> <LI type=符号类型>第一个列表项 <LI type=符号类型>第二个列表项 …….. </UL> Type: 数字 / 大写英文字母 / 小写英文字母 / 大写罗 马字母 / 小写罗马字母
示例：<OL>
<LI>安装调制解调器 <LI>创建拨号连接 <LI type=“A”>设置拨号网络 <LI type=“i”>设置拨号网络 </OL>2.3 列ຫໍສະໝຸດ 标记2.3.3 列表的嵌套
示例：武侠小说
<UL> <LI>金庸 <UL> <LI>射雕英雄传 <LI>笑傲江湖 </UL> <LI>梁羽生 <UL> <LI>萍踪侠影 <LI>云海玉弓缘 </UL> </UL>
2.3 列表标记
2.3.3 列表的嵌套
示例：武侠小说
<OL> <LI>金庸 <UL> <LI>射雕英雄传 <LI>笑傲江湖 </UL> <LI>梁羽生 <UL> <LI>萍踪侠影 <LI>云海玉弓缘 </UL> </OL>
2.3 列表标记
2.3.1 无序列表
格式：<UL type=符号类型> <LI type=符号类型>第一个列表项 <LI type=符号类型>第二个列表项 …….. </UL> Type: disc / circle / square <LI img src=mypraph.gif>
示例：<UL>
<LI>总线结构 <LI type=“circle”>星型结构 <LI type=“square”>环型结构