網(wǎng)頁設(shè)計(jì)期末復(fù)習(xí)網(wǎng)頁設(shè)計(jì)和開發(fā)

1、 PAGE8 / NUMPAGES8 網(wǎng)頁設(shè)計(jì)簡答題：相對(duì)定位與絕對(duì)定位的區(qū)別？并舉例說明。相對(duì)定位的元素框會(huì)偏移某個(gè)距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。絕對(duì)定位的元素框從文檔流完全刪除，并相對(duì)于其包含塊定位，元素原先在正常文檔流中所占的空間會(huì)關(guān)閉元素定位后生成一個(gè)塊級(jí)框。制作菜單的常用方法？【第一步】我們要先做一個(gè)容器（要求：ID為“nav”，寬度為960px，高度為：35px，位于頁面水平正中，與瀏覽器頂部的距離是30px；)【第二步】盒子做好了，我們就要往里面放導(dǎo)航條中的內(nèi)容了“CSS學(xué)習(xí) 學(xué)前準(zhǔn)備 入門教程 提高教程 布局教程 精彩應(yīng)用”，插入標(biāo)簽有序列表ul，

2、單元格li新建樣式復(fù)合類型#nav ul li float:left;在li標(biāo)簽的CSS屬性中加入“l(fā)ist-style:none;”【第三步】后面的文字全部貼著前面的文字。設(shè)置標(biāo)簽的寬度為100像素：【第四步】我們需要將上面的導(dǎo)航條做以下幾個(gè)修改1）給上面的導(dǎo)航加上；2）文字大小修改為12px;3）并且規(guī)定樣式，鼠標(biāo)移上去和拿開的效果圖片與文字的對(duì)齊方式？(padding,margin,DIV的float、行高、對(duì)齊、背景圖片設(shè)置屬性)1.padding簡寫屬性在一個(gè)聲明中設(shè)置所有內(nèi)邊距屬性。不允許使用負(fù)值?？赡艿闹礱uto、length、%、inherit2.margin簡寫屬性在一個(gè)聲明

3、中設(shè)置所有外邊距屬性。該屬性可以有 1 到 4 個(gè)值可能的值auto、length、%、inherit3.float定義元素在哪個(gè)方向浮動(dòng)none、left 、right、inherit(規(guī)定應(yīng)該從父元素繼承 float 屬性的值)4.line-height屬性可設(shè)置行間的距離，不允許使用負(fù)值。5. text-align 屬性規(guī)定元素中的文本的水平對(duì)齊方式。 圖像由標(biāo)簽定義。是空標(biāo)簽，意思是說，它只包含屬性，并且沒有閉合標(biāo)簽。DIV中設(shè)置CSS的兩種方式(內(nèi)聯(lián)和外聯(lián)方式代碼)外聯(lián)：是指把樣式寫在一個(gè)CSS文件中通過link標(biāo)簽導(dǎo)入到頁面中例如：1.2.內(nèi)聯(lián):是指在同一個(gè)頁面文件中，統(tǒng)一寫出在h

4、ead style標(biāo)簽中，要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：ul與li的設(shè)置。 標(biāo)簽定義無序列表。（ul是unordered lists的縮寫）ul標(biāo)簽是成對(duì)出現(xiàn)的，以；開始，；結(jié)束 每一列使用；標(biāo)簽定義在html中是一對(duì)標(biāo)記,表示有序列表或者無序列表的項(xiàng)目。如果在標(biāo)記之間，則表示無序列表。針對(duì)IE6不支偽類（編寫JS代碼）startList=function()if(document.all)&(document.getElementById)rootnav=document.ge

5、tElementById(nav)arrayli=rootnav.getElementsByTagName(li);for(i=0;iarrayli.length;i+)currentli=arraylii;currentli.onmouseover=function()this.className+=this.className+ current;currentli.onmouseout=function()this.className=this.className.replace( current,);window.onload=startList;制作背景音樂、播放Flash、視頻文件等

6、關(guān)鍵代碼。背景音樂：之間加入 播放Flash、視頻文件制作動(dòng)態(tài)公告的標(biāo)簽及屬性設(shè)置。從插入菜單選 “標(biāo)簽”， 然后在對(duì)話框中選“html標(biāo)簽”“頁元素”“marquee”。然后在打開右邊標(biāo)簽檢查器，里設(shè)定marquee標(biāo)簽的屬性。文字移動(dòng)屬性的設(shè)置 方向 #=left, right, up, downleft從右向左移，right從左向右移，up從下向上移，down從上向下移。 學(xué)校將于近期舉電子信息系網(wǎng)頁設(shè)計(jì)大賽，報(bào)名截 制作表單的常用元素。1創(chuàng)建表單.2.創(chuàng)建滾動(dòng)菜單,size設(shè)置在需要滾動(dòng)前可以看到的表單項(xiàng)數(shù)目 設(shè)置每個(gè)表單項(xiàng)的內(nèi)容3.創(chuàng)建下拉菜單 設(shè)置每個(gè)菜單項(xiàng)的內(nèi)容4.創(chuàng)建一個(gè)文本框

