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