dreamweaver完整教程設(shè)計(jì)

網(wǎng)站建設(shè)第一章網(wǎng)頁(yè)設(shè)計(jì)概述

學(xué)習(xí)要求一、課程突出實(shí)用性。強(qiáng)調(diào)要多模仿、多練、多實(shí)踐。二、最后要做出一個(gè)真實(shí)的網(wǎng)站作品。內(nèi)容要豐富。34第一章網(wǎng)頁(yè)設(shè)計(jì)概述第一節(jié)基礎(chǔ)知識(shí)一、基礎(chǔ)概念網(wǎng)頁(yè)：是一種用HTML語(yǔ)言編寫的文本文件。（在網(wǎng)絡(luò)平臺(tái)上發(fā)布的，瀏覽器能識(shí)別并顯示的文件。）HTML：全文是“HyperTextMarkupLanguage”，中文意思為“超文本標(biāo)記語(yǔ)言”。超文本：意指頁(yè)面內(nèi)除文本外，還可包含圖片、鏈接、甚至音頻、視頻等非文字元素。5第一章網(wǎng)頁(yè)設(shè)計(jì)概述網(wǎng)站主頁(yè)：Internet用戶訪問網(wǎng)站時(shí)所看到的第一個(gè)網(wǎng)頁(yè)(網(wǎng)站的入口)，稱作主頁(yè)（Homepage）。用特定的名稱表示，如：

index.htmdefault.htm。超鏈接：一種與其它網(wǎng)頁(yè)對(duì)象的鏈接(也可以是同一網(wǎng)頁(yè)中的某一個(gè)錨點(diǎn)位置)，當(dāng)用戶單擊后，所鏈接的網(wǎng)頁(yè)信息顯示出來（實(shí)際上內(nèi)嵌存貯了目標(biāo)網(wǎng)頁(yè)文件地址路徑及名稱）。6第一章網(wǎng)頁(yè)設(shè)計(jì)概述網(wǎng)站：在邏輯上可視為一個(gè)整體的一系列網(wǎng)頁(yè)的集合稱為網(wǎng)站（WebSite或Site）,網(wǎng)頁(yè)之間用超級(jí)連接進(jìn)行連接。

網(wǎng)站用于構(gòu)成一個(gè)WWW信息服務(wù)器，提供一定范圍內(nèi)的信息資源；如一個(gè)學(xué)校，一個(gè)企業(yè)、一個(gè)公司等的WWW服務(wù)器。7第一章網(wǎng)頁(yè)設(shè)計(jì)概述二、網(wǎng)頁(yè)設(shè)計(jì)的基本方式1、手工編碼方式網(wǎng)頁(yè)是由HTML超文本標(biāo)記語(yǔ)言編碼的文檔，設(shè)計(jì)制作網(wǎng)頁(yè)的過程就是生成HTML代碼的過程。在WWW（WorldWideWeb：全球信息網(wǎng)）發(fā)展的初期人們制作網(wǎng)頁(yè)是通過直接編寫HTML代碼來實(shí)現(xiàn)的。8第一章網(wǎng)頁(yè)設(shè)計(jì)概述2、可視化工具方式用FrontPage、Dreamweaver等網(wǎng)頁(yè)編輯工具在可視環(huán)境下編輯制作網(wǎng)頁(yè)元素，由編輯工具自動(dòng)生成對(duì)應(yīng)的網(wǎng)頁(yè)代碼（如同VisualBasic程序界面的生成）。“所見即所得”，如制作表格，就可以直接在工作區(qū)中繪制表格而不用考慮編碼的規(guī)則和語(yǔ)法。利用可視化工具編輯網(wǎng)頁(yè)操作簡(jiǎn)單直觀，調(diào)試方便，是大眾化的網(wǎng)頁(yè)編輯方式。但在制作一些特殊網(wǎng)頁(yè)效果上有一定的局限性。9第一章網(wǎng)頁(yè)設(shè)計(jì)概述3、編碼和可視化工具結(jié)合方式編碼和可視化工具結(jié)合是一種比較成熟的網(wǎng)頁(yè)制作方式。具體過程：一般的網(wǎng)頁(yè)元素通過可視化工具編輯制作，一些特殊的網(wǎng)頁(yè)效果通過插入代碼生成。

