網(wǎng)頁設(shè)計(jì)第四講_創(chuàng)建多頁面窗口(框架)課件.ppt

《網(wǎng)頁設(shè)計(jì)第四講_創(chuàng)建多頁面窗口(框架)課件.ppt》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、網(wǎng)頁設(shè)計(jì)網(wǎng)頁設(shè)計(jì)計(jì)算機(jī)應(yīng)用專業(yè)《網(wǎng)頁制作》技術(shù)目標(biāo)個(gè)人網(wǎng)站項(xiàng)目任務(wù)創(chuàng)建網(wǎng)頁、應(yīng)用表格布置“個(gè)人網(wǎng)站”內(nèi)容要求。應(yīng)用文字、圖象創(chuàng)建主頁。進(jìn)行布局，添加站名、導(dǎo)航欄、網(wǎng)站介紹，添加修飾圖片。應(yīng)用css、創(chuàng)建鏈接創(chuàng)建個(gè)人簡介子頁。應(yīng)用css修飾文字，設(shè)置主頁到個(gè)人簡介子頁的鏈接，并用css修飾。應(yīng)用框架創(chuàng)建個(gè)人珍藏欄目框架，設(shè)置相關(guān)頁的鏈接。技術(shù)鞏固創(chuàng)建“個(gè)人學(xué)習(xí)方法”和“存在的問題”兩個(gè)子頁，以及“關(guān)于學(xué)習(xí)”欄目的框架。設(shè)置相關(guān)頁的鏈接，以及頁面背景。技術(shù)鞏固在主頁上給不同的鏈接設(shè)置不同的css效果。完善其他未

2、完成的頁面。提交作品。創(chuàng)建網(wǎng)頁、應(yīng)用表格布置“個(gè)人網(wǎng)站”內(nèi)容要求。應(yīng)用文字、圖象創(chuàng)建主頁。進(jìn)行布局，添加站名、導(dǎo)航欄、網(wǎng)站介紹，添加修飾圖片。應(yīng)用css、創(chuàng)建鏈接創(chuàng)建個(gè)人簡介子頁。應(yīng)用css修飾文字，設(shè)置主頁到個(gè)人簡介子頁的鏈接，并用css修飾。應(yīng)用框架創(chuàng)建個(gè)人收藏欄目及其子頁，設(shè)置相關(guān)頁的鏈接。1、框架集和框架（frameset&frame）第四講創(chuàng)建多頁面窗口使用框架集和框架，可以讓一個(gè)窗口顯示多個(gè)網(wǎng)頁的內(nèi)容，并且可以在設(shè)置鏈接的時(shí)候，選擇使用瀏覽器窗口的哪個(gè)部分來顯示要鏈接的網(wǎng)頁。一個(gè)框架集可以包含多

3、個(gè)框架?！纠肯聢D是grsc.html子頁，分為上下兩個(gè)框架，下框架的內(nèi)容可以變化，當(dāng)點(diǎn)擊“我的相冊”，即顯示相冊頁面，如果點(diǎn)擊“美圖收藏”，則顯示美圖頁面。上框架下框架上框架下框架2、創(chuàng)建框架集框架集，有時(shí)也叫“框架頁”。創(chuàng)建框架集時(shí)，同樣通過“文件”菜單、選擇“新建”，但在“新建文檔”對話框中，應(yīng)該選擇“框架集”，然后再選擇框架集的結(jié)構(gòu)，確定后即可創(chuàng)建一個(gè)包含多個(gè)框架的框架頁。第四講創(chuàng)建多頁面窗口3、選擇框架集和框架選擇框架集的時(shí)候，代表我們選擇了一個(gè)包含多個(gè)框架的網(wǎng)頁，而選擇框架則代表我們只選擇這個(gè)網(wǎng)

