1. 首頁 > 生活百科 > >

如何制作網頁

生活百科網頁


如何制作網頁


一． 網頁制作基本技術 網頁制作的基本要點是：學會在網頁中插入表格、圖片、動畫、視頻文件等 。下面以“氫氣的性質和用途”網頁制作為例，簡介應用FrontPage制作網頁的基本方法 。在“氫氣的性質和用途”網頁中我們將插入“氫氣球”、“氫能汽車”等圖片 。插入“純凈的氫氣安靜燃燒，不純氫氣點燃爆炸”等FISAH動畫，插入“氫氣燃燒”的視頻錄像 。1．建立文件夾 制作網頁前，要收集素材，并將收集的素材放在自建的文件夾中 。這里我們先在E盤建立一個H2文件夾，在H2文件夾中再建立SC文件夾，將收集到的素材放在SC文件夾中（圖1） 。2．收集素材 素材可從購買的光盤上復制，也可從網上搜索下載 。2．1視頻素材的收集 “氫氣的性質”錄像是我們從初中化學VCD光盤上復制的 。方法是，用資源管理器打開VCD光盤文件，在MPEGAV文件夾中找到所需的MUSIC07.DAT文件并復制到SC文件夾中，并改文件后綴名為MUSIC07.mpeg（圖2） 2．2網上圖片的收集 利用搜索引掣可在網上得到所需的圖片資料 。這里應用google.com來搜索圖片 。在瀏覽器地址欄中鍵入google.com，打開頁面后再在搜索欄中分別鍵入關鍵詞“氫氣、氫氣球、氫電池”等 。將找到的圖片另存到SC文件夾中（圖3） 。2．3網上動畫素材的收集： 課件類FLASH動畫素材一般要到專題網站去收集 。各學科的專題網站很多，例如中小學教育教學網（K12.COM.CN）搜集課件很方便 。本網頁中應用到的FLASH動畫有“氫氣的驗純（文件名：geh2.SWF）”、“氫氣還原氧化銅微觀過程（文件名：hecuo.SWF）”等，收集過程是：進入先得化學資源網（http://www.yeschool.net/phd/），在“搜索”窗中鍵入“氫氣”，在搜索到的“匹配記錄中”找到自己想要的素材并下載（圖4） 。此時用鼠標右鍵單擊“下載”文字，在彈出的菜單中選擇“目標另存為”可將動畫文件下載到本機指定文件夾中 。如果FLASH動畫素材是在瀏覽器網頁中看到的（嵌入在網頁中），選擇另存網頁的方式，不能把FLASH動畫另存下來 。這時可打開瀏覽器工具欄的“工具”菜單，找到“Initernet”選項，在“常規標簽”中間部分“Initernet臨時文件”中打開“設置”按鈕，再在彈出的對話框中選擇“查看文件”，即可打開網頁瀏覽器平臺自帶的“臨時文件夾（Temporary Internet）”該文件夾產生的文件是按時間順序排列的，最后時間內打開的網頁，其臨時文件在該文件夾的最后部分，所以在該文件夾中的最后部分文件中尋找FLASH動畫特有的圖標，逐一打開看，可找到你需要的動畫，再選中該文件復制后，粘貼到素材文件夾中（圖5）并重命名文件名 。3.制作網頁 3.1打開FrontPage程序 鼠標指向開始菜單,在程序中找到Microsoft FrontPage 程序,單擊即打開FrontPage程序 。3.2創建網頁 鼠標指向文件，在下拉菜單中單擊新建 。在彈出菜單中選中普通網頁，單擊確定 。命名網頁文件名為“氫氣”，存盤，存盤路徑E：\H2\。3．3網頁制作 3．3．1插入表格 我們用PowerPoint制作演示文稿時，可以將文本框或圖片、表格等放在工作區的任意位置，但用FrontPage制作網頁時，就不能將這些對象隨心所欲地放在頁面上了 。為使各對象能在頁面的一定位置上放置，在用FrontPage制作網頁時，常用表格的單元格把頁面劃分成一個個區域，文字或圖片等對象就填充在單元格中 。即單元格起到了固定對象位置的作用 。單擊插入表格按鈕，選定行、列數，即可插入表格，有時在大的單元格中，還需插入小的表格，進一步把大單元格的區域分成小的單元格（圖8） 。一般情況下表格的框線不需要在頁面上出現，可單擊鼠標右鍵，修改表格屬性，將單元格邊距、單元格間距、粗細都設置為零 。在表格的單元格中可寫入文字，調整文字的字體、大小、顏色 。也可設置單元格的背景顏色 ?！皻錃獾男再|和用途”網頁上插入的表格及文字排列如圖10所示 。圖中明、暗相間的區間為初始插入的表格的單元格，各區間中的分割線為在此單元格中再插入的表格的單元格 。沒有文字的單元格中將插入圖片或動畫 。3．3．2插入圖片 網頁中可插入后綴名為GIF和JPG等格式的圖片 。GIF圖片又分為靜止圖片和動畫圖片 。在本網頁中的原子模型、紅色線條、電視機畫面就是GIF動畫圖片（文件名為052.GIF 、0182.GIF、0354.GIF）；網頁中氣球、氫能汽車、氫氣的實驗室制法等圖片都是JPG格式的靜止圖片（文件名為qq.JPG 、HYBRIDFO.JPG 、0356.JPG） 。插入圖片的操作是將光標停在需插入圖片的單元格中，在“文件”欄中選中“插入”，在下拉列表中選中“圖片——來自文件”，再在彈出的對話框中找到圖片所處的文件夾及文件名，再單擊“確定”即可（圖11） 。3．3．3插入FLASH影片或視頻影片 應用“插入”下拉菜單的“高級”選項，可在單元格中插入后綴名為SWF、AVI、MPEG等影片文件 。在本網頁中，我們插入的FLASH影片有“氫氣的驗純”（文件名：geh2.SWF）、氫氣還原氧化銅微觀過程（文件名：hecuo.SWF） 。插入FLASH影片的操作是將光標停在需插入圖片的單元格中，在“文件”欄中選中“插入”，在下拉列表中選中“高級——插件”，再在彈出的“插件屬性”對話框中單擊“數據源”右邊的“瀏覽”，找到需插入的FLASH影片，再單擊“確定”即可（圖12） 。圖12 往文本“氫氣的驗純”下方的單元格中插入FLASH影片（文件名：geh2.SWF） 在單元格的位置插入插件后，生成一個插頭接口的標記。從光盤VCD上拷貝的視頻錄像（.AVI、.MPEG），要插入網頁中時，可在“插入”菜單欄中直接選“影片”選項，在彈出對話框中找到有關文件選擇“打開”即可 。AVI、MPEG格式的文件容量一般較大，直接插入到網頁中時，會嚴重影響網頁打開的速度，故一般不適宜在網頁中直接插入，對這類影片可采用超級鏈接的方式進行下載播放 。3．3．4超級鏈接設置 網頁制作的一個重要步驟就是對有關的文本、圖片設置超級鏈接 。在本網頁中看不到的網頁、圖片、視頻、網站等可以應用超級鏈接的方式發出指令在瀏覽器窗口中打開 。在本網頁中，圖片超級鏈接有：圖片“氫能汽車”——鏈接到另一更大的“氫能汽車”圖上（文件名：HYBRIDFO1.JPG）、圖片“電視機”——鏈接到“氫氣的性質”錄像片（文件名：MUSIC07.MPEG），圖片“氫氣的實驗室制法”——鏈接到FLASH影片“氫氣的實驗室制法”（文件名：zh2.SWF），圖片“中國新能源網”——鏈接到中國新能源網（網址：http://newenergy.org.cn），兩個放大鏡圖片分別鏈接到“氫氣的驗純”、“氫氣還原氧化銅的微觀過程”的FLASH動畫上（文件名：geh2.SWF、hecuo.SWF）；在本網頁中文本的超級鏈接有：“氫氧混合氣點燃爆炸演示”——鏈接到“氫氧混合氣點燃爆炸演示”（文件名：bc1.SWF），“氫氧混合氣點燃爆炸微觀解釋”——鏈接到“氫氧混合氣點燃爆炸微觀解釋”（文件名：bc2.SWF） 。超級鏈接是非線性超文本結構的網站及網頁的核心 。設置超級鏈接的方法是：先選中圖片或文本，單擊鼠標右鍵，在彈出的菜單中選中“超級鏈接”，彈出“創建超級鏈接”窗口，再選中URL窗右邊的“制作一個指向您計算機的超級鏈接”按鈕，彈出“選擇文件”對話框，選中需鏈接的文件，或在URL窗口中直接鍵入網址、文件的路徑名，（圖13、圖14） 。圖13 對圖片“氫能汽車”進行超級鏈接設置（指向文件HYBRIDFO1.JPG） 圖14 對圖片“中國新能源網”設置鏈接，鍵入網址：http://www.newenergy.org.cn 這里要注意的是，編輯超級鏈接時，“目標框架”一般不用“默認值”而是選擇“新建窗口”以便網頁的瀏覽（圖15） 。最后還想說一下滾動字幕的制作，選中需要滾動的文字，鼠標指向“插入”菜單，在上拉列表中選中“組件——字幕”，單擊彈出對話框中的確定按鈕即可 。到此，一個網頁就基本制作完成了 。如何知道網頁在瀏覽器中的瀏覽效果呢，在FrontPage窗口的左下方有三個窗口切換標簽：，普通窗口就是我們的工作區，HTMH窗口可查看網頁源代碼，預覽窗口可隨時查看制作的網頁在瀏覽器中的效果（圖16） 。圖16 “氫氣的性質和用途”網頁在瀏覽器中的圖象 4.將存放網頁及素材的文件夾轉換成WEB文件夾 我們是在H2文件夾中建立的SC文件夾基礎上制作網頁的，這樣的網頁的各種鏈接一般是絕對路徑關系，如果把H2文件夾換一個位置（如復制到D盤），再打開該文件夾中的氫氣.HTM網頁，就可能打開的是一個有一些圖片看不到，單擊一些鏈接無響應的缺損網頁，這樣的網頁是不能放在網站上對外發布 。這樣的文件夾叫非WEB文件夾 。如果把存放網頁及素材的自定義文件轉換成WEB文件夾，則文件夾中的網頁與各鏈接文件的關系就會變成相對路徑關系，這樣把該文件夾不管放到什么目錄下，該網頁在被打開時都不會有缺損，且超級鏈接都能正確響應 。如何將非WEB文件夾“H2”轉換成WEB文件夾呢 。操作很簡單 。打開在FrontPage 程序后，單擊“文件——打開站點”出現打開站點對話框，在“查找范圍”窗口中找到E:\H2文件夾，單擊“打開”（圖17），圖17 以站點形式打開H2文件夾 這時會再彈出一個“向文件夾中添加FrontPage信息”對話框，問：是否向H2文件夾中添加FrontPage信息（圖18）？單擊“是”，會自動生成文件夾列表并打開網頁“氫氣.htm”(圖19)，這時文件夾“H2”就轉換成了WEB文件夾，在該文件夾中自動生成四個文件夾：用來存放圖片和網頁等文件的images和_private文件夾，含有超級鏈接信息的隱藏文件夾_vti_cnf和_vti_pvt 。在本網頁制中過程中，我們已經將素材文件放在了SC文件夾中，所以images和_private文件夾可以刪除 。但_vti_cnf和_vti_pvt切不可刪除（圖20） 。當H2文件夾轉換成WEB文件夾后，其中的網頁“氫氣.htm”上的超級鏈接關系即轉換成相對路徑關系，該文件夾放在任何目錄下，網頁打開時不會缺損 。5．網頁（網站）發布 有時我們要把已經制成的網頁或網站存放到特定的文件夾之中 。成為可對外發布的網頁或網站 。例如，我們想把“氫氣.htm”網頁發布到“氫氣”文件夾之中 ?！皻錃? htm”，網頁的路徑是E:\H2\氫氣.htm，在H2文件夾中還有SC素材文件夾，我們用到的圖片、動畫、視頻文件都放在這個文件夾中 。先在E盤建立一個文件夾，命名為“氫氣”，這就是我們將要把網頁發布后存放的文件夾 。在FrontPage 程序中打開網頁氫氣. htm，鼠標指向文件，在下拉菜單中選中“發布站點”，彈出“發布站點”對話框，單擊“指定站點位置”窗口右邊的瀏覽按鈕，找到e:\氫氣，選中后，用鼠標單擊“打開”，再單擊“發布”按鈕，出現確認對話框，單擊“是”，“H2”文件夾中的有關文件就會導入到“氫氣”文件夾中，“發布完成（圖21、圖22、圖23） 。注意有些網站的服務器不支持中文路徑，建立文件夾及網頁文件時最好用英文名稱或數字名稱 。圖23 成功發布站點 我們在光盤H2文件夾中放了兩個網頁，一個是“氫氣的性質和用途”（文件名：氫氣.htm），另一個是“氫氣的性質和用途”的表格文件（文件名：氫氣網頁表格.htm），在第二個文件中有部分圖片及鏈接，是不完整的網頁 。讀者不妨試一試：在FrontPage 程序中打開第二個文件，照著我們前面網頁制作的方法介紹，把它制作成與第一個文件畫面，鏈接關系一樣的htm文件，并發布 。二． 制作網頁的注意事項 應用于課堂教學或專題學習網站的網頁與平時在網上瀏覽的公司網頁相比，有較大的區別 。頁面設計上，構圖要力求簡明，圖形、標題、文字標注三者并重，不能像公司網站的主頁，看得人眼花繚亂 。動畫要適當，不要一打開網頁到處都在動，讓人不知看什么地方是好 。主題要鮮明，一個網頁一個主題 。文字不宜多 。一個頁面不要超過300字，字要大一些 。

猜你喜歡