第1章初識網站和網頁網站和網頁網頁中的元素類型從功能角度分析網頁常用網站管理與制作軟件網站建設流程第1章初識網站和網頁網站和網頁11.1網站和網頁

網站是網頁的集合，網頁是組成網站的元素。現場解答1：網站、網頁和主頁之間有何聯系網頁1.1網站和網頁

網站是網頁的集合，網頁是組成網站的元素2大型網站一個小型網站可能只包含幾個網頁，而一個大型網站則可能包含成千上萬個網頁。小型網站大型網站一個小型網站可能只包含幾個網頁，而一個大型網站則可能3新浪網站首頁主頁也叫首頁，每個網站都有自己的首頁，是瀏覽者登錄網站時看見的第一個網頁，也是網站的入口。新浪網站首頁主頁也叫首頁，每個網站都有自己的首頁，是瀏覽者登4現場解答2：什么是網頁

網頁中除了包含文字外，還包含圖像、動畫等內容。圖像動畫文字現場解答2：什么是網頁網頁中除了包含文字外，還包含圖像、動5我們看到的一個個網頁都是由多個文件組成的。網頁文件是“根”，圖像和動畫文件都是“枝葉”。圖像文件網頁文件我們看到的一個個網頁都是由多個文件組成的。網頁文件是“根”，6選擇“文件”>“另存為”菜單在瀏覽器中選擇“文件”菜單中的“另存為”，可將網頁保存到磁盤中。選擇“文件”>“另存為”菜單在瀏覽器中選擇“文件”菜單中的“71.2網頁中的元素類型現場解答1：了解網頁中的文字與圖像文字與圖像是網頁中的基本元素，是瀏覽者獲得相關信息的主要來源。可在設計網頁時為文字設置位置、字體、字號、顏色、對齊方式，以及加粗和傾斜等格式。網頁中只能使用和顯示JPEG、GIF和PNG格式的圖像，其他諸如BMP和TIF等格式的圖像目前還都不能用于網頁中。

1.2網頁中的元素類型現場解答1：了解網頁中的文字與圖像8現場解答2：網頁中的動畫與視頻影像有何特點

視頻流技術常見的格式有RealVideo及AppleQuickTime。

GIF動畫SWF動畫目前，大家在網頁中看到的動畫主要包括兩類，即動態GIF格式動畫和SWF格式動畫。動態GIF格式動畫的原理十分簡單，就是高速連續顯示多幅靜態圖像，就像播放動畫片一樣。通常用于制作簡單的小型動畫。如果需要在網頁上使用一些大型、復雜或帶有聲音的動畫，可借助Adobe的Flash軟件來制作SWF動畫。現場解答2：網頁中的動畫與視頻影像有何特點視頻流技術常見的9現場解答3：網頁中是否可以添加聲音

適當地在網頁上加點音樂效果，會使網頁更具吸引力。目前，網上比較流行的音頻格式主要有MIDI、WAV、MP3與RealAudio。控制音樂的播放現場解答3：網頁中是否可以添加聲音適當地在網頁上加點音樂效101.3從功能角度分析網頁從功能的角度來看，可以將網頁中的元素分為站標、導航欄、廣告條、標題欄和按鈕。站標導航欄廣告條標題欄按鈕1.3從功能角度分析網頁從功能的角度來看，可以將網頁中的11現場解答1：什么是站標

站標也叫LOGO，是網站的標志，其作用是使人看見它就能夠聯想到企業。因此，網站LOGO通常采用企業的LOGO。LOGO通常采用帶有企業特色和思想的圖案，或是與企業相關的字符或符號及其變形，當然也有很多是圖文組合。現場解答1：什么是站標站標也叫LOGO，是網站的標志，其作12現場解答2：導航欄的類型有哪些

導航欄實際上是網站內多個頁面的超鏈接組合。導航欄也是網站中所有重要內容的概括，可以讓瀏覽者在最短時間內了解網站的主要內容。設計導航欄時，有幾點需要注意。現場解答2：導航欄的類型有哪些導航欄實際上是網站內多個頁面13如果網站內容不多，并且導航欄不超過兩排，可以根據網站風格嘗試靈活擺放，如放在網頁的左側或者放在頁面上方等。頁面左側頁面上方如果網站內容不多，并且導航欄不超過兩排，可以根據網站風格嘗試14如果網站的欄目很多，可以將導航欄分為多排放置在主頁LOGO的右側或下方，為便于觀看，可為各排設置不同的底色。LOGO右側LOGO下方如果網站的欄目很多，可以將導航欄分為多排放置在主頁LOGO的15如果導航欄內容較多的話，盡量使用文字超鏈接而不用圖片。不過，如果導航欄內容不多，或者網頁內容比較活潑的話，多采用圖片或Flash制作導航欄。圖片導航欄Flash導航欄如果導航欄內容較多的話，盡量使用文字超鏈接而不用圖片。不過，16廣告條又稱Banner，其功能是宣傳網站或替其他企業做廣告，以賺取廣告費。現場解答3：廣告條有何特點

