項目三頁面布局設(shè)計

1、項目三項目三 頁面布局設(shè)計頁面布局設(shè)計第 2 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理n 項目簡介項目簡介 本項目是設(shè)計并制作一個第八屆北京體育電影周網(wǎng)站。本項目是設(shè)計并制作一個第八屆北京體育電影周網(wǎng)站。 該網(wǎng)站利用表格進(jìn)行整體布局，通過表格屬性的設(shè)置控制頁面內(nèi)該網(wǎng)站利用表格進(jìn)行整體布局，通過表格屬性的設(shè)置控制頁面內(nèi)容的顯示，同時還利用行、列以及單元格的操作及屬性設(shè)置，使得頁容的顯示，同時還利用行、列以及單元格的操作及屬性設(shè)置，使得頁面更加整潔美觀；該網(wǎng)站采用面更加整潔美觀；該網(wǎng)站采用“上中下上中下”結(jié)構(gòu)的布局形式，其中還涉結(jié)構(gòu)的布局形式，其中還涉及表格的嵌套使用等。及表格的嵌套使用等。第

2、3 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理n 項目目標(biāo)項目目標(biāo)本項目以設(shè)計一個北京體育電影周網(wǎng)站為例，要求結(jié)合網(wǎng)站布局本項目以設(shè)計一個北京體育電影周網(wǎng)站為例，要求結(jié)合網(wǎng)站布局設(shè)計的特點，學(xué)會并掌握創(chuàng)建表格的方法設(shè)計的特點，學(xué)會并掌握創(chuàng)建表格的方法,能夠熟練編輯表格并設(shè)置能夠熟練編輯表格并設(shè)置表格屬性；掌握利用框架和框架集來布局網(wǎng)頁；掌握并學(xué)會利用表格屬性；掌握利用框架和框架集來布局網(wǎng)頁；掌握并學(xué)會利用AP元素布局網(wǎng)頁；學(xué)會利用元素布局網(wǎng)頁；學(xué)會利用spry構(gòu)件布局網(wǎng)頁。構(gòu)件布局網(wǎng)頁。第 4 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理n 工作任務(wù)工作任務(wù)結(jié)合北京體育電影周相關(guān)信息，設(shè)計一個北

3、京體育電影周網(wǎng)站結(jié)合北京體育電影周相關(guān)信息，設(shè)計一個北京體育電影周網(wǎng)站。該網(wǎng)站由首頁、北京體育電影資訊、北京體育電影論壇組成，其中。該網(wǎng)站由首頁、北京體育電影資訊、北京體育電影論壇組成，其中利用表格、框架、利用表格、框架、AP元素以及元素以及Spry構(gòu)件分別對網(wǎng)頁進(jìn)行布局。構(gòu)件分別對網(wǎng)頁進(jìn)行布局。 第 5 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理模塊一模塊一 使用表格布局網(wǎng)頁使用表格布局網(wǎng)頁(一一)學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)學(xué)會并掌握創(chuàng)建表格的方法，能夠熟練編輯表格，設(shè)置表格屬性學(xué)會并掌握創(chuàng)建表格的方法，能夠熟練編輯表格，設(shè)置表格屬性；對網(wǎng)頁進(jìn)行布局。；對網(wǎng)頁進(jìn)行布局。(二二) 任務(wù)分析任務(wù)分析、繪制

4、表格編輯網(wǎng)頁布局；、繪制表格編輯網(wǎng)頁布局； 、制作標(biāo)題與版權(quán)說明；、制作標(biāo)題與版權(quán)說明；、制作導(dǎo)航欄的；、制作導(dǎo)航欄的；、編輯網(wǎng)頁表格內(nèi)容；、編輯網(wǎng)頁表格內(nèi)容；第 6 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理第 7 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理任務(wù)一：建立站點并新建網(wǎng)頁；任務(wù)一：建立站點并新建網(wǎng)頁； （1）在）在C:Inetpub下建立站點目錄下建立站點目錄tyweb，并使用高級標(biāo)簽定義站點，并使用高級標(biāo)簽定義站點，站點名為，站點名為“tyweb”，如圖，如圖3.1.2所示。所示。（2）在起始頁中的）在起始頁中的“創(chuàng)建新項目創(chuàng)建新項目”中單擊中單擊“html”創(chuàng)建新網(wǎng)頁。創(chuàng)建新

