《《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)課件.ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)課件.ppt（32頁珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
1、第 1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 1.什么是 網(wǎng)頁 ？ 瀏覽 Web時(shí)所看到的文件稱為 Web頁 ，又稱 為網(wǎng)頁。網(wǎng)頁可以將不同類型的多媒體信息 （包括 文字、圖像、動(dòng)畫、聲音、視頻 等） 組合在一個(gè)文檔中。由于這些文檔是用超文 本標(biāo)記語言表示的，其文件名一般是以 .html 或 .htm結(jié)尾，因此又稱為 HTML文檔或 超文本 。 2.什么是 主頁 ？ 當(dāng)我們?yōu)g覽網(wǎng)站時(shí)看到的第一個(gè)頁面。它是 整個(gè)站點(diǎn)的入口和門面，通常這樣命名： index.html。 3.什么是 超文本 ？ 包含文字、圖像、視頻、聲音等媒體的文本， 網(wǎng)頁就是一個(gè)超文本文件，并且可以實(shí)現(xiàn)鏈 接操作。 超
2、文本可以給瀏覽者帶來視覺和聽覺的享受， 所以 Web技術(shù)又稱為超媒體技術(shù)。 注意 在網(wǎng)頁上點(diǎn)擊鼠標(biāo)右鍵，選擇“ 查看源文 件 ”，就能很清楚地看到網(wǎng)頁的代碼結(jié)構(gòu)。 用戶可以使用記事本對(duì)網(wǎng)頁中的文字、圖片、 表格、多媒體等頁面內(nèi)容進(jìn)行編輯，并通過 標(biāo)記語言 HTML對(duì)這些元素進(jìn)行描述和控制， 最后由瀏覽器對(duì)這些標(biāo)記進(jìn)行解釋并生成最 終呈現(xiàn)在用戶眼前豐富多彩的網(wǎng)頁。 4.什么是網(wǎng)站？ 根據(jù)提供服務(wù)的不同，通常把提供網(wǎng)頁服務(wù)的服務(wù) 器稱為 Web服務(wù)器，相關(guān)網(wǎng)站稱為 Web站點(diǎn) 。一個(gè) Web站點(diǎn)由一個(gè)或多個(gè) Web頁組成，這些 Web頁相 互連接在一起，存放在 Web服務(wù)器上，以供瀏覽
3、者 訪問。 網(wǎng)站是提供各種信息和服務(wù)的基地，如用戶熟悉的 搜狐、新浪、雅虎等。網(wǎng)站是由很多網(wǎng)頁鏈接在一 起組成的。用戶瀏覽到一個(gè)網(wǎng)站時(shí)看到的第一個(gè)頁 面叫做主頁。從主頁出發(fā)，可以訪問到本網(wǎng)站的每 一個(gè)頁面，也可以鏈接到其他網(wǎng)站，方便地共享網(wǎng) 站資源。 注意 網(wǎng)站由若干網(wǎng)頁組合而成。實(shí)質(zhì)上就是一個(gè) 文件夾 ，用來存放站點(diǎn)相關(guān)信息資源的文件 夾。 5.網(wǎng)頁基本元素有哪些？都有什么作用？設(shè)計(jì)的時(shí)候要注意什 么？ 網(wǎng)頁包括的主要元素有：文本、圖像、動(dòng)畫、 導(dǎo)航欄、超鏈接、表格、表單等。 文本 是人類最重要的信息載體和交流工具，網(wǎng)頁的 主體一般以文本為主。制作網(wǎng)頁時(shí)，可以根據(jù)需要 設(shè)置文
4、本的字體、字號(hào)、顏色、樣式等屬性，風(fēng)格 獨(dú)特的網(wǎng)頁文本設(shè)置會(huì)給瀏覽者賞心悅目的感覺。 提示：在網(wǎng)頁中應(yīng)用了某種字體樣式后，如果瀏覽者的計(jì) 算機(jī)中沒有安裝該種樣式的字體，字體就以計(jì)算機(jī)系統(tǒng)默認(rèn) 的字體顯示出來，此時(shí)就無法顯示出網(wǎng)頁的效果了。 圖像 在網(wǎng)頁中可以起到提供信息、展示作品、美化 網(wǎng)頁以及體現(xiàn)風(fēng)格等功效。圖像可以用作網(wǎng)頁的標(biāo) 題、網(wǎng)站 Logo、網(wǎng)頁背景、鏈接按鈕、導(dǎo)航欄、網(wǎng) 頁主圖等。圖像給人的視覺效果要比文字強(qiáng)烈得多， 在網(wǎng)頁中靈活應(yīng)用圖像可以起到點(diǎn)綴的效果。雖然 圖像在網(wǎng)頁中不可或缺，但也不能太多，因?yàn)閳D像 的下載速度較慢，而且網(wǎng)頁上如果放置了過多的圖 片，會(huì)顯得很亂，有
5、喧賓奪主之勢(shì)。 網(wǎng)頁上的圖像文件大部分都是使用 JPG和 GIF格式， 因?yàn)?，它們除了具有壓縮比例高外，還具有跨平臺(tái) 特性。 動(dòng)畫 是網(wǎng)頁上最活躍的元素，通常制作優(yōu)秀、 創(chuàng)意出眾的動(dòng)畫是吸引瀏覽者的最有效的方 法。如果網(wǎng)頁中存有太多的動(dòng)畫，會(huì)使瀏覽 者眼花繚亂，無心細(xì)看。所以，對(duì)動(dòng)畫制作 的要求越來越高。在網(wǎng)頁中加入的動(dòng)畫一般 是 GIF格式的動(dòng)畫和 Flash（ .swf）動(dòng)畫等。 導(dǎo)航欄 是網(wǎng)站設(shè)計(jì)者在規(guī)劃網(wǎng)站結(jié)構(gòu)時(shí)必須 考慮的一個(gè)問題，站點(diǎn)的每個(gè)網(wǎng)頁上均應(yīng)設(shè) 置導(dǎo)航欄，并且應(yīng)將其放置在網(wǎng)頁中比較明 顯的位置。設(shè)置導(dǎo)航欄的目的是使瀏覽者能 夠順利地瀏覽網(wǎng)頁，方便地返回主頁或繼
6、續(xù) 下一頁的訪問。導(dǎo)航欄可以是文本、按鈕或 圖像的樣式。 超鏈接 是網(wǎng)頁中最為有用的功能之一。超鏈接是從一個(gè)網(wǎng)頁 指向另一個(gè)網(wǎng)頁的鏈接，該鏈接既可以指向本地網(wǎng)站的另一 個(gè)網(wǎng)頁，也可以指向世界各地的其他網(wǎng)頁。 無論是文本還是圖像都可以加上超鏈接標(biāo)記，當(dāng)鼠標(biāo)指上超 鏈接對(duì)象時(shí)會(huì)變成小手形狀，單擊鼠標(biāo)左鍵即可鏈接到相應(yīng) 地址（ URL）的網(wǎng)頁。超鏈接包括站內(nèi)鏈接和站外鏈接。 站內(nèi)鏈接 ：若網(wǎng)站規(guī)劃了多個(gè)主題版塊，需要給網(wǎng)站的首頁 加入超鏈接，讓瀏覽者可以快速地轉(zhuǎn)到感興趣的頁面。在各 個(gè)子頁面也要有超級(jí)鏈接，并設(shè)有能夠回到主頁的鏈接。 站外鏈接 ：在個(gè)人網(wǎng)站上放置一些與網(wǎng)站主題
7、有關(guān)的對(duì)外鏈 接，不但可以把好的網(wǎng)站介紹給瀏覽者，而且能使瀏覽者樂 意再度光臨該網(wǎng)站。 (友情鏈接 ) 表格 是網(wǎng)頁中的一種用于控制網(wǎng)頁頁面布局的有效 方法。為了達(dá)到理想的視覺效果，通常不顯示表格 的邊框。使用表格輔助布局，可以實(shí)現(xiàn)網(wǎng)頁橫豎分 明的風(fēng)格。 表單 是一種特殊的網(wǎng)頁元素，通常用于收集信息或 實(shí)現(xiàn)一些交互式的效果。表單的主要功能是接收瀏 覽者在瀏覽器的輸入信息，然后將這些信息發(fā)送到 服務(wù)器端。 6.動(dòng)態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁的區(qū)別 在網(wǎng)站設(shè)計(jì)中，純粹 HTML格式的網(wǎng)頁通常稱 為“ 靜態(tài)網(wǎng)頁 ”，它運(yùn)行于客戶端， 以 .htm、 .html、 .shtml和 .xml等為擴(kuò)展名。
8、靜 態(tài)網(wǎng)頁的內(nèi)容僅僅是標(biāo)準(zhǔn)的 HTML代碼，靜態(tài) 網(wǎng)頁上也可以出現(xiàn)各種動(dòng)態(tài)效果，如 GIF格式 的動(dòng)畫、 Flash動(dòng)畫等，這些“動(dòng)態(tài)效果”只 是視覺上的，與下面將要介紹的動(dòng)態(tài)網(wǎng)頁是 不同的概念。 采用了動(dòng)態(tài)網(wǎng)頁技術(shù)，在服務(wù)器端運(yùn)行的網(wǎng) 頁和程序?qū)儆?動(dòng)態(tài)網(wǎng)頁 ，它們會(huì)根據(jù)編寫的 程序訪問數(shù)據(jù)庫(kù)動(dòng)態(tài)地生成頁面。動(dòng)態(tài)網(wǎng)頁 文件的后綴一般都 是 .asp、 .aspx、 .php、 .jsp。動(dòng)態(tài)網(wǎng)頁的優(yōu) 點(diǎn)是效率高、更新快、移植性強(qiáng)，可以根據(jù) 先前所制定好的程序頁面，根據(jù)用戶的不同 請(qǐng)求返回其相應(yīng)的數(shù)據(jù)，從而達(dá)到資源的最 大利用和節(jié)省服務(wù)器上的物理資源。 動(dòng)態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁 不是從視覺上區(qū)
9、分的 ， 比如動(dòng)畫效果，網(wǎng)頁中包含可以動(dòng)的元素并 不意味著就是動(dòng)態(tài)網(wǎng)頁，靜態(tài)網(wǎng)頁也可以有 動(dòng)畫。 請(qǐng)自行閱讀課本中它們各自的特點(diǎn) 7.常用的網(wǎng)頁設(shè)計(jì)軟件有哪些？ FrontPage Dreamweaver 8.網(wǎng)頁圖像與網(wǎng)頁動(dòng)畫制作軟件 Photoshop Fireworks（ .gif） Flash(.swf) 9.HTML的基本結(jié)構(gòu) 9.HTML的基本結(jié)構(gòu) ：告訴瀏覽器 HTML文檔開 始和結(jié)束的位置，其中包括 head部分和 body 部分。 HTML文檔中所有的內(nèi)容都應(yīng)該在這 兩個(gè)標(biāo)記之間，一個(gè) HTML文檔總是以 開始，以 結(jié)束。 ： HTML文件的頭部標(biāo)記，
10、頭 部主要提供文檔的描述信息， head部分的所有 內(nèi)容都不會(huì)顯示在瀏覽器窗口中，在其中可以 放置 頁面的標(biāo)題 以及 頁面的類型 、使用的字符 集、鏈接的其它腳本或樣式文件等內(nèi)容 ：用來指明文檔的主體區(qū)域， 網(wǎng)頁所要顯示的內(nèi)容都放在這個(gè)標(biāo)記內(nèi)，其 結(jié)束標(biāo)記 指明主體區(qū)域的結(jié)束 9.HTML的基本結(jié)構(gòu) ：告訴瀏覽器 HTML文檔開 始和結(jié)束的位置，其中包括 head部分和 body 部分。 HTML文檔中所有的內(nèi)容都應(yīng)該在這 兩個(gè)標(biāo)記之間，一個(gè) HTML文檔總是以 開始，以 結(jié)束。 ： HTML文件的頭部標(biāo)記，頭 部主要提供文檔的描述信息， head部分的所有 內(nèi)容都不會(huì)顯示在瀏覽器
11、窗口中，在其中可以 放置 頁面的標(biāo)題 以及 頁面的類型 、使用的字符 集、鏈接的其它腳本或樣式文件等內(nèi)容 ：用來指明文檔的主體區(qū)域， 網(wǎng)頁所要顯示的內(nèi)容都放在這個(gè)標(biāo)記內(nèi)，其 結(jié)束標(biāo)記 指明主體區(qū)域的結(jié)束 9.HTML的基本結(jié)構(gòu) ：告訴瀏覽器 HTML文檔開 始和結(jié)束的位置，其中包括 head部分和 body 部分。 HTML文檔中所有的內(nèi)容都應(yīng)該在這 兩個(gè)標(biāo)記之間，一個(gè) HTML文檔總是以 開始，以 結(jié)束。 ： HTML文件的頭部標(biāo)記，頭 部主要提供文檔的描述信息， head部分的所有 內(nèi)容都不會(huì)顯示在瀏覽器窗口中，在其中可以 放置 頁面的標(biāo)題 以及 頁面的類型 、使用的字符 集、
12、鏈接的其它腳本或樣式文件等內(nèi)容 ：用來指明文檔的主體區(qū)域， 網(wǎng)頁所要顯示的內(nèi)容都放在這個(gè)標(biāo)記內(nèi)，其 結(jié)束標(biāo)記 指明主體區(qū)域的結(jié)束 10.如何使用 HTML編寫網(wǎng)頁文件？ 使用記事本，代碼編好之后，保存時(shí)這樣命 名： 文件名 .html，保存類型選擇： 所有文件 使用 Dreamweaver新建一個(gè) html文件 演示 11.標(biāo)簽 標(biāo)簽是 HTML文檔中一些有特定意義的符號(hào)， 這些符號(hào)指明 內(nèi)容的含義或結(jié)構(gòu) 。標(biāo)簽總是 放在三角括號(hào)中，大多數(shù)標(biāo)簽都是 成對(duì) 出現(xiàn) 的，表示開始和結(jié)束。 標(biāo)簽的內(nèi)容 標(biāo)簽 名稱 起始標(biāo)簽 結(jié)束標(biāo)簽 標(biāo)簽可以有屬性，賦值的時(shí)候用“ =”
13、，多個(gè)屬性中間用空格隔開 屬性要寫在開始標(biāo)簽里，并且標(biāo)簽符號(hào)和 中間不可以有空格，如 是 錯(cuò)誤的 結(jié)束的標(biāo)簽一定要加“ /” 12.body標(biāo)簽常見屬性介紹 bgcolor屬性：用于設(shè)置 HTML網(wǎng)頁的背景顏 色，例如， 表示 背景顏色設(shè)置為紅色。 background屬性：用于設(shè)置 HTML網(wǎng)頁的背 景圖片，例如， 表示將圖片 tu.jpg設(shè)置為 HTML網(wǎng)頁的 背景。 text屬性：用于設(shè)置 HTML網(wǎng)頁的文本顏色。使用 text定義的顏色將應(yīng)用于整篇文檔。例如， 表示文本顏色設(shè)置為紅色。 link、 alink、 vlink屬性：用于分別設(shè)置普通超鏈接、 當(dāng)前活動(dòng)的超鏈接、已訪問的超鏈接文本的顏色。 例如， topmargin、 leftmargin屬性：用于設(shè)置網(wǎng)頁 主體內(nèi)容與網(wǎng)頁頂端、左端的距離。例如， 。 上機(jī)作業(yè)：完成 作業(yè) 1.txt 中的操作 13. Dreamweaver CS4簡(jiǎn)介 打開方法 起始頁 工作界面介紹 上機(jī)作業(yè)：完成 作業(yè) 2.txt 中的操作 14.創(chuàng)建和管理本地站點(diǎn) 站點(diǎn)目錄結(jié)構(gòu) 站點(diǎn)創(chuàng)建過程 站點(diǎn)管理操作 上機(jī)作業(yè)：完成 作業(yè) 3.txt 中的操作 站點(diǎn)文件夾 index.html images flash sound 站點(diǎn)目錄結(jié)構(gòu)
《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)課件.ppt
