網頁設計概述_第1頁
網頁設計概述_第2頁
網頁設計概述_第3頁
網頁設計概述_第4頁
網頁設計概述_第5頁
已閱讀5頁，還剩30頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

網頁設計Name：劉佳Office：網絡教研室C4-308Email:956420190@Tel:2184431課程內容及教材運用AdobeDreamweaverCS5軟件，來介紹設計與制作靜態(tài)網站的方法和技巧，為后續(xù)課程《網絡編程》打好基礎。

基本要求：認真聽課、注意操作課上充分預習和復習、多練習課下請假制度、上機按學號入座紀律認真按時獨立完成作業(yè)本課程的特點：應用性、實踐性強。第1章網頁設計概述網頁基礎知識網頁構成元素網站建設的流程HTML基礎DreamweaverCS5操作環(huán)境簡介1.1網頁基礎知識在因特網上，根據一定規(guī)則，使用特定工具制作的用來展示特定內容的相關文件稱為網頁，這些網頁的集合就是一個網站。什么是網頁、網站、WWW？WWW：萬維網，簡稱為Web，是Internet上最受歡迎、最為流行的信息檢索服務系統(tǒng)，信息資源以web頁的形式存儲在WWW服務器中，用戶通過WWW客戶端瀏覽器程序瀏覽Web頁內容。WWW服務的工作原理URL：應用協(xié)議類型://信息資源所在主機名（域名或IP地址）/路徑名/…/文件名WWW服務的主要特點WWW服務采用了客戶機/服務器模式；WWW服務的核心技術是：超文本標記語言（HTML）：制作網頁的一種編程語言，HTML文檔擴展名通常為.htm或.html。超文本傳輸協(xié)議（HTTP）：客戶端與WWW服務器之間相互通信的應用層協(xié)議，保證正確傳輸超文本文檔。超鏈接（hyperlink）:實現(xiàn)了網頁之間的跳轉，www以超文本及超媒體方式組織網絡多媒體信息，用戶可以訪問文本、語音、圖形和視頻等信息。1.2網頁構成元素網頁是由哪些基本元素構成的呢？圖像文本網頁視頻動畫超鏈接音頻表格、表單、導航、條、懸停按鈕、Java特效、AxtiveX組件等

1.2網頁構成元素文本：是網頁的信息主體，能準確的表達信息的內容和含義。占用的空間小，傳輸速率高。圖像：占用的空間大，傳輸速率慢。如果使用恰當比文字更具有說服力，使網頁更生動，更具表現(xiàn)力和吸引力。網頁中常用的圖象文件格式有：GIF、JPEG、PNG等。動畫：占用的空間比圖像還大，但是“動”比“靜”更具生命力，更能打動人心。一般網站廣告都以動畫形式顯示。超鏈接：是網頁的靈魂，是網絡超文本體系結構的經絡。在網站內網頁之間的跳轉或網站之間的跳轉等都是靠超鏈接實現(xiàn)的。音頻：音頻是多媒體網頁重要組成部分。網頁中常用的聲音文件格式有：MIDI、WAV、MP3等，可使用音頻文件作為網頁的背景音樂，但會影響網頁的下載速度。視頻：在網頁中用作視頻交流或直播，使網頁變得生動、真實。常用的視頻文件格式有：RealPlayer、MPEG、AVI等。1.2網頁構成元素表格：用來控制網頁信息的布局方式?？梢允褂帽砀駚砭_控制各種網頁元素在網頁中的顯示位置。表單：可以實現(xiàn)瀏覽者與站點之間的交互。網頁中的表單通常用來接收用戶在客戶端的輸入，然后將這些信息發(fā)送到服務器端。表單有不同功能的表單域組成。導航條：是一組超鏈接，用于在站點的首頁及其他重要網頁中進行跳轉。一般情況下，導航條應放在網頁的醒目位置。其他特殊元素：如懸停按鈕、Java特效、AxtiveX組件等，可增強網頁功能，使網頁更有趣。1.2網頁構成元素網站(WebSite)建設是個系統(tǒng)工程，其基本工作流程可分為5個階段：1.3網站建設的流程網站策劃網頁制作網站測試與發(fā)布網站宣傳與維護