10第一章網(wǎng)頁(yè)設(shè)計(jì)概述三、網(wǎng)頁(yè)中的常見元素1、文本文本是網(wǎng)頁(yè)發(fā)布信息所用的主要形式，由文本制作出的網(wǎng)頁(yè)占用空間小（如一個(gè)英文字符占一個(gè)字節(jié)），傳輸速度快。網(wǎng)頁(yè)中的信息以文本為主。雖然不如圖象那樣能夠很快引起瀏覽者的注意，但能準(zhǔn)確地表達(dá)信息的內(nèi)容和含義。為了克服文本固有的缺點(diǎn)，人們賦予了文本更多的屬性，如字體，字號(hào)，顏色，底紋和邊框等，通過不同格式的區(qū)別，表現(xiàn)不同的內(nèi)容。11第一章網(wǎng)頁(yè)設(shè)計(jì)概述2、圖像和動(dòng)畫圖像在網(wǎng)頁(yè)中具有提供信息、展示作品、裝飾網(wǎng)頁(yè)、表達(dá)個(gè)人情調(diào)和風(fēng)格的作用。用戶可以在網(wǎng)頁(yè)中使用GIF,JPEG(JPG),PNG三種圖象格式，其中使用最廣泛的是GIF和JPEG兩種格式。如：Gif文件為無損壓縮方式，可以使用透明背景等。12第一章網(wǎng)頁(yè)設(shè)計(jì)概述3、聲音和視頻聲音是多媒體網(wǎng)頁(yè)的一個(gè)重要組成部分。用于網(wǎng)絡(luò)的聲音文件的格式非常多，常用的有MIDI、WAV、MP3、WMA和AIF等。視頻文件的格式也非常多，常見的有Realplay(RM)、RMVB、MPEG、AVI和DivX等。不支持的格式，盡量少用或者不用。注意：圖片、聲音、視頻等文件的大小不宜太大。

13第一章網(wǎng)頁(yè)設(shè)計(jì)概述4、超級(jí)鏈接超級(jí)鏈接技術(shù)可以說是萬維網(wǎng)流行起來的最主要的原因。從本質(zhì)上講，是存貯指向目的網(wǎng)頁(yè)對(duì)象的地址信息。可以指向一幅圖片，一個(gè)電子郵件地址，一個(gè)文件，一個(gè)程序或者是本網(wǎng)頁(yè)中的其他位置。14第一章網(wǎng)頁(yè)設(shè)計(jì)概述5、表格在網(wǎng)頁(yè)中表格用來控制網(wǎng)頁(yè)中信息的布局方式，即頁(yè)面空間的條塊分割。這包括兩方面：一是使用行和列的形式來布局文本和圖像以及其他的列表化數(shù)據(jù)；二是可以使用表格來精確控制各種網(wǎng)頁(yè)元素在網(wǎng)頁(yè)中出現(xiàn)的位置。即作為一種容器。15第一章網(wǎng)頁(yè)設(shè)計(jì)概述6、表單使用超級(jí)鏈接，瀏覽者和Web站點(diǎn)便建立起了一種簡(jiǎn)單的交互關(guān)系。網(wǎng)頁(yè)中的表單通常用來接受用戶在瀏覽器端的輸入，然后將這些信息發(fā)送到用戶設(shè)置的目標(biāo)端。即問答式交流。16第一章網(wǎng)頁(yè)設(shè)計(jì)概述7、導(dǎo)航欄導(dǎo)航欄的作用就是引導(dǎo)瀏覽者游歷站點(diǎn)。網(wǎng)站中的導(dǎo)航系統(tǒng)，實(shí)質(zhì)上就是一組使用了超鏈接技術(shù)的網(wǎng)頁(yè)對(duì)象（包括文字、按鈕、小圖片、圖形等），如同目錄，它們將網(wǎng)站中的內(nèi)容有機(jī)地連接在一起。17第一章網(wǎng)頁(yè)設(shè)計(jì)概述四、網(wǎng)頁(yè)元素的創(chuàng)作與編輯工具1、網(wǎng)頁(yè)圖像制作工具①、FireworksMXFireworkMX是Macromedia公司的產(chǎn)品，是目前比較流行的網(wǎng)頁(yè)圖像制作軟件。②、Photoshop18第一章網(wǎng)頁(yè)設(shè)計(jì)概述2、動(dòng)畫制作工具①、FlashMXFlashMX也是Macromedia公司的產(chǎn)品，是目前最流行的矢量動(dòng)畫制作軟件。②、DirectorDirector是Macromedia公司推出的多媒體開發(fā)工具，它為廣大多媒體制作人員提供了建立交互式應(yīng)用的強(qiáng)大功能。19第一章網(wǎng)頁(yè)設(shè)計(jì)概述3、網(wǎng)頁(yè)編輯工具①、FrontPageFrontPage是MicrosoftOffice家族中的一員，F(xiàn)rontPage的界面，功能與Word非常相似。操作方法與Office軟件一致。20第一章網(wǎng)頁(yè)設(shè)計(jì)概述②、DreamweaverMXDreamweaverMX和FireworksMX、FlashMX一起，被人們喻為“網(wǎng)頁(yè)制作三劍客”。③、HotDogHotDog是較早基于代碼的網(wǎng)頁(yè)設(shè)計(jì)工具，其最具特色的地方是提供了許多向?qū)Чぞ?，能幫助設(shè)計(jì)者制作頁(yè)面中的復(fù)雜部分。21第一章網(wǎng)頁(yè)設(shè)計(jì)概述第二節(jié)

