【文章內(nèi)容簡介】 這也用 CSS布局的特色所在，結(jié)構(gòu)與表現(xiàn)分離后，代碼才簡潔，更新才方便。給出一個(gè)實(shí)例，對(duì)比把樣式寫進(jìn)去和分離開的區(qū)別，進(jìn)一步說明結(jié)構(gòu)與表現(xiàn)分離的優(yōu)點(diǎn)，在這里建議學(xué)生單獨(dú)建立 css文件與頁面進(jìn)行鏈接，這樣的方式會(huì)使代碼部分更為清淅。第六節(jié) div+css 的兼容性問題一、div 的垂直居中問題 verticalalign:middle。 將行距增加到和整個(gè) DIV一樣高 lineheight:200px。 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行 。二、margin 加倍的問題 設(shè)置為 float的 div在 ie下設(shè)置的 margin會(huì)加倍。這是一個(gè) ie6都存在的 bug。解決方案是在這個(gè) div里面加上 display:inline。 三、浮動(dòng) ie產(chǎn)生的雙倍距離box{ float:left。 width:100px。 margin:0 0 0 100px。 //這種情況之下IE會(huì)產(chǎn)生 200px的距離 display:inline。 //使浮動(dòng)忽略} 這里細(xì)說一下 block與 inline兩個(gè)元素：block 元素的特點(diǎn)是,總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素)。Inline 元素的特點(diǎn)是,和其他元素在同一行上,不可控制(內(nèi)嵌元素)。box{ display:block。 //可以為內(nèi)嵌元素模擬為塊元素 display:inline。 12//實(shí)現(xiàn)同一行排列的效果 diplay:table。四、IE 與寬度和高度的問題 IE不認(rèn)得 min這個(gè)定義，但實(shí)際上它把正常的 width和 height當(dāng)作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個(gè)值就不會(huì)變，如果只用 minwidth和 minheight的話，IE 下面根本等于沒有設(shè)置寬度和高度，比如要設(shè)置背景圖片，這個(gè)寬度是比較重要的。五、頁面的最小寬度min width是個(gè)非常方便的 CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。但 IE不認(rèn)得這個(gè)，而它實(shí)際上把 width當(dāng)做最小寬度來使。為了讓這一命令在 IE上也能用，可以把一個(gè)div 放到 body 標(biāo)簽下，然后為 div指定一個(gè)類。六、DIV 浮動(dòng) IE文本產(chǎn)生 3象素的 bug左邊對(duì)象浮動(dòng)，右邊采用外補(bǔ)丁的左邊距來定位，右邊對(duì)象內(nèi)的文本會(huì)離左邊有 3px的間距。七、IE 捉迷藏的問題當(dāng) div應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接，DIV 等這個(gè)時(shí)候容易發(fā)生捉迷藏的問題。有些內(nèi)容顯示不出來，當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域是發(fā)現(xiàn)內(nèi)容確實(shí)在頁面。 解決辦法：對(duì)layout 使用 lineheight屬性 或者給layout 使用固定高和寬。頁面結(jié)構(gòu)盡量簡單。 八、IE6 下為什么圖片下有空隙產(chǎn)生解決這個(gè) BUG的方法也有很多,可以是改變 html的排版,或者設(shè)置 img 為display:block 或者設(shè)置 verticalalign 屬性為 verticalalign:top | bottom |middle |textbottom 。13第二章 開發(fā)工具的介紹第一節(jié) 夢(mèng)幻網(wǎng)頁的編織者——DreamweaverDreamweaver是創(chuàng)建和管理網(wǎng)頁的專業(yè)化可視編輯器。使用 Dreamweaver可以輕松創(chuàng)建跨平臺(tái)、跨瀏覽器的頁面。Macromedia 的 Roundtrip HTML技術(shù)允許用戶隨意導(dǎo)入 HTML文檔而無需重新設(shè)置代碼格式。Dreamweaver可以為用戶做到：使用動(dòng)態(tài) HTML功能（例如具有動(dòng)態(tài)效果的層和行為）而不用寫一行代碼。它甚至還可以檢查用戶的工作成果在所有流行的平臺(tái)和瀏覽器中可能發(fā)生的錯(cuò)誤。Dreamweaver還是一個(gè)可以完全自定義的應(yīng)用程序。用戶可以創(chuàng)建自己的對(duì)象和命令修改菜單和快捷鍵，甚至編寫 JavaScript代碼擴(kuò)展 Dreamweaver的行為和屬性檢查器。至于 Dreamweaver工作區(qū)是非常靈活的，因此它可以適應(yīng)各種不同的工作風(fēng)格和使用水平。常用的 Dreamweaver工作區(qū)組件有以下若干種：① 文檔窗口可顯示當(dāng)前文檔，文檔的外觀和瀏覽器中看到的非常相似。② 裝載器中包含一些打開和關(guān)閉常用檢查器和模板的按鈕。③ 對(duì)象工具欄包含創(chuàng)建不同類型的對(duì)象（例如 圖象、表格和層等）的按鈕。④ 屬性檢查器顯示選定對(duì)象的屬性。⑤ 快捷菜單可以使用戶對(duì)當(dāng)前選擇或區(qū)域快速執(zhí)行某些命令。⑥ 可固定的浮動(dòng)工具欄允許用戶將浮動(dòng)窗口、檢查器和工具欄組合在一個(gè)或多個(gè)選擇窗口中。第二節(jié) 圖形、圖像編輯設(shè)計(jì)軟件制作軟件——Adobe 14Photoshop cs2Photoshop cs2是目前最流行的圖形、圖像編輯設(shè)計(jì)軟件，在數(shù)碼影像處理、圖像編輯合成、廣告設(shè)計(jì)、封面設(shè)計(jì)、美術(shù)繪畫、網(wǎng)頁設(shè)計(jì)等領(lǐng)域都被廣泛地應(yīng)用。① 文字處理更加方便② 增加的圖層集使圖層管理更有序。③ 新增圖像功能：圖像的剪切和剪裁更加方便。④ 將所有工具的選項(xiàng)板改進(jìn)為工具選項(xiàng)欄放置在工作區(qū)頂部，方便先項(xiàng)參數(shù)的設(shè)置。⑤ 為了更方便地用路徑繪畫，改進(jìn)增加了幾何形狀工具，通過選擇工具的不同工作模式，可創(chuàng)建路徑、幾何形狀或幾何填充區(qū)，使得矢量繪圖功能得到了加強(qiáng)。15第三章 網(wǎng)站總體分析和設(shè)計(jì)第一節(jié) 網(wǎng)站開發(fā)的需求分析隨著網(wǎng)絡(luò)技術(shù)的餓不斷發(fā)展,網(wǎng)絡(luò)應(yīng)用已經(jīng)滲透到人類社會(huì)的各個(gè)角落作為網(wǎng)絡(luò)，世界色支撐點(diǎn)的網(wǎng)站,更是人們關(guān)注的熱點(diǎn)：政府利用網(wǎng)站宣傳自己的施政綱領(lǐng), 日益成為與百姓交流的直通車；企業(yè)利用網(wǎng)站宣傳自己的形象,挖掘無限商機(jī)，個(gè)人利用網(wǎng)站展示個(gè)性風(fēng)采,望擁有網(wǎng)。建立個(gè)人網(wǎng)站要有一個(gè)清晰的網(wǎng)站布局。比如說，導(dǎo)航條要不要？很多人說那東西人人在做，就顯得太俗沒個(gè)性，難顯示出新潮。但導(dǎo)航條之所以有那么多人在用，是因?yàn)樗o瀏覽者一個(gè)明確的布局，便利人們查找本身所需的信息。從某種角度上說，大家都在用的東西就說明它確實(shí)被大家所接受。要清楚網(wǎng)站做出來是給每一個(gè)人普通用戶看的。網(wǎng)站還要經(jīng)常更新，給人以新意。設(shè)計(jì)技術(shù)的成長，帶來了網(wǎng)頁世界的繁榮。尤其在崇尚個(gè)性的今天，設(shè)計(jì)者們更是將頁面設(shè)計(jì)表示的淋漓盡致。用戶欣喜的看到那些僵化的設(shè)計(jì)模式正在被逐個(gè)打破，網(wǎng)頁設(shè)計(jì)充滿了朝氣。但是，作為網(wǎng)頁設(shè)計(jì)者，不能一味的只追求個(gè)性的表現(xiàn)，還必需兼顧到用戶和客戶的習(xí)慣，在表現(xiàn)本身的風(fēng)格的同時(shí)，在功能上使用戶更加便利。網(wǎng)站導(dǎo)航結(jié)構(gòu)圖如下圖 ：站長設(shè)計(jì)首頁 新聞 博客 素材 聯(lián)系我們16圖 網(wǎng)站導(dǎo)航功能需求結(jié)果：生成 5個(gè)頁面，；新聞；；。 網(wǎng)站聯(lián)系。第二節(jié) 網(wǎng)站的總體設(shè)計(jì)與傳統(tǒng)媒體不同，網(wǎng)頁除了文字和圖像以外，還包含聲音、視頻和動(dòng)畫等新興多媒體元素，更借助由代碼語言編程所實(shí)現(xiàn)的各種交互式效果，增加了網(wǎng)頁界面的生動(dòng)性和復(fù)雜性，也使得網(wǎng)頁設(shè)計(jì)者需要考慮更多頁面元素的排布、優(yōu)化。一般來說，網(wǎng)頁的界面主要由下面幾個(gè)因素構(gòu)成：① 文字：文字元素是信息傳達(dá)的主體部分。網(wǎng)頁中的文字主要包括標(biāo)題、信息、文字鏈接、幾種主要形式。標(biāo)題和傳統(tǒng)媒體中信息傳達(dá)的基本作用相同，是內(nèi)容的簡概說明一般比較醒目、優(yōu)先編排。文字作為占據(jù)頁面重要比率的元素，同時(shí)又是信息重要載體，它的字體、大小、顏色和排布對(duì)頁面整體設(shè)計(jì)影響極大。我所使用的文字是宋體 12號(hào)，因?yàn)檫@樣看得比較清楚，使整個(gè)頁面整潔，網(wǎng)頁中都普遍的使用，讓顧客一看就忍不住繼續(xù)看，所以在此我選擇 12號(hào)宋體作為網(wǎng)頁的主體文字樣式。② 圖形：圖形在網(wǎng)頁界面中具有重要作用。合理的運(yùn)用圖形，可以生動(dòng)直觀、形象地表現(xiàn)設(shè)計(jì)主題。網(wǎng)頁中常用的圖形格式包括 jpg和 gif，這兩種格式壓縮比高，得到了規(guī)范瀏覽器的支持，下載速度快，具有跨平臺(tái)的特性，不需要瀏覽器安裝插件即可直接閱覽。圖形元素包括標(biāo)題、背景、主圖、鏈接圖標(biāo)四種。我所使用的圖片主要是自己收集的比較精美。如下圖 ：17圖 ③ 頁面版式：版式是網(wǎng)頁界面設(shè)計(jì)的重要組成部分，它將文字、圖形等視覺元素進(jìn)行組合配置，使頁面整體視覺效果美觀和諧，簡單大方，便于閱讀，實(shí)現(xiàn)信息傳達(dá)的最佳效果。如下圖 ：18圖 頁面版式④ 色彩：彩色網(wǎng)頁比單色網(wǎng)頁更具吸引力；色彩本身具有象征作用。 19第三節(jié) 整體風(fēng)格設(shè)計(jì)一、頁面屬性設(shè)計(jì)頁面中的整體格式和布局都在 中，其中 body 設(shè)計(jì)如下:body {margin: 0。padding: 0。lineheight: 。fontfamily: 宋體。fontsize: 12px。color: d1c7ba。 background: 372e23。}各個(gè)頁面的字體為：宋體、大小為 12像素，字體顏色d1c7ba。背景顏色我采用372e23 ， 372e23 這種背景色它與其他任何顏色的搭配都比較合適，不顯花哨，簡潔大方。Body 與頁面的邊距為零。二、色彩搭配打開一個(gè)網(wǎng)站，給用戶留下第一印象的既不是網(wǎng)站豐富的內(nèi)容，也不是網(wǎng)站合理的版面布局，而是網(wǎng)站的色彩。色彩對(duì)人的視覺效果非常明顯，一個(gè)網(wǎng)站設(shè)計(jì)成功與否，在某種程度上取決于設(shè)計(jì)者對(duì)色彩的運(yùn)用和搭配。因?yàn)榫W(wǎng)頁設(shè)計(jì)屬于一種平面效果設(shè)計(jì)，在排除立體圖形、動(dòng)畫效果之外，在平面圖上，色彩的沖擊力是最強(qiáng)的，它很容易給用戶留下深刻的印象。因此，在設(shè)計(jì)網(wǎng)頁時(shí)，必須要高度重視色彩的搭配。本網(wǎng)站的搭配主打?yàn)椋喊?、灰、藍(lán)、三種顏色。白色代表純潔、純真、樸素、神圣、明快?；疑彩且环N很大器的顏色，幾乎能與所有的顏色相輔相成。 灰色有種很內(nèi)斂、很隱約的39。暗香襲人39。的意味 。藍(lán)色是博大的色彩，天空和大海這遼闊的景色都呈蔚藍(lán)色。藍(lán)色是永恒的象征，它是最冷的色彩。純凈的藍(lán)20色表現(xiàn)出一種美麗、文靜、理智、安祥與潔凈。采用這種色彩搭配給游客留下深刻的印象。三、連接效果對(duì)于一個(gè)頁面不僅要設(shè)計(jì)其字體和其他風(fēng)格，還要有鏈接效果，使頁面更加的生動(dòng)， 中的鏈接效果如下：a, a:link, a:visited {color: 0074c5。 textdecoration: none。}a:hover {color: 009900。textdecoration: underline。}頁面的鏈接效果設(shè)置為：已經(jīng)訪問的連接樣式字體顏色為白色，無下劃線，字體加粗為正常值；當(dāng)有鼠標(biāo)懸停在鏈接上樣式字體顏色為FFFF33，有下劃線。四、導(dǎo)航設(shè)計(jì)網(wǎng)站的導(dǎo)航欄目可以讓用戶對(duì)網(wǎng)站的內(nèi)容及信息一目了然。導(dǎo)航分為：首頁、新聞、博客、素材、聯(lián)系我們。首先采用 div 布局，里面嵌套 ul 形式然后相關(guān) css 部分。相關(guān)代碼如下：Div 布局部分： div id=templatemo_menu ul lia href= class=current首頁/a/li lia href=新聞/a/li lia href=博客/a/li21 lia href=素材/a/li lia href=聯(lián)系我們/a/li /ul 五、細(xì)節(jié)設(shè)計(jì)1PX凹陷西線的設(shè)計(jì)給網(wǎng)頁帶來了分成次的美觀、圖片的選擇給人醒目、大方的感覺、按鈕的設(shè)計(jì)給顧客賞心悅目的感覺，搜索工具的設(shè)計(jì)方便了游客輕松的實(shí)現(xiàn)網(wǎng)頁功能的搜索。留言效果方便了直接與顧客交流的機(jī)會(huì)，提高了網(wǎng)站水平。第四節(jié) 首頁設(shè)計(jì)一、DIV 分布和概述由于個(gè)人完整給人的形象應(yīng)該是專業(yè)、大方，所以主頁的設(shè)計(jì)和布局我采用大方簡單又不失活潑的原則。首頁整體用 1個(gè)大的 DIV里面包含兩個(gè)小的（上下個(gè)一個(gè)）DIV。Div設(shè)置效果為：總體都設(shè)置了寬度，居中格式，背景顏色及背景圖片，其他還有內(nèi)邊距，高等。內(nèi)容界面是一個(gè)網(wǎng)站走向成功道路上必不可少的因素。網(wǎng)站的內(nèi)容代表著一個(gè)好網(wǎng)站的素質(zhì)和形象，所以應(yīng)該表現(xiàn)的大氣、端莊而且精細(xì)。還更要表現(xiàn)出一個(gè)網(wǎng)站應(yīng)該有的朝氣和活力。因此我首先選中色彩搭配比較大方，整體布局比較清晰簡潔的內(nèi)容模式。在首頁的版面，先是用 Photoshop對(duì)網(wǎng)站模板進(jìn)行切片，然后用 DIV+CSS進(jìn)行排版。首先自然映入顏面的是 logo設(shè)計(jì)，一個(gè)特殊于類