基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計(jì)與制作

中國高等院校計(jì)算機(jī)基礎(chǔ)教育課程體系規(guī)劃教材唐四薪編著清華大學(xué)出版社2009年11月《基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計(jì)》配套網(wǎng)站：第〇講網(wǎng)頁設(shè)計(jì)藝術(shù)唐四薪網(wǎng)頁設(shè)計(jì)的基本問題從藝術(shù)的角度看網(wǎng)頁設(shè)計(jì)屬于平面設(shè)計(jì)的問題布局的問題（三種布局方式）配色的問題從技術(shù)的角度看運(yùn)用html，css等解決網(wǎng)頁布局和美觀的問題所以網(wǎng)頁設(shè)計(jì)中很多技術(shù)問題都是為了使網(wǎng)頁看起來美觀網(wǎng)頁的布局網(wǎng)頁版面布局的方法框架布局將瀏覽器窗口分割成幾部分，每部分放一個不同的網(wǎng)頁（示例）表格布局將網(wǎng)頁元素裝填入表格內(nèi)實(shí)現(xiàn)布局，表格相當(dāng)于網(wǎng)頁的骨架，因此表格布局的步驟是先畫表格，再往表格里填內(nèi)容。DIV＋CSS布局用盒子布局，利用網(wǎng)頁元素本身的盒子模型，通過盒子在頁面上的排列和嵌套進(jìn)行布局。

布局的含義網(wǎng)頁版面布局是網(wǎng)頁設(shè)計(jì)中的一項(xiàng)重要內(nèi)容。版面指的是瀏覽器看到的完整的一個頁面。因?yàn)槊總€人的顯示器分辨率不同，所以同一個頁面的分辨率可能出現(xiàn)800*600像素，1024*768像素等。布局，就是以最適合瀏覽的方式將圖片和文字?jǐn)[放在頁面的不同位置。網(wǎng)頁版面布局是指定網(wǎng)頁內(nèi)容在瀏覽器中的顯示方式，例如徽標(biāo)的位置、導(dǎo)航欄的顯示、主要內(nèi)容的排版等。經(jīng)常用到的版面布局結(jié)構(gòu)主要有以下幾種：常見網(wǎng)頁的版式1－3－1式1－2－1式藝術(shù)版式1-3-1式示例Logobanner導(dǎo)航條（Navigator)Bottom(版權(quán)信息）欄目1欄目2欄目3用表格實(shí)現(xiàn)用CSS布局實(shí)現(xiàn)表格布局的原則各欄目之間必須相對獨(dú)立，方法是把每個欄目裝在一個單獨(dú)的表格中，這樣修改一個欄目時不會對其他欄目產(chǎn)生影響各欄目之間必須用占位表格(或CSS邊界）留出一定的空隙欄目采取縱列的形式排列用CSS布局實(shí)現(xiàn)1-3-1布局中間幾列的盒子必須用一個大盒子包含起來，否則這幾列無法實(shí)現(xiàn)居中網(wǎng)頁的配色網(wǎng)頁的配色網(wǎng)頁不只是傳遞信息的媒介，同時也是網(wǎng)絡(luò)上的藝術(shù)品。如何讓瀏覽者以輕松愜意的心態(tài)吸收網(wǎng)頁傳遞的信息，是一個值得研究的課題。任何網(wǎng)頁創(chuàng)意使用的視覺元素總的歸納起來不外乎三種：文字、圖像、色彩。三者選用搭配的適當(dāng)，編排組合的合理，將對網(wǎng)頁的美化起到直接的效果。色彩的基本知識色彩的RGB模式：RGB是表示紅色、綠色、藍(lán)色又稱為三原色光，英文為R(Red)、G(Green)、B(Blue)，在電腦中，RGB的所謂“多少”就是指亮度，并使用整數(shù)來表示。

通常情況下，RGB各有256級亮度，用數(shù)字表示為從0、1、2至255。紅、黃、藍(lán)是三原色，其它色彩都可以用這三種顏色調(diào)和而成。網(wǎng)頁中色彩表達(dá)除了用顏色名稱表達(dá)外，就是用這三種顏色的數(shù)值表示：紅色color(255,0,0)、十六進(jìn)制表示為(ff0000)如：“bgcolor=#ffffff”表示背景色為白色色彩的基本知識色彩的HSB模式：

HSB是指顏色分為色相、飽和度、明度三個要素。英文為H(Hue)、S（Saturation）B（Brightness)飽和度高色彩較艷麗。飽和度低色彩就接近灰色。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到純白，最低得到純黑。一般淺色的飽和度較低，亮度較高，而深色的飽和度高而亮度低。色彩的三要素色相、明度和飽和度構(gòu)成色彩的三要素。自然界中的顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色，而其它所有的顏色均屬于彩色，任何一種色彩都具有明度、純度、飽和度三大屬性。(1).色相色相指色彩的相貌。如：紅、黃、藍(lán)、綠等。(2).明度明度指色彩的明暗程度。(3).飽和度（純度）純度指色彩的純凈程度，純度越高，色相感越強(qiáng)。色相(Hue)（1）色相(Hue)

基本色相為：紅、橙、黃、綠、藍(lán)、紫六色。在各色中間加插一兩個中間色，按光譜順序?yàn)椋杭t、橙紅、黃橙、黃、黃綠、綠、綠藍(lán)、藍(lán)綠、藍(lán)、藍(lán)紫、紫、紅紫,形成十二基本色相。

色相的計(jì)算機(jī)數(shù)值表示以顏色在色相環(huán)上的度數(shù)值來表示如紅色是0度，橙色是60度，黃色是120度，那么用色相值0表示紅色，60表示橙色，因此色相的取值應(yīng)該是0－360，但計(jì)算機(jī)中是用八位2進(jìn)制數(shù)表示色相的，所以取值只能是0－240，這樣還要把原來的色相值乘以2/3明度(Brightness)（2）明度(Brightness)

明度是色彩的第二屬性。是指色彩的明暗程度，也叫亮度，體現(xiàn)體現(xiàn)顏色的深淺。是全部色彩都具有的屬性，明度越大，色彩越亮。明度越低，顏色越暗飽和度(Saturation)（3）飽和度(Saturation)也叫純度，指色彩的鮮艷程度。原色最純，顏色的混合越多則純度逐漸減低。如某一鮮亮的顏色，加入了白色或者黑色，使得它的純度低，顏色趨于柔和、沉穩(wěn)。

純度網(wǎng)頁例圖（4）色彩的特質(zhì)色彩的特質(zhì)指的是色彩和色彩組合所能引發(fā)的特定情緒反映。我們依靠光來分辨顏色，再利用顏色和無數(shù)種色彩的組合來表達(dá)思想和情緒。熱冷暖涼亮暗艷淡原色也叫"三原色"。即紅、黃、藍(lán)三種基本顏色。自然界中的色彩種類繁多，變化豐富，但這三種顏色卻是最基本的原色，原色是其他顏色調(diào)配不出來的。除白色外，把三原色相互混合，可以調(diào)和出其他種顏色。

根據(jù)三原色的特性做出相應(yīng)的色彩搭配，有最迅速最有力最強(qiáng)烈的傳達(dá)視覺信息效果。

紅色網(wǎng)頁例圖藍(lán)色網(wǎng)頁例圖間色又叫"二次色"。它是由三原色調(diào)配出來的顏色，是由2種原色調(diào)配出來的。紅與黃調(diào)配出橙色；黃與藍(lán)調(diào)配出綠色；紅與藍(lán)調(diào)配出紫色，橙、綠、紫三種顏色又叫"三間色"。在調(diào)配時，由于原色在份量多少上有所不同，所以能產(chǎn)生豐富的間色變化

間色是由三原色中的兩原色調(diào)配而成的，因此在視覺刺激的強(qiáng)度相對三原色來說緩和不少。屬于較易搭配之色。

間色盡管是二次色，但仍有很強(qiáng)的視覺沖擊力，容易帶來輕松、明快、愉悅的氣氛。間色配色網(wǎng)頁復(fù)色也叫"復(fù)合色"。復(fù)色是由原色與間色相調(diào)或由間色與間色相調(diào)而成的"三次色"，復(fù)色是的純度最低，含灰色成份。復(fù)色包括了除原色和間色以外的所有顏色。復(fù)色網(wǎng)頁示例復(fù)色網(wǎng)頁配色說明以上4種顏色中深綠色和赭石色為復(fù)色，之所以還選擇其它2顏色，為的是更好的配合說明復(fù)色的特性，如果沒有另外兩種非復(fù)色搭配，頁面配色就可能出現(xiàn)骯臟等不舒服的感覺。復(fù)色是由兩種間色或原色與間色混合而成，因此色相傾向較微妙、不明顯，視覺刺激度緩和，如果搭配不當(dāng)，頁面便呈現(xiàn)易臟或易灰朦朦的效果，沉悶、壓抑之感，屬于不好搭配之色。但有時復(fù)色加深色搭配能很好的表達(dá)神秘感、縱深感空間感；明度高的多復(fù)色（參看明度的網(wǎng)頁例圖）多用來表示寧靜柔和、細(xì)膩的情感，易于長時間的瀏覽。網(wǎng)頁選色的考慮

