第1章網(wǎng)頁設(shè)計基礎(chǔ)

1、整理ppt1網(wǎng)頁制作基礎(chǔ)教程（網(wǎng)頁制作基礎(chǔ)教程（Dreamweaver CS4）電子教案電子教案整理ppt2第一章第一章 網(wǎng)頁設(shè)計基礎(chǔ)網(wǎng)頁設(shè)計基礎(chǔ)本章重點：了解網(wǎng)站建設(shè)中的基本概念，明確網(wǎng)站的開發(fā)流程，并對Dreamweaver CS4的工作界面有所了解，為下一步的開發(fā)做準(zhǔn)備。整理ppt3第一章第一章 網(wǎng)頁設(shè)計基礎(chǔ)網(wǎng)頁設(shè)計基礎(chǔ)1.1 網(wǎng)頁設(shè)計基礎(chǔ)知識1.2 網(wǎng)站開發(fā)流程1.3 網(wǎng)站規(guī)劃1.4 網(wǎng)頁基本元素1.5 Dreamweaver CS4工作環(huán)境網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程41.1.1 網(wǎng)頁網(wǎng)頁n網(wǎng)頁最直觀的解釋就是上網(wǎng)時在瀏覽器里看到的一個頁面。n實際上網(wǎng)頁是一個文件，他存放在世界某

2、個角落的的某一臺計算機(jī)（服務(wù)器）中，而這臺計算機(jī)必須是與互聯(lián)網(wǎng)相連的。 1.1 網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程51.1.2 網(wǎng)站網(wǎng)站n網(wǎng)站（Website）是指在互聯(lián)網(wǎng)上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。 1.1 網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程61.1.3 HTMLn超文本鏈接標(biāo)識語言。它是制作網(wǎng)頁的一種標(biāo)準(zhǔn)語言，以代碼的方式來進(jìn)行網(wǎng)頁的設(shè)計，它們在設(shè)計過程上可以說它是以文本格式為基礎(chǔ)，所以可以用任何編輯器和文字處理器來為網(wǎng)絡(luò)創(chuàng)建或轉(zhuǎn)換文本。 1.1 網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)

3、頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程71.1.4 服務(wù)器服務(wù)器n服務(wù)器實質(zhì)上是一種高性能的計算機(jī)，作為網(wǎng)絡(luò)的節(jié)點，用于存儲和處理網(wǎng)絡(luò)上80%的數(shù)據(jù)、信息。n分為n文件服務(wù)器文件服務(wù)器n數(shù)據(jù)庫服務(wù)器數(shù)據(jù)庫服務(wù)器n應(yīng)用程序服務(wù)器。應(yīng)用程序服務(wù)器。 1.1 網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程81.1.5 超鏈接與超鏈接與URLn超鏈接是網(wǎng)頁的一部分，是允許同其他網(wǎng)頁或站點之間進(jìn)行鏈接的網(wǎng)頁元素，如文字、圖像等。nURL（Uniform Resource Locator）又叫統(tǒng)一資源定位器，是專門為標(biāo)識Internet上的資源而設(shè)定的一種編址方式，即通常所說的網(wǎng)站地址。nURL

4、一般由三大部分組成：傳輸協(xié)議：/主機(jī)IP地址或域名地址/資源所在路徑和文件名 1.1 網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程91.1.6 動態(tài)網(wǎng)站與靜態(tài)網(wǎng)站動態(tài)網(wǎng)站與靜態(tài)網(wǎng)站n在網(wǎng)站設(shè)計中，純粹HTML格式的網(wǎng)頁通常被稱為“靜態(tài)網(wǎng)頁”n動態(tài)網(wǎng)站并不是指在網(wǎng)頁上插入了動畫元素的網(wǎng)站，而是指網(wǎng)站內(nèi)容的更新和維護(hù)是通過基于數(shù)據(jù)庫技術(shù)的內(nèi)容管理系統(tǒng)完成。 n靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁各有特點，網(wǎng)站采用動態(tài)網(wǎng)頁還是靜態(tài)網(wǎng)頁主要取決于網(wǎng)站的功能需求和網(wǎng)站內(nèi)容的多少 1.1 網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程10網(wǎng)站開發(fā)流程：網(wǎng)站開發(fā)流程：1、確定網(wǎng)站主題 2

