第1章靜態(tài)頁面視覺設(shè)計(jì)與Dreamweaver第1章靜態(tài)頁面視覺設(shè)計(jì)與Dreamweaver第1章靜態(tài)頁面視覺設(shè)計(jì)與Dreamweaver1.1網(wǎng)頁視覺設(shè)計(jì)教學(xué)1.1.1教學(xué)的目的與目標(biāo)1.1.2教學(xué)的內(nèi)容與方法1.1.3考核內(nèi)容與要求1.2認(rèn)識(shí)網(wǎng)頁1.2.1網(wǎng)頁的本質(zhì)1.2.2網(wǎng)頁設(shè)計(jì)工具與基本步驟1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)1.3初識(shí)Dreamweaver1.3.1工作界面1.3.2規(guī)劃站點(diǎn)第1章靜態(tài)頁面視覺設(shè)計(jì)與Dreamweaver1.1網(wǎng)1.1網(wǎng)頁視覺設(shè)計(jì)教學(xué)1.1.1教學(xué)的目的與目標(biāo)網(wǎng)頁視覺設(shè)計(jì)是一門綜合性較強(qiáng)的實(shí)踐類課程，主要圍繞網(wǎng)頁視覺設(shè)計(jì)的概念、基本元素、風(fēng)格布局結(jié)合網(wǎng)頁制作軟件展開，目的是使學(xué)生較全面地了解網(wǎng)頁視覺設(shè)計(jì)的相關(guān)知識(shí)，深入掌握網(wǎng)頁視覺布局的方法；培養(yǎng)學(xué)生對(duì)網(wǎng)頁視覺設(shè)計(jì)的思維能力和創(chuàng)新意識(shí)，提高對(duì)網(wǎng)頁視覺設(shè)計(jì)的整體把握和科學(xué)實(shí)施能力。1.1網(wǎng)頁視覺設(shè)計(jì)教學(xué)1.1.1教學(xué)的目的與目標(biāo)1.1網(wǎng)頁視覺設(shè)計(jì)教學(xué)1.1.2教學(xué)的內(nèi)容與方法1.主要內(nèi)容1）網(wǎng)頁視覺設(shè)計(jì)概述2）網(wǎng)頁視覺設(shè)計(jì)內(nèi)容與技巧3）網(wǎng)頁視覺設(shè)計(jì)實(shí)踐2.方法與手段1）課堂講授與作品賞析、專題研討、課題輔導(dǎo)與設(shè)計(jì)實(shí)踐相結(jié)合2）板書與多媒體教學(xué)課件相結(jié)合1.1網(wǎng)頁視覺設(shè)計(jì)教學(xué)1.1.2教學(xué)的內(nèi)容與方法1.1網(wǎng)頁視覺設(shè)計(jì)教學(xué)1.1.3考核內(nèi)容與要求1.內(nèi)容個(gè)人博客網(wǎng)頁設(shè)計(jì)（包括文案策劃及多媒體平臺(tái)展示）2.要求1）學(xué)習(xí)態(tài)度10%2）文案表述20%3）網(wǎng)頁設(shè)計(jì)構(gòu)思與表現(xiàn)30%4）整體效果40%1.1網(wǎng)頁視覺設(shè)計(jì)教學(xué)1.1.3考核內(nèi)容與要求1.2認(rèn)識(shí)網(wǎng)頁網(wǎng)頁的概念網(wǎng)頁是一種可以在WWW上傳輸并被瀏覽器識(shí)別、翻譯并顯示出來的特殊文件。一般我們常見到的網(wǎng)頁文件是HTML【HypertextMarkupLanguage，超文本標(biāo)記語言】文件。所謂“超文本”就是指頁面內(nèi)除文本外，還可以包含圖片、鏈接、音頻甚至視頻等非文字的組成部分。1.2認(rèn)識(shí)網(wǎng)頁網(wǎng)頁的概念1.2認(rèn)識(shí)網(wǎng)頁網(wǎng)頁就是我們上網(wǎng)時(shí)在瀏覽器中看到的一個(gè)個(gè)畫面，網(wǎng)站則是一組相關(guān)網(wǎng)頁的集合。一個(gè)小型網(wǎng)站可能只包含幾個(gè)網(wǎng)頁，而一個(gè)大型網(wǎng)站則可能包含成千上萬個(gè)網(wǎng)頁。另外，打開某個(gè)網(wǎng)站時(shí)顯示的第一個(gè)網(wǎng)頁被稱為網(wǎng)站的主頁（或首頁），它可以說是網(wǎng)站的門戶，通過它不僅可以了解網(wǎng)站的性質(zhì)和內(nèi)容，還可以訪問網(wǎng)站中的其他頁面。1.2認(rèn)識(shí)網(wǎng)頁網(wǎng)頁就是我們上網(wǎng)時(shí)在瀏覽器中看到的一1.2.1網(wǎng)頁的本質(zhì)我們看到的網(wǎng)頁包含了一組文件，它們分別是網(wǎng)頁文件（擴(kuò)展名為.html、.asp等）、圖像文件（擴(kuò)展名為.jpg、.gif等）和Flash動(dòng)畫文件（擴(kuò)展名為.swf）等。1.2.1網(wǎng)頁的本質(zhì)我們看到的網(wǎng)頁包含了一組文件，它們分1.2.1網(wǎng)頁的本質(zhì)從瀏覽者的角度看，網(wǎng)頁中無非就是一些文字、圖像和動(dòng)畫等。但從專業(yè)的角度來講，網(wǎng)頁中的元素各有其不同的作用，可以將他們分為Logo\站標(biāo)、導(dǎo)航條、banner\廣告條、標(biāo)題欄和按鈕等，如下圖所示。站標(biāo)導(dǎo)航條按鈕廣告條標(biāo)題欄1.2.1網(wǎng)頁的本質(zhì)從瀏覽者的角度看，網(wǎng)頁中無非就是一些1．站標(biāo)站標(biāo)也叫Logo，是網(wǎng)站的標(biāo)志，其作用是使人看見它就能夠聯(lián)想到企業(yè)。因此，網(wǎng)站Logo通常采用企業(yè)的Logo。Logo一般采用蘊(yùn)含企業(yè)文化和特色的圖案，或是與企業(yè)名稱相關(guān)的字符或符號(hào)及其變形，當(dāng)然也有很多是圖文組合。1．站標(biāo)站標(biāo)也叫Logo，是網(wǎng)站的標(biāo)志，其作用是使人看見它就2．導(dǎo)航條導(dǎo)航條是鏈接到網(wǎng)站內(nèi)主要頁面的超鏈接組合，它可以引導(dǎo)瀏覽者輕松找到網(wǎng)站中的各個(gè)頁面，導(dǎo)航條也因此而得名。設(shè)計(jì)導(dǎo)航條時(shí)，應(yīng)注意以下幾點(diǎn):1)如果網(wǎng)站內(nèi)容不多，可根據(jù)網(wǎng)站風(fēng)格嘗試靈活擺放導(dǎo)航條，也可以使用圖片或Flash動(dòng)畫等制作導(dǎo)航條。2)如果網(wǎng)站欄目很多，可以將導(dǎo)航條分為多排放置在Logo的下方或右側(cè)。為便于查看，可為各排設(shè)置不同的底色。2．導(dǎo)航條導(dǎo)航條是鏈接到網(wǎng)站內(nèi)主要頁面的超鏈接組合，它可以引3．廣告條廣告條又稱Banner，其功能是宣傳網(wǎng)站或替其他企業(yè)做廣告。Banner的尺寸可以根據(jù)版面需要來安排。3．廣告條廣告條又稱Banner，其功能是宣傳網(wǎng)站或替其他企4．標(biāo)題欄此處的標(biāo)題欄不是指整個(gè)網(wǎng)頁的標(biāo)題欄，而是網(wǎng)頁內(nèi)部各版塊的標(biāo)題欄，是各版塊內(nèi)容的概括。它使得網(wǎng)頁內(nèi)容的分類更清晰、明了，大大地方便了瀏覽者。標(biāo)題欄可以是文字加不同顏色的背景，也可以是圖片，這要根據(jù)網(wǎng)站的內(nèi)容和規(guī)模來決定。4．標(biāo)題欄此處的標(biāo)題欄不是指整個(gè)網(wǎng)頁的標(biāo)題欄，而是網(wǎng)頁內(nèi)部各5．按鈕在現(xiàn)實(shí)生活中，按鈕通常是啟動(dòng)某些裝置或機(jī)關(guān)的開關(guān)。網(wǎng)頁中的按鈕也沿用了這個(gè)概念。網(wǎng)頁中的按鈕被點(diǎn)擊之后，網(wǎng)頁會(huì)實(shí)現(xiàn)相應(yīng)的操作，比如頁面跳轉(zhuǎn)，或數(shù)據(jù)的傳輸?shù)取?．按鈕在現(xiàn)實(shí)生活中，按鈕通常是啟動(dòng)某些裝置或機(jī)關(guān)的開關(guān)。網(wǎng)案例解析——AnnaSui日本官方網(wǎng)站設(shè)計(jì)案例解析——AnnaSui日本官方網(wǎng)站設(shè)計(jì)Dreamweaver是由Adobe公司推出的一款在網(wǎng)頁制作方面大眾化的軟件，它具有可視化編輯界面，用戶不必編寫復(fù)雜的HTML源代碼就可以生成跨平臺(tái)、跨瀏覽器的網(wǎng)頁，不僅適合于專業(yè)網(wǎng)頁編輯人員的需要，同時(shí)也容易被業(yè)余網(wǎng)友們所掌握。

