第6章 框架與表格布局頁(yè)面_第1頁(yè)
第6章 框架與表格布局頁(yè)面_第2頁(yè)
第6章 框架與表格布局頁(yè)面_第3頁(yè)
第6章 框架與表格布局頁(yè)面_第4頁(yè)
第6章 框架與表格布局頁(yè)面_第5頁(yè)
已閱讀5頁(yè)，還剩28頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

網(wǎng)頁(yè)設(shè)計(jì)與制作主講：xxx第六章框架與表格布局頁(yè)面1項(xiàng)目展示與項(xiàng)目目標(biāo)

掌握在網(wǎng)頁(yè)中創(chuàng)建框架的方法掌握為框架命名并導(dǎo)入框架源文件的方法掌握框架集文件的保存的方法掌握框架集合集屬性與框架屬性的設(shè)置方法掌握編輯框架的內(nèi)容的方法框架布局頁(yè)面2.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)一：創(chuàng)建預(yù)定義框架

新建一個(gè)空白文檔，執(zhí)行“查看”→“可視化助理”→“框架邊框”命令，在文檔窗口中顯示邊框，將光標(biāo)移動(dòng)到邊框，其會(huì)變成雙向箭頭形狀，如圖9-2所示。用光標(biāo)左鍵拖動(dòng)文檔窗口中的框架邊框，將其拖動(dòng)到所需的位置上，釋放光標(biāo)左鍵，即可創(chuàng)建框架集。

2.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)二：創(chuàng)建自定義框架

創(chuàng)建自定義框架的方法是：執(zhí)行“文件”→“新建”命令，在彈出的“新建文檔”對(duì)話框中選擇“示例頁(yè)”→“框架集”選項(xiàng)，在“示例頁(yè)列表中”根據(jù)需要進(jìn)行選擇，單擊“創(chuàng)建”按鈕，即可創(chuàng)建框架集。關(guān)鍵知識(shí)點(diǎn)三：框架的多種選擇方法

選擇框架有以下兩種方法。（1）執(zhí)行“窗口”→“框架”命令，在打開(kāi)的“框架”面板中單擊需要選擇的框架，則框架集的邊界就會(huì)被虛線包圍。（2）按住<Alt>鍵，再單擊文檔窗口中需要選擇的框架，即可選中框架。2.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)四：框架集的多種選擇方法

選擇框架集有以下兩種方法。（1）將光標(biāo)移動(dòng)到整個(gè)邊框上，按住<Alt>鍵，當(dāng)光標(biāo)指針變?yōu)樗椒较蚣^或垂直方向雙向箭頭時(shí)，單擊邊框即可選中整個(gè)框架集。（2）單擊“框架”面板中最外邊的邊框，當(dāng)其顯示為黑邊時(shí)，即可選中框架集。關(guān)鍵知識(shí)點(diǎn)五：框架的多種選擇方法

選擇框架集有以下兩種方法。（1）將光標(biāo)移動(dòng)到整個(gè)邊框上，按住<Alt>鍵，當(dāng)光標(biāo)指針變?yōu)樗椒较蚣^或垂直方向雙向箭頭時(shí)，單擊邊框即可選中整個(gè)框架集。（2）單擊“框架”面板中最外邊的邊框，當(dāng)顯示為黑邊時(shí)，即可選中框架集。2.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)六：設(shè)置框架的屬性

框架名稱源文件邊框邊框顏色邊框?qū)挾冗吙蚋叨?.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)七：設(shè)置框架集的屬性

邊框邊框?qū)挾冗吙蝾伾珕挝弧靶小焙汀傲小?.項(xiàng)目計(jì)劃與決策

通常功能型網(wǎng)站多采用框架結(jié)構(gòu)，根據(jù)分析圖形圖像專題學(xué)習(xí)網(wǎng)站屬于一個(gè)偏重軟件功能的系統(tǒng)，網(wǎng)站設(shè)計(jì)采用框架結(jié)構(gòu)，具體采用“上方固定、左側(cè)嵌套”的框架布局結(jié)構(gòu)。網(wǎng)頁(yè)布局將上方框架存放網(wǎng)站的頁(yè)眉，包括網(wǎng)站名稱與網(wǎng)站地址，左側(cè)部分包括“課堂學(xué)習(xí)”、“實(shí)驗(yàn)實(shí)訓(xùn)素材下載”、“學(xué)生答疑”、“學(xué)習(xí)交流”、“電子作業(yè)批改”、“作業(yè)上傳”、“公告欄”和教師的工作模塊，右側(cè)主窗口包括“實(shí)用教程”、“課外提高”和“視頻教程”等模塊。上方框架圖形圖像專題學(xué)習(xí)網(wǎng)站頁(yè)眉與網(wǎng)址左框架課堂學(xué)習(xí)素材下載學(xué)生答疑學(xué)習(xí)交流作業(yè)上傳作業(yè)成績(jī)主框架公告欄課外提高實(shí)用教程視頻教程網(wǎng)站頁(yè)腳與版權(quán)信息4.項(xiàng)目實(shí)施