從以上例子可看出三原色視覺沖擊力最強(qiáng)，也最是刺目的，容易制造沖突、煩燥、不舒適的心情，所以是較難掌握的配色，大面積大范圍使用要慎重。間色是由三原色中的兩色調(diào)配二次，間于原色和復(fù)色之間，屬于中性色，視覺沖擊力次之，顏色的刺激緩和不少，給人舒適、愉悅的心情，是較容易掌握的配色，也是在設(shè)計(jì)中使用得比較多的顏色。復(fù)色是由兩種間色或原色與間色相混合而產(chǎn)生的顏色，呈灰色階，視覺沖擊力更弱，柔和但是使人沉悶壓抑。復(fù)色調(diào)配好了，能體現(xiàn)出高層次高素養(yǎng)的成熟特性魅力，也稱為高級灰，是很經(jīng)看的顏色。

色彩的4種角色■主色調(diào)

頁面色彩的主要色調(diào)、總趨勢，其他配色不能超過該主要色調(diào)的視覺影響■輔色調(diào)

僅次與主色調(diào)的視覺面積的輔助色，是烘托主色調(diào)、支持主色調(diào)、起到融合主色調(diào)效果的輔助色調(diào)?！鳇c(diǎn)睛色

在小范圍內(nèi)點(diǎn)上強(qiáng)烈的顏色來突出主題效果，使頁面更加鮮明生動?！霰尘吧?/p>

襯托環(huán)抱整體的色調(diào)，協(xié)調(diào)、支配整體的作用。

網(wǎng)頁中色彩的角色示例色彩搭配的方案同類色搭配鄰近色搭配互補(bǔ)色搭配對比色搭配同類色比鄰近色更加接近的顏色，色環(huán)中距離為0－60度的顏色。它主要指在同一色相中不同的顏色變化。例如，紅顏色中有紫紅、深紅、玫瑰紅、大紅、朱紅、桔紅等等種類，黃顏色中又有深黃、土黃、中黃、桔黃、淡黃、檸檬黃等等區(qū)別。它起到色彩調(diào)和統(tǒng)一，又有微妙變化的作用。同類色搭配鄰近色

是在色環(huán)上任一顏色同其毗鄰之色。鄰近色也是類似色關(guān)系，只是范圍擴(kuò)大了一點(diǎn)。例如紅色和黃色，綠色和藍(lán)色，互為鄰近色。鄰近色搭配補(bǔ)色補(bǔ)色(分離補(bǔ)色）：

色輪上的任意顏色，以及它的補(bǔ)色的兩邊顏色，當(dāng)使用在同個版面上的時候被稱為“分離補(bǔ)色”。分離補(bǔ)色的運(yùn)用可以造成很強(qiáng)烈的對比。

補(bǔ)色搭配對比色對比色是指在色環(huán)中的直接位置相對的顏色，如果想要使網(wǎng)站中的色彩強(qiáng)烈突出、富有沖擊力的話，可以選擇對比色搭配。對比色搭配對比色搭配對比色搭配色彩的對比對比與調(diào)和就是形式美的變化與統(tǒng)一規(guī)律在一定條件下，不同色彩之間的對比會有不同的效果。在不同的環(huán)境下，多色彩給人一種印象，色彩單一給人另一種印象。

很多人都以為色彩對比主要是紅綠、橙藍(lán)、黃紫色的對比，實(shí)際色彩對比范疇不局限于這些。是指各種色彩的界面構(gòu)成中的面積、形狀、位置以及色相、明度、純度之間的差別，使網(wǎng)頁色彩配合增添了許多變化、頁面更加豐富多彩。

色相對比是指因色相之間的差別形成的對比。當(dāng)主色相確定后，必須考慮其他色彩與主色相是什么關(guān)系，要表現(xiàn)什么內(nèi)容及效果等，這樣才能增強(qiáng)其表現(xiàn)力。不同色相對比取得的效果有所不同，兩色越接近，對比效果越柔和。越接近補(bǔ)色，對比效果越強(qiáng)烈。色相對比純度對比是指不同色彩之間純度的差別而形成的對比。色彩純度可大致分為高純度、中純度、低純度三種。未經(jīng)調(diào)和過的原色純度是最高的，而間色多屬中純度的色彩，復(fù)色其本身純度偏低而屬低純度的色彩范圍。純度的對比會使色彩的效果更明確肯定。純度對比補(bǔ)色對比純度對比面積對比同一種色彩，面積越大，明度、純度越強(qiáng)，面積越小，明度、純度越低。面積大的時候，亮的色顯得更輕，暗的色顯得更重。這種現(xiàn)象稱為色彩的面積效果。面積對比是指頁面中各種色彩在面積上多與少、大與小的差別，影響到頁面主次關(guān)系。面積的對比,可以是中高低明度差的面積變化及中高低純度差的面積變化。

面積對比色彩調(diào)和兩種或兩種以上的色彩合理搭配，產(chǎn)生統(tǒng)一和諧的效果，稱為色彩調(diào)和。色彩調(diào)和的幾種基本方法同種色的調(diào)和相同色相、不同明度和純度的色彩調(diào)和。使之產(chǎn)生秩序的漸進(jìn)，在明度、純度的變化上，彌補(bǔ)同種色相的單調(diào)感

類似色的調(diào)和

在色環(huán)中,色相越靠近越調(diào)和。主要靠類似色之間的共同色來產(chǎn)生作用。對比色的調(diào)和

調(diào)和方法有：

1、提高或降低對比色的純度；

2、在對比色之間插入分割色（金、銀、黑、白、灰等）；

3、采用雙方面積大小不同的處理方法；

4、對比色之間加入相近的類似色。漸變色的調(diào)和

漸變色實(shí)際是一種調(diào)和方法的運(yùn)用。是顏色按層次逐漸變化的現(xiàn)象。色彩漸變就像兩種顏色間的混色，可以有規(guī)律地在多種顏色中進(jìn)行。暗色和亮色之間的漸變會產(chǎn)生遠(yuǎn)近感和三維的視覺效果。色彩調(diào)和的經(jīng)驗(yàn)

主要是通過面積大小、冷暖對比來表達(dá)體現(xiàn)頁面的主次關(guān)系、中心思想?！耦伾降杉尤脒m當(dāng)類似色對比色來使頁面產(chǎn)生變化。顏色凌亂可以適當(dāng)加入同類色或者類似色、白色、黑色、灰色做到統(tǒng)一調(diào)配的目的?！駥Ρ壬拇钆洳⒉皇蔷褪钦f是絕對值的紅或者綠，藍(lán)或橙、黃或紫。對比色的第一視覺傾向越明顯配色難度就越大，也就是說越難調(diào)和；反之，傾向越不明顯的對比色越容易調(diào)和。請參照剛才對比色調(diào)和頁面分析例子方法。●不是一種色彩面積用得越多或者越少、純度、明度越高就是能突出主體的主角色，主要是根據(jù)色彩相互之間的搭配關(guān)系來體現(xiàn)的?！褚粋€頁面中單純絕對的使用某種顏色或是使用絕對非常多種顏色搭配，容易產(chǎn)生個性效果，那叫玩色彩了，限于色彩運(yùn)用得非常熟練的朋友，但不推薦初學(xué)者使用。網(wǎng)頁的色彩搭配顏色分非彩色與彩色兩類：非彩色指黑、白、灰，其它為彩色。網(wǎng)頁制作用彩色還是非彩色好呢？根據(jù)專業(yè)的研究機(jī)構(gòu)研究表明：彩色的記憶效果是黑白的3.5倍。也就是說，在一般情況下，彩色頁面較完全黑白頁面更加吸引人。我們通常的做法是：主要內(nèi)容文字用非彩色(黑色)，邊框，背景，圖片用彩色。這樣頁面整體不單調(diào)，看主要內(nèi)容也不會眼花。任何色彩都有飽和度和透明度的屬性，屬性的變化產(chǎn)生不同的色相，所以至少可以制作幾百萬種色彩。網(wǎng)頁的色彩搭配非彩色的搭配黑白是最基本和最簡單的搭配，白字黑底，黑底白字都非常清晰明了?；疑侵杏股?，可以和任何彩色搭配，也可以幫助兩種對立的色彩和諧過渡。如果你實(shí)在找不出合適的色彩，那么用灰色試試，效果絕對不會太差。網(wǎng)頁的色彩搭配顏色分：暖色系、中性系、寒色系不同的顏色會給瀏覽者不同的心理感受,如：綠色介于冷暖兩中色彩的中間，顯得和睦，寧靜，健康，安全的感覺。它和金黃，淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。每種色彩在飽和度，透明度上略微變化就會產(chǎn)生不同的感覺。以綠色為例，黃綠色有青春，旺盛的視覺意境，而藍(lán)綠色則顯得幽寧，陰深。

網(wǎng)頁色彩的搭配原理1.色彩的鮮明性。網(wǎng)頁的色彩要鮮艷，容易引人注目。2.色彩的獨(dú)特性。要有與眾不同的色彩，使得大家對你的印象強(qiáng)烈。3.色彩的合適性。就是說色彩和你表達(dá)的內(nèi)容氣氛相適合。如用粉色體現(xiàn)女性站點(diǎn)的柔性。4.色彩的聯(lián)想性。不同色彩會產(chǎn)生不同的聯(lián)想，藍(lán)色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和你網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。配色的基本技巧技巧1.用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，(說得通俗些就是將色彩變淡或則加深)，產(chǎn)生新的色彩，用于網(wǎng)頁。這樣的頁面看起來色彩統(tǒng)一，有層次感。2.用兩種色彩。先選定一種色彩，然后選擇它的對比色(在photoshop里按ctrl+shift+I)。如用藍(lán)色和黃色,，整個頁面色彩豐富但不花稍。3.用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。4.用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺很"跳"。網(wǎng)頁色彩的搭配忌諱不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)。背景和前文的對比盡量要大，(絕對不要用花紋繁復(fù)的圖案作背景)，以便突出主要文字內(nèi)容。邊框和背景的顏色應(yīng)相似，且邊框的顏色較深，背景的顏色較淺一些網(wǎng)頁配色方案柔和、明亮、溫和柔和、潔凈、爽朗可愛、快樂、有趣輕快、華麗、動感狂野、充沛、動感華麗、花哨、女性化回味、女性化、優(yōu)雅高尚、自然、安穩(wěn)學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的建議善于觀察，發(fā)現(xiàn)細(xì)微的不同注重細(xì)節(jié)，追求完美重視網(wǎng)頁的源代碼，達(dá)到知其然，而且知其所以然抓住重點(diǎn)，表格和CSS的靈活運(yùn)用是重點(diǎn)勤于實(shí)踐，只有在自己做的過程中才能發(fā)現(xiàn)很多書本上沒講到的問題參考書籍LearningWebDesign(3rd)別具光芒－DIVCSS網(wǎng)頁布局與美化精通CSS+DIV網(wǎng)頁樣式與布局精通CSS－高級Web標(biāo)準(zhǔn)解決方案CSS設(shè)計(jì)徹底研究（溫謙）網(wǎng)頁設(shè)計(jì)與配色實(shí)例分析（黎芳）中國高等院校計(jì)算機(jī)基礎(chǔ)教育課程體系規(guī)劃教材唐四薪編著清華大學(xué)出版社2009年11月《基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計(jì)》配套網(wǎng)站：本書目錄第一章網(wǎng)頁設(shè)計(jì)概述第二章HTML、XHTML和Web標(biāo)準(zhǔn)第三章HTML標(biāo)記第四章CSS第五章Fireworks第六章網(wǎng)站開發(fā)和網(wǎng)頁設(shè)計(jì)的過程第七章JavaScript第一章網(wǎng)頁與網(wǎng)站基礎(chǔ)本章要點(diǎn)

