大學(xué)網(wǎng)頁設(shè)計課程一.ppt

實驗一創(chuàng)建空白網(wǎng)站 任務(wù)1創(chuàng)建空白網(wǎng)頁 任務(wù)2查看網(wǎng)頁源文件 預(yù)備知識 一 網(wǎng)頁基礎(chǔ)知識1 網(wǎng)頁 網(wǎng)站的概念1 WWW簡介WWW WorldWideWeb 萬維網(wǎng) 并不就是Internet 它只是Internet提供的服務(wù)之一 2 WWW與瀏覽器從術(shù)語的角度 WWW是由遍布在Internet上的稱為Web服務(wù)器的計算機(jī)組成 它將不同的信息資源有機(jī)地組織在一起 通過一種叫做 瀏覽器 的軟件進(jìn)行瀏覽 如果熟悉網(wǎng)上的基本操作 應(yīng)該清楚 獲取任何一種Internet服務(wù)都需要相應(yīng)的客戶端軟件 例如 收發(fā)電子郵件 最常見的是使用Outlook或OutlookExpress之類的電子郵件客戶端程序 要進(jìn)行網(wǎng)上傳呼 只要安裝了QQ軟件即可 要進(jìn)行文件傳輸 則需要使用CuteFTP FlashGet等之類的FTP客戶端程序進(jìn)行文件的上傳和下載 如果要上網(wǎng)瀏覽 則應(yīng)使用 瀏覽器 作為客戶端程序 如Windows環(huán)境下的InternetExplorer 簡稱為IE 3 網(wǎng)頁 網(wǎng)站和主頁WWW是由無數(shù)的Web服務(wù)器構(gòu)成 我們通過瀏覽器訪問這些服務(wù)器上的網(wǎng)頁 不同的網(wǎng)頁通過超鏈接聯(lián)系在一起 構(gòu)成了WWW的縱橫交織結(jié)構(gòu) 作為WWW基本組成元素的網(wǎng)頁 有時也稱為頁面或Web頁 網(wǎng)頁是一種存儲在Web服務(wù)器 網(wǎng)站服務(wù)器 上 通過Web進(jìn)行傳輸并被瀏覽器所解析和顯示的文檔類型 其內(nèi)容是由HTML語言構(gòu)成 從文件的角度講 網(wǎng)頁是一種由HTML 即超文本標(biāo)記語言 編寫而成的特殊的文本文件 所以網(wǎng)頁文件通常又被稱為HTML文件 其文件擴(kuò)展名通常為 html或 htm 當(dāng)然 網(wǎng)頁與網(wǎng)頁之間的關(guān)系并不是完全相同的 通常我們把一系列的邏輯上可以視為一個整體的頁面叫做網(wǎng)站 或者說 網(wǎng)站就是一個鏈接的頁面集合 它具有共享的屬性 例如相關(guān)主題或共同目標(biāo) 網(wǎng)站的概念是相對的 大至 新浪網(wǎng) 這樣的門戶網(wǎng)站 頁面多得無法計數(shù) 而且位于多臺服務(wù)器上 小到一些個人網(wǎng)站 可能只有零星幾個頁面 僅在某臺服務(wù)器上占據(jù)很小空間 4 網(wǎng)頁的組成從組成的元素角度講 網(wǎng)頁是由文本 圖片和超鏈接等多種對象構(gòu)成的多媒體頁面 包含相關(guān)的文本 圖像 動畫 視頻以及腳本命令等 網(wǎng)頁一般由HTML文件組成 位于特定計算機(jī)的特定目錄中 其位置可以根據(jù)URL確定 網(wǎng)頁是由HTML編寫的文本文件 用最簡單的文本編輯器可以創(chuàng)建網(wǎng)頁 因此 網(wǎng)頁中也無法保存圖片 聲音等信息 那么網(wǎng)頁是怎樣將聲音 圖像 視頻和動畫等各種資源組合起來顯示在客戶機(jī)上并用來瀏覽呢 網(wǎng)頁借助HTML語言 利用超媒體信息獲取技術(shù) 通過超文本的表達(dá)方式 使用超鏈接方式將WWW上的相關(guān)信息連接在一起 5 URL介紹統(tǒng)一資源定位符是全球WWW網(wǎng)絡(luò)服務(wù)器資源的標(biāo)準(zhǔn)尋址定位編碼 俗稱 網(wǎng)址 URL是一個資源位置的完整描述 包括資源所在的計算機(jī)名 目錄名以及文件名 資源的地址可能是用戶磁盤中的一個文件 也可能是地球上的另一邊某個連接在Internet上的計算機(jī)中的文件 URL的基準(zhǔn)可以是絕對的或者相對的 絕對基準(zhǔn)包括將要訪問的文件的完整描述 包括主機(jī)名 目錄名 文件名 而相對基準(zhǔn)假定先前的主機(jī)和目錄路徑不變 因此僅指明文件名 也許會含有子目錄 URL格式為 協(xié)議 主機(jī)標(biāo)識 端口號 路徑 文件名 6 動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁根據(jù)內(nèi)容對交互的響應(yīng)方式的不同 可將網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁兩大類 靜態(tài)網(wǎng)頁的內(nèi)容在用戶的的瀏覽過程中是一成不變的 它不會因為用戶的操作而改變頁面顯示的內(nèi)容和格式 反之 動態(tài)網(wǎng)頁可在用戶對網(wǎng)頁訪問的過程中 根據(jù)用戶的操作做出響應(yīng) 改變頁面所顯示的內(nèi)容或者執(zhí)行某些特定的操作 根據(jù)實現(xiàn)方式的不同 動態(tài)網(wǎng)頁還可分為客戶端動態(tài)網(wǎng)頁和服務(wù)器端動態(tài)網(wǎng)頁 1 靜態(tài)網(wǎng)頁 靜態(tài)網(wǎng)頁就是標(biāo)準(zhǔn)的HTML文件 其文件擴(kuò)展名是 htm或 html 它可以包含HTML標(biāo)記 文本 聲音 圖像 動畫 電影 Java程序以及客戶端ActiveX控件 但這種網(wǎng)頁不包含任何腳本 其內(nèi)容在開發(fā)人員編輯好之后不會自行改動 所以稱為靜態(tài)網(wǎng)頁 靜態(tài)網(wǎng)頁也可能包含翻轉(zhuǎn)圖像 GIF動畫或Flash影片 從而具有很強(qiáng)的動感效果 此處所說的靜態(tài)網(wǎng)頁是指在發(fā)送到瀏覽器時不再進(jìn)行修改的Web頁 其最終內(nèi)容不會因為用戶的操作而改變 2 客戶端動態(tài)網(wǎng)頁 客戶端動態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁的區(qū)別在于客戶端動態(tài)網(wǎng)頁包含一些可在客戶端瀏覽器中執(zhí)行的腳本程序 這些腳本程序可在瀏覽器中被解釋執(zhí)行 并且可改變網(wǎng)頁中各種標(biāo)記 Tag 的內(nèi)容 這些腳本能夠?qū)τ脩舻牟煌僮髯龀鲰憫?yīng) 從而達(dá)到動態(tài)的效果 實現(xiàn)這種腳本的語言主要有兩類 JavaScript和VBScript 這種動態(tài)網(wǎng)頁有很大局限性 首先 客戶端動態(tài)網(wǎng)頁中的腳本程序都是程序員在設(shè)計網(wǎng)頁的時候事先寫好的 響應(yīng)的內(nèi)容和方法有限 其次 這些腳本程序在客戶端是可見的 降低了網(wǎng)站的安全性 為了改進(jìn)客戶端動態(tài)網(wǎng)頁的問題 人們提出了服務(wù)器動態(tài)網(wǎng)頁 3 服務(wù)器動態(tài)網(wǎng)頁 服務(wù)器動態(tài)網(wǎng)頁和前面兩種的不同點是 在服務(wù)器端動態(tài)網(wǎng)頁中也包含腳本程序 當(dāng)網(wǎng)頁被訪問的時候 這些腳本程序首先在服務(wù)器端被解釋執(zhí)行 然后使用執(zhí)行的結(jié)果將腳本程序替換掉 生成一個新的純HTML網(wǎng)頁返回給客戶端 這種機(jī)制使WWW服務(wù)能夠和數(shù)據(jù)庫管理系統(tǒng)等傳統(tǒng)的信息系統(tǒng)聯(lián)合起來 提供給用戶信息完全動態(tài)的網(wǎng)頁瀏覽服務(wù) 服務(wù)器端動態(tài)網(wǎng)頁通常與靜態(tài)網(wǎng)頁和客戶端動態(tài)網(wǎng)頁的文件擴(kuò)展名不同 對于動態(tài)網(wǎng)頁來說 其文件擴(kuò)展名不再是 htm或 html 而是與所使用的服務(wù)器動態(tài)網(wǎng)頁開發(fā)技術(shù)有關(guān) 例如 使用ASP NET技術(shù)開發(fā)時 網(wǎng)頁文件的擴(kuò)展名為 aspx等 目前流行的服務(wù)器端動態(tài)網(wǎng)頁開發(fā)技術(shù)主要有ASP NET JSP和PHP等 2 網(wǎng)頁標(biāo)準(zhǔn)HTML是網(wǎng)頁制作的基本語言標(biāo)準(zhǔn) HTML HyperTextMarkupLanguage 超文本標(biāo)記語言 是表示網(wǎng)頁的一種規(guī)范 它通過標(biāo)記符定義了網(wǎng)頁內(nèi)容的顯示 例如 用標(biāo)記符可以在網(wǎng)頁上定義一個表格 1 基本概念 1 標(biāo)記 在HTML中用于描述功能的符號稱為 標(biāo)記 它是用來控制文字和圖形等顯示方式的符號 例如HTML HEAD BODY等 標(biāo)記在使用時必須用 括起來 標(biāo)記有單標(biāo)記和雙標(biāo)記之分 2 標(biāo)記屬性 許多標(biāo)記的始標(biāo)記內(nèi)可以包含一些屬性 其語法是 各屬性之間無先后次序 屬性也可省略 例如 表示在文檔當(dāng)前位置畫一條水平線 其中size屬性定義線的粗細(xì) align屬性表示對齊方式 width定義水平線的長度 3 注釋語句 HTML和其他程序語言一樣 提供了注釋語句 格式為 文件中的注釋用 標(biāo)記 表示注釋結(jié)束 中間內(nèi)容為注釋 注釋可放在任何地方 注釋內(nèi)容不在瀏覽器中顯示 僅供設(shè)計人員閱讀方便 2 HTML的基本結(jié)構(gòu)HTML網(wǎng)頁文件主要由文件頭和文件體兩部分組成 文件頭對文件進(jìn)行一些必要的定義 文件體是HTML網(wǎng)頁的主要部分 下面是HTML網(wǎng)頁的基本結(jié)構(gòu) HTML文件開始文件頭開始文件頭文件頭結(jié)束文件體開始文件體文件體結(jié)束HTML文件結(jié)束 3 HTML的語法規(guī)則 1 HTML文件必須以純文本形式存放 擴(kuò)展名為 htm或 html 若系統(tǒng)為UNIX 擴(kuò)展名必須為 html 2 HTML標(biāo)記不區(qū)分大小寫 如和是相同的 3 多數(shù)HTML標(biāo)記可以嵌套 但不可以交叉 4 HTML文件一行可以寫多個標(biāo)記 一個標(biāo)記也可以分多行書寫 不用任何續(xù)行符號 5 HTML源文件中的換行 回車符和多個連續(xù)空格在顯示效果中是無效的 6 網(wǎng)頁中所有的顯示內(nèi)容都應(yīng)該受限于一個或多個標(biāo)記 不應(yīng)有游離于標(biāo)記之外的文字或圖像等 以免產(chǎn)生錯誤 3 網(wǎng)站開發(fā)工作流程制作網(wǎng)頁的最終目的是在網(wǎng)上建立一個傳達(dá)信息的綜合體 即網(wǎng)站 網(wǎng)站是由多個網(wǎng)頁組成的 但不是網(wǎng)頁的簡單羅列組合 而是用超鏈接方式組成的既有鮮明風(fēng)格又有完善內(nèi)容的有機(jī)整體 要想制構(gòu)建一個好的網(wǎng)站 必須了解網(wǎng)站建設(shè)的一些基本知識 1 規(guī)劃站點首先 確定網(wǎng)站的目標(biāo)是關(guān)鍵 明確誰是網(wǎng)站將來的訪問者 如果是為公司制作網(wǎng)站 則要確保目標(biāo)和主題明確 數(shù)據(jù)充分并保持目標(biāo)的簡潔 其次是確定網(wǎng)站的主題 風(fēng)格和創(chuàng)意點 主題選材要小而精 最好是選擇自已擅長或感興趣的內(nèi)容 選題不要太濫 目標(biāo)定位不要太高 最后是網(wǎng)站結(jié)構(gòu)的確定 規(guī)劃一個網(wǎng)站結(jié)構(gòu) 可以用樹狀結(jié)構(gòu)先把每個頁面的內(nèi)容大綱列出來 尤其是要制作一個有很多頁面的大網(wǎng)站時 特別需要把這個架構(gòu)規(guī)劃好 同時要考慮到以后可能的擴(kuò)充性 免得做好以后又要經(jīng)常改整個網(wǎng)站的架構(gòu) 費(fèi)時又費(fèi)力 規(guī)劃好結(jié)構(gòu)后 進(jìn)行網(wǎng)站目錄設(shè)置 根據(jù)網(wǎng)站的主題和內(nèi)容來分類規(guī)劃目錄 不同的欄目要對應(yīng)不同的目錄 在各個欄目下也要根據(jù)內(nèi)容的不同將其劃分成不同的子目錄 2 設(shè)置開發(fā)環(huán)境要設(shè)計一個精美的網(wǎng)站 制作環(huán)境設(shè)置是必不可少的 主要包括以下幾部分 1 配備良好的計算機(jī)及相關(guān)設(shè)備 如掃描儀 數(shù)碼照相機(jī)和打印機(jī)等 2 配置完善的系統(tǒng)環(huán)境 除安裝操作系統(tǒng)外 還要注意升級瀏覽器的版本 如果要進(jìn)行服務(wù)器端程序開發(fā) 還應(yīng)有相應(yīng)的軟件系統(tǒng) 3 備齊網(wǎng)頁開發(fā)工具軟件 包括網(wǎng)頁制作工具 服務(wù)器端程序開發(fā)工具及一些實用的輔助工具 4 備齊素材制作和加工軟件 包括對圖形 動畫 流媒體和聲音進(jìn)行處理的素材制作和加工軟件 5 備齊常用的網(wǎng)站發(fā)布工具 如FTP文件傳輸軟件等 3 規(guī)劃頁面設(shè)計和布局要設(shè)計出好的網(wǎng)頁 應(yīng)遵循3個原則 1 有創(chuàng)意 新穎以及有自已的特色 2 有充實的內(nèi)容和瀏覽價值 3 網(wǎng)頁的布局有一定的藝術(shù)性 網(wǎng)頁的設(shè)計與網(wǎng)頁內(nèi)容的配合最為關(guān)鍵 確定網(wǎng)頁的主題和定位方向以后 就有一個目標(biāo)去搜集相應(yīng)的材料充實和豐富主題 4 創(chuàng)建內(nèi)容資源在設(shè)計網(wǎng)頁時 千萬不要讓信息和圖片填滿網(wǎng)頁 網(wǎng)頁看起來必須是干凈 有組織有條理的 使用很容易閱讀的字體 1 文字與圖片 文字與圖片是任何一個網(wǎng)站最基本的要素 瀏覽器會根據(jù)網(wǎng)頁文件中的HTML代碼 將文字與圖片正確地表現(xiàn)出來 在一個頁面中 文字與圖片的比例要適當(dāng) 文字太多 會降低網(wǎng)站的吸引力 圖片太多 又會使頁面的瀏覽速度下降 瀏覽者可能還沒等到網(wǎng)頁內(nèi)容全部出現(xiàn) 就已經(jīng)跳到別的網(wǎng)頁甚至把瀏覽器關(guān)掉 2 動畫 假如網(wǎng)頁上只有靜止的文字與圖片 就未免顯得過于沉悶 如有些動畫點綴 必定會生色不少 通?？吹降木W(wǎng)頁動畫都是動態(tài)的GIF格式圖片 動態(tài)GIF使用不能過多 否則 不僅網(wǎng)站的瀏覽速度會大打折扣 更會給人一種眼花繚亂的感覺 如果需要在網(wǎng)頁上加上一些大型或復(fù)雜的動畫 就需要借助Flash動畫 3 音樂 在多媒體技術(shù)大行其道的今天 網(wǎng)頁不僅僅可以有色 還可以有聲 適當(dāng)?shù)卦诰W(wǎng)頁上加點音樂效果 會使網(wǎng)頁更具有吸引力 網(wǎng)上流行的聲音格式有MIDI WAV MP3 RealAudio 4 視頻影像 眾所周知 視頻影像是一種非常直觀而有效的表現(xiàn)方式 但礙于網(wǎng)速所限 下載一個視頻文件要花費(fèi)很多時間 而借助一邊下載 一邊播放的串流技術(shù) Steaming 就可以解決這個問題 視頻流技術(shù)常見的文件格式有RealVideo MicrosoftMedia及AppleQuicktime 它們各有所長 其中RealVideo的使用者最多 5 搜索功能 搜索功能就是使得瀏覽者在短時間內(nèi)快速地從大量的資料中找到符合要求的資料 這對于一個資料非常豐富的網(wǎng)站來說 非常有用 要建立一個搜索功能 就要有相應(yīng)的腳本程序以及完善的數(shù)據(jù)庫支持 6 留言板 論壇及聊天室 留言板 論壇及聊天室為瀏覽者提供一個信息交換的地方 瀏覽者可以就個別的產(chǎn)品 服務(wù)或話題進(jìn)行討論 顧客也可以就他們提出的問題提出咨詢 或者得到售后的支持服務(wù) 7 提交表單 提交表單的用途很多 從收集顧客的意見 資料登記到服務(wù)申請或網(wǎng)上購物等 都需要使用提交表單的功能 提交表單的功能看似很簡單 其實也需要動態(tài)腳本程序?qū)⑹占降馁Y料進(jìn)行處理才能用作其他用途 8 網(wǎng)頁程序 要設(shè)計一些更復(fù)雜 更大型 用途更多的網(wǎng)頁 例如大型的門戶網(wǎng)站 拍賣網(wǎng)站或購物網(wǎng)站等 就需要更專業(yè) 更高級的網(wǎng)頁程序支持 如Java JavaScript ASP NET等 5 測試和部署在網(wǎng)站做好之后 發(fā)布網(wǎng)站前 要做好一系列工作 如進(jìn)行本地測試 確定發(fā)布方式和發(fā)布后的在線測試等 在將網(wǎng)站上傳到服務(wù)器前 首先 應(yīng)該在本地機(jī)器上進(jìn)行測試 以保證整個網(wǎng)站的所有網(wǎng)頁的正確性 否則 進(jìn)行遠(yuǎn)程調(diào)試會比較復(fù)雜 發(fā)布網(wǎng)站就是將制作好的網(wǎng)站上傳到Internet上的WWW服務(wù)器 關(guān)于WWW服務(wù)器的選擇有3種方式 自已購買的服務(wù)器 采用一些ISP InternetServiceProvider 因特網(wǎng)服務(wù)提供商 提供的虛擬主機(jī)或者采用一些網(wǎng)站提供的免費(fèi)空間 對于企業(yè)或單位來說 如果是自已的服務(wù)器 只要把做好的網(wǎng)站包括CGI ASP JSP或PHP程序發(fā)到WWW路徑上就可以了 而對于個人申請的免費(fèi)空間網(wǎng)頁 就需要將自已計算機(jī)上做好的網(wǎng)站上傳到申請好的網(wǎng)站服務(wù)器的免費(fèi)空間上去 上傳網(wǎng)站有多種形式 如利用Web頁上傳 通過E mail上傳 使用FTP工具上傳 利用網(wǎng)頁編輯制作軟件上傳 或者直接復(fù)制文件 通過命令上傳也可以 使用FrontPage和Dreamweaver等網(wǎng)頁編輯制作軟件可以進(jìn)行站點的下載和上傳管理 利用FTP軟件 如CuteFTP FlashFTP和LeapFTP等上傳網(wǎng)站 具有界面友好 功能強(qiáng)大和容易使用等特點 6 維護(hù)和更新站點網(wǎng)站上傳后能夠瀏覽 工作并沒有結(jié)束 因為網(wǎng)站長時間一成不變 或者毫無新意 肯定不會吸引用戶再次訪問 如果網(wǎng)站制作精良 更新及時 不但可以吸引回頭客 而且可以因此擴(kuò)大網(wǎng)站影響 網(wǎng)站的維護(hù)主要包括檢測網(wǎng)站的錯誤 保證網(wǎng)站正常動轉(zhuǎn) 處理用戶信息 定期更新網(wǎng)頁內(nèi)容和修正網(wǎng)頁錯誤等 網(wǎng)站的管理維護(hù)可以使用一些專業(yè)的軟件來實現(xiàn) 對于有自已服務(wù)器的單位 則需要配置專門的網(wǎng)站管理員來管理 維護(hù)和更新網(wǎng)站 一 實驗?zāi)康?1 了解Internet與WWW的含義 2 了解并掌握網(wǎng)頁與網(wǎng)站的相關(guān)概念 3 理解靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的含義 4 掌握網(wǎng)站與網(wǎng)頁的基本構(gòu)成 5 認(rèn)識常用網(wǎng)頁設(shè)計工具與軟件 6 了解網(wǎng)頁設(shè)計相關(guān)程序語言 二 實驗重點 1 瀏覽一個完整的網(wǎng)站及其網(wǎng)頁構(gòu)成 如圖1 1所示 2 制作一個沒有內(nèi)容的空白網(wǎng)頁 3 查看網(wǎng)頁文件的源代碼內(nèi)容 圖1 1網(wǎng)站效果 二 實驗難點 1 制作一個沒有內(nèi)容的空白網(wǎng)頁 2 查看網(wǎng)頁文件的源代碼內(nèi)容 三 實驗步驟 1創(chuàng)建空白網(wǎng)頁 操作流程 模塊1創(chuàng)建空白網(wǎng)頁 操作流程 1 打開 我的電腦 打開某磁盤 如D盤 在空白處單擊鼠標(biāo)右鍵 選擇 新建 文本文檔 如圖1 1所示 模塊1創(chuàng)建空白網(wǎng)頁 圖1 1新建文本文件 模塊1創(chuàng)建空白網(wǎng)頁 2 將剛新建的文本文檔重命名為first 擴(kuò)展名修改為 htm 更改文本文件的名稱 按Enter鍵后 會打開如圖1 2所示的對話框 請直接單擊 是 Y 按鈕 文件更名后 文件類型由 文本文檔 更改為HTMLDocument 模塊1創(chuàng)建空白網(wǎng)頁 圖1 2更改文件擴(kuò)展名的的警告提示 模塊1創(chuàng)建空白網(wǎng)頁 3 雙擊剛創(chuàng)建的文件first htm 則系統(tǒng)用IE打開它 如圖1 3所示 為一個空白網(wǎng)頁文件 模塊1創(chuàng)建空白網(wǎng)頁 圖1 3IE瀏覽空白網(wǎng)頁效果 模塊1創(chuàng)建空白網(wǎng)頁 4 將fir