在Banner的制作過程中有一些要點需要注意：Banner可以是靜態的也可以是動態的。Banner的體積不宜過大，盡量使用GIF格式的圖片與動畫或Flash動畫。Banner中的文字不要太多，只要達到一定的提醒效果就可以。Banner中圖片的顏色不要太多，尤其是GIF格式的圖片或動畫，要避免出現顏色的漸變和光暈效果。廣告條又稱Banner，其功能是宣傳網站或替其他企業做廣告，17網頁內部各版塊的標題欄是各版塊內容的概括。

標題欄可以是文字加單元格背景，也可以是圖片，一般的大型網站都采用前者，一些內容少的小網站常采用后者。現場解答4：什么是版塊標題欄

標題欄標題欄

網頁內部各版塊的標題欄是各版塊內容的概括。現場解答4：什么18網頁中的按鈕被點擊之后，網頁會實現相應的操作，比如頁面跳轉，或數據的傳輸等。設計按鈕時，要保證按鈕與頁面的協調，不能太搶眼，如果按鈕上有字則盡量使用單色或漸變色背景，保證字跡清晰。當頁面上有多個按鈕的時候，應分清主次，根據網頁的需要改變按鈕的顏色或者大小。現場解答5：如何設計按鈕

按鈕按鈕網頁中的按鈕被點擊之后，網頁會實現相應的操作，比如頁面跳轉，19現場解答1：常用網站管理與網頁編輯軟件有哪些1.4常用網站管理與制作軟件Dreamweaver：網頁制作軟件三劍客之一，該軟件是現在使用最多的網頁編輯工具，它支持DHTML動態網頁、Flash動畫、插件，能實現很多FrontPage無法實現的功能，如動態按鈕、下拉菜單等。另外，它還可以用來作為動態網站的開發環境。FrontPage：該軟件是目前最簡單、最容易上手，且功能強大的網頁制作利器，特別適合網頁初學者使用。不過，Frontpage也有不少缺點：首先是兼容性不好，利用FrontPage做出來的網頁往往不能用Netscape瀏覽器正常顯示；其次，生成的垃圾代碼多；此外，FrontPage對動態網頁支持不好，不支持Flash，顯得有點落伍了。現場解答1：常用網站管理與網頁編輯軟件有哪些1.4常用20現場解答2：網頁設計輔助軟件有哪些

在進行網頁制作時，除了需要Dreamweaver、FrontPage等軟件外，還會用到Fireworks、Flash、Photoshop等軟件，這些軟件的主要功能與特點如下：Fireworks：主要用于制作網頁圖像、標志、GIF動畫、圖像按鈕與導航欄等。Flash：主要用于制作矢量動畫，如廣告、網站片頭動畫、動畫短片、MTV等。Photoshop：Adobe公司出品的一個優秀而且強大的圖形圖像處理軟件，起初它的應用領域主要是平面設計而不是網頁設計，但是它所具有的強大功能完全涵蓋了網頁設計所涉及到的各種需求（除了多媒體）。現場解答2：網頁設計輔助軟件有哪些在進行網頁制作時，除了需21現場解答3：常用網站程序設計語言有哪些

