基于Web標準的網(wǎng)頁設(shè)計與制作

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

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

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

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

基本色相為：紅、橙、黃、綠、藍、紫六色。在各色中間加插一兩個中間色，按光譜順序為：紅、橙紅、黃橙、黃、黃綠、綠、綠藍、藍綠、藍、藍紫、紫、紅紫,形成十二基本色相。

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

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

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

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

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

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

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

從以上例子可看出三原色視覺沖擊力最強，也最是刺目的，容易制造沖突、煩燥、不舒適的心情，所以是較難掌握的配色，大面積大范圍使用要慎重。間色是由三原色中的兩色調(diào)配二次，間于原色和復色之間，屬于中性色，視覺沖擊力次之，顏色的刺激緩和不少，給人舒適、愉悅的心情，是較容易掌握的配色，也是在設(shè)計中使用得比較多的顏色。復色是由兩種間色或原色與間色相混合而產(chǎn)生的顏色，呈灰色階，視覺沖擊力更弱，柔和但是使人沉悶壓抑。復色調(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睛色

在小范圍內(nèi)點上強烈的顏色來突出主題效果，使頁面更加鮮明生動。■背景色

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

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

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

色輪上的任意顏色，以及它的補色的兩邊顏色，當使用在同個版面上的時候被稱為“分離補色”。分離補色的運用可以造成很強烈的對比。

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

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

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

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

類似色的調(diào)和

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

調(diào)和方法有：

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

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

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

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

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

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

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

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

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

URL的結(jié)構(gòu)internetInternet是由遍布全世界的各種各樣的網(wǎng)絡(luò)通過TCP/IP協(xié)議連接成的一個松散結(jié)合的全球網(wǎng)，它使網(wǎng)絡(luò)上的各臺計算機（Internet上稱為主機，即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ù)信息有機地編織在一起，通過瀏覽器（browser）提供一種友好的信息查詢界面。WWW特點WWW具有三個統(tǒng)一：

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

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

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

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

網(wǎng)站制作的流程：確定站點的核心內(nèi)容－網(wǎng)站的規(guī)劃－網(wǎng)站外觀的設(shè)計－網(wǎng)頁具體制作－網(wǎng)站性能測試－網(wǎng)站發(fā)布－網(wǎng)站更新與維護。網(wǎng)頁和網(wǎng)站的制作工具Adobe的DreamweaverCS3Microsoft的ExpressionWebVSWeb服務(wù)器和瀏覽器網(wǎng)頁被放置在Web服務(wù)器上用戶通過Url請求web服務(wù)器時，web服務(wù)器把相應的網(wǎng)頁傳送到用戶瀏覽器端Web服務(wù)器的作用：對于靜態(tài)網(wǎng)頁，web服務(wù)器僅僅是定位到網(wǎng)站對應的目錄，找到每次請求的網(wǎng)頁傳送給客戶端。對于動態(tài)網(wǎng)頁，web服務(wù)器找到該網(wǎng)頁后要先對動態(tài)網(wǎng)頁中的服務(wù)器端程序代碼進行執(zhí)行，生成靜態(tài)網(wǎng)頁代碼再傳送給客戶端瀏覽器。Web服務(wù)器由于web服務(wù)器對靜態(tài)網(wǎng)頁起的只是一個查找和傳輸?shù)淖饔?，因此我們測試靜態(tài)網(wǎng)頁時可不安裝web服務(wù)器，直接找到該網(wǎng)站對應的目錄雙擊網(wǎng)頁文件預覽測試，而測試或運行動態(tài)網(wǎng)頁則一定要在本機上安裝web服務(wù)器(如IIS)，因為動態(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ù)器只是負責把靜態(tài)網(wǎng)頁發(fā)送給瀏覽器，由瀏覽器解釋執(zhí)行動態(tài)網(wǎng)頁中含有服務(wù)器端代碼，需要先由web服務(wù)器對這些服務(wù)器端代碼進行解釋執(zhí)行生成客戶端代碼后再發(fā)送給客戶端瀏覽器動態(tài)網(wǎng)頁的特征同一個網(wǎng)頁根據(jù)每次請求的不同，可每次顯示不同的內(nèi)容因為要顯示不同的內(nèi)容，所以往往需要數(shù)據(jù)庫做支持從網(wǎng)頁的源代碼看，動態(tài)網(wǎng)頁中含有服務(wù)器端代碼，后綴名不能是.htm域名、ip和主機域名和主機的關(guān)系：多對一即在一臺主機上可建立多個網(wǎng)站，這些網(wǎng)站的存放方式稱為“虛擬主機”，通過web服務(wù)器上設(shè)置“主機頭”進行區(qū)別。域名作用有二，一是將域名發(fā)送給DNS服務(wù)器解析得到web服務(wù)器的IP地址以進行連接，二是將域名信息發(fā)送給web服務(wù)器，通過域名與web服務(wù)器上設(shè)置的“主機頭”進行匹配確認客戶端請求的是哪個網(wǎng)站，若客戶端沒有發(fā)送域名信息給web服務(wù)器，例如直接輸入ip，則web服務(wù)器將打開默認網(wǎng)站。域名的作用1.方便記憶IP地址2.作為主機頭信息識別請求的網(wǎng)站URLURL（UniversalResourceLocator）是統(tǒng)一資源定位器的英文縮寫，每個站點或站點上的每個文件（網(wǎng)頁及所有資源文件）都有一個唯一的地址，瀏覽器是通過URL來定位目標信息的URL的一般格式為：協(xié)議名://主機名[:端口號][/文件夾名/文件名]協(xié)議名一般有：http（超文本傳輸協(xié)議，用于傳送網(wǎng)頁）；ftp（文件傳輸協(xié)議，用于傳送文件）Url的舉例/web/1/200807/10172331484.html表示信息存放在一臺被稱為www的服務(wù)器上，是一個已被注冊的域名。主機名、域名合稱為主機頭。/web/是服務(wù)器網(wǎng)站目錄下的一個文件夾，這個一致資源地址將帶你到這個文件，10172331484.html是網(wǎng)頁的文件名復習題1.Internet上的域名和IP地址是（ ）的關(guān)系。A.一對多 B.一對一 C.多對一 D.多對多2.網(wǎng)頁的本質(zhì)是（ ）文件。A.圖像 B.純文本 C.可執(zhí)行程序 D.圖像和文本的壓縮3.下列哪項不是動態(tài)網(wǎng)頁的特點（ ）。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ù)庫做支持

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