網(wǎng)頁(yè)的制作語(yǔ)言一、概述HTML（超文本標(biāo)記語(yǔ)言）是一種描述文檔結(jié)構(gòu)的語(yǔ)言，它利用標(biāo)簽來描述文檔結(jié)構(gòu)、指定文檔內(nèi)容在瀏覽器中的顯示格式、位置等?？蛻魴C(jī)上的瀏覽器（browser）對(duì)這些描述進(jìn)行解釋將相應(yīng)頁(yè)面內(nèi)容正確顯示在顯示器上。一個(gè)WEB頁(yè)面就是一個(gè)HTML文件。

22第一章網(wǎng)頁(yè)設(shè)計(jì)概述23第一章網(wǎng)頁(yè)設(shè)計(jì)概述HTML語(yǔ)法是由標(biāo)記(Tags)和屬性(Attributes)所組成。標(biāo)記(Tag)：標(biāo)記符又稱標(biāo)簽，HTML是影響網(wǎng)頁(yè)內(nèi)容顯示格式的標(biāo)記符集合，瀏覽器根據(jù)標(biāo)記符決定網(wǎng)頁(yè)的實(shí)際顯示效果。在HTML中，所有的標(biāo)記符都用尖括號(hào)括起來。例如，<HTML>表示HTML標(biāo)記符。絕大多數(shù)標(biāo)記符都是成對(duì)出現(xiàn)的，包括開始標(biāo)記符和結(jié)束標(biāo)記符。24第一章網(wǎng)頁(yè)設(shè)計(jì)概述如：<HTML>…<／HTML>。開始標(biāo)記符和相應(yīng)的結(jié)束標(biāo)記符定義了標(biāo)記符所影響的范圍。開始標(biāo)記符與結(jié)束標(biāo)記符的區(qū)別在于：結(jié)束標(biāo)記符多一個(gè)斜杠“/”（不是反斜杠“\”?。┠承?biāo)記符，例如<BR>，只要求單一標(biāo)記符號(hào)。25第一章網(wǎng)頁(yè)設(shè)計(jì)概述<I>快快樂樂學(xué)HTML4.01入門教材</I>起始標(biāo)記內(nèi)容結(jié)束標(biāo)記26第一章網(wǎng)頁(yè)設(shè)計(jì)概述屬性(Attribute)是用來描述對(duì)象特征的。值(Value)：通常屬性會(huì)有一個(gè)值，而且這個(gè)值必須從預(yù)先定義好的范圍內(nèi)選取。（習(xí)慣上屬性值用雙引號(hào)括起來）。在HTML中，所有的屬性都放置在開始標(biāo)記符的尖括號(hào)里，屬性與標(biāo)記符之間用空格分隔，屬性的值放在相應(yīng)屬性之后，用等號(hào)分隔，而不同的屬性之間用空格分隔。27第一章網(wǎng)頁(yè)設(shè)計(jì)概述格式：<標(biāo)記符屬性1=屬性值1屬性2=屬性值2…>受影響的網(wǎng)頁(yè)內(nèi)容