5、網(wǎng)頁。（3）執(zhí)行）執(zhí)行“文件文件”“保存保存”菜單命令，將網(wǎng)頁保存在站點根目錄下菜單命令，將網(wǎng)頁保存在站點根目錄下，保存文件名為，保存文件名為index.html，如圖，如圖3.1.3所示。所示。第 8 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.1.2 建立站點第一步建立站點第一步 第 9 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.1.3建立站點第三步建立站點第三步 任務(wù)二任務(wù)二 繪制表格編輯網(wǎng)頁布局繪制表格編輯網(wǎng)頁布局（1）單擊插入欄的下拉按鈕，展開插入欄，單擊）單擊插入欄的下拉按鈕，展開插入欄，單擊“常用常用”選項，選項，打開常用工具欄。打開常用工具欄。（2）單擊）單擊“表

6、格表格”按鈕，創(chuàng)建表格。在彈出的按鈕，創(chuàng)建表格。在彈出的“表格表格”對話框中，對話框中，設(shè)置參數(shù)如圖設(shè)置參數(shù)如圖3.1.4所示，單擊所示，單擊“確定確定”按鈕，關(guān)閉對話框。按鈕，關(guān)閉對話框。第 10 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.1.3 表格布局網(wǎng)頁第二步表格布局網(wǎng)頁第二步 第 11 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理n （3）選中表格第一行，單擊）選中表格第一行，單擊“屬性屬性”面板上面板上“合并單元格合并單元格”按鈕對按鈕對第一行的單元格進(jìn)行合并，如圖第一行的單元格進(jìn)行合并，如圖3.1.5所示，同理合并第三行單元格所示，同理合并第三行單元格。n （4）設(shè)置表格行

7、高，將光標(biāo)放置在第一行，修改）設(shè)置表格行高，將光標(biāo)放置在第一行，修改“屬性屬性”面板上面板上“高高”為為“265”，如圖，如圖3.1.6所示，同理設(shè)置第二行所示，同理設(shè)置第二行“高高”為為“500”，第三行，第三行“高高”為為“70”；設(shè)置第二行左側(cè)單元格的；設(shè)置第二行左側(cè)單元格的“寬寬”為為“200”，右側(cè)單元格的，右側(cè)單元格的“寬寬”設(shè)為設(shè)為“700”。n （5）選擇表格，設(shè)置為對齊方式：選中）選擇表格，設(shè)置為對齊方式：選中標(biāo)簽，在標(biāo)簽，在“屬性屬性”面面板上設(shè)置板上設(shè)置“對齊方式對齊方式”為為“居中居中”，如圖，如圖3.1.7所示。所示。n （6）在單元格內(nèi)輸入文字。）在單元格內(nèi)輸入文字

8、。n （7）保存網(wǎng)頁，預(yù)覽效果如圖）保存網(wǎng)頁，預(yù)覽效果如圖3.1.8所示。所示。圖圖3.1.5合并單元格合并單元格 圖圖3.1.6 設(shè)置表格行高設(shè)置表格行高 第 12 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.1.7設(shè)置表格對齊方式設(shè)置表格對齊方式 圖圖3.1.8表格布局效果表格布局效果 第 13 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理n 任務(wù)三任務(wù)三 制作標(biāo)題與版權(quán)說明制作標(biāo)題與版權(quán)說明、復(fù)制所有素材圖片至站點目錄的、復(fù)制所有素材圖片至站點目錄的images下下、將鼠標(biāo)定位在表格的第一行，執(zhí)行、將鼠標(biāo)定位在表格的第一行，執(zhí)行“插入插入圖像圖像”命令，在彈出的命令，在彈出的對話框中

