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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

網(wǎng)頁設計與制作主講：xxx第六章框架與表格布局頁面1項目展示與項目目標

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

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

2.項目資訊關鍵知識點二：創(chuàng)建自定義框架

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

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

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

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

框架名稱源文件邊框邊框顏色邊框寬度邊框高度2.項目資訊關鍵知識點七：設置框架集的屬性

邊框邊框寬度邊框顏色單位“行”和“列”3.項目計劃與決策

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

1）根據(jù)草圖，假設這個主頁是上下結構，下方又分為左右結構，上方框架顯示網(wǎng)站頁眉信息，左方框架顯示導航頁面，右側框架顯示主內容。

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

頂部框架頁面左側框架頁面主框架頁面套用框架后的頁面4.項目實施

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

4.項目實施

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

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

4.項目實施

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

<htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>圖形圖像處理專題學習網(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）用鼠標調整框架集中間的邊框使其顯示效果和諧，然后再次保存此框架網(wǎng)頁，此時選中框架集，點擊“代碼”視圖，代碼如下：

5.項目檢查與評估

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

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

對圖片繪制矩形熱區(qū)“選擇文件”對話框6.強化拓展實訓：框架中超鏈接使用

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

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

6.強化拓展實訓：框架中超鏈接使用

3）保存后按<F12>鍵預覽點擊“素材下載”超級鏈接后的效果如圖所示。

鏈接的文件顯示效果1項目展示與項目目標

掌握表格的屬性的設置技巧掌握使用表格制作單行線的制作方法掌握表格布局的技巧表格布局頁面2.項目資訊

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

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

3.項目計劃與決策

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

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

4.項目實施

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

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

4.項目實施

插入背景圖片與導航后的效果4.項目實施

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

4.項目實施

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

4.項目實施

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

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

溫馨提示

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

評論

0/150

提交評論