初中八年級信息技術(shù)課件- 網(wǎng)頁的制作

第四節(jié)網(wǎng)頁的制作目錄CONTENTS12一、添加文字標題二、在網(wǎng)頁中插入圖片3三、添加水平線4四、為站點設(shè)置共享邊框5五、為站點主頁設(shè)置主題一般網(wǎng)頁都是由文本、圖片以及其他一些元素組成的。為增加網(wǎng)貝的美觀程度，可以采用以下方法對網(wǎng)頁進行初步美化。1.輸入網(wǎng)頁標題打開站點D:\English中的index.htm文件，光標定位于需要輸入文字的位置。按照圖2-3-9在表格對應(yīng)的單元格內(nèi)輸入以下文字：“e-英語學(xué)習(xí)”網(wǎng)站歡迎您！2.編輯標題

剛剛輸入的這行文字不夠醒目，而且居于網(wǎng)頁左上角，需要再對它進行修飾、排版。通過格式工具欄將文字設(shè)為黑體、6號（24磅）、紫紅色。居中方式對齊，再進行排版，使文字的位置處于屏幕中央。結(jié)果如圖2-4-1所示。一、添加文字標題試試看

將以上文字設(shè)置為華文新魏、7號（36磅），顏色為藍色，如圖2-4-2所示。只有文字的網(wǎng)頁非常單調(diào)，因此，在網(wǎng)頁中適當插入圖片會增加網(wǎng)頁的美觀程度，提高觀賞效果。1.插入圖片單擊“插入”→“圖片”→“來自文件”。在“插入”對話框中選擇“網(wǎng)頁素材庫”所在的磁盤，并從“圖片庫”文件夾中找到所需的圖片文件，如logo.gif，這時在對話框的右邊會出現(xiàn)圖片的預(yù)覽效果圖，如圖2-4-3所示。單擊“插入”按鈕，則所選的圖片出現(xiàn)在插入點位置。二、在網(wǎng)站中插入圖片試試看用同樣的方法在主頁中插入一幅剪貼畫。智多星如果插入的圖片來自文件，在插入圖片前，最好先將所需的圖片復(fù)制到該站點的images文件夾中，以保證不會因站點保存路徑的改變而無法正常瀏覽。2.調(diào)整圖片大小和對齊方式剛剛插入的圖片大小如果不符合頁面的要求，可以進行調(diào)整。在需要調(diào)整的圖片上單擊鼠標左鍵，圖片四周會出現(xiàn)8個控制點，用鼠標指向任何一個控制點，當鼠標指針變成雙向小箭頭時拖動鼠標，就可以改變圖片的大小了。選定圖片后，在編輯區(qū)的下方就會出現(xiàn)“圖片”工具欄，如圖2-4-4所示。使用該工具欄，可對圖片的顯示進行多種設(shè)置。該工具欄比Word中的圖片工具欄增加了許多工具，我們可以試一試它們的用法。智多星FrontPage2000中也可以插入藝術(shù)字，藝術(shù)字要先在Word2000中編寫好，再粘貼到網(wǎng)頁中。藝術(shù)字是以圖片的形式粘貼到網(wǎng)頁中的，可以像圖片那樣編輯。有時單靠段落來區(qū)分文章還不夠清楚，這時可以插入一條水平線，使頁面段落的區(qū)分更鮮明。將光標定位到表格的第二行，單擊“插入”→“水平線”，就插入了一條水平線，如圖2-4-5所示。三、添加水平線試試看雙擊插入的水平線，打開“水平線屬性”對話框，如圖2-4-6所示。在對話框內(nèi)設(shè)置水平線為淺藍色、寬度不變、高度為10、對齊方式為水平居中。設(shè)置共享邊框的目的是為了使得導(dǎo)航欄在各網(wǎng)頁中保持一致的布局。打開index.htm文件，單擊“格式”→“共享邊框”，彈出“共享邊框”對話框，進行如圖2-4-7所示的設(shè)置后，單擊“確定”按鈕，顯示結(jié)果如圖2-4-8所示。四、為站點設(shè)置共享邊框單擊“格式”→“主題”，彈出“主題”對話框，按照如圖2-4-9所示進行設(shè)置后，單擊“確定”按鈕，保存網(wǎng)頁。該網(wǎng)頁如圖2-4-10所示。五、為站點主頁設(shè)置主題試試看選擇與網(wǎng)站主題相關(guān)的主題，將其應(yīng)用到自己的網(wǎng)站中去。假設(shè)我們插入的這張圖片為bmp格式，選中單選項“JPEG”則可以將它轉(zhuǎn)換為jpg格式，圖片質(zhì)量的設(shè)置建議不要低于默認值的75%，否則圖片質(zhì)量可能會損失較大。在外觀選項卡中，通過修改寬度和高度的數(shù)值就能改變圖片的尺寸（也可以在頁面中通過拖動圖片邊框來實現(xiàn)）。如圖2-4-14所示。屬性設(shè)置好以后，單擊“確定”按鈕，頁面中便呈現(xiàn)出圖片的實際效果了。最后，單擊“文件”→“保存文件”將頁面保存下來，注意在提示“保存嵌入式文件”時，將圖片文件保存在指定的一個目錄下就可以了。如果要轉(zhuǎn)換多張圖片，重復(fù)新建頁面后的步驟即可。思考與練習(xí)

1.對網(wǎng)頁中的文件進行編輯，使其更漂亮、美觀。2.查找與自己的網(wǎng)頁主題相關(guān)的gif圖片，給網(wǎng)頁添