9、選擇對話框中選擇images文件夾下的圖片文件文件夾下的圖片文件“top.gif”、選取插入的圖片，在、選取插入的圖片，在“屬性屬性”面板中設(shè)置居中對齊面板中設(shè)置居中對齊、將鼠標(biāo)定位在表格的第三行，插入水平線，并在、將鼠標(biāo)定位在表格的第三行，插入水平線，并在“屬性屬性”面板中將面板中將水平線設(shè)置為寬水平線設(shè)置為寬600像素，居中對齊，取消陰影，并設(shè)置顏色像素，居中對齊，取消陰影，并設(shè)置顏色、輸入制作日期及版權(quán)說明、輸入制作日期及版權(quán)說明、保存網(wǎng)頁，預(yù)覽效果如圖、保存網(wǎng)頁，預(yù)覽效果如圖3.1.9所示所示 第 14 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.1.9 標(biāo)題與版權(quán)效果標(biāo)題與版權(quán)

10、效果 第 15 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理n 任務(wù)四任務(wù)四 制作導(dǎo)航欄制作導(dǎo)航欄（1）打開上述活動中制作的）打開上述活動中制作的index.html網(wǎng)頁，將光標(biāo)定位在第二行左網(wǎng)頁，將光標(biāo)定位在第二行左側(cè)單元格內(nèi)，在屬性面板中將垂直對齊方式設(shè)為側(cè)單元格內(nèi)，在屬性面板中將垂直對齊方式設(shè)為“頂端頂端”對齊（如圖對齊（如圖3.1.10所示）；并插入所示）；并插入2行行1列寬列寬100%的表格，在該嵌套表格的第一的表格，在該嵌套表格的第一行單元格中插入一行一列表格，如圖行單元格中插入一行一列表格，如圖3.1.11所示。所示。（2）讓表格居中對齊，在其中輸入如圖）讓表格居中對齊，在其中輸入

11、如圖3.1.12所示文字，并對文字進(jìn)行所示文字，并對文字進(jìn)行編輯。編輯。（3）在嵌套表格的第二行單元格內(nèi)再插入）在嵌套表格的第二行單元格內(nèi)再插入6行行1列的表格，如圖列的表格，如圖3.1.13所所示，修改表格屬性，設(shè)置參數(shù)如圖示，修改表格屬性，設(shè)置參數(shù)如圖3.1.14所示。所示。（4）在插入的表格中輸入相應(yīng)文字，效果如圖）在插入的表格中輸入相應(yīng)文字，效果如圖3.1.15所示，將所示，將“欄目導(dǎo)欄目導(dǎo)航航”字號設(shè)為字號設(shè)為18像素，并設(shè)為斜體，在該單元格設(shè)置背景顏色為像素，并設(shè)為斜體，在該單元格設(shè)置背景顏色為“#F5F5F5”；設(shè)置；設(shè)置“體育電影資訊體育電影資訊”、“體育電影論壇體育電影論壇”

12、和和“聯(lián)系聯(lián)系方式方式”的鏈接分別到的鏈接分別到files/tdzx.html、files/tdlt.html和和files/lxfs.html，單擊，單擊“修改修改”菜單欄下面的菜單欄下面的“頁面屬性頁面屬性”子菜單，子菜單，在彈出的對話框中進(jìn)行在彈出的對話框中進(jìn)行“鏈接鏈接”分類的設(shè)置，如圖分類的設(shè)置，如圖3.1.16所示。所示。第 16 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.1.13 創(chuàng)建嵌套表格創(chuàng)建嵌套表格 圖圖3.1.14設(shè)置表格屬性設(shè)置表格屬性圖圖3.1.15 表格效果表格效果第 17 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理（5）單擊表格邊框，選取表格。）單擊表格邊