4、頁中的一個(gè)框架。不管選擇框架集還是框架，都可以通過“框架”面板。點(diǎn)擊“窗口”菜單，選擇“框架”，就可以打開“框架”面板。第四講創(chuàng)建多頁面窗口在“框架”面板上點(diǎn)擊對應(yīng)的框架，就可以選中網(wǎng)頁上相應(yīng)的框架。如果點(diǎn)擊框架面板上的最外層邊框，就代表選擇整個(gè)框架集。4、保存框架集保存框架集，就是把包含多個(gè)框架的整個(gè)網(wǎng)頁保存下來。當(dāng)要保存整個(gè)框架集時(shí)，先把整個(gè)框架集選中，然后在“文件”菜單中選擇“保存框架頁”。第四講創(chuàng)建多頁面窗口只有在選擇了框架集之后，文件菜單中才會出現(xiàn)“保存框架頁”的命令。5、框架的源文件一個(gè)框架頁包

5、含多個(gè)框架，而一個(gè)框架又可以顯示一個(gè)網(wǎng)頁，所以，一個(gè)框架頁可以顯示多個(gè)網(wǎng)頁。設(shè)置一個(gè)框架的源文件，就是設(shè)置這個(gè)框架要顯示的網(wǎng)頁。框架的源文件在框架屬性面板中設(shè)置。第四講創(chuàng)建多頁面窗口6、設(shè)置框架集和框架的屬性框架集的屬性主要是“邊框”和“邊框?qū)挾取?，這兩者決定了框架的邊框是否顯示?？蚣艿膶傩灾饕恰翱蚣苊Q”、“源文件”、“滾動”、“不能調(diào)整大小”。第四講創(chuàng)建多頁面窗口一般“邊框”設(shè)置為“否”，“邊框?qū)挾取痹O(shè)置為“０”，這樣框架頁就不會顯示出框架的邊框。滾動：設(shè)置框架的右邊或底邊是否出現(xiàn)滾動條。不能調(diào)整大小

6、：如果選中，則用戶在瀏覽網(wǎng)頁時(shí)不能隨意調(diào)整框架的比例?？蚣苊Q在今后鏈接目標(biāo)選擇窗口時(shí)，將會使用到。【練習(xí)】1、創(chuàng)建一個(gè)框架集，結(jié)構(gòu)為“上方固定”，將該框架集保存為grsc.htm。2、創(chuàng)建一個(gè)基本頁，保存為grsc_top.htm，如下圖所示，在該頁中添加1行3列的表格，并添加三個(gè)子欄目名：“我的相冊”和“美圖收藏”、“返回主頁”3、在grsc.htm頁中，選擇上框架，將框架命名為top，并指定框架的源文件為grsc_top.htm；4、在grsc.htm頁中，選擇下框架，將框架命名為main，并指定框架

7、的源文件為grsc_wdxc.htm；5、選擇整個(gè)框架集，再次保存框架頁。7、鏈接目標(biāo)與框架當(dāng)我們創(chuàng)建鏈接的時(shí)候，可以指定鏈接目標(biāo)窗口，比如鏈接目標(biāo)窗口設(shè)置為“_blank”，就是新打開一個(gè)窗口來顯示鏈接的網(wǎng)頁，默認(rèn)情況下，是在原窗口顯示鏈接頁的。當(dāng)我們創(chuàng)建一個(gè)框架集時(shí)，相當(dāng)于一個(gè)網(wǎng)頁被分割成多個(gè)窗口，這時(shí)我們可以選擇用某一個(gè)窗口來顯示鏈接要打開的網(wǎng)頁。第四講創(chuàng)建多頁面窗口注意！必須是在框架頁中，才能設(shè)置鏈接目標(biāo)為某個(gè)框架。比如直接打開grsc_top這個(gè)網(wǎng)頁，選擇“個(gè)人相冊”，設(shè)置目標(biāo)時(shí)是找不到框架名稱的

8、（如左下圖），必須打開grsc這個(gè)框架頁，在里面選擇“個(gè)人相冊”，才能在“目標(biāo)”中找到框架名稱（如右下圖）。第四講創(chuàng)建多頁面窗口【練習(xí)】1、在grsc.htm頁中，選擇“我的相冊”，鏈接到grsc_wdxc.htm，設(shè)置“目標(biāo)”為main；2、選擇“美圖收藏”，鏈接到grsc_mtsc.htm，設(shè)置“目標(biāo)”為main；3、選擇“返回主頁”，鏈接到index.htm，設(shè)置“目標(biāo)”為_parent（代表整個(gè)框架集）；