網(wǎng)頁制作基礎教程(Dreamweaver_CS3.ppt

1、、預備知識、學習的主要內容、web文件的網(wǎng)頁通常也稱為HTML文件。大多數(shù)常見的網(wǎng)頁都是HTM或HTML后面的文件，也以CGI、ASP、PHP、JSP的后綴結尾。 學習的主要內容、網(wǎng)頁分類根據(jù)生成方式，網(wǎng)頁可以大致分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁2種。 靜態(tài)網(wǎng)頁是網(wǎng)站建設初期常采用的形式，網(wǎng)站建設者將內容設定為靜態(tài)網(wǎng)頁，訪問者只能被動閱覽網(wǎng)站建設者提供的網(wǎng)頁內容。 學習的主要內容，靜態(tài)網(wǎng)頁的特點網(wǎng)頁的內容只有網(wǎng)頁設計師修改網(wǎng)頁的內容才會變化。 無法與瀏覽網(wǎng)頁的用戶進行交互。 學習的主要內容是，動態(tài)頁面網(wǎng)絡技術日新月異，很多頁面文件的擴展名不再是. htm，而是. php、 asp等，這些都是使用動態(tài)頁面

2、技術創(chuàng)建的。 特點動態(tài)網(wǎng)頁基于數(shù)據(jù)庫技術，可以大幅減少網(wǎng)站的維護工作量。 采用動態(tài)web技術的網(wǎng)站提供更多功能，如用戶注冊、用戶登錄、搜索查詢、用戶管理、訂單管理等。 學習的主要內容有： 1、html標記語言2、網(wǎng)頁制作工具Microsoft FrontPage Netscape編輯器Dreamweaver、網(wǎng)站和網(wǎng)站設計基礎知識1、互聯(lián)網(wǎng)簡介2、網(wǎng)頁資料那個縮短了人們之間的距離。 1、用戶可以通過互聯(lián)網(wǎng)概述、互聯(lián)網(wǎng)與訪問互聯(lián)網(wǎng)的任何計算機(郵件、聊天、通話等)進行交流。 本節(jié)主要介紹互聯(lián)網(wǎng)的工作原理、互聯(lián)網(wǎng)開發(fā)的簡單歷史以及提供的主要服務等基礎知識，使用戶能夠大致理解互聯(lián)網(wǎng)。 1、互聯(lián)網(wǎng)概述

3、、互聯(lián)網(wǎng)機制互聯(lián)網(wǎng)是一種全球性的分組交換原理和基于TCP/IP的計算機網(wǎng)絡。 將信息分組化(分割成多個小數(shù)據(jù)包)，以數(shù)據(jù)包為單位傳送。 互聯(lián)網(wǎng)進行信息傳輸時，主要有兩項任務。 一個是正確分割源文件，另一個是在目標位置正確重新組織同一源文件的包。 第二，準確地將分組發(fā)送到目的地。 1、互聯(lián)網(wǎng)概況、互聯(lián)網(wǎng)發(fā)展簡史互聯(lián)網(wǎng)始于20世紀60年代。 1968年，基于分組交換原理的計算機網(wǎng)絡ARPANET。 1983年建立了TCP/IP協(xié)議，計算機通信有統(tǒng)一的標準。 這是計算機網(wǎng)絡發(fā)展史上的里程碑，網(wǎng)絡從此進入高速發(fā)展的時代。 1、因特網(wǎng)概述，因特網(wǎng)提供的主要服務1下載和上傳電子郵件2文件3信息查詢4文件傳

4、輸5聊天6BBS電子公告板7在線游戲8個人主頁空間9電子商務，1、因特網(wǎng)概述、IP地址和域IP地址在因特網(wǎng)上的IP地址總共占32比特，通常用4個十進制表示，各數(shù)字用小的點(.)分隔，例如“05”，這種記錄方法稱為“點數(shù)”符號法。 通常，網(wǎng)絡和連接到網(wǎng)絡的主機由IP地址標識。1、互聯(lián)網(wǎng)概要、IP地址和域名2、域名將與網(wǎng)絡上的數(shù)字型IP地址對應的文字型地址稱為域名。 TCP/IP包括域名服務(DNS )。 DNS通過“解析”過程將域名轉換為IP地址，或將IP地址轉換為域名。 名字比用點分隔的十進制IP地址更容易記住。 計算機仍然使用IP地址，因此需要一種轉換兩者的方法。 D

5、NS使用查找表的方法將兩個值相關聯(lián)。、1、互聯(lián)網(wǎng)概述、IP地址和域名2、域名下表1-1列出了某些組織的域名命名規(guī)則和某些國家的域名命名規(guī)則。 1、互聯(lián)網(wǎng)概要1、互聯(lián)網(wǎng)概要、萬維網(wǎng)WWW WWW和瀏覽器的基本概念WWW是萬維網(wǎng)的縮寫，也稱為3W或者Web，中文名稱也稱為“萬維網(wǎng)”。 瀏覽器實際上是互聯(lián)網(wǎng)閱覽用的應用程序，其主要作用是網(wǎng)頁的顯示和腳本的解釋。 1、網(wǎng)絡概要、萬維網(wǎng)WWW WWW和閱覽器的基本概念閱覽器種類很多，現(xiàn)在常用的有internet explorer (簡稱ie )和Netscape兩種。 下面的圖1-2顯示了IE瀏覽器的工作界面。 1、互聯(lián)網(wǎng)概述1、互聯(lián)網(wǎng)提供的服務在互聯(lián)網(wǎng)

6、上理解并具體實現(xiàn)。 2 .瀏覽熟悉的網(wǎng)站，根據(jù)域名區(qū)分網(wǎng)站所屬的類型。2、網(wǎng)頁設計，網(wǎng)頁基本元素中常見的網(wǎng)頁元素包括文本、圖像、超鏈接、表格、導航欄、動畫和交互表格。 2、網(wǎng)頁設計，網(wǎng)頁基本要素1文本2圖像和動畫3聲音和動畫4超鏈接5導航條6表7表8其他常見要素，2、網(wǎng)頁設計，網(wǎng)頁布局網(wǎng)頁是否精彩，查閱者2、對于網(wǎng)頁設計、網(wǎng)頁布局的基本概念初學者，首先要了解網(wǎng)頁布局的基本概念。 頁面大小分辨率為800600 :頁面顯示大小為780428像素分辨率為1024768 :頁面顯示大小為1007600像素。 2、網(wǎng)頁設計，網(wǎng)頁布局整體形式這里指的是整個網(wǎng)頁的圖像。 這個圖像應該是整體，圖形和文字的結合

7、應該是層疊的。 顯示屏和瀏覽器都是矩形的，但是對于頁面的形狀，設計者可以利用自然界的各種形狀和它們的組合(矩形、圓形、三角形、菱形等)。 2、網(wǎng)頁設計，網(wǎng)頁布局的一般步驟(1)基于創(chuàng)意網(wǎng)站內容的整體風格設計布局。 不要在意細節(jié)，有輪廓就好。 (2)首先輸入內容的步驟是在網(wǎng)頁上配置網(wǎng)站的標志、廣告條、菜單、導航條、柜臺等主要內容。 (3)細分在該步驟中，設定修正者能夠利用網(wǎng)頁編輯工具將草案制成簡單的網(wǎng)頁，但當然對于各要素所占的比例也需要詳細的數(shù)字，以后能夠進行修正。 2、在網(wǎng)頁設計、網(wǎng)頁布局原則構想和設計過程中，設計師必須掌握以下幾個原則。 (1)平衡(2)對稱性(3)稀疏密度、2 .網(wǎng)頁設計、

8、網(wǎng)頁布局類型網(wǎng)頁布局大致分為“國家”字體、角型、標題正文型、左右框架型、上下框架型、綜合框架型、表紙型最上面：網(wǎng)站標題和標題廣告條，其次是網(wǎng)站主要內容的左右：一些小內容，中間：主要內容，左右一起排到最后，最下面：網(wǎng)站基本信息，聯(lián)系方式，著作權表示等。 此布局是網(wǎng)絡上最常見的布局類型。 2、網(wǎng)頁設計、角型布局角型布局與上一個布局只是形式上的差異，其實很相似。 在這個布局上面有標題和廣告橫幅，下面的左側有窄列的鏈接等內容，右側有寬的正文，最下面也有幾個站點的輔助信息。 在這種布局中，左側通常是導航鏈接。 2、網(wǎng)頁的設計，標題正文型布局標題正文型布局的最上面是標題等，下面一般是正文，例如，一部分文章

9、頁和登錄頁等屬于這種類型。采用左右框架型布局左右框架型布局的網(wǎng)頁分為左、右2個部分，一般左邊是導航鏈接，有時在最上面有小的標題和標記，右邊是正文。 大多數(shù)大型論壇和網(wǎng)站教程都使用這種布局，并且有些個人和公司網(wǎng)站也喜歡這種布局。 2、網(wǎng)頁的設計、上下框架型布局上下框架型布局與左右框架型布局類似，不同之處僅在于該布局分為上下兩部分。 綜合框架型布局綜合框架型布局是左右框架型布局和上下框架型布局的結合，比較復雜，類似于角型布局，但只采用框架結構。 紙型布局紙型布局一般出現(xiàn)在部分網(wǎng)站的主頁上，由幾個美麗的平面設計和幾個小動畫組合而成，在頁面上放置幾個簡單的鏈接或者只是“進入”的鏈接，直接在照片上附加鏈

10、接2、網(wǎng)頁設計、配色原則網(wǎng)站給人的第一印象來自視覺，因此決定網(wǎng)站的顏色很重要。 不同的顏色組合有不同的效果，網(wǎng)站可以用不同的視覺效果吸引訪問者的注意力。 2、網(wǎng)頁設計，一種顏色的形成，簡單來說，顏色是視覺，是光線作用于眼睛的結果。 紅、綠、藍的光稱為三原色光。 2色特征色的基本特征主要有色相、亮度、彩度3種。 色調表示色彩的種類，亮度表示色彩的明亮度，彩度表示色彩的鮮明度。 2、網(wǎng)頁設計、配色原則3色的心理感覺自然界的顏色給人心留下不同的印象，產(chǎn)生不同的心理感覺。 例如，紅色是刺激性的顏色，有刺激效果，產(chǎn)生沖動、憤怒、熱情、活力的感覺，2，網(wǎng)頁的設計，配色原則4色的分類，可以根據(jù)顏色對人的心理

11、的影響分類如下。 暖色系：紅、橙、橙、黃等顏色使人感覺溫暖、和分、熱情。 中性系：黃綠色、綠色等顏色舒適和諧。 冷色系：青綠、青綠、藍等顏色使人感到安靜、涼爽、高雅。 2、網(wǎng)頁設計，例如設計銷售冷食的虛擬商店，應該使用消極沉著的顏色，心理上感到?jīng)鏊?制作休閑主題的個人網(wǎng)站時，以海水為背景組合魚等，將網(wǎng)站的顏色設計成天藍色比較有效。 2、網(wǎng)頁設計、配色原則5色選擇與搭配，在網(wǎng)站制作時，顏色選擇與搭配很重要。 一個網(wǎng)站的格調確實，多取決于顏色的選擇和組合是否合適。 2、網(wǎng)頁設計、網(wǎng)頁布局的常用技術(1) CSS (堆疊樣式表)布局CSS對初學者來說顯得有些復雜，但其確實是一種好的布局方法。 (2

12、)顯示布局的優(yōu)點：可以處理不同對象而不用擔心不同對象之間的影響。 缺點：使用過多的修訂者表會影響頁面的下載速度。 2、網(wǎng)頁設計，(3)由于框架布局框架技術的兼容性問題，框架結構的網(wǎng)頁不太受歡迎。 但是，在布局上，框架結構是很好的布局方法。 (4)div css布局div css是階段性的，分布模式是任意的，2，網(wǎng)頁的設計，1，在互聯(lián)網(wǎng)上看不同的網(wǎng)頁，分析該網(wǎng)頁的構成要素是什么。 2 .打開熟悉的網(wǎng)站，瀏覽網(wǎng)頁，分析屬于哪種布局和顏色組合。 3 .根據(jù)自己的經(jīng)驗和體會，討論對網(wǎng)頁配色的看法。 3、網(wǎng)站設置修訂、網(wǎng)站設置修訂的主要任務以網(wǎng)站結構設置修訂瀏覽器為客戶端的Web應用開發(fā)系統(tǒng)測試和網(wǎng)站公