網(wǎng)頁和網(wǎng)站的關(guān)系

Web服務(wù)器和瀏覽器動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁域名與主機(jī)的關(guān)系

URL的結(jié)構(gòu)internetInternet是由遍布全世界的各種各樣的網(wǎng)絡(luò)通過TCP/IP協(xié)議連接成的一個松散結(jié)合的全球網(wǎng)，它使網(wǎng)絡(luò)上的各臺計(jì)算機(jī)（Internet上稱為主機(jī)，即host）可以互相交換信息。Internet為用戶提供了各種各樣的服務(wù)，如WWW，Email，F(xiàn)TP，即時通信等。GoogleearthWWWWWW的含義是全球信息網(wǎng)（WorldWideWeb），簡稱為Web或“萬維網(wǎng)”。它是一個基于超文本(hypertext)方式的信息查詢工具，通過http協(xié)議傳輸超文本信息。是由歐洲核子物理研究中心（CERN）研制的。WWW將位于全世界Internet上不同網(wǎng)址的相關(guān)數(shù)據(jù)信息有機(jī)地編織在一起，通過瀏覽器（browser）提供一種友好的信息查詢界面。WWW特點(diǎn)WWW具有三個統(tǒng)一：

1.統(tǒng)一的資源定位方式：URL（統(tǒng)一資源定位器，即網(wǎng)址）。

2.統(tǒng)一的資源訪問方式：HTTP（超文本傳輸協(xié)議）。

3.統(tǒng)一的信息組織方式：HTML（超文本標(biāo)記語言）。網(wǎng)頁網(wǎng)頁即是超文本，是通過超文本標(biāo)記語言HTML（HypeTextMarkupLanguage）書寫的一種純文本文件，客戶通過瀏覽器看到的包含了如文字、圖像、聲音和動畫等多媒體信息的每一個頁面，其本質(zhì)是一個純文本文件。瀏覽器對該純文本文件進(jìn)行了解釋，才生成了多姿多彩的網(wǎng)頁，除文本外，其它媒體素材（圖像、聲音、動畫和影像等），都需要保存成單獨(dú)的文件，通過URL嵌入到網(wǎng)頁文件中?？梢钥闯?，WWW服務(wù)主要是通過一個個多媒體網(wǎng)頁提供給用戶各種信息的HTML超文本標(biāo)記語言超文本標(biāo)記語言HTML作為一種語言，它具有語言的一般特征，即它是一種符號系統(tǒng)，具有自己的詞匯（符號）和語法（規(guī)則）。所謂標(biāo)記，就是作記號。如我們寫文章時通常用大體字標(biāo)記文章的標(biāo)題，用換行空兩格標(biāo)記一個段落所謂超文本，就是相比普通文本有超越的地方，如超文本可以通過超鏈接轉(zhuǎn)到指定的某一頁，而普通文本只能一頁頁翻，超文本還具有圖像，視頻，聲音等元素，并能和用戶交互，這些都是普通文本無法達(dá)到的HTML的歷史超文本標(biāo)記語言HTML是一種建立超文本/超媒體文檔的語言，它用標(biāo)簽標(biāo)記文檔中的文本及圖像等各種元素，指示瀏覽器如何顯示這些元素。HTML的發(fā)展歷程如圖所示

GML(1969)SGML(1985)HTML(1993)XML(1998)XHTML(2000)CMLVMLGeneralizedMarkupLanguageStandardGeneralizedMarkupLanguageHyperTextMarkupLanguageeXtensibleMarkupLanguage……HTML與編程語言的區(qū)別HTML語言與編程語言有明顯不同，首先它不是一種計(jì)算機(jī)編程語言，而是一種描述文檔結(jié)構(gòu)的語言，或者說排版語言；其次HTML是弱語法語言，隨便怎么寫都可以，計(jì)算機(jī)盡力去理解執(zhí)行，不理解的按原樣顯示，而編程語言是嚴(yán)格語法的語言，寫錯一點(diǎn)點(diǎn)計(jì)算機(jī)就不執(zhí)行，報(bào)告錯誤；再次HTML語言不像大多數(shù)編程語言一樣需要編譯成指令后執(zhí)行，而是每次由瀏覽器解釋執(zhí)行。網(wǎng)站一個網(wǎng)站對應(yīng)磁盤上的一個文件夾，網(wǎng)站的所有網(wǎng)頁和其他資源文件都會放在該文件夾下或其子文件夾下，設(shè)計(jì)良好的網(wǎng)站通常是將網(wǎng)頁文檔及其它資源分門別類地保存在相應(yīng)的文件夾中以方便管理和維護(hù)。這些網(wǎng)頁通過鏈接組織在一起，其中有個網(wǎng)頁稱為首頁，常命名為index.htm，必須放在網(wǎng)站的根目錄下。網(wǎng)頁中所需要的圖片文件一般單獨(dú)保存在該目錄下一個叫images的文件夾下。網(wǎng)站結(jié)構(gòu)Wgzxwebindex.htmimagesstyle.cssabout.htmlh1.htmh2.htmh3.htm首頁文件的直接上級目錄，是網(wǎng)站根目錄首頁文件的間接上級目錄，不是網(wǎng)站根目錄網(wǎng)站目錄的建立因此制作網(wǎng)站的第一步是在硬盤上新建一個文件夾，作為網(wǎng)站根目錄，以后把這個目錄上傳到服務(wù)器上就可以了。由于我們制作網(wǎng)站一般需要用到Dreamweaver，所以還要配置網(wǎng)站在Dreamweaver下的開發(fā)環(huán)境，在Dreamweaver中新建站點(diǎn)，任意取一個站點(diǎn)名，把剛才新建的那個文件夾作為站點(diǎn)文件夾就可以了，這樣站點(diǎn)目錄內(nèi)的html文件之間的鏈接會使用相對Url的形式。示范網(wǎng)站的特點(diǎn)眾多的網(wǎng)頁確定的主題統(tǒng)一的風(fēng)格、便捷的導(dǎo)航、欄目的分層

