頁(yè)面布局設(shè)計(jì)ppt課件(已修改)
2025-01-29 09:45 本頁(yè)面
【正文】 項(xiàng)目三 頁(yè)面布局設(shè)計(jì) 第 2 頁(yè) 《 中小型網(wǎng)站建設(shè)與管理 》 ? 項(xiàng)目簡(jiǎn)介 本項(xiàng)目是設(shè)計(jì)并制作一個(gè)第八屆北京體育電影周網(wǎng)站。 該網(wǎng)站利用表格進(jìn)行整體布局，通過(guò)表格屬性的設(shè)置控制頁(yè)面內(nèi)容的顯示，同時(shí)還利用行、列以及單元格的操作及屬性設(shè)置，使得頁(yè)面更加整潔美觀；該網(wǎng)站采用“上中下”結(jié)構(gòu)的布局形式，其中還涉及表格的嵌套使用等。 第 3 頁(yè) 《 中小型網(wǎng)站建設(shè)與管理 》 ? 項(xiàng)目目標(biāo) 本項(xiàng)目以設(shè)計(jì)一個(gè)北京體育電影周網(wǎng)站為例，要求結(jié)合網(wǎng)站布局設(shè)計(jì)的特點(diǎn)，學(xué)會(huì)并掌握創(chuàng)建表格的方法 ,能夠熟練編輯表格并設(shè)置表格屬性；掌握利用框架和框架集來(lái)布局網(wǎng)頁(yè)；掌握并學(xué)會(huì)利用 AP元素布局網(wǎng)頁(yè)；學(xué)會(huì)利用 spry構(gòu)件布局網(wǎng)頁(yè)。 第 4 頁(yè) 《 中小型網(wǎng)站建設(shè)與管理 》 ? 工作任務(wù) 結(jié)合北京體育電影周相關(guān)信息，設(shè)計(jì)一個(gè)北京體育電影周網(wǎng)站。該網(wǎng)站由首頁(yè)、北京體育電影資訊、北京體育電影論壇組成，其中利用表格、框架、 AP元素以及 Spry構(gòu)件分別對(duì)網(wǎng)頁(yè)進(jìn)行布局。 第 5 頁(yè) 《 中小型網(wǎng)站建設(shè)與管理 》 模塊一 使用表格布局網(wǎng)頁(yè) (一 ) 學(xué)習(xí)目標(biāo) 學(xué)會(huì)并掌握創(chuàng)建表格的方法，能夠熟練編輯表格，設(shè)置表格屬性；對(duì)網(wǎng)頁(yè)進(jìn)行布局。 (二 ) 任務(wù)分析 １、繪制表格編輯網(wǎng)頁(yè)布局； ２、制作標(biāo)題與版權(quán)說(shuō)明； ３、制作導(dǎo)航欄的； ４、編輯網(wǎng)頁(yè)表格內(nèi)容； 第 6 頁(yè) 《 中小型網(wǎng)站建設(shè)與管理 》 第 7 頁(yè) 《 中小型網(wǎng)站建設(shè)與管理 》 任務(wù)一：建立站點(diǎn)并新建網(wǎng)頁(yè)； （ 1）在 C:\Ipub\下建立站點(diǎn)目錄 tyweb，并使用高級(jí)標(biāo)簽定義站點(diǎn)，站點(diǎn)名為“ tyweb”，如圖 。 （ 2）在起始頁(yè)中的“創(chuàng)建新項(xiàng)目”中單擊“ html”創(chuàng)建新網(wǎng)頁(yè)。 （ 3）執(zhí)行“文件” → “保存”菜單命令，將網(wǎng)頁(yè)保存在站點(diǎn)根目錄下，保存文件名為 ，如圖 。 第 8 頁(yè) 《 中小型網(wǎng)站建設(shè)與管理 》 圖 建立站點(diǎn)第一步 第 9 頁(yè) 《 中小型網(wǎng)站建設(shè)與管理 》 圖 任務(wù)二 繪制表格編輯網(wǎng)頁(yè)布局 （ 1）單擊插入欄的下拉按鈕，展開(kāi)插入欄，單擊“常用”選項(xiàng)，打開(kāi)常用工具欄。 （ 2）單擊“表格”按鈕，創(chuàng)建表格。在彈出的“表格”對(duì)話框中，設(shè)置參數(shù)如圖 ，單擊“確定”按鈕，關(guān)閉對(duì)話框。 第 10 頁(yè) 《 中小型網(wǎng)站建設(shè)與管理 》 圖 表格布局網(wǎng)頁(yè)第二步 第 11 頁(yè) 《 中小型網(wǎng)站建設(shè)與管理 》 ? （ 3）選中表格第一行，單擊“屬性”面板上“合并單元格”按鈕對(duì)第一行的單元格進(jìn)行合并，如圖 ，同理合并第三行單元格。 ? （ 4）設(shè)置表格行高，將光標(biāo)放置在第一行，修改“屬性”面板上“高”為“ 265”，如圖 ，同理設(shè)置第二行“高”為“ 500”，第三行“高”為“ 70”；設(shè)置第二行左側(cè)單元格的“寬”為“ 200”，右側(cè)單元格的“寬”設(shè)為“ 700”。 ? （ 5）選擇表格，設(shè)置為對(duì)齊方式：選中 table標(biāo)簽，在“屬性”面板上設(shè)置“對(duì)齊方式”為“居中”，如圖 。 ? （ 6）在單元格內(nèi)輸入文字。 ? （ 7）保存網(wǎng)頁(yè)，預(yù)覽效果如圖 。 圖
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1