dw實(shí)訓(xùn)案例制作過程1_第1頁
dw實(shí)訓(xùn)案例制作過程1_第2頁
dw實(shí)訓(xùn)案例制作過程1_第3頁
已閱讀5頁，還剩18頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、靜態(tài)網(wǎng)站設(shè)計(jì)與制作實(shí)訓(xùn)案例制作步驟本案例把前面學(xué)習(xí)的零碎內(nèi)容申聯(lián)起來，組織成一個(gè)網(wǎng)站，從建立站點(diǎn)到一個(gè)完整的div+css網(wǎng)頁的完成，整個(gè)流程下來，使學(xué)生有一個(gè)做完整網(wǎng)站的經(jīng)歷。1. 建立站點(diǎn)結(jié)構(gòu)分析搭建框架切割效果圖布局頁面一一頭部和導(dǎo)航布局頁面?zhèn)冗厵诓季猪撁嬷黧w部分底部和細(xì)節(jié)調(diào)整相對路徑和相對丁根目錄路徑一、建立站點(diǎn)要做一個(gè)網(wǎng)站，首先需要建立一個(gè)站點(diǎn)。那么什么是站點(diǎn)，為什么要建立一個(gè)站點(diǎn)呢？因?yàn)榫W(wǎng)站不同丁其它文件，比方一個(gè)圖片，放到哪個(gè)盤哪個(gè)目錄下都可以訪問。而網(wǎng)站是許多文件相互關(guān)聯(lián)的，所以要專門一個(gè)目錄把它們分門別類存放起來。下面以在E盤建立一個(gè)myweb文件夾為例，在dreamweav

2、er（簡稱DW）里創(chuàng)建一個(gè)站點(diǎn)指向這個(gè)文件夾，然后在目錄下新建images文件夾、css文件夾等把各類文件分別存放起來。站點(diǎn)建立好后，我們先建立一個(gè)images和css文件火，分別用來存放圖片和css文件。直接在windows的資源管理器下建立或者在dw里建立都是可以的；在dw建宜需要在文件面板列表的根目錄上點(diǎn)擊右鍵，選擇新建文件夾后更改名字即可。二、結(jié)構(gòu)分析創(chuàng)建完站點(diǎn)后，就需要對頁面結(jié)構(gòu)進(jìn)行分析了，根據(jù)效果圖，分析頁面分為幾大塊，該怎么布局更合理。先看下效果圖及在網(wǎng)頁中顯示的樣式：rAwtNEI1EW*M=日:i亍#=t«?«?=S也H«a*i*aF«

3、rT口.JM"*rrRrt«>-.",*WL承w上尊司了*>皓m三K£._nwwwfcwsMwr£3<戶毫盛!®i-»藍(lán)"宣療fkgy白丁.逢聲*fm禎點(diǎn)號1o="_xTK蘭MHf.g心掃囊宜奴omva兮三壬M»4fcs#5jUU«.#日j田量呆lfsp具左*_%?始三就fS=s松g*且事_L.h?77.=.-L-，土低MTHLftSlMltlANMi蹌:上：志工二打BdM曜5KH：i!?#套3僵喳*'JRWf-ILi，Jt際皿ME«嘩*«

4、QIT3菱W目古于泛任宜上一=呈"乳wm NtthbWtWtMWi *”焉與凝#任日虹云一戶JFftVWTF"心”宣琳三翌6*理堂_匕農(nóng)走£_rn一住MEW如M.HmMww功3此bi.LAMlW在瀏覽器中打開效果圖預(yù)覽從圖中可以看出整個(gè)頁面分為頭部區(qū)域、導(dǎo)航區(qū)域、主體部分和底部，其中主體部分乂分為左右兩列，整個(gè)頁面居中顯示，看明白了這點(diǎn)，下邊的框架就好搭建了。整體框架結(jié)果圖如下：</body></html>強(qiáng)調(diào)一點(diǎn)，許多同學(xué)喜歡把第一行代碼刪除掉，認(rèn)為沒用，其實(shí)這句話的作用大著呢，它標(biāo)明以何種形式解析文檔，如果刪除可能會(huì)引起樣式表失效或其它

5、意想不到的問題。接下來需要插入以上各個(gè)塊的標(biāo)簽了，以插入header的標(biāo)簽為例，其它的插入方法類同。直接在代碼視圖中手工輸入，代碼如下：注意main和side在maincontent里包含著呢<divid="header">此處顯示id"header"的內(nèi)容</div><divid="nav">此處顯示id"nav"的內(nèi)容</div><divid="maincontent"><divid="main">此