Dreamweaver支持動(dòng)態(tài)HTML，并采用了RoundtripHTML技術(shù)，Dreamweaver是一種可以滿足多層次需求、功能強(qiáng)大的可視化專業(yè)級(jí)網(wǎng)頁設(shè)計(jì)及制作工具。1.2.2網(wǎng)頁設(shè)計(jì)工具Dreamweaver是由Adobe公司推出的一Photoshop是由Adobe公司開發(fā)的圖形處理軟件，它是目前公認(rèn)的PC機(jī)上最好的通用平面美術(shù)設(shè)計(jì)軟件，它功能完善、性能穩(wěn)定、使用方便，所以在幾乎所有的廣告、出版、軟件公司，Photoshop都是首選的平面制作工具。1.2.2網(wǎng)頁設(shè)計(jì)工具Photoshop是由Adobe公司開發(fā)的圖形處

Fireworks是由Macromedia公司開發(fā)，后被Adobe公司收購的圖形處理工具，它的出現(xiàn)使Web作圖發(fā)生了革命性的變化。因?yàn)镕ireworks是第一套專門為制作網(wǎng)頁圖形而設(shè)計(jì)的軟件，同時(shí)也是專業(yè)的網(wǎng)頁圖形設(shè)計(jì)及制作的解決方案。作為一個(gè)圖像處理軟件，F(xiàn)ireworks能夠自由地導(dǎo)入多種格式的圖像進(jìn)行處理。

Fireworks還能夠自動(dòng)切割圖像、生成光標(biāo)動(dòng)態(tài)感應(yīng)的JavaScript程序等等，而且Fireworks具有強(qiáng)大的動(dòng)畫功能和一個(gè)相當(dāng)完美的網(wǎng)絡(luò)圖像生成器。1.2.2網(wǎng)頁設(shè)計(jì)工具Fireworks是由Macromedia公司開

Flash是美國Macromedia公司開發(fā)后被Adobe公司收購的矢量圖形編輯和動(dòng)畫創(chuàng)作的專業(yè)軟件，它是一種交互式動(dòng)畫設(shè)計(jì)工具，用它可以將音樂、聲效、動(dòng)畫以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁動(dòng)態(tài)效果。它主要應(yīng)用于網(wǎng)頁設(shè)計(jì)和多媒體創(chuàng)作等領(lǐng)域，功能十分強(qiáng)大和獨(dú)特，已成為交互式矢量動(dòng)畫的標(biāo)準(zhǔn)，在網(wǎng)上非常流行。Flash廣泛應(yīng)用于網(wǎng)頁動(dòng)畫制作、教學(xué)動(dòng)畫演示、網(wǎng)上購物、在線游戲等的制作中。1.2.2網(wǎng)頁設(shè)計(jì)工具Flash是美國Macromedia公司開發(fā)后被1.2.2網(wǎng)頁設(shè)計(jì)的基本步驟

網(wǎng)站定位要小，內(nèi)容要精。如果要制作一個(gè)包羅萬象的站點(diǎn)，把所有精彩的東西都放在上面，結(jié)果往往會(huì)事與愿違，給人的感覺是沒有主題，沒有特色，樣樣有，卻樣樣都很膚淺。網(wǎng)站的題材最好選自己擅長或者喜愛的內(nèi)容。興趣是制作網(wǎng)站的動(dòng)力，沒有熱情，很難設(shè)計(jì)制作出優(yōu)秀的網(wǎng)站。1網(wǎng)站定位1.2.2網(wǎng)頁設(shè)計(jì)的基本步驟網(wǎng)站定位要小，內(nèi)容要

進(jìn)行網(wǎng)站的整體規(guī)劃也就是組織網(wǎng)站的內(nèi)容和設(shè)計(jì)其結(jié)構(gòu)。組織網(wǎng)站的內(nèi)容可以從兩個(gè)角度來考慮。從設(shè)計(jì)者的角度來考慮，可以依據(jù)被描述對(duì)象的組織機(jī)構(gòu)、類別劃分等來組織內(nèi)容；從瀏覽者的角度來考慮，就應(yīng)該將各種素材依據(jù)瀏覽者的需要進(jìn)行內(nèi)容分類，以便瀏覽者可以快捷地獲取所需要的信息及其相關(guān)內(nèi)容。

1.2.2網(wǎng)頁設(shè)計(jì)的基本步驟2整體規(guī)劃進(jìn)行網(wǎng)站的整體規(guī)劃也就是組織網(wǎng)站的內(nèi)容和設(shè)計(jì)其結(jié)三種常用的結(jié)構(gòu)類型

①層狀結(jié)構(gòu)層狀結(jié)構(gòu)類似于目錄系統(tǒng)的樹型結(jié)構(gòu)三種常用的結(jié)構(gòu)類型①層狀結(jié)構(gòu)主頁頁面1頁面2頁面3

②線性結(jié)構(gòu)線性結(jié)構(gòu)類似于數(shù)據(jù)結(jié)構(gòu)中的線性表，用于組織本身的線性順序形式存在的信息，可以引導(dǎo)瀏覽者按部就班地瀏覽整個(gè)網(wǎng)站文件。

主頁頁頁頁②線性結(jié)構(gòu)主頁頁面1頁面2頁面3頁面4頁面5頁面7頁面8一級(jí)標(biāo)題二級(jí)標(biāo)題頁面6

③Web結(jié)構(gòu)

Web結(jié)構(gòu)類似于Internet的組成結(jié)構(gòu)，各網(wǎng)頁之間形成網(wǎng)狀連接，允許用戶隨意瀏覽。主頁頁面1頁面2頁面3頁面4頁面5頁面7頁面8一級(jí)標(biāo)題二級(jí)

通常在進(jìn)行網(wǎng)頁開發(fā)時(shí)，首先都進(jìn)行靜態(tài)網(wǎng)頁的制作，然后再在其中加入腳本程序、表單等動(dòng)態(tài)內(nèi)容。靜態(tài)網(wǎng)頁僅僅用來被動(dòng)地發(fā)布信息，而不具有任何交互功能，它是Web網(wǎng)頁的重要組成部分。一個(gè)好的網(wǎng)站首先是內(nèi)容豐富，其次就是網(wǎng)頁設(shè)計(jì)美觀。對(duì)于網(wǎng)頁的外觀設(shè)計(jì)，提供以下建議：（1）不要先決定網(wǎng)頁的外觀，然后迫使自己去適應(yīng)它，應(yīng)該根據(jù)網(wǎng)站的訪問者對(duì)象、要提供的信息以及制作目標(biāo)得出一個(gè)最適合的網(wǎng)頁架構(gòu)。3設(shè)計(jì)與制作通常在進(jìn)行網(wǎng)頁開發(fā)時(shí)，首先都進(jìn)行靜態(tài)網(wǎng)頁的制作，然后

（2）每頁排版不要太松散或用太大的字，盡量避免訪問者瀏覽網(wǎng)頁時(shí)要作大幅度的滾動(dòng)，對(duì)于篇幅太長的一頁可以使用內(nèi)部鏈接解決。（3）目前常用的分辨率是1024×768，所以我們網(wǎng)頁頁面設(shè)計(jì)有960×720及800×600，但現(xiàn)在國內(nèi)的站點(diǎn)基本上都是960×720，也有部分網(wǎng)頁是針對(duì)1280×800的分辨率，寬度設(shè)置在1000-1200左右。（4）不應(yīng)在每頁中插入太多的廣告。相信任何訪問者都不會(huì)喜歡瀏覽盡是些廣告的網(wǎng)頁，要考慮該頁內(nèi)容與廣告的比例，廣告太多，只會(huì)令人煩厭。（2）每頁排版不要太松散或用太大的字，盡量避免訪問者瀏

（5）不要每頁都采用不同的墻紙，以免每次轉(zhuǎn)頁時(shí)都要花費(fèi)過多的時(shí)間去下載。（6）底色或墻紙必須與文字對(duì)比強(qiáng)烈，以易于閱讀。如果網(wǎng)頁是文章式或是包含大量文字，不妨在底色與文字的搭配上下些工夫，力求讓訪問者能夠舒適地閱讀網(wǎng)頁。（7）不要把圖片白色當(dāng)作透明，要知道別人的系統(tǒng)不一定把內(nèi)定底色設(shè)為白色，解決的辦法除了真的把該網(wǎng)頁的底色設(shè)為白色之外，最好還是用圖片編輯工具將圖片設(shè)為透明顏色。（5）不要每頁都采用不同的墻紙，以免每次轉(zhuǎn)頁時(shí)都要花費(fèi)

當(dāng)網(wǎng)頁設(shè)計(jì)人員制作完所有網(wǎng)站頁面之后，需要對(duì)所設(shè)計(jì)的網(wǎng)頁進(jìn)行審查和測試，測試內(nèi)容包括功能性測試和完整性測試兩個(gè)方面。所謂功能性測試就是要保證網(wǎng)頁的可用性，達(dá)到最初的內(nèi)容組織設(shè)計(jì)目標(biāo)，實(shí)現(xiàn)所規(guī)定的功能，讀者可方便快速地尋找到所需的內(nèi)容。完整性測試就是保證頁面內(nèi)容顯示正確，鏈接準(zhǔn)確，無差錯(cuò)無遺漏。4測試網(wǎng)頁當(dāng)網(wǎng)頁設(shè)計(jì)人員制作完所有網(wǎng)站頁面之后，需要對(duì)所設(shè)計(jì)的1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)1.定義網(wǎng)頁視覺設(shè)計(jì)是以Internet作為載體，以互聯(lián)網(wǎng)技術(shù)和數(shù)字交互技術(shù)為基礎(chǔ)，依據(jù)客戶的需求與消費(fèi)者的需求設(shè)計(jì)有關(guān)商業(yè)目的的宣傳，同時(shí)遵循藝術(shù)設(shè)計(jì)規(guī)律，實(shí)現(xiàn)商業(yè)目的與功能統(tǒng)一，是一種商業(yè)功能和視覺藝術(shù)混合的活動(dòng)。1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)1.定義1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)2.特點(diǎn)網(wǎng)頁視覺設(shè)計(jì)具有媒體、數(shù)字技術(shù)、視覺藝術(shù)三大內(nèi)涵，它具有視覺傳達(dá)設(shè)計(jì)的一般特征，同時(shí)兼有了商業(yè)數(shù)字時(shí)代新藝術(shù)形式。1）交互交互性是網(wǎng)頁不同于傳統(tǒng)媒體之處，也是Web成為熱點(diǎn)的主要原因?，F(xiàn)在國內(nèi)最大的C2C網(wǎng)站上淘寶網(wǎng)正是通過網(wǎng)頁互動(dòng)性這一特點(diǎn)使整個(gè)消費(fèi)市場簡易化、便利化。1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)2.特點(diǎn)1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)2）多維性多維性源于超級(jí)鏈接，主要體現(xiàn)在網(wǎng)頁設(shè)計(jì)中對(duì)導(dǎo)航的設(shè)計(jì)。導(dǎo)航打破了人們接收信息的線性方式，提供了足夠的、不同角度的鏈接，體現(xiàn)視覺設(shè)計(jì)的多元化、人性化。3）媒體綜合