與Web標準

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

(X)HTML文檔的基本結(jié)構(gòu)<html>…</html>：告訴瀏覽器HTML文檔開始和結(jié)束的位置，其中包括head部分和body部分。HTML文檔中所有的內(nèi)容都應該在這兩個標記之間，一個HTML文檔總是以<html>開始，以</html>結(jié)束。<head>…</head>：HTML文件的頭部標記，頭部主要提供文檔的描述信息，head部分的所有內(nèi)容都不會顯示在瀏覽器窗口中，在其中可以放置頁面的標題以及頁面的類型、使用的字符集、鏈接的其它腳本或樣式文件等內(nèi)容<body>…</body>：用來指明文檔的主體區(qū)域，網(wǎng)頁所要顯示的內(nèi)容都放在這個標記內(nèi)，其結(jié)束標記</body>指明主體區(qū)域的結(jié)束編寫HTML網(wǎng)頁文檔的方法HTML文檔是一個純文本文件，可以使用任何文本編輯器編寫保存使用記事本編輯一個html文件使用Dreamweaver新建一個html文件標記(Tags)和元素（Elements）標記是HTML文檔中一些有特定意義的符號，這些符號指明內(nèi)容的含義或結(jié)構(gòu)。標記總是放在三角括號中，大多數(shù)標記都是成對出現(xiàn)的，表示開始和結(jié)束。把HTML標記如<p>…</p>和標記之間的內(nèi)容組合稱為元素。網(wǎng)頁中文字，圖像，鏈接等所有的內(nèi)容都是以元素的形式出現(xiàn)在html代碼里的。標記相同而標記中的內(nèi)容不同應視為不同的元素，同一網(wǎng)頁中標記和標記中的內(nèi)容都相同的元素如果出現(xià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標記的分類頭部標記：title,meta,link,style文本標記：font,b,i,u,strong,段落標記：p,hn,pre,marquee,br,hr列表標記：ul,ol,li,dl,dt,dd5) 超鏈接標記：a,map,area6) 圖像及媒體元素標記：img,embed,object7) 表格標記：table,tr,td,th,tbody8) 表單標記：form,input,textarea,select,option,fieldset,legend9) 框架標記：frameset,frame,iframe10) 容器標記：div,spanHTML標記的分類（2）為便于記憶，可將標記按出現(xiàn)的情況分為：單標記：<br/>，<hr/>，<img/>，<input/>，<meta/>，<link/>配對標記：大部分標記都是配對標記成組標記：table，form，ul,ol,dl,frameset，fieldset及其子標記等，配對標記中很多都是成組標記行內(nèi)元素和塊級元素

