（中職）電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目六 框架布局設(shè)計(jì)與制作電子商務(wù)網(wǎng)頁(yè)課件

1、YCF正版可修改PPT（中職）電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目六 框架布局設(shè)計(jì)與制作電子商務(wù)網(wǎng)頁(yè)ppt課件框架的組成部分及屬性的定義1任務(wù)分析所謂“框架”就是將瀏覽器窗口劃分為若干個(gè)區(qū)域,每個(gè)區(qū)域中都顯示有獨(dú)立內(nèi)容的網(wǎng)頁(yè)。一個(gè)網(wǎng)頁(yè)可以包含多個(gè)頁(yè)面,此時(shí)需要用到框架。使用框架可以進(jìn)行頁(yè)面布局,把網(wǎng)頁(yè)劃分為幾個(gè)區(qū)域。例如,一個(gè)水平框架用于放置Banner(標(biāo)題);左垂直框架用于放置導(dǎo)航;右垂直框架用于放置正文。每一個(gè)框架單獨(dú)使用一個(gè)網(wǎng)頁(yè),從而使頁(yè)面設(shè)計(jì)簡(jiǎn)單化?？蚣艹擞糜陧?yè)面布局,還可用于制作目錄。包含框架的網(wǎng)頁(yè)稱(chēng)為框架集。框架集定義了各個(gè)框架的結(jié)構(gòu)、數(shù)量、大小和目標(biāo)等屬性,但其本身并不提供實(shí)際的網(wǎng)頁(yè)內(nèi)容。相

2、關(guān)知識(shí)1.框架的組成部分框架由兩部分組成:框架集和單個(gè)框架。2.框架的作用一是增強(qiáng)導(dǎo)航,在直觀上不用跳轉(zhuǎn)頁(yè)面而直接鏈接到目標(biāo)頁(yè);二是可以引用插入其他頁(yè)面;三是可以簡(jiǎn)單地屏蔽包括的頁(yè)面源碼。3.保存與打開(kāi)框架和框架集的文件在保存框架網(wǎng)頁(yè)時(shí)不僅需要保存框架中的網(wǎng)頁(yè),還要保存框架集文件。可以分別保存,也可以保存全部文件。在打開(kāi)框架網(wǎng)頁(yè)時(shí)如果選取的是框架集文件,則可以同時(shí)打開(kāi)該框架集和其中的框架頁(yè)面。如果選取的是單個(gè)框架頁(yè)面,則只能打開(kāi)該框架頁(yè)面。4.創(chuàng)建一個(gè)新的框架集網(wǎng)頁(yè)(1)運(yùn)行Dreamweaver CS5,選擇“文件”“新建”命令,新建一個(gè)空白的HTML,選擇菜單欄“窗口”“工作區(qū)布局”“經(jīng)典

3、”,在版面上選擇“布局”視圖,如圖61所示。(2)選擇“框架集”工具欄,選擇“左側(cè)和嵌套的頂部框架”。(3)單擊“創(chuàng)建”按鈕,彈出“框架標(biāo)簽輔助功能屬性”對(duì)話(huà)框,在此可為每一個(gè)框架指定一個(gè)標(biāo)題(4)單擊“確定”按鈕,即可創(chuàng)建一個(gè)上方固定、左側(cè)嵌套的框架集。5.保存框架每個(gè)框架包含一個(gè)文件,因此一個(gè)框架集會(huì)包含多個(gè)文件,在保存網(wǎng)頁(yè)時(shí),要將整個(gè)網(wǎng)頁(yè)文檔都保存下來(lái)。(1)選擇“文件” “保存全部”命令,整個(gè)框架邊框會(huì)出現(xiàn)一個(gè)陰影框,同時(shí)會(huì)彈出“另存為”對(duì)話(huà)框,命名為“index.html”,表示整個(gè)框架集的名稱(chēng)。(2)單擊“保存”按鈕,彈出第二個(gè)“另存為”對(duì)話(huà)框,右邊框架內(nèi)側(cè)出現(xiàn)陰影,命名為“mai

4、n.html”,表示右邊框架即主框架的文件名。(3)單擊“保存”按鈕,依次彈出第三個(gè)和第四個(gè)“另存為”對(duì)話(huà)框,分別命名為“l(fā)eft.html”和“top.html”,表示左邊框架和上方框架的文件名,如圖65所示。6.選擇框架和框架集在Dreamweaver CS5中,打開(kāi)“窗口”菜單,選擇“框架”命令,可以打開(kāi)“框架”面板。在面板中單擊要選擇的框架,被選中的框架邊框內(nèi)側(cè)會(huì)出現(xiàn);或者按Alt鍵,在要選擇的框架內(nèi)單擊鼠標(biāo)左鍵也可選中。如果要選中框架集,可以在框架面板中單擊框架集的邊框,此時(shí)框架集的邊框變成虛線(xiàn),。在文檔窗口中,單擊文檔窗口中要選擇的框架,即可選中該框架。在文檔窗口中,當(dāng)鼠標(biāo)指針靠近

