網(wǎng)頁(yè)制作第3講網(wǎng)頁(yè)的布局與定位PPT課件

1、2021-7-2442021-7-245圖圖1 1 布局插入欄布局插入欄2021-7-2462021-7-247圖圖2 2 頁(yè)面布局效果頁(yè)面布局效果2021-7-2482021-7-2492021-7-2410圖圖3 3 繪制布局表格繪制布局表格2021-7-2411圖圖4 4 布局表格的屬性面板布局表格的屬性面板2021-7-24122021-7-2413圖圖5 5 繪制嵌套布局表格繪制嵌套布局表格2021-7-2414圖圖6 6 再次繪制嵌套布局表格再次繪制嵌套布局表格2021-7-24152021-7-24162021-7-2417圖圖7 7 繪制布局單元格繪制布局單元格2021-7-2

2、4182021-7-2419圖圖8 8 布局單元格的屬性面板布局單元格的屬性面板2021-7-24202021-7-24212021-7-24222021-7-2423圖圖9 9 插入插入Fireworks HTMLFireworks HTML對(duì)話框?qū)υ捒?021-7-2424圖圖10 10 插入插入LogoLogo、BannerBanner和導(dǎo)航條和導(dǎo)航條2021-7-24252021-7-2426圖圖11 11 內(nèi)容添加完成效果內(nèi)容添加完成效果2021-7-24272021-7-2428圖圖12 12 動(dòng)物大觀頁(yè)面布局動(dòng)物大觀頁(yè)面布局2021-7-24292021-7-24302021-7

3、-2431圖圖13 13 設(shè)置表格對(duì)話框設(shè)置表格對(duì)話框2021-7-2432圖圖14 14 插入表格插入表格2021-7-2433圖圖15 15 表格屬性面板表格屬性面板2021-7-24342021-7-2435圖圖16 16 單元格屬性面板單元格屬性面板拆分單拆分單元格元格合并單合并單元格元格圖圖17 17 設(shè)置單元格后的效果設(shè)置單元格后的效果2021-7-24362021-7-2437圖圖18 18 嵌套插入表格的效果嵌套插入表格的效果2021-7-24382021-7-24392021-7-2440圖圖19 19 利用層技術(shù)創(chuàng)建的頁(yè)面預(yù)覽效果利用層技術(shù)創(chuàng)建的頁(yè)面預(yù)覽效果2021-7-2

4、4412021-7-2442圖圖20 20 首選參數(shù)中的層選項(xiàng)首選參數(shù)中的層選項(xiàng)2021-7-24432021-7-2444圖圖21 21 層的屬性面板層的屬性面板圖圖22 22 創(chuàng)建層創(chuàng)建層2021-7-24452021-7-2446圖圖23 23 繪制嵌套層繪制嵌套層2021-7-24472021-7-2448圖圖24 24 層面版層面版2021-7-24492021-7-24502021-7-24512021-7-24522021-7-24532021-7-2454圖圖25 25 轉(zhuǎn)換層為表格對(duì)話框轉(zhuǎn)換層為表格對(duì)話框2021-7-2455圖圖26 26 層轉(zhuǎn)換為表格后的效果層轉(zhuǎn)換為表格后

5、的效果2021-7-24562021-7-24572021-7-2458圖圖27 27 利用框架技術(shù)制作的頁(yè)面利用框架技術(shù)制作的頁(yè)面2021-7-24592021-7-24602021-7-24612021-7-2462圖圖29 29 框架結(jié)構(gòu)框架結(jié)構(gòu)圖圖28 28 框架按鈕的下拉菜單框架按鈕的下拉菜單2021-7-24632021-7-24642021-7-2465圖圖30 30 框架集屬性框架集屬性 2021-7-2466圖圖31 31 框架屬性框架屬性2021-7-2467圖圖32 32 框架面板框架面板 2021-7-2468圖圖33 33 框架頁(yè)及框架的名稱(chēng)框架頁(yè)及框架的名稱(chēng)2021

6、-7-2469步驟步驟4 4：輸入內(nèi)容。每一個(gè)框架頁(yè)面都是一：輸入內(nèi)容。每一個(gè)框架頁(yè)面都是一個(gè)獨(dú)立的文件，它們可以單獨(dú)編輯，也可個(gè)獨(dú)立的文件，它們可以單獨(dú)編輯，也可以在框架集中編輯。上框架中輸入標(biāo)題，以在框架集中編輯。上框架中輸入標(biāo)題，左框架中輸入目錄，右框架中為主要內(nèi)容左框架中輸入目錄，右框架中為主要內(nèi)容顯示區(qū)。編輯內(nèi)容后的效果如圖顯示區(qū)。編輯內(nèi)容后的效果如圖3434所示。所示。2021-7-2470圖圖34 34 編輯內(nèi)容后的效果編輯內(nèi)容后的效果2021-7-24712021-7-24722021-7-2473圖圖35 35 創(chuàng)建網(wǎng)站相冊(cè)對(duì)話框創(chuàng)建網(wǎng)站相冊(cè)對(duì)話框 2021-7-247420

7、21-7-24752021-7-24762021-7-24772021-7-24782021-7-2479圖圖36 36 表單頁(yè)面效果表單頁(yè)面效果2021-7-24802021-7-2481圖圖37 37 表單插入欄表單插入欄圖圖3 38 8 插插入入表表單單虛虛框框2021-7-2482圖圖39 39 表單的屬性面板表單的屬性面板2021-7-24832021-7-24842021-7-24852021-7-24862021-7-24872021-7-24882021-7-24892021-7-24902021-7-24912021-7-2492圖圖45 45 列表的屬性面板列表的屬性面板圖

8、圖46 46 列表值對(duì)話框列表值對(duì)話框2021-7-24932021-7-24942021-7-24952021-7-24962021-7-2497圖圖49 49 多行文本域的屬性面板多行文本域的屬性面板2021-7-24982021-7-2499圖圖50 50 插入跳轉(zhuǎn)菜單對(duì)話框插入跳轉(zhuǎn)菜單對(duì)話框跳轉(zhuǎn)菜單是一個(gè)跳轉(zhuǎn)菜單是一個(gè)下拉菜單，其中下拉菜單，其中的每一個(gè)選項(xiàng)都的每一個(gè)選項(xiàng)都可以設(shè)置超級(jí)鏈可以設(shè)置超級(jí)鏈接。接。2021-7-241002021-7-241012021-7-241022021-7-241032021-7-241042021-7-241052021-7-24106圖圖53 53 表單提交對(duì)話框表單提交對(duì)話框2021-7-241072021-7-241082021-7-241092021-7-241102021-7-241112021-7-241122021-7-241132021-7-241142021-7-24115圖圖54 54 行為面板及行為行為面板及行為2021-7-241162021-7-24117圖圖55 55 打開(kāi)瀏覽器窗口對(duì)話框打開(kāi)瀏覽器窗口對(duì)話框2021-7-241182021-7-241192021-7-24120圖圖61 61 檢查表單對(duì)話框檢查表單對(duì)話框2021-7-24121圖圖