13、框，選取表格。（6）在屬性面板中將）在屬性面板中將“水平水平”設(shè)置為居中設(shè)置為居中對齊，垂直設(shè)置為對齊，垂直設(shè)置為“居中居中”。（7）保存當(dāng)前網(wǎng)頁。）保存當(dāng)前網(wǎng)頁。圖圖3.1.16 表格效果表格效果第 18 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理n 任務(wù)五任務(wù)五 編輯網(wǎng)頁表格內(nèi)容編輯網(wǎng)頁表格內(nèi)容（1）打開上述活動中制作的）打開上述活動中制作的index.htm網(wǎng)頁，將光標(biāo)定位在第二行右側(cè)網(wǎng)頁，將光標(biāo)定位在第二行右側(cè)單元格內(nèi)，在屬性面板中將垂直對齊方式設(shè)為單元格內(nèi)，在屬性面板中將垂直對齊方式設(shè)為“頂端頂端”對齊，插入對齊，插入12行行2列，寬列，寬80%的表格，如圖的表格，如圖3.1.17所

14、示。在屬性面板中將該表格所示。在屬性面板中將該表格的對齊方式設(shè)置為的對齊方式設(shè)置為“居中對齊居中對齊”。（2）將光標(biāo)定位在第一個單元格中，拖動鼠標(biāo)選中所有單元格，并在）將光標(biāo)定位在第一個單元格中，拖動鼠標(biāo)選中所有單元格，并在屬性面板中設(shè)置高度為屬性面板中設(shè)置高度為35，如圖，如圖3.1.18所示。所示。（3）將光標(biāo)放置在第一個單元格，插入圖片）將光標(biāo)放置在第一個單元格，插入圖片“images/fh.gif”，輸入，輸入文字標(biāo)題文字，并設(shè)置其屬性，如圖文字標(biāo)題文字，并設(shè)置其屬性，如圖3.1.19所示。所示。（4）在依次的下面三行單元格中輸入該部分的新聞標(biāo)題內(nèi)容，并進(jìn)行）在依次的下面三行單元格中輸

15、入該部分的新聞標(biāo)題內(nèi)容，并進(jìn)行文字的位置調(diào)整，直到合適為止，如圖文字的位置調(diào)整，直到合適為止，如圖3.1.20所示。所示。（5）重復(fù)步驟（）重復(fù)步驟（1）（）（3），完成網(wǎng)頁內(nèi)容，如圖），完成網(wǎng)頁內(nèi)容，如圖3.1.21所示。所示。第 19 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.1.18 設(shè)置表格屬性設(shè)置表格屬性圖圖3.1.19設(shè)置表格單元格屬性設(shè)置表格單元格屬性圖圖3.1.20設(shè)置表格屬性設(shè)置表格屬性第 20 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.1.21 最終效果最終效果第 21 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理模塊二模塊二 建立框架網(wǎng)頁建立框架網(wǎng)頁 (一一

16、)學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)掌握利用框架和框架集來布局網(wǎng)頁。掌握利用框架和框架集來布局網(wǎng)頁。 (二二) 任務(wù)分析任務(wù)分析1、創(chuàng)建框架網(wǎng)頁；、創(chuàng)建框架網(wǎng)頁； 2、保存框架和框架集文檔；、保存框架和框架集文檔；3、制作框架網(wǎng)頁內(nèi)容；、制作框架網(wǎng)頁內(nèi)容；4、設(shè)置框架屬性；、設(shè)置框架屬性；第 22 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.2.1 框架布局網(wǎng)頁效果圖框架布局網(wǎng)頁效果圖 第 23 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理任務(wù)一任務(wù)一 ：創(chuàng)建框架網(wǎng)頁：創(chuàng)建框架網(wǎng)頁 本任務(wù)中通過創(chuàng)建框架來對網(wǎng)頁布局。本任務(wù)中通過創(chuàng)建框架來對網(wǎng)頁布局。 1、在、在Dreamweaver CS3起始頁中選擇起始

17、頁中選擇“文件文件新建新建”命令，打開命令，打開“新建文檔新建文檔”對話框。對話框。 2、在、在“示例中的頁示例中的頁”選項卡中的選項卡中的“示例文件夾示例文件夾”列表框中選擇列表框中選擇“框框架集架集”選項，在右側(cè)的選項，在右側(cè)的“示例頁示例頁”列表框中選擇列表框中選擇“上方固定，左側(cè)嵌上方固定，左側(cè)嵌套套”框架結(jié)構(gòu)，如圖框架結(jié)構(gòu)，如圖3.2.2所示。所示。 3、單擊、單擊“創(chuàng)建創(chuàng)建”按鈕，打開按鈕，打開“框架標(biāo)簽輔助功能屬性框架標(biāo)簽輔助功能屬性”對話框，在對話框，在“框架框架”下拉列表中選擇下拉列表中選擇“mainframe”框架，在框架，在“標(biāo)題標(biāo)題”文本框中文本框中輸入該框架的標(biāo)題，通