1）根據(jù)草圖，假設(shè)這個(gè)主頁(yè)是上下結(jié)構(gòu)，下方又分為左右結(jié)構(gòu)，上方框架顯示網(wǎng)站頁(yè)眉信息，左方框架顯示導(dǎo)航頁(yè)面，右側(cè)框架顯示主內(nèi)容。

提供的3個(gè)網(wǎng)頁(yè)效果以及最終實(shí)現(xiàn)的效果如圖所示。

頂部框架頁(yè)面左側(cè)框架頁(yè)面主框架頁(yè)面套用框架后的頁(yè)面4.項(xiàng)目實(shí)施

2）首先，執(zhí)行“文件”→“新建”命令，在彈出的“新建文檔”對(duì)話框中選擇“示例頁(yè)”→“框架集”選項(xiàng)，在“示例頁(yè)列表中”根據(jù)需要進(jìn)行選擇“上方固定、左側(cè)嵌套”的示例框架結(jié)構(gòu)，單擊“創(chuàng)建”按鈕，即可創(chuàng)建“上方固定，左側(cè)嵌套”的框架集，如圖所示。

4.項(xiàng)目實(shí)施

3）創(chuàng)建完成后，執(zhí)行“文件”→“框架集另存為”命令，在彈出的“另存為”對(duì)話框中輸入框架集的名稱為“default.htm”，保存框架在所提供的素材文件夾中，命名為“index.htm”，標(biāo)題為“圖形圖像處理專題學(xué)習(xí)網(wǎng)站”，執(zhí)行“窗口”→“框架”命令，如圖所示。4.項(xiàng)目實(shí)施

4）單擊“框架”面板中的上側(cè)框架（topframe），在屬性中單擊“瀏覽文件”按鈕在彈出的“選擇HTML文件”對(duì)話框中選擇已經(jīng)做好的網(wǎng)頁(yè)“top.htm”。效果如圖所示。

4.項(xiàng)目實(shí)施

5）點(diǎn)擊框架面板的左側(cè)框架(leftframe)，在屬性面板中“源文件”后單擊“瀏覽文件”按鈕在彈出的“選擇HTML文件”對(duì)話框中選擇已經(jīng)做好的網(wǎng)頁(yè)“l(fā)eft.htm”,點(diǎn)擊框架面板的右側(cè)框架(mainframe)，在屬性面板中“源文件”后點(diǎn)擊“瀏覽文件”按鈕在彈出的“選擇HTML文件”對(duì)話框中選擇已經(jīng)做好的網(wǎng)頁(yè)“right.htm”，如圖所示。4.項(xiàng)目實(shí)施

<htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>圖形圖像處理專題學(xué)習(xí)網(wǎng)站</title></head><framesetrows="106,*"cols="*"frameborder="NO"border="0"framespacing="0"><framesrc="top.htm"name="topFrame"scrolling="NO"noresize><framesetrows="*"cols="220,*"framespacing="0"frameborder="NO"border="0"><framesrc="left.htm"name="leftFrame"scrolling="NO"noresize><framesrc="right.htm"name="mainFrame"></frameset></frameset><noframes><body></body></noframes></html>6）用鼠標(biāo)調(diào)整框架集中間的邊框使其顯示效果和諧，然后再次保存此框架網(wǎng)頁(yè)，此時(shí)選中框架集，點(diǎn)擊“代碼”視圖，代碼如下：

5.項(xiàng)目檢查與評(píng)估

學(xué)習(xí)目標(biāo)評(píng)價(jià)項(xiàng)目了解框架的概念，能夠把握何時(shí)使用框架布局能掌握框架的使用場(chǎng)合掌握在網(wǎng)頁(yè)中創(chuàng)建框架的方法能在網(wǎng)頁(yè)中創(chuàng)建框架掌握框架集文件的保存方法能保存框架集文件掌握框架集合集屬性與框架屬性的設(shè)置方法能設(shè)置框架集屬性與框架的屬性掌握編輯框架的方法能編輯框架掌握框架的綜合使用能使用框架制作網(wǎng)站或項(xiàng)目6.強(qiáng)化拓展實(shí)訓(xùn)：框架中超鏈接使用