是指網(wǎng)頁視覺設(shè)計(jì)中綜合應(yīng)用多種媒體視聽元素4）終端可變

是指網(wǎng)頁顯示效果會(huì)隨著顯示終端的變化而變化1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)2）多維性1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)5）技藝融合

技術(shù)與藝術(shù)緊密結(jié)合，互相扶持，互相推動(dòng)。技術(shù)是實(shí)現(xiàn)網(wǎng)頁視覺效果的基礎(chǔ)，技術(shù)上為藝術(shù)的發(fā)展進(jìn)行鋪墊的。每一次的技術(shù)飛躍都會(huì)帶來藝術(shù)形式效果的改變，如流媒體技術(shù)的發(fā)展使網(wǎng)頁流暢運(yùn)用視頻成為現(xiàn)實(shí)；同樣，藝術(shù)發(fā)展也促進(jìn)技術(shù)的進(jìn)步，為了達(dá)到網(wǎng)頁上某種藝術(shù)表達(dá)形式，往往也會(huì)促進(jìn)某種新技術(shù)的出現(xiàn)，如Flash動(dòng)畫的出現(xiàn)。1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)5）技藝融合

DreamweaverCS4提供了多種工作界面，以適合不同的工作人員。第一次安裝該軟件并啟動(dòng)后，出現(xiàn)的工作界面如圖所示，該工作界面稱為“設(shè)計(jì)器”界面。

對(duì)于老用戶而言，如果不適應(yīng)這種工作界面，可以通過界面切換菜單進(jìn)行切換，選擇適合自己的界面模式。1.3初識(shí)DreamweaverCS4DreamweaverCS4提供了多種工作界面，以適合工作界面工作界面

由上圖可以看出，Dreamweaver的工作界面主要由菜單欄、【插入】工具欄、【文檔】工具欄、編輯窗口、狀態(tài)欄、【屬性】面板和各種面板組構(gòu)成，下面簡單介紹各主要組成部分。

1.3初識(shí)DreamweaverCS4

由上圖可以看出，Dreamweaver的工作界面主要1【插入】工具欄

DreamweaverCS4的【插入】工具欄中包含了8個(gè)標(biāo)簽，分別為：常用、布局、表單、數(shù)據(jù)、Spry、InContextEditing、文本、收藏夾，如圖所示。

單擊【插入】工具欄中的不同標(biāo)簽可以進(jìn)行切換，每一個(gè)標(biāo)簽中包括了若干的插入對(duì)象按鈕。單擊【插入】工具欄中的對(duì)象按鈕或者將按鈕拖曳到編輯窗口內(nèi)，即可將相應(yīng)的對(duì)象添加到網(wǎng)頁文件中，并可在網(wǎng)頁中編輯添加的對(duì)象。1.3初識(shí)DreamweaverCS41【插入】工具欄

DreamweaverCS4的【圖5-3【插入】工具欄1.3初識(shí)DreamweaverCS4圖5-3【插入】工具欄1.3初識(shí)Dreamwea2【文檔】工具欄

【文檔】工具欄中包含了代碼視圖、拆分視圖、設(shè)計(jì)視圖、實(shí)時(shí)視圖、實(shí)時(shí)代碼、文檔標(biāo)題、文件管理、瀏覽器預(yù)覽、可視化選項(xiàng)等按鈕，如圖所示。

1.3初識(shí)DreamweaverCS42【文檔】工具欄

【文檔】工具欄中包含了代碼視圖、拆圖5-4【文檔】工具欄1.3初識(shí)DreamweaverCS4圖5-4【文檔】工具欄1.3初識(shí)Dreamweav【文檔】工具欄中的前三個(gè)按鈕用于切換視圖模式。單擊

按鈕可以進(jìn)入代碼視圖，這是一個(gè)用于編寫和編輯HTML、JavaScript、服務(wù)器語言代碼(如ASP或ColdFusion標(biāo)記語言)以及其他類型代碼的手工編碼環(huán)境。單擊按鈕可以進(jìn)入代碼視圖與設(shè)計(jì)視圖，在該視圖中，窗口被分成上、下兩部分，頂部窗口用于編寫HTML代碼，底部窗口用于可視化編輯網(wǎng)頁。單擊按鈕可以進(jìn)入設(shè)計(jì)視圖，這是一個(gè)用于可視化頁面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計(jì)環(huán)境。在該視圖中，Dreamweaver中顯示的文檔處于可視化編輯狀態(tài)，頁面效果類似于在瀏覽器中查看頁面時(shí)看到的內(nèi)容。1.3初識(shí)DreamweaverCS4【文檔】工具欄中的前三個(gè)按鈕用于切換視圖模式。單擊3狀態(tài)欄

在DreamweaverCS4狀態(tài)欄中可以顯示當(dāng)前光標(biāo)所在位置的HTML標(biāo)記，通過此標(biāo)記可以確定所編輯的網(wǎng)頁內(nèi)容。狀態(tài)欄上還可以顯示當(dāng)前網(wǎng)頁的編輯窗口大小、當(dāng)前網(wǎng)頁文件的大小與網(wǎng)頁的傳輸速度，如圖所示。

另外，DreamweaverCS4的狀態(tài)欄上新增了視圖控制工具，其中選取工具用于選擇頁面中的操作對(duì)象；手形工具用于平移視圖；縮放工具用于放大或縮小視圖顯示；而設(shè)置縮放比率選項(xiàng)框可以通過確切的數(shù)值控制視圖的縮放。1.3初識(shí)DreamweaverCS43狀態(tài)欄

在DreamweaverCS4狀態(tài)欄中可圖5-5狀態(tài)欄1.3初識(shí)DreamweaverCS4圖5-5狀態(tài)欄1.3初識(shí)DreamweaverC4【屬性】面板

【屬性】面板用于顯示或修改當(dāng)前所選對(duì)象的屬性。在頁面中選擇不同的對(duì)象時(shí)，【屬性】面板中將顯示出不同對(duì)象的屬性。例如選擇了文字，在【屬性】面板中顯示的是文字的屬性；如果選擇了圖像，則【屬性】面板中將顯示圖像的屬性。另外，還可以直接在【屬性】面板中修改所選對(duì)象的屬性，修改后的效果可以在編輯窗口中反映出來。如圖所示為選擇表格時(shí)的【屬性】面板。

在【屬性】面板的右下角單擊三角形的切換按鈕，可以將【屬性】面板切換為常用屬性或全部屬性模式，如圖5-7所示。1.3初識(shí)DreamweaverCS44【屬性】面板

【屬性】面板用于顯示或修改當(dāng)前所選對(duì)圖5-6【屬性】面板1.3初識(shí)DreamweaverCS4圖5-6【屬性】面板1.3初識(shí)Dreamweav圖5-7切換后的【屬性】面板1.3初識(shí)DreamweaverCS4圖5-7切換后的【屬性】面板1.3初識(shí)Dream5面板組

面板組是指組合在一起的面板集合，它為我們編輯網(wǎng)頁提供了既直觀又快速的操作方法，是設(shè)計(jì)制作網(wǎng)頁時(shí)不可缺少的工具。

單擊【窗口】菜單下的相應(yīng)命令，可以打開或關(guān)閉面板。當(dāng)我們打開一個(gè)面板時(shí)，與其成組的面板會(huì)同時(shí)出現(xiàn)，如圖所示。1.3初識(shí)DreamweaverCS45面板組

面板組是指組合在一起的面板集合，它為我們編

打開的面板組1.3初識(shí)DreamweaverCS4打開的面板組1.3初識(shí)DreamweaverCS

單擊面板組中的標(biāo)簽，可以在不同的面板之間切換。另外，將光標(biāo)指向面板標(biāo)簽，按住鼠標(biāo)左鍵向外拖動(dòng)，可以把該面板從面板組中分離出來；分離出來的面板組還可以再放回去，只需拖動(dòng)面板標(biāo)簽到面板組中即可。1.3初識(shí)DreamweaverCS4單擊面板組中的標(biāo)簽，可以在不同的面板之間切換。另外，將光1創(chuàng)建站點(diǎn)的基本結(jié)構(gòu)

創(chuàng)建站點(diǎn)的基本結(jié)構(gòu)，是指確定站點(diǎn)的整體結(jié)構(gòu)和網(wǎng)頁之間的結(jié)構(gòu)關(guān)系。創(chuàng)建站點(diǎn)的基本結(jié)構(gòu)時(shí)首先要建立空白的站點(diǎn)，其次是添加網(wǎng)頁文件與站點(diǎn)文件夾。

1)創(chuàng)建站點(diǎn)

DreamweaverCS4提供了兩種創(chuàng)建站點(diǎn)的方法：一是在啟動(dòng)Dreamweaver時(shí)通過歡迎畫面創(chuàng)建；二是在Dreamweaver工作環(huán)境下，單擊菜單欄中的【站點(diǎn)】\【新建站點(diǎn)】命令。這兩種創(chuàng)建站點(diǎn)的方法都是通過向?qū)瓿傻?，非常直觀。

〖例5-1〗建立kejian站點(diǎn)。

1)啟動(dòng)DreamweaverCS4，則彈出歡迎畫面，如圖5-9所示。

