基于工作過(guò)程網(wǎng)站設(shè)計(jì)與制作項(xiàng)目教程（張亞?wèn)|鄭玉娟）任務(wù)一

網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ).pptx任務(wù)二

網(wǎng)頁(yè)中的色彩.pptx任務(wù)三“盛和?景園”房產(chǎn)網(wǎng)站設(shè)計(jì).pptx任務(wù)四“盛和?景園”房產(chǎn)網(wǎng)站的制作.pptx任務(wù)五

制作“盛和?景園”網(wǎng)站中首頁(yè)的特效.pptx任務(wù)六

“盛和?景園”網(wǎng)站中開場(chǎng)動(dòng)畫的制作.pptx全套可編輯PPT幻燈片課件（共6章）任務(wù)一

網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)

了解網(wǎng)頁(yè)的基本概念了解網(wǎng)頁(yè)的構(gòu)成及布局類型了解網(wǎng)站的基本概念掌握網(wǎng)站開發(fā)的流程了解網(wǎng)站的開發(fā)工具能力目標(biāo)通過(guò)本任務(wù)的學(xué)習(xí)，學(xué)生應(yīng)了解網(wǎng)頁(yè)與網(wǎng)站的基本內(nèi)容，并重點(diǎn)掌握網(wǎng)站的開發(fā)流程。能力目標(biāo)核心知識(shí)一、網(wǎng)頁(yè)概述1.什么是網(wǎng)頁(yè)網(wǎng)頁(yè)是一個(gè)文件，它存放在服務(wù)器（可以理解為一臺(tái)計(jì)算機(jī)）上，而這臺(tái)計(jì)算機(jī)必須與互聯(lián)網(wǎng)相連才能夠訪問(wèn)。網(wǎng)頁(yè)經(jīng)由網(wǎng)址（URL）來(lái)識(shí)別與存取，是萬(wàn)維網(wǎng)中的一“頁(yè)”，網(wǎng)頁(yè)文件擴(kuò)展名為.html或.htm。例如，打開瀏覽器，在地址欄中輸入網(wǎng)址，顯示在瀏覽器中的就是一個(gè)網(wǎng)頁(yè)，如圖1.1所示。核心知識(shí)2.網(wǎng)頁(yè)的構(gòu)成元素在Internet早期，網(wǎng)頁(yè)只能保存純文本。經(jīng)過(guò)近幾十年的發(fā)展，圖像、聲音、動(dòng)畫、視頻等技術(shù)已經(jīng)在網(wǎng)頁(yè)中得到廣泛應(yīng)用，網(wǎng)頁(yè)也發(fā)展成為集視、聽為一體的媒體，并且通過(guò)動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)，實(shí)現(xiàn)了用戶與用戶之間、用戶與網(wǎng)站管理者的交流。從瀏覽者的角度看，網(wǎng)頁(yè)中常見的構(gòu)成元素有文本、圖像、音頻、視頻、動(dòng)畫等。但從專業(yè)的角度來(lái)講，這些元素都有自己的名字，可以將它們分為站標(biāo)（Logo）、導(dǎo)航、廣告條、標(biāo)題欄、按鈕等。（1）站標(biāo)站標(biāo)是網(wǎng)站的標(biāo)志，也稱為L(zhǎng)ogo，其作用是使人看到它就能聯(lián)想到企業(yè)。因此，網(wǎng)站的Logo通常采用企業(yè)的商標(biāo)。Logo一般采用帶有企業(yè)特色和思想的圖案，或是與企業(yè)相關(guān)的字符或符號(hào)及其變形，當(dāng)然也可以是圖文組合，如圖1.2和圖1.3所示。

圖1.2圖1.3核心知識(shí)（2）導(dǎo)航導(dǎo)航是網(wǎng)站設(shè)計(jì)中不可缺少的基本元素之一，它是網(wǎng)站信息結(jié)構(gòu)的基礎(chǔ)分類，也是瀏覽者進(jìn)行信息瀏覽的路標(biāo)。很多網(wǎng)站的導(dǎo)航都使用導(dǎo)航條，導(dǎo)航條的設(shè)計(jì)應(yīng)該引人注目。瀏覽者進(jìn)入網(wǎng)站，首先會(huì)尋找導(dǎo)航條，通過(guò)導(dǎo)航條可以直接地了解網(wǎng)站的內(nèi)容及信息的分類方式，以判斷這個(gè)網(wǎng)站是否有自己需要的資料和感興趣的內(nèi)容。在網(wǎng)頁(yè)的上端或左側(cè)設(shè)置主導(dǎo)航要素的情況是比較普遍的方式，這樣能給用戶帶來(lái)很多便利，如圖1.6所示。圖1.6核心知識(shí)網(wǎng)站導(dǎo)航常見的分類如下:①橫向?qū)Ш綑M向?qū)Ш揭话阌米骶W(wǎng)站的主導(dǎo)航，門戶類的網(wǎng)站更是如此。由于門戶網(wǎng)站的分類導(dǎo)航較多，且每個(gè)頻道均有不同的樣式區(qū)分，因此在網(wǎng)站的頂部固定一個(gè)區(qū)域設(shè)計(jì)統(tǒng)一樣式且不占用過(guò)多空間的導(dǎo)航是最理想的選擇，如圖1.8所示。圖1.8②縱向?qū)Ш皆陂T戶網(wǎng)站中很少用到縱向?qū)Ш?。縱向?qū)Ш礁鼉A向于表達(dá)產(chǎn)品分類。例如，很多購(gòu)物網(wǎng)站和電子商務(wù)網(wǎng)站的左側(cè)都提供了對(duì)全部的商品進(jìn)行分類的導(dǎo)航菜單，以方便瀏覽者快速找到想要的內(nèi)容，如圖1.9所示。圖1.9核心知識(shí)③下拉式導(dǎo)航下拉式導(dǎo)航可以節(jié)省大量的版面空間，對(duì)于內(nèi)容多而分類比較復(fù)雜的網(wǎng)站來(lái)說(shuō)，下拉式導(dǎo)航是最適合不過(guò)的了。下拉式導(dǎo)航在電子商務(wù)類網(wǎng)站的應(yīng)用較多，它可以幫助瀏覽者尋找更詳細(xì)的分類，如圖1.10所示。圖1.10核心知識(shí)（3）廣告條廣告條又稱Banner，其功能是宣傳網(wǎng)站或替其他企業(yè)做廣告，以賺取廣告費(fèi)。Banner的尺寸可以根據(jù)頁(yè)面需要來(lái)安排，如圖1.11所示。在Banner的制作過(guò)程中需要注意以下幾點(diǎn)。①Banner可以是靜態(tài)的也可以是動(dòng)態(tài)的?，F(xiàn)在使用動(dòng)態(tài)居多，容易引起瀏覽者的注意。②Banner的體積不宜過(guò)大，盡量使用GIF格式的圖片與動(dòng)畫或Flash動(dòng)畫，因?yàn)檫@兩種格式的動(dòng)畫文件體積小，載入時(shí)間短。圖1.11核心知識(shí)③Banner的文字不要太多，只要達(dá)到一定的提醒效果就可以，通常一兩句企業(yè)的廣告語(yǔ)即可。④Banner中的圖片顏色不要太多，尤其是GIF格式的圖片或動(dòng)畫，要避免出現(xiàn)顏色的漸變和光暈效果，因?yàn)镚IF格式文件僅支持256種顏色，顏色的連續(xù)變換會(huì)出現(xiàn)明顯的斷層甚至光斑，影響效果。（4）標(biāo)題欄這里的標(biāo)題欄不是指整個(gè)網(wǎng)頁(yè)的標(biāo)題欄，而是網(wǎng)頁(yè)內(nèi)部各版塊的標(biāo)題，是各版塊內(nèi)容的概括。它使得網(wǎng)頁(yè)內(nèi)容的分類更清晰明了，大大地方便了瀏覽者。標(biāo)題欄可以是文字加不同顏色背景，也可是圖片。一般的大型網(wǎng)站都采用前者，一些內(nèi)容少的小網(wǎng)站采用后者，如圖1.12和圖1.13所示。圖1.12圖1.13核心知識(shí)（5）按鈕在現(xiàn)實(shí)生活中，按鈕通常是啟動(dòng)某些裝置或機(jī)關(guān)的開關(guān)。網(wǎng)頁(yè)中的按鈕也沿用了這個(gè)概念。網(wǎng)頁(yè)的按鈕被點(diǎn)擊之后，網(wǎng)頁(yè)會(huì)實(shí)現(xiàn)相應(yīng)的操作，比如頁(yè)面跳轉(zhuǎn)，或者信息搜索等，如圖1.14所示。圖1.14設(shè)計(jì)按鈕時(shí)，要注意以下幾點(diǎn)。①要保證按鈕與頁(yè)面的協(xié)調(diào)，不能太搶眼，不宜使用過(guò)多的顏色。②如果按鈕上有字則盡量使用單色或漸變背景，保證字跡的清晰。③當(dāng)頁(yè)面上有多個(gè)按鈕的時(shí)候，應(yīng)分清主次，根據(jù)版面的需要改變按鈕的顏色或者大小。核心知識(shí)3.網(wǎng)頁(yè)的布局類型（1）國(guó)字型國(guó)字型也稱同字型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來(lái)是網(wǎng)站的主要內(nèi)容，最左側(cè)和最右側(cè)分列一些小條目?jī)?nèi)容，中間是主要部分，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這是使用最多的一種結(jié)構(gòu)類型，如圖1.15所示。圖1.15核心知識(shí)（2）匡字型匡字型也稱拐角形，這種結(jié)構(gòu)與國(guó)字型結(jié)構(gòu)很相近，上面是標(biāo)題及廣告橫幅，下面左側(cè)是一窄列的鏈接等，右側(cè)是很寬的正文，下面也是一些網(wǎng)站的輔助信息，如圖1.16所示。圖1.16核心知識(shí)（3）三字形這是一種比較簡(jiǎn)潔的布局類型，其頁(yè)面在橫向上被分隔為3部分，上部和下部放置一些標(biāo)志、導(dǎo)航條、廣告條和版權(quán)信息等，中間是正文內(nèi)容，如圖1.17所示。圖1.17核心知識(shí)（4）川字型整個(gè)頁(yè)面在垂直方向上被分為3列，內(nèi)容按欄目分布在這3列中，最大限度地突出欄目的索引功能，如圖1.18所示。圖1.18常見的網(wǎng)頁(yè)布局類型還包括標(biāo)題文本型、框架型、封面型、Flash型等。核心知識(shí)二、網(wǎng)站概述1.什么是網(wǎng)站因特網(wǎng)起源于美國(guó)國(guó)防部高級(jí)研究計(jì)劃管理局建立的阿帕網(wǎng)。網(wǎng)站（Website）開始是指在因特網(wǎng)上，根據(jù)一定的規(guī)則，使用HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁(yè)的集合。網(wǎng)站是一種溝通工具，人們可以通過(guò)網(wǎng)站來(lái)發(fā)布自己想要公開的資訊，或者利用網(wǎng)站來(lái)提供相關(guān)的網(wǎng)絡(luò)服務(wù)。人們可以通過(guò)網(wǎng)頁(yè)瀏覽器來(lái)訪問(wèn)網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。國(guó)內(nèi)比較知名的門戶網(wǎng)站有新浪、搜狐、網(wǎng)易；電子商務(wù)網(wǎng)站有京東、蘇寧、當(dāng)當(dāng)?shù)取?.網(wǎng)站開發(fā)流程網(wǎng)站的開發(fā)過(guò)程可以分為三個(gè)階段——前期、中期、后期，如圖1.19所示。圖1.19核心知識(shí)（1）第一階段：前期①確定網(wǎng)站主題②網(wǎng)站整體規(guī)劃③收集素材（2）第二階段——中期①開發(fā)與測(cè)試網(wǎng)站②域名空間的申請(qǐng)與備案③發(fā)布網(wǎng)站（3）第三階段—后期①更新和維護(hù)網(wǎng)站②宣傳與推廣網(wǎng)站任務(wù)二