網(wǎng)站制作的流程：確定站點(diǎn)的核心內(nèi)容－網(wǎng)站的規(guī)劃－網(wǎng)站外觀的設(shè)計(jì)－網(wǎng)頁具體制作－網(wǎng)站性能測試－網(wǎng)站發(fā)布－網(wǎng)站更新與維護(hù)。網(wǎng)頁和網(wǎng)站的制作工具Adobe的DreamweaverCS3Microsoft的ExpressionWebVSWeb服務(wù)器和瀏覽器網(wǎng)頁被放置在Web服務(wù)器上用戶通過Url請求web服務(wù)器時，web服務(wù)器把相應(yīng)的網(wǎng)頁傳送到用戶瀏覽器端Web服務(wù)器的作用：對于靜態(tài)網(wǎng)頁，web服務(wù)器僅僅是定位到網(wǎng)站對應(yīng)的目錄，找到每次請求的網(wǎng)頁傳送給客戶端。對于動態(tài)網(wǎng)頁，web服務(wù)器找到該網(wǎng)頁后要先對動態(tài)網(wǎng)頁中的服務(wù)器端程序代碼進(jìn)行執(zhí)行，生成靜態(tài)網(wǎng)頁代碼再傳送給客戶端瀏覽器。Web服務(wù)器由于web服務(wù)器對靜態(tài)網(wǎng)頁起的只是一個查找和傳輸?shù)淖饔茫虼宋覀儨y試靜態(tài)網(wǎng)頁時可不安裝web服務(wù)器，直接找到該網(wǎng)站對應(yīng)的目錄雙擊網(wǎng)頁文件預(yù)覽測試，而測試或運(yùn)行動態(tài)網(wǎng)頁則一定要在本機(jī)上安裝web服務(wù)器(如IIS)，因?yàn)閯討B(tài)網(wǎng)頁要經(jīng)過web服務(wù)器解釋執(zhí)行生成html文檔才能被瀏覽器解釋瀏覽器瀏覽器：用戶瀏覽網(wǎng)頁所用瀏覽器的本質(zhì)：解釋html代碼生成我們看到的網(wǎng)頁目前常見的瀏覽器（按使用量多少排列）有：IE6、IE7、IE8、Firefox3、Safari4、GoogleChrome2、Opera10及NetscapeNavigator9瀏覽器的logo

IE7&IE8 Firefox3 NetscapeNavigator9Opera10 Safari4 GoogleChrome2靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁是不包含服務(wù)器端代碼的html文件，web服務(wù)器只是負(fù)責(zé)把靜態(tài)網(wǎng)頁發(fā)送給瀏覽器，由瀏覽器解釋執(zhí)行動態(tài)網(wǎng)頁中含有服務(wù)器端代碼，需要先由web服務(wù)器對這些服務(wù)器端代碼進(jìn)行解釋執(zhí)行生成客戶端代碼后再發(fā)送給客戶端瀏覽器動態(tài)網(wǎng)頁的特征同一個網(wǎng)頁根據(jù)每次請求的不同，可每次顯示不同的內(nèi)容因?yàn)橐@示不同的內(nèi)容，所以往往需要數(shù)據(jù)庫做支持從網(wǎng)頁的源代碼看，動態(tài)網(wǎng)頁中含有服務(wù)器端代碼，后綴名不能是.htm域名、ip和主機(jī)域名和主機(jī)的關(guān)系：多對一即在一臺主機(jī)上可建立多個網(wǎng)站，這些網(wǎng)站的存放方式稱為“虛擬主機(jī)”，通過web服務(wù)器上設(shè)置“主機(jī)頭”進(jìn)行區(qū)別。域名作用有二，一是將域名發(fā)送給DNS服務(wù)器解析得到web服務(wù)器的IP地址以進(jìn)行連接，二是將域名信息發(fā)送給web服務(wù)器，通過域名與web服務(wù)器上設(shè)置的“主機(jī)頭”進(jìn)行匹配確認(rèn)客戶端請求的是哪個網(wǎng)站，若客戶端沒有發(fā)送域名信息給web服務(wù)器，例如直接輸入ip，則web服務(wù)器將打開默認(rèn)網(wǎng)站。域名的作用1.方便記憶IP地址2.作為主機(jī)頭信息識別請求的網(wǎng)站URLURL（UniversalResourceLocator）是統(tǒng)一資源定位器的英文縮寫，每個站點(diǎn)或站點(diǎn)上的每個文件（網(wǎng)頁及所有資源文件）都有一個唯一的地址，瀏覽器是通過URL來定位目標(biāo)信息的URL的一般格式為：協(xié)議名://主機(jī)名[:端口號][/文件夾名/文件名]協(xié)議名一般有：http（超文本傳輸協(xié)議，用于傳送網(wǎng)頁）；ftp（文件傳輸協(xié)議，用于傳送文件）Url的舉例/web/1/200807/10172331484.html表示信息存放在一臺被稱為www的服務(wù)器上，是一個已被注冊的域名。主機(jī)名、域名合稱為主機(jī)頭。/web/是服務(wù)器網(wǎng)站目錄下的一個文件夾，這個一致資源地址將帶你到這個文件，10172331484.html是網(wǎng)頁的文件名復(fù)習(xí)題1.Internet上的域名和IP地址是（ ）的關(guān)系。A.一對多 B.一對一 C.多對一 D.多對多2.網(wǎng)頁的本質(zhì)是（ ）文件。A.圖像 B.純文本 C.可執(zhí)行程序 D.圖像和文本的壓縮3.下列哪項(xiàng)不是動態(tài)網(wǎng)頁的特點(diǎn)（ ）。A.動態(tài)網(wǎng)頁可每次顯示不同的內(nèi)容B.動態(tài)網(wǎng)頁中含有動畫 C.動態(tài)網(wǎng)頁中含有服務(wù)器端代碼

D.動態(tài)網(wǎng)頁一般需要數(shù)據(jù)庫做支持

中國高等院校計(jì)算機(jī)基礎(chǔ)教育課程體系規(guī)劃教材唐四薪編著清華大學(xué)出版社2009年11月《基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計(jì)》配套網(wǎng)站：第二章HTML、XHTML

與Web標(biāo)準(zhǔn)

本章要點(diǎn)HTML文檔的基本結(jié)構(gòu) 標(biāo)記(Tags)和元素(Elements)HTML標(biāo)記的分類 行內(nèi)元素和塊級元素2.3從HTML到XHTML的轉(zhuǎn)變html存在的問題和web標(biāo)準(zhǔn)XHTML與HTML的區(qū)別