（1）（2）（3）（4）（5）網頁設計

網站策劃是在制作網站前對網站進行周密的計劃，明確制作網站的目的以及怎么做。其工作主要包括：1.3.1網站策劃①確定網站的主題：網站的題材，即做一個什么類型的網站？②確定網站的用戶群：以人為本1.3.1網站策劃③確定網站的配色方案：根據網站的整體風格來選定網站的配色。紅色：往往與吉祥、好運、喜慶相聯(lián)系，自然就成為節(jié)日、慶?；顒拥某Ｓ蒙?/p>

藍色：給人冷靜、沉思、智慧、和征服自然的力量，在商業(yè)設計中，強調科技、效率的商品或企業(yè)形象，大多選用藍色作為標準色。

1.3.1網站策劃④收集網站的素材和內容廣泛收集、盡量全面，內容相關個人網站：個人資料、個人照片、個人作品和興趣愛好等1.3.1網站策劃⑤確定網站欄目及網站目錄結構欄目劃分要服從并體現(xiàn)網站主題：將準備好的“原材料”按一定方法分類，為其設立專門的欄目。規(guī)劃網站欄目的過程實際上就是網站內容細化的過程，一個網站欄目有可能就是一個專欄網頁。不要將所有文件都存放在根目錄下，按欄目內容建立子目錄。每個目錄下都建立獨立的Images目錄：通常一個站點根目錄下都默認有一個Images目錄，用來存放站點中用到的圖片。設計時應為每個主欄目建立一個獨立的Images目錄，以方便管理。文件的命名要合理：由于受Web服務器識別限制，目錄文件在命名時要使用簡短文件名，以英文形式為主，一律以小寫形式處理。1.3.1網站策劃⑥確定網頁的版式設計與布局網頁首頁和其他頁面的結構形式。為了達到統(tǒng)一、漂亮的視覺效果，網站中的所有頁面都是圍繞首頁布局進行設計的。

網頁設計是實際設計網站的工作，包括如下幾個步驟：1.3.2網頁設計按照創(chuàng)意和設想繪制出網站首頁與子頁的草圖，也可以加入一些設計的風格。框架和大體風格確定后，繼續(xù)在圖紙上標明欄目、內容和網站上的一些顏色符號等，以避免遺漏規(guī)劃的內容，并進一步確定網站風格。①手繪草圖

網頁設計是實際設計網站的工作，包括如下幾個步驟：1.3.2網頁設計將網站風格、創(chuàng)意設計和網站內容整合在一起的過程，就是根據草圖在圖像處理軟件Photoshop或Fireworks中進行圖像編輯處理

②設計效果圖：

網頁制作是實際的網站構建過程，是將設計的結果呈現(xiàn)給用戶。選擇一個網頁編輯軟件如Dreamweaver或FrontPage等，制作前面規(guī)劃的網頁內容。如果需要，用PhotoShop、Flash、Fireworks等圖形軟件設計網頁的背景、標題和動畫等。1.3.3網頁制作1.3.4網站測試與發(fā)布網站測試：主要檢測各個網頁及組件能否正確運行。如網頁的整體效果是否和你的想法一致，計數(shù)器能否正確顯示，廣告橫幅、滾動字幕、動態(tài)按鈕等是否符合要求，超鏈接是否鏈接正確等。網站發(fā)布：將自己的網站上傳到指定的主機服務器上。申請網頁空間：在提供網頁服務的ISP服務商處（如網易）申請網頁空間。上傳網頁：將網站上傳到Internet。登錄訪問：登錄到相應的站點即可訪問。1.3.5網站宣傳與維護網站宣傳：采取注冊搜索引擎、交換鏈接、發(fā)送郵件等方式進行網站宣傳推廣工作，以吸引更多的瀏覽者。網站維護：建立網站后必須負起維護與更新的責任，每天有新的內容才能留住訪客的心。1.3網站建設的流程網站策劃網頁制作網站測試與發(fā)布網站宣傳與維護