網(wǎng)頁(yè)中的色彩

掌握無(wú)彩色系與有彩色系掌握色彩的三要素掌握色彩對(duì)比和色彩心理的表現(xiàn)形式掌握網(wǎng)頁(yè)色彩的搭配掌握各類網(wǎng)站設(shè)計(jì)指南能力目標(biāo)通過(guò)本任務(wù)的學(xué)習(xí)，學(xué)生應(yīng)掌握各類網(wǎng)站的配色方法和技巧。能力目標(biāo)核心知識(shí)一、色彩的基本知識(shí)顯示器的顏色屬于光源色。所以顏色以光學(xué)顏色RGB為主。在顯示器屏幕內(nèi)側(cè)均勻分布著紅色（Red）、綠色（Green）、藍(lán)色（Blue）的熒光粒子，當(dāng)接通顯示器電源時(shí)顯示器發(fā)光并以此顯示出不同的顏色。顯示器的顏色是通過(guò)光源三原色的混合顯示出來(lái)的。顯示器可以顯示出多達(dá)1600萬(wàn)種顏色。

網(wǎng)頁(yè)顏色主要是由3種基本顏色組成的，它們是紅（Red）、綠（Green）、藍(lán)（Blue），其他的顏色是由這3種顏色調(diào)和而成的。例如，黃=紅+綠，紫色=紅+藍(lán)，白色=紅+綠+藍(lán)。用6個(gè)十六進(jìn)制數(shù)來(lái)表示紅、綠、藍(lán)3種顏色的含量，組成一個(gè)6位的十六進(jìn)制數(shù)，就是RGB顏色。例如，紅色為FF0000，綠色為00FF00，藍(lán)色為0000FF，白色為FFFFFF。

通常情況下，RGB各有256級(jí)亮度，一共可以組合出256*256*256=16777216，簡(jiǎn)稱1600萬(wàn)色，也稱為24位色。核心知識(shí)1.色相色相也叫色澤，色相是色彩最基本的特征，反應(yīng)顏色的基本面貌。色相是一種色彩區(qū)別于另一種色彩的最主要因素。色相最基本的代表色是紅、黃、綠、青、紫5種。這5種顏色在人們的心理方面有明確的特征，色相的心理反應(yīng)特征是暖色或冷色。色相之間的關(guān)系可以用色相環(huán)表示，如圖

2.1所示，除了主要的5種色相外，橙、黃綠、青綠、青紫和紫紅成為中間色相。人的眼睛可以分辨出約180種不同色相的顏色。圖2.1核心知識(shí)2.明度明度是指色彩的深淺、明暗，它取決于反射光的強(qiáng)度，任何色彩都存在明暗變化。其中黃色明度最高，紫色明度最低，綠、紅、藍(lán)、橙的明度相近，為中間明度。另外在同一色相的明度中還存在深淺的變化。如綠色中由淺到深有粉綠、淡綠、翠綠等明度變化。有明度差的色彩更容易調(diào)和。如紫色（#993399）與黃色（#ffff00）、暗紅（#cc3300）與草綠（#99cc00）、暗藍(lán)（#0066cc）與橙色（#ff9933）等。3.純度純度是指色彩的鮮艷程度，也稱色彩的飽和度。其取決于該顏色中含色成分和消色成分（灰色）的比例。含色成分越大，飽和度越大；消色成分越大，飽和度越小，如圖2.2所示。圖2.2核心知識(shí)三、色彩分析不同的顏色會(huì)給瀏覽者不同的心理感受。1.紅色紅色是一種激奮的色彩。有刺激效果，能使人產(chǎn)生沖動(dòng)、憤怒、熱情、活力的感覺(jué)。被用來(lái)傳達(dá)有活力、積極、熱誠(chéng)、溫暖、前進(jìn)等涵義的形象與精神，如圖2.3所示。圖2.3核心知識(shí)2.綠色綠色介于冷暖兩種色彩的中間，給人和睦、寧?kù)o、健康、安全的感覺(jué)，如圖2.4所示。圖2.4核心知識(shí)3.紫色紫色色彩心理象征著女性化，代表著高貴和奢華、優(yōu)雅和魅力，也象征著神秘與莊重、神圣和浪漫，如圖2.5所示。圖2.5核心知識(shí)4.橙色橙色也是一種激奮的色彩，具有輕快、歡欣、熱烈、溫馨、時(shí)尚的效果，如圖2.6所示。圖2.6核心知識(shí)圖2.75.黃色黃色會(huì)給人帶來(lái)快樂(lè)、聰慧和輕快的感覺(jué)，它的明度最高，如圖2.7所示。核心知識(shí)6.藍(lán)色藍(lán)色是最涼爽、清新、專業(yè)的色彩。由于藍(lán)色沉穩(wěn)的特性，具有理智、準(zhǔn)確的意象，在商業(yè)設(shè)計(jì)中，強(qiáng)調(diào)科技、效率的商品或企業(yè)形象大多選用藍(lán)色作為標(biāo)準(zhǔn)色、企業(yè)色。它和白色混合，能展現(xiàn)柔順、淡雅、浪漫的氣氛，如圖2.8所示。圖2.8核心知識(shí)7.白色在商業(yè)設(shè)計(jì)中，白色具有高級(jí)、科技的意象，通常需和其他色彩搭配使用并且可以和任何顏色作搭配，如圖2.9所示。圖2.9核心知識(shí)8.黑色在商業(yè)設(shè)計(jì)中，黑色具有高貴、穩(wěn)重、科技的意象，許多科技產(chǎn)品的用色，如電視、跑車、攝影機(jī)、音響、儀器等的色彩大多采用黑色，在其他方面，黑色莊嚴(yán)的意象也常用在一些特殊場(chǎng)合的空間設(shè)計(jì)中，如圖2.10所示。圖2.10核心知識(shí)9.灰色在商業(yè)設(shè)計(jì)中，灰色具有柔和、高雅的意象，而且屬于“中間性格”，男女皆能接受，所以灰色也是永遠(yuǎn)流行的主要顏色，在許多高科技產(chǎn)品中，尤其是和金屬材料有關(guān)的，幾乎都用灰色來(lái)傳達(dá)高級(jí)、科技的形象，使用灰色時(shí)，利用不同的層次變化組合或搭配其他色彩，才不會(huì)過(guò)于沉悶，才不會(huì)有呆板、僵硬的感覺(jué)，如圖2.11所示。圖2.11核心知識(shí)四、網(wǎng)頁(yè)色彩搭配方法網(wǎng)頁(yè)配色很重要，網(wǎng)頁(yè)顏色搭配是否合理會(huì)直接影響訪問(wèn)者的情緒。好的色彩搭配會(huì)帶給訪問(wèn)者很強(qiáng)的視覺(jué)沖擊力，不恰當(dāng)?shù)纳蚀钆鋭t會(huì)讓訪問(wèn)者浮躁不安。1.同種色彩搭配同種色彩搭配是指首先選定一種色彩，然后調(diào)整其透明度和飽和度，將色彩變淡或加深，從而產(chǎn)生新的色彩，這樣的頁(yè)面看起來(lái)色彩統(tǒng)一，具有層次感。

2.鄰近色彩搭配鄰近色是指在色環(huán)上相鄰的顏色，如綠色和藍(lán)色、紅色和黃色即互為鄰近色。采用鄰近色搭配可以避免網(wǎng)頁(yè)色彩雜亂，易于達(dá)到頁(yè)面和諧統(tǒng)一的效果。

3.對(duì)比色彩搭配一般來(lái)說(shuō)，色彩的三原色（紅、綠、藍(lán)）最能體現(xiàn)色彩間的差異。對(duì)比色可以突出重點(diǎn)，產(chǎn)生強(qiáng)烈的視覺(jué)效果。通過(guò)合理使用對(duì)比色，能夠使網(wǎng)站特色鮮明、重點(diǎn)突出。在設(shè)計(jì)時(shí)，通常以一種顏色為主色調(diào)，用其對(duì)比色作點(diǎn)綴，以起到畫龍點(diǎn)睛的作用。4.暖色色彩搭配暖色色彩搭配是指使用紅色、橙色、黃色、集合色等色彩的搭配。這種色調(diào)的運(yùn)用可為網(wǎng)頁(yè)營(yíng)造出和諧和熱情的氛圍。

5.冷色色彩搭配冷色色彩搭配是指使用綠色、藍(lán)色及紫色等色彩的搭配，這種色彩搭配可為網(wǎng)頁(yè)營(yíng)造出寧?kù)o、清涼和高雅的氛圍。冷色色彩與白色搭配一般會(huì)獲得較好的視覺(jué)效果。核心知識(shí)6.有主色的混合色彩搭配有主色的混合色彩搭配是指以一種顏色作為主要顏色，同時(shí)輔以其他色彩混合搭配，形成繽紛而不雜亂的搭配效果。

7.文字與網(wǎng)頁(yè)的背景色對(duì)比要突出文字內(nèi)容的顏色與網(wǎng)頁(yè)的背景色對(duì)比要突出。底色深，文字的顏色就應(yīng)淺，以深色的背景襯托淺色的內(nèi)容（文字或圖片）；反之，底色淡，文字的顏色就要深些，以淺色的背景襯托深色的內(nèi)容（文字或圖片）。核心知識(shí)任務(wù)三

