資源描述:
《利用dreamweaver8.0制作框架網(wǎng)站》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。
1、利用Dreamweaver8.0制作框架網(wǎng)站框架是網(wǎng)頁(yè)中經(jīng)常使用的頁(yè)面設(shè)計(jì)方式,框架的作用就是把網(wǎng)頁(yè)在一個(gè)瀏覽器窗口下分割成幾個(gè)不同的區(qū)域,實(shí)現(xiàn)在一個(gè)瀏覽器窗口中顯示多個(gè)HTML頁(yè)面。使用框架可以非常方便的完成導(dǎo)航工作,讓網(wǎng)站的結(jié)構(gòu)更加清晰,而且各個(gè)框架之間決不存在干擾問(wèn)題。利用框架最大的特點(diǎn)就是使網(wǎng)站的風(fēng)格一致。通常把一個(gè)網(wǎng)站中頁(yè)面相同的部分單獨(dú)制作成一個(gè)頁(yè)面,作為框架結(jié)構(gòu)的一個(gè)子框架的內(nèi)容給整個(gè)網(wǎng)站公用?! ∫粋€(gè)框架結(jié)構(gòu)有兩部分網(wǎng)頁(yè)文件構(gòu)成: 框架(Frame):框架是瀏覽器窗口中的一個(gè)區(qū)域,它可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無(wú)關(guān)的
2、網(wǎng)頁(yè)文件。 框架集(Frameset):框架集也是一個(gè)網(wǎng)頁(yè)文件,它將一個(gè)窗口通過(guò)行和列的方式分割成多個(gè)框架,框架的多少根據(jù)具體有多少網(wǎng)頁(yè)來(lái)決定,每個(gè)框架中要顯示的就是不同的網(wǎng)頁(yè)文件?! ∫弧?chuàng)建框架 在創(chuàng)建框架集或使用框架前,通過(guò)選擇“查看/可視化助理/框架邊框”命令,使框架邊框在文檔窗口的設(shè)計(jì)視圖中可見(jiàn)?! ?、使用預(yù)制框架集 (1)、新建一個(gè)HTML文件,在快捷工具欄選擇“布局”,單擊“框架”按鈕,在彈出的下拉菜單中選擇“頂部和嵌套的左側(cè)框架”?! 。?)、使用鼠標(biāo)直接從框架的左側(cè)邊緣河上邊緣向中間拖動(dòng),直至合適的位置,這樣頂部和嵌套
3、的左側(cè)框架就完成了?! ?、鼠標(biāo)拖動(dòng)創(chuàng)建框架 ?。?)、新建普通網(wǎng)頁(yè),命名后將其打開(kāi)?! 。?)、把鼠標(biāo)放到框架邊框上,出現(xiàn)雙箭頭光標(biāo)時(shí)拖拽框架邊框,可以垂直或水平分割網(wǎng)頁(yè)?! 《?、保存框架 每一個(gè)框架都有一個(gè)框架名稱(chēng),可以用默認(rèn)的框架名稱(chēng),也可以在屬性面板修改名稱(chēng),我們采用系統(tǒng)默認(rèn)的框架名稱(chēng)topFrame(上方)、leftFrame(左側(cè))、mainFrame(右側(cè))?! ∵x擇菜單欄>文件>保存全部,將框架集保存為index.html,上方框架保存為07.html,左側(cè)框架保存為08.html,右側(cè)框架保存為09.html。這個(gè)步驟雖然簡(jiǎn)單
4、,但是很關(guān)鍵,只有將總框架集和各個(gè)框架保存在本地站點(diǎn)根目錄下,才能保證瀏覽頁(yè)面時(shí)顯示正常。 三、編輯框架式網(wǎng)頁(yè) 雖然框架式網(wǎng)頁(yè)把屏幕分割成幾個(gè)窗口,每個(gè)框架(窗口)中放置一個(gè)普通的網(wǎng)頁(yè),但是編輯框架式網(wǎng)頁(yè)時(shí),要把整個(gè)編輯窗口當(dāng)作一個(gè)網(wǎng)頁(yè)來(lái)編輯,插入的網(wǎng)頁(yè)元素位于哪個(gè)框架,就保存在哪個(gè)框架的網(wǎng)頁(yè)中??蚣艿拇笮】梢噪S意修改?! ?、改變框架大小 用鼠標(biāo)拖拽框架邊框可隨意改變框架大小?! ?、刪除框架 用鼠標(biāo)把框架邊框拖拽到父框架的邊框上,可刪除框架?! ?、設(shè)置框架屬性 設(shè)置框架屬性時(shí),必須先選中框架。選擇框架方法如下: 選擇菜單欄>窗口>
5、框架,打開(kāi)框架面板,單擊某個(gè)框架,即可選中該框架?! ≡诰庉嫶翱谀硞€(gè)框架內(nèi)按住Alt鍵并單擊鼠標(biāo),即可選擇該框架。當(dāng)一個(gè)框架被選擇時(shí),它的邊框帶有點(diǎn)線輪廓 2.設(shè)置框架屬性 選中框架,在屬性面板上可以設(shè)置框架屬性:框架名稱(chēng)、源文件、空白邊距、滾動(dòng)條、重置大小和邊框?qū)傩缘??! ⌒枰⒁獾氖牵?、框架是不可以合并的。2、在創(chuàng)建鏈接時(shí)要用到框架名稱(chēng),所以我們要很清楚的知道每個(gè)框架對(duì)應(yīng)的框架名?! ∷摹⒃诳蚣苤惺褂贸?jí)鏈接 在框架式網(wǎng)頁(yè)中制作超級(jí)鏈接時(shí),一定要設(shè)置鏈接的目標(biāo)屬性,為鏈接的目標(biāo)文檔指定顯示窗口。鏈接目標(biāo)較遠(yuǎn)(其他網(wǎng)站)時(shí),一般放在新窗口
6、,在導(dǎo)航條上創(chuàng)建鏈接時(shí),一般將目標(biāo)文檔放在另一個(gè)框架中顯示(當(dāng)頁(yè)面較小時(shí))或全屏幕顯示(當(dāng)頁(yè)面較大時(shí))。 “目標(biāo)”下拉菜單中的選項(xiàng): *_blank放在新窗口中?! ?_parent放到父框架集或包含該鏈接的框架窗口中。 *_self放在相同窗口中(默認(rèn)窗口無(wú)須指定)?! ?_top放到整個(gè)瀏覽器窗口并刪除所有框架?! ≡谖覀儽4嬗锌蚣苊麨閙ainFrame、leftFrame、topFrame的框架后,在目標(biāo)下拉菜單中,還會(huì)出現(xiàn)mainFrame、leftFrame、topFrame選項(xiàng): *mainFrame放到名為mainFrame的
7、框架中。 *leftFrame放到名為leftFrame的框架中?! ?topFrame放到名為topFrame的框架中。五、制作框架頁(yè)面 1、選擇菜單欄>窗口>框架,打開(kāi)框架面板,選中整個(gè)框架集,如下圖所示: 在屬性面板中,將行的值設(shè)置為100,單位為像素,如下圖所示: 2、選擇菜單欄>窗口>框架,打開(kāi)框架面板,選中子框架集,如下圖所示: 在屬性面板中,將列的值設(shè)置為200,單位為像素,如下圖所示: 這樣,我們就完成了對(duì)整個(gè)框架的布局。下面我們來(lái)布局各個(gè)框架頁(yè)面?! ?、鼠標(biāo)在topFrame框架中的空白處點(diǎn)擊一下,我們會(huì)看見(jiàn)文檔窗口
8、上方的文件名變?yōu)榱?7.html。在頁(yè)面屬性中將上、下、左。右邊距全部設(shè)為0?! 〔迦胍粋€(gè)1行2列的表格,寬度為100%,