(X)HTML文檔的基本結(jié)構(gòu)<html>…</html>：告訴瀏覽器HTML文檔開始和結(jié)束的位置，其中包括head部分和body部分。HTML文檔中所有的內(nèi)容都應(yīng)該在這兩個標(biāo)記之間，一個HTML文檔總是以<html>開始，以</html>結(jié)束。<head>…</head>：HTML文件的頭部標(biāo)記，頭部主要提供文檔的描述信息，head部分的所有內(nèi)容都不會顯示在瀏覽器窗口中，在其中可以放置頁面的標(biāo)題以及頁面的類型、使用的字符集、鏈接的其它腳本或樣式文件等內(nèi)容<body>…</body>：用來指明文檔的主體區(qū)域，網(wǎng)頁所要顯示的內(nèi)容都放在這個標(biāo)記內(nèi)，其結(jié)束標(biāo)記</body>指明主體區(qū)域的結(jié)束編寫HTML網(wǎng)頁文檔的方法HTML文檔是一個純文本文件，可以使用任何文本編輯器編寫保存使用記事本編輯一個html文件使用Dreamweaver新建一個html文件標(biāo)記(Tags)和元素（Elements）標(biāo)記是HTML文檔中一些有特定意義的符號，這些符號指明內(nèi)容的含義或結(jié)構(gòu)。標(biāo)記總是放在三角括號中，大多數(shù)標(biāo)記都是成對出現(xiàn)的，表示開始和結(jié)束。把HTML標(biāo)記如<p>…</p>和標(biāo)記之間的內(nèi)容組合稱為元素。網(wǎng)頁中文字，圖像，鏈接等所有的內(nèi)容都是以元素的形式出現(xiàn)在html代碼里的。標(biāo)記相同而標(biāo)記中的內(nèi)容不同應(yīng)視為不同的元素，同一網(wǎng)頁中標(biāo)記和標(biāo)記中的內(nèi)容都相同的元素如果出現(xiàn)兩次也應(yīng)視為兩個不同的元素，因?yàn)槿我粋€元素在網(wǎng)頁中瀏覽器都會為它分配唯一的id，不存在兩個元素的id也完全相同的情況。

例1下面body內(nèi)元素的個數(shù)是多少<body><ahref="box.html"><imgsrc="xxwlzx/cup.gif"border="0"align="left"/></a><p>圖片的說明內(nèi)容</p><hr/><p>圖片的說明內(nèi)容</p></body>答案：5個，即1個a元素、1個img元素、2個p元素和1個hr元素。帶有屬性的HTML元素的結(jié)構(gòu)

/>例2找出下面html代碼的錯誤下列HTML元素的寫法錯在什么地方？<img"birthday.jpg"/><i>Congratulations!<i><ahref="file.html">linkedtext</ahref="file.html"><p>Thisisanewparagraph<\p><li>Thelistitem</li>HTML標(biāo)記的分類頭部標(biāo)記：title,meta,link,style文本標(biāo)記：font,b,i,u,strong,段落標(biāo)記：p,hn,pre,marquee,br,hr列表標(biāo)記：ul,ol,li,dl,dt,dd5) 超鏈接標(biāo)記：a,map,area6) 圖像及媒體元素標(biāo)記：img,embed,object7) 表格標(biāo)記：table,tr,td,th,tbody8) 表單標(biāo)記：form,input,textarea,select,option,fieldset,legend9) 框架標(biāo)記：frameset,frame,iframe10) 容器標(biāo)記：div,spanHTML標(biāo)記的分類（2）為便于記憶，可將標(biāo)記按出現(xiàn)的情況分為：單標(biāo)記：<br/>，<hr/>，<img/>，<input/>，<meta/>，<link/>配對標(biāo)記：大部分標(biāo)記都是配對標(biāo)記成組標(biāo)記：table，form，ul,ol,dl,frameset，fieldset及其子標(biāo)記等，配對標(biāo)記中很多都是成組標(biāo)記行內(nèi)元素和塊級元素

行內(nèi)元素(inline)是指元素與元素之間從左到右并排排列，只有當(dāng)瀏覽器窗口容納不下才會轉(zhuǎn)到下一行，塊級元素(block)是指每個元素占據(jù)瀏覽器一整行位置，塊級元素與塊級元素之間自動換行，從上到下排列。塊級元素內(nèi)部可包含行內(nèi)元素或塊級元素，行內(nèi)元素內(nèi)部可包含行內(nèi)元素，但不得包含塊級元素，另外，塊級元素<p>元素內(nèi)部也不能包含其他的塊級元素行內(nèi)元素和塊級元素舉例行內(nèi)元素：a，img，font，b，i，u，span，input塊級元素：p,div,hn,pre,hr,ul,ol,li,form快速記憶法：即所有文本標(biāo)記，鏈接標(biāo)記和圖像標(biāo)記是行內(nèi)元素所有段落標(biāo)記，列表標(biāo)記是塊級元素行內(nèi)元素和塊級元素示例<body><b>粗體文字</b><p>圖片的標(biāo)題</p><p>圖片的說明內(nèi)容</p><b>粗體文字</b><b>粗體文字</b></body>常見的html標(biāo)記的屬性公共屬性：

align（對齊方式），border（邊框），title（提示文字），src（鏈接的文件路徑），style（引入CSS行內(nèi)樣式），id，name特有屬性：<ahref（鏈接的目標(biāo)），target（窗口打開方式）><inputtype（元素的類型），size（含義依據(jù)type而不同）>html存在的問題和web標(biāo)準(zhǔn)HTML語言最開始是用來描述文檔的結(jié)構(gòu)的，如標(biāo)題，段落等標(biāo)記，后來因?yàn)槿藗冞€想用它控制文檔的外觀，HTML又增加了一些控制字體，對齊等方面的標(biāo)記和屬性，這樣做的結(jié)果是HTML既可以用來描述文檔的結(jié)構(gòu)，又能表示文檔的外觀，但是兩方面都描述不好。于是人們想出了web標(biāo)準(zhǔn)，即結(jié)構(gòu)和表現(xiàn)分離，網(wǎng)頁由結(jié)構(gòu)，表現(xiàn)和行為組成，用HTML的新版本XHTML描述文檔的結(jié)構(gòu)，XHTML是一種為了適應(yīng)XML而重新改造的HTML。用CSS控制文檔的表現(xiàn)，因此XHTML和CSS就是內(nèi)容和形式的關(guān)系，由XHTML確定網(wǎng)頁的內(nèi)容，而通過CSS來決定頁面的表現(xiàn)形式。Web標(biāo)準(zhǔn)網(wǎng)頁由結(jié)構(gòu)，表現(xiàn)和行為組成，1．內(nèi)容：內(nèi)容就是頁面實(shí)際要傳達(dá)的真正信息，包含數(shù)據(jù)、文檔或者圖片等。注意這里強(qiáng)調(diào)的“真正”，是指純粹的數(shù)據(jù)信息本身。如：憶江南(1)唐.白居易江南好，風(fēng)景舊曾諳。(2)日出江花紅勝火，春來江水綠如藍(lán)，(3)能不憶江南。作者介紹772－846，字樂天，太原人。唐德宗朝進(jìn)士2．結(jié)構(gòu)：可以看到上面的文本信息本身已經(jīng)完整。但是混亂一團(tuán)，難以閱讀和理解，我們必須給它格式化一下。把它分成標(biāo)題、作者、章、節(jié)、段落和列表等。

Web標(biāo)準(zhǔn)－結(jié)構(gòu)標(biāo)題憶江南(1)

作者唐.白居易

正文

江南好，風(fēng)景舊曾諳。(2)

日出江花紅勝火，春來江水綠如藍(lán)，(3)

能不憶江南。

節(jié)1作者介紹

772－846，字樂天，太原人。唐德宗朝進(jìn)士

Web標(biāo)準(zhǔn)－表現(xiàn)表現(xiàn)（Presentation）：雖然定義了結(jié)構(gòu)，但是內(nèi)容還是原來的樣式?jīng)]有改變，例如標(biāo)題字體沒有變大，正文的顏色也沒有變化，沒有背景，沒有修飾。所有這些用來改變內(nèi)容外觀的東西，我們稱之為“表現(xiàn)”

行為行為：就是對內(nèi)容的交互及操作效果。例如，使用JavaScript可以響應(yīng)鼠標(biāo)的點(diǎn)擊和移動，可以判斷一些表單提交，使我們的操作能和網(wǎng)頁進(jìn)行交互。網(wǎng)頁的組成行為層內(nèi)容如何對事件做出響應(yīng)表現(xiàn)層內(nèi)容如何顯示結(jié)構(gòu)層內(nèi)容的語義內(nèi)容層內(nèi)容網(wǎng)頁是由四層信息構(gòu)成的一個共同體：Web標(biāo)準(zhǔn)的實(shí)現(xiàn)結(jié)構(gòu)標(biāo)準(zhǔn)語言（1）XML（2）XHTML表現(xiàn)標(biāo)準(zhǔn)語言CSS（CascadingStyle

Sheets，層疊樣式表）行為標(biāo)準(zhǔn)語言JavaScriptWeb標(biāo)準(zhǔn)網(wǎng)頁示例結(jié)構(gòu)表現(xiàn)行為XHTMLCSSJavaScriptXHTML與HTML的區(qū)別1.所有XHTML文檔必須在文檔的第一行有一個文檔類型的聲明（DOCTYPE），如：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">文檔類型聲明是用來說明XHTML使用標(biāo)準(zhǔn)的類型的，有Transitional，Strict和Frameset三種類型，Transitional是過渡類型的XHTML，表明兼容原來的HTML標(biāo)記和屬性；Strict是嚴(yán)格型的應(yīng)用方式，在這種形式下，不能使用HTML中任何樣式表現(xiàn)的標(biāo)記（如font）和屬性（如bgcolor）；Frameset是針對框架網(wǎng)頁的應(yīng)用方式