“盛和·景園”房產(chǎn)網(wǎng)站設(shè)計(jì)模塊一“盛和·景園”房產(chǎn)網(wǎng)站需求分析的建立通過(guò)本任務(wù)的學(xué)習(xí)，掌握“盛和·景園”房產(chǎn)網(wǎng)站需求分析的建立。能力目標(biāo)掌握“盛和·景園”需求分析的建立。核心知識(shí)一、確定網(wǎng)站主題1.網(wǎng)站的提出“盛和·景園”房產(chǎn)項(xiàng)目是由德州天元房產(chǎn)公司開發(fā)的一個(gè)樓盤項(xiàng)目，為了讓客戶更好地通過(guò)網(wǎng)絡(luò)了解該房產(chǎn)項(xiàng)目，同客戶進(jìn)行更好的交流，公司決定為該房產(chǎn)項(xiàng)目開發(fā)一個(gè)網(wǎng)站。2.網(wǎng)站的要求網(wǎng)站類型：企業(yè)網(wǎng)站。網(wǎng)站名稱：盛和·景園置業(yè)。網(wǎng)站客戶群：潛在的購(gòu)房客戶。網(wǎng)站要求：“盛和·景園”網(wǎng)站作為該房產(chǎn)項(xiàng)目與客戶的一個(gè)交流平臺(tái)，含有項(xiàng)目介紹、戶型展示、購(gòu)房指南、團(tuán)購(gòu)活動(dòng)、在線咨詢、聯(lián)系我們等模塊。3.網(wǎng)站主題房產(chǎn)項(xiàng)目網(wǎng)站。核心知識(shí)二、網(wǎng)站整體規(guī)劃1.網(wǎng)站的目標(biāo)定位根據(jù)公司領(lǐng)導(dǎo)層提出的建立高規(guī)格、專業(yè)房產(chǎn)網(wǎng)站的定位，為該房產(chǎn)項(xiàng)目打造一個(gè)行業(yè)知名的網(wǎng)站。公司網(wǎng)站設(shè)計(jì)的方案要實(shí)現(xiàn)以下目標(biāo)。①結(jié)合公司的發(fā)展戰(zhàn)略，通過(guò)網(wǎng)上形象策劃宣傳，進(jìn)一步體現(xiàn)該房產(chǎn)項(xiàng)目的形象。②建立項(xiàng)目介紹、項(xiàng)目展示等內(nèi)容，體現(xiàn)該房產(chǎn)項(xiàng)目的詳細(xì)內(nèi)容，具體如下。項(xiàng)目特色：宜居天下，綠色生態(tài)。項(xiàng)目理念：以人為本，人與自然的完美融合。質(zhì)量方針：質(zhì)量第一，用戶至上。核心知識(shí)2.網(wǎng)站的風(fēng)格設(shè)計(jì)總體印象：立足于本項(xiàng)目行業(yè)領(lǐng)頭羊形象的設(shè)計(jì)，以展示“盛和·景園”的品質(zhì)建設(shè)，主題突出、內(nèi)容精干、形式簡(jiǎn)潔。版式布局：欄目集中，分欄目檢索明確，導(dǎo)航標(biāo)志清晰。色彩運(yùn)用：以紅色、白色、灰色為主色調(diào)，突出體現(xiàn)該房產(chǎn)項(xiàng)目整潔的居住環(huán)境，企業(yè)蒸蒸日上的發(fā)展和客戶紅紅火火的生活。呈現(xiàn)專業(yè)、大氣、動(dòng)感、暢快、簡(jiǎn)潔的特征。圖片運(yùn)用：配合文字及色塊，以生動(dòng)的動(dòng)畫效果展示項(xiàng)目的不同方面。結(jié)構(gòu)：運(yùn)用統(tǒng)一的通用信息規(guī)劃，使網(wǎng)站始終保持一種方便快捷、清晰明確的瀏覽路線。核心知識(shí)3.網(wǎng)站的頁(yè)面創(chuàng)意設(shè)計(jì)網(wǎng)站頁(yè)面是公司對(duì)外宣傳的關(guān)鍵部分，是樹立企業(yè)形象、宣揚(yáng)企業(yè)文化、展示企業(yè)實(shí)力的必要途徑。（１）首頁(yè)設(shè)計(jì)首頁(yè)是公司整體形象的濃縮，要進(jìn)行創(chuàng)意設(shè)計(jì)，不僅要簡(jiǎn)潔、美觀、大氣、國(guó)際化，還要體現(xiàn)項(xiàng)目的形象、實(shí)力。在體現(xiàn)公司品牌效應(yīng)的基礎(chǔ)上，實(shí)現(xiàn)整體和個(gè)體的有機(jī)結(jié)合。①設(shè)置一個(gè)房產(chǎn)樣式的Logo，體現(xiàn)公司的性質(zhì)。通過(guò)大的橫幅切換banner，展示項(xiàng)目特色、項(xiàng)目理念和質(zhì)量方針，總體大氣、新穎，充分展示企業(yè)形象。②通過(guò)“項(xiàng)目展示”的無(wú)縫滾動(dòng)實(shí)現(xiàn)多角度展示該房產(chǎn)項(xiàng)目，從而讓客戶從方方面面了解該房產(chǎn)項(xiàng)目。核心知識(shí)（2）內(nèi)頁(yè)設(shè)計(jì)內(nèi)頁(yè)設(shè)計(jì)追求在風(fēng)格上與首頁(yè)統(tǒng)一，但又要因內(nèi)容不同而各有特色，不同的功能頁(yè)面又將體現(xiàn)出和功能內(nèi)容相符的個(gè)性風(fēng)格。內(nèi)頁(yè)包括以下幾個(gè)方面。①項(xiàng)目介紹：項(xiàng)目的地理位置、項(xiàng)目的建筑規(guī)模、項(xiàng)目的環(huán)境等。②戶型展示：立體排列展示項(xiàng)目中所有戶型設(shè)計(jì)。③購(gòu)房指南：指導(dǎo)客戶如何分期貸款購(gòu)房、如何運(yùn)用公積金貸款購(gòu)房、如何選購(gòu)新房等，提供購(gòu)房指導(dǎo)方案。④新聞中心：介紹企業(yè)內(nèi)部動(dòng)態(tài)信息、企業(yè)新聞、房產(chǎn)行業(yè)信息等。⑤在線咨詢：獲取客戶的反饋信息以便及時(shí)跟進(jìn)。⑥聯(lián)系我們（框架式的圖文展現(xiàn)）：陳列公司名稱、地址、聯(lián)系人、電話、傳真、電子郵箱、網(wǎng)址及地圖路線等。⑦團(tuán)購(gòu)活動(dòng)：企業(yè)定期開展的團(tuán)購(gòu)活動(dòng)。核心知識(shí)三、收集素材“盛和·景園”房產(chǎn)項(xiàng)目部為本網(wǎng)站的制作提供相應(yīng)的素材，包括項(xiàng)目的簡(jiǎn)介、項(xiàng)目的最新信息、項(xiàng)目參與的活動(dòng)、項(xiàng)目的實(shí)景展示圖等。從網(wǎng)絡(luò)中搜集家、樓宇和天空的圖片。模塊二

網(wǎng)頁(yè)的首頁(yè)界面設(shè)計(jì)能力目標(biāo)掌握網(wǎng)頁(yè)草圖的設(shè)計(jì)方法。掌握利用PhotoshopCS6進(jìn)行網(wǎng)站界面布局設(shè)計(jì)的操作技能。任務(wù)目標(biāo)利用搜集到的素材，使用PhotoshopCS6軟件完成如圖3.1所示的“盛和·景園”房產(chǎn)網(wǎng)站網(wǎng)頁(yè)界面設(shè)計(jì)。頁(yè)面尺寸為980×1200px。圖3.1任務(wù)解析網(wǎng)站的框架結(jié)構(gòu)是網(wǎng)頁(yè)的骨骼，是為了能讓瀏覽者更清晰、更便捷地了解網(wǎng)站所要傳達(dá)的信息內(nèi)容，由此將網(wǎng)頁(yè)元素按照一定的布局樣式進(jìn)行排列。本網(wǎng)站采用“國(guó)”字形布局，把客戶最關(guān)心的網(wǎng)頁(yè)中的主要信息置于中間，如圖3.2所示。圖3.2一、頁(yè)面整體尺寸及框架結(jié)構(gòu)設(shè)計(jì)核心知識(shí):在繪制網(wǎng)頁(yè)界面內(nèi)容之前，首先需要對(duì)整個(gè)網(wǎng)頁(yè)布局做出規(guī)劃，此時(shí)要用到“標(biāo)尺”與“參考線”。首先，開啟標(biāo)尺功能，選擇“視圖”→“標(biāo)尺”命令（或者按組合鍵Ctrl+R）。打開標(biāo)尺后就能夠設(shè)置參考線了，設(shè)置參考線的方法非常簡(jiǎn)單，只需用鼠標(biāo)在標(biāo)尺上單擊并保持按住，再拖移到工作區(qū)即可，如圖3.3所示。圖3.3操作過(guò)程:1.文檔新建啟動(dòng)PhotoshopCS6選擇“文件”→“新建”命令（組合鍵Ctrl+N），新建Photoshop空白文檔，文檔名稱為“盛和·景園”，畫布大小為980×1200px，分辨率為72像素/英寸，背景顏色為白色（#FFFFFF），如圖3.4所示。2.框架結(jié)構(gòu)設(shè)計(jì)打開“視圖”菜單，勾選“標(biāo)尺”項(xiàng)（組合鍵Ctrl+R），從“標(biāo)尺”中拖出參考線，勾勒出“盛和·景園”網(wǎng)頁(yè)的頁(yè)面大致結(jié)構(gòu)，如圖3.5所示。圖3.4圖3.5一、頁(yè)面整體尺寸及框架結(jié)構(gòu)設(shè)計(jì)核心知識(shí):1.鋼筆工具（1）繪制直線段（2）繪制曲線段（3）編輯路徑（4）路徑選擇和直接選擇工具2.矩形工具矩形”工具

用于繪制矩形或正方形。3.圓角矩形圓角矩形工具用于繪制具有平滑邊緣的矩形。4.自定形狀工具自定形狀工具用于繪制自定義的圖形。5.文字工具應(yīng)用文字工具輸入文字并使用字符控制面板對(duì)文字進(jìn)行調(diào)整。二、頁(yè)面頂端區(qū)域的設(shè)計(jì)操作過(guò)程：1.Logo的設(shè)計(jì)“盛和·景園”網(wǎng)站的主題是為客戶全方位展示該房產(chǎn)項(xiàng)目，為客戶的選房、購(gòu)房提供便捷的服務(wù)。因此，網(wǎng)站Logo設(shè)計(jì)為房子圖案和“盛和·景園”文字的組合，色彩上使用網(wǎng)站的主色調(diào)紅色和黑色，綠色作為點(diǎn)睛色，效果如圖3.22所示。圖3.22二、頁(yè)面頂端區(qū)域的設(shè)計(jì)2.垂詢電話的設(shè)計(jì)為了讓客戶方便地查找到“盛和·景園”房產(chǎn)項(xiàng)目的聯(lián)系方式，故將聯(lián)系電話置于“頂部”區(qū)域的中間位置，并且選用醒目的“紅色”（RGB的參考值分別為222，29，26）電話作為進(jìn)一步的提示，效果如圖3.35所示。圖3.353.次導(dǎo)航的設(shè)計(jì)次導(dǎo)航提供更多便捷的鏈接操作。如圖3.36所示圖3.36二、頁(yè)面頂端區(qū)域的設(shè)計(jì)在網(wǎng)站中要對(duì)“盛和·景園”房產(chǎn)項(xiàng)目網(wǎng)站進(jìn)行全方位、多角度的展示，因而網(wǎng)站導(dǎo)航包括：首頁(yè)、項(xiàng)目介紹、戶型展示、購(gòu)房指南、項(xiàng)目動(dòng)態(tài)、團(tuán)購(gòu)活動(dòng)、在線咨詢、聯(lián)系我們、友情鏈接。最終效果如圖3.56所示。三、頁(yè)面導(dǎo)航區(qū)域的設(shè)計(jì)圖3.56核心知識(shí):（1）對(duì)齊按鈕對(duì)齊按鈕：“頂對(duì)齊”按鈕、“垂直居中對(duì)齊”按鈕