18、常保持默認(rèn)設(shè)置，如圖輸入該框架的標(biāo)題，通常保持默認(rèn)設(shè)置，如圖3.2.3所示。所示。 4、單擊、單擊“確定確定”按鈕關(guān)閉對話框，完成框架網(wǎng)頁的創(chuàng)建。按鈕關(guān)閉對話框，完成框架網(wǎng)頁的創(chuàng)建。 第 24 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.2.2創(chuàng)建框架網(wǎng)頁創(chuàng)建框架網(wǎng)頁圖圖3.2.3設(shè)置框架標(biāo)簽屬性設(shè)置框架標(biāo)簽屬性第 25 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理任務(wù)二任務(wù)二 ：保存框架和框架集文檔：保存框架和框架集文檔 1、選擇、選擇“文件文件保存全部保存全部”命令，打開命令，打開“另存為另存為”對話框。對話框。 2、在、在“另存為另存為”下拉列表中選擇保存的路徑，在下拉列表中選擇保存

19、的路徑，在“文件名文件名”文本框文本框中輸入中輸入“tdzx.html”，如圖，如圖3.2.4所示。所示。 3、單擊、單擊“保存保存”按鈕完成框架集網(wǎng)頁文檔的保存，同時打開按鈕完成框架集網(wǎng)頁文檔的保存，同時打開“另存另存為為”對話框進(jìn)行框架網(wǎng)頁文檔對話框進(jìn)行框架網(wǎng)頁文檔“main.html”的保存，如圖的保存，如圖3.2.5所示所示。 4、單擊、單擊“保存保存”按鈕完成框架網(wǎng)頁文檔的保存，同時打開按鈕完成框架網(wǎng)頁文檔的保存，同時打開“另存為另存為”對話框進(jìn)行框架網(wǎng)頁文檔對話框進(jìn)行框架網(wǎng)頁文檔“l(fā)eft.html”的保存的保存 5、同理，保存框架網(wǎng)頁文檔、同理，保存框架網(wǎng)頁文檔“top.html

20、”，即完成所有框架網(wǎng)頁文檔，即完成所有框架網(wǎng)頁文檔的保存。的保存。第 26 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.2.4 保存框架（一）保存框架（一） 第 27 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.2.5保存框架（二）保存框架（二）第 28 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理任務(wù)三任務(wù)三 ：制作框架網(wǎng)頁內(nèi)容：制作框架網(wǎng)頁內(nèi)容 （1）在）在“top”框架中，插入圖片框架中，插入圖片“top.jpg”，居中對齊；并調(diào)整該框，居中對齊；并調(diào)整該框架的高度為架的高度為265px，設(shè)置，設(shè)置top.html的頁面屬性，如圖的頁面屬性，如圖3.2.6所示。所示。（2）在）

21、在“l(fā)eft”框架中，設(shè)置框架中，設(shè)置“頁面屬性頁面屬性”，修改，修改“頁面字體頁面字體”為為“黑黑體體”，“文本顏色文本顏色”為為“#000080”，“背景顏色背景顏色”為為“#AAB3FB”，如圖，如圖3.2.7所示。所示。（3）插入一個）插入一個4行行1列的表格，單元格高度設(shè)為列的表格，單元格高度設(shè)為35，并輸入文字內(nèi)容，并輸入文字內(nèi)容，設(shè)置文字水平設(shè)置文字水平“居中對齊居中對齊”，文字加粗、大小，文字加粗、大小16px，如圖，如圖3.2.8所示所示；分別對四行文字設(shè)置鏈接，；分別對四行文字設(shè)置鏈接，“返回首頁返回首頁”鏈接到鏈接到./index.html，目，目標(biāo)為標(biāo)為_top，“資訊