行內(nèi)元素(inline)是指元素與元素之間從左到右并排排列，只有當瀏覽器窗口容納不下才會轉(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快速記憶法：即所有文本標記，鏈接標記和圖像標記是行內(nèi)元素所有段落標記，列表標記是塊級元素行內(nèi)元素和塊級元素示例<body><b>粗體文字</b><p>圖片的標題</p><p>圖片的說明內(nèi)容</p><b>粗體文字</b><b>粗體文字</b></body>常見的html標記的屬性公共屬性：

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

Web標準－結(jié)構(gòu)標題憶江南(1)

作者唐.白居易

正文

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

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

能不憶江南。

節(jié)1作者介紹

772－846，字樂天，太原人。唐德宗朝進士

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

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

Sheets，層疊樣式表）行為標準語言JavaScriptWeb標準網(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使用標準的類型的，有Transitional，Strict和Frameset三種類型，Transitional是過渡類型的XHTML，表明兼容原來的HTML標記和屬性；Strict是嚴格型的應用方式，在這種形式下，不能使用HTML中任何樣式表現(xiàn)的標記（如font）和屬性（如bgcolor）；Frameset是針對框架網(wǎng)頁的應用方式

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

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

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

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

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

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

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

插入一個

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

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

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

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

星期五、星期六、星期日。<br/><h3>以下使用分段標記（分為兩段）：</h3><p>星期一、星期二、星期三、</p><p>星期四、星期五、星期六、星期日。</p><h3>以下使用預格式：</h3><pre>星期一、星期二、星期三、星期四、星期五、星期六、星期日。</pre></body></html>跑馬燈<marquee>標記一個特殊的文本標記，能使其中的文本在瀏覽器屏幕上不斷滾動。示例其中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è)計與制作學習：可以將swf文件下載下來用flash播放器全屏播放以達到最好效果，也可以在IE瀏覽器中按F11鍵達到全屏效果.</marquee>水平線標記<hr/><hr/>標記是在HTML文檔中加入一條水平線，它可以直接使用，具有size、color、width和noshade屬性。size是設(shè)置水平線的厚度，而width是設(shè)定水平線的寬度，默認單位是像素。noshade屬性用來加入一條沒有陰影的水平線。<hrsize="3"width="85%"color=“red"noshade="noshade"align="center"/>文本修飾標記（字體標記）文本修飾標記文本修飾標記是對文本的外觀進行修飾的標記，如讓文字變色，加大，變粗體，添加下劃線等。1）font標記：定義文字的各種屬性。例：<fontface="fontname"size="n"color="#0066CC">……</font>

<!--face屬性定義文字的字體，fontname為能獲得的字體名稱；size屬性定義文字的大小，n為正整數(shù)，n值越大則字越大；color屬性定義文字的顏色，-->注意：文本修飾標記由于是行內(nèi)標記，沒有align屬性(說明）加粗、傾斜與下劃線標記2）加粗、傾斜與下劃線的定義標記（b、i、u）<b>……</b><!--加粗文字--><i>……</i><!--文字傾斜--><u>……</u><!--加下劃線--><em>……</em><!--加粗，傾斜--><strong>……</strong><!--加粗文字-->使用加粗、傾斜與下劃線標記（b、i、u）的組合，可對文本文字進一步修飾。如：<b><fontcolor="red"size="5">此處以紅色五號字粗體顯示</font></b>上標（sup）和下標（sub）標記用于書寫數(shù)學公式或分子式。如：H₂O<!--H2O-->X² <!--X2-->由于字體標記屬于對文本外觀進行修飾的標記，是由于當時CSS語言尚未出現(xiàn)時html定義的表現(xiàn)的范疇，隨著CSS的出現(xiàn)，這些表現(xiàn)功能均可以由CSS完成，所以不含有語義的字體標記慢慢過時了。列表標記列表標記為了合理地組織文本，網(wǎng)頁中常常要用到列表。在HTML中可以使用的列表標記有無序列表、有序列表和定義列表三種。無序列表(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>超鏈接標記<a>超鏈接標記<a>超鏈接是網(wǎng)頁的基本元素，網(wǎng)頁正是通過超鏈接而相互鏈接組織成一個網(wǎng)站，并將internet上的各個網(wǎng)站聯(lián)系在一起。瀏覽者通過超鏈接選擇閱讀路徑。超鏈接是通過URL（統(tǒng)一資源定位器）來定位目標信息的。URL包括4部分：網(wǎng)絡(luò)協(xié)議、域名或IP地址、路徑和文件名。URL分為絕對URL和相對URL絕對URL

絕對URL是采用完整的URL來規(guī)定文件在internet上的精確地點，包括完整的協(xié)議類型、計算機域名或IP地址、包含路徑信息的文檔名。書寫格式為：協(xié)議：//計算機域名或IP地址[/文檔路徑]［/文檔名］例如：http:///download/download.gif相對URL相對URL是相對于包含超鏈接頁的地點來規(guī)定文件的地點。如鏈接到同一路徑下的文檔，直接輸入文件名即可，如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；另外相對路徑還有一個非常重要的特點是：可以毫無顧忌地修改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è)置邊框為0去掉超鏈接的種類－根據(jù)源對象劃分24)熱區(qū)鏈接：使用map在圖像上定義一幅地圖，地圖上可包含多個熱區(qū)，每個熱區(qū)用area單標記定義，area的shape屬性定義了熱區(qū)的形狀，coords定義了熱區(qū)的坐標點，href定義了熱區(qū)鏈接的文件。同時img標記用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">點擊下載</a>2)電子郵件鏈接<ahref="mailto:xiaoli@163.com">給我留言</a>如果IE不能打開該文件，則會彈出文件下載的對話框比普通鏈接多了個”mailto:”超鏈接的種類－根據(jù)href的取值23)錨鏈接（鏈接到頁面中某一指定的位置）當網(wǎng)頁內(nèi)容很長，需要進行頁內(nèi)跳轉(zhuǎn)鏈接時，就需要定義錨點和錨點鏈接，錨點可使用name屬性或id屬性定義。<aid="yyyy"></a><!--定義錨點yyyy--><ahref="#yyyy">……</a><!--網(wǎng)頁內(nèi)跳轉(zhuǎn)鏈接，鏈接到錨點yyyy處-->也可以鏈接到其他網(wǎng)頁某個錨點處<ahref="intro.htm#yyyy">……</a><!--鏈接到intro.htm網(wǎng)頁的錨點yyyy處-->4)空鏈接和腳本鏈接:<ahref=“#”>……</a><!--相當于沒有定義錨點名的錨鏈接，網(wǎng)頁會返回頁面頂端--><ahref="JavaScript:alert('確定刪除嗎')">……</a>超鏈接的打開方式（target屬性的取值）在本窗口打開：_self（target的默認值）在新窗口打開：_blank在父窗口打開：_parent將鏈接的文件載入到父框架在整個窗口打開：_top：將鏈接的文件載入到整個瀏覽器窗口中，并刪除所有框架_parent、_top僅僅在網(wǎng)頁被嵌入到其他網(wǎng)頁中有效，如框架中的網(wǎng)頁，所以這兩種取值用得很少。超鏈接的title屬性title屬性在很多標記里都有，其作用是在鼠標停留在該元素上時顯示設(shè)置的說明文字如<p><ahref="定義列表.html"title="格力太陽能喜獲國家免檢產(chǎn)品稱號">格力太陽能喜獲…</a></p>超鏈接制作的原則1)可以使用相對鏈接盡量不要使用絕對鏈接，如../index.htm而不是2)鏈接目標盡可能簡單如，而不是/index.jsp課后思考url（統(tǒng)一資源定位器）url一般作為哪些屬性的取值？

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

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

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

<img>標記的常見屬性<img>是一個行內(nèi)元素，插入<img>元素不會導致任何換行。下面是<img>標記的常見屬性：img的屬性含義src圖片文件的url地址alt當圖片無法顯示時顯示的替換文字title鼠標停留在圖片上時顯示的說明文字align圖片的對齊方式，默認為基線對齊，即圖片的下邊緣和文字的下邊緣對齊width、height圖片在網(wǎng)頁中的寬和高在單元格中插入圖像的方法對于表格布局的網(wǎng)頁，所有的元素都是放置在單元格中的，圖像也不例外，要在單元格中插入圖像，且單元格的邊框和圖像之間沒有間隙。那么必須將該單元格的寬和高設(shè)置為圖片的寬和高，且表格中其它單元格的大小也必須固定，然后確保<td>與</td>之間只有<img>標記，沒有空格和換行符，否則單元格會被空格撐開。如：<tdwidth="768"height="132"><imgsrc="images/info.gif"/></td><!--</td>不能換行--><img>插入圖像的對齊方式<img>標記的對齊方式仍然通過align屬性實現(xiàn)，但其取值多達9種，其中要實現(xiàn)圖片和文本混排可使用“左對齊”或“右對齊”，要實現(xiàn)文本和圖片頂部對齊可使用“文本上方”。<imgsrc="images/info.gif"width="158"height="41"align="left"/>，但通常是將圖片放在表格里，通過表格定位來實現(xiàn)文本和圖像的混排。復習題a標記的常用屬性有哪些hreftargetnametitleimg標記的常用屬性有哪些srcwidthheightalttitle作業(yè)（第一次）用DW制作一個個人求職的網(wǎng)頁，要求用表格布局，網(wǎng)頁中必須包含圖像、文本、列表、鏈接及表格等基本元素，制作完成后，把該網(wǎng)頁的源代碼抄寫兩遍交上來或者直接用編寫代碼的方式制作該網(wǎng)頁，再在作業(yè)本上抄寫兩遍下次上課前必須交，否則扣10分(10/30)媒體元素插入標記<embed/><object></object>插入flash的兩種方法方法一：執(zhí)行菜單命令：“插入－媒體－flash”，在代碼視圖中可看到插入flash元素是通過同時插入object標記和embed標記實現(xiàn)的，以確保在IE5和Firefox中都獲得應有的效果方法二：執(zhí)行菜單命令：“插入－媒體－插件”，此方法在代碼視圖中僅插入了embed元素。由于IE6和Firefox都能正常顯示效果，而代碼更簡潔，所以推薦用這種方式（但不能用來插入透明flash，否則IE瀏覽器中沒有object標記的parm屬性不會透明）在圖像上添加透明flash首先可以將一張需要放置透明flash的圖片作為單元格的背景導入，然后在此單元格內(nèi)插入一個透明flash文件，可以調(diào)整此flash元素的大小與單元格相一致，選中該flash文件，點擊屬性面板里的“參數(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按鈕或插件按鈕實現(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>插件方式流媒體簡介流媒體實際指的是一種新的媒體傳送方式，而非一種新的媒體,流式傳輸方式將整個多媒體文件經(jīng)過特殊的壓縮方式分成一個個壓縮包，由視頻服務(wù)器向用戶計算機連續(xù)、實時傳送。在采用流式傳輸方式的系統(tǒng)中，用戶不必像采用下載方式那樣等到整個文件全部下載完畢常見的流媒體文件格式real公司：rm\rmvb\raapple公司：quicktime\movmicrosoft公司：asf\wmv\wma插入流媒體元素的方法網(wǎng)頁中插入流媒體也能向插入一般媒體一樣使用embed標記，只是要在classId框中設(shè)置流媒體的類型插入RealPlayer流格式的視頻文件屬性面板中設(shè)置:ClassID為RealPlayer……。選中Embed復選框。Src為zhaodan.rm。單擊“參數(shù)…”按鈕，設(shè)置屬性。parm參數(shù)示例參數(shù)：console屬性：可以將各種不同的RealPlayer控制聚集在網(wǎng)頁上，這樣它們可以交互使用或是保持獨立，而且互相不影響演示1:8000/ec/youhua/kclx-1.htm容器標記<div><span>div和spandiv和span是不含有任何語義的標記，用來在其中放置任何網(wǎng)頁元素，就象一個容器一樣，當把文字放入后，文字的格式外觀都不會發(fā)生任何改變，應用容器標記的主要作用是通過引入CSS屬性對容器內(nèi)元素內(nèi)容的表現(xiàn)進行設(shè)置。div和span的唯一區(qū)別是div是塊級元素，span是行內(nèi)元素。div和span<body><divstyle="background-color:#3399ff">塊狀區(qū)域1<