5、、搜集材料 3、規(guī)劃網(wǎng)站 4、選 擇合適的制作工具 5、制作網(wǎng)頁 6、上傳測試 7、推廣宣傳 8、維護(hù)更新 1.2 網(wǎng)站開發(fā)流程網(wǎng)站開發(fā)流程網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程11網(wǎng)站規(guī)劃：網(wǎng)站規(guī)劃：1確定站點目標(biāo)2規(guī)劃站點結(jié)構(gòu)3規(guī)劃站點內(nèi)容4規(guī)劃站點的導(dǎo)航機(jī)制5明確站點的風(fēng)格 1.3 網(wǎng)站規(guī)劃網(wǎng)站規(guī)劃網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程121網(wǎng)站LOGOnLogo的中文含義是標(biāo)志、標(biāo)識，在網(wǎng)頁設(shè)計中，Logo常作為公司或站點的標(biāo)識出現(xiàn)，起著非常重要的作用，集中體現(xiàn)了這個網(wǎng)站的文化內(nèi)涵和內(nèi)容定位。 1.4 網(wǎng)頁基本元素網(wǎng)頁基本元素網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程132.網(wǎng)站Banner nBanner

6、的中文含義是橫幅、標(biāo)語，通常被稱為網(wǎng)絡(luò)廣告。 1.4 網(wǎng)頁基本元素網(wǎng)頁基本元素網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程143導(dǎo)航欄導(dǎo)航欄n導(dǎo)航欄實質(zhì)上是一組超鏈接，通過這組超鏈接可以瀏覽到整個網(wǎng)站的其他頁面。 1.4 網(wǎng)頁基本元素網(wǎng)頁基本元素網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程154文本文本 n文本作為人類最重要的信息載體的交流工具，是最重要的網(wǎng)頁元素之一。與圖像、動畫等其他網(wǎng)頁元素相比，文本不易在第一時間吸引瀏覽者的注意，但文本能夠更加準(zhǔn)確詳細(xì)地表達(dá)網(wǎng)頁信息內(nèi)容和含義，是對其他網(wǎng)頁元素的補充。 1.4 網(wǎng)頁基本元素網(wǎng)頁基本元素網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程165.圖像圖像 n圖像在網(wǎng)頁中起著非常重要的

7、作用，適當(dāng)?shù)膱D像能夠為網(wǎng)頁增添生動性和活潑性，不僅豐富網(wǎng)頁內(nèi)容、提供更多更直接的信息，還能給瀏覽者視覺上的美感。 1.4 網(wǎng)頁基本元素網(wǎng)頁基本元素網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程176動畫動畫 n動畫能夠形象生動地表現(xiàn)事物的變化發(fā)展過程，增加網(wǎng)頁的動態(tài)效果，使網(wǎng)站更加生動有趣，因此，動畫已經(jīng)成為現(xiàn)代網(wǎng)站中不可缺少的元素之一。 1.4 網(wǎng)頁基本元素網(wǎng)頁基本元素網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程187表單表單 n表單實質(zhì)上是一個服務(wù)器程序，用戶可以在網(wǎng)頁上的表單域中輸入文本或數(shù)據(jù)，提交表單，該表單程序在服務(wù)器上執(zhí)行，并將執(zhí)行結(jié)果反饋到相應(yīng)的頁面上，從而實現(xiàn)了用戶與網(wǎng)站之間的交互。 1.4 網(wǎng)頁基本元

