1、1,網(wǎng)站首頁設(shè)計(jì)和布局,浙江省臺(tái)州中學(xué) 20063,目標(biāo)定位,1.主題確定 2.資料的收集、整理 3.網(wǎng)站的風(fēng)格（顏色、欄目） 制作研究性網(wǎng)站之前,最好察看相類似的站點(diǎn).,說明：網(wǎng)站制作之前，應(yīng)該先建立站點(diǎn)目錄。,網(wǎng)站首頁布局,網(wǎng)站首頁布局參數(shù)說明,1.網(wǎng)站LOGO標(biāo)志的制作,網(wǎng)站首頁布局參數(shù)說明,網(wǎng)站LOGO標(biāo)志的制作 LOGO即是網(wǎng)站的名片,LOGO是與其它網(wǎng)站鏈接以及讓其它網(wǎng)站鏈接的標(biāo)志和門戶。其中關(guān)于網(wǎng)站的LOGO，目前有三種規(guī)格：1. 88*31 這是互聯(lián)網(wǎng)上最普遍的LOGO規(guī)格。2.120*60 這種規(guī)格用于一般大小的LOGO。3. 120*90 這種規(guī)格用于大型LOGO。,LOG

2、O的制作工具和方法:好像目前并沒有專門制作LOGO的軟件，但PHOTOSHOP、Swish等均可來制作。,網(wǎng)站首頁布局參數(shù)說明,2.網(wǎng)站的宣傳海報(bào)BANNER的制作,網(wǎng)站首頁布局方法,1.利用表格布局版面,2.利用布局來設(shè)計(jì)版面,一般頁面的構(gòu)架主要是通過表格應(yīng)用來實(shí)現(xiàn)的，表格在網(wǎng)頁制作中是一種用途非常廣泛而且很重要的工具，比較復(fù)雜的網(wǎng)頁經(jīng)常采用表格的嵌套（其實(shí)就是在一個(gè)單元格中再插入一個(gè)表格）。由于目前訪問者的瀏覽器800600的分辨率使用頻率最高，所以在制作網(wǎng)頁的過程中，可以將窗口的寬定為760像素。,一種更加輕松完成網(wǎng)頁制作的功能.,網(wǎng)站首頁布局方法,利用表格布局首頁版面,1.利用表格布局

3、版面操作步驟,步驟1：首先插入一個(gè)4行2列，寬為760像素，高為200像素的表格。并合并部分單元格，合并后如圖所示。調(diào)整屬性面板中的表格各參數(shù)，使表格居中對(duì)齊，背景顏色為白色。,利用表格布局首頁版面,1.利用表格布局版面操作步驟,步驟2：執(zhí)行修改| 頁面屬性命令，在彈出的頁面屬性對(duì)話框中，將左邊距、右邊距、邊界寬度、邊界高度都設(shè)置為0像素。這時(shí)可以發(fā)現(xiàn)表格已經(jīng)緊貼在文檔上方了。,步驟3：在第一行第一列的單元格中插入“images”目錄下的“l(fā)ogo.gif”文件，而第一行第二列的單元格中插入一個(gè)SWF的Flash動(dòng)畫 。,步驟4：接下來在表格第二行的單元格內(nèi)插入一個(gè)1行5列的表格，寬為760像

4、素，高為20像素，在屬性面板中設(shè)置“bg1.gif”為背景圖片。設(shè)置每個(gè)單元格的寬度為152像素。在每個(gè)單元格中輸入作為導(dǎo)航條的內(nèi)容：“本站首頁”、“課前準(zhǔn)備”、“課堂導(dǎo)學(xué)”、“課后復(fù)習(xí)”、“相關(guān)網(wǎng)站”，將文字顏色設(shè)置為白色，并居中對(duì)齊。,利用表格布局首頁版面,1.利用表格布局版面操作步驟,步驟5：在表格第三行的單元格內(nèi)插入一個(gè)4行2列的表格，寬為760像素，在 單元格中插入“images”文件夾下的“htys.jpg”，后面插入相關(guān)文字。其它操作一樣。,步驟6：在表格第四行的單元格中，將背景顏色設(shè)為“#767d8f”，插入版權(quán)符號(hào)及相關(guān)內(nèi)容。按F12鍵預(yù)覽一下網(wǎng)頁的效果。,利用布局設(shè)計(jì)方法來設(shè)計(jì)首頁版面,1.利用布局設(shè)計(jì)方法來設(shè)計(jì)首頁版面操作步驟,步驟1：?jiǎn)螕舨迦牍ぞ邫谥械牟季诌x項(xiàng)，點(diǎn)擊布局視圖按鈕，即進(jìn)入布局模式?，F(xiàn)在就可以在頁面上繪制布局單元格和布局表格了。,步驟2：?jiǎn)螕舨季直砀癜粹o，這時(shí)鼠標(biāo)會(huì)變成十字形狀，拖動(dòng)鼠標(biāo)就能繪制出一個(gè)布局表