返回主目錄返回章目錄第5章網絡安全技術網頁制作基礎6.1網頁制作的基礎知識6.2認識.3流媒體開發技術第6章6.4制作“我的大學”個人主頁返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎工作任務認識與網頁制作相關的一些基本概念及網頁的構成元素認識網站設計開發的流程。第6章第5章網絡安全技術網頁制作基礎返回章目錄返回章目錄6.1.1任務一 認識網頁與網站第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎1網頁與網站2Web服務器與瀏覽器3統一資源定位器URL4 網頁的基本元素第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎網頁也稱為Web頁是人們通過瀏覽器瀏覽網絡資源時看到的頁面。每個網頁實際是一個文件它存放在網絡服務器中。網頁經由網址URL來識別與存取當用戶在瀏覽器輸入網址后經過域名系統的解析再通過瀏覽器解釋網頁的內容展示到用戶屏幕上計算機網絡應用基礎(第2版)第6章網頁制作技術。網頁通常由文字、表格、圖片、聲音、視頻及各種功能按鈕等組成。人們看到的網頁主要是以HTML擴展名結尾的表態網頁文件。還有其他類型的動態網頁文件如CGI、ASP、PHP、JSP文件等。
網頁與網站第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎網站是存放在網絡服務器上的完整信息的集合體它包含一個或多個網頁通過站內鏈接把這些網頁有機結合起來構成一個內容完成、資源豐富的信息庫。網站的第一個頁面通常稱為首面或主頁它是整個網站的起始點和匯總點是用戶開始瀏覽站點的“入口處”。一個網站主要有由域名俗稱網址網站空間和網站源程序三部分構成。第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎Web技術的獨特之處是采用超鏈接和多媒體信息。Web服務器使用超文本標記語言描述網絡的資源創建網頁各種網站資源被保存在服務器上以供Web瀏覽器閱讀。Web服務器管理著網絡中的各種資源其基本功能是提供網絡通信服務、管理和提供網絡共享資源。Web瀏覽器Web 是一個用于文檔檢索和顯示的客戶應用程序并通過協議與Web服務器相連。目前流行的 和 除提供基本的文檔檢索、顯示和導航特性外還支持HTML的高級顯示如表和幀以及、Java、等特性。Web服務器與瀏覽器第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎是“ ”的縮寫即通常所說的網址是指信息資源在上的惟一地址它提供在Web上訪問資源的惟一方法和路徑。
統一資源定位器從左到右主要由資源類型WWW客戶程序用來操作的工具如“http//”表示WWW服務器“ftp//“表示FTP服務器而“new”表示新聞組計算機網絡應用基礎(第2版)第6章網頁制作技術。、服務器地址指出WWW頁所在的服務器域名、資源文件的位置指明服務器上某資源的位置組成。例如黑龍江畜牧獸醫職業學院網址統一資源定位器URL第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎中http代表所使用的資源類型服務器地址index.asp為要訪問的主頁的路徑和文件名。第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎設計網頁的目的主要是發布信息超級鏈接是Web的核心它將萬維網中無數的網頁鏈接在一起。網頁中包含多種元素如圖6-1所示。文本是網頁中常見的元素是用來向用戶傳達信息的媒介。文字雖然不如圖像那樣能夠很快引起瀏覽者的注意但卻能準確地表達消息的內容和含義為了克服文字固有的缺點人們可以設置網頁文本的一些屬性如字體、字號、顏色等突出顯示重要的內容。此外用戶還可以在網頁中設計各種各樣的樣式來清晰表達一系列項目。網頁的基本元素第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎圖片圖片在網頁中具有提供信息、展示作品、裝飾網頁、表達個人情調和風格的作用。
網頁中的圖片是GIF、JPEG、PNG等壓縮格式的圖片。在網頁中使用最廣泛的是JPEG和GIF格式這倆種格式的圖片都可以在不同的操作系統支持的瀏覽器上顯示。動畫網頁中使用動畫可使網頁效果更加突出充分利用動畫的表現力使得網頁更加令人賞心悅目同時利用動畫也會增加網頁的交互功能。目前網頁中使用的動畫主要有GIF、Flash等。因Flash生成的文件較小傳輸速度快可以實現實時播放流而不必等等整個文件傳輸完后傳輸完后再進行播放該動畫流暢功能較強已成為業界動畫標準。第6章第5章網絡安全技術網頁制作基礎返回章目錄返回章目錄6.1.2任務二 網站設計與開發流程第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎1定義站點2建立網站結構3確定網站的主題和建立網站結構風格4 設計網站的欄目和版塊5 設計和制作主頁及其他網頁第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎開發網站的首要工作就是要定義該站點。在該項工作中要明確建立網站的目的在站點建立的開始要為站點制訂相應的目標確定網站提供的內容以及搜集網站資料。定義站點第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎在此階段中要規劃出網站的外觀及其工作方式。
首先建立網站結構流程圖在該流程圖中包括網站的所有關鍵頁面及其與其他網頁的關系技術要點和主要的鏈接也應在其中給出。建立網站的結構時將自己所希望的網頁內容全部加入進去然后再和其他參與網站開發的人員一起研究、討論融入其他人員的意見。最后將網站結構圖確定下來。建立網站結構第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎設計一個網站首先遇到的問題就是如何定位網站的主題。網站的主題也就是網站的題材。網站的題材主要有網上求職、網上聊天/即時信息、網上社區、娛樂、計算機技術、教育、生活等大類每個大類都可以繼續細分如娛樂類可再分為明星新聞、在線播放、在線游戲、下載電影等。還有一些是專業的題材如中醫、天氣預報等這里不再細分。對于題材的選擇應注意以下3個問題確定網站的主題和建立網站結構風格第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎1 主題要小而精。定位要小內容要精。不可以幻想制作一個包羅萬象的站點而更應該突出特色。網站的最大特點就是新和快目前最熱門的個人主頁都是天天更新甚至幾小時更新一次。網絡上的“主題站”比“萬全站”更受人們喜愛。2 題材最好是你自己擅長或者喜愛的內容。
例如如果是平面設計人員就可以建立一個平面設計之家網站如果是一個教師可以建立一個教學網站及時反映教學情況和進行實時教學。這樣在制作時才會激發個人的熱情才不會覺得無聊或者力不從心才能設計制作出優秀的網站。第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎網站的主題和風格確定完畢在收集和組織了許多相關的資料內容后動手制作網站之前一定要做好網站的規劃確定合理的欄目版塊。欄目的實質是一個網站的大綱索引索引應該將網站的主體明確顯示出來。在制定欄目的時候要仔細考慮合理安排。網站欄目安排一定記住要緊扣主題同時要設一個最近更新或網站指南欄目、設定一個可以雙向交流的欄目、設一個下載或常見問題回答欄目。設計網站的欄目和版塊第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎版塊比欄目的概念要大一些每個版塊都有自己的欄目。例如中國教育和科研計算機網站點分中國教育、教育資源、科研發展、教育信息化等版塊每個版塊下面有各有自己的主欄目。設置版塊應注意各版塊要有相對獨立性各版塊要有相互關聯版塊的內容要圍繞站點主題。第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎主頁的制作者需要先繪制一張草圖草圖應包括網站的標志、廣告條、菜單、導航欄等一些基本元素。
草圖設計好后就可以開始動手制作主頁了。主頁制作好以后就開始按著目錄結構設計和制作其他頁面在制作中其他頁面要和主頁保持相同的風格要有返回主頁的鏈接目錄結構不要超過三層。設計和制作主頁及其他網頁第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎工作任務安裝啟動后熟悉其工作界面和編輯環境認識靜態網頁和動態網頁的基本概念及二者的區別在網頁中輸入和編輯文本插入圖象插入影片和添加聲音插入和編輯表格創建和使用層布局表格和單元格在網頁中添加和刪除框架設置框架屬性認識CSS的概念創建CSS樣式創建與應用表單。第6章第5章網絡安全技術網頁制作基礎返回章目錄返回章目錄6.2.1任務一 熟悉的工作環境第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎工作任務安裝啟動后熟悉其工作界面和編輯環境認識靜態網頁和動態網頁的基本概念及二者的區別在網頁中輸入和編輯文本插入圖象插入影片和添加聲音插入和編輯表格創建和使用層布局表格和單元格在網頁中添加和刪除框架設置框架屬性認識CSS的概念創建CSS樣式創建與應用表單。
第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎1安裝熟悉的工作界面第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎1 運行安裝程序出現“歡迎使用 8 ”界面2 單擊【下一步】按鈕打開“許可證協議”對話框如圖6-3所示。3 單擊【下一步】按鈕彈出如圖6-4所示的“目標文件夾和快捷方式”對話框單擊【更改】按鈕彈出如圖 6-5所示的“更改當前目的地文件夾”對話框選擇D盤為安裝路徑單擊【確定】按鈕繼續。4 單擊【下一步】按鈕彈出“默認編輯器”對話框安裝第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎5 單擊【下一步】按鈕彈出“已做好安裝程序的準備”對話框單擊【安裝】按鈕開始安裝程序。安裝完成后彈出“ 完成”對話框如圖6-7所示。單擊【完成】按鈕完成程序的安裝。第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎1 執行【開始】→【所有程序】→【】→【 8】命令啟動軟件。
如果是第一次啟動將會出現“工作區設置”對話框如圖6-8所示對于初學者建議使用默認的“設計者”布局。2 選擇設計器工作區彈出“選擇建立文件類型”窗口熟悉的工作界面第6章第5章網絡安全技術網頁制作基礎返回章目錄返回章目錄6.2.2任務二 熟悉的編輯環境第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎主菜單使用菜單欄基本上能夠實現絕大部分功能。其功能包含在“文件”、“編輯”、“查看”、“插入”、“修改”、“文本”、“命令”、“站點”、“窗口”和“幫助”菜單中。插入工具欄包含將各種類型的“對象”插入到文檔中的按鈕。每個對象都是一段HTML代碼允許在插入時設置不同的屬性。默認的“插入”工具欄為“常用”工具欄單擊“插入”按鈕彈出下拉菜單在下拉菜單中可以選擇其他工具欄。第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎文檔工具欄包含視圖轉換按鈕這些按鈕可在文檔的不同視圖間快速切換。包括三個文檔視圖分別是“代碼”視圖、“設計”視圖、“代碼和設計”視圖。屬性面板用于顯示所選中的網頁元素的屬性并且可以在屬性面板上修改。
選擇不同的網頁元素屬性面板所顯示的內容也有所不同。文檔窗口用于顯示創建或編輯的文檔。有三種顯示模式即設計視圖、代碼視圖、設計和代碼視圖用戶可以根據需要使用文檔工具欄中的視圖按鈕隨意切換顯示模式。第6章第5章網絡安全技術網頁制作基礎返回章目錄返回章目錄6.2.3任務三區別靜態網頁與動態網頁第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎1靜態網頁2動態網頁3 二者區別第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎靜態網頁是相對于動態網頁而言是指沒有后臺數據庫、不含程序和不可交互的網頁常見的擴展名為.htm、.html、.shtml、.xml在靜態網頁上也可以出現各種動態的效果如.gif格式的動畫、Flash動畫和滾動字幕等。靜態網頁第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎動態網頁是指網頁內含有程序代碼并會被服務器端執行的網頁常見的擴展名為.asp、.php、.jsp。靜態網頁是設計者做好的固定的網頁。動態網頁就是可以進行交互的網頁它可以根據不同用戶的操作作出不同的反映。把用戶的不同的操作發送到服務器后用程序代碼進行處理。動態網頁第6章返回章目錄返回章目錄第5章網絡安全技術網頁制作基礎靜態網頁與動態網頁的...