建立教學(xué)站點(diǎn)1創(chuàng)建站點(diǎn)的基本結(jié)構(gòu)

創(chuàng)建站點(diǎn)的基本結(jié)構(gòu)，是指確定站

歡迎畫面

建立教學(xué)站點(diǎn)歡迎畫面建立教學(xué)站點(diǎn)

2)單擊【Dreamweaver站點(diǎn)】選項(xiàng)，則彈出【……的站點(diǎn)定義為】對(duì)話框，在該對(duì)話框中有兩個(gè)標(biāo)簽，其中【基本】標(biāo)簽就是站點(diǎn)定義向?qū)?，第一個(gè)對(duì)話框如圖5-10所示，這里有兩個(gè)選項(xiàng)，第一個(gè)選項(xiàng)要求輸入站點(diǎn)名稱，以便在Dreamweaver中標(biāo)識(shí)該站點(diǎn)，這里輸入“kejian”。第二個(gè)選項(xiàng)要求輸入站點(diǎn)的http地址，如果還沒有域名，可以暫時(shí)不填。

建立教學(xué)站點(diǎn)2)單擊【Dreamweaver站點(diǎn)】選項(xiàng)，則彈出【…第一個(gè)向?qū)?duì)話框

建立教學(xué)站點(diǎn)第一個(gè)向?qū)?duì)話框建立教學(xué)站點(diǎn)

3)單擊按鈕，進(jìn)入站點(diǎn)定義向?qū)У牡诙€(gè)對(duì)話框，如圖所示。該對(duì)話框詢問用戶是否要使用服務(wù)器技術(shù)，選擇【否，我不想使用服務(wù)器技術(shù)】選項(xiàng)，表示該站點(diǎn)是一個(gè)靜態(tài)站點(diǎn)，沒有動(dòng)態(tài)頁。

建立教學(xué)站點(diǎn)3)單擊按鈕，進(jìn)入站點(diǎn)定義向?qū)У牡诙€(gè)對(duì)話框，第二個(gè)向?qū)?duì)話框

建立教學(xué)站點(diǎn)第二個(gè)向?qū)?duì)話框建立教學(xué)站點(diǎn)

4)單擊按鈕，進(jìn)入站點(diǎn)定義向?qū)У牡谌齻€(gè)對(duì)話框，如圖所示。該對(duì)話框詢問用戶如何使用文件，這里選擇第一個(gè)選項(xiàng)，然后在下面的文本框中指定一個(gè)文件夾，Dreamweaver將在其中存儲(chǔ)站點(diǎn)文件。

5)單擊按鈕，進(jìn)入站點(diǎn)定義向?qū)У牡谒膫€(gè)對(duì)話框，如圖所示。該對(duì)話框詢問用戶如何連接到遠(yuǎn)程服務(wù)器，這里從下拉列表中選擇“無”。

建立教學(xué)站點(diǎn)4)單擊按鈕，進(jìn)入站點(diǎn)定義向?qū)У牡谌齻€(gè)對(duì)話框，如

第三個(gè)向?qū)?duì)話框

建立教學(xué)站點(diǎn)第三個(gè)向?qū)?duì)話框建立教學(xué)站點(diǎn)第四個(gè)向?qū)?duì)話框

建立教學(xué)站點(diǎn)第四個(gè)向?qū)?duì)話框建立教學(xué)站點(diǎn)

6)單擊按鈕，進(jìn)入站點(diǎn)定義向?qū)У牡谖鍌€(gè)對(duì)話框，其中顯示了用戶的設(shè)置概要，如圖所示。

7)單擊按鈕，則通過向?qū)Ы⒘艘粋€(gè)本地教學(xué)站點(diǎn)。

建立教學(xué)站點(diǎn)6)單擊按鈕，進(jìn)入站點(diǎn)定義向?qū)У牡谖鍌€(gè)對(duì)話框，第五個(gè)向?qū)?duì)話框

建立教學(xué)站點(diǎn)第五個(gè)向?qū)?duì)話框建立教學(xué)站點(diǎn)

建立了本地站點(diǎn)以后，新建的站點(diǎn)將顯示在【文件】面板中。單擊菜單欄中的【窗口】\【文件】命令，或者按下F8鍵，可以打開【文件】面板。該面板中顯示了本地站點(diǎn)的名稱以及本地站點(diǎn)的文件夾等選項(xiàng)，如圖所示。

現(xiàn)在我們已經(jīng)創(chuàng)建了一個(gè)教學(xué)站點(diǎn)，不過，目前為止這個(gè)站點(diǎn)還是空的，沒有實(shí)際內(nèi)容，因此必須向站點(diǎn)中添加相關(guān)的內(nèi)容。

建立教學(xué)站點(diǎn)建立了本地站點(diǎn)以后，新建的站點(diǎn)將顯示在【文件】面板中。單【文件】面板

建立教學(xué)站點(diǎn)【文件】面板建立教學(xué)站點(diǎn)

3．添加網(wǎng)頁文件與站點(diǎn)文件夾

新建的站點(diǎn)是空白的，其中沒有任何內(nèi)容。根據(jù)站點(diǎn)的規(guī)劃，需要向其中添加網(wǎng)頁文件或站點(diǎn)文件夾。網(wǎng)頁文件即上網(wǎng)時(shí)瀏覽的HTML文件；站點(diǎn)文件夾則用于管理站點(diǎn)內(nèi)容，因?yàn)檎军c(diǎn)中會(huì)有很多文件，為了有效地管理文件，可以將它們分門別類地存放在文件夾中，如圖像文件夾可以專門用于存放圖像、動(dòng)畫等。

建立教學(xué)站點(diǎn)3．添加網(wǎng)頁文件與站點(diǎn)文件夾

新建的站點(diǎn)是空白的，其

在站點(diǎn)中添加網(wǎng)頁文件與文件夾的方法基本一致，操作步驟如下：

1)在【文件】面板中單擊鼠標(biāo)右鍵，則彈出一個(gè)快捷菜單。

2)選擇快捷菜單中的【新建文件】命令，則新建了一個(gè)網(wǎng)頁文件，如圖所示。

建立教學(xué)站點(diǎn)在站點(diǎn)中添加網(wǎng)頁文件與文件夾的方法基本一致，操作步驟如下新建的網(wǎng)頁文件

建立教學(xué)站點(diǎn)新建的網(wǎng)頁文件建立教學(xué)站點(diǎn)

3)在光標(biāo)位置處輸入網(wǎng)頁的名稱，然后按下Enter鍵確認(rèn)，則完成了網(wǎng)頁文件的添加。

4)同樣的方法，如果在彈出的快捷菜單中選擇【新建文件夾】命令，則可以在站點(diǎn)中添加一個(gè)文件夾。

建立教學(xué)站點(diǎn)3)在光標(biāo)位置處輸入網(wǎng)頁的名稱，然后按下Enter鍵

5)為kejian站點(diǎn)添加內(nèi)容。

1)在【文件】面板中的“kejian”文件夾上單擊鼠標(biāo)右鍵，則彈出一個(gè)快捷菜單。

2)選擇快捷菜單中的【新建文件夾】命令，則在“kejian”文件夾下新建了一個(gè)文件夾。

3)在光標(biāo)位置處輸入文件夾的名稱，如“Images”，按下Enter鍵確認(rèn)。

建立教學(xué)站點(diǎn)5)為kejian站點(diǎn)添加內(nèi)容。

1)在【文件】面新建的文件夾

建立教學(xué)站點(diǎn)新建的文件夾建立教學(xué)站點(diǎn)

插入文本a)直接在文檔窗口中輸入文本，將光標(biāo)放置在文檔窗口中要插入文本的位置，然后直接輸入。如果需要跳段，可以按ENTER鍵。如果是換行，則是Shift+Enter.b)粘貼其他編輯器中生成的文本，首先要將光標(biāo)插入文本的位置，然后執(zhí)行“編輯----粘貼”，就能完成文本的插入。也可以直接使用標(biāo)準(zhǔn)工具欄上的“粘貼”按鈕。插入文本a)直接在文檔窗口中輸入文本，將光標(biāo)放置在文檔窗

插入文本插入特殊字符a)在文檔窗口中，將光標(biāo)定位在需要插入特殊字符的位置。b)執(zhí)行“插入---HTML---特殊字符”，在子菜單選擇合適的字符命令?；蛘咴诳旖輽谥羞x擇文本，特殊字符。c)如果在下拉菜單中沒有找到需要的字符，那么可以選擇“其他字符”。插入文本插入特殊字符

插入文本插入日期a)將光標(biāo)放置到要插入日期的位置。b)執(zhí)行“插入—日期”，或者在插入面板上點(diǎn)日期按鈕，便可以。插入文本列表a)用鼠標(biāo)選定要插入的項(xiàng)目的文本內(nèi)容b)切換城文本面板，然后單擊項(xiàng)目列表ul/ol插入文本插入日期

●【格式】：選擇其中的選項(xiàng)，可以對(duì)所選文本應(yīng)用系統(tǒng)預(yù)設(shè)的格式。

●

【ID】：用于為所選內(nèi)容分配一個(gè)ID號(hào)。

●

【類】：顯示當(dāng)前應(yīng)用于文本的類樣式，如果沒有對(duì)所選內(nèi)容應(yīng)用過任何樣式，則顯示“無”。

●單擊按鈕和按鈕，可以將所選文本加粗和傾斜。

●單擊或按鈕，可以為光標(biāo)所在的段落或所選擇的段落添加無序或有序項(xiàng)目列表?！瘛靖袷健浚哼x擇其中的選項(xiàng)，可以對(duì)所選文本應(yīng)用系統(tǒng)預(yù)設(shè)

●單擊或按鈕，可以使光標(biāo)所在的段落向右或向左縮進(jìn)。

●

【鏈接】：用于為所選的文本建立超鏈接?？梢栽谄浜竺娴奈谋究蛑休斎胍溄游臋n的路徑名稱，也可以單擊右側(cè)的圖標(biāo)，在彈出的對(duì)話框中選擇鏈接的文檔，或者按住圖標(biāo)指向要鏈接的文檔建立超鏈接。