如果網站中包含動態網頁，除了需要學習一些常用的網頁設計軟件外，還應掌握一些常用的網站程序設計語言。JavaScript和VBScript腳本語言JavaCGIASPASP.netPHPJSP現場解答3：常用網站程序設計語言有哪些如果網站中包含動態網221.5網站建設流程1．根據要求確定網站內容建設網站要有目的性，首先要確定網站的性質和受眾，并預期網站發布后的反響。確定了這些后就要開始組織網站的主要內容。1.5網站建設流程1．根據要求確定網站內容建設網站要232．規劃網站欄目確定了網站內容后，就要開始進行網站規劃。例如，將網站的內容劃分成哪些欄目，從而使網站既便于瀏覽者的瀏覽，也有利于網站將來的維護和更新。2．規劃網站欄目確定了網站內容后，就要開始進行網站規劃。243．確定網頁尺寸與版面布局目前顯示器最常用的分辨率是1024×768像素和800×600像素。在1024×768的分辨率下顯示的頁面的尺寸應該為1007×600像素，而800×600的分辨率下顯示的頁面尺寸為778×435像素。3．確定網頁尺寸與版面布局目前顯示器最常用的分辨率是10225確定了網頁尺寸后，接下來的任務就是確定網頁布局類型了。網頁布局類型沒有確定的標準，可以根據需要制定。常見的布局有上下分割型、左右分割型和復合分割型（上下分割和左右分割結合）。上下分割型左右分割型確定了網頁尺寸后，接下來的任務就是確定網頁布局類型了。網頁布264．確定網站配色與風格不同的網站有著自己不同的風格，也有著自己不同的顏色。基本上網站使用的顏色從出發點上看可以分為以下3種類型：行業風格色：許多網站使用顏色秉承著所屬行業的風格。企業標準色：在現代企業中，公司的CI形象顯得尤其重要，每一個公司的CI設計必然要有標準的顏色。比如Intel官方網站的主色調是一種接近于天藍的藍色，個人習慣色：這種配色方法的使用在很大程度上是憑設計者的個人愛好以及當時的心態決定的，在個人網站較為多見。4．確定網站配色與風格不同的網站有著自己不同的風格，也有27行業風格色著名的化妝品公司—歐泊萊中國網站使用的顏色是粉色。這幾乎是所有化妝品行業中最常用到的顏色，這種顏色代表了高貴，典雅以及甜蜜等；行業風格色著名的化妝品公司—歐泊萊中國網站使用的顏色是粉色。28企業標準色在現代企業中，公司的CI形象顯得尤其重要，每一個公司的CI設計必然要有標準的顏色。比如Intel官方網站的主色調是一種接近于天藍的藍色。企業標準色在現代企業中，公司的CI形象顯得尤其重要，每一個公29個人習慣色這種配色方法在設計的時候自由度非常高，同時所選的題材與要表現的內容也是由設計者自己決定，比如設計者喜歡綠色，那么在設計的時候就傾向于使用這種顏色。個人習慣色這種配色方法在設計的時候自由度非常高，同時所選的題30下面是一些網頁配色時的小技巧用一種色彩：這里是指先選定一種色彩，然后調整透明度或者飽和度。用兩種色彩：先選定一種色彩，然后選擇它的對比色。用一個色系：簡單地說就是用一個感覺的色彩，例如淡藍、淡黃、淡綠，或者土黃、土灰、土藍。顏色不能太多：不要將所有顏色都用到，盡量控制在3～5種色彩以內。背景和前文的對比：背景和前文的對比盡量要大（尤其不要使用花紋圖案作為頁面背景），以便突出主要文字內容。下面是一些網頁配色時的小技巧用一種色彩：這里是指先選定一種色315．收集網頁所用素材在制作網頁之前，應首先收集好制作網頁時要使用的素材，這些素材包括文字資料、圖片、動畫、聲音、視頻等。對于一些原始的材料還可以使用PhotoShop、Fireworks、Flash等軟件進行處理，使其可以更好地應用于網頁。5．收集網頁所用素材在制作網頁之前，應首先收集好制作網頁326．利用軟件制作網頁制作網頁也就是整合網頁素材，即使用Dreamweaver等軟件進行網頁制作。還可以根據需要為網頁增加一些特效，比如閃爍的字幕、跳出動畫、改變鼠標的形狀等，這些多是通過JavaScript來實現的。6．利用軟件制作網頁制作網頁也就是整合網頁素材，即使用D337．測試和發布網站7．測試和發布網站34第1章初識網站和網頁網站和網頁網頁中的元素類型從功能角度分析網頁常用網站管理與制作軟件網站建設流程第1章初識網站和網頁網站和網頁351.1網站和網頁

網站是網頁的集合，網頁是組成網站的元素。現場解答1：網站、網頁和主頁之間有何聯系網頁1.1網站和網頁

網站是網頁的集合，網頁是組成網站的元素36大型網站一個小型網站可能只包含幾個網頁，而一個大型網站則可能包含成千上萬個網頁。小型網站大型網站一個小型網站可能只包含幾個網頁，而一個大型網站則可能37新浪網站首頁主頁也叫首頁，每個網站都有自己的首頁，是瀏覽者登錄網站時看見的第一個網頁，也是網站的入口。新浪網站首頁主頁也叫首頁，每個網站都有自己的首頁，是瀏覽者登38現場解答2：什么是網頁