5）使用Dreamweaver打開(kāi)網(wǎng)頁(yè)defautl.htm文件，鼠標(biāo)選擇left.htm中的“素材下載”圖片，在屬性面板中選擇“矩形熱點(diǎn)工具”，利用工具在素材下載”圖片上繪制熱點(diǎn)，如左圖所示。單擊“鏈接”文本框右邊的“瀏覽文件”按鈕，在彈出的“選擇文件”對(duì)話框中選擇scxz.html文件，如右圖所示。

對(duì)圖片繪制矩形熱區(qū)“選擇文件”對(duì)話框6.強(qiáng)化拓展實(shí)訓(xùn)：框架中超鏈接使用

2）單擊“確定”按鈕后，在“屬性”欄中的“目標(biāo)”下拉列表框中選擇“mainFrame”選項(xiàng)，如圖所示。

設(shè)置目標(biāo)通常設(shè)置“目標(biāo)”下拉列表框中的topframe、leftframe、mainframe分別表示響應(yīng)得網(wǎng)頁(yè)scxz.html鏈接后顯示的區(qū)域，通常選擇_parent可以返回到父窗口中。

6.強(qiáng)化拓展實(shí)訓(xùn)：框架中超鏈接使用

3）保存后按<F12>鍵預(yù)覽點(diǎn)擊“素材下載”超級(jí)鏈接后的效果如圖所示。

鏈接的文件顯示效果1項(xiàng)目展示與項(xiàng)目目標(biāo)

掌握表格的屬性的設(shè)置技巧掌握使用表格制作單行線的制作方法掌握表格布局的技巧表格布局頁(yè)面2.項(xiàng)目資訊

淮信科技有限公司培訓(xùn)中心針對(duì)淮安的市場(chǎng)競(jìng)爭(zhēng)，滿足企業(yè)自身經(jīng)營(yíng)和打造服務(wù)品牌的需要而建立的，網(wǎng)站不只是滿足中心實(shí)施簡(jiǎn)單的網(wǎng)絡(luò)宣傳，它也是涉及中心服務(wù)的內(nèi)部管理改革、經(jīng)營(yíng)流程重組等具體問(wèn)題，更涉及到整個(gè)服務(wù)體制和機(jī)制的深層次變革。中心網(wǎng)站的建設(shè)，最根本的是通過(guò)打造一個(gè)培訓(xùn)品牌，促使公司培訓(xùn)服務(wù)水平產(chǎn)生質(zhì)的飛躍，真正體現(xiàn)企業(yè)“用心服務(wù)、用戶至上”的服務(wù)理念。

根據(jù)需求，本網(wǎng)站主要包括“組織架構(gòu)”、“信息交流”、“組織創(chuàng)建”、“圖片瀏覽”、“關(guān)愛(ài)社會(huì)”等幾個(gè)模塊，同時(shí)本網(wǎng)站要能夠?qū)崿F(xiàn)對(duì)所有信息的查詢，能夠顯示并下載相關(guān)的文檔，此外網(wǎng)站還有“服務(wù)動(dòng)態(tài)”、“專家指導(dǎo)”等內(nèi)容。

3.項(xiàng)目計(jì)劃與決策

針對(duì)中心網(wǎng)站的基本設(shè)計(jì)思路，以藍(lán)色為主色調(diào)，突出高新科技公司形象特點(diǎn)，頁(yè)面干凈整潔、主次分明，整個(gè)界面采用滿屏設(shè)計(jì)?；葱趴萍加邢薰九嘤?xùn)中心網(wǎng)站網(wǎng)站標(biāo)題“用心服務(wù)、用戶至上”的服務(wù)理念網(wǎng)站動(dòng)畫(huà)網(wǎng)站導(dǎo)航文檔搜索服務(wù)動(dòng)態(tài)專家指導(dǎo)技術(shù)研討關(guān)愛(ài)社會(huì)分類顯示友情鏈接版權(quán)信息4.項(xiàng)目實(shí)施

1）創(chuàng)建“淮信科技有限公司培訓(xùn)中心網(wǎng)站”文件夾，在文件加中創(chuàng)建“images”、“flash”等文件夾，根據(jù)需要，處理相關(guān)的圖片并保存到“images”文件夾中。2）打開(kāi)Dreamweaver軟件創(chuàng)建新網(wǎng)頁(yè)，并將其保存到“淮信科技有限公司培訓(xùn)中心網(wǎng)站”文件夾中，命名為“index.htm”，然后設(shè)置“頁(yè)面屬性”中“網(wǎng)頁(yè)標(biāo)題”為“歡迎訪問(wèn)淮信科技有限公司培訓(xùn)中心網(wǎng)站”，背景色為白色，上、下、左、右邊距為0像素。3）在網(wǎng)頁(yè)中插入表格，具體參數(shù)為1行3列，寬為100%，高為65像素，填充、間距、邊框都為0像素。分別設(shè)置三列的寬度為20%，60%，20%。