<／標(biāo)記符><FONTCOLOR=“#ff0000”ALIGN=“CENTER”>歡樂頌</FONT>起始標(biāo)記空格屬性值空格屬性值內(nèi)容結(jié)束標(biāo)記28第一章網(wǎng)頁(yè)設(shè)計(jì)概述HTML屬性通常也不區(qū)分大小寫。例如，用字體標(biāo)記符和字號(hào)屬性指定文字的大小。<FONTSIZE=1>本行字將以較小字體顯示。</FONT>另外標(biāo)記可以嵌套，如：<H1>Happy<I>Birthday</I></H1>29第一章網(wǎng)頁(yè)設(shè)計(jì)概述回憶在Word中設(shè)置某種格式的作法，先選定文本范圍，再設(shè)置格式?？崭瘢篐TML瀏覽器會(huì)忽略標(biāo)記之間多余的空格或“Enter”。二、HTML語(yǔ)言的結(jié)構(gòu)及語(yǔ)法規(guī)范1、HTML語(yǔ)言的結(jié)構(gòu)HTML文檔由三大元素構(gòu)成：HTML元素、HEAD元素和BODY元素。每個(gè)元素又包含各自相應(yīng)的標(biāo)記（屬性）。30第一章網(wǎng)頁(yè)設(shè)計(jì)概述（1）HTML標(biāo)記符<HTML><／HTML>這兩個(gè)標(biāo)記符是HTML文檔的標(biāo)記符。<HTML>處于網(wǎng)頁(yè)文檔的最前端，表示文檔的開始，即瀏覽器從<HTML>開始解釋。<／HTML>則位于網(wǎng)頁(yè)文件的最后一行。HTML元素是最外層的元素，里面包含HEAD元素和BODY元素。31第一章網(wǎng)頁(yè)設(shè)計(jì)概述（2）HEAD標(biāo)記符<HEAD><／HEAD>是HTML網(wǎng)頁(yè)文件頭標(biāo)記符，即文檔頭，包含對(duì)文檔基本信息（文檔標(biāo)題，文檔搜索關(guān)鍵字、文檔生成器等）描述的標(biāo)記。其中包含文檔標(biāo)題等屬性。通常與某些標(biāo)記符一起使用，如<TITLE><／TITLE>標(biāo)記符。32第一章網(wǎng)頁(yè)設(shè)計(jì)概述（3）TITLE標(biāo)記符<TITLE><／TITLE>指的是一份文檔的標(biāo)題。顯示在瀏覽器的標(biāo)題欄中。（4）BODY標(biāo)記符<BODY><／BODY定義一個(gè)HTML文檔的主體部分，位于首部下面，包含有對(duì)網(wǎng)頁(yè)元素（文本、表格、圖片、動(dòng)畫、鏈接等）描述的標(biāo)記。33第一章網(wǎng)頁(yè)設(shè)計(jì)概述如：輸入到記事本中，名為test.htm,再打開。<HTML><HEAD><TITLE>青海師范大學(xué)教育學(xué)院</TITLE></HEAD><BODYbgcolor=yellow><P>這是一個(gè)HTML的測(cè)試文件</P></BODY></HTML>34第一章網(wǎng)頁(yè)設(shè)計(jì)概述2、HTML語(yǔ)言的語(yǔ)法規(guī)范HTML文檔的標(biāo)簽是可以嵌套的。有些標(biāo)簽（例如<HTML>）沒有任何屬性，而有些標(biāo)簽（例如<BODY>）則可包含一個(gè)或多個(gè)屬性。在HTML中有三個(gè)字符具有特殊的意義，即“<”、“>”和“&”。元素名稱大小寫等價(jià)。一個(gè)標(biāo)簽可以有多個(gè)屬性，屬性及其屬性值大小寫等價(jià)，不同屬性間用空格分隔。35第一章網(wǎng)頁(yè)設(shè)計(jì)概述HTML文件中，有些標(biāo)簽只能出現(xiàn)在文檔頭部中，而絕大多數(shù)標(biāo)簽只能出現(xiàn)在文檔主體中。36第一章網(wǎng)頁(yè)設(shè)計(jì)概述三、HTML的常用標(biāo)簽1．<TITLE>標(biāo)簽<TITLE>標(biāo)簽用來給網(wǎng)頁(yè)命名，網(wǎng)頁(yè)的名稱將被顯示在瀏覽器的標(biāo)題欄中。2．<Hi>標(biāo)簽<Hi>標(biāo)簽是成對(duì)出現(xiàn)的，用于定義文檔標(biāo)題。位于<Hi>和</Hi>之間的內(nèi)容是HTML文檔中的標(biāo)題。標(biāo)題文字都以粗體顯示，上級(jí)標(biāo)題總比下級(jí)標(biāo)題更大些，具體大小與瀏覽器有關(guān)。37第一章網(wǎng)頁(yè)設(shè)計(jì)概述標(biāo)題文字標(biāo)記符的格式：<Hnalign="對(duì)齊方式">標(biāo)題文字</Hn><Hn>…</Hn>標(biāo)記符默認(rèn)顯示宋體,會(huì)自動(dòng)插入一個(gè)空行，（即標(biāo)題行是一個(gè)段落）。n=1-6,共有6種標(biāo)題格式：<H1>…</H1>、<H2>…</H2>、<H3>…</H3>、<H4>…</H4>、<H5>…</H5>、<H6>…</H6>,其中<H1>…</H1>(標(biāo)題1)的字體最大，<H6>…</H6>(標(biāo)題6)的字體最小。38第一章網(wǎng)頁(yè)設(shè)計(jì)概述3．預(yù)格式化文本標(biāo)簽<PRE><PRE>為預(yù)格式化標(biāo)簽。它是成對(duì)出現(xiàn)的。對(duì)位于<PRE>和</PRE>之間的內(nèi)容，瀏覽器將嚴(yán)格按照編輯HTML文檔時(shí)的字符及位置進(jìn)行顯示。<Pre>