XHTML與HTML的區(qū)別(續(xù))2．XHTML文檔可通過xmlns定義命名空間(Namespace)，如<htmlxmlns=“/1999/xhtml”>

表示該xhtml文檔的命名空間是這個，如果我們換一個命名空間，就可以自定義xhtml文檔的標(biāo)記<A公司:程序員>小王</程序員><A公司:會計(jì)>小顏</會計(jì)><A公司:品管部><B公司:證券部><B公司:程序員>小劉</程序員>A公司和B公司就是兩個命名空間，可以在上面定義不同的標(biāo)記，只要引用相應(yīng)的XMLDTD就可以使用這些標(biāo)記了XHTML與HTML的區(qū)別(續(xù))3．文檔里必須具有html，head，body，title這些元素。4．在HTML語言規(guī)范的基礎(chǔ)上，XHTML對標(biāo)記還有下面一些額外的要求：1）標(biāo)記名和屬性名必須小寫；2）屬性值必須用雙引號引起；3）所有標(biāo)記包括單標(biāo)記都必須封閉。4）不允許省略屬性值（如<inputchecked/>錯例3找出符合xhtml語法規(guī)范的語句[例3]：下列哪條html語句的寫法符合XHTML規(guī)范：（）A.<br>B.<imgsrc=”photo.jpg”/>C.<IMGsrc=”photo.jpg”></IMG>D.<imgsrc=photo.jpg></img>復(fù)習(xí)題1.下列哪條不是XHTML規(guī)范的要求： （）A.標(biāo)記名必須小寫 B.屬性名必須小寫C.屬性值必須小寫 D.屬性值不能省略2.下列哪種不是XHTML的DTD： （）A.Loose B.Transitional C.Strict D.Frameset3.Web標(biāo)準(zhǔn)是由誰制訂的。 （）A.Microsoft B.NetscapeC.TheWorldWideWebConsortium（W3C） D.OSI4.html中的元素可分為塊級(block)元素和行內(nèi)(inline)元素，下列哪個元素是塊級元素：（）A.<p>B.<b>C.<a>D.<span>《基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計(jì)》唐四薪編著清華大學(xué)出版社2009年11月第三章HTML標(biāo)記功能詳述

本章要點(diǎn)文本格式標(biāo)記文本修飾標(biāo)記（字體標(biāo)記）列表標(biāo)記超鏈接標(biāo)記圖像和多媒體標(biāo)記HTML標(biāo)記基礎(chǔ)2.什么是標(biāo)記？標(biāo)記是網(wǎng)頁文檔中的一些有特定意義的符號。這些符號指明如何顯示文檔中的內(nèi)容。標(biāo)記可以具有相應(yīng)屬性即各種參數(shù)，如size、color、text、width和noshade等。例如：<p><fontsize="+1"color="red"></font></p>

文本格式標(biāo)記網(wǎng)頁中添加文本的方法網(wǎng)頁中添加文本的方法文本格式標(biāo)記是網(wǎng)頁中定義文本格式的標(biāo)記1）直接寫文本<div>文本</div>、<td>文本</td>、<body>文本</body>、<li>文本</li>；2）用段落標(biāo)記<p>……</p>格式化文本，各段落文本將分行顯示；3）用標(biāo)題標(biāo)記<hn>……</hn>格式化文本，作用：定義第n號標(biāo)題字體，n=1~6，n值越大，字越?。晃谋緦⒆?yōu)榇煮w顯示，可看成特殊的段落標(biāo)記；4)用預(yù)格式化標(biāo)記<pre>……</pre>格式化文本，標(biāo)記內(nèi)的文本將按原來的格式顯示，保留文本中的所有空格、換行和定位符；用標(biāo)題標(biāo)記<hn>……</hn>格式化文本<h1>第1號標(biāo)題字體</h1><h3>第3號標(biāo)題字體</h3><h4>第4號標(biāo)題字體</h4><h5align="center">第5號標(biāo)題字體（居中）</h5>標(biāo)題標(biāo)記和段落標(biāo)記<body><h1align="center">1號標(biāo)題</h1><p>第一段</p><h3>3號標(biāo)題</h3><p>第二段</p><h5align="right">5號標(biāo)題</h5><palign="right">第三段</p></body>用預(yù)格式化標(biāo)記<pre>…</pre>格式文本<pre>網(wǎng)頁設(shè)計(jì)師這一職業(yè)在今后來說還是有需求的。因?yàn)殡S著網(wǎng)絡(luò)越來越普及， 像我國的房地產(chǎn)市場</pre>文本的強(qiáng)制換行<br/>電子商務(wù)顧名思義就是在internet上做生意，<br/>商品展示，廣告宣傳、發(fā)布供求信息等活動實(shí)現(xiàn)的途徑就是網(wǎng)頁。強(qiáng)制不換行標(biāo)記<nobr>……</nobr>，常用英文人名<nobr>BillGates</nobr>文本中的空格標(biāo)記(<pre>除外)內(nèi)字符前的空格瀏覽器將全部忽略，字符與字符間的空格瀏覽器將只保留一個空格顯示，回車視為一個空格，塊級元素之間忽略所有空格。如果要輸入多個空格或需要在字符之前輸入空格需在源代碼中插入

（表示一個半角空格）。行內(nèi)元素可看成一個字符

文本中的轉(zhuǎn)義字符在HTML源代碼中，有些字符有特別的含義，比如小于號“<”就表示HTML標(biāo)記的開始，html源代碼中的“<”是不會在瀏覽器中顯示的，如果要瀏覽器顯示這些字符，就需要輸出他們對應(yīng)的轉(zhuǎn)義字符。例如：<表示<,>表示>,"表示“,&表示&, 表示空格等；通常，一個字符實(shí)體是由三部分組成的：（1）一個“&”符號（2）字符專用名稱或者字符代號（3）一個“;”符號在DW的設(shè)計(jì)視圖中輸入這些特殊字符，DW會自動在代碼視圖添加它們對應(yīng)的轉(zhuǎn)義字符DW中插入HTML文本元素的快捷鍵Enter插入<p> </p>（硬回車）shift＋enter

插入<br/>（軟回車）Ctrl＋shift＋space

插入一個

綜合實(shí)例<html><head><title>分段換行與預(yù)格式</title></head><body><h3>以下是直接寫文本的情況：</h3>

星期一、星期二、星期三、星期四、星期五、星期六、星期日。

<h3>以下是使用了三個換行標(biāo)記的情況：</h3>

星期一、星期二、<br/>星期三、星期四、<br/>

星期五、星期六、星期日。<br/><h3>以下使用分段標(biāo)記（分為兩段）：</h3><p>星期一、星期二、星期三、</p><p>星期四、星期五、星期六、星期日。</p><h3>以下使用預(yù)格式：</h3><pre>星期一、星期二、星期三、星期四、星期五、星期六、星期日。</pre></body></html>跑馬燈<marquee>標(biāo)記一個特殊的文本標(biāo)記，能使其中的文本在瀏覽器屏幕上不斷滾動。示例其中behavior=“alternate”設(shè)置滾動方式為來回滾動，設(shè)置為scroll表示循環(huán)滾動，設(shè)置為slide表示滾動到目的地就停止。direction屬性用于控制滾動的方向，可以上下滾動或左右滾動。loop設(shè)置滾動的次數(shù)，loop為0表示不斷滾動。scrollamount屬性設(shè)置滾動的速度，scrolldelay屬性設(shè)置兩次滾動間的間隔時間。<marquee>示例<marqueedirection="up"behavior="scroll"scrollamount="10"scrolldelay="4"loop="-1"align="middle"onmouseover=this.stop()onmouseout=this.start()height="120">  測試:網(wǎng)頁設(shè)計(jì)與制作學(xué)習(xí)：可以將swf文件下載下來用flash播放器全屏播放以達(dá)到最好效果，也可以在IE瀏覽器中按F11鍵達(dá)到全屏效果.</marquee>水平線標(biāo)記<hr/><hr/>標(biāo)記是在HTML文檔中加入一條水平線，它可以直接使用，具有size、color、width和noshade屬性。size是設(shè)置水平線的厚度，而width是設(shè)定水平線的寬度，默認(rèn)單位是像素。noshade屬性用來加入一條沒有陰影的水平線。<hrsize="3"width="85%"color=“red"noshade="noshade"align="center"/>文本修飾標(biāo)記（字體標(biāo)記）文本修飾標(biāo)記文本修飾標(biāo)記是對文本的外觀進(jìn)行修飾的標(biāo)記，如讓文字變色，加大，變粗體，添加下劃線等。1）font標(biāo)記：定義文字的各種屬性。例：<fontface="fontname"size="n"color="#0066CC">……</font>