網頁中除了包含文字外，還包含圖像、動畫等內容。圖像動畫文字現場解答2：什么是網頁網頁中除了包含文字外，還包含圖像、動39我們看到的一個個網頁都是由多個文件組成的。網頁文件是“根”，圖像和動畫文件都是“枝葉”。圖像文件網頁文件我們看到的一個個網頁都是由多個文件組成的。網頁文件是“根”，40選擇“文件”>“另存為”菜單在瀏覽器中選擇“文件”菜單中的“另存為”，可將網頁保存到磁盤中。選擇“文件”>“另存為”菜單在瀏覽器中選擇“文件”菜單中的“411.2網頁中的元素類型現場解答1：了解網頁中的文字與圖像文字與圖像是網頁中的基本元素，是瀏覽者獲得相關信息的主要來源。可在設計網頁時為文字設置位置、字體、字號、顏色、對齊方式，以及加粗和傾斜等格式。網頁中只能使用和顯示JPEG、GIF和PNG格式的圖像，其他諸如BMP和TIF等格式的圖像目前還都不能用于網頁中。

1.2網頁中的元素類型現場解答1：了解網頁中的文字與圖像42現場解答2：網頁中的動畫與視頻影像有何特點

視頻流技術常見的格式有RealVideo及AppleQuickTime。

GIF動畫SWF動畫目前，大家在網頁中看到的動畫主要包括兩類，即動態GIF格式動畫和SWF格式動畫。動態GIF格式動畫的原理十分簡單，就是高速連續顯示多幅靜態圖像，就像播放動畫片一樣。通常用于制作簡單的小型動畫。如果需要在網頁上使用一些大型、復雜或帶有聲音的動畫，可借助Adobe的Flash軟件來制作SWF動畫。現場解答2：網頁中的動畫與視頻影像有何特點視頻流技術常見的43現場解答3：網頁中是否可以添加聲音

適當地在網頁上加點音樂效果，會使網頁更具吸引力。目前，網上比較流行的音頻格式主要有MIDI、WAV、MP3與RealAudio。控制音樂的播放現場解答3：網頁中是否可以添加聲音適當地在網頁上加點音樂效441.3從功能角度分析網頁從功能的角度來看，可以將網頁中的元素分為站標、導航欄、廣告條、標題欄和按鈕。站標導航欄廣告條標題欄按鈕1.3從功能角度分析網頁從功能的角度來看，可以將網頁中的45現場解答1：什么是站標

站標也叫LOGO，是網站的標志，其作用是使人看見它就能夠聯想到企業。因此，網站LOGO通常采用企業的LOGO。LOGO通常采用帶有企業特色和思想的圖案，或是與企業相關的字符或符號及其變形，當然也有很多是圖文組合。現場解答1：什么是站標站標也叫LOGO，是網站的標志，其作46現場解答2：導航欄的類型有哪些

導航欄實際上是網站內多個頁面的超鏈接組合。導航欄也是網站中所有重要內容的概括，可以讓瀏覽者在最短時間內了解網站的主要內容。設計導航欄時，有幾點需要注意。現場解答2：導航欄的類型有哪些導航欄實際上是網站內多個頁面47如果網站內容不多，并且導航欄不超過兩排，可以根據網站風格嘗試靈活擺放，如放在網頁的左側或者放在頁面上方等。頁面左側頁面上方如果網站內容不多，并且導航欄不超過兩排，可以根據網站風格嘗試48如果網站的欄目很多，可以將導航欄分為多排放置在主頁LOGO的右側或下方，為便于觀看，可為各排設置不同的底色。LOGO右側LOGO下方如果網站的欄目很多，可以將導航欄分為多排放置在主頁LOGO的49如果導航欄內容較多的話，盡量使用文字超鏈接而不用圖片。不過，如果導航欄內容不多，或者網頁內容比較活潑的話，多采用圖片或Flash制作導航欄。圖片導航欄Flash導航欄如果導航欄內容較多的話，盡量使用文字超鏈接而不用圖片。不過，50廣告條又稱Banner，其功能是宣傳網站或替其他企業做廣告，以賺取廣告費。現場解答3：廣告條有何特點

在Banner的制作過程中有一些要點需要注意：Banner可以是靜態的也可以是動態的。Banner的體積不宜過大，盡量使用GIF格式的圖片與動畫或Flash動畫。Banner中的文字不要太多，只要達到一定的提醒效果就可以。Banner中圖片的顏色不要太多，尤其是GIF格式的圖片或動畫，要避免出現顏色的漸變和光暈效果。廣告條又稱Banner，其功能是宣傳網站或替其他企業做廣告，51網頁內部各版塊的標題欄是各版塊內容的概括。