靜夜思

李白床前明月光凝是地上霜舉頭望明月低頭思故鄉(xiāng)</pre>包含空格在內(nèi)，都會(huì)照搬。39第一章網(wǎng)頁(yè)設(shè)計(jì)概述4．<BR>和<P>標(biāo)簽在HTML文檔中，無法用多個(gè)回車、空格、Tab鍵來調(diào)整文檔段落的格式。要用HTML的標(biāo)記符來強(qiáng)制換行、分段?！癇R”即Break，是換行標(biāo)簽，它是單獨(dú)出現(xiàn)的。<BR>的作用相當(dāng)于回車符。“P”即Paragraph（段落）。<P>標(biāo)簽用于劃分段落，作用是插入一個(gè)空行。它可以單獨(dú)使用，也可以成對(duì)使用。40第一章網(wǎng)頁(yè)設(shè)計(jì)概述兩種不同用法：（1）強(qiáng)制換段標(biāo)記符強(qiáng)制換段標(biāo)記符的格式為：文字<P>（2）設(shè)置段落標(biāo)記符設(shè)置段落標(biāo)記符的格式為：<Palign=“對(duì)齊方式”>文字內(nèi)容<／P>41第一章網(wǎng)頁(yè)設(shè)計(jì)概述5．<HR>標(biāo)簽在頁(yè)面中插入一條水平線，可以使不同功能的文字分隔開，看起來整齊、明了。格式：<HRalign="對(duì)齊方式"size="橫線粗細(xì)"width="橫線長(zhǎng)度"color="橫線顏色"noshade>如：<HRalign=“center”size=“3”width=“400”color=“#ff0000”>42第一章網(wǎng)頁(yè)設(shè)計(jì)概述6．字符格式標(biāo)簽HTML文檔的字符格式標(biāo)簽主要有<B>、<I>、<U>、和<S>四種，它們都是成對(duì)出現(xiàn)的。如：黑體<b>abc</b>

下劃線<u>abc</u>斜體<i>abc</i>