22、主頁資訊主頁”鏈接到鏈接到main.html，目標(biāo)為，目標(biāo)為mainframe，“體育資訊體育資訊”鏈接到鏈接到tyzx.html，目標(biāo)為，目標(biāo)為mainframe，“電影資訊電影資訊”鏈接到鏈接到dyzx.html，目標(biāo)為，目標(biāo)為mainframe。在該框架中進(jìn)行頁面屬性的。在該框架中進(jìn)行頁面屬性的鏈接分類設(shè)置，如圖鏈接分類設(shè)置，如圖3.2.9所示。所示。第 29 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理（4）“main.html”框架網(wǎng)頁內(nèi)容的制作。框架網(wǎng)頁內(nèi)容的制作。在在other文件夾中找到對應(yīng)的文字素材，并進(jìn)行文字的編排，保存框文件夾中找到對應(yīng)的文字素材，并進(jìn)行文字的編排，保存框架

23、網(wǎng)頁，選中框架集后預(yù)覽，其效果如圖架網(wǎng)頁，選中框架集后預(yù)覽，其效果如圖3.2.10所示。所示。（5） 利用相同的方法完成其他兩個利用相同的方法完成其他兩個“體育資訊體育資訊”和和“電影資訊電影資訊”的的頁面，如圖頁面，如圖3.2.11所示。所示。第 30 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.2.6設(shè)置頁面屬性設(shè)置頁面屬性第 31 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.2.8 創(chuàng)建表格創(chuàng)建表格圖圖3.2.9 left.html頁面屬性的鏈接設(shè)置頁面屬性的鏈接設(shè)置第 32 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.2.10 框架網(wǎng)頁效果圖框架網(wǎng)頁效果圖第 33 頁

24、中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理任務(wù)四任務(wù)四 ：設(shè)置框架屬性：設(shè)置框架屬性 1、選擇、選擇“窗口窗口框架框架”命令，打開命令，打開“框架框架”面板，選中框架集，如圖面板，選中框架集，如圖3.2.12所示。所示。 2、在、在“屬性屬性”面板的面板的“行行”欄的欄的“值值”文本框中輸入文本框中輸入“265”，即頂，即頂部框架高度為部框架高度為“265”，如圖，如圖3.2.13所示。所示。 3、在、在“框架框架”面板中選擇嵌套框架集，如圖所示。面板中選擇嵌套框架集，如圖所示。 4、在、在“屬性屬性”面板的面板的“列列”欄的欄的“值值”文本框中輸入文本框中輸入“180”，如圖，如圖3.2.15

25、所示。所示。 5、設(shè)置框架集的網(wǎng)頁標(biāo)題。、設(shè)置框架集的網(wǎng)頁標(biāo)題。 （1）選擇要設(shè)置框架集網(wǎng)頁標(biāo)題的框架集）選擇要設(shè)置框架集網(wǎng)頁標(biāo)題的框架集“tdzx”。 （2）在文檔工具欄的）在文檔工具欄的“標(biāo)題標(biāo)題”文本框中輸入網(wǎng)頁標(biāo)題文本框中輸入網(wǎng)頁標(biāo)題“第八屆北京第八屆北京國際電影體育周國際電影體育周”，如圖，如圖3.2.16所示。所示。第 34 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.2.12 框架面板框架面板圖圖3.2.13 設(shè)置框架屬性設(shè)置框架屬性圖圖3.2.14 設(shè)置框架屬性設(shè)置框架屬性圖圖3.2.16 設(shè)置框架集網(wǎng)頁標(biāo)題設(shè)置框架集網(wǎng)頁標(biāo)題第 35 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)