6、處顯示id"main"的內(nèi)容</div><divid="side">此處顯示id"side"的內(nèi)容</div></div><divid="footer">此處顯示id"footer"的內(nèi)容</div>從上邊的效果圖分析得知，整個(gè)網(wǎng)頁是居中瀏覽器顯示的，按照這樣的寫法需要把以上的header、nav、maincontent>footer都設(shè)置寬度并居中，這樣做起來很麻煩，所以再在獲些標(biāo)簽外增加一下父標(biāo)簽，設(shè)置這個(gè)父標(biāo)簽寬

7、度并居中后，是不是所有的標(biāo)簽都居中了呢。增加后的代碼如下：<divid="container"><divid="header">此處顯示id"header"的內(nèi)容</div><divid="nav">此處顯示id"nav"的內(nèi)容</div><divid="maincontent"><divid="main">此處顯示id"main"的內(nèi)容</div

8、><divid="side">此處顯示id"side"的內(nèi)容</div></div></div><divid="footer">此處顯示id"footer"的內(nèi)容</div>html框架代碼寫完后，下邊就需要設(shè)置css樣式表了。設(shè)置container寬度900px并居中，main部的寬度為664px,side寬度為228px,與效果圖寬度一致。下面就可以寫css代碼了。由丁本實(shí)例是按照實(shí)際當(dāng)中應(yīng)用來做的，所以css樣式表就最好寫在單獨(dú)文件

9、里保存后先設(shè)置全局的樣式，而后寫每一塊單獨(dú)的樣式，全局樣式如下：bodymargin:0auto;font-size:12px;font-family:Verdana;line-height:1.5;ul,dl,dd,h1,h2,h3,h4,h5,h6,form,ppadding:0;margin:0;ullist-style:none;imgborder:0px;acolor:#444;text-decoration:none;a:hovercolor:#f00;全局的樣式定義完后，下面定義以上幾大塊的樣式。定義的樣式表和html文件關(guān)聯(lián)link。如果已經(jīng)是寬度為900px并居中，說明樣式和

10、文件關(guān)聯(lián)好了。這就是為什么要定義一個(gè)站點(diǎn)了，因?yàn)樵S多文件要關(guān)聯(lián)在一起才能構(gòu)成一個(gè)完整的網(wǎng)頁，所以要把它們放在一起，才能讓這個(gè)頁面找到和它相關(guān)的文件在哪里。下面設(shè)置內(nèi)部幾大塊的樣式，為了便丁觀察，我們把部分塊設(shè)置了背景色。代碼如下：/*body*/#containerwidth:900px;margin:0auto;/*header*/#headerheight:70px;background:#CCFFCC;margin-bottom:8px;#navheight:30px;background:#CCFFCC;margin-bottom:8px;/*main*/#maincontentmar

11、gin-bottom:8px;#mainfloat:left;width:664px;height:500px;background:#FFFF99;#sidefloat:right;width:228px;height:500px;background:#FFCC99;/*footer*/#footerheight:70px;background:#CCFFCC;現(xiàn)在預(yù)覽一下：在IE6下#maincontent的底部外邊距并沒有生效，而在IE8下，#footer干脆跑到#maincontent的下邊了，這乂是怎么回事呢？如果前邊你都認(rèn)真學(xué)的話，那么這個(gè)問題已經(jīng)不是問題了。這就是之前我們講的，

12、如果一個(gè)容器內(nèi)的元素都浮動(dòng)的話，那么它的高度將不會(huì)去適應(yīng)內(nèi)部元素的高度。解決方法是在#maincontent增加overflow:auto;zoom:1;,這樣就可以讓它自動(dòng)適應(yīng)內(nèi)部元素的高度了?，F(xiàn)在再預(yù)覽一下，是不是都正常了。為了更加保險(xiǎn)，建議在header>nav、maincontent、footer之間增加如下一句代碼：<divclass="clearfloat"></div>并設(shè)置css樣式如下，它的作用是活除浮動(dòng)。.clearfloatclear:both;height:0;font-size:1px;line-height:0px;

13、<!DOCTYPEhtmlPUBLIC"-/W3C/DTDXHTML1.0Transitional/EN""://TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="://1999/xhtml"><head><meta-equiv="Content-Type"content="text/html;charset=gb2312”/><title>主頁</title>

14、;<linkhref="layout.css"rel="stylesheet"type="text/css"/></head><body><divid="container"><divid="header">此處顯示id"header"的內(nèi)容</div><divclass="clearfloat"></div><divid="nav"&