7、區(qū)域,列的數(shù)目設(shè)置寬度,行的數(shù)目設(shè)置高度5.創(chuàng)建一個(gè)復(fù)選框,文字在標(biāo)簽后面6.創(chuàng)建一個(gè)單選框,文字在標(biāo)志后面7. 創(chuàng)建一個(gè)單行文本輸入?yún)^(qū)域,size設(shè)置為字符串的寬度創(chuàng)建提交(submit)按鈕8.創(chuàng)建一個(gè)使用圖像的提交(submit)按鈕9.創(chuàng)建重置(reset)按鈕J常見元素的功能（DIV、Span、a、ul、li、h、img等）Div；為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。Span；在行內(nèi)定義一個(gè)區(qū)域，span加在內(nèi)容里，還是一行顯示，1.span 元素為 p 元素增加了額外的結(jié)構(gòu)：some text.some other text.2.span可以對(duì)

8、文檔中的部分文本增添視覺效果：健康、富裕a:建立超xx文本Ul:標(biāo)記插入無序列表！Li：定義列表項(xiàng)序列！h:網(wǎng)頁 HYPERLINK baike.baidu./view/692.htm t _blank html 中對(duì)文本標(biāo)題所進(jìn)行的著重強(qiáng)調(diào)的一種標(biāo)簽Img:表示插入圖片！二、上機(jī)操作(1)用JS寫出從小到大排序算法。function sort() var ary; var len, ex, tmp; var inputN = document.getElementById(Text1); var ary=inputN.getAttribute(value); ary = ary.split(

9、,); len = ary.length; for(var i=0; i=i; j-) if(aryj+1imagenumbers)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.

10、onload=changeImage;(3)用JS判斷表單驗(yàn)驗(yàn)（包括密碼驗(yàn)證、根據(jù)用戶選擇的值，自動(dòng)填寫相關(guān)值，如選擇某個(gè)系，自動(dòng)讀取列表值）function Check() var passwd=document.getElementById(passwordText).value;var Confirmpasswd=document.getElementById(ConfirmpasswordText).value; if (passwd=) alert(密碼不能為空); if (passwd!= Confirmpasswd) alert(密碼不一致，請(qǐng)重輸); var confirack

11、=document.getElementById(CheckBoxServiceAck); if(!confirack.checked) alert(你未接收服務(wù)條款!); 。/根據(jù)專業(yè)方向列出對(duì)應(yīng)所有專業(yè)function selectToPreTextarea()var currSelectIndex = document.getElementById(listMajor).selectedIndex;var preSelect = document.getElementById(SelectPreselectmajors);if( currSelectIndex=1)jsAddItemTo

12、Select(preSelect, 計(jì)算機(jī)應(yīng)用, 0);jsAddItemToSelect(preSelect, 計(jì)算機(jī)網(wǎng)絡(luò), 1);jsAddItemToSelect(preSelect, 電子商務(wù), 2);if( currSelectIndex=2)jsAddItemToSelect(preSelect, 會(huì)計(jì)電算化, 3);jsAddItemToSelect(preSelect, 經(jīng)濟(jì)管理, 4);if( currSelectIndex=3)jsAddItemToSelect(preSelect, 英語, 5);jsAddItemToSelect(preSelect, 日語, 6);/用

13、戶選專業(yè)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; js

14、AddItemToSelect(ConfirmSelect, currSelectText, currSelectvalue);/用戶刪專業(yè)function DeletedMajors()var ConfirmSelect = document.getElementById(ConfirmPreselectmajors);jsRemoveSelectedItemFromSelect(ConfirmSelect);/ 1.判斷select選項(xiàng)中 是否存在Value=paraValue的Itemfunction jsSelectIsExitItem(objSelect, objItemValue)

15、 var isExit = false; for (var i = 0; i objSelect.options.length; i+) if (objSelect.optionsi.value = objItemValue) isExit = true; break; return isExit; / 2.向select選項(xiàng)中 加入一個(gè)Item function jsAddItemToSelect(objSelect, objItemText, objItemValue) /判斷是否存在 if (!jsSelectIsExitItem(objSelect, objItemValue) var

16、 varItem = new Option(objItemText, objItemValue); objSelect.options.add(varItem); / 3.從select選項(xiàng)中 刪除一個(gè)Item function jsRemoveItemFromSelect(objSelect, objItemValue) /判斷是否存在 if (jsSelectIsExitItem(objSelect, objItemValue) for (var i = 0; i = 0; i-) if(objSelecti.selected = true) objSelect.optionsi = null; / 5.修改select選項(xiàng)中 value=paraValue的text為paraText function jsUpdateItemToSelect(objSelect, objIt