8、素網(wǎng)頁基本元素網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程198版權(quán)信息版權(quán)信息 n加入了伯爾尼公約的國家，版權(quán)保護(hù)是隨著作品（無論是文加入了伯爾尼公約的國家，版權(quán)保護(hù)是隨著作品（無論是文字，還是圖片）的問世的即刻就得到版權(quán)的保護(hù)的，并不是字，還是圖片）的問世的即刻就得到版權(quán)的保護(hù)的，并不是必須要聲明。但是作為慣例，這一小行文字還是有很好加強(qiáng)必須要聲明。但是作為慣例，這一小行文字還是有很好加強(qiáng)意識，提醒瀏覽者，所觀看的內(nèi)容是受到版權(quán)保護(hù)的。意識，提醒瀏覽者，所觀看的內(nèi)容是受到版權(quán)保護(hù)的。n下面舉幾個版權(quán)信息的正確寫法下面舉幾個版權(quán)信息的正確寫法: 2003-2009 , Inc. All rights r

9、eserved. 2009 bj-website Corporation. All rights reserved. Copyright 2009 Incorporated. All rights reserved. 2003-2009 Eric A. and Kathryn S. Meyer. All Rights Reserved. 1.4 網(wǎng)頁基本元素網(wǎng)頁基本元素網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程201.5.1 Dreamweaver CS4的啟動n“開始”“程序”Adobe Dreamweaver CS4” 1.5 Dreamweaver CS4工作環(huán)境工作環(huán)境網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基

10、礎(chǔ)教程211.5.2 Dreamweaver CS4的工作環(huán)境面板組文件面板文檔編輯窗口插入面板文檔工具欄標(biāo)簽狀態(tài)欄屬性檢查器1.5 Dreamweaver CS4工作環(huán)境工作環(huán)境網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程221.5.2 Dreamweaver CS4的工作環(huán)境應(yīng)用程序欄 1.5 Dreamweaver CS4工作環(huán)境工作環(huán)境網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程231.5.2 Dreamweaver CS4的工作環(huán)境文檔工具欄1.5 Dreamweaver CS4工作環(huán)境工作環(huán)境網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程241.5.2 Dreamweaver CS4的工作環(huán)境文檔窗口文檔窗口n“文檔”

11、窗口顯示當(dāng)前文檔。n可以選擇設(shè)計視圖 、代碼視圖 、拆分代碼視圖、代碼和設(shè)計視圖之一進(jìn)行網(wǎng)頁的編輯和開發(fā).n當(dāng)“文檔”窗口處于最大化狀態(tài)（默認(rèn)值）時，“文檔”窗口頂部會顯示選項卡，上面顯示了所有打開的文檔的文件名。3.如果尚未保存已做的更改，則 Dreamweaver 會在文件名后顯示一個星號。若要切換到某個文檔，單擊其選項卡即可。1.5 Dreamweaver CS4工作環(huán)境工作環(huán)境網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程251.5.2 Dreamweaver CS4的工作環(huán)境面板組（1）插入面板1.5 Dreamweaver CS4工作環(huán)境工作環(huán)境插入面板插入面板網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程2

12、61.5.2 Dreamweaver CS4的工作環(huán)境面板組（2）CSS面板組4.包含包含“CSS樣式樣式”、“AP元素元素”和和“標(biāo)簽檢查器標(biāo)簽檢查器”面面板三個浮動面板板三個浮動面板 1.5 Dreamweaver CS4工作環(huán)境工作環(huán)境CSS面板組面板組網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程271.5.2 Dreamweaver CS4的工作環(huán)境面板組（3）“應(yīng)用程序”面板組 4.包含包含“數(shù)據(jù)庫數(shù)據(jù)庫”、“綁定綁定”、“服務(wù)器行為服務(wù)器行為”、“組件組件”4個浮動個浮動面板面板1.5 Dreamweaver CS4工作環(huán)境工作環(huán)境應(yīng)用程序面板組應(yīng)用程序面板組網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程281.5.2 Dreamweaver CS4的工作環(huán)境面板組（4）“文件”面板組4.包含包含“文件文件”、“資源資源”2個浮動面板個浮動面板1.5 Dreamweaver CS4工作環(huán)境工作環(huán)境文件面板組文件面板組網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作