（1）（2）（3）（4）（5）網頁設計第（1）步和第（2）步是整個建站過程的關鍵，在這兩步上多下功夫，多動腦子，會達到事半功倍的效果。HTML語言是Web開發(fā)的基礎，任何一個Web頁面都離不開HTML。像Dreamweaver、Frontpage等網頁編輯工具具有所見即所得的功能，方便了用戶的開發(fā)，但是作為Web程序的開發(fā)人員，必須看懂HTML代碼，否則很難進行下一步的編程（如ASP等）。1.4HTML基礎

HTML代碼結構HTML文檔創(chuàng)建瀏覽所設計的網頁1.4.1HTML代碼結構HTML標記由一個開始標簽和一個封閉標簽組成。標簽封閉在小于尖括號（<）和大于尖括號（>）內。通過重復輸入原始標簽并在開始尖括號后面輸入一個斜杠（/）來創(chuàng)建封閉標簽。<HTML>

<HEAD><TITLE>標題部分</TITLE></HEAD>

<BODY><P>你好,這是正文部分!</P>

</BODY></HTML><HTML>和</HTML>是HTML文件開頭和結尾的標記符<HEAD>和</HEAD>是標題部分標記符<BODY></BODY>是正文部分標記符

<html>和</html>標記該文檔為Web文檔，Web文檔的所有內容都位于這兩個標記之間。

<head>和</head>中包含一些與Web有關的特定信息，如網頁的標題、樣式定義（如CSS）及腳本等。常用的有標題標記符<title>和</title>(定義網頁的標題)。

<body>和</body>指定HTML文件的主體，文字、圖形、圖像、鏈接、動畫、色彩和音效等元素都位于該標記符內。以上標記符都必須成對出現(xiàn)。幾點說明：1.4.2HTML文檔創(chuàng)建直接在文字編輯軟件中編寫html代碼，如記事本、寫字版、Word等，存為純文檔格式，擴展名為*.htm或*.html。利用網頁制作工具如Dreamweaver或FrontPage等的所見即所得功能制作好網頁，其html代碼自動生成。這種方法對用戶來講較簡單。還可以再對html代碼進行修改，比較常用。1.4.3瀏覽所設計的網頁雙擊HTML文檔圖標在瀏覽器中打開網頁文件如要修改網頁的程序，單擊瀏覽器窗口中“查看”“源文件”命令，調出記事本，修改完程序后保存，并在瀏覽器中刷新該網頁內容。1.4.4編寫自己的HTML代碼<html><body>Welcometomyfirstwebpage</body></html>（1）啟動“記事本”（2）在空白文檔窗口輸入以下代碼：（3）把文件保存到桌面，并把它命名為firstpage.html（4）啟動IE瀏覽器，選擇“文件”＞“打開”，導航到桌面并選擇firstpage.html，然后單擊“確定”/“打開”按鈕。了解HMTL語法（5）切換回文本編輯器，或在瀏覽器中選擇“查看”＞“源文件”（6）在文本“Welcometomyfirstpage”后插入光標，按下Enter鍵插入一個段落回車符。（7）輸入“Makingwebpagesisfun”，然后按下空格鍵5次，插入5個空格。最后，在同一行上輸入“andeasy！”。（8）保存文件（9）切換到瀏覽器，刷新窗口，加載更新過的頁面。插入HTML語法（10）切換回文本編輯器，為文本添加加粗標簽，如下：<p>Makingwebpagesisfunandeasy!</P>（11）利用非間斷空格替換文本中的5個空格，如下：<p>Makingwebpagesisfun     andeasy!</P>（12）保存文件，切換到瀏覽器，刷新窗口，加載更新過的頁面。利用HTML格式化文本（13）切換回文本編輯器，為文本添加加粗標簽，如下：<h1>Welcometomyfirstwebpage</h1>（14）保存文件，切換到瀏覽器，刷新窗口，加載更新過的頁面。應用內聯(lián)格式化上述使用的所有標簽都是作為段落或獨立的元素工作的，稱為塊元素。HTML還提供了對包含在另一個標簽內的內容（或內聯(lián)）應用格式化和結構的能力。（15）切換回文本編輯器，為文本添加加粗標簽，如下：<p>Makingwebpag

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論