5、框架集的邊框并且出現(xiàn)上下箭頭時(shí),單擊整個(gè)框架集的邊框,可以選擇整個(gè)框架集。7.鏈接框架要在一個(gè)框架中使用鏈接打開(kāi)另一個(gè)框架中的文檔,必須設(shè)置鏈接目標(biāo),鏈接的目標(biāo)屬性指定在其中打開(kāi)鏈接的內(nèi)容框架或窗口。如果導(dǎo)航條位于左框架,而希望鏈接的材料顯示在右側(cè)的主要內(nèi)容框架中,則必須將主要內(nèi)容框架的名稱(chēng)指定為每個(gè)導(dǎo)航條鏈接的目標(biāo)。當(dāng)訪(fǎng)問(wèn)者單擊導(dǎo)航鏈接時(shí),將在主框架中打開(kāi)指定的內(nèi)容。在“屬性”面板中的“目標(biāo)”下拉列表中選擇“MainFrame”選項(xiàng),用來(lái)作為指向鏈接的目標(biāo)。在“屬性”面板中的“鏈接”下列表中選擇鏈接文檔應(yīng)在其中顯示的框架或窗口。(1)blank:打開(kāi)一個(gè)新窗口顯示目標(biāo)網(wǎng)頁(yè)。 (2)paren

6、t:目標(biāo)網(wǎng)頁(yè)的內(nèi)容在父框架窗口中顯示。 (3)self:目標(biāo)網(wǎng)頁(yè)的內(nèi)容在當(dāng)前所在框架窗口中顯示。 (4)top:目標(biāo)網(wǎng)頁(yè)的內(nèi)容在最頂層框架窗口中顯示。8.屬性設(shè)置(1)框架集屬性。(2)框架屬性。選擇“窗口”“屬性”,打開(kāi)“屬性”檢查器,點(diǎn)擊“屬性”檢查器右下角的展開(kāi)箭頭查看框架的所有性質(zhì) 。任務(wù)實(shí)施下面以“好滋味”零食網(wǎng)站首頁(yè)為例設(shè)計(jì)框架網(wǎng)頁(yè)的屬性,如圖所示。(1)新建一個(gè)foods文件夾,作為站點(diǎn)文件存放的目錄,并在foods文件夾下建立下級(jí)文件夾images和files,作為網(wǎng)頁(yè)圖片和站點(diǎn)分面存放的目錄。(2)建立站點(diǎn)。(3)新建網(wǎng)頁(yè),切換至布局視圖,單擊“插入”欄中的“框架”展開(kāi)按鈕,

7、在分類(lèi)中單擊“頂部和嵌套的左側(cè)框架”的框架集按鈕,拆分網(wǎng)頁(yè)。(4)保存當(dāng)前框架網(wǎng)頁(yè)及框架集,將框架集保存在站點(diǎn)根目錄下,文件命名為“index.htm”,將左側(cè)框架網(wǎng)頁(yè)保存在files文件夾內(nèi),文件命名為“l(fā)eft.htm”,將右側(cè)框架保存在files文件夾內(nèi),文件命名為“main1.htm”,將頂部框架網(wǎng)頁(yè)保存在files文件夾內(nèi),文件命名為“top.htm”。(5)顯示框架窗口:選擇菜單欄的“窗口”“框架”命令,顯示“框架”面板。(6)設(shè)置網(wǎng)站標(biāo)題:單擊“框架”面板中的三維邊框,選取最外側(cè)邊框,在文檔窗口的標(biāo)題項(xiàng)處輸入網(wǎng)站標(biāo)題“好滋味零食”。(7)設(shè)置框架屬性:選擇“框架”面板中的左下側(cè)框

8、架,在“屬性”面板中“框架名稱(chēng)”項(xiàng)中輸入“l(fā)eftframe”,將“滾動(dòng)”設(shè)置為“否”,“不能調(diào)整大小”設(shè)置為“否”,“邊框”設(shè)置為否。(8)選擇“框架”面板中的右下側(cè)框架,在“屬性”面板中“框架名稱(chēng)”項(xiàng)中輸入“rightframe”,將“滾動(dòng)”設(shè)置為“是”,“不能調(diào)整大小”設(shè)置為“否”,“邊框”設(shè)置為否。(9)選擇“框架”面板中的頂部框架,在“屬性”面板中“框架名稱(chēng)”項(xiàng)中輸入“topframe”,將“滾動(dòng)”設(shè)置為“否”,“不能調(diào)整大小”設(shè)置為“否”,“邊框”設(shè)置為否。(10)設(shè)置框架集屬性:選擇“框架”面板中的最外側(cè)框架,選取整個(gè)框架集,在“屬性”面板中將框架設(shè)置為“否”,“邊框?qū)挾取痹O(shè)置為

