深入淺出 用HTML制作網(wǎng)頁(yè)體驗(yàn)其中樂(lè)趣
來(lái)源:程序員人生 發(fā)布時(shí)間:2013-10-31 20:47:23 閱讀次數(shù):2839次
眾所周知,網(wǎng)站制作涉及到了各個(gè)方面的知識(shí),包括平面設(shè)計(jì)、HTML頁(yè)面制作、CSS樣式定義、客戶(hù)端腳本編寫(xiě)(JavaScrfipt/VBScript)、服務(wù)器端腳本編寫(xiě)(Asp/Asp.Net/PHP/JSP)等諸多內(nèi)容。本期筆者從最基礎(chǔ)的講起,著重介紹怎樣制作一個(gè)簡(jiǎn)單的HTML網(wǎng)站,初步體會(huì)一下其中的樂(lè)趣。
1.這里筆者使用的網(wǎng)頁(yè)制作工具是Dreamweaver。首先運(yùn)行Dreamweaver,選擇“文件”→“新建”菜單,此時(shí)會(huì)彈出如圖1所示的窗口。

圖1
2.在此窗口中的“基本頁(yè)”標(biāo)簽下有七個(gè)選項(xiàng),我們選擇“HTML”項(xiàng)后單擊“創(chuàng)建”按鈕,創(chuàng)建工作區(qū)就會(huì)變成空白,這說(shuō)明HTML頁(yè)面已經(jīng)創(chuàng)建成功,單擊代碼視圖就會(huì)出現(xiàn)如圖2所示的內(nèi)容。

圖2
3.先不要理會(huì)這些顯示出的HTML頁(yè)面代碼的具體含義,我們首先將“Title無(wú)標(biāo)題文檔”改成“網(wǎng)頁(yè)處女秀”,然后再選擇設(shè)計(jì)視圖。點(diǎn)擊“菜單”→“插入”→“HTML”→“框架”→“上方”,即在網(wǎng)頁(yè)的上方插入了一個(gè)框架。此時(shí)網(wǎng)頁(yè)就分成了兩個(gè)框架,即上框架和下框架。我們選擇下框架后,選擇“菜單”→“插入”→“HTML”→“框架”→“左方”命令,即在網(wǎng)頁(yè)的左邊插入了一個(gè)框架。
4.單擊“Ctrl+S”保存各個(gè)框架(top.htm,left.htm,right.htm)。然后選擇左框架,點(diǎn)擊“菜單”→“插入”→“超鏈接”命令,會(huì)出現(xiàn)如圖3所示的對(duì)話(huà)框。在該對(duì)話(huà)框中輸入各個(gè)項(xiàng),其中“文本”是鏈接顯示的文字,“鏈接”是單擊之后跳轉(zhuǎn)到的頁(yè)面地址,“目標(biāo)”是在哪個(gè)框架里顯示。在此我們選擇“目標(biāo)”為mainFrame(即左邊框架),并按照此步驟繼續(xù)插入超鏈接。接下來(lái)進(jìn)入右框架(right.htm)的代碼視圖,在<body></body>里輸入
,這是一個(gè)文字特效,可以讓文字左右上下移動(dòng),其中把direction換成(UP,DOWN,Left,Right)就可以改變文字的移動(dòng)方向了。

圖3
生活不易,碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)