、“底對(duì)齊”按鈕

、“左對(duì)齊”按鈕

、“水平居中對(duì)齊”按鈕

、“右對(duì)齊”按鈕

，可在圖像中對(duì)齊選區(qū)或圖層。分布按鈕：“按頂分布”按鈕

、“垂直居中分布”按鈕

、“按底分布”按鈕

、“按左分布”按鈕

、“水平居中分布”按鈕

、“按右分布”按鈕

，可以在圖像中分布圖層。（2）移動(dòng)圖像選擇“移動(dòng)”工具，用鼠標(biāo)選中圖像，并將其拖曳至合適的位置；打開一張圖像，將圖像向另外一張圖像中拖曳，鼠標(biāo)光標(biāo)變?yōu)閳D標(biāo)，松開鼠標(biāo)，圖像移動(dòng)到另外一張圖像中。盛和·景園”房產(chǎn)項(xiàng)目是要帶給客戶“宜居天下，綠色生態(tài)；以人為本，人與自然完美融合”的居住環(huán)境。因此，網(wǎng)站Banenr設(shè)計(jì)采用藍(lán)天白云、綠色草地、和平鴿、父女的玩耍等為設(shè)計(jì)元素，構(gòu)建一幅宜居的精美畫面。效果如圖3.74所示。四、頁(yè)面Banner區(qū)域的設(shè)計(jì)圖3.74四、頁(yè)面Banner區(qū)域的設(shè)計(jì)核心知識(shí)：1.圖層蒙版圖層蒙版可以理解為在當(dāng)前圖層上面覆蓋一層玻璃片，這種玻璃片有：透明的、半透明的、完全不透明的。然后用各種繪圖工具在蒙版上（即玻璃片上）涂色（只能涂黑白灰色），涂黑色的地方蒙版變?yōu)椴煌该鞯模床灰姰?dāng)前圖層的圖像。涂白色則使涂色部分變?yōu)橥该鞯模煽吹疆?dāng)前圖層上的圖像，涂灰色使蒙版變?yōu)榘胪该鳌?.漸變工具選擇“漸變”工具

，漸變工具屬性欄如圖3.75所示。3.套索工具可以應(yīng)用套索工具、多邊形套索、磁性套索工具繪制不規(guī)則的選區(qū)。圖3.75五、頁(yè)面主體內(nèi)容區(qū)域的設(shè)計(jì)1.左側(cè)區(qū)域設(shè)計(jì)（1）“項(xiàng)目展示”區(qū)域設(shè)計(jì)“項(xiàng)目展示”區(qū)域主要是方便客戶查看“盛和·景園”房產(chǎn)項(xiàng)目的戶型圖、效果圖、配套設(shè)施、交通、實(shí)景展示等內(nèi)容，最終效果如圖3.97所示。圖3.97五、頁(yè)面主體內(nèi)容區(qū)域的設(shè)計(jì)（2）“聯(lián)系我們”區(qū)域設(shè)計(jì)為了讓客戶方便地同房產(chǎn)項(xiàng)目客服人員進(jìn)行交流，故將客服的聯(lián)系方式放在“聯(lián)系我們”區(qū)域，最終效果如圖3.117所示。圖3.117五、頁(yè)面主體內(nèi)容區(qū)域的設(shè)計(jì)2.中間區(qū)域的設(shè)計(jì)（1）“項(xiàng)目介紹”區(qū)域設(shè)計(jì)“項(xiàng)目介紹”區(qū)域包括該房產(chǎn)項(xiàng)目的地理位置、項(xiàng)目構(gòu)成等內(nèi)容，讓客戶對(duì)該房產(chǎn)項(xiàng)目有一個(gè)全面的了解。如圖3.118所示圖3.118五、頁(yè)面主體內(nèi)容區(qū)域的設(shè)計(jì)2.中間區(qū)域的設(shè)計(jì)（2）“項(xiàng)目動(dòng)態(tài)”區(qū)域設(shè)計(jì)“項(xiàng)目動(dòng)態(tài)”區(qū)域包括該房產(chǎn)項(xiàng)目相關(guān)信息，讓客戶對(duì)該房產(chǎn)項(xiàng)目“項(xiàng)目信息”有一個(gè)基本的了解。如圖3.119所示：圖3.119五、頁(yè)面主體內(nèi)容區(qū)域的設(shè)計(jì)3.右側(cè)區(qū)域設(shè)計(jì)“右側(cè)區(qū)域”的樣式設(shè)計(jì)與“中間區(qū)域”的設(shè)計(jì)基本相同，故其制作方法可參考“中間區(qū)域”，最終效果如圖3.147所示。圖3.147五、頁(yè)面主體內(nèi)容區(qū)域的設(shè)計(jì)4.項(xiàng)目展示區(qū)域設(shè)計(jì)“項(xiàng)目展示區(qū)域”的樣式設(shè)計(jì)與“中間區(qū)域”的設(shè)計(jì)基本相同，故其制作參考“中間區(qū)域”，最終效果如圖3.148所示。圖3.148六、頁(yè)面頁(yè)腳區(qū)域的設(shè)計(jì)頁(yè)腳在網(wǎng)頁(yè)的底部，主要包括一些輔助信息。本網(wǎng)站的頁(yè)腳區(qū)域主要包括網(wǎng)站的版權(quán)信息、備案信息、聯(lián)系方式等內(nèi)容。如圖3.150所示：圖3.150七、內(nèi)頁(yè)設(shè)計(jì)網(wǎng)站的風(fēng)格在整體上應(yīng)該統(tǒng)一，因此，內(nèi)頁(yè)的設(shè)計(jì)與首頁(yè)的設(shè)計(jì)基本一致，操作步驟不再贅述，最終效果如圖3.151所示。圖3.151任務(wù)四

“盛和·景園”房產(chǎn)網(wǎng)站的制作模塊一

網(wǎng)站制作基礎(chǔ)通過(guò)本模塊的學(xué)習(xí)，學(xué)生應(yīng)了解Web標(biāo)準(zhǔn)，掌握XHTML標(biāo)記語(yǔ)言及DIV+CSS網(wǎng)頁(yè)布局技術(shù)。能力目標(biāo)了解Web標(biāo)準(zhǔn)掌握XHTML標(biāo)記語(yǔ)言掌握DIV+CSS網(wǎng)頁(yè)布局技術(shù)了解ECMAScript腳本語(yǔ)言核心知識(shí)一、網(wǎng)頁(yè)制作基礎(chǔ)隨著科技的發(fā)展，在越來(lái)越開放的環(huán)境中，各個(gè)相互關(guān)聯(lián)的事物要能協(xié)同工作，就必須通過(guò)遵守一些共同的標(biāo)準(zhǔn)來(lái)工作。網(wǎng)頁(yè)相關(guān)的技術(shù)走入實(shí)用階段僅短短十幾年的時(shí)間，網(wǎng)頁(yè)的制作也需要不同分工，相互之間需要協(xié)同工作，因而必須遵守一定的標(biāo)準(zhǔn)，而且網(wǎng)絡(luò)全球化也要求網(wǎng)頁(yè)制作必須參照同一標(biāo)準(zhǔn)，因此，“Web標(biāo)準(zhǔn)”這一理念被提出且被廣泛接受。1.Web標(biāo)準(zhǔn)Web標(biāo)準(zhǔn)即網(wǎng)站標(biāo)準(zhǔn)，它不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁(yè)主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。核心知識(shí)其中，各級(jí)標(biāo)題、正文段落、各種列表結(jié)構(gòu)等，構(gòu)成了網(wǎng)頁(yè)的“結(jié)構(gòu)”，即網(wǎng)頁(yè)的內(nèi)容；每種組成部分的字號(hào)、字體和顏色等屬性就構(gòu)成了網(wǎng)頁(yè)的“表現(xiàn)”，即網(wǎng)頁(yè)的樣式；網(wǎng)頁(yè)和傳統(tǒng)媒體不同的一點(diǎn)是，它是可以隨時(shí)變化的，而且可以和讀者互動(dòng)，因此如何變化以及如何交互，就稱為網(wǎng)頁(yè)的“行為”，即網(wǎng)頁(yè)的動(dòng)作。對(duì)應(yīng)的網(wǎng)頁(yè)標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言主要包括CSS，行為標(biāo)準(zhǔn)主要包括ECMAScript等。2.網(wǎng)頁(yè)與HTML、XHTML、XML網(wǎng)頁(yè)文件是用一種被稱為HTML的標(biāo)記語(yǔ)言書寫的文本文件，它可以在瀏覽器中按照設(shè)計(jì)者所設(shè)計(jì)的樣式顯示內(nèi)容，網(wǎng)頁(yè)文件也經(jīng)常被稱為HTML文件。文本鏈接標(biāo)記語(yǔ)言（HyperTextMarkupLanguage，HTML）。它是在互聯(lián)網(wǎng)發(fā)布超文本文件（通常所說(shuō)的網(wǎng)頁(yè)）的通用語(yǔ)言。核心知識(shí)（1）HTML的基本結(jié)構(gòu)一個(gè)HTML文檔是由一系列的元素和標(biāo)記組成的。元素名不區(qū)分大小寫，HTML用標(biāo)記來(lái)規(guī)定元素的屬性和它在文件中的位置，HTML超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對(duì)這個(gè)文檔進(jìn)行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。下面是一個(gè)最基本的HTML文檔的代碼：1-1.html。<html>----------------------------------------開始標(biāo)記<head>--------------------------------------頭部標(biāo)記<title>文檔的標(biāo)題</title></head>--------------------------------------<BODY>----------------------------------------文件主體<h1>歡迎光臨我的主頁(yè)</h1><br><hr><fontsize=”12”color=”green”>|這是我第一次做主頁(yè)|</font>|</body></html>---------------------------------------結(jié)尾標(biāo)記核心知識(shí)</html>在文檔的最外層，文檔中的所有文本和html標(biāo)記都包含在其中，它表示該文檔是以超文本標(biāo)識(shí)語(yǔ)言（html）編寫的。</head>是html文檔的頭部標(biāo)記，在瀏覽器窗口中，頭部信息是不被顯示在正文中的，在此標(biāo)記中可以插入其他標(biāo)記，用以說(shuō)明文件的標(biāo)題和整個(gè)文件的一些公共屬性。該標(biāo)記可以省略。</title>是嵌套在<head>頭部標(biāo)記中的，標(biāo)記之間的文本是文檔標(biāo)題，它被顯示在瀏覽器窗口的標(biāo)題欄。該標(biāo)記可以省略。</body>標(biāo)記一般不能省略，標(biāo)記之間的文本是正文，是在瀏覽器中要顯示的頁(yè)面內(nèi)容。核心知識(shí)（2）文字版面的編輯①換行標(biāo)記<br>換行標(biāo)記是個(gè)單標(biāo)記，也叫空標(biāo)記，不包含任何內(nèi)容，在html文件中的任何位置只要使用了<br>標(biāo)記，該標(biāo)記之后的內(nèi)容將顯示在下一行。請(qǐng)看下面的例子：<html><body>無(wú)換行標(biāo)記：白日依山盡，黃河入海流。換行標(biāo)記：白日依山盡，<br>黃河入海流。</body></html>核心知識(shí)②換段落標(biāo)記<p>及屬性由<p>標(biāo)記所標(biāo)識(shí)的文字，表明是同一個(gè)段落的文字。兩個(gè)段落間的間距等于連續(xù)加了兩個(gè)換行符，也就是要隔一行空白行。格式：