<!--face屬性定義文字的字體，fontname為能獲得的字體名稱；size屬性定義文字的大小，n為正整數(shù)，n值越大則字越大；color屬性定義文字的顏色，-->注意：文本修飾標(biāo)記由于是行內(nèi)標(biāo)記，沒有align屬性(說明）加粗、傾斜與下劃線標(biāo)記2）加粗、傾斜與下劃線的定義標(biāo)記（b、i、u）<b>……</b><!--加粗文字--><i>……</i><!--文字傾斜--><u>……</u><!--加下劃線--><em>……</em><!--加粗，傾斜--><strong>……</strong><!--加粗文字-->使用加粗、傾斜與下劃線標(biāo)記（b、i、u）的組合，可對文本文字進(jìn)一步修飾。如：<b><fontcolor="red"size="5">此處以紅色五號字粗體顯示</font></b>上標(biāo)（sup）和下標(biāo)（sub）標(biāo)記用于書寫數(shù)學(xué)公式或分子式。如：H₂O<!--H2O-->X² <!--X2-->由于字體標(biāo)記屬于對文本外觀進(jìn)行修飾的標(biāo)記，是由于當(dāng)時CSS語言尚未出現(xiàn)時html定義的表現(xiàn)的范疇，隨著CSS的出現(xiàn)，這些表現(xiàn)功能均可以由CSS完成，所以不含有語義的字體標(biāo)記慢慢過時了。列表標(biāo)記列表標(biāo)記為了合理地組織文本，網(wǎng)頁中常常要用到列表。在HTML中可以使用的列表標(biāo)記有無序列表、有序列表和定義列表三種。無序列表(UnorderedList)<ul>,<li>

有序列表(OrderedList)<ol>,<li>定義列表(DefinedList)<dl>,<dt>,<dd>

嵌套的無序列表示例<ulid="nav"><li><ahref="">文章</a><ul> <li><ahref="">CSS教程</a></li> <li><ahref="">DOM教程</a></li> <li><ahref="">XML教程</a></li></ul></li><li><ahref="">參考</a><ul> <li><ahref="">XHTML</a></li> <li><ahref="">XML</a></li> <li><ahref="">CSS</a></li></ul></li></ul>有序列表(OrderedList)<ulid="nav"><li><ahref="">文章</a><ol><li><ahref="">CSS教程</a></li> <li><ahref="">DOM教程</a></li><li><ahref="">XML教程</a></li><li><ahref="">Flash教程</a></li> </ol></li></ul>定義列表(DefinedList)<dl><dt>湖南城市</dt><dd>長沙</dd><dd>衡陽</dd><dd>常德</dd></dl><dl><dt>湖北城市</dt><dd>武漢</dd><dd>襄樊</dd><dd>宜昌</dd></dl>超鏈接標(biāo)記<a>超鏈接標(biāo)記<a>超鏈接是網(wǎng)頁的基本元素，網(wǎng)頁正是通過超鏈接而相互鏈接組織成一個網(wǎng)站，并將internet上的各個網(wǎng)站聯(lián)系在一起。瀏覽者通過超鏈接選擇閱讀路徑。超鏈接是通過URL（統(tǒng)一資源定位器）來定位目標(biāo)信息的。URL包括4部分：網(wǎng)絡(luò)協(xié)議、域名或IP地址、路徑和文件名。URL分為絕對URL和相對URL絕對URL

絕對URL是采用完整的URL來規(guī)定文件在internet上的精確地點(diǎn)，包括完整的協(xié)議類型、計(jì)算機(jī)域名或IP地址、包含路徑信息的文檔名。書寫格式為：協(xié)議：//計(jì)算機(jī)域名或IP地址[/文檔路徑]［/文檔名］例如：http:///download/download.gif相對URL相對URL是相對于包含超鏈接頁的地點(diǎn)來規(guī)定文件的地點(diǎn)。如鏈接到同一路徑下的文檔，直接輸入文件名即可，如news.htm如鏈接到同一路徑下子文件夾的文檔，則先輸入子文件夾名和斜杠（/），再輸入文件名，如yule/news.htm如鏈接到上一級路徑中，要在文件名前輸入“../”，如“../news.htm”，其中“..”表示上級目錄，“.”表示本級目錄。相對URL示例wgzxyuleindex.htmoa.htmpop.htmnews.htm1.href="yule/news.htm"212.href="../oa.htm"3.href=“pop.htm”3相對URL的優(yōu)勢可以看出相對URL方式比較簡便，不需輸入一長串完整的URL；另外相對路徑還有一個非常重要的特點(diǎn)是：可以毫無顧忌地修改Web網(wǎng)站的域名或網(wǎng)站在服務(wù)器硬盤中的存放目錄。

超鏈接的種類－根據(jù)源對象劃分1)用文本做超鏈接：

<ahref="index.htm"target="_blank">首頁</a>2)用圖像做超鏈接：<ahref="index.htm"><imgsrc="images/info.gif"title="返回首頁"border="0"

/></a>3)文本圖像混合做鏈接：<ahref="brand1.htm"><imgsrc="green.gif"/><br/>格力空調(diào)1型</a>

該方法在商品展示的網(wǎng)站上較常用。使用圖像做超鏈接后，圖像會自動增加邊框，可設(shè)置邊框?yàn)?去掉超鏈接的種類－根據(jù)源對象劃分24)熱區(qū)鏈接：使用map在圖像上定義一幅地圖，地圖上可包含多個熱區(qū)，每個熱區(qū)用area單標(biāo)記定義，area的shape屬性定義了熱區(qū)的形狀，coords定義了熱區(qū)的坐標(biāo)點(diǎn)，href定義了熱區(qū)鏈接的文件。同時img標(biāo)記用usemap指明用了哪幅地圖<imgsrc="images/163227.png"width="600"height="518"border="0"usemap="#Map"/><mapname="Map"id="Map"><areashape="rect"coords="51,131,188,183"href="default.asp"/><areashape="rect"coords="313,129,450,180"href="#h3"/></map>

超鏈接的種類－根據(jù)href的取值1)鏈接到其他網(wǎng)頁或文件（jpg,rar等）內(nèi)部鏈接<ahref="../index.htm">返回首頁</a>外部鏈接<ahref="">網(wǎng)易網(wǎng)站</a>下載鏈接<ahref="software/wybook.rar">點(diǎn)擊下載</a>2)電子郵件鏈接<ahref="mailto:xiaoli@163.com">給我留言</a>如果IE不能打開該文件，則會彈出文件下載的對話框比普通鏈接多了個”mailto:”超鏈接的種類－根據(jù)href的取值23)錨鏈接（鏈接到頁面中某一指定的位置）當(dāng)網(wǎng)頁內(nèi)容很長，需要進(jìn)行頁內(nèi)跳轉(zhuǎn)鏈接時，就需要定義錨點(diǎn)和錨點(diǎn)鏈接，錨點(diǎn)可使用name屬性或id屬性定義。<aid="yyyy"></a><!--定義錨點(diǎn)yyyy--><ahref="#yyyy">……</a><!--網(wǎng)頁內(nèi)跳轉(zhuǎn)鏈接，鏈接到錨點(diǎn)yyyy處-->也可以鏈接到其他網(wǎng)頁某個錨點(diǎn)處<ahref="intro.htm#yyyy">……</a><!--鏈接到intro.htm網(wǎng)頁的錨點(diǎn)yyyy處-->4)空鏈接和腳本鏈接:<ahref=“#”>……</a><!--相當(dāng)于沒有定義錨點(diǎn)名的錨鏈接，網(wǎng)頁會返回頁面頂端--><ahref="JavaScript:alert('確定刪除嗎')">……</a>超鏈接的打開方式（target屬性的取值）在本窗口打開：_self（target的默認(rèn)值）在新窗口打開：_blank在父窗口打開：_parent將鏈接的文件載入到父框架在整個窗口打開：_top：將鏈接的文件載入到整個瀏覽器窗口中，并刪除所有框架_parent、_top僅僅在網(wǎng)頁被嵌入到其他網(wǎng)頁中有效，如框架中的網(wǎng)頁，所以這兩種取值用得很少。超鏈接的title屬性title屬性在很多標(biāo)記里都有，其作用是在鼠標(biāo)停留在該元素上時顯示設(shè)置的說明文字如<p><ahref="定義列表.html"title="格力太陽能喜獲國家免檢產(chǎn)品稱號">格力太陽能喜獲…</a></p>超鏈接制作的原則1)可以使用相對鏈接盡量不要使用絕對鏈接，如../index.htm而不是2)鏈接目標(biāo)盡可能簡單如，而不是/index.jsp課后思考url（統(tǒng)一資源定位器）url一般作為哪些屬性的取值？