15、gt;此處顯示id"nav"的內(nèi)容</div><divclass="clearfloat"></div><divid="maincontent"><divid="main">此處顯示id"main"的內(nèi)容</div><divid="side">此處顯示id"side"的內(nèi)容</div></div><divclass="clearflo

16、at"></div><divid="footer">此處顯示id"footer"的內(nèi)容</div></div></body></html>提示：可以先修改部分代碼后再運(yùn)行。知識點(diǎn)：網(wǎng)頁布局四、切割效果圖知識點(diǎn):css基礎(chǔ)五、布局頁面一一頭部和導(dǎo)航有了上邊的基礎(chǔ)，下面的任務(wù)就是要利用html和css制作完成一個(gè)完整的網(wǎng)頁了。先從頭部開始，第三小節(jié)時(shí)我們已經(jīng)把整體框架給搭建好了，就像蓋房子一樣，整體結(jié)構(gòu)已經(jīng)出來了，下面就需要填磚分割空間了。先分析下頭部：分為兩部分，一個(gè)是

17、logo靠左側(cè)顯示，一個(gè)是搜索靠右側(cè)顯示，那么布局時(shí)插入兩個(gè)div,一個(gè)向左浮動(dòng)，一個(gè)向右浮動(dòng)的方式來完成。另外還有很多種實(shí)現(xiàn)方法，比方logo用h1標(biāo)簽，搜索用span，或者把logo做為背景圖片也是可以的，不管采用哪種方法，要根據(jù)頁面的需求選用一種最合理的方法。如果要在logo加上鏈接的話，那么就不能用背景圖片的方法了。<divid="header"><divid="logo">此處顯示id"logo"的內(nèi)容</div><divid="search">此處顯示id

18、"search"的內(nèi)容</div></div>先在header里插入以上兩塊元素。然后分別插入相應(yīng)的內(nèi)容，在logo里插入我們事先切割好的logo圖片，在search里插入一個(gè)表單(補(bǔ)充知識點(diǎn))，一個(gè)文本框和一個(gè)按鈕，插入后如下：<divid="header"><divid="logo”><imgsrc="images/logo.gif"width="181"height="45"/></div><divid

19、="search"><formid="form1"name="form1"method="post"action="">搜索產(chǎn)品<inputtype="text"name="textfield"id="textfield"/><inputtype="submit"name="button"id="button"value="查詢&q

20、uot;/></form></div></div>接下來定義css,頭部的高度是71px,logo距頂部18px，搜索產(chǎn)品距頂部30px,下面在css里把這些參數(shù)都給定義上，看顯示的效果和效果圖中的效果是不是一樣呢？#logofloat:left;margin-top:18px;#searchfloat:right;margin-top:30px;/*為通配符，意為匹配IDsearch下的所有元素應(yīng)用這屬性。*/這兩項(xiàng)的位置已經(jīng)差不多了。預(yù)覽你會(huì)發(fā)現(xiàn)，搜索框和按鈕跟效果圖中的不一樣，這是因?yàn)槲覀冞€沒對它設(shè)置樣式，接下來把文本框增加一個(gè)class為inp

21、_srh樣式，按鈕增加btn_srh的樣式，然后定義這兩個(gè)樣式的屆性。#searchfloat:right;height:24px;margin-top:30px;color:#444;.inp_srhwidth:140px;height:17px;padding-left:20px;background:url(./images/srh_bg.gif)no-repeat00;border:1pxsolid#cbcbcb;.btn_srh(width:58px;height:23px;background:url(./images/btn_srh.gif)no-repeat00;border:

22、none;cursor:pointer;text-indent:-999em;/*首行縮進(jìn)*/#search*(vertical-align:middle;/*垂直居中*/我們給search增加了高度和文字顏色，這點(diǎn)不用多解釋，但高度為什么是24px,是為了照顧IE6,大家去掉測試下就知道了；inp_srh的寬度和高度并不是實(shí)際效果圖中的寬高，是因?yàn)槟J(rèn)情況下文本框帶有內(nèi)邊距造成的。另外就是padding的值也會(huì)算到總寬度上的；btn_srh就是應(yīng)用背景圖像來實(shí)現(xiàn)的，說明：border的值為none指的是無邊框，cursor定義鼠標(biāo)樣式為手形，之前有人用hand，但這個(gè)通不過w3c認(rèn)證。tex