13、開。 3、站點設置修訂、站點類型確定門戶站點匯集大量內容，提供多種服務。比較有名的中文門戶網(wǎng)站有三種。 一種是像新浪、搜狐、互聯(lián)網(wǎng)交易那樣完全由國內互聯(lián)網(wǎng)公司運營的網(wǎng)站，網(wǎng)站內容除搜索引擎外，還有新聞、娛樂、游戲、文化、體育、健康、科技、財經(jīng)、教育等幾個版本，以及網(wǎng)上的郵件門戶第二類是國外投資的網(wǎng)站，如中文雅虎、美國在線等，網(wǎng)站內容以新聞和娛樂為主的第三類是國內傳統(tǒng)媒體經(jīng)營的網(wǎng)站，以人民網(wǎng)、新華網(wǎng)、中央電視國際為代表，提供新聞和時事評論3、網(wǎng)站設置修訂、普及型網(wǎng)站這種網(wǎng)站包括企業(yè)網(wǎng)站、大學網(wǎng)站、政府網(wǎng)站和許多個人網(wǎng)站。 3、網(wǎng)站設計、電子商務系網(wǎng)站電子商務系網(wǎng)站分為B2B (業(yè)者對業(yè)者)和B2

14、C (業(yè)者對個人客戶) 2種，根據(jù)交易過程分為商品檢索、商品購買、訂單支付3個階段。 3、網(wǎng)站設置修訂、電子商務類網(wǎng)站具有以下功能：商品選購車在線交易功能商品交接、資金結算功能。 3、網(wǎng)站設計、媒體信息服務系網(wǎng)站媒體信息服務系網(wǎng)站是報社、雜志社、廣播電臺、電視臺等傳統(tǒng)媒體為確立自己的網(wǎng)絡形象，使服務對象更加容易設立的網(wǎng)站，主要功能是信息發(fā)布、電子出版、客戶在線事務管理站點事務管理站點是企業(yè)事業(yè)單位為了實現(xiàn)事務自動化而設立的內部站點，包括以下主要功能模塊：事務管理、人力資源管理、財務資產(chǎn)管理和站點管理。 商業(yè)管理站點商業(yè)管理站點是在企業(yè)內為了廣告和商品管理、顧客管理、合同管理、營銷管理等目的而設