其中，align是<p>標(biāo)記的屬性，屬性有三個(gè)參數(shù)：left、center、right。這三個(gè)參數(shù)設(shè)置段落文字的左、中、右位置的對(duì)齊方式。<P><Palign=參數(shù)>核心知識(shí)③水平分隔線標(biāo)記<hr><hr>標(biāo)記是單獨(dú)使用的標(biāo)記，是水平線標(biāo)記。通過(guò)設(shè)置<hr>標(biāo)記的屬性值，可以控制水平分隔線的樣式。<hr>標(biāo)記的屬性如表4-1所示。表4-1<hr>標(biāo)記的屬性實(shí)例：核心知識(shí)<html><head><title>測(cè)試水平分隔線標(biāo)記</title></head><body>

春曉<hrsize="1"width="20%"align="center"noshadecolor="red">

春眠不覺(jué)曉，<br>

處處聞啼鳥。<br>

夜來(lái)風(fēng)雨聲，<br>

花落知多少？</body></html>④特殊字符在HTML文檔中，有些字符沒(méi)辦法直接顯示出來(lái)，例如?.使用特殊字符可以將鍵盤上沒(méi)有的字符表達(dá)出來(lái)，而有些HTML文檔的特殊字符在鍵盤上雖然可以得到，但瀏覽器在解析HTML文當(dāng)時(shí)會(huì)報(bào)錯(cuò)，例如"<"等，為防止代碼混淆，必須用一些代碼來(lái)表示它們。表4-2所示為常見特殊字符及其代碼。表4-2HTML幾種常見特殊字符及其代碼核心知識(shí)實(shí)例：<html><head><title>特殊字符</title></head><body><center/><這是我的網(wǎng)頁(yè)書><p></p>Copyright?2008中國(guó)書籍</body></html>核心知識(shí)⑤標(biāo)題文字標(biāo)記<hn><hn>標(biāo)記用于設(shè)置網(wǎng)頁(yè)中的標(biāo)題文字，被設(shè)置的文字將以黑體或粗體的方式顯示在網(wǎng)頁(yè)中。核心知識(shí)<hn>標(biāo)記是成對(duì)出現(xiàn)的，<hn>標(biāo)記共分為六級(jí)，在<h1>...</h1>之間的文字就是第一級(jí)標(biāo)題，是最大最粗的標(biāo)題；<h6>...</h6>之間的文字是最后一級(jí)，是最小最細(xì)的標(biāo)題文字。（3）建立列表

在html頁(yè)面中，合理的使用列表標(biāo)記可以起到提綱和格式排序文件的作用。列表分為兩類，一是無(wú)序列表，一是有序列表，無(wú)序列表就是項(xiàng)目各條列間并無(wú)順序關(guān)系，純粹只是利用條列來(lái)呈現(xiàn)資料而已，此種無(wú)序標(biāo)記，在各條列前面均有一符號(hào)以示區(qū)隔。而有序條列就是指各條列之間是有順序的，比如從1、2、3…一直延伸下去。①無(wú)序列表<ul>無(wú)序列表使用的一對(duì)標(biāo)記是<ul></ul>，無(wú)序列表指沒(méi)有進(jìn)行編號(hào)的列表，每一個(gè)列表項(xiàng)前使用<li>。<li>的屬性type有三個(gè)選項(xiàng)，這三個(gè)選項(xiàng)都必須小寫。核心知識(shí)disc實(shí)心圓circle空心圓square小方塊<ul>如果不使用其項(xiàng)目<li>的屬性值，即默認(rèn)情況下的<ul>會(huì)加“實(shí)心園”。實(shí)例：核心知識(shí)<html><head><title>無(wú)序列表</title></head><body><ul><li>默認(rèn)的無(wú)序列表加"實(shí)心圓"<litype="square">無(wú)序列表square加方塊<litype="circle">無(wú)序列表circle加空心圓</ul></body></html>②有序列表<ol>有序列表和無(wú)序列表的使用格式基本相同，它使用標(biāo)記<ol></ol>，每一個(gè)列表項(xiàng)前使用<li>。<ol>列表的結(jié)果是帶有前后順序之分的編號(hào)。如果插入和刪除一個(gè)列表項(xiàng)，編號(hào)會(huì)自動(dòng)調(diào)整。順序編號(hào)的設(shè)置是由<ol>的兩個(gè)屬性type和start來(lái)完成的。start=編號(hào)開始的數(shù)字，如start=2則編號(hào)從2開始，如果從1開始可以省略，或是在<li>標(biāo)記中設(shè)定value＝"n"改變列表行項(xiàng)目的特定編號(hào)，例如<livalue="7">。type=用于編號(hào)的數(shù)字、字母等的類型，如type=a，則編號(hào)用英文字母。為了使用這些屬性，把它們放在<ol>或<li>的初始標(biāo)記中。有序列表type的屬性：type=1表示列表項(xiàng)目用數(shù)字標(biāo)號(hào)（1，2，3...）type=A表示列表項(xiàng)目用大寫字母標(biāo)號(hào)（A，B，C...）type=a表示列表項(xiàng)目用小寫字母標(biāo)號(hào)（a，b，c...）type=I表示列表項(xiàng)目用大寫羅馬數(shù)字標(biāo)號(hào)（Ⅰ，Ⅱ，Ⅲ...）type=i表示列表項(xiàng)目用小寫羅馬數(shù)字標(biāo)號(hào)（i，ii，iii...）核心知識(shí)實(shí)例：核心知識(shí)<html><body><ol><li>默認(rèn)的有序列表<li>默認(rèn)的有序列表</ol><oltype="a"start="5"><li>第1項(xiàng)<li>第2項(xiàng)<livalue="20">第4項(xiàng)</ol></body></html>自定義列表常用于對(duì)術(shù)語(yǔ)或名詞進(jìn)行解釋和描述，與無(wú)序和有序列表不同，定義列表的列表項(xiàng)前沒(méi)有任何項(xiàng)目符號(hào)。<dl></dl>標(biāo)記用于指定定義列表，<dt></dt>和<dd></dd>并列嵌套于<dl></dl>中，其中，<dt></dt>標(biāo)記用于指定術(shù)語(yǔ)名詞，<dd></dd>標(biāo)記用于對(duì)名詞進(jìn)行解釋和描述。一對(duì)<dt></dt>可以對(duì)應(yīng)多對(duì)<dd></dd>，即可以對(duì)一個(gè)名詞進(jìn)行多項(xiàng)解釋。實(shí)例：核心知識(shí)<dl><dt>計(jì)算機(jī)</dt><dd>用于大型運(yùn)算的機(jī)器</dd><dd>可以網(wǎng)上沖浪</dd>

<dd>工作效率非常高</dd></dl>1.圖層蒙版圖層蒙版可以理解為在當(dāng)前圖層上面覆蓋一層玻璃片，這種玻璃片有：透明的、半透明的、完全不透明的。然后用各種繪圖工具在蒙版上（即玻璃片上）涂色（只能涂黑白灰色），涂黑色的地方蒙版變?yōu)椴煌该鞯?，看不見?dāng)前圖層的圖像。涂白色則使涂色部分變?yōu)橥该鞯?，可看到?dāng)前圖層上的圖像，涂灰色使蒙版變?yōu)榘胪该鳌?.漸變工具選擇“漸變”工具

