《用表格為網(wǎng)頁布局課件》初中信息技術(shù)浙教課標(biāo)版《信息技術(shù)八年級上》課件

主題四 編輯網(wǎng)站主頁,甘肅教育出版社 信息技術(shù) 八年級 上冊 第二單元,2014年9月25,白銀四中 魏 輝,主頁 通過網(wǎng)絡(luò)瀏覽器打開某個(gè)網(wǎng)站時(shí)，首先顯示的網(wǎng)頁就是網(wǎng)站的主頁（Home-Page），主頁的文件名一般為index.htm 或default.htm。 index.htm 或default.htm是因特網(wǎng)中約定站點(diǎn)的主頁文件名，當(dāng)通過瀏覽器打開一個(gè)網(wǎng)站時(shí)，最自動打開網(wǎng)站中名為index.htm 或default.htm的網(wǎng)頁。,設(shè)計(jì)網(wǎng)頁布局,準(zhǔn)備素材,圖片 文字 網(wǎng)站橫幅 視頻 聲音,確定網(wǎng)站主題,如何編輯網(wǎng)站主頁,選擇網(wǎng)頁編輯工具,本 節(jié) 課 目 標(biāo),網(wǎng)頁布局示意圖,每個(gè)網(wǎng)頁都有必備的基本元素，通常包括網(wǎng)站的名稱、導(dǎo)航欄和版權(quán)信息。網(wǎng)頁中的主要內(nèi)容大多采用“縱橫分割式”的布局方法，（三列分割式布局方法）,素 材,網(wǎng)站主題：介紹甘肅旅游景點(diǎn) 網(wǎng)站名字：足跡 甘肅,標(biāo)準(zhǔn)：生動有趣、簡單易記。即突出主題又要簡介，4-6個(gè)為宜，在瞬間吸引眼球。,網(wǎng)頁編輯工具,一、菜鳥級網(wǎng)頁制作軟件 Microsoft FrontPage Netscape編輯器 Adobe Pagemill Claris Home Page 二、中級網(wǎng)頁制作軟件 DreamWeaver Fireworks Flash HotDog Professional HomeSite HotMetal Pro 三、高級網(wǎng)頁制作軟件 Microsoft Visual Studio Jbuilder 記事本,4大項(xiàng)介紹完畢了,動手做,請大家動起手來！,準(zhǔn)備：打開“我的電腦”，在本地磁盤“D”新建文件夾，重命名“我的網(wǎng)站2014”,（一）在FrontPage 2003中創(chuàng)建 Web站點(diǎn),1,步驟一：在FrontPage2003中，執(zhí)行【文件】【打開網(wǎng)站】，打開D盤【我的網(wǎng)站2014】站點(diǎn)。如圖所示,D,步驟二：雙擊文件夾列表中主頁 文件名“index.htm”,(二）插入網(wǎng)頁橫幅。 步驟一：設(shè)置網(wǎng)頁背景。 在“設(shè)計(jì)”視圖標(biāo)簽下，空白處單擊鼠標(biāo)右鍵，選擇 【網(wǎng)頁屬性】【格式】標(biāo)簽，設(shè)置背景圖片，如圖所示。,步驟二：插入表格。打開菜單，執(zhí)行【表格】【插入】【表格】命令，打開表格對話框。設(shè)置6行3列?！安季帧薄皩R方式”中選擇“居中“，按要求合并單元格，如圖所示。,步驟三：將光標(biāo)放在最上面的單元格中，執(zhí)行【插入】【圖片】【來自文件】，彈出【圖片】對話框，選擇“足跡甘肅”圖片，單擊“確定”，調(diào)整表格寬度，結(jié)果 如圖所示。,（三）設(shè)計(jì)制作網(wǎng)站欄目 步驟一：為單元格插入背景圖片。 選擇第二行，點(diǎn)擊鼠標(biāo)右鍵，彈出“單元格屬性”對話框，選擇:“背景2”圖片。調(diào)整單元大小到合適的位置。結(jié)果如圖所示。,步驟二：在此單元格中插入2行8列的表格，調(diào)整大小沾滿整個(gè)單元格。 步驟三：在插入的表格中輸入各欄目的名稱，并設(shè)置相應(yīng)的字體、字號、完成后如圖所示。,個(gè)人自學(xué)、小組討論，練習(xí)完成以下3個(gè)小任務(wù)？ 1.第三行第一列 插入圖片“銅奔馬”（綠色區(qū)域） 2.第三行第三列 插入圖片 “莫高窟” （紫色區(qū)域） 3.第三行第二列 插入文字“甘肅簡介”（黃色區(qū)域）,(四)設(shè)計(jì)制作網(wǎng)頁正文內(nèi)容,效果圖,步驟一：兩側(cè)插入“銅奔馬”，“莫高窟”圖片，。 步驟二：插入“甘肅簡介”的文字。如圖所示,分兩步走,（五）保存和預(yù)覽,步驟一：執(zhí)行【文件】【保存】 步驟二：預(yù)覽效果。 （F12鍵在瀏覽器中預(yù)覽效果）,小結(jié),小