●

【標(biāo)題】：用于設(shè)置超鏈接的文本提示。●單擊或按鈕，可以使光標(biāo)所在的段落向右或向左縮

●【目標(biāo)】：用于選擇鏈接文檔在窗口中的打開方式。選擇“_---blank”選項(xiàng)，表示將在新的瀏覽器窗口中打開鏈接的文檔；選擇“_parent”選項(xiàng)，表示將在當(dāng)前文檔的父級(jí)框架或包含該鏈接的框架窗口中打開鏈接文檔；選擇“_self”選項(xiàng)，表示將在當(dāng)前文檔所在的窗口中打開鏈接的文檔；選擇“_top”選項(xiàng)，表示將在整個(gè)瀏覽器窗口中打開鏈接的文檔。

DreamweaverCS4將CSS屬性面板與HTML屬性面板集成在一起，在【屬性】面板中單擊按鈕，可以切換到CSS屬性面板。●【目標(biāo)】：用于選擇鏈接文檔在窗口中的打開方式。選擇“_-

〖實(shí)例〗制作一個(gè)純文字網(wǎng)頁。

1)在【文件】面板中雙擊“Chinese.html”網(wǎng)頁文件，打開該網(wǎng)頁進(jìn)行編輯。

2)在【屬性】面板中單擊按鈕，在彈出的【頁面屬性】對(duì)話框中切換到【外觀(HTML)】分類，如圖下圖所示。〖實(shí)例〗制作一個(gè)純文字網(wǎng)頁。

1)在【文件】面板中靜態(tài)頁面視覺設(shè)計(jì)課件

3)單擊【背景圖像】文本框右側(cè)的按鈕，選擇一幅圖片作為網(wǎng)頁背景，然后切換到【標(biāo)題/編碼】分類，在【標(biāo)題】文本框中輸入“唐詩欣賞”作為網(wǎng)頁的標(biāo)題欄文字，如圖所示。

4)單擊對(duì)話框中的按鈕，完成頁面屬性的設(shè)置，則為網(wǎng)頁設(shè)置了標(biāo)題欄文字與背景圖像，如圖下圖所示。3)單擊【背景圖像】文本框右側(cè)的按鈕，選擇一幅圖5-24【頁面屬性】對(duì)話框(2)圖5-24【頁面屬性】對(duì)話框(2)靜態(tài)頁面視覺設(shè)計(jì)課件

5)在編輯窗口中輸入文字“唐詩欣賞”并將其選中。

6)在【屬性】面板的【格式】列表中選擇“標(biāo)題2”選項(xiàng)，設(shè)置網(wǎng)頁的標(biāo)題。然后切換到CSS屬性面板，單擊居中對(duì)齊按鈕，設(shè)置文字居中對(duì)齊，結(jié)果如圖5-26所示。

7)將光標(biāo)定位在標(biāo)題文字后面，在【插入】工具欄的【常用】標(biāo)簽中單擊按鈕，在頁面中插入一條水平線，如下圖所示。5)在編輯窗口中輸入文字“唐詩欣賞”并將其選中。

靜態(tài)頁面視覺設(shè)計(jì)課件靜態(tài)頁面視覺設(shè)計(jì)課件

8)將光標(biāo)定位在水平線的后面，按下Enter鍵，產(chǎn)生一個(gè)新段落，在新的段落中輸入如圖所示的文本內(nèi)容。

9)在【屬性】面板目標(biāo)規(guī)則中選擇“新內(nèi)聯(lián)樣式”，設(shè)置文字的相關(guān)格式。8)將光標(biāo)定位在水平線的后面，按下Enter鍵，產(chǎn)生一靜態(tài)頁面視覺設(shè)計(jì)課件第1章靜態(tài)頁面視覺設(shè)計(jì)與Dreamweaver第1章靜態(tài)頁面視覺設(shè)計(jì)與Dreamweaver第1章靜態(tài)頁面視覺設(shè)計(jì)與Dreamweaver1.1網(wǎng)頁視覺設(shè)計(jì)教學(xué)1.1.1教學(xué)的目的與目標(biāo)1.1.2教學(xué)的內(nèi)容與方法1.1.3考核內(nèi)容與要求1.2認(rèn)識(shí)網(wǎng)頁1.2.1網(wǎng)頁的本質(zhì)1.2.2網(wǎng)頁設(shè)計(jì)工具與基本步驟1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)1.3初識(shí)Dreamweaver1.3.1工作界面1.3.2規(guī)劃站點(diǎn)第1章靜態(tài)頁面視覺設(shè)計(jì)與Dreamweaver1.1網(wǎng)1.1網(wǎng)頁視覺設(shè)計(jì)教學(xué)1.1.1教學(xué)的目的與目標(biāo)網(wǎng)頁視覺設(shè)計(jì)是一門綜合性較強(qiáng)的實(shí)踐類課程，主要圍繞網(wǎng)頁視覺設(shè)計(jì)的概念、基本元素、風(fēng)格布局結(jié)合網(wǎng)頁制作軟件展開，目的是使學(xué)生較全面地了解網(wǎng)頁視覺設(shè)計(jì)的相關(guān)知識(shí)，深入掌握網(wǎng)頁視覺布局的方法；培養(yǎng)學(xué)生對(duì)網(wǎng)頁視覺設(shè)計(jì)的思維能力和創(chuàng)新意識(shí)，提高對(duì)網(wǎng)頁視覺設(shè)計(jì)的整體把握和科學(xué)實(shí)施能力。1.1網(wǎng)頁視覺設(shè)計(jì)教學(xué)1.1.1教學(xué)的目的與目標(biāo)1.1網(wǎng)頁視覺設(shè)計(jì)教學(xué)1.1.2教學(xué)的內(nèi)容與方法1.主要內(nèi)容1）網(wǎng)頁視覺設(shè)計(jì)概述2）網(wǎng)頁視覺設(shè)計(jì)內(nèi)容與技巧3）網(wǎng)頁視覺設(shè)計(jì)實(shí)踐2.方法與手段1）課堂講授與作品賞析、專題研討、課題輔導(dǎo)與設(shè)計(jì)實(shí)踐相結(jié)合2）板書與多媒體教學(xué)課件相結(jié)合1.1網(wǎng)頁視覺設(shè)計(jì)教學(xué)1.1.2教學(xué)的內(nèi)容與方法1.1網(wǎng)頁視覺設(shè)計(jì)教學(xué)1.1.3考核內(nèi)容與要求1.內(nèi)容個(gè)人博客網(wǎng)頁設(shè)計(jì)（包括文案策劃及多媒體平臺(tái)展示）2.要求1）學(xué)習(xí)態(tài)度10%2）文案表述20%3）網(wǎng)頁設(shè)計(jì)構(gòu)思與表現(xiàn)30%4）整體效果40%1.1網(wǎng)頁視覺設(shè)計(jì)教學(xué)1.1.3考核內(nèi)容與要求1.2認(rèn)識(shí)網(wǎng)頁網(wǎng)頁的概念網(wǎng)頁是一種可以在WWW上傳輸并被瀏覽器識(shí)別、翻譯并顯示出來的特殊文件。一般我們常見到的網(wǎng)頁文件是HTML【HypertextMarkupLanguage，超文本標(biāo)記語言】文件。所謂“超文本”就是指頁面內(nèi)除文本外，還可以包含圖片、鏈接、音頻甚至視頻等非文字的組成部分。1.2認(rèn)識(shí)網(wǎng)頁網(wǎng)頁的概念1.2認(rèn)識(shí)網(wǎng)頁網(wǎng)頁就是我們上網(wǎng)時(shí)在瀏覽器中看到的一個(gè)個(gè)畫面，網(wǎng)站則是一組相關(guān)網(wǎng)頁的集合。一個(gè)小型網(wǎng)站可能只包含幾個(gè)網(wǎng)頁，而一個(gè)大型網(wǎng)站則可能包含成千上萬個(gè)網(wǎng)頁。另外，打開某個(gè)網(wǎng)站時(shí)顯示的第一個(gè)網(wǎng)頁被稱為網(wǎng)站的主頁（或首頁），它可以說是網(wǎng)站的門戶，通過它不僅可以了解網(wǎng)站的性質(zhì)和內(nèi)容，還可以訪問網(wǎng)站中的其他頁面。1.2認(rèn)識(shí)網(wǎng)頁網(wǎng)頁就是我們上網(wǎng)時(shí)在瀏覽器中看到的一1.2.1網(wǎng)頁的本質(zhì)我們看到的網(wǎng)頁包含了一組文件，它們分別是網(wǎng)頁文件（擴(kuò)展名為.html、.asp等）、圖像文件（擴(kuò)展名為.jpg、.gif等）和Flash動(dòng)畫文件（擴(kuò)展名為.swf）等。1.2.1網(wǎng)頁的本質(zhì)我們看到的網(wǎng)頁包含了一組文件，它們分1.2.1網(wǎng)頁的本質(zhì)從瀏覽者的角度看，網(wǎng)頁中無非就是一些文字、圖像和動(dòng)畫等。但從專業(yè)的角度來講，網(wǎng)頁中的元素各有其不同的作用，可以將他們分為Logo\站標(biāo)、導(dǎo)航條、banner\廣告條、標(biāo)題欄和按鈕等，如下圖所示。站標(biāo)導(dǎo)航條按鈕廣告條標(biāo)題欄1.2.1網(wǎng)頁的本質(zhì)從瀏覽者的角度看，網(wǎng)頁中無非就是一些1．站標(biāo)站標(biāo)也叫Logo，是網(wǎng)站的標(biāo)志，其作用是使人看見它就能夠聯(lián)想到企業(yè)。因此，網(wǎng)站Logo通常采用企業(yè)的Logo。Logo一般采用蘊(yùn)含企業(yè)文化和特色的圖案，或是與企業(yè)名稱相關(guān)的字符或符號(hào)及其變形，當(dāng)然也有很多是圖文組合。1．站標(biāo)站標(biāo)也叫Logo，是網(wǎng)站的標(biāo)志，其作用是使人看見它就2．導(dǎo)航條導(dǎo)航條是鏈接到網(wǎng)站內(nèi)主要頁面的超鏈接組合，它可以引導(dǎo)瀏覽者輕松找到網(wǎng)站中的各個(gè)頁面，導(dǎo)航條也因此而得名。設(shè)計(jì)導(dǎo)航條時(shí)，應(yīng)注意以下幾點(diǎn):1)如果網(wǎng)站內(nèi)容不多，可根據(jù)網(wǎng)站風(fēng)格嘗試靈活擺放導(dǎo)航條，也可以使用圖片或Flash動(dòng)畫等制作導(dǎo)航條。2)如果網(wǎng)站欄目很多，可以將導(dǎo)航條分為多排放置在Logo的下方或右側(cè)。為便于查看，可為各排設(shè)置不同的底色。2．導(dǎo)航條導(dǎo)航條是鏈接到網(wǎng)站內(nèi)主要頁面的超鏈接組合，它可以引3．廣告條廣告條又稱Banner，其功能是宣傳網(wǎng)站或替其他企業(yè)做廣告。Banner的尺寸可以根據(jù)版面需要來安排。3．廣告條廣告條又稱Banner，其功能是宣傳網(wǎng)站或替其他企4．標(biāo)題欄此處的標(biāo)題欄不是指整個(gè)網(wǎng)頁的標(biāo)題欄，而是網(wǎng)頁內(nèi)部各版塊的標(biāo)題欄，是各版塊內(nèi)容的概括。它使得網(wǎng)頁內(nèi)容的分類更清晰、明了，大大地方便了瀏覽者。標(biāo)題欄可以是文字加不同顏色的背景，也可以是圖片，這要根據(jù)網(wǎng)站的內(nèi)容和規(guī)模來決定。4．標(biāo)題欄此處的標(biāo)題欄不是指整個(gè)網(wǎng)頁的標(biāo)題欄，而是網(wǎng)頁內(nèi)部各5．按鈕在現(xiàn)實(shí)生活中，按鈕通常是啟動(dòng)某些裝置或機(jī)關(guān)的開關(guān)。網(wǎng)頁中的按鈕也沿用了這個(gè)概念。網(wǎng)頁中的按鈕被點(diǎn)擊之后，網(wǎng)頁會(huì)實(shí)現(xiàn)相應(yīng)的操作，比如頁面跳轉(zhuǎn)，或數(shù)據(jù)的傳輸?shù)取?．按鈕在現(xiàn)實(shí)生活中，按鈕通常是啟動(dòng)某些裝置或機(jī)關(guān)的開關(guān)。網(wǎng)案例解析——AnnaSui日本官方網(wǎng)站設(shè)計(jì)案例解析——AnnaSui日本官方網(wǎng)站設(shè)計(jì)Dreamweaver是由Adobe公司推出的一款在網(wǎng)頁制作方面大眾化的軟件，它具有可視化編輯界面，用戶不必編寫復(fù)雜的HTML源代碼就可以生成跨平臺(tái)、跨瀏覽器的網(wǎng)頁，不僅適合于專業(yè)網(wǎng)頁編輯人員的需要，同時(shí)也容易被業(yè)余網(wǎng)友們所掌握。