，漸變工具屬性欄如圖3.75所示。3.套索工具可以應(yīng)用套索工具、多邊形套索、磁性套索工具繪制不規(guī)則的選區(qū)。圖3.75核心知識(shí)（4）圖像的處理瀏覽器可以顯示的圖像格式有jpeg、bmp、gif、png。其中bmp文件存儲(chǔ)容量大，不提倡用，jpeg圖像支持?jǐn)?shù)百萬(wàn)種顏色，即使在傳輸過(guò)程中丟失數(shù)據(jù)，也不會(huì)在質(zhì)量上有明顯的不同，文件容量比gif大，gif圖像僅包括265種色彩，雖然質(zhì)量上沒(méi)有jpeg圖像高，但有文件容量小、下載速度最快、支持動(dòng)畫效果及背景色透明等特點(diǎn)。png圖像是網(wǎng)絡(luò)圖像中的通用格式，也是Fireworks軟件的基本格式。它用一種無(wú)損壓縮的方法，最多可支持32位顏色，但它不支持動(dòng)畫，如果沒(méi)有相應(yīng)的插件，有的瀏覽器可能不支持這種格式。因此使用圖像美化頁(yè)面可視情況而決定使用那種格式。網(wǎng)頁(yè)中插入圖片用單標(biāo)記<img>，如果要對(duì)插入的圖片進(jìn)行修飾時(shí)，還要配合其他屬性來(lái)完成。<IMG>的格式及一般屬性設(shè)定：<imgsrc="logo.gif"width=100height=100border=2align="top"alt="Logo">核心知識(shí)圖片標(biāo)記<img>的屬性：src：圖像的url的路徑alt：提示文字width：寬度，通常只設(shè)為圖片的真實(shí)大小以免失真，改變圖片大小最好用圖像工具h(yuǎn)eight：高度，通常只設(shè)為圖片的真實(shí)大小以免失真，改變圖片大小最好用圖像工具align：圖像和文字之間的排列屬性border：邊框核心知識(shí)（5）TABLE表格表格在網(wǎng)站應(yīng)用中非常廣泛，可以方便靈活的排版，很多動(dòng)態(tài)大型網(wǎng)站也都是借助表格排版的，表格可以把相互關(guān)聯(lián)的信息元素集中定位，使瀏覽頁(yè)面的人一目了然。所以說(shuō)要制作好網(wǎng)頁(yè)，就要學(xué)好表格。在html文檔中，表格是通過(guò)<table>，<th>，<tr>，<td>標(biāo)記來(lái)完成的，定義表格的基本語(yǔ)法如表4-3所示。表4-3表格標(biāo)記核心知識(shí)（6）網(wǎng)頁(yè)的動(dòng)態(tài)、多媒體效果在網(wǎng)頁(yè)的設(shè)計(jì)過(guò)程中，動(dòng)態(tài)效果的插入會(huì)使網(wǎng)頁(yè)更加生動(dòng)靈活、豐富多彩。①滾動(dòng)字幕<marquee><marquee>標(biāo)記可以實(shí)現(xiàn)元素在網(wǎng)頁(yè)中移動(dòng)的效果，以達(dá)到動(dòng)感十足的視覺(jué)效果。<marquee>標(biāo)記是一個(gè)成對(duì)的標(biāo)記。應(yīng)用格式為：<marquee>...</marquee><marquee>標(biāo)記有很多屬性，用來(lái)定義元素的移動(dòng)方式：align：指定對(duì)齊方式top、middle、bottomscroll：?jiǎn)蜗蜻\(yùn)動(dòng)slide：如幻燈片，一格格的，效果是文字一接觸左邊就停止alternate：左右往返運(yùn)動(dòng)核心知識(shí)bgcolor：設(shè)定文字卷動(dòng)范圍的背景顏色loop：設(shè)定文字卷動(dòng)次數(shù)，其值可以是正整數(shù)或infinite表示無(wú)限次，默認(rèn)為無(wú)限循環(huán)height：設(shè)定字幕高度width：設(shè)定字幕寬度scrollamount：指定每次移動(dòng)的速度，數(shù)值越大速度越快scrolldelay：文字每一次滾動(dòng)的停頓時(shí)間，單位是毫秒。時(shí)間越短滾動(dòng)越快hspace：指定字幕左右空白區(qū)域的大小vspace：指定字幕上下空白區(qū)域的大小direction：設(shè)定文字的卷動(dòng)方向，left表示向左，right表示向右，up表示往上滾動(dòng)behavior：指定移動(dòng)方式，scroll表示滾動(dòng)播出，slibe表示滾動(dòng)到一方后停止，alternate表示滾動(dòng)到一方后向相反方向滾動(dòng)核心知識(shí)實(shí)例：核心知識(shí)<html><body><center><fontface="字體2"size=6color="#ff0000">滾動(dòng)字幕</font><br><marquee>啦啦啦~~~我會(huì)跑了</marquee><p><marqueeheight="200"direction="up"hspace="200">啦啦啦~~~我會(huì)往上跑了<br>啦啦啦~~~我會(huì)往上跑了</marquee></p></center></body></html>②插入多媒體文件在網(wǎng)頁(yè)中可以用<embed>標(biāo)記將多媒體文件插入，比如可以插入音樂(lè)和視頻等。用瀏覽器可以播放的音樂(lè)格式有：MIDI音樂(lè)、WAV音樂(lè)、mp3、AIFF、AU格式等；視頻有avi、swf等。另外在利用網(wǎng)絡(luò)下載的各種音樂(lè)格式中，MP3是壓縮率最高、音質(zhì)最好的文件格式。但要說(shuō)明一點(diǎn)，雖然我們用代碼標(biāo)記插入了多媒體文件，但I(xiàn)E瀏覽器通常能自動(dòng)播放某些格式的聲音與影像，但具體能播放什么樣格式的文件，取決于所用計(jì)算機(jī)的類型以及瀏覽器的配置。瀏覽器僅僅能播放幾種文件格式，通常是調(diào)用稱為插件的內(nèi)置程序來(lái)播放的。是插件擴(kuò)展了瀏覽器的能力。有時(shí)，不得不分別下載每個(gè)瀏覽器的多媒體插件程序，比如使用下載AdobeFlashPlayer播放swf動(dòng)畫。<embed>標(biāo)記的使用格式：<EMBEDSRC="文件地址">核心知識(shí)常用屬性如下：SRC="FILENAME"：設(shè)定音樂(lè)文件的路徑AUTOSTART=TRUE/FALSE：是否要音樂(lè)文件傳送完就自動(dòng)播放，TRUE是要，F(xiàn)ALSE是不要，默認(rèn)為FALSELOOP=TRUE/FALSE：設(shè)定播放重復(fù)次數(shù)，LOOP=6表示重復(fù)6次，TRUE表示無(wú)限次播放，F(xiàn)ALSE表示播放一次即停止STARTIME="分:秒"：設(shè)定樂(lè)曲的開始播放時(shí)間，如20秒后播放寫為STARTIME=00:20VOLUME=0-100：設(shè)定音量的大小。如果沒(méi)設(shè)定的話，就用系統(tǒng)的音量WIDTHHEIGHT：設(shè)定播放控件面板的大小HIDDEN=TRUE：隱藏播放控件面板CONTROLS=CONSOLE/SMALLCONSOLE：設(shè)定播放控件面板的樣子核心知識(shí)核心知識(shí)實(shí)例：<html><head><title>插入flash</title></head><bodybgcolor=maroon><h2align="CENTER">網(wǎng)頁(yè)中的多媒體</h2><hr><center><embedsrc="dh.swf"height="500"width="550"><!--插入flash--><embedsrc="dh.swf"height="500"width="550"wmode="transparent"><!--插入透明flash--></center></body></html>4.DIV+CSS網(wǎng)頁(yè)布局與使用表格布局方法相比，DIV+CSS布局方法具有結(jié)構(gòu)簡(jiǎn)潔、定位靈活、代碼效率高等優(yōu)點(diǎn)，因此該技術(shù)在實(shí)際網(wǎng)站設(shè)計(jì)制作中得到了越來(lái)越多的應(yīng)用。網(wǎng)頁(yè)中的元素都占據(jù)一定的空間，除了元素內(nèi)容之外還包括元素周圍的空間，一般把元素和它周圍空間所形成的矩形區(qū)域稱為盒子。從布局的角度看，網(wǎng)頁(yè)是由很多盒子組成的，根據(jù)需要將諸多盒子在網(wǎng)頁(yè)中進(jìn)行排列和分布，就形成了網(wǎng)頁(yè)布局。（1）盒子模型盒子模型通過(guò)定義模型結(jié)構(gòu)，描述網(wǎng)頁(yè)元素的顯示方式和元素之間的相互關(guān)系，確定網(wǎng)頁(yè)元素在網(wǎng)頁(yè)布局中的空間和位置。模型的結(jié)構(gòu)由4個(gè)部分組成：content（內(nèi)容）、padding（內(nèi)邊距）、border（邊框）和margin（外邊距）。核心知識(shí)核心知識(shí)在盒子模型中，元素內(nèi)容被包含在邊框中，內(nèi)容與邊框之間的區(qū)域稱為內(nèi)邊距，邊框向外伸展的區(qū)域稱為外邊距。因此一個(gè)盒子模型實(shí)際占有的空間為：盒子的寬度=左外邊距+左邊框+左內(nèi)邊距+內(nèi)容寬度+右內(nèi)邊距+右邊框+右外邊距；盒子的高度=上外邊距+上邊框+上內(nèi)邊距+內(nèi)容高度+下內(nèi)邊距+下邊框+下外邊距，如圖4.1所示。

圖4.1核心知識(shí)（2）盒子屬性 網(wǎng)頁(yè)元素大小是基本屬性，確定了元素內(nèi)容的矩形區(qū)域，由width屬性和height屬性決定，其單位可以是絕對(duì)單位，如像素，也可以是相對(duì)單位，如百分比等。為方便對(duì)網(wǎng)頁(yè)元素區(qū)域的控制，將盒子模型的內(nèi)邊距、邊框和外邊距，按top、bottom、left、right的4個(gè)方向，分別進(jìn)行定義和設(shè)置，如圖4.2所示。

圖4.2核心知識(shí)（3）DIVdiv是一個(gè)塊狀容器類標(biāo)簽，在<div>和</div>之間可以容納各種XHTML元素，同時(shí)也構(gòu)成一個(gè)獨(dú)立的矩形區(qū)域。在網(wǎng)頁(yè)中插入若干個(gè)div標(biāo)簽，可以將網(wǎng)頁(yè)分隔成若干個(gè)區(qū)域。（4）CSSCSS（CascadingStyleSheet）樣式稱為層疊樣式表，也稱級(jí)聯(lián)樣式表，用于設(shè)置網(wǎng)頁(yè)元素的格式或外觀。CSS樣式獨(dú)立于網(wǎng)頁(yè)設(shè)計(jì)元素，實(shí)現(xiàn)了內(nèi)容與表現(xiàn)形式的相互分離，成為網(wǎng)頁(yè)設(shè)計(jì)技術(shù)的重要組成部分。核心知識(shí)①CSS基本語(yǔ)法：CSS的語(yǔ)法結(jié)構(gòu)僅由3部分組成，分別為選擇符、樣式屬性和值。語(yǔ)法格式：選擇符{樣式屬性：取值；……}選擇符（Selector）：指這組樣式編碼所要針對(duì)的對(duì)象。屬性（Property）：樣式控制的核心，提供豐富的樣式屬性。值（Value）：有兩種，一種指定范圍的值；另一種為數(shù)值，如圖4.3所示。

圖4.3核心知識(shí)②CSS的4種應(yīng)用。a．鏈接外部樣式表：代碼寫在一個(gè)獨(dú)立文件中，由網(wǎng)頁(yè)進(jìn)行調(diào)用，多個(gè)網(wǎng)頁(yè)可同時(shí)共用。格式：<head><linkhref="style.css"rel="stylesheet"type="text/css"/></head>

b．導(dǎo)入外部樣式表：在內(nèi)部樣式表的<style>里導(dǎo)入一個(gè)外部樣式表，導(dǎo)入時(shí)用@import。格式：