印刷體<tt>abc</tt>上標(biāo)^abcX3+5x2-10x+2=0刪除線<s>abc</s>下標(biāo)_abcH2O43第一章網(wǎng)頁(yè)設(shè)計(jì)概述7．<FONT>標(biāo)簽用于設(shè)置文本的大小、字體、字型和顏色。<FONT>是字體標(biāo)簽，它是成對(duì)出現(xiàn)的，用于指定文本的字體大小、顏色等。該標(biāo)簽包含若干屬性。設(shè)置格式：<FONTsize="數(shù)字"face="字體名"color="顏色">被設(shè)置的文字<／FONT>44第一章網(wǎng)頁(yè)設(shè)計(jì)概述size屬性是字號(hào)屬性，用于控制文字的大小，它的取值既可以是絕對(duì)值，也可以是相對(duì)值。face屬性是字體標(biāo)記符，用來指定字體樣式。color屬性可用來控制文字的顏色，屬性值可以是顏色名稱或十六進(jìn)制值。如：“#FF0000”與”RED”等價(jià)。<fontcolor="blue">我的主頁(yè)</font>與<fontcolor="#0000FF">我的主頁(yè)</font>等價(jià)45第一章網(wǎng)頁(yè)設(shè)計(jì)概述8、列表(Lists)①．有序號(hào)列表(項(xiàng)目編號(hào))語(yǔ)法格式：<OL>…</OL>常用屬性：其中的每一個(gè)列表項(xiàng)以<LI>標(biāo)簽打頭。

type屬性：屬性值可以為1,a,A,i,I。

start屬性：如type=1，start=5表示列表符號(hào)是從第5個(gè)列表序號(hào)開始。46第一章網(wǎng)頁(yè)設(shè)計(jì)概述<OLtype=1start=2><Li>毛澤東<Li>鄧小平<Li>江澤民<Li>胡錦濤</OL>47第一章網(wǎng)頁(yè)設(shè)計(jì)概述②．無序號(hào)列表（項(xiàng)目符號(hào)）語(yǔ)法格式：<UL>…</UL>。type屬性：屬性值是disc,square,circle。<ULtype=square><Li>毛澤東<Li>鄧小平<Li>江澤民<Li>胡錦濤</UL>48第一章網(wǎng)頁(yè)設(shè)計(jì)概述③．定義性列表語(yǔ)法格式：<DL>…</DL>49第一章網(wǎng)頁(yè)設(shè)計(jì)概述9、圖像（InlineImages）語(yǔ)法格式：<imgsrc=’file’height=width=>常用屬性： srcheightwidthAltborderalign屬性：其對(duì)應(yīng)的屬性值為bottom、middle和top。圖像在網(wǎng)頁(yè)中體現(xiàn)的本質(zhì)：圖像以一個(gè)文件的形式獨(dú)立存在，網(wǎng)頁(yè)中僅存貯了圖像的地址信息。50第一章網(wǎng)頁(yè)設(shè)計(jì)概述10、設(shè)置頁(yè)面背景顏色<BODY>標(biāo)記符中使用bgcolor屬性可以為網(wǎng)頁(yè)設(shè)置背景顏色。<BODYbgcolor=#FFFFFF>11、設(shè)置頁(yè)面背景圖像使用BODY標(biāo)記符的background屬性即可。<BODYbackground=“網(wǎng)頁(yè)背景圖案的地址”>51第一章網(wǎng)頁(yè)設(shè)計(jì)概述12、設(shè)置文字和超鏈接的顏色設(shè)置正文和超鏈接顏色時(shí)，可以使用BODY標(biāo)記符的text、link、vlink和alink屬性。text屬性用于設(shè)置正文的顏色；link屬性用于設(shè)置未被訪問的超鏈接的顏色；vlink用于設(shè)置已被訪問過的超鏈接的顏色；alink用于設(shè)置活動(dòng)超鏈接（即當(dāng)前選定的超鏈接）的顏色。52第一章網(wǎng)頁(yè)設(shè)計(jì)概述<BODY>標(biāo)簽擴(kuò)充為<BODYbgcolor=#xtext=#xlink=#xalink=#xvlink=#xbackground=“imageURL”>。┈┈</BODY>53第一章網(wǎng)頁(yè)設(shè)計(jì)概述四、文檔的超鏈接1、統(tǒng)一資源定位器——URL