23、t-indent:-999em它的作用相當(dāng)丁word中的首行縮進(jìn)，這里設(shè)置成-999,意思是向左側(cè)縮進(jìn)-999em,這樣是不是就看不到文字啦，所以它的作用是將按鈕上的文字隱藏，當(dāng)然也可以在html代碼中插入空格代替文字，但這樣做有點(diǎn)不太好，在不支持css的設(shè)備上查看時(shí)，用戶不知道這個(gè)按鈕是干什么的了。所以建議采用這種形式；這些設(shè)置完后，把最初搭建框架時(shí)設(shè)置的header的背景色和底部外邊距給去掉吧。#headerheight:71px;至此，頭部的樣式就完成了，下邊該制作菜單了。菜單制作參考教材ch9-17。知識點(diǎn):css基礎(chǔ)Html的添加：<divid="nav"&

24、gt;<divid="nav_l"></div><divid="nav_r"></div><divid="menu"><ul><li><ahref="#"class="home"onmouseover="mopen('m1')”onmouseout="mclosetime()”><span>首頁</span></a><div

25、id="m1"onmouseover="mcancelclosetime()"onmouseout="mclosetime()”><ahref="#">菜單項(xiàng)1</a><ahref="#">菜單項(xiàng)2</a><ahref="#">菜單項(xiàng)3</a><ahref="#">菜單項(xiàng)4</a><ahref="#">菜單項(xiàng)5</a>&l

26、t;/div></li><li><ahref="#"class="search"onmouseover="mopen('m2')onmouseout="mclosetime()"><span>企業(yè)新聞</span></a><divid="m2"onmouseover="mcancelclosetime()"onmouseout="mclosetime()">&l

27、t;ahref="#">菜單項(xiàng)1</a><ahref="#">菜單項(xiàng)2</a><ahref="#">菜單項(xiàng)3</a><ahref="#">菜單項(xiàng)4</a><ahref="#"></div>菜單項(xiàng)5</a></li><li><ahref="#"class="contact"onmouseover=&quo

28、t;mopen('m3')onmouseout="mclosetime()"><span>企業(yè)簡介</span></a><divid="m3"onmouseover="mcancelclosetime()"onmouseout="mclosetime()"></li></div><ahref="#">菜單項(xiàng)1</a><ahref="#">菜單項(xiàng)2&

29、lt;/a><ahref="#">菜單項(xiàng)3</a><ahref="#">菜單項(xiàng)4</a><ahref="#"></div>菜單項(xiàng)5</a><li><ahref="#"><span><li><ahref="#"><span><li><ahref="#"><span><li>

30、;<ahref="#"><span><li><ahref="#"><span></ul>產(chǎn)品展廳</span></a></li>企業(yè)歷史</span></a></li>招商加盟</span></a></li>網(wǎng)上下單</span></a></li>聯(lián)系我們</span></a></li></div&g

31、t;Js的添加：<scripttype="text/javascript"src="js/menu.js"></script>知識點(diǎn):jsJs代碼：vartimeout=500;varclosetimer=0;/隱藏下拉菜單用的定時(shí)器varddmenuitem=0;/打開下拉菜單functionmopen(id)/取消關(guān)閉定時(shí)器mcancelclosetime();/隱藏舊的下拉菜單if(ddmenuitem)ddmenuitem.style.visibility='hidden'/得到和顯示新的下拉菜單ddmen

32、uitem=document.getElementByld(id);ddmenuitem.style.visibility='visible'/隱藏新的下拉菜單functionmclose()if(ddmenuitem)ddmenuitem.style.visibility='hidden'/隱藏下拉菜單用的定時(shí)器functionmclosetime()closetimer=window.setTimeout(mclose,timeout);/取消定時(shí)器functionmcancelclosetime()if(closetimer)window.clearTim

33、eout(closetimer);closetimer=null;/點(diǎn)擊網(wǎng)頁時(shí)，隱藏下拉菜單document.onclick=mclose;css的添加：#menuheight:36px;overflow:hidden;#menuullifloat:left;font-size:14px;font-weight:bold;margin:5px5px05px;#menuulli>afloat:left;display:block;height:26px;line-height:26px;color:#fff;padding-left:20px;#menuulliaspanfloat:lef

34、t;display:block;padding-right:20px;#menuullia:hoverbackground:url(./images/nav_bg.gif)0-163pxno-repeat;color:#fff;#menuullia:hoverspanbackground:url(./images/nav_bg.gif)right-163pxno-repeat;cursor:pointer;#menuullidivposition:absolute;visibility:hidden;background:#EAEBD8;border:1pxsolid#red;#menuull