Dreamweaver支持動(dòng)態(tài)HTML，并采用了RoundtripHTML技術(shù)，Dreamweaver是一種可以滿足多層次需求、功能強(qiáng)大的可視化專業(yè)級(jí)網(wǎng)頁設(shè)計(jì)及制作工具。1.2.2網(wǎng)頁設(shè)計(jì)工具Dreamweaver是由Adobe公司推出的一Photoshop是由Adobe公司開發(fā)的圖形處理軟件，它是目前公認(rèn)的PC機(jī)上最好的通用平面美術(shù)設(shè)計(jì)軟件，它功能完善、性能穩(wěn)定、使用方便，所以在幾乎所有的廣告、出版、軟件公司，Photoshop都是首選的平面制作工具。1.2.2網(wǎng)頁設(shè)計(jì)工具Photoshop是由Adobe公司開發(fā)的圖形處

Fireworks是由Macromedia公司開發(fā)，后被Adobe公司收購的圖形處理工具，它的出現(xiàn)使Web作圖發(fā)生了革命性的變化。因?yàn)镕ireworks是第一套專門為制作網(wǎng)頁圖形而設(shè)計(jì)的軟件，同時(shí)也是專業(yè)的網(wǎng)頁圖形設(shè)計(jì)及制作的解決方案。作為一個(gè)圖像處理軟件，F(xiàn)ireworks能夠自由地導(dǎo)入多種格式的圖像進(jìn)行處理。

Fireworks還能夠自動(dòng)切割圖像、生成光標(biāo)動(dòng)態(tài)感應(yīng)的JavaScript程序等等，而且Fireworks具有強(qiáng)大的動(dòng)畫功能和一個(gè)相當(dāng)完美的網(wǎng)絡(luò)圖像生成器。1.2.2網(wǎng)頁設(shè)計(jì)工具Fireworks是由Macromedia公司開

Flash是美國Macromedia公司開發(fā)后被Adobe公司收購的矢量圖形編輯和動(dòng)畫創(chuàng)作的專業(yè)軟件，它是一種交互式動(dòng)畫設(shè)計(jì)工具，用它可以將音樂、聲效、動(dòng)畫以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁動(dòng)態(tài)效果。它主要應(yīng)用于網(wǎng)頁設(shè)計(jì)和多媒體創(chuàng)作等領(lǐng)域，功能十分強(qiáng)大和獨(dú)特，已成為交互式矢量動(dòng)畫的標(biāo)準(zhǔn)，在網(wǎng)上非常流行。Flash廣泛應(yīng)用于網(wǎng)頁動(dòng)畫制作、教學(xué)動(dòng)畫演示、網(wǎng)上購物、在線游戲等的制作中。1.2.2網(wǎng)頁設(shè)計(jì)工具Flash是美國Macromedia公司開發(fā)后被1.2.2網(wǎng)頁設(shè)計(jì)的基本步驟

網(wǎng)站定位要小，內(nèi)容要精。如果要制作一個(gè)包羅萬象的站點(diǎn)，把所有精彩的東西都放在上面，結(jié)果往往會(huì)事與愿違，給人的感覺是沒有主題，沒有特色，樣樣有，卻樣樣都很膚淺。網(wǎng)站的題材最好選自己擅長或者喜愛的內(nèi)容。興趣是制作網(wǎng)站的動(dòng)力，沒有熱情，很難設(shè)計(jì)制作出優(yōu)秀的網(wǎng)站。1網(wǎng)站定位1.2.2網(wǎng)頁設(shè)計(jì)的基本步驟網(wǎng)站定位要小，內(nèi)容要

進(jìn)行網(wǎng)站的整體規(guī)劃也就是組織網(wǎng)站的內(nèi)容和設(shè)計(jì)其結(jié)構(gòu)。組織網(wǎng)站的內(nèi)容可以從兩個(gè)角度來考慮。從設(shè)計(jì)者的角度來考慮，可以依據(jù)被描述對(duì)象的組織機(jī)構(gòu)、類別劃分等來組織內(nèi)容；從瀏覽者的角度來考慮，就應(yīng)該將各種素材依據(jù)瀏覽者的需要進(jìn)行內(nèi)容分類，以便瀏覽者可以快捷地獲取所需要的信息及其相關(guān)內(nèi)容。

1.2.2網(wǎng)頁設(shè)計(jì)的基本步驟2整體規(guī)劃進(jìn)行網(wǎng)站的整體規(guī)劃也就是組織網(wǎng)站的內(nèi)容和設(shè)計(jì)其結(jié)三種常用的結(jié)構(gòu)類型

①層狀結(jié)構(gòu)層狀結(jié)構(gòu)類似于目錄系統(tǒng)的樹型結(jié)構(gòu)三種常用的結(jié)構(gòu)類型①層狀結(jié)構(gòu)主頁頁面1頁面2頁面3

②線性結(jié)構(gòu)線性結(jié)構(gòu)類似于數(shù)據(jù)結(jié)構(gòu)中的線性表，用于組織本身的線性順序形式存在的信息，可以引導(dǎo)瀏覽者按部就班地瀏覽整個(gè)網(wǎng)站文件。

主頁頁頁頁②線性結(jié)構(gòu)主頁頁面1頁面2頁面3頁面4頁面5頁面7頁面8一級(jí)標(biāo)題二級(jí)標(biāo)題頁面6

③Web結(jié)構(gòu)

Web結(jié)構(gòu)類似于Internet的組成結(jié)構(gòu)，各網(wǎng)頁之間形成網(wǎng)狀連接，允許用戶隨意瀏覽。主頁頁面1頁面2頁面3頁面4頁面5頁面7頁面8一級(jí)標(biāo)題二級(jí)

通常在進(jìn)行網(wǎng)頁開發(fā)時(shí)，首先都進(jìn)行靜態(tài)網(wǎng)頁的制作，然后再在其中加入腳本程序、表單等動(dòng)態(tài)內(nèi)容。靜態(tài)網(wǎng)頁僅僅用來被動(dòng)地發(fā)布信息，而不具有任何交互功能，它是Web網(wǎng)頁的重要組成部分。一個(gè)好的網(wǎng)站首先是內(nèi)容豐富，其次就是網(wǎng)頁設(shè)計(jì)美觀。對(duì)于網(wǎng)頁的外觀設(shè)計(jì)，提供以下建議：（1）不要先決定網(wǎng)頁的外觀，然后迫使自己去適應(yīng)它，應(yīng)該根據(jù)網(wǎng)站的訪問者對(duì)象、要提供的信息以及制作目標(biāo)得出一個(gè)最適合的網(wǎng)頁架構(gòu)。3設(shè)計(jì)與制作通常在進(jìn)行網(wǎng)頁開發(fā)時(shí)，首先都進(jìn)行靜態(tài)網(wǎng)頁的制作，然后