href=“index.asp”src=“l(fā)ogo.gif”url的種類 相對url

絕對urlurl格式的類型 協(xié)議名://主機(jī)ip或域名/文件目錄/文件名url協(xié)議的類型常見的url協(xié)議的類型httpftpfile:///web/wy.gif當(dāng)在DW中建立網(wǎng)站目錄后，那么網(wǎng)站目錄內(nèi)的文件之間建立鏈接就會自動采用相對鏈接的方式，相對鏈接以網(wǎng)站目錄為基準(zhǔn)。若沒建立網(wǎng)站目錄，DW則采用file協(xié)議方式，以磁盤根目錄為基準(zhǔn)，建立鏈接，而這是我們應(yīng)該避免的圖像標(biāo)記<img/>圖像標(biāo)記：<imgsrc=“圖像文件名”/>

將圖形文件嵌入到網(wǎng)頁文檔中的當(dāng)前位置說明：網(wǎng)頁中插入圖像有兩種方法，一是插入一個<img>元素，二是將圖像作為背景嵌入到網(wǎng)頁中由于CSS的背景屬性的功能很強(qiáng)大，現(xiàn)在更推薦將所有的圖像都作為背景嵌入。如果圖像是通過<img>元素插入，則可以在瀏覽器上通過按住鼠標(biāo)左鍵拖動選中圖片，或者將它拖動到地址欄里，如果作為背景嵌入，則無法選中圖片圖像標(biāo)記<img>網(wǎng)頁中支持的圖像文件格式網(wǎng)頁中可以插入的圖像文件的類型有jpg格式，gif格式和png格式。這些文件都是壓縮格式的圖像格式，其中jpg格式適合用于網(wǎng)頁中較大尺寸的真彩色圖片，是一種有損壓縮的格式；gif格式一般用于較小尺寸的圖片，是一種無損壓縮的格式，只支持256色，GIF在存儲非連續(xù)色調(diào)的圖像或具有大面積單一色彩的圖像方面比較出色，gif格式的特點(diǎn)是可以實(shí)現(xiàn)gif動畫，和gif全透明的圖像；png格式可以用于alpha透明效果，但I(xiàn)E6不能夠支持。

<img>標(biāo)記的常見屬性<img>是一個行內(nèi)元素，插入<img>元素不會導(dǎo)致任何換行。下面是<img>標(biāo)記的常見屬性：img的屬性含義src圖片文件的url地址alt當(dāng)圖片無法顯示時顯示的替換文字title鼠標(biāo)停留在圖片上時顯示的說明文字align圖片的對齊方式，默認(rèn)為基線對齊，即圖片的下邊緣和文字的下邊緣對齊width、height圖片在網(wǎng)頁中的寬和高在單元格中插入圖像的方法對于表格布局的網(wǎng)頁，所有的元素都是放置在單元格中的，圖像也不例外，要在單元格中插入圖像，且單元格的邊框和圖像之間沒有間隙。那么必須將該單元格的寬和高設(shè)置為圖片的寬和高，且表格中其它單元格的大小也必須固定，然后確保<td>與</td>之間只有<img>標(biāo)記，沒有空格和換行符，否則單元格會被空格撐開。如：<tdwidth="768"height="132"><imgsrc="images/info.gif"/></td><!--</td>不能換行--><img>插入圖像的對齊方式<img>標(biāo)記的對齊方式仍然通過align屬性實(shí)現(xiàn)，但其取值多達(dá)9種，其中要實(shí)現(xiàn)圖片和文本混排可使用“左對齊”或“右對齊”，要實(shí)現(xiàn)文本和圖片頂部對齊可使用“文本上方”。<imgsrc="images/info.gif"width="158"height="41"align="left"/>，但通常是將圖片放在表格里，通過表格定位來實(shí)現(xiàn)文本和圖像的混排。復(fù)習(xí)題a標(biāo)記的常用屬性有哪些hreftargetnametitleimg標(biāo)記的常用屬性有哪些srcwidthheightalttitle作業(yè)（第一次）用DW制作一個個人求職的網(wǎng)頁，要求用表格布局，網(wǎng)頁中必須包含圖像、文本、列表、鏈接及表格等基本元素，制作完成后，把該網(wǎng)頁的源代碼抄寫兩遍交上來或者直接用編寫代碼的方式制作該網(wǎng)頁，再在作業(yè)本上抄寫兩遍下次上課前必須交，否則扣10分(10/30)媒體元素插入標(biāo)記<embed/><object></object>插入flash的兩種方法方法一：執(zhí)行菜單命令：“插入－媒體－flash”，在代碼視圖中可看到插入flash元素是通過同時插入object標(biāo)記和embed標(biāo)記實(shí)現(xiàn)的，以確保在IE5和Firefox中都獲得應(yīng)有的效果方法二：執(zhí)行菜單命令：“插入－媒體－插件”，此方法在代碼視圖中僅插入了embed元素。由于IE6和Firefox都能正常顯示效果，而代碼更簡潔，所以推薦用這種方式（但不能用來插入透明flash，否則IE瀏覽器中沒有object標(biāo)記的parm屬性不會透明）在圖像上添加透明flash首先可以將一張需要放置透明flash的圖片作為單元格的背景導(dǎo)入，然后在此單元格內(nèi)插入一個透明flash文件，可以調(diào)整此flash元素的大小與單元格相一致，選中該flash文件，點(diǎn)擊屬性面板里的“參數(shù)”按鈕，新建一個參數(shù)“wmode”值設(shè)置為“transparent”。

<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"width="768"height="132"><paramname="movie"value="xxwlzx/10.swf"/><paramname="quality"value="high"/>

<paramname="wmode"value="transparent"/><embedsrc="xxwlzx/10.swf"quality="high"pluginspage="/go/getflashplayer"type="application/x-shockwave-flash"width="768"height="130"wmode="transparent"></embed></object>這句使flash在IE瀏覽器中透明這句使flash在非IE瀏覽器中透明插入視頻或音頻文件插入視頻可分別使用ActiveX按鈕或插件按鈕實(shí)現(xiàn)<objectwidth="280"height="216"><paramname="autostart"value="false"/><embedsrc="2.mpg"width="280"height="216"autostart="false"></embed></object>ActiveX方式<embedsrc=“2.mpg”width=“276”height=“218”autostart=“false”></embed>插件方式流媒體簡介流媒體實(shí)際指的是一種新的媒體傳送方式，而非一種新的媒體,流式傳輸方式將整個多媒體文件經(jīng)過特殊的壓縮方式分成一個個壓縮包，由視頻服務(wù)器向用戶計(jì)算機(jī)連續(xù)、實(shí)時傳送。在采用流式傳輸方式的系統(tǒng)中，用戶不必像采用下載方式那樣等到整個文件全部下載完畢常見的流媒體文件格式real公司：rm\rmvb\raapple公司：quicktime\movmicrosoft公司：asf\wmv\wma插入流媒體元素的方法網(wǎng)頁中插入流媒體也能向插入一般媒體一樣使用embed標(biāo)記，只是要在classId框中設(shè)置流媒體的類型插入RealPlayer流格式的視頻文件屬性面板中設(shè)置:ClassID為RealPlayer……。選中Embed復(fù)選框。Src為zhaodan.rm。單擊“參數(shù)…”按鈕，設(shè)置屬性。parm參數(shù)示例參數(shù)：console屬性：可以將各種不同的RealPlayer控制聚集在網(wǎng)頁上，這樣它們可以交互使用或是保持獨(dú)立，而且互相不影響演示1:8000/ec/youhua/kclx-1.htm容器標(biāo)記<div><span>div和spandiv和span是不含有任何語義的標(biāo)記，用來在其中放置任何網(wǎng)頁元素，就象一個容器一樣，當(dāng)把文字放入后，文字的格式外觀都不會發(fā)生任何改變，應(yīng)用容器標(biāo)記的主要作用是通過引入CSS屬性對容器內(nèi)元素內(nèi)容的表現(xiàn)進(jìn)行設(shè)置。div和span的唯一區(qū)別是div是塊級元素，span是行內(nèi)元素。div和span<body><divstyle="background-color:#3399ff">塊狀區(qū)域1<