9、“0”。使用框架進(jìn)行網(wǎng)頁(yè)布局2任務(wù)分析一個(gè)網(wǎng)站可以包含多個(gè)頁(yè)面,此時(shí)需要用到框架。使用框架可以進(jìn)行頁(yè)面布局,把網(wǎng)頁(yè)劃分為幾個(gè)區(qū)域。利用框架最大的特點(diǎn)就是使網(wǎng)站的風(fēng)格一致,作為框架結(jié)構(gòu)的一個(gè)子框架的內(nèi)容給整個(gè)網(wǎng)站公用,每一個(gè)框架單獨(dú)使用一個(gè)網(wǎng)頁(yè),從而使頁(yè)面設(shè)計(jì)簡(jiǎn)單化。本任務(wù)以“小小書(shū)屋”為例介紹使用框架進(jìn)行網(wǎng)頁(yè)布局的方法。相關(guān)知識(shí)1.常見(jiàn)框架布局常見(jiàn)的框架布局包括對(duì)窗口的水平分割、垂直分割和嵌套分割。(1)水平分割框架(2)垂直分割框架(3)嵌套分割框架2.編輯框架(1)拆分框架。(2)刪除框架。任務(wù)實(shí)施(1)打開(kāi)任務(wù)一中的top.htm網(wǎng)頁(yè)文件,繪制布局,插入素材包中的“title.jpg”作

10、為標(biāo)題圖像。(2)打開(kāi)left.htm網(wǎng)頁(yè)文件,繪制表格,并插入一個(gè)4行1列的表格,在表格中輸入相應(yīng)文字。(3)打開(kāi)main1.htm網(wǎng)頁(yè)文件,繪制表格,并插入素材包中的相應(yīng)圖片。(4)保存當(dāng)前框架集及框架網(wǎng)頁(yè),預(yù)覽效果。(5)將main1.htm中的內(nèi)容刪除,只保留最外側(cè)的布局表格,制作其他網(wǎng)頁(yè),其中包括分頁(yè)“堅(jiān)果”、“糖果”、“肉干”,分別保存在files文件夾內(nèi)。(6)打開(kāi)框架集網(wǎng)頁(yè)index.htm,選取左側(cè)框架網(wǎng)頁(yè)中的網(wǎng)頁(yè)標(biāo)題名,設(shè)置各分頁(yè)的鏈接,將所有鏈接的“目標(biāo)”項(xiàng)設(shè)置為“mainframe”。(7)設(shè)置完成所有鏈接后,執(zhí)行“文件”“保存全部”命令,將所有框架網(wǎng)頁(yè)及框架集保存完畢

11、。使用浮動(dòng)框架制作網(wǎng)頁(yè)3任務(wù)分析浮動(dòng)框架(Iframe)是指在網(wǎng)頁(yè)文檔中,以框架形式顯示嵌套網(wǎng)頁(yè)文檔、主頁(yè)、公告板和記事本的功能。利用這一功能,可以在指定的位置以指定的大小顯示其他網(wǎng)頁(yè)文檔或站點(diǎn),例如滾動(dòng)新聞等。相關(guān)知識(shí)1.浮動(dòng)框架的基本原理在頁(yè)面中創(chuàng)建一個(gè)浮動(dòng)框架,需要先制作好頁(yè)面的其他內(nèi)容,再在頁(yè)面中以手寫(xiě)代碼的方式插入浮動(dòng)框架的代碼。2.浮動(dòng)框架與框架的區(qū)別浮動(dòng)框架可以在任何網(wǎng)頁(yè)的任何位置出現(xiàn),框架只能在框架網(wǎng)頁(yè)中存在。3.浮動(dòng)框架的使用方法在需要使用浮動(dòng)框架的相應(yīng)位置寫(xiě)入代碼。4.浮動(dòng)框架代碼的屬性含義SRC:浮動(dòng)框架中顯示頁(yè)面的源文件的路徑和文件名。Width:浮動(dòng)框架的寬度。Hei

12、ght:浮動(dòng)框架的高度。Name:浮動(dòng)框架的名稱(chēng)。Align:浮動(dòng)框架的排列方式,可以取三個(gè)值:Left (表示居左)、Center(表示居中)、Right(表示居右)。FrameBorder:框架邊框顯示屬性(同普通框架)。FrameSpacing:框架邊框?qū)挾葘傩?同普通框架)。Scrolling:框架滾動(dòng)條顯示屬性(同普通框架)。NOResize:框架大小調(diào)整屬性(同普通框架)。BorderColor:框架邊框顏色屬性(同普通框架)。MarginWidth:框架邊緣寬度屬性(同普通框架)。MarginHeight:框架邊緣高度屬性(同普通框架)。任務(wù)實(shí)施制作一個(gè)展示零食的浮動(dòng)框架,效果如圖所示。(1)使用表格制作頁(yè)面。(2)