<head><styletype="text/css">@importurl("Sstyle.css");</style></head>核心知識(shí)c．內(nèi)部樣式表：內(nèi)部樣式表與內(nèi)嵌樣式表的相似之處在于，都編寫在頁(yè)面中。不同的是內(nèi)部樣式表可統(tǒng)一在一個(gè)固定位置。格式：<head><styletype="text/css">body{background-color:#F00;}</style></head>d．內(nèi)嵌樣式表：內(nèi)嵌樣式表是混合在HTML標(biāo)記里使用，對(duì)某個(gè)元素單獨(dú)定義樣式。格式：<tdstyle="background:#009"> </td>核心知識(shí)5.瀏覽器兼容性目前，常使用的瀏覽器有IE、火狐（Firefox）、谷歌瀏覽器（GoogleChrome）等?；谀承┮蛩?，這些瀏覽器不能完全采用統(tǒng)一的Web標(biāo)準(zhǔn)，或者說(shuō)不同的瀏覽器對(duì)同一個(gè)CSS樣式有不同的解析，這就導(dǎo)致了同樣的頁(yè)面在不同的瀏覽器下顯示的效果可能不同。IE瀏覽器的全稱是InternetExplorer，由微軟公司推出，直接綁定在Windows操作系統(tǒng)中。IE有6.0、7.0、8.0、9.0、10.0、11.0等版本，目前最新的是11.0。但是，由于各種原因，一些用戶仍然在使用一些低版本的瀏覽器，如IE6.0、IE7.0等，所以在制作網(wǎng)頁(yè)時(shí)，低版本一般也是需要兼容的。本書將使用“IETester”來(lái)模擬IE瀏覽器的各個(gè)版本（IETester可以自行從網(wǎng)上下載安裝）。對(duì)于其他一些瀏覽器，如360瀏覽器、搜狗瀏覽器、QQ瀏覽器等大都是基于IE內(nèi)核的，只要IE瀏覽器兼容，這些基于IE內(nèi)核的瀏覽器也都沒(méi)有問(wèn)題。核心知識(shí)MozillaFirefox，中文通常稱為“火狐”，是一個(gè)開源網(wǎng)頁(yè)瀏覽器，使用Gecko引擎，可以在多種操作系統(tǒng)如Windows、Mac和Linux上運(yùn)行。Firebug是火狐瀏覽器下的一款開發(fā)插件，屬于火狐強(qiáng)力推薦的插件之一，它集HTML查看和編輯、JavaScript控制臺(tái)、網(wǎng)絡(luò)狀況監(jiān)視器于一體，是開發(fā)HTML、CSS、JavaScript等的得力助手。實(shí)際工作中，調(diào)試網(wǎng)頁(yè)的兼容性問(wèn)題主要依靠Firebug插件，初學(xué)者可在選擇火狐瀏覽器菜單欄中的“工具”|“附加組件”命令下載Firebug插件，安裝完成后即可直接調(diào)出Firebug界面，如圖4.4所示。圖4.4核心知識(shí)GoogleChrome，又稱谷歌瀏覽器，是由Google（谷歌）公司開發(fā)的開放原始碼的網(wǎng)頁(yè)瀏覽器。該瀏覽器基于其他開放源代碼軟件編寫，包括WebKit和Mozilla，目標(biāo)是提升穩(wěn)定性、速度和安全性。IE、火狐和谷歌是目前互聯(lián)網(wǎng)的三大主流瀏覽器，其他常用的瀏覽器還有蘋果的Safari瀏覽器和歐朋瀏覽器等。對(duì)于一般的網(wǎng)站，只要兼容IE瀏覽器、火狐瀏覽器和谷歌瀏覽器，就能滿足絕大多數(shù)用戶的需求。模塊二

“盛和·景園”房產(chǎn)網(wǎng)站的制作方法任務(wù)目標(biāo)通過(guò)本模塊的學(xué)習(xí)，學(xué)生應(yīng)掌握站點(diǎn)的創(chuàng)建、網(wǎng)頁(yè)的布局規(guī)劃與切圖，能利用XHTML代碼和CSS樣式代碼完成網(wǎng)頁(yè)的布局。了解什么是站點(diǎn)掌握站點(diǎn)的創(chuàng)建掌握布局規(guī)劃與切圖掌握XHTML代碼的編寫掌握CSS樣式代碼的編寫能力目標(biāo)核心知識(shí)一、創(chuàng)建“盛和·景園”站點(diǎn)站點(diǎn)是存放一個(gè)網(wǎng)站所有文件的場(chǎng)所，由若干文件和文件夾組成。用戶在進(jìn)行網(wǎng)站開發(fā)時(shí)，首先要建立站點(diǎn)，以便于組織和管理網(wǎng)站的文件和文件夾。1.創(chuàng)建站點(diǎn)站點(diǎn)按站點(diǎn)文件夾所在位置分為兩類：本地站點(diǎn)和遠(yuǎn)程站點(diǎn)。本地站點(diǎn)是指本地計(jì)算機(jī)上的一組網(wǎng)站文件，遠(yuǎn)程站點(diǎn)是指遠(yuǎn)程Web服務(wù)器上的一組網(wǎng)站文件。用戶在進(jìn)行網(wǎng)站開發(fā)時(shí)，一般先建立本地站點(diǎn)，站點(diǎn)建立好后再上傳到Web服務(wù)器上。因而我們首先了解創(chuàng)建本地站點(diǎn)的操作步驟。①選擇菜單“站點(diǎn)”→“新建站點(diǎn)”，或選擇“管理站點(diǎn)”，在“管理站點(diǎn)”對(duì)話框中單擊“新建”按鈕，打開“站點(diǎn)設(shè)置對(duì)象”對(duì)話框。在左邊選擇“站點(diǎn)”選項(xiàng)，在右側(cè)輸入站點(diǎn)名稱和本地站點(diǎn)文件夾路徑，如圖4.49所示。核心知識(shí)圖4.49核心知識(shí)②單擊左側(cè)“高級(jí)設(shè)置”，展開其他選項(xiàng)，選擇“本地信息”選項(xiàng)，在右側(cè)設(shè)置相應(yīng)的屬性，如圖4.50所示。圖4.50核心知識(shí)2.創(chuàng)建站點(diǎn)內(nèi)的文件夾和文件創(chuàng)建站點(diǎn)后，需要分別新建文件和文件夾，操作步驟如下。

①在站點(diǎn)上直接單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“文件”，即可創(chuàng)建網(wǎng)頁(yè)文件，選擇“文件夾”即可創(chuàng)建站點(diǎn)文件夾。②對(duì)創(chuàng)建的文件或文件夾按需要進(jìn)行命名即可。3.管理站點(diǎn)建立站點(diǎn)后，可以對(duì)站點(diǎn)進(jìn)行打開、編輯、刪除等各種操作。（1）打開站點(diǎn)Dreamweaver中允許建立多個(gè)站點(diǎn)并可以通過(guò)切換打開需要編輯的站點(diǎn)，打開站點(diǎn)的操作步驟如下。①啟動(dòng)DreamweaverCS6。核心知識(shí)②選擇菜單“窗口”→“文件”，或按F8鍵打開“文件”面板，單擊左邊的下拉列表框，在打開的下拉列表中選擇要打開的站點(diǎn)，打開站點(diǎn)后，在“本地文件”下顯示該站點(diǎn)內(nèi)的所有文件和文件夾，如圖4.51所示。圖4.51核心知識(shí)（2）編輯站點(diǎn)編輯站點(diǎn)可以重新設(shè)置站點(diǎn)的屬性，操作步驟如下。①選擇菜單“站點(diǎn)”→“管理站點(diǎn)”，或在“文件”面板中單擊左邊的下拉列表框，在打開的下拉列表中選擇“管理站點(diǎn)”，在“管理站點(diǎn)”對(duì)話框中選擇要編輯的站點(diǎn)名稱，單擊“編輯”按鈕，如圖4.52所示。圖4.52核心知識(shí)（3）刪除站點(diǎn)在Dreamweaver中刪除站點(diǎn)，只是刪除了Dreamweaver同本地站點(diǎn)之間的關(guān)系。本地站點(diǎn)包括的文件和文件夾仍然會(huì)保存在硬盤中，并沒(méi)有被刪除，操作步驟如下。①選擇菜單“站點(diǎn)”→“管理站點(diǎn)”，或在“文件”面板中，單擊左邊的下拉列表框，在打開的下拉列表中選擇“管理站點(diǎn)”，在“管理站點(diǎn)”對(duì)話框中選擇要?jiǎng)h除的站點(diǎn)名稱，單擊“刪除”按鈕。②在打開的“Dreamweaver”對(duì)話框中單擊“是”按鈕即可。圖4.53操作過(guò)程①首先在本地磁盤E中創(chuàng)建站點(diǎn)文件夾“SH_Home”。②啟動(dòng)DreamweaverCS6。③選擇菜單“站點(diǎn)”→“新建站點(diǎn)”，或選擇“管理站點(diǎn)”，在“管理站點(diǎn)”對(duì)話框中單擊“新建”按鈕，打開“站點(diǎn)設(shè)置對(duì)象”對(duì)話框。在左邊選擇“站點(diǎn)”選項(xiàng)，在右側(cè)輸入站點(diǎn)名稱為“盛和·景園”，本地站點(diǎn)文件夾路徑為“E:\SH_Home\”，如圖4.54所示。④單擊左側(cè)“高級(jí)設(shè)置”，展開其他選項(xiàng)，選擇“本地信息”選項(xiàng)，在右側(cè)設(shè)置相應(yīng)的屬性，如圖4.55所示。⑤創(chuàng)建“盛和·景園”站點(diǎn)首頁(yè)文件：在站點(diǎn)上直接單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“新建文件”，如圖4.56所示，并將文件命名為“index.html”。⑥創(chuàng)建“盛和·景園”站點(diǎn)中的文件夾：在站點(diǎn)上直接單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“新建文件夾”，如圖4.57所示，依次建立“images”“styles”“scripts”“flash”文件夾。圖4.54圖4.55圖4.56圖4.57操作過(guò)程核心知識(shí)二、“盛和·景園”房產(chǎn)網(wǎng)站的制作過(guò)程切片的制作是指將整個(gè)網(wǎng)站的效果圖通過(guò)分割操作生成一個(gè)一個(gè)的小圖，以供后期網(wǎng)站頁(yè)面制作使用，這是將網(wǎng)站效果圖轉(zhuǎn)化為具體網(wǎng)頁(yè)文件必不可少的一步。對(duì)效果圖進(jìn)行切割，對(duì)圖片文件進(jìn)行優(yōu)化，選擇恰當(dāng)?shù)奈募愋捅４?，為后面的編碼與頁(yè)面成形提供必要的“原料”，圖片的優(yōu)化以較小的文件體積，照顧最大的視覺(jué)效果為宗旨。切片的制作主要是在設(shè)計(jì)軟件中完成的，例如Photoshop和Fireworks，大家可以根據(jù)自己的喜好選擇，因?yàn)槲覀冊(cè)谇懊嬷饕榻B的是Photoshop，故這里主要以Photoshop為例進(jìn)行介紹，具體操作如下。核心知識(shí)①按組合鍵Ctrl+R，打開標(biāo)尺，在標(biāo)尺上右擊，在打開的快捷菜單中選擇“像素”，如圖4.58所示。圖4.58核心知識(shí)②在Logo區(qū)域拖出參考線，如圖4.59所示。③選擇工具箱中“矩形選框”工具