35、idivaposition:relative;display:block;padding:5px10px;white-space:nowrap;/*不換行*/background:#D0650D;color:#fff;#menuullidiva:hovercolor:#D0650D;background:#fff;注：float:left是左浮動(dòng)可以把一些塊放在一行，display:block是塊元素化。還有最后一步:就是兩端的圓角沒實(shí)現(xiàn)，實(shí)現(xiàn)圓角的方法也不復(fù)雜，只需再增加兩行代碼和兩個(gè)樣式即可。在nav下nav_main之前增加如下兩行代碼：<divid="nav_l&quo

36、t;></div><divid="nav_r"></div>然后用樣式表定義一個(gè)左側(cè)的圓角，一個(gè)右側(cè)的圓角。css樣式如下：#nav_l(float:left;height:36px;width:5px;overflow:hidden;background:url(./images/nav_bg.gif)0-66pxno-repeat;margin-right:10px;#nav_r(float:right;height:36px;width:5px;overflow:hidden;background:url(./images/n

37、av_bg.gif)-5px-66pxno-repeat;預(yù)覽一下吧，看看頭部和導(dǎo)航是不是和效果圖中的一樣呢<!DOCTYPEhtmlPUBLIC"-/W3C/DTDXHTML1.0Transitional/EN""://TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="://1999/xhtml"><head><meta-equiv="Content-Type"content="text

38、/html;charset=gb2312"/><title>主頁</title><linkhref="css/layout1.css"rel="stylesheet"type="text/css"/></head><body><divid="container"><divid="header"><divid="logo"><imgsrc="image

39、s/logo.gif"width="181"height="45”/></div><divid="search"><formid="form1"name="form1"method="post"action="">搜索產(chǎn)品<inputclass="inp_srh"type="text"name="textfield"id="textfiel

40、d"/><inputclass="btn_srh"type="submit"name="button"id="button"value="查詢"/></form></div></div><divclass="clearfloat"></div><divid="nav"><divid="nav_l"></div>&l

41、t;divid="nav_r"></div><divid="menu"><ul><li><ahref="#"class="home"onmouseover="mopen('m1')"onmouseout="mclosetime()"><span>首頁</span></a><divid="m1"onmouseover="mca

42、ncelclosetime()"onmouseout="mclosetime()"><ahref="#">菜單項(xiàng)1</a><ahref="#"><ahref="#"><ahref="#"><ahref="#"><ahref="#">菜單項(xiàng)1</a><ahref="#"><ahref="#"

43、><ahref="#"><ahref="#"><ahref="#"><ahref="#"><ahref="#"><ahref="#"><ahref="#"><ahref="#"><ahref="#"><ahref="#">菜單項(xiàng)菜單項(xiàng)菜單項(xiàng)菜單項(xiàng)2</a>3&l

44、t;/a>4</a>5</a></div></li><li><ahref="#"class="search"onmouseover="mopen('m2')"onmouseout="mclosetime()"><span>企業(yè)新聞</span></a><divid="m2"onmouseover="mcancelclosetime()"onm

45、ouseout="mclosetime()"><ahref="#"><ahref="#"><ahref="#"><ahref="#"><ahref="#">菜單項(xiàng)菜單項(xiàng)菜單項(xiàng)菜單項(xiàng)1</a>2</a>3</a>4</a>菜單項(xiàng)5</a></div></li><li><ahref="#"cla

46、ss="contact"onmouseover="mopen('m3')"onmouseout="mclosetime()"><span>企業(yè)簡介</span></a><divid="m3"onmouseover="mcancelclosetime()"onmouseout="mclosetime()"><ahref="#"><ahref="#"&g

47、t;<ahref="#"><ahref="#"><ahref="#">菜單項(xiàng)菜單項(xiàng)1</a>2</a>菜單項(xiàng)3</a>菜單項(xiàng)4</a>菜單項(xiàng)5</a></div><li><ahref="#"><span><li><ahref="#"><span><li><ahref="#">

48、<span><li><ahref="#"><span><li><ahref="#"><span>產(chǎn)品展廳</span></a></li>企業(yè)歷史</span></a></li>招商加盟</span></a></li>網(wǎng)上下單</span></a></li>聯(lián)系我們</span></a></li>

49、</ul></div></div><divclass="clearfloat"></div><divid="maincontent"><divid="main">此處顯示id"main"的內(nèi)容</div><divid="side">此處顯示id"side"的內(nèi)容</div></div><divclass="clearfloat&q

50、uot;></div><divid="footer">此處顯示id"footer"的內(nèi)容</div></div></body></html>提示：可以先修改部分代碼后再運(yùn)行知識點(diǎn):js六、布局頁面?zhèn)冗厵谥黧w部分先從側(cè)邊欄說起，側(cè)邊欄可以共用一個(gè)樣式，下面就先做一個(gè)通用的，插入如下html代碼<divclass="side_box"><h2><strong>產(chǎn)品</strong>導(dǎo)購</h2><

