第六課編制滑動(dòng)門教程.doc

第六課：滑動(dòng)門的制作求實(shí)滑動(dòng)門是用DIV + CSS 編制的，首先要設(shè)計(jì)滑動(dòng)門的尺寸，具體說(shuō)你要在這個(gè)滑動(dòng)門 里顯示幾個(gè)內(nèi)容，整體寬和高，導(dǎo)航的高度，內(nèi)容的高度， 本實(shí)例課設(shè)計(jì)寬 450，高 230，顯示4 個(gè)內(nèi)容，導(dǎo)航條高 28，內(nèi)容高 200， 1，新建文檔，保存跟文件夾里，命名為 hdm.htm， 2，刪除所有代碼，插入 DIV標(biāo)簽，在類里輸入zkj 點(diǎn)確定， 打開 CSS 樣式面板，點(diǎn)新建 CSS 規(guī)則，出來(lái)下面對(duì)話框，（這個(gè)樣式是控制總表格 的）僅對(duì)該文檔 確定，在對(duì)話框里，類型里 大小 12，在區(qū)塊里，文本對(duì)齊 居中，方框里，寬 456， 高 自動(dòng)， 確定 3，在代碼里刪除“此處顯示 class zkj 的內(nèi)容”光標(biāo)不移動(dòng)，插入DIV標(biāo)簽，在類 里輸入dht 點(diǎn)確定，點(diǎn)新建 CSS 規(guī)則， （這個(gè)樣式是控制總導(dǎo)航條的）按下圖設(shè)置點(diǎn)確定，在方框里 ，寬 456，高 28，清除 選兩者，在定位里 溢位選隱藏。點(diǎn)確定 4，在代碼里刪除“此處顯示 class dht 的內(nèi)容”，打開文本，點(diǎn)擊ul 在的 右面點(diǎn)一下，空格，找到 id 雙擊 在 ” 里輸入 myTab0，打開 CSS 樣式面板，點(diǎn)新建 CSS 規(guī)則， （這個(gè)樣式是控制總導(dǎo)航條的）出來(lái)下面對(duì)話框確定，在方框里 把填充和邊界都輸入 0， 確定5，在左面點(diǎn)一下，點(diǎn)擊文本里的li。在的 右面點(diǎn)一下，空格，找到 class 雙擊 在 ” 里輸入 active ，在”后面空格輸入onMouseOver=nTabs(this,0); 在外輸入PHP動(dòng)網(wǎng)錄像 ，打開 CSS 樣式 面板，點(diǎn)新建 CSS 規(guī)則， （這個(gè)樣式是控制分導(dǎo)航的）出來(lái)下面對(duì)話框 把選擇器里換成.zkj .dht li確定，在方框里 寬 114，高 28，填充 上8 下 2 浮動(dòng) 左對(duì)齊，在列表里 類型 無(wú)，在擴(kuò)展里， 光標(biāo)輸入 pointer 6刷黑PHP動(dòng)網(wǎng)錄像，打開 CSS 樣式面板，點(diǎn)新建 CSS 規(guī)則， （這個(gè)樣式是控制打開顯示的導(dǎo)航的）出來(lái)下面對(duì)話框 把. .nTab .TabTitle #myTab0 .active換成 .active ， 確定，類里 大小 14 ，粗體，顏色 #07519A，背景里找 到 images 里的 bj.jpg，方框里 寬114 高 28，打開填充 上 3 在列表里 類型 無(wú)，確定7，在代碼里的PHP動(dòng)網(wǎng)錄像右面輸入 右面點(diǎn)一下 ，點(diǎn)擊文本里的li。在的 右面點(diǎn)一下，空格，找到 class 雙擊 在 ” 里輸入normal ，在”后面空格輸入onMouseOver=nTabs(this,1); 在外輸入ASP動(dòng)網(wǎng)錄像 ，打開 CSS 樣式 復(fù)制ASP動(dòng)網(wǎng)錄像 粘貼到下一行上，再粘貼一行。把第一次粘貼的ASP動(dòng)網(wǎng)錄像改為帝國(guó)改造錄像，把(this,1)，的1改為2，把第二次粘貼的ASP動(dòng)網(wǎng)錄像改為綜合教程錄像，把(this,1)，的1改為3打開 CSS 樣式面板，點(diǎn)新建 CSS 規(guī)則， （這個(gè)樣式是控制第 2 個(gè)導(dǎo)航的）出來(lái)下面對(duì)話框 按下圖設(shè)置確定，類里 大小 14。粗體 ，顏色#07519A，背景里 找到 images 里的title_bg.gif，方框里 寬 114 高28 浮動(dòng) 左對(duì)齊，打開填充 上 3 在列表里 類型 無(wú)，確定9, 在代碼里下面的后面點(diǎn)一下，回到設(shè)計(jì)面板，插入 DIV 標(biāo)簽，在類里輸入 TabContent 點(diǎn)確定，打開 CSS 樣式 面板，點(diǎn)新建 CSS 規(guī)則， （這個(gè)樣式是控制內(nèi)容的）出來(lái)下面對(duì)話框 確定后 在方框里 寬 450，高 200，填充 上 5 其他0邊界 0 定位 溢位 隱藏，確定 10，在代碼里 刪除“此處顯示 class TabContent 的內(nèi)容”插入 div 在id里輸入 myTab0_Content0 刪除“此處顯示 id myTab0_Content0 的內(nèi)容”輸入PHP動(dòng)網(wǎng)錄像內(nèi)容在 插入 div 標(biāo)簽 在 id里輸入 myTab0_Content1 在代碼里id=myTab0_Content1后面空格 找到 class 雙擊 在 ” 里輸入 none 刪除“此處顯示 id myTab0_Content1 的內(nèi)容”輸入ASP動(dòng)網(wǎng)錄像內(nèi)容，復(fù)制ASP動(dòng)網(wǎng)錄像內(nèi)容，下面粘貼2次把把第一次粘貼的id=myTab0_Content1的1改為2，把ASP動(dòng)網(wǎng)錄像內(nèi)容改為帝國(guó)改造錄像內(nèi)容，把第二次粘貼的id=myTab0_Content1的1改為3，把ASP動(dòng)網(wǎng)錄像內(nèi)容改為綜合教程錄像內(nèi)容，打開 CSS 樣式面板， 點(diǎn)新建 CSS 規(guī)則， （這個(gè)樣式是控制內(nèi)容隱藏的）選擇器類型 選類 名稱 輸入 none 點(diǎn)確定，在區(qū)塊里，把顯示改為 無(wú) 11， 把角本代碼粘貼在代碼第一行里 function nTabs(thisObj,Num) if(thisObj.className = active)return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName(li);for(i=0; i tabList.length; i+) if (i = Num) thisObj.className = active; document.getElementById(tabObj+_Content+i).style.display = block; else tabListi.className = normal; document.getElementById(tabObj+_Content+i).style.display = none; 滑動(dòng)門內(nèi)容頁(yè)面的制作1， 新建文檔，保存跟文件夾里，命名為1.htm，刪除全部代碼，鏈接樣式 （測(cè)試完成在鏈接樣式路徑前加!-news.url-）2， 插入2行1列，寬440，其他0的表格，第1行高165，垂直頂端，第2行高30，水平右對(duì)齊，輸入更多?？崭?，刷黑更多。做空連接，目標(biāo)_top，在第1行里插入1行3列，寬100%的表格，全新所有單元格，高 25，樣式 xc