26、與管理模塊三模塊三 使用使用AP元素布局網(wǎng)頁元素布局網(wǎng)頁 (一一)學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)掌握并學(xué)會利用掌握并學(xué)會利用AP元素布局網(wǎng)頁，學(xué)會元素布局網(wǎng)頁，學(xué)會spry構(gòu)件的使用。構(gòu)件的使用。 (二二) 任務(wù)分析任務(wù)分析1、為網(wǎng)頁設(shè)置頁面屬性；、為網(wǎng)頁設(shè)置頁面屬性； 2、創(chuàng)建、創(chuàng)建AP元素布局網(wǎng)頁；元素布局網(wǎng)頁；3、編輯網(wǎng)頁內(nèi)容；、編輯網(wǎng)頁內(nèi)容；4、利用、利用spry構(gòu)件編輯網(wǎng)頁內(nèi)容構(gòu)件編輯網(wǎng)頁內(nèi)容第 36 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.3 .1 AP元素布局網(wǎng)頁效果圖元素布局網(wǎng)頁效果圖第 37 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理任務(wù)一任務(wù)一 ：為網(wǎng)頁設(shè)置頁面屬性：為網(wǎng)頁設(shè)置

27、頁面屬性 1、在、在Dreamweaver CS3起始頁中選擇起始頁中選擇“文件文件新建新建”命令，打開命令，打開“新建文檔新建文檔”對話框。對話框。 2、在、在“空白頁空白頁”選項卡中的選項卡中的“頁面類型頁面類型”列表框中選擇列表框中選擇“HTML”選選項，在右側(cè)的項，在右側(cè)的“布局布局”列表框中選擇列表框中選擇“無無”，如圖，如圖3.3.2所示。所示。 3、單擊、單擊“創(chuàng)建創(chuàng)建”按鈕，完成網(wǎng)頁的創(chuàng)建，并保存該網(wǎng)頁在按鈕，完成網(wǎng)頁的創(chuàng)建，并保存該網(wǎng)頁在files文件文件夾中，命名為夾中，命名為tdlt.html。 4、在、在“屬性屬性”面板中設(shè)置單擊面板中設(shè)置單擊“頁面屬性頁面屬性”按鈕，

28、如圖按鈕，如圖3.3.3所示。所示。 5、在彈出的、在彈出的“頁面屬性頁面屬性”對話框中設(shè)置參數(shù)如圖對話框中設(shè)置參數(shù)如圖3.3.4所示。所示。第 38 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.3.2創(chuàng)建網(wǎng)頁創(chuàng)建網(wǎng)頁第 39 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.3.3設(shè)置頁面屬性設(shè)置頁面屬性圖圖3.3.4 設(shè)置頁面屬性設(shè)置頁面屬性第 40 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理任務(wù)二任務(wù)二 ：創(chuàng)建：創(chuàng)建AP元素布局網(wǎng)頁元素布局網(wǎng)頁 1、選擇、選擇“布局布局”工具面板中的工具面板中的“繪制繪制AP DIV”，如圖，如圖3.3.5所示。所示。 2、鼠標(biāo)呈、鼠標(biāo)呈“+”字形

29、，在網(wǎng)頁編輯窗口中的任意位置按下鼠標(biāo)左鍵不放字形，在網(wǎng)頁編輯窗口中的任意位置按下鼠標(biāo)左鍵不放進(jìn)行拖動即創(chuàng)建進(jìn)行拖動即創(chuàng)建AP DIV。在繪制過程中，編輯窗口右下角將動態(tài)顯示。在繪制過程中，編輯窗口右下角將動態(tài)顯示正在繪制的正在繪制的AP DIV的大小，如圖的大小，如圖3.3.6所示，可以邊繪制邊查看其大小所示，可以邊繪制邊查看其大小，至合適大小后再釋放鼠標(biāo)。，至合適大小后再釋放鼠標(biāo)。 3、創(chuàng)建嵌套、創(chuàng)建嵌套AP DIV，將鼠標(biāo)光標(biāo)定位到所需的，將鼠標(biāo)光標(biāo)定位到所需的AP DIV（layer1）內(nèi)，）內(nèi)，選擇選擇“插入記錄插入記錄布局對象布局對象AP DIV”命令即可創(chuàng)建一個嵌套命令即可創(chuàng)建一個