（2）每頁排版不要太松散或用太大的字，盡量避免訪問者瀏覽網(wǎng)頁時(shí)要作大幅度的滾動(dòng)，對(duì)于篇幅太長的一頁可以使用內(nèi)部鏈接解決。（3）目前常用的分辨率是1024×768，所以我們網(wǎng)頁頁面設(shè)計(jì)有960×720及800×600，但現(xiàn)在國內(nèi)的站點(diǎn)基本上都是960×720，也有部分網(wǎng)頁是針對(duì)1280×800的分辨率，寬度設(shè)置在1000-1200左右。（4）不應(yīng)在每頁中插入太多的廣告。相信任何訪問者都不會(huì)喜歡瀏覽盡是些廣告的網(wǎng)頁，要考慮該頁內(nèi)容與廣告的比例，廣告太多，只會(huì)令人煩厭。（2）每頁排版不要太松散或用太大的字，盡量避免訪問者瀏

（5）不要每頁都采用不同的墻紙，以免每次轉(zhuǎn)頁時(shí)都要花費(fèi)過多的時(shí)間去下載。（6）底色或墻紙必須與文字對(duì)比強(qiáng)烈，以易于閱讀。如果網(wǎng)頁是文章式或是包含大量文字，不妨在底色與文字的搭配上下些工夫，力求讓訪問者能夠舒適地閱讀網(wǎng)頁。（7）不要把圖片白色當(dāng)作透明，要知道別人的系統(tǒng)不一定把內(nèi)定底色設(shè)為白色，解決的辦法除了真的把該網(wǎng)頁的底色設(shè)為白色之外，最好還是用圖片編輯工具將圖片設(shè)為透明顏色。（5）不要每頁都采用不同的墻紙，以免每次轉(zhuǎn)頁時(shí)都要花費(fèi)

當(dāng)網(wǎng)頁設(shè)計(jì)人員制作完所有網(wǎng)站頁面之后，需要對(duì)所設(shè)計(jì)的網(wǎng)頁進(jìn)行審查和測試，測試內(nèi)容包括功能性測試和完整性測試兩個(gè)方面。所謂功能性測試就是要保證網(wǎng)頁的可用性，達(dá)到最初的內(nèi)容組織設(shè)計(jì)目標(biāo)，實(shí)現(xiàn)所規(guī)定的功能，讀者可方便快速地尋找到所需的內(nèi)容。完整性測試就是保證頁面內(nèi)容顯示正確，鏈接準(zhǔn)確，無差錯(cuò)無遺漏。4測試網(wǎng)頁當(dāng)網(wǎng)頁設(shè)計(jì)人員制作完所有網(wǎng)站頁面之后，需要對(duì)所設(shè)計(jì)的1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)1.定義網(wǎng)頁視覺設(shè)計(jì)是以Internet作為載體，以互聯(lián)網(wǎng)技術(shù)和數(shù)字交互技術(shù)為基礎(chǔ)，依據(jù)客戶的需求與消費(fèi)者的需求設(shè)計(jì)有關(guān)商業(yè)目的的宣傳，同時(shí)遵循藝術(shù)設(shè)計(jì)規(guī)律，實(shí)現(xiàn)商業(yè)目的與功能統(tǒng)一，是一種商業(yè)功能和視覺藝術(shù)混合的活動(dòng)。1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)1.定義1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)2.特點(diǎn)網(wǎng)頁視覺設(shè)計(jì)具有媒體、數(shù)字技術(shù)、視覺藝術(shù)三大內(nèi)涵，它具有視覺傳達(dá)設(shè)計(jì)的一般特征，同時(shí)兼有了商業(yè)數(shù)字時(shí)代新藝術(shù)形式。1）交互交互性是網(wǎng)頁不同于傳統(tǒng)媒體之處，也是Web成為熱點(diǎn)的主要原因。現(xiàn)在國內(nèi)最大的C2C網(wǎng)站上淘寶網(wǎng)正是通過網(wǎng)頁互動(dòng)性這一特點(diǎn)使整個(gè)消費(fèi)市場簡易化、便利化。1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)2.特點(diǎn)1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)2）多維性多維性源于超級(jí)鏈接，主要體現(xiàn)在網(wǎng)頁設(shè)計(jì)中對(duì)導(dǎo)航的設(shè)計(jì)。導(dǎo)航打破了人們接收信息的線性方式，提供了足夠的、不同角度的鏈接，體現(xiàn)視覺設(shè)計(jì)的多元化、人性化。3）媒體綜合

是指網(wǎng)頁視覺設(shè)計(jì)中綜合應(yīng)用多種媒體視聽元素4）終端可變

是指網(wǎng)頁顯示效果會(huì)隨著顯示終端的變化而變化1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)2）多維性1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)5）技藝融合

技術(shù)與藝術(shù)緊密結(jié)合，互相扶持，互相推動(dòng)。技術(shù)是實(shí)現(xiàn)網(wǎng)頁視覺效果的基礎(chǔ)，技術(shù)上為藝術(shù)的發(fā)展進(jìn)行鋪墊的。每一次的技術(shù)飛躍都會(huì)帶來藝術(shù)形式效果的改變，如流媒體技術(shù)的發(fā)展使網(wǎng)頁流暢運(yùn)用視頻成為現(xiàn)實(shí)；同樣，藝術(shù)發(fā)展也促進(jìn)技術(shù)的進(jìn)步，為了達(dá)到網(wǎng)頁上某種藝術(shù)表達(dá)形式，往往也會(huì)促進(jìn)某種新技術(shù)的出現(xiàn)，如Flash動(dòng)畫的出現(xiàn)。1.2.3網(wǎng)頁視覺設(shè)計(jì)定義與特點(diǎn)5）技藝融合

DreamweaverCS4提供了多種工作界面，以適合不同的工作人員。第一次安裝該軟件并啟動(dòng)后，出現(xiàn)的工作界面如圖所示，該工作界面稱為“設(shè)計(jì)器”界面。

對(duì)于老用戶而言，如果不適應(yīng)這種工作界面，可以通過界面切換菜單進(jìn)行切換，選擇適合自己的界面模式。1.3初識(shí)DreamweaverCS4DreamweaverCS4提供了多種工作界面，以適合工作界面工作界面

由上圖可以看出，Dreamweaver的工作界面主要由菜單欄、【插入】工具欄、【文檔】工具欄、編輯窗口、狀態(tài)欄、【屬性】面板和各種面板組構(gòu)成，下面簡單介紹各主要組成部分。

1.3初識(shí)DreamweaverCS4

由上圖可以看出，Dreamweaver的工作界面主要1【插入】工具欄

DreamweaverCS4的【插入】工具欄中包含了8個(gè)標(biāo)簽，分別為：常用、布局、表單、數(shù)據(jù)、Spry、InContextEditing、文本、收藏夾，如圖所示。

單擊【插入】工具欄中的不同標(biāo)簽可以進(jìn)行切換，每一個(gè)標(biāo)簽中包括了若干的插入對(duì)象按鈕。單擊【插入】工具欄中的對(duì)象按鈕或者將按鈕拖曳到編輯窗口內(nèi)，即可將相應(yīng)的對(duì)象添加到網(wǎng)頁文件中，并可在網(wǎng)頁中編輯添加的對(duì)象。1.3初識(shí)DreamweaverCS41【插入】工具欄

DreamweaverCS4的【圖5-3【插入】工具欄1.3初識(shí)DreamweaverCS4圖5-3【插入】工具欄1.3初識(shí)Dreamwea2【文檔】工具欄

【文檔】工具欄中包含了代碼視圖、拆分視圖、設(shè)計(jì)視圖、實(shí)時(shí)視圖、實(shí)時(shí)代碼、文檔標(biāo)題、文件管理、瀏覽器預(yù)覽、可視化選項(xiàng)等按鈕，如圖所示。

1.3初識(shí)DreamweaverCS42【文檔】工具欄

【文檔】工具欄中包含了代碼視圖、拆圖5-4【文檔】工具欄1.3初識(shí)DreamweaverCS4圖5-4【文檔】工具欄1.3初識(shí)Dreamweav【文檔】工具欄中的前三個(gè)按鈕用于切換視圖模式。單擊

按鈕可以進(jìn)入代碼視圖，這是一個(gè)用于編寫和編輯HTML、JavaScript、服務(wù)器語言代碼(如ASP或ColdFusion標(biāo)記語言)以及其他類型代碼的手工編碼環(huán)境。單擊按鈕可以進(jìn)入代碼視圖與設(shè)計(jì)視圖，在該視圖中，窗口被分成上、下兩部分，頂部窗口用于編寫HTML代碼，底部窗口用于可視化編輯網(wǎng)頁。單擊按鈕可以進(jìn)入設(shè)計(jì)視圖，這是一個(gè)用于可視化頁面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計(jì)環(huán)境。在該視圖中，Dreamweaver中顯示的文檔處于可視化編輯狀態(tài)，頁面效果類似于在瀏覽器中查看頁面時(shí)看到的內(nèi)容。1.3初識(shí)DreamweaverCS4【文檔】工具欄中的前三個(gè)按鈕用于切換視圖模式。單擊3狀態(tài)欄

在DreamweaverCS4狀態(tài)欄中可以顯示當(dāng)前光標(biāo)所在位置的HTML標(biāo)記，通過此標(biāo)記可以確定所編輯的網(wǎng)頁內(nèi)容。狀態(tài)欄上還可以顯示當(dāng)前網(wǎng)頁的編輯窗口大小、當(dāng)前網(wǎng)頁文件的大小與網(wǎng)頁的傳輸速度，如圖所示。

另外，DreamweaverCS4的狀態(tài)欄上新增了視圖控制工具，其中選取工具用于選擇頁面中的操作對(duì)象；手形工具用于平移視圖；縮放工具用于放大或縮小視圖顯示；而設(shè)置縮放比率選項(xiàng)框可以通過確切的數(shù)值控制視圖的縮放。1.3初識(shí)DreamweaverCS43狀態(tài)欄

