【文章內(nèi)容簡(jiǎn)介】 用于定義代碼表現(xiàn)形式的 CSS 規(guī)則駐留在另一個(gè)文件（外部樣式表）或 HTML 文檔的另一部分（通常為文件頭部分）中。使用 CSS 可以非常靈活并更好地控制具體的頁(yè)面外觀，從精確的布局定位到特定的字體和樣式。CSS 允許控制 HTML 無(wú)法獨(dú)自控制的許多屬性。除設(shè)置文本格式外，還可以使用 CSS 控制 Web 頁(yè)面中塊級(jí)別元素的格式和定位。CSS 的主要優(yōu)點(diǎn)是: 它提供了便利的更新功能；更新一處的 CSS 規(guī)則時(shí)，使用該已定義樣式的所有文檔的格式都會(huì)自動(dòng)更新為新樣式。外部 CSS 樣式表是一系列存儲(chǔ)在一個(gè)單獨(dú)的外部 CSS (.css) 文件（并非 HTML 文件）中的 CSS 規(guī)則。利用文檔文件頭部分中的鏈接，該文件被鏈接到 Web 站點(diǎn)中的一個(gè)或多個(gè)頁(yè)面。 內(nèi)部（或嵌入式）CSS 樣式表是一系列包含在 HTML 文檔文件頭部分的 style 標(biāo)簽內(nèi)的 CSS 規(guī)則字體大小的 css 的代碼如下：Html 文檔部分代碼：htmlheadmeta equiv=ContentType content=text/html。 charset=gb2312 /title計(jì)協(xié)之家新聞 /titlelink rel=stylesheet type=text/css href=../../css//headbody div id=containerdiv id=newsp align=left class=zi2為豐富校園生活，提高學(xué)生的游戲體育競(jìng)技水平，培養(yǎng)學(xué)生健康上網(wǎng)、文明上網(wǎng)的良好風(fēng)氣。同時(shí)通過本次比賽，向同學(xué)們展示網(wǎng)絡(luò)的優(yōu)勢(shì)，為活動(dòng)增添懸殊般的色彩。我們協(xié)會(huì)在本次電...../p/div/div/body /html與上面 html 文檔匹配的部分外部 CSS 代碼：body {fontfamily: 宋體,Arial, Helvetica, sansserif。fontsize: 13px。color: 333333。backgroundcolor:FFFFFF。width:1000px。lineheight: 。background:url(../images/)。 padding:0。margin: 0。}.zi{ fontsize: 18px。 fontweight: bold。 }.zi1{color: FF0000。}.zi2{fontsize: 16px 。}三、網(wǎng)站總體分析與設(shè)計(jì) 網(wǎng)站系統(tǒng)分析根據(jù)前面的設(shè)計(jì)思想進(jìn)行分析，按照系統(tǒng)開發(fā)的基本觀點(diǎn)對(duì)網(wǎng)站進(jìn)行分解，從內(nèi)容上可對(duì)網(wǎng)站作如下劃分：? 協(xié)會(huì)簡(jiǎn)介：主要介紹協(xié)會(huì)簡(jiǎn)述、協(xié)會(huì)章程、管理制度、指導(dǎo)老師相關(guān)內(nèi)容。? 協(xié)會(huì)概況：主要介紹現(xiàn)任學(xué)生干部、技術(shù)交流科目、娛樂活動(dòng)形式、協(xié)會(huì)品牌活動(dòng)等。? 機(jī)構(gòu)設(shè)置：主要介紹協(xié)會(huì)各部門的職能和技術(shù)交流方向。? 新聞動(dòng)態(tài)：報(bào)道協(xié)會(huì)近期活動(dòng)或技術(shù)交流動(dòng)態(tài)，現(xiàn)象的介紹協(xié)會(huì)日常工作。? 技術(shù)園地：聚集各種計(jì)算機(jī)相關(guān)的技術(shù)知識(shí)，以便計(jì)算機(jī)愛好者學(xué)習(xí)。? I T 動(dòng)態(tài)：跟蹤近期 IT 行業(yè)的最新技術(shù)和新聞等相關(guān)內(nèi)容。? 活動(dòng)風(fēng)采：直觀的展現(xiàn)協(xié)會(huì)豐富多彩的活動(dòng)相關(guān)效果圖。? 生活?yuàn)蕵罚合嚓P(guān)笑話和美文以便大家在學(xué)習(xí)累時(shí)放松，調(diào)節(jié)情緒。? 資源共享：協(xié)會(huì)成員收集的好資料，資源共享，以便大家一起學(xué)習(xí)。? 協(xié)會(huì)視頻：協(xié)會(huì)相關(guān)活動(dòng)或者技術(shù)視頻。 主頁(yè)設(shè)計(jì)網(wǎng)站主頁(yè)采用靜、動(dòng)相結(jié)合的方式，即靜態(tài)的主畫面和動(dòng)態(tài)的圖片相結(jié)合，體現(xiàn)社團(tuán)的勃勃生氣。在主頁(yè)的最下面我們還弄了許多的友情鏈接圖標(biāo)，這樣用戶可以有更多的選擇性。不會(huì)讓用戶感到本網(wǎng)站的單調(diào)。我們還設(shè)計(jì)了視頻圖片和娛樂美文專區(qū)，用來(lái)增加網(wǎng)站的娛樂性，可以讓網(wǎng)友能輕松愉快地欣賞本網(wǎng)站，這樣也能讓網(wǎng)友們能更喜歡本網(wǎng)站。在最下面我們還制作了一些友情連接的圖片，可以讓網(wǎng)站不單調(diào)，使得網(wǎng)站更具實(shí)用性。 背景分析想要在視覺化環(huán)境下制作復(fù)雜網(wǎng)頁(yè)的專業(yè)網(wǎng)頁(yè)制作，Dreamweaver 已經(jīng)漸漸在網(wǎng)頁(yè)編輯工具中嶄露頭角，成為專業(yè)人士編寫網(wǎng)頁(yè)的最佳選擇?？煞殖伤膫€(gè)主題。分別是：? 設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面（Dreamweaver 里具有彈性的頁(yè)面設(shè)計(jì)功能） ；? 搭配 Macromedia 其它產(chǎn)品一起使用 Dreamweaver（制作動(dòng)畫和圖片不求人） ；? 自定義使用界面（享受個(gè)性化的使用經(jīng)驗(yàn)） ；? 最后的加入 Dreamweaver 擴(kuò)充程序（在網(wǎng)頁(yè)中載入擴(kuò)充高級(jí)功能） 。 網(wǎng)頁(yè)設(shè)計(jì)的色彩人們常常感受到色彩對(duì)自己心理的影響，這些影響總是在不知不覺中發(fā)揮作用，左右我們的情緒。色彩的心理效應(yīng)發(fā)生在不同層次中。有些屬直接的刺激，有些要通過間接的聯(lián)想，更高層次則涉及到人的觀念，信仰，對(duì)于藝術(shù)家和設(shè)計(jì)者來(lái)說，無(wú)論哪一層次的作用都是不可忽視的。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者來(lái)說，色彩的心理作用尤其重要，因?yàn)橛镁W(wǎng)絡(luò)是在一種特定的歷史與社會(huì)條件的環(huán)境下，即高效率，快節(jié)奏的現(xiàn)代生活方式的條件，這需要做網(wǎng)頁(yè)時(shí)把握人們?cè)谶@種生活方式用網(wǎng)絡(luò)的一種心理需求。針對(duì)不同的主題來(lái)布置色彩，如健康類的網(wǎng)頁(yè)就不能采用較為刺激的大紅和黃，以及象征死亡和神秘的黑色和紫色，這樣會(huì)造成一種緊張和某種程度的恐慌，所以我們所選的顏色是——統(tǒng)一“青綠”色，給網(wǎng)民們清爽舒服地感覺。四、為什么選擇 DreamweaverDreamweaver 是制作主頁(yè)的好工具 .Dreamweaver 是可視化的網(wǎng)頁(yè)制作工具，很容易上手，可以讓你輕松地制作出自己的網(wǎng)頁(yè)。Dreamweaver 在多媒體方面頗有建樹的 Macromedia 公司推出的可視化網(wǎng)頁(yè)制作工具，它與 Flash、Fireworks 合在一起被稱為網(wǎng)頁(yè)制作三劍客，這三個(gè)軟件相輔相承，是制作網(wǎng)頁(yè)的最佳選擇。其中，Dreamweaver 主要用來(lái)制作網(wǎng)頁(yè)文件，制作出來(lái)的網(wǎng)頁(yè)兼容性比較好，制作效率也很高，F(xiàn)lash 用來(lái)制作精美的網(wǎng)頁(yè)動(dòng)畫，而 Fireworks 用來(lái)處理網(wǎng)頁(yè)中的圖形。復(fù)雜的說：Dreamweaver 是美國(guó) Macromedia 公司開發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁(yè)編輯器，它是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁(yè)開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。 Dreamweaver 特點(diǎn)：（1）最佳的制作效率Dreamweaver 可以用最快速的方式將 Fireworks，或 Photoshop 等檔案移至網(wǎng)頁(yè)上。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁(yè)色調(diào)。對(duì)于選單，快捷鍵與格式控制，都只要一個(gè)簡(jiǎn)單步驟便可完成。Dreamweaver 能與您喜愛的設(shè)計(jì)工具，如 Flash 等搭配，不需離開 Dreamweaver 便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使 Dreamweaver 自動(dòng)開啟 Firework 或 Photoshop 來(lái)進(jìn)行編輯與設(shè)定圖檔的最佳化。（2）網(wǎng)站管理使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形、設(shè)計(jì)、更新和重組網(wǎng)頁(yè)。改變網(wǎng)頁(yè)位置或檔案名稱，Dreamweaver 會(huì)自動(dòng)更新所有連結(jié)。使用支援文字、HTML 碼、HTML 屬性標(biāo)簽和一般語(yǔ)法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡(jiǎn)單。 （3）無(wú)可比擬的控制能力Dreamweaver 是唯一提供 Roundtrip HTML、視覺化編輯與原始碼編輯同步的設(shè)計(jì)工具。它包含Home Site 和 BBEdit 等主流文字編輯器。幀(frames) 和表格的制作速度快的令您無(wú)法想象。對(duì)于 CSS 的動(dòng)態(tài) HTML 支援和鼠標(biāo)換圖效果，聲音和動(dòng)畫的 DHTML 效果資料庫(kù)可在 Netscape 和 Microsoft 瀏覽器上執(zhí)行。使用不同瀏覽器檢示功能，Dreamweaver 可以告知您在不同瀏覽器上執(zhí)行的成效如何。當(dāng)有新的瀏覽器上市時(shí)，只要從 Dreamweaver 的網(wǎng)站在下載它的描述檔，便可得知詳盡的成效報(bào)告。五、詳細(xì)設(shè)計(jì)方案 設(shè)置站點(diǎn)Web 站點(diǎn)是一組具有如相關(guān)主題、類似的設(shè)計(jì)、鏈接文檔和資源。 是一個(gè)站點(diǎn)創(chuàng)建和管理工具，因此使用它不僅可以創(chuàng)建單獨(dú)的文檔，還可以創(chuàng)建完整的 Web 站點(diǎn)。創(chuàng)建 Web 站點(diǎn)的第一步是規(guī)劃。為了達(dá)到最佳效果，在創(chuàng)建任何 Web 站點(diǎn)頁(yè)面之前，應(yīng)對(duì)站點(diǎn)的結(jié)構(gòu)進(jìn)行設(shè)計(jì)和規(guī)劃。決定要?jiǎng)?chuàng)建多少頁(yè)，每頁(yè)上顯示什么內(nèi)容，頁(yè)面布局的外觀以及頁(yè)是如何互相連接起來(lái)的。 執(zhí)行以下操作：（1）啟動(dòng) Dreamweaver ：（2）選擇“站點(diǎn)”“新建站點(diǎn)” （即，從“站點(diǎn)”菜單選擇“管理站點(diǎn)” ） 。出現(xiàn)“站點(diǎn)定義”對(duì)話框。如圖 51：（3）如果對(duì)話框顯示的是“基本”選項(xiàng)卡，則單擊“高級(jí)” 。 出現(xiàn)“站點(diǎn)定義向?qū)А钡牡谝粋€(gè)界面，要求您為站點(diǎn)輸入一個(gè)名稱。圖 51（4）在文本框中，輸入一個(gè)名稱以設(shè)計(jì)課題名稱英文縮寫“CEH_Site ”。該名稱可以是任何所需的名稱。（5）然后在下面的“本地根目錄文件夾”和“默認(rèn)圖像文件夾”文本框中輸入本地網(wǎng)站預(yù)保存的路徑，單擊“確認(rèn)”按鈕。（6）隨即在組合面板中彈出“站點(diǎn)”面板，現(xiàn)在可以在其中添加頁(yè)面了。（7）右鍵單擊“站點(diǎn)” 面板中的根目錄，在彈出菜單中選擇“新建文件”命令，把新建文件的名稱改為“”。（8）雙擊 ，進(jìn)入頁(yè)面編輯狀態(tài)。 頁(yè)面制作 創(chuàng)建主頁(yè)頁(yè)面 在全面考慮好網(wǎng)站的欄目，鏈接結(jié)構(gòu)和整體風(fēng)格之后，就可以正式動(dòng)手制作首頁(yè)了。有一句俗語(yǔ)：良好的開端是成功的一半。在網(wǎng)站設(shè)計(jì)上也是如此，首頁(yè)的設(shè)計(jì)是一個(gè)網(wǎng)站成功與否的關(guān)鍵。人們往往看到第一頁(yè)就已經(jīng)有一個(gè)整體的感覺。是不是能夠促使瀏覽者繼續(xù)點(diǎn)擊進(jìn)入，是否能夠吸引瀏覽者留在站點(diǎn)上，全憑首頁(yè)的設(shè)計(jì)。所以，首頁(yè)的設(shè)計(jì)和制作是絕對(duì)要重視和花心思的。首頁(yè)設(shè)計(jì)大致如下：? 整個(gè)網(wǎng)站版面布局都是用 div+css 布局的，有較好的靈活性；? 色彩的搭配主要統(tǒng)一用了“青綠”色調(diào)給人以清爽的感覺；? div 布局的主要架構(gòu)：htmlheadmeta equiv=ContentType content=text/html。 charset=gb2312 /title計(jì)協(xié)之家首頁(yè) /titlelink rel=stylesheet type=text/css href=css/ //外部 CSS 鏈接路徑/headbody div id=container div id=headdiv id=logo/divdiv id=banner/div /divdiv id=nav_time/div //導(dǎo)航欄 div id=mid //網(wǎng)頁(yè)中心部分（核心和內(nèi)容）div id=work div id=work_left //新聞動(dòng)態(tài)和協(xié)會(huì)概要及機(jī)構(gòu)具體內(nèi)容 div id=news_gy div id=pho_gy div id=photo_News/div //新聞幻燈圖片 div id=overview/div //協(xié)會(huì)概要及機(jī)構(gòu)具體內(nèi)容 /div div id=news_gg //新聞動(dòng)態(tài) div id=news/div div id=newsfla/div /div /div /div div id=work_right //公告和資源共享 div class=right_boxdiv id=pro_newsdiv id=pro/div //公告版div id=pro/div //資源共享/div /div /div/divdiv id=tec //技術(shù)園地、娛樂和 IT 信息板塊 div id=tecleft div id=teclefttext/divdiv id=teclefttext/div /divdiv id=tecright div id=tecrighttext/div div id=tecrighttext/div/div/divdiv id=photo /div //流動(dòng)圖片/divdiv id=link/div //友情鏈接div id=footer /div //頁(yè)腳內(nèi)容/div/body/html? 然后根據(jù)上文中 CSS 層疊樣式表的定義格式，結(jié)合 div 布局架構(gòu)經(jīng)行合理的編寫 CSS 樣式表? 頁(yè)面中的相關(guān)特效可以結(jié)合下文經(jīng)行對(duì)位填充，字體和邊框都在 CSS 經(jīng)行了詳細(xì)的編制。? 最后首頁(yè)基本就形成了（如：圖 52）圖 52 其它頁(yè)面的制作其他頁(yè)面是在此主頁(yè)面設(shè)計(jì)好的框架上加以修改，訂好的 css 樣式，添加一些內(nèi)容和各頁(yè)面該有的內(nèi)容。分頁(yè)導(dǎo)航頁(yè)（如：圖 53，IT 動(dòng)態(tài)頁(yè)面）圖 53具體內(nèi)容頁(yè)（如：圖 54）圖 54這樣計(jì)算機(jī)協(xié)會(huì)的網(wǎng)頁(yè)就制作完成。 網(wǎng)站布局技術(shù)本站主要使用 div+css 布局。 DIV 本身就是容