4.項(xiàng)目實(shí)施

4）分別將“head.gif”、“topmid.jpg”、“headright.gif”插入到表格的第1個(gè)單元格、第2個(gè)單元格和第3個(gè)單元格中，最終效果如圖所示。插入淮信科技有限公司培訓(xùn)中心網(wǎng)logo4.項(xiàng)目實(shí)施

5）在網(wǎng)頁(yè)中插入表格，具體參數(shù)為1行1列，寬為100%，高為160像素，填充、間距、邊框都為0像素。將光標(biāo)在單元格中點(diǎn)擊一下，然后設(shè)置表格的背景圖為“mid.jpg”。6）在網(wǎng)頁(yè)中再次插入表格，具體參數(shù)為3行1列，寬為100%，填充、間距、邊框都為0像素。將光標(biāo)插入到第1個(gè)單元格中，設(shè)置背景色為“#243569”(藍(lán)色)。高度設(shè)為1像素，同時(shí)插入“space.gif”到該單元格，第3個(gè)單元格設(shè)置和第一個(gè)相同，設(shè)置第2個(gè)單元格的背景色為“#E3E3E3”。7）在第2個(gè)單元格中嵌套新表格，具體參數(shù)為1行7列，寬為720，高25像素，填充、邊框?yàn)?像素，間距為1像素，背景色為白色，設(shè)置表格單元格的背景色為“#E3E3E3”，依次給單元格中輸入“首頁(yè)”、組織架構(gòu)”、“學(xué)習(xí)型班組”、“信息交流”、“組織創(chuàng)建”、“圖片瀏覽”、“關(guān)愛(ài)社會(huì)”等文字，并設(shè)置他們的超級(jí)鏈接地址為“index.htm”，如圖9-18所示。

4.項(xiàng)目實(shí)施

插入背景圖片與導(dǎo)航后的效果4.項(xiàng)目實(shí)施

8）繼續(xù)在網(wǎng)頁(yè)中插入表格，具體參數(shù)為1行2列，寬為100%，填充、間距、邊框都為0像素，第1列列寬為20%，第2列列寬為80%。9）在第1列中嵌套一個(gè)6行2列的表格，寬為100%。設(shè)置1、3、5行中的兩列寬分別為30%和70%，高為28像素，背景色為“#E3E3E3”。并在1、3、5行中第1列插入圖片“l(fā)eft.jpg”，第2列依次插入“文檔搜索”、“分類顯示”、“友情鏈接”。將第2、4、6行合并單元格，單元格的高依次為100像素、80像素、30像素，如圖所示。

4.項(xiàng)目實(shí)施

10）在第2行中插入表格3行2列，寬100%，高90像素。第1行的第一個(gè)單元格中輸入“檢索內(nèi)容”，第2個(gè)單元格中插入文本框（表單元素）；第2行的第1個(gè)單元格中輸入“文件類型”，第2個(gè)單元格中插入列表框（表單元素），第3行的第1個(gè)單元格中插入查詢按鈕（表單元素），第2個(gè)單元格中插入重置按鈕（表單元素）。11）鼠標(biāo)在第4行中插入表格2行2列，寬70%，高80%。依次在四個(gè)單元格中插入“全部文檔”、“組織管理”、“規(guī)章制度”、“流程管理”，并設(shè)置他們的超級(jí)鏈接為“index.htm”。將光標(biāo)插入到第6行中，然后插入“互動(dòng)學(xué)習(xí)網(wǎng)”，效果如圖所示。

4.項(xiàng)目實(shí)施

12）在右邊的單元格中嵌套新表格，具體參數(shù)為1行7列，寬為771像素，填充、間距、邊框?yàn)?像素，背景色為白色，采用第7步制作橫線的方式，將第2、4、6列寬設(shè)置為1像素，背景色設(shè)置為“#CCCCCC”，并在其中插入“space.gif”圖片。設(shè)置第1、3、5、7列寬為192像素。

13）在第1列中嵌套新表格，具體參數(shù)為4行1列，寬為177像素，在第1行中插入“pix03.jpg”，第2行中插入“pix003.jpg”，第3行中插入“淮信科技有限公

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論