30、嵌套AP DIV。 4、利用上述方法，創(chuàng)建如圖、利用上述方法，創(chuàng)建如圖3.3.7所示的嵌套所示的嵌套AP DIV，并修改其屬性。，并修改其屬性。小貼士：小貼士：AP 元素（絕對定位元素）是分配有絕對位置的元素（絕對定位元素）是分配有絕對位置的 HTML 頁面元素，具體而言，頁面元素，具體而言，就是就是 div 標(biāo)簽或其它任何標(biāo)簽。標(biāo)簽或其它任何標(biāo)簽。AP 元素可以包含文本、圖像或其它任何可放元素可以包含文本、圖像或其它任何可放置到置到 HTML 文檔正文中的內(nèi)容。文檔正文中的內(nèi)容。第 41 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.3.5繪制繪制AP元素元素圖圖3.3.6 AP DIV

31、大小顯示大小顯示圖圖3.3.7網(wǎng)頁布局網(wǎng)頁布局第 42 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理任務(wù)三任務(wù)三 ：編輯網(wǎng)頁內(nèi)容：編輯網(wǎng)頁內(nèi)容 （1）在）在“l(fā)ayer2”中，插入圖片中，插入圖片“top.jpg”。（2）在）在“l(fā)ayer3”中，添加中，添加“AP DIV”元素，并對網(wǎng)頁進(jìn)行布局，效果元素，并對網(wǎng)頁進(jìn)行布局，效果如圖如圖3.3.8所示。所示。（3）在）在“l(fā)ayer4”中，添加中，添加“AP DIV”元素，并對網(wǎng)頁進(jìn)行布局，效果元素，并對網(wǎng)頁進(jìn)行布局，效果如圖如圖3.3.9所示。所示。（4）利用相同的方法，在）利用相同的方法，在“l(fā)ayer5”、“l(fā)ayer6”中，添加中，添加

32、“AP DIV”元元素，并對網(wǎng)頁進(jìn)行布局，效果如圖素，并對網(wǎng)頁進(jìn)行布局，效果如圖3.3.10所示。所示。（5）在已經(jīng)布局好的網(wǎng)頁中，插入圖片或文字，效果如圖）在已經(jīng)布局好的網(wǎng)頁中，插入圖片或文字，效果如圖3.3.11所示。所示。第 43 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.3.8 AP DIV元素的嵌套（一）元素的嵌套（一）圖圖3.3.9AP DIV元素的嵌套（二）元素的嵌套（二）第 44 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)站建設(shè)與管理圖圖3.3.10 AP DIV元素的嵌套（三）元素的嵌套（三）圖圖3.3.11AP DIV布局效果圖布局效果圖第 45 頁中小型網(wǎng)站建設(shè)與管理中小型網(wǎng)

33、站建設(shè)與管理任務(wù)四任務(wù)四 ：利用：利用spry構(gòu)件編輯構(gòu)件編輯“聯(lián)系方式聯(lián)系方式”頁面內(nèi)容頁面內(nèi)容 Spry框架是一個框架是一個JavaScript庫，庫，Web設(shè)計人員使用它可以構(gòu)建能夠向站點設(shè)計人員使用它可以構(gòu)建能夠向站點訪問者提供更豐富體驗的訪問者提供更豐富體驗的Web頁。有了頁。有了Spry，就可以使用，就可以使用HTML、CSS和極少和極少量的量的JavaScript將將 XML數(shù)據(jù)合并到數(shù)據(jù)合并到HTML文檔中，創(chuàng)建構(gòu)件（如折疊構(gòu)件和菜文檔中，創(chuàng)建構(gòu)件（如折疊構(gòu)件和菜單欄），向各種頁面元素中添加不同種類的效果。在設(shè)計上，單欄），向各種頁面元素中添加不同種類的效果。在設(shè)計上，Spry框架的標(biāo)記框架的標(biāo)記非常簡單且便于那些具有非常簡單且便于那些具有HTML、CSS和和JavaScript基礎(chǔ)知識的用戶使用?；A(chǔ)知識的用戶使用。（1）打開）打開index.html文件，將該文件另存在文件，將該文件另存在files文件