，選擇Logo區(qū)域，如圖4.60所示。圖4.59圖4.60核心知識(shí)④按組合鍵Ctrl+Shift+C，執(zhí)行“合并拷貝”命令，再按組合鍵Ctrl+N，新建一空白文檔，如圖4.61所示，在空白文檔中按組合鍵Ctrl+C，執(zhí)行“粘貼”命令，如圖4.62所示。⑤按組合鍵Ctrl+S，執(zhí)行“保存”命令，將圖像保存為“images\logo.jpg”文件。圖4.61圖4.62操作過(guò)程1.案例效果圖分析頁(yè)面制作人員在切割圖片以及進(jìn)行XHTML、CSS編碼前，應(yīng)當(dāng)對(duì)頁(yè)面效果圖進(jìn)行詳細(xì)的觀察與分析，將頁(yè)面各元素的組成關(guān)系理順，在腦海中形成大致的輪廓。然后根據(jù)這樣的思路去切割圖片，編寫頁(yè)面的XHTML文件，最后應(yīng)用CSS樣式將XHTML頁(yè)面還原成與效果圖一致的網(wǎng)頁(yè)文件?！笆⒑汀ぞ皥@”房產(chǎn)網(wǎng)站首頁(yè)效果圖如圖4.63所示。圖4.63操作過(guò)程從圖4.60中可以看出，這是一個(gè)典型的“國(guó)”字形布局。頁(yè)面的頂部包括Logo、聯(lián)系方式、次導(dǎo)航，然后是通欄的導(dǎo)航和網(wǎng)站的Banner，緊接著是網(wǎng)頁(yè)的主體內(nèi)容部分，最下面是網(wǎng)頁(yè)頁(yè)腳。下面大致勾勒出網(wǎng)頁(yè)的布局結(jié)構(gòu)，如圖4.64所示。圖4.64操作過(guò)程2.布局規(guī)劃與切圖在拿到一份設(shè)計(jì)方案的效果圖后不要立即開始編碼，而是首先清理各元素之間的關(guān)系，然后思考以什么標(biāo)簽來(lái)組織所需表現(xiàn)的內(nèi)容。充分地分析與規(guī)劃是XHTML與CSS編碼的基礎(chǔ)，這個(gè)過(guò)程也是自己對(duì)頁(yè)面充分理解的過(guò)程，需要認(rèn)真準(zhǔn)備。（1）頁(yè)面布局規(guī)劃前面已經(jīng)分析出頁(yè)面的基本構(gòu)成，主要分為5個(gè)區(qū)域：網(wǎng)頁(yè)頂部、網(wǎng)頁(yè)導(dǎo)航、網(wǎng)頁(yè)Banner、網(wǎng)頁(yè)主體和網(wǎng)頁(yè)的頁(yè)腳，如圖4.65所示。操作過(guò)程圖4.65操作過(guò)程（2）切割與導(dǎo)出表現(xiàn)層圖片對(duì)效果圖進(jìn)行切割，選擇恰當(dāng)?shù)奈募愋捅４妫瑸楹竺娴木幋a與頁(yè)面成形提供必要的“原料”。網(wǎng)頁(yè)的切割以較小的文件體積，照顧最大的視覺(jué)效果為宗旨。首先對(duì)網(wǎng)站表現(xiàn)層的圖片進(jìn)行切割與優(yōu)化，然后再進(jìn)行網(wǎng)站內(nèi)容層圖片的切割。網(wǎng)站表現(xiàn)層的圖片主要用來(lái)表現(xiàn)網(wǎng)站的外觀，并非是網(wǎng)站的實(shí)際內(nèi)容，這部分圖片主要用于裝飾、劃分頁(yè)面的不同區(qū)域等，一般這類圖片由CSS引入到頁(yè)面中。如欄目標(biāo)題的背景、各種邊框和區(qū)域劃分背景圖片等。而內(nèi)容層的圖片是將作為頁(yè)面內(nèi)容插入網(wǎng)頁(yè)中，它是網(wǎng)站所展示信息的一部分，一般應(yīng)用img標(biāo)簽插入到頁(yè)面中。如網(wǎng)頁(yè)Banner、地圖圖片等。操作過(guò)程③網(wǎng)頁(yè)表現(xiàn)層的圖片集合首先是網(wǎng)頁(yè)頂部（top層），包括Logo、聯(lián)系方式和次導(dǎo)航，如圖4.75所示。圖4.75第二個(gè)是網(wǎng)頁(yè)導(dǎo)航（nav層），如圖4.76所示。圖4.76操作過(guò)程第三個(gè)是網(wǎng)頁(yè)的主體，這部分又可以分為三個(gè)區(qū)域：左邊、中間、右邊，對(duì)應(yīng)為main-left層、main-middle層、main-right層，如圖4.77所示。圖4.77操作過(guò)程（3）切割與導(dǎo)出內(nèi)容層圖片網(wǎng)站內(nèi)容層的圖片將作為頁(yè)面的內(nèi)容插入在網(wǎng)頁(yè)中，它與網(wǎng)站表現(xiàn)層圖片最大的區(qū)別在于，它是網(wǎng)站所展示信息的一部分，即內(nèi)容層圖片是實(shí)實(shí)在在的網(wǎng)頁(yè)內(nèi)容，而且必須用img標(biāo)簽插入頁(yè)面。網(wǎng)站內(nèi)容層圖片的切割方法與表現(xiàn)層圖片的一樣。網(wǎng)站內(nèi)容層的圖片集合如圖4.82所示。圖4.823.網(wǎng)站文件與CSS樣式規(guī)劃如何組織網(wǎng)站文件，如何規(guī)劃CSS樣式，形成條理、結(jié)構(gòu)清晰的網(wǎng)站，這是需要深入考慮的問(wèn)題。這些問(wèn)題將會(huì)影響到網(wǎng)站的更新與維護(hù)，也對(duì)后續(xù)開發(fā)、團(tuán)隊(duì)協(xié)作有著很大的影響，下面對(duì)這兩部分內(nèi)容進(jìn)行分析。（1）網(wǎng)站文件的規(guī)劃只有具備合理的網(wǎng)站文件組織結(jié)構(gòu)，才能更好地對(duì)文件進(jìn)行管理與區(qū)分，使目錄結(jié)構(gòu)更加合理，運(yùn)動(dòng)更加高效。CSS樣式的規(guī)劃，可以有效地發(fā)揮CSS代碼的作用，做到下載最有效的代碼并且盡可能地使公用代碼實(shí)現(xiàn)共用。在這里需要先進(jìn)行規(guī)劃，然后編碼，這也是一般網(wǎng)站開發(fā)的步驟。首先分析本案例的網(wǎng)站由哪些文件組成。第一部分：網(wǎng)站首頁(yè)，一般命名為index.htm或index.html。第二部分：網(wǎng)站內(nèi)容圖片文件，作為網(wǎng)頁(yè)內(nèi)容的一部分，一般放置于images文件夾中。操作過(guò)程第三部分：網(wǎng)站外觀表現(xiàn)圖片文件，這些文件將由CSS引入頁(yè)面中，一般放置于styles\images文件夾中。第四部分：其他文件，包括網(wǎng)站Flash動(dòng)畫文件盒JavaScript客戶端腳本文件等，分別放置于flash文件夾和scripts文件夾。（2）CSS樣式規(guī)劃CSS樣式規(guī)劃的原則是盡量將公用的代碼精簡(jiǎn)至一個(gè)文件中，盡可能地發(fā)揮共用的特點(diǎn)，不要加入任何其他非共用的代碼。CSS樣式文件，是網(wǎng)站外觀表現(xiàn)的核心部分，放置于styles文件夾中，主要包括如下兩個(gè)文件。①base.css基本樣式文件。②home.css網(wǎng)站首頁(yè)的樣式文件。最終網(wǎng)站結(jié)構(gòu)如圖4.83所示。圖4.83操作過(guò)程操作過(guò)程4.XHTML編碼網(wǎng)站的基本要素已具備，規(guī)劃已經(jīng)到位，下面開始進(jìn)行XHTML編碼。在頁(yè)面布局與規(guī)劃中，可以看出文檔清晰的機(jī)構(gòu)，根據(jù)這樣的思路一步一步深入，先編寫主體框架與容器，勾勒出文檔結(jié)構(gòu)，然后編寫細(xì)部頁(yè)面元素，完善頁(yè)面代碼。（1）頁(yè)面主體布局XHTML編碼頁(yè)面XHTML主體結(jié)構(gòu)如圖4.84所示。圖4.84操作過(guò)程依據(jù)上面的思路，編寫如下主體結(jié)構(gòu)XHTML代碼。<divid="wrap"><divid="top"></div><divid="nav"></div><divid="banner"></div><divid="main"><divid="main_left"></div><divid="main_middle"></div><divid="main_right"></div><divid="main_show"></div></div><divid="footer"></div></div>操作過(guò)程（2）頁(yè)頭部分XHTML編碼<divid="top"><h2><ahref="index.html">盛和景園</a></h2><p><span>垂詢電話52</span></p><ul><li><imgsrc="images/saveus.jpg"/><ahref="#"target="_blank"><br/>收藏本站</a></li><li><imgsrc="images/fri.jpg"/><ahref="#"target="_blank"><br/>友情鏈接</a></li><li><imgsrc="images/contectus.jpg"/><ahref="#"target="_blank"><br/>聯(lián)系我們</a></li></ul></div>Logo部分使用h2標(biāo)簽，沒(méi)有使用img標(biāo)簽直接插入Logo圖片，而是在CSS中將Logo圖片設(shè)置為h2的背景，這樣做的益處在于，即使用戶禁用圖片與CSS樣式，也能讓用戶準(zhǔn)確地知道目前所在頁(yè)的名稱或主題。此方法會(huì)在后面多次用到。操作過(guò)程（3）導(dǎo)航部分XHTML編碼<divid="nav"><ul><li><ahref="#"target="_blank">網(wǎng)站首頁(yè)</a></li><li><ahref="#"target="_blank">項(xiàng)目介紹</a></li><li><ahref="#"target="_blank">戶型展示</a></li><li><ahref="#"target="_blank">購(gòu)房指南</a></li><li><ahref="#"target="_blank">新聞中心</a></li><li><ahref="#"target="_blank">團(tuán)購(gòu)活動(dòng)</a></li><li><ahref="#"target="_blank">在線咨詢</a></li><li><ahref="#"target="_blank">聯(lián)系我們</a></li><li><ahref="#"target="_blank">友情鏈接</a></li></ul></div>操作過(guò)程（4）banner部分XHTML編碼banner部分將使用特效，特效部分內(nèi)容將在后面章節(jié)講解，在本部分只添加最基本的XHTML編碼。（5）main部分XHTML編碼①main_left部分XHTML編碼a．project_show部分XHTML編碼<divid="project_show"> <h3>盛和景園展示</h3><ul><li><ahref="#">盛和景園戶型圖</a></li><li><ahref="#">盛和景園效果圖</a></li><li><ahref="#">盛和景園配套設(shè)施</a></li><li><ahref="#">盛和景園交通圖</a></li><li><ahref="#">盛和景園實(shí)景圖</a></li></ul></div>操作過(guò)程b．contact_us部分XHTML編碼<divid="contact_us"><h3>聯(lián)系我們</h3><di