网页设计期末复习网页设计与开发.doc
Four short words sum up what has lifted most successful individuals above the crowd: a little bit more.-author-date网页设计期末复习 网页设计与开发网页设计期末复习 网页设计与开发网页设计简答题：a. 相对定位与绝对定位的区别？并举例说明。相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。绝对定位的元素框从文档流完全删除，并相对于其包含块定位，元素原先在正常文档流中所占的空间会关闭元素定位后生成一个块级框。b. 制作菜单的常用方法？【第一步】我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；)【第二步】盒子做好了，我们就要往里面放导航条中的内容了“CSS学习 学前准备 入门教程 提高教程 布局教程 精彩应用”，插入标签有序列表ul，单元格li新建样式复合类型#nav ul li float:left;在li标签的CSS属性中加入“list-style:none;” 【第三步】后面的文字全部贴着前面的文字。设置<li>标签的宽度为100像素：【第四步】我们需要将上面的导航条做以下几个修改1）给上面的导航加上链接；2）链接文字大小修改为12px;3）并且规定链接样式，鼠标移上去和拿开的效果c. 图片与文字的对齐方式？(padding,margin,DIV的float、行高、对齐、背景图片设置属性)1. padding简写属性在一个声明中设置所有内边距属性。不允许使用负值。可能的值auto、length、%、inherit2. margin简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值可能的值auto、length、%、inherit3. float定义元素在哪个方向浮动none、 left 、right、inherit(规定应该从父元素继承 float 属性的值)4. line-height属性可设置行间的距离，不允许使用负值。5. text-align 属性规定元素中的文本的水平对齐方式。<img> 图像由标签定义。是空标签，意思是说，它只包含属性，并且没有闭合标签。DIV中设置CSS的两种方式(内联和外联方式代码)外联：是指把样式写在一个CSS文件中通过link标签导入到页面中例如：1.<link href="styles.css" type="text/css"/>2.<link href="001.css" type="text/css" rel="Stylesheet"/>内联:是指在同一个页面文件中，统一写出在head style标签中，要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：d. ul与li的设置。<ul> 标签定义无序列表。（ul是unordered lists的缩写）ul标签是成对出现的，以<ul>；开始，</ul>；结束 每一列使用<li>；标签定义在html中<li></li>是一对标记,表示有序列表或者无序列表的项目。如果在<UL></UL>标记之间，则表示无序列表。e. 针对IE6不支伪类（编写JS代码）startList=function()if(document.all)&&(document.getElementById)rootnav=document.getElementById("nav")arrayli=rootnav.getElementsByTagName("li");for(i=0;i<arrayli.length;i+)currentli=arraylii;currentli.onmouseover=function()this.className+=this.className+" current"currentli.onmouseout=function()this.className=this.className.replace(" current","");window.onload=startList;f. 制作背景音乐、播放Flash、视频文件等关键代码。背景音乐：<head></head>之间加入<bgsound src="音乐url" loop="-1"> <embed src="sound/Yesterday Once More.mp3" autostart= true loop="true"> 播放Flash、视频文件 <embed src="flash/flash921.swf" type="application/ x-shockwave-flash" width="300" pluginspage=" > g. 制作动态公告的标签及属性设置。从插入菜单选 “标签”， 然后在对话框中选“html标签”“页元素”“marquee”。然后在打开右边标签检查器，里设定marquee标签的属性。文字移动属性的设置 方向 <direction=#> #=left, right, up, downleft从右向左移，right从左向右移，up从下向上移，down从上向下移。<marquee behavior="scroll" direction="up" bgcolor="# 7fffd4" height="150px" vspace="15" scrolldelay="300" onMouseOver=this.stop() onMouseOut=this.start()> <font face="宋体" size="4"> 学校将于近期举电子信息系网页设计大赛，报名截 </font> </marquee> I 制作表单的常用元素。1创建表单.<form></form>2.<select multiple name="name" size=""></select>创建滚动菜单,size设置在需要滚动前可以看到的表单项数目<option> 设置每个表单项的内容3.<select name="name"></select>创建下拉菜单<option> 设置每个菜单项的内容4.<textarea name="name" cols=40 rows=8></textarea>创建一个文本框区域,列的数目设置宽度,行的数目设置高度5.<input type="checkbox" name="name">创建一个复选框,文字在标签后面6.<input type="radio" name="name" value="">创建一个单选框,文字在标志后面7.<input type=text name="foo" size=20> 创建一个单行文本输入区域,size设置为字符串的宽度<input type="submit" value="name">创建提交(submit)按钮8.<input type="image" border=0 name="name" src="name.gif">创建一个使用图像的提交(submit)按钮9.<input type="reset">创建重置(reset)按钮J常见元素的功能（DIV、Span、a、ul、li、h、img等）Div；为HTML文档内大块（block-level）的内容提供结构和背景的元素。Span；在行内定义一个区域，span加在内容里，还是一行显示，1.span 元素为 p 元素增加了额外的结构：<p><span>some text.</span>some other text.</p>2. span可以对文档中的部分文本增添视觉效果：<span class="red">健康</span>、<span class="blue" >富裕</span></div>a:建立超链接<a href = “”>xx文本</a>Ul:标记插入无序列表！Li：定义列表项序列！h: 网页html 中对文本标题所进行的着重强调的一种标签 Img:表示插入图片！<img src="images/wangyeseji.png" width="124" height="93" hspace="8" vspace="16" />二、上机操作(1)用JS写出从小到大排序算法。function sort() var ary; var len, ex, tmp; var inputN = document.getElementById("Text1"); var ary=inputN.getAttribute("value"); ary = ary.split(','); len = ary.length; for(var i=0; i<len; i+)/重置是否发生交换的变量 ex = false; for(var j=len-2; j>=i; j-) if(aryj+1<aryj)/交换相邻的两个元素 tmp = aryj; aryj = aryj+1; aryj+1 = tmp; / / /记录发生了交换 ex = true; /如果没有发生交换，表明已经排序完成 if(!ex)break; var outputN = document.getElementById("Text2");outputN.setAttribute("value",ary); (2) 用JS写出图片幻灯切换效果。var t=1;var imageindex=1;var imagenumbers=3;function changeImage()setFocus(imageindex);imageindex+;if(imageindex>imagenumbers)imageindex=1;setTimeout('changeImage( )',t*1000);function setFocus(indexImage)for(i=1;i<=imagenumbers;i+)if(i=indexImage)document.getElementById('image'+i).style.display='block'elsedocument.getElementById('image'+i).style.display='none'window.onload=changeImage;(3)用JS判断表单验验（包括密码验证、根据用户选择的值，自动填写相关值，如选择某个系，自动读取列表值）function Check() var passwd=document.getElementById("passwordText").value;var Confirmpasswd=document.getElementById("ConfirmpasswordText").value; if (passwd="") alert("密码不能为空"); if (passwd!= Confirmpasswd) alert("密码不一致，请重输"); var confirack=document.getElementById("CheckBoxServiceAck"); if(!confirack.checked) alert("你未接收服务条款!"); 。/根据专业方向列出对应所有专业function selectToPreTextarea()var currSelectIndex = document.getElementById("listMajor").selectedIndex;var preSelect = document.getElementById("SelectPreselectmajors");if( currSelectIndex=1)jsAddItemToSelect(preSelect, "计算机应用", 0);jsAddItemToSelect(preSelect, "计算机网络", 1);jsAddItemToSelect(preSelect, "电子商务", 2);if( currSelectIndex=2)jsAddItemToSelect(preSelect, "会计电算化", 3);jsAddItemToSelect(preSelect, "经济管理", 4);if( currSelectIndex=3)jsAddItemToSelect(preSelect, "英语", 5);jsAddItemToSelect(preSelect, "日语", 6);/用户选专业function getMajors()var preSelect = document.getElementById("SelectPreselectmajors");var selectIndex=preSelect.selectedIndex;var ConfirmSelect = document.getElementById("ConfirmPreselectmajors");var currSelectText = preSelect.optionsselectIndex.text; var currSelectvalue = preSelect.selectedIndex; jsAddItemToSelect(ConfirmSelect, currSelectText, currSelectvalue);/用户删专业function DeletedMajors()var ConfirmSelect = document.getElementById("ConfirmPreselectmajors");jsRemoveSelectedItemFromSelect(ConfirmSelect);/ 1.判断select选项中 是否存在Value="paraValue"的Itemfunction jsSelectIsExitItem(objSelect, objItemValue) var isExit = false; for (var i = 0; i < objSelect.options.length; i+) if (objSelect.optionsi.value = objItemValue) isExit = true; break; return isExit; / 2.向select选项中 加入一个Item function jsAddItemToSelect(objSelect, objItemText, objItemValue) /判断是否存在 if (!jsSelectIsExitItem(objSelect, objItemValue) var varItem = new Option(objItemText, objItemValue); objSelect.options.add(varItem); / 3.从select选项中 删除一个Item function jsRemoveItemFromSelect(objSelect, objItemValue) /判断是否存在 if (jsSelectIsExitItem(objSelect, objItemValue) for (var i = 0; i < objSelect.options.length; i+) if (objSelect.optionsi.value = objItemValue) objSelect.options.remove(i); break; else alert("该select中 不存在该项"); / 4.删除select中选中的项 function jsRemoveSelectedItemFromSelect(objSelect) var length = objSelect.options.length - 1; for(var i = length; i >= 0; i-) if(objSelecti.selected = true) objSelect.optionsi = null; / 5.修改select选项中 value="paraValue"的text为"paraText" function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) /判断是否存在 if (jsSelectIsExitItem(objSelect, objItemValue) for (var i = 0; i < objSelect.options.length; i+) if (objSelect.optionsi.value = objItemValue) objSelect.optionsi.text = objItemText; break; alert("成功修改"); else alert("该select中 不存在该项"); -