51、divclass="side_con">此處顯示class"side_con"的內(nèi)容</div></div>這里的標(biāo)題采用h2標(biāo)簽，沒必要再用個(gè)div，還有產(chǎn)品導(dǎo)購”中產(chǎn)品”二字是紅色字體，這里用strong標(biāo)簽，這樣可以省去很多沒必要的定義，所以在頁面布局當(dāng)中一定要合理利用每一個(gè)標(biāo)簽。合理利用每個(gè)標(biāo)簽，才是web標(biāo)準(zhǔn)設(shè)計(jì)的一個(gè)準(zhǔn)則。回過頭來定義側(cè)邊欄的樣式如下：#sidefloat:right;width:228px;.side_boxmargin-bottom:8px;.side_boxh2height:25px;pad

52、ding:6px10px010px;background:url(./images/side_bg.gif)00no-repeat;font-size:14px;color:#444;.side_boxh2strongcolor:#f30;.side_conpadding:010px;background:url(./images/side_bg.gif)0bottomno-repeat;預(yù)覽一下效果吧，是不是整體效果出來了，下邊就需要定義里邊各個(gè)部分了。產(chǎn)品導(dǎo)購此處是示dass"side_con"的內(nèi)容使用問答此處顯示class"side-can"的內(nèi)

53、容聯(lián)系我們此處顯示class"side_con"的內(nèi)容先看下產(chǎn)品導(dǎo)購部分，內(nèi)容分為三部分，可以用ul、li列表的形式實(shí)現(xiàn)，前邊的圖標(biāo)用背景圖片來實(shí)現(xiàn)，可以在li上設(shè)置背景圖片，但這樣麻煩一點(diǎn)，每個(gè)都需要設(shè)置，而且還得定位，有個(gè)更簡便的方法是定義ul的背景圖片，因?yàn)樵谇袌D標(biāo)時(shí)，每個(gè)圖標(biāo)之間的間距是按照效果圖的間距來切的。<divclass="side_box"><h2><strong>產(chǎn)品</strong>導(dǎo)購</h2><divclass="side_conproduct"

54、;><ul><li><strong>語音業(yè)務(wù):</strong><ahref="#">普通</a>|<ahref="#">語音數(shù)字中繼</a></li><li><strong>語音業(yè)務(wù):</strong><ahref="#">普通</a>|<ahref="#">語音數(shù)字中繼</a></li><licla

55、ss="product3”><strong>語音業(yè)務(wù)：</strong><ahref="#">普通</a>|<ahref="#">語音數(shù)字中繼</a></li></ul></div></div>細(xì)心的同學(xué)已發(fā)現(xiàn)，這里的class后跟了兩個(gè)樣式名稱，說明一個(gè)元素是可以定義多個(gè)樣式的，中間用空格分開。也可以把product樣式定義在ul上。說到可以定義多個(gè)樣式，強(qiáng)調(diào)一點(diǎn)：許多新手常常大量使用，如一個(gè)塊元素需要設(shè)置邊框，綠色文

56、字和灰色背景所以就在css里定義：.borderborder:1pxsolid#f60;.colorcolor:#080;.bgbackground:#ccc;然后在塊元素上增加：<divclass="bordercolorbg">此處顯示新Div標(biāo)簽的內(nèi)容</div>其實(shí)這是一個(gè)非常不好的寫法，這樣外表看似到達(dá)了代碼重用性，但實(shí)際當(dāng)中，當(dāng)需要把其中一個(gè)元素的的邊框改為2px,怎么改？如果把.border的邊框改了，那么所有應(yīng)用這一樣式的元素都改了。如果再在代碼中增加一個(gè)樣式，那么乂得去改html代碼，和代碼和結(jié)構(gòu)別離的理念相違背了。一個(gè)好的代碼布局