標題欄可以是文字加單元格背景，也可以是圖片，一般的大型網站都采用前者，一些內容少的小網站常采用后者。現場解答4：什么是版塊標題欄

標題欄標題欄

網頁內部各版塊的標題欄是各版塊內容的概括。現場解答4：什么52網頁中的按鈕被點擊之后，網頁會實現相應的操作，比如頁面跳轉，或數據的傳輸等。設計按鈕時，要保證按鈕與頁面的協調，不能太搶眼，如果按鈕上有字則盡量使用單色或漸變色背景，保證字跡清晰。當頁面上有多個按鈕的時候，應分清主次，根據網頁的需要改變按鈕的顏色或者大小。現場解答5：如何設計按鈕

按鈕按鈕網頁中的按鈕被點擊之后，網頁會實現相應的操作，比如頁面跳轉，53現場解答1：常用網站管理與網頁編輯軟件有哪些1.4常用網站管理與制作軟件Dreamweaver：網頁制作軟件三劍客之一，該軟件是現在使用最多的網頁編輯工具，它支持DHTML動態網頁、Flash動畫、插件，能實現很多FrontPage無法實現的功能，如動態按鈕、下拉菜單等。另外，它還可以用來作為動態網站的開發環境。FrontPage：該軟件是目前最簡單、最容易上手，且功能強大的網頁制作利器，特別適合網頁初學者使用。不過，Frontpage也有不少缺點：首先是兼容性不好，利用FrontPage做出來的網頁往往不能用Netscape瀏覽器正常顯示；其次，生成的垃圾代碼多；此外，FrontPage對動態網頁支持不好，不支持Flash，顯得有點落伍了。現場解答1：常用網站管理與網頁編輯軟件有哪些1.4常用54現場解答2：網頁設計輔助軟件有哪些

在進行網頁制作時，除了需要Dreamweaver、FrontPage等軟件外，還會用到Fireworks、Flash、Photoshop等軟件，這些軟件的主要功能與特點如下：Fireworks：主要用于制作網頁圖像、標志、GIF動畫、圖像按鈕與導航欄等。Flash：主要用于制作矢量動畫，如廣告、網站片頭動畫、動畫短片、MTV等。Photoshop：Adobe公司出品的一個優秀而且強大的圖形圖像處理軟件，起初它的應用領域主要是平面設計而不是網頁設計，但是它所具有的強大功能完全涵蓋了網頁設計所涉及到的各種需求（除了多媒體）。現場解答2：網頁設計輔助軟件有哪些在進行網頁制作時，除了需55現場解答3：常用網站程序設計語言有哪些

如果網站中包含動態網頁，除了需要學習一些常用的網頁設計軟件外，還應掌握一些常用的網站程序設計語言。JavaScript和VBScript腳本語言JavaCGIASPASP.netPHPJSP現場解答3：常用網站程序設計語言有哪些如果網站中包含動態網561.5網站建設流程1．根據要求確定網站內容建設網站要有目的性，首先要確定網站的性質和受眾，并預期網站發布后的反響。確定了這些后就要開始組織網站的主要內容。1.5網站建設流程1．根據要求確定網站內容建設網站要572．規劃網站欄目確定了網站內容后，就要開始進行網站規劃。例如，將網站的內容劃分成哪些欄目，從而使網站既便于瀏覽者的瀏覽，也有利于網站將來的維護和更新。2．規劃網站欄目確定了網站內容后，就要開始進行網站規劃。583．確定網頁尺寸與版面布局目前顯示器最常用的分辨率是1024×768像素和800×600像素。在1024×768的分辨率下顯示的頁面的尺寸應該為1007×600像素，而800×600的分辨率下顯示的頁面尺寸為778×435像素。3．確定網頁尺寸與版面布局目前顯示器最常用的分辨率是10259確定了網頁尺寸后，接下來的任務就是確定網頁布局類型了。網頁布局類型沒有確定的標準，可以根據需要制定。常見的布局有上下分割型、左右分割型和復合分割型（上下分割和左右分割結合）。上下分割型左右分割型確定了網頁尺寸后，接下來的任務就是確定網頁布局類型了。網頁布604．確定網站配色與風格不同的網站有著自己不同的風格，也有著自己不同的顏色。基本上網站使用的顏色從出發點上看可以分為以下3種類型：行業風格色：許多網站使用顏色秉承著所屬行業的風格。企業標準色：在現代企業中，公司的CI形象顯得尤其重要，每一個公司的CI設計必然要有標準的顏色。比如Intel官方網站的主