下载文档原格式
第5讲图像的操作（一）1.1教学目标：◆知识目标1.认识图像，掌握在页面中插入图像的方法2.掌握图像各属性的作用和交换图像的设置。
◆技能目标1.能够根据页面显示效果在适当位置插入图像元素。
◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：2.掌握图像各属性的作用和交换图像的设置。
1.3 教学难点交换图像的设置。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、激趣导入，揭示课题前一章节把Dreamweaver MX的工作环境做了一个详细介绍，相信同学们对网页制作软件的界面有了一个清晰的认识，万事开头难，一个好的站点不仅有全局规划，而且一个功能强大的网站，需要多方面知识的积累，首先找一个已经做得比较好的网站，把整个链接过程演示给学生，让他们感受到网站其实做起来也不难，只要用心就可以，关键是主线要清晰。
二、使用图像图像和文字是网页中最重要的两个元素。
一个高质量的网页是离不开图像的。
制作精良的图像可以大大增强网页的美观性，令网页更加生动多彩。
在页面中如何用漂亮的图像来吸引人们的视线是每个网站都需要面对的问题。
一幅好的图片，胜过千言万语，反映在网页上也是如此。
在这里“好的”这个词包含了三方面的含义：一是指合适的，用一幅毫不相干的图像只会起到画蛇添足的作用；二是指正确的，用一个文件量很大的图像或者格式错误的图像，只会让浏览者对你的网页火冒三丈；三是指漂亮的。
0.1认识图像要在文档中正确使用图像，首先要了解一些Internet相关的图像知识。
由于图像在磁盘中的压缩方式和存储方式的不同，加上许多图像处理软件又有自己专门的格式，所以图像的标准有很多种。
目前在Internet上最为常见的图像包括JPG、JPEG、GIF和PNG等几种，在网页上使用的图像一般有JPEG、GIF、PNG等。
《网页设计与制作》课程教案第一章：网页设计与制作概述1.1 课程介绍网页设计与制作的基本概念网页设计与制作的目的与意义网页设计与制作的应用领域1.2 网页设计原则网页设计的基本原则用户体验设计原则响应式网页设计原则1.3 网页制作工具与技术网页设计软件的选择与使用HTML与CSS的基本语法与使用方法JavaScript的基础知识与应用第二章：网页布局与排版2.1 网页布局的基本概念网页布局的定义与作用常见的网页布局方式布局元素的分类与使用2.2 排版的原则与方法排版的基本原则文本的格式化与排版图片与多媒体元素的排版2.3 响应式网页布局与排版响应式网页布局的概念与意义媒体查询的使用方法布局与排版在不同设备上的应用第三章：网页色彩与字体3.1 色彩的基本概念与应用色彩的视觉效应与心理作用色彩的搭配原则与技巧色彩在网页设计中的应用案例3.2 字体的选择与使用字体的分类与特点字体的搭配原则与技巧字体在网页设计中的应用案例3.3 网页色彩与字体的综合应用色彩与字体的协调与平衡字体大小与行距的设置与调整色彩与字体的个性化应用与创新第四章：网页图片与多媒体元素4.1 网页图片的选择与处理图片的格式与特点图片的选择标准与技巧图片的处理与优化方法4.2 多媒体元素的应用音频与视频元素的应用动画与GIF图片的应用交互式多媒体元素的应用4.3 网页图片与多媒体元素的优化图片与多媒体元素的加载优化图片与多媒体元素的响应式应用图片与多媒体元素的视觉效果与用户体验第五章：网页交互与动画5.1 网页交互的基本概念与原理交互的定义与作用交互的实现方式与技术交互的设计原则与技巧5.2 JavaScript基础与应用JavaScript的基本语法与功能事件处理与DOM操作JavaScript库与框架的选择与使用5.3 网页动画的实现与优化CSS动画的制作方法与技巧JavaScript动画的制作方法与技巧动画的加载优化与性能考虑第六章：HTML与CSS高级应用6.1 表单设计与验证表单的基本结构与属性表单元素的使用与布局表单验证的实现方法6.2 网页组件设计与实现导航栏与面包屑的制作折叠面板与标签页的制作轮播图与幻灯片的设计与实现6.3 网页动画与过渡效果CSS过渡与动画的实现JavaScript动画的实现方法动画的性能优化与调试第七章：前端框架与库7.1 前端框架的基本概念前端框架的作用与优势常见的前端框架介绍框架的选择与使用7.2 Bootstrap框架的应用Bootstrap的基本结构与组件栅格系统与布局设计Bootstrap表单与样式定制7.3 React与Vue框架的选择与应用React框架的基本概念与使用方法Vue框架的基本概念与使用方法框架项目结构与组件化开发第八章：网页兼容性与优化8.1 网页兼容性基本概念浏览器兼容性的原因与挑战兼容性测试的方法与工具兼容性解决方案与最佳实践8.2 网页性能优化网页加载速度的影响因素图片与多媒体元素的优化代码压缩与合并技巧8.3 搜索引擎优化（SEO）SEO的基本概念与原则关键词研究与内容优化代码优化与站点结构调整第九章：网页安全与维护9.1 网页安全基本概念网页安全的威胁与挑战跨站脚本攻击（XSS）的预防跨站请求伪造（CSRF）的预防9.2 数据备份与恢复数据备份的重要性与方法数据库备份与文件备份恢复策略与流程9.3 网站维护与更新网站维护的内容与流程网站更新的方法与技巧网站监控与性能调优第十章：项目实践与案例分析10.1 项目实践流程项目需求分析与规划设计阶段与实现阶段项目测试与上线流程10.2 项目案例分析案例一：个人博客网站设计与制作案例二：电子商务网站设计与制作案例三：响应式企业官网设计与制作项目过程中的问题与解决方法网页设计与制作的趋势与展望重点和难点解析1. 第一章：网页设计与制作概述难点解析：网页设计原则的理解与应用、网页制作工具与技术的熟练运用2. 第二章：网页布局与排版难点解析：响应式网页布局与排版的设计与实现3. 第三章：网页色彩与字体难点解析：色彩与字体的协调与平衡、字体大小与行距的设置与调整4. 第四章：网页图片与多媒体元素难点解析：网页图片与多媒体元素的优化方法、响应式应用5. 第五章：网页交互与动画难点解析：JavaScript事件的处理与DOM操作、动画的实现与优化6. 第六章：HTML与CSS高级应用难点解析：表单验证的实现方法、网页组件的布局与样式设计7. 第七章：前端框架与库难点解析：框架的选择与使用、React与Vue框架的选择与应用8. 第八章：网页兼容性与优化难点解析：兼容性解决方案与最佳实践、网页性能优化的实施方法9. 第九章：网页安全与维护难点解析：预防跨站脚本攻击（XSS）与跨站请求伪造（CSRF）的策略、网站维护与更新的方法10. 第十章：项目实践与案例分析难点解析：项目需求的分析与规划、项目测试与上线流程的控制本教案《网页设计与制作》涵盖了网页设计与制作的基本概念、技术应用、项目实践等各个方面。
《网页制作与设计》课程单元测试五(1)（答案）一、单选题（每题3分，共30分）1．下面一段JavaScript代码的输出结果是。
for(i=0;i<10;i++){d ocument.write(“i”);}A．输出0到9 B．输出1到9 C．输出10到i D．输出0到10【答案】B2．以下语言是微软的IE和Netscape两种浏览器都支持的语言。
A．VBScriptB．ActiveXC．JavaScriptD．DOM【答案】 C3．嵌入HTML文件的JavaScript程序代码必须放在之后。
A．<script> B．</script> C．<Start> D．<Body>【答案】 A4．下列对象包括了confirm()方法。
A．documentB．windowC．locationD．Link【答案】 B5．关键字用来创建对象实例。
A．new B．objectC．instance D．V ar【答案】 A6．在循环中，continue语句的功能是。
A．让浏览器死机B．完全退出循环C．重新开始运行循环D．结束循环【答案】 B7．Math.random函数生成随机数的范围是。
A．1至100B．0至1C．1至10D．1至9【答案】 B8．下列代码段的功能是。
<script language=”JavaScript”><!--window.alert(“Hello”);// --></script>A．弹出警告信息B．弹出确认框C．定义函数D．弹出提示框【答案】 A9．写“Hello World”的正确javascript语法是。
A．document.write("Hello World")B．"Hello World"C．response.write("Hello World")D．("Hello World")【答案】 A10．以下表达式产生一个0~7之间(含0,7)的随机整数。
网页设计与制作-自考-第五章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位置放上一个值，表示输入时显示*号。
《网页设计与制作》教案第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讨论网页设计的标准和原则1.2 网页设计流程讲解网页设计的基本流程，包括需求分析、设计稿、切片、编码和测试等步骤1.3 网页设计工具介绍常用的网页设计工具，如Photoshop、Dreamweaver、Fireworks等第二章：HTML与CSS基础2.1 HTML概述介绍HTML的概念、作用和基本结构2.2 HTML标签讲解常用的HTML标签，如、段落、图像、、列表等2.3 CSS概述介绍CSS的概念、作用和基本语法2.4 CSS选择器讲解常用的CSS选择器，如类选择器、ID选择器、属性选择器等第三章：网页布局与排版3.1 网页布局概述介绍网页布局的概念和重要性3.2 常用的网页布局方法讲解常用的网页布局方法，如固定布局、百分比布局、弹性布局等3.3 排版与字体介绍排版和字体的概念、作用和常用属性3.4 响应式网页设计讲解响应式网页设计的概念、方法和实现方式第四章：网页特效与交互4.1 网页特效概述介绍网页特效的概念和作用4.2 JavaScript基础讲解JavaScript的概念、作用和基本语法4.3 常用的网页特效与实例讲解常用的网页特效，如鼠标悬停效果、下拉菜单、滚动动画等，并提供实例进行演示4.4 交互式网页设计讲解交互式网页设计的概念、方法和实现方式第五章：网页设计与制作实践5.1 实践项目概述介绍实践项目的需求和目标5.2 网页设计稿制作根据实践项目需求，使用设计工具制作网页设计稿5.3 网页编码与测试使用HTML和CSS编写网页代码，并进行测试和调试讲解网页发布的步骤和注意事项，以及常用的网页推广方法第六章：网页图像与多媒体6.1 图像格式与优化介绍常见的网页图像格式，如JPG、PNG、GIF等，以及图像优化方法6.2 音频与视频讲解如何在网页中嵌入音频和视频，以及常用的媒体格式6.3 Flash动画介绍Flash动画的概念、制作方法和在网页中的应用6.4 动态效果与动画讲解如何在网页中实现动态效果和动画，包括使用CSS动画和JavaScript实现第七章：网页服务器与数据库7.1 服务器概述介绍网页服务器的概念、作用和常用服务器软件7.2 数据库概述介绍数据库的概念、作用和常用数据库管理系统7.3 动态网页制作基础讲解动态网页制作的基本原理，如服务器端编程和数据库连接7.4 实践项目：搭建简易的个人博客系统讲解如何使用服务器和数据库搭建一个简易的个人博客系统，包括前端设计和后端编程第八章：网页安全与SEO介绍网页安全的概念和重要性，以及常见的网络安全威胁8.2 网页安全措施讲解如何防范网络攻击和提高网页安全性，如使用SSL证书、X-Frame-Options 等8.3 SEO概述介绍搜索引擎优化（SEO）的概念、作用和方法8.4 SEO实践技巧讲解如何优化网页内容、结构和，以提高搜索引擎排名第九章：网页设计与制作的进阶技巧9.1 响应式网页设计深入讲解响应式网页设计的原理和实践方法，包括媒体查询和弹性布局9.2 前端框架与库介绍常用的前端框架和库，如Bootstrap、jQuery、React等，以及如何使用它们提高网页制作效率9.3 网页性能优化讲解如何提高网页加载速度和性能，包括图片优化、代码压缩和缓存策略9.4 实践项目：制作一个响应式商务网站讲解如何使用响应式设计和前端框架制作一个商务网站，包括布局、样式和交互设计第十章：网页设计与制作的拓展与趋势10.1 网页设计与制作的未来趋势探讨网页设计与制作的发展方向，如虚拟现实（VR）、增强现实（AR）等技术的应用10.2 网页设计规范与最佳实践介绍网页设计规范和最佳实践，以提高网页质量和用户体验10.3 跨平台网页设计与制作讲解如何使用跨平台技术，如PWA（Progressive Web Apps）、Node.js等，实现网页在不同平台和设备的兼容性和性能10.4 实践项目：制作一个跨平台的网页应用重点和难点解析重点环节1：网页设计基础和流程网页设计的标准和原则是设计的基石，需要重点掌握。