15、立的在線辦公平臺。 3、網(wǎng)站設計、網(wǎng)站主題確定網(wǎng)站使用的主要題材有：在線求職、在線聊天/ICQ、在線社區(qū)/討論/郵件列表、計算機技術、web/網(wǎng)站開發(fā)、娛樂網(wǎng)站、旅行、參考/信息、家庭/網(wǎng)站的主題小內容漂亮的題材是自己擅長的內容，3、網(wǎng)站設計、網(wǎng)站名稱的確定網(wǎng)站名稱也是網(wǎng)站設計的一部分，是重要的要素。 例如，“計算機學習室”與“計算機之家”相比，后者更簡潔。 “迷笛樂園”與“MIDI樂園”相比，后者的意思更加明確。 在選擇站點名稱時，請注意以下三點： 名稱的特色在于使名稱記得清楚，3、網(wǎng)站設計、CI(Corporate Identity )是指通過強化視覺效果的手段加深用戶對企業(yè)形象的印象。 例如，可口可樂擁有全球統(tǒng)一的標志、顏色和產(chǎn)品包裝，令人印象深刻。 3、網(wǎng)站設計、網(wǎng)站設計標志(Logo )，首先需要設計師設計網(wǎng)站標志(Logo )。 像商標一樣，Logo是網(wǎng)站特色和內涵的集中表現(xiàn)。 Logo可以是中文、字母、符號或圖案，也可以是動物或人物等。 例如，新浪網(wǎng)作為Logo注重文字sina，體現(xiàn)了網(wǎng)站的敏銳和動態(tài)特色。 3、網(wǎng)站設計、設計網(wǎng)站標準顏