57、，不管以后怎么改風(fēng)格，只用改樣式表，而不用去改html代碼，這才真正做到兩者別離了?；氐絼倓偟膯栴}上，給第三個(gè)li定義了一個(gè)products樣式，然后在樣式表中定義它的底部邊框?yàn)闊o，因?yàn)榍斑叾xli的底邊框?yàn)?px的虛線，而最后一個(gè)不需要，所以單獨(dú)定義個(gè)樣式把它取消掉，這里的product根據(jù)需要自己定義的名稱，一般用能表達(dá)這塊內(nèi)容意思的簡潔英文來表小，或者用拼首。產(chǎn)品導(dǎo)購”的樣式定義如下：.product(padding:3px10px;.productul(background:url(./images/icon2.gif)5px12pxno-repeat;.productulli(hei

58、ght:58px;padding:14px0064px;border-bottom:1pxdashed#dcdcdc;color:#777;.productullistrong(display:block;height:24px;color:#333;.productullia(color:#777;.productullia:hover(text-decoration:underline;.duct3(border-bottom:none;產(chǎn)品導(dǎo)購”完成后，下邊該使用問答”了。便用問答”部分都是一問一答的形式，問答各采用不同的圖標(biāo)，而且問的文字加粗了。所以這部分

59、采用dl、dt、dd的形式來完成。<divclass="side_conask"><dl><dt><ahref="#">最新出的這個(gè)產(chǎn)品如何使用？</a></dt><dd>該產(chǎn)品采用全新的技術(shù)，較上一產(chǎn)品有質(zhì)的飛躍，功能上增強(qiáng)了許多，使用方法更加簡便.</dd></dl><dl><dt><ahref="#”>最新出的這個(gè)產(chǎn)品如何使用？</a></dt><dd>該產(chǎn)品采

60、用全新的技術(shù)，較上一.</dd></dl><dl><dt><ahref="#”>最新出的這個(gè)產(chǎn)品如何使用？</a></dt><dd>該產(chǎn)品采用全新的技術(shù)，較上一產(chǎn)品有質(zhì)的飛躍，功能上增強(qiáng)了.</dd></dl><dl><dt><ahref="#">最新出的這個(gè)產(chǎn)品如何使用？</a></dt><dd>該產(chǎn)品采用全新的技術(shù)，較上一產(chǎn)品有質(zhì)的飛躍，功能上增強(qiáng).</dd>

61、</dl><dl><dt><ahref="#">最新出的這個(gè)產(chǎn)品如何使用？</a></dt><dd>該產(chǎn)品采用全新的技術(shù)，較上一產(chǎn)品有質(zhì)的飛躍，功能上增強(qiáng)了許多，使用方法更加簡便.</dd></dl></div>.askdl(padding:9px0;border-bottom:1pxdashed#dcdcdc;.askdldt(height:22px;overflow:hidden;font-weight:bold;background:url(./im

62、ages/icon.gif)0-149pxno-repeat;padding-left:20px;.askdldtacolor:#666;.askdlddcolor:#666;background:url(./images/icon.gif)0-198pxno-repeat;padding-left:20px;使用問答”完成后，側(cè)邊欄就剩下聯(lián)系我們”了，這個(gè)更簡單，直接插入圖片就行了,然后調(diào)整一下位置就可以了。<divclass="side_box"><h2><strong>聯(lián)系</strong>我們</h2>&l

63、t;divclass="side_concontact"><ahref="#"><imgsrc="images/tel.gif"width="222"height="112”/></a></div></div>Css:.contactpadding:2px;注意：此處可能因?yàn)?main的height太小而出現(xiàn)排版混亂，可去掉#main的height。七、布局頁面主體部分主體部分可以分三大部分，頂部是幻燈和熱點(diǎn)新聞，中間是圖片列表，下邊是左右

64、兩塊，先來布局主體部分的頂部。頂部實(shí)際上還是個(gè)左右兩列布局。<divid="main"><!一上部結(jié)構(gòu)-><divid="index_top"><divid="pic"><scriptlanguage='javascript'type="text/javascript"></script><divid="login"></div></div><divid="

65、hot_news"><divid="news_top"></div><divid="news_list"></div></div></div><!一中部結(jié)構(gòu)-><divid="index_pic"></div><!一底部結(jié)構(gòu)-><divid="index_box"><divclass="box"><divclass="bo

66、x_con"></div></div><divclass="boxbox1"><divclass="box_con"></div></div></div></div>幻燈片的實(shí)現(xiàn)：主貞的幻燈是怎么實(shí)現(xiàn)的？有如下一段js代碼，而且代碼中有幾個(gè)設(shè)置參數(shù)的地方，那么要想在自己網(wǎng)站實(shí)現(xiàn)這樣的功能，直接把這部分代碼插入到自己網(wǎng)站相應(yīng)位置，修改參數(shù)中的大小為自己的大小、圖片地址為自己的圖片地址，還有就是下載swf文件，并改為相應(yīng)正確的地址。如果你有html

67、基礎(chǔ)的話，這些一點(diǎn)都不難，還是那句話，一定要多動(dòng)手，多動(dòng)腦。<scriptlanguage='javascript'type="text/javascript">linkarr=newArray();picarr=newArray();textarr=newArray();varswf_width=269;varswf_height=210;varfiles="images/pic.jpg|images/pic1.jpg|images/pic2.jpg|images/pic3.jpg"varlinks="#|#|#|

68、#”;vartexts=""for(i=1;i<picarr.length;i+)if(files="")files=picarri;elsefiles+="|"+picarri;for(i=1;i<linkarr.length;i+)if(links="")links=linkarri;elselinks+="|"+linkarri;for(i=1;i<textarr.length;i+)if(texts="")texts=textarri;elsetex

69、ts+="|"+textarri;document.write('<objectclassid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase=":/fpdownload.macromedia/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"width="'+swf_width+"'height="'+swf_height+'">

70、');document.write('<paramname="movie"value="><paramname="quality"value="high”>');document.write('<paramname="menu"value="false"><paramname=wmodevalue="opaque">');document.write('<paramname=

71、"FlashVars"value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'">');document.write('<embedsrc=""wmode="opaque"FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&

72、;bcastr_title='+texts+'&menu="false"quality="high"width="'+swf_width+'"height="'+swf_height+'"type="application/x-shockwave-flash"pluginspage=":macromedia/go/getflashplayer"/>');document.write('</ob

73、ject>');</script>把如上一段代碼拷貝到本例的幻燈圖片位置，實(shí)現(xiàn)幻燈的indexpic.swf文件到本地images文件夾下，swf文件路徑為images/indexpic.swf;修改swf_width和swf_height的值為269和210；files的值為圖片路徑，links為圖片的鏈接地址，texts為標(biāo)題名稱，中間也是用|分隔，這樣就實(shí)現(xiàn)了幻燈圖片展示了。Login的設(shè)計(jì)：<divid="login"><span><ahref="#"><imgsrc="

74、;images/btn_login1.gif"alt="個(gè)人用戶登錄"width="131"height="39"/></a></span><ahref="#"><imgsrc="images/btn_login.gif"alt="經(jīng)銷商登錄"width="131"height="39"/></a></div>Css樣式：#pic向左浮動(dòng)，width

75、:269px;#index_topheight:255px;overflow:hidden;margin-bottom:8px;login"個(gè)人用戶登錄”在右邊，向右浮動(dòng)。<divid="login"><span><ahref="#"><imgsrc="images/btn_login1.gif"alt="個(gè)人用戶登錄"width="131"height="39”/></a></span><ahre

76、f="#"><imgsrc="images/btn_login.gif"alt="經(jīng)銷商登錄"width="131”height="39”/></a></div>Css:#loginspanfloat:right;#loginmargin-top:6px;"hot_news"的設(shè)計(jì)：頂部html設(shè)計(jì)：<divid="news_top"><h1>蘋果iphone4將于9月25日在中國上市</h1>&l

77、t;p>日前中國聯(lián)通正式宣布將于9月25日9時(shí)在中國大陸市場全面推出iPhone4，并為iPhone4用戶量身定制了合約計(jì)劃。</p></div>Css設(shè)計(jì)：#hot_newsfloat:right;width:358px;height:225px;padding:15px;background:url(./images/hot_bg.gif)00no-repeat;#news_topborder-bottom:1pxdotted#ccc;padding-bottom:8px;#news_toph1font-size:18px;line-height:2.2;fo

78、nt-family:"microsoftyahei"color:#444;#news_toppcolor:#999;熱點(diǎn)新聞html設(shè)計(jì)：<divid="news_list"><ul>純CSS實(shí)現(xiàn)三列DIV等高布局</a></li>元素的ID和Name屬性的區(qū)別</a></li>完美兼容ie6,ie7,ie8以及firefox的css透明濾鏡</a></li>實(shí)現(xiàn)放大鏡效果的分頁樣式</a></li>為FF設(shè)置首頁</a>&

79、lt;/li>復(fù)制到系統(tǒng)剪貼板之IE,ff兼容版</a></li>純CSS實(shí)現(xiàn)三列DIV等高布局</a></li>元素的ID和Name屬性的區(qū)別</a></li>完美兼容ie6,ie7,ie8以及firefox的css透明濾鏡</a></li>實(shí)現(xiàn)放大鏡效果的分頁樣式</a></li>為FF設(shè)置首頁</a></li>復(fù)制到系統(tǒng)剪貼板之IE,ff兼容版</a></li><li><span>9-22</span><ahref="#"><li><span>9-22</span><ahref="#">HTML<li><span>9-22</span><ahref="#&q

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論