在DreamweaverCS4狀態(tài)欄中可圖5-5狀態(tài)欄1.3初識(shí)DreamweaverCS4圖5-5狀態(tài)欄1.3初識(shí)DreamweaverC4【屬性】面板

【屬性】面板用于顯示或修改當(dāng)前所選對(duì)象的屬性。在頁面中選擇不同的對(duì)象時(shí)，【屬性】面板中將顯示出不同對(duì)象的屬性。例如選擇了文字，在【屬性】面板中顯示的是文字的屬性；如果選擇了圖像，則【屬性】面板中將顯示圖像的屬性。另外，還可以直接在【屬性】面板中修改所選對(duì)象的屬性，修改后的效果可以在編輯窗口中反映出來。如圖所示為選擇表格時(shí)的【屬性】面板。

在【屬性】面板的右下角單擊三角形的切換按鈕，可以將【屬性】面板切換為常用屬性或全部屬性模式，如圖5-7所示。1.3初識(shí)DreamweaverCS44【屬性】面板

【屬性】面板用于顯示或修改當(dāng)前所選對(duì)圖5-6【屬性】面板1.3初識(shí)DreamweaverCS4圖5-6【屬性】面板1.3初識(shí)Dreamweav圖5-7切換后的【屬性】面板1.3初識(shí)DreamweaverCS4圖5-7切換后的【屬性】面板1.3初識(shí)Dream5面板組

面板組是指組合在一起的面板集合，它為我們編輯網(wǎng)頁提供了既直觀又快速的操作方法，是設(shè)計(jì)制作網(wǎng)頁時(shí)不可缺少的工具。

單擊【窗口】菜單下的相應(yīng)命令，可以打開或關(guān)閉面板。當(dāng)我們打開一個(gè)面板時(shí)，與其成組的面板會(huì)同時(shí)出現(xiàn)，如圖所示。1.3初識(shí)DreamweaverCS45面板組

面板組是指組合在一起的面板集合，它為我們編

打開的面板組1.3初識(shí)DreamweaverCS4打開的面板組1.3初識(shí)DreamweaverCS

單擊面板組中的標(biāo)簽，可以在不同的面板之間切換。另外，將光標(biāo)指向面板標(biāo)簽，按住鼠標(biāo)左鍵向外拖動(dòng)，可以把該面板從面板組中分離出來；分離出來的面板組還可以再放回去，只需拖動(dòng)面板標(biāo)簽到面板組中即可。1.3初識(shí)DreamweaverCS4單擊面板組中的標(biāo)簽，可以在不同的面板之間切換。另外，將光1創(chuàng)建站點(diǎn)的基本結(jié)構(gòu)

創(chuàng)建站點(diǎn)的基本結(jié)構(gòu)，是指確定站點(diǎn)的整體結(jié)構(gòu)和網(wǎng)頁之間的結(jié)構(gòu)關(guān)系。創(chuàng)建站點(diǎn)的基本結(jié)構(gòu)時(shí)首先要建立空白的站點(diǎn)，其次是添加網(wǎng)頁文件與站點(diǎn)文件夾。

1)創(chuàng)建站點(diǎn)

DreamweaverCS4提供了兩種創(chuàng)建站點(diǎn)的方法：一是在啟動(dòng)Dreamweaver時(shí)通過歡迎畫面創(chuàng)建；二是在Dreamweaver工作環(huán)境下，單擊菜單欄中的【站點(diǎn)】\【新建站點(diǎn)】命令。這兩種創(chuàng)建站點(diǎn)的方法都是通過向?qū)瓿傻?，非常直觀。

〖例5-1〗建立kejian站點(diǎn)。

1)啟動(dòng)DreamweaverCS4，則彈出歡迎畫面，如圖5-9所示。

建立教學(xué)站點(diǎn)1創(chuàng)建站點(diǎn)的基本結(jié)構(gòu)

創(chuàng)建站點(diǎn)的基本結(jié)構(gòu)，是指確定站

歡迎畫面

建立教學(xué)站點(diǎn)歡迎畫面建立教學(xué)站點(diǎn)

2)單擊【Dreamweaver站點(diǎn)】選項(xiàng)，則彈出【……的站點(diǎn)定義為】對(duì)話框，在該對(duì)話框中有兩個(gè)標(biāo)簽，其中【基本】標(biāo)簽就是站點(diǎn)定義向?qū)В谝粋€(gè)對(duì)話框如圖5-10所示，這里有兩個(gè)選項(xiàng)，第一個(gè)選項(xiàng)要求輸入站點(diǎn)名稱，以便在Dreamweaver中標(biāo)識(shí)該站點(diǎn)，這里輸入“kejian”。第二個(gè)選項(xiàng)要求輸入站點(diǎn)的http地址，如果還沒有域名，可以暫時(shí)不填。

建立教學(xué)站點(diǎn)2)單擊【Dreamweaver站點(diǎn)】選項(xiàng)，則彈出【…第一個(gè)向?qū)?duì)話框

建立教學(xué)站點(diǎn)第一個(gè)向?qū)?duì)話框建立教學(xué)站點(diǎn)

3)單擊按鈕，進(jìn)入站點(diǎn)定義向?qū)У牡诙€(gè)對(duì)話框，如圖所示。該對(duì)話框詢問用戶是否要使用服務(wù)器技術(shù)，選擇【否，我不想使用服務(wù)器技術(shù)】選項(xiàng)，表示該站點(diǎn)是一個(gè)靜態(tài)站點(diǎn)，沒有動(dòng)態(tài)頁。

建立教學(xué)站點(diǎn)3)單擊按鈕，進(jìn)入站點(diǎn)定義向?qū)У牡诙€(gè)對(duì)話框，第二個(gè)向?qū)?duì)話框

建立教學(xué)站點(diǎn)第二個(gè)向?qū)?duì)話框建立教學(xué)站點(diǎn)

4)單擊按鈕，進(jìn)入站點(diǎn)定義向?qū)У牡谌齻€(gè)對(duì)話框，如圖所示。該對(duì)話框詢問用戶如何使用文件，這里選擇第一個(gè)選項(xiàng)，然后在下面的文本框中指定一個(gè)文件夾，Dreamweaver將在其中存儲(chǔ)站點(diǎn)文件。

5)單擊按鈕，進(jìn)入站點(diǎn)定義向?qū)У牡谒膫€(gè)對(duì)話框，如圖所示。該對(duì)話框詢問用戶如何連接到遠(yuǎn)程服務(wù)器，這里從下拉列表中選擇“無”。

建立教學(xué)站點(diǎn)4)單擊按鈕，進(jìn)入站點(diǎn)定義向?qū)У牡谌齻€(gè)對(duì)話框，如

第三個(gè)向?qū)?duì)話框

建立教學(xué)站點(diǎn)第三個(gè)向?qū)?duì)話框建立教學(xué)站點(diǎn)第四個(gè)向?qū)?duì)話框

建立教學(xué)站點(diǎn)第四個(gè)向?qū)?duì)話框建立教學(xué)站點(diǎn)

6)單擊按鈕，進(jìn)入站點(diǎn)定義向?qū)У牡谖鍌€(gè)對(duì)話框，其中顯示了用戶的設(shè)置概要，如圖所示。

7)單擊按鈕，則通過向?qū)Ы⒘艘粋€(gè)本地教學(xué)站點(diǎn)。

建立教學(xué)站點(diǎn)6)單擊按鈕，進(jìn)入站點(diǎn)定義向?qū)У牡谖鍌€(gè)對(duì)話框，第五個(gè)向?qū)?duì)話框

建立教學(xué)站點(diǎn)第五個(gè)向?qū)?duì)話框建立教學(xué)站點(diǎn)

建立了本地站點(diǎn)以后，新建的站點(diǎn)將顯示在【文件】面板中。單擊菜單欄中的【窗口】\【文件】命令，或者按下F8鍵，可以打開【文件】面板。該面板中顯示了本地站點(diǎn)的名稱以及本地站點(diǎn)的文件夾等選項(xiàng)，如圖所示。

現(xiàn)在我們已經(jīng)創(chuàng)建了一個(gè)教學(xué)站點(diǎn)，不過，目前為止這個(gè)站點(diǎn)還是空的，沒有實(shí)際內(nèi)容，因此必須向站點(diǎn)中添加相關(guān)的內(nèi)容。

建立教學(xué)站點(diǎn)建立了本地站點(diǎn)以后，新建的站點(diǎn)將顯示在【文件】面板中。單【文件】面板

建立教學(xué)站點(diǎn)【文件】面板建立教學(xué)站點(diǎn)

3．添加網(wǎng)頁文件與站點(diǎn)文件夾

新建的站點(diǎn)是空白的，其中沒有任何內(nèi)容。根據(jù)站點(diǎn)的規(guī)劃，需要向其中添加網(wǎng)頁文件或站點(diǎn)文件夾。網(wǎng)頁文件即上網(wǎng)時(shí)瀏覽的HTML文件；站點(diǎn)文件夾則用于管理站點(diǎn)內(nèi)容，因?yàn)檎军c(diǎn)中會(huì)有很多文件，為了有效地管理文件，可以將它們分門別類地存放在文件夾中，如圖像文件夾可以專門用于存放圖像、動(dòng)畫等。

建立教學(xué)站點(diǎn)3．添加網(wǎng)頁文件與站點(diǎn)文件夾

新建的站點(diǎn)是空白的，其

在站點(diǎn)中添加網(wǎng)頁文件與文件夾的方法基本一致，操作步驟如下：

1)在【文件】面板中單擊鼠標(biāo)右鍵，則彈出一個(gè)快捷菜單。

2)選擇快捷菜單中的【新建文件】命令，則新建了一個(gè)網(wǎng)頁文件，如圖所示。

建立教學(xué)站點(diǎn)在站點(diǎn)中