第六章初識(shí)網(wǎng)站和網(wǎng)課件

第一章初識(shí)網(wǎng)站和網(wǎng)頁(yè)網(wǎng)站和網(wǎng)頁(yè)網(wǎng)頁(yè)中的元素類型從功能角度分析網(wǎng)頁(yè)常用網(wǎng)站管理與制作軟件網(wǎng)站建設(shè)流程初識(shí)Dreamweaver界面第一章初識(shí)網(wǎng)站和網(wǎng)頁(yè)網(wǎng)站和網(wǎng)頁(yè)1.1網(wǎng)站和網(wǎng)頁(yè)

網(wǎng)站是網(wǎng)頁(yè)的集合，網(wǎng)頁(yè)是組成網(wǎng)站的元素。1.1.1網(wǎng)站、網(wǎng)頁(yè)和主頁(yè)網(wǎng)頁(yè)1.1網(wǎng)站和網(wǎng)頁(yè)

網(wǎng)站是網(wǎng)頁(yè)的集合，網(wǎng)頁(yè)是組成網(wǎng)站的元素大型網(wǎng)站一個(gè)小型網(wǎng)站可能只包含幾個(gè)網(wǎng)頁(yè)，而一個(gè)大型網(wǎng)站則可能包含成千上萬(wàn)個(gè)網(wǎng)頁(yè)。小型網(wǎng)站大型網(wǎng)站一個(gè)小型網(wǎng)站可能只包含幾個(gè)網(wǎng)頁(yè)，而一個(gè)大型網(wǎng)站則可能新浪網(wǎng)站首頁(yè)主頁(yè)也叫首頁(yè)，每個(gè)網(wǎng)站都有自己的首頁(yè)，它是瀏覽者登錄網(wǎng)站時(shí)看見(jiàn)的第一個(gè)網(wǎng)頁(yè)，也是網(wǎng)站的入口。新浪網(wǎng)站首頁(yè)主頁(yè)也叫首頁(yè)，每個(gè)網(wǎng)站都有自己的首頁(yè)，它是瀏覽者1.1.2網(wǎng)頁(yè)是什么

網(wǎng)頁(yè)中除了包含文字外，還包含圖像、動(dòng)畫等內(nèi)容。圖像動(dòng)畫文字1.1.2網(wǎng)頁(yè)是什么網(wǎng)頁(yè)中除了包含文字外，還包含圖像、我們看到的一個(gè)個(gè)網(wǎng)頁(yè)都是由多個(gè)文件組成的。網(wǎng)頁(yè)文件是“根”，圖像和動(dòng)畫文件都是“枝葉”。圖像文件網(wǎng)頁(yè)文件我們看到的一個(gè)個(gè)網(wǎng)頁(yè)都是由多個(gè)文件組成的。網(wǎng)頁(yè)文件是“根”，選擇“文件”>“另存為”菜單在瀏覽器中選擇“文件”菜單中的“另存為”，可將網(wǎng)頁(yè)保存到磁盤中。選擇“文件”>“另存為”菜單在瀏覽器中選擇“文件”菜單中的“1.2網(wǎng)頁(yè)中的元素類型1.2.1網(wǎng)頁(yè)中的文字與圖像文字與圖像是網(wǎng)頁(yè)中的基本元素，是瀏覽者獲得相關(guān)信息的主要來(lái)源?？稍谠O(shè)計(jì)網(wǎng)頁(yè)時(shí)為文字設(shè)置位置、字體、字號(hào)、顏色、對(duì)齊方式，以及加粗和傾斜等格式。網(wǎng)頁(yè)中只能使用和顯示JPEG、GIF和PNG格式的圖像，其他諸如BMP和TIF等格式的圖像目前還都不能用于網(wǎng)頁(yè)中。

1.2網(wǎng)頁(yè)中的元素類型1.2.1網(wǎng)頁(yè)中的文字與圖像1.2.2網(wǎng)頁(yè)中使用的動(dòng)畫與視頻影像視頻流技術(shù)常見(jiàn)的格式有RealVideo及AppleQuickTime。

GIF動(dòng)畫SWF動(dòng)畫目前，大家在網(wǎng)頁(yè)中看到的動(dòng)畫主要包括兩類，即動(dòng)態(tài)GIF格式動(dòng)畫和SWF格式動(dòng)畫。動(dòng)態(tài)GIF格式動(dòng)畫的原理十分簡(jiǎn)單，就是高速連續(xù)顯示多幅靜態(tài)圖像，就像播放動(dòng)畫片一樣。通常用于制作簡(jiǎn)單的小型動(dòng)畫。如果需要在網(wǎng)頁(yè)上使用一些大型、復(fù)雜或帶有聲音的動(dòng)畫，可借助Macromedia的Flash軟件來(lái)制作SWF動(dòng)畫。1.2.2網(wǎng)頁(yè)中使用的動(dòng)畫與視頻影像視頻流技術(shù)常見(jiàn)的格式1.2.3網(wǎng)頁(yè)中使用的聲音適當(dāng)?shù)脑诰W(wǎng)頁(yè)上加點(diǎn)音樂(lè)效果，會(huì)使網(wǎng)頁(yè)更具吸引力。目前，網(wǎng)上比較流行的音頻格式主要有MIDI、WAV、MP3與RealAudio。控制音樂(lè)的播放1.2.3網(wǎng)頁(yè)中使用的聲音適當(dāng)?shù)脑诰W(wǎng)頁(yè)上加點(diǎn)音樂(lè)效果，會(huì)1.3從功能角度分析網(wǎng)頁(yè)從功能的角度來(lái)看，可以將網(wǎng)頁(yè)中的元素分為站標(biāo)、導(dǎo)航欄、廣告條、標(biāo)題欄和按鈕。站標(biāo)導(dǎo)航欄廣告條標(biāo)題欄按鈕1.3從功能角度分析網(wǎng)頁(yè)從功能的角度來(lái)看，可以將網(wǎng)頁(yè)中的1.3.1站標(biāo)站標(biāo)也叫LOGO，是網(wǎng)站的標(biāo)志，其作用是使人看見(jiàn)它就能夠聯(lián)想到企業(yè)。因此，網(wǎng)站LOGO通常采用企業(yè)的LOGO。LOGO通常采用帶有企業(yè)特色和思想的圖案，或是與企業(yè)相關(guān)的字符或符號(hào)及其變形，當(dāng)然也有很多是圖文組合。1.3.1站標(biāo)站標(biāo)也叫LOGO，是網(wǎng)站的標(biāo)志，其作用是使1.3.2導(dǎo)航欄導(dǎo)航欄實(shí)際上是網(wǎng)站內(nèi)多個(gè)頁(yè)面的超鏈接組合。導(dǎo)航欄也是網(wǎng)站中所有重要內(nèi)容的概括，可以讓瀏覽者在最短時(shí)間內(nèi)了解網(wǎng)站的主要內(nèi)容。設(shè)計(jì)導(dǎo)航欄時(shí)，有幾點(diǎn)需要注意。1.3.2導(dǎo)航欄導(dǎo)航欄實(shí)際上是網(wǎng)站內(nèi)多個(gè)頁(yè)面的超鏈接組合如果網(wǎng)站內(nèi)容不多，并且導(dǎo)航欄不超過(guò)兩排，可以根據(jù)網(wǎng)站風(fēng)格嘗試靈活擺放，如放在網(wǎng)頁(yè)的左側(cè)或者放在頁(yè)面上方等。頁(yè)面左側(cè)頁(yè)面上方如果網(wǎng)站內(nèi)容不多，并且導(dǎo)航欄不超過(guò)兩排，可以根據(jù)網(wǎng)站風(fēng)格嘗試如果網(wǎng)站的欄目很多，可以將導(dǎo)航欄分為多排放置在主頁(yè)LOGO的下方或右側(cè)，為便于觀看，可為各排設(shè)置不同的底色。LOGO右側(cè)LOGO下方如果網(wǎng)站的欄目很多，可以將導(dǎo)航欄分為多排放置在主頁(yè)LOGO的如果導(dǎo)航欄內(nèi)容較多的話，盡量使用文字超鏈接而不用圖片。不過(guò)，如果導(dǎo)航欄內(nèi)容不多，或者網(wǎng)頁(yè)內(nèi)容比較活潑的話，多采用圖片或Flash制作導(dǎo)航欄。圖片導(dǎo)航欄Flash導(dǎo)航欄如果導(dǎo)航欄內(nèi)容較多的話，盡量使用文字超鏈接而不用圖片。不過(guò)，1.3.3廣告條廣告條又稱Banner，其功能是宣傳網(wǎng)站或替其他企業(yè)做廣告，以賺取廣告費(fèi)。在Banner的制作過(guò)程中有一些要點(diǎn)需要注意：Banner可以是靜態(tài)的也可以是動(dòng)態(tài)的。Banner的體積不宜過(guò)大，盡量使用GIF格式的圖片與動(dòng)畫或Flash動(dòng)畫。Banner中的文字不要太多，只要達(dá)到一定的提醒效果就可以。Banner中圖片的顏色不要太多，尤其是GIF格式的圖片或動(dòng)畫，要避免出現(xiàn)顏色的漸變和光暈效果。1.3.3廣告條廣告條又稱Banner，其功能是宣傳網(wǎng)站1.3.4標(biāo)題欄這里的標(biāo)題欄不是指整個(gè)網(wǎng)頁(yè)的標(biāo)題欄，而是網(wǎng)頁(yè)內(nèi)部各版塊的標(biāo)題欄，是各版塊內(nèi)容的概括。標(biāo)題欄可以是文字加單元格背景，也可以是圖片，一般的大型網(wǎng)站都采用前者，一些內(nèi)容少的小網(wǎng)站采用后者。標(biāo)題欄標(biāo)題欄1.3.4標(biāo)題欄這里的標(biāo)題欄不是指整個(gè)網(wǎng)頁(yè)的標(biāo)題欄，而是1.3.5按鈕網(wǎng)頁(yè)中的按鈕被點(diǎn)擊之后，網(wǎng)頁(yè)會(huì)實(shí)現(xiàn)相應(yīng)的操作，比如頁(yè)面跳轉(zhuǎn)，或數(shù)據(jù)的傳輸?shù)?。設(shè)計(jì)按鈕時(shí)，要保證按鈕與頁(yè)面的協(xié)調(diào)，不能太搶眼，如果按鈕上有字則盡量使用單色或漸變色背景，保證字跡清晰。當(dāng)頁(yè)面上有多個(gè)按鈕的時(shí)候，應(yīng)分清主次，根據(jù)網(wǎng)頁(yè)的需要改變按鈕的顏色或者大小。按鈕按鈕1.3.5按鈕網(wǎng)頁(yè)中的按鈕被點(diǎn)擊之后，網(wǎng)頁(yè)會(huì)實(shí)現(xiàn)相應(yīng)的操1.4常用網(wǎng)站管理與制作軟件1.4.1常用網(wǎng)站管理與網(wǎng)頁(yè)編輯軟件Dreamweaver：網(wǎng)頁(yè)制作軟件三劍客之一，該軟件是現(xiàn)在使用最多的網(wǎng)頁(yè)編輯工具，它支持HTML動(dòng)態(tài)網(wǎng)頁(yè)、Flash動(dòng)畫、插件，能實(shí)現(xiàn)很多FrontPage無(wú)法實(shí)現(xiàn)的功能，如動(dòng)態(tài)按鈕、下拉菜單等。另外，它還可以用來(lái)作為動(dòng)態(tài)網(wǎng)站的開(kāi)發(fā)環(huán)境。FrontPage：該軟件是目前最簡(jiǎn)單、最容易上手，且功能強(qiáng)大的網(wǎng)頁(yè)制作利器，特別適合網(wǎng)頁(yè)初學(xué)者使用。不過(guò)，F(xiàn)rontpage也有不少缺點(diǎn)：首先是兼容性不好，利用FrontPage做出來(lái)的網(wǎng)頁(yè)往往不能用Netscape瀏覽器正常顯示；其次，生成的垃圾代碼多；此外，F(xiàn)rontPage對(duì)動(dòng)態(tài)網(wǎng)頁(yè)支持不好，不支持Flash，顯得有點(diǎn)落伍了。1.4常用網(wǎng)站管理與制作軟件1.4.1常用網(wǎng)站管理與網(wǎng)1.4.2網(wǎng)頁(yè)設(shè)計(jì)輔助軟件在進(jìn)行網(wǎng)頁(yè)制作時(shí)，除了需要Dreamweaver、FrontPage等軟件外，還會(huì)用到Fireworks、Flash、Photoshop等軟件，這些軟件的主要功能與特點(diǎn)如下：Fireworks：主要用于制作網(wǎng)頁(yè)圖像、標(biāo)志、GIF動(dòng)畫、圖像按鈕與導(dǎo)航欄等。Flash：主要用于制作矢量動(dòng)畫，如廣告、網(wǎng)站片頭動(dòng)畫、動(dòng)畫短片、MTV等。Photoshop：Adobe公司出品的一個(gè)優(yōu)秀而且強(qiáng)大的圖形圖像處理軟件，起初它的應(yīng)用領(lǐng)域主要是平面設(shè)計(jì)而不是網(wǎng)頁(yè)設(shè)計(jì)，但是它所具有的強(qiáng)大功能完全涵蓋了網(wǎng)頁(yè)設(shè)計(jì)所涉及到的各種需求（除了多媒體）。1.4.2網(wǎng)頁(yè)設(shè)計(jì)輔助軟件在進(jìn)行網(wǎng)頁(yè)制作時(shí)，除了需要Dr1.4.3常用網(wǎng)站程序設(shè)計(jì)語(yǔ)言如果網(wǎng)站中包含動(dòng)態(tài)網(wǎng)頁(yè)，除了需要學(xué)習(xí)一些常用的網(wǎng)頁(yè)設(shè)計(jì)軟件外，還應(yīng)掌握一些常用的網(wǎng)站程序設(shè)計(jì)語(yǔ)言。JavaScript和VBScript腳本語(yǔ)言JavaCGIASPASP.netPHPJSP1.4.3常用網(wǎng)站程序設(shè)計(jì)語(yǔ)言如果網(wǎng)站中包含動(dòng)態(tài)網(wǎng)頁(yè)，除1.5網(wǎng)站建設(shè)流程1.5.1根據(jù)要求確定網(wǎng)站內(nèi)容建設(shè)網(wǎng)站要有目的性，首先要確定網(wǎng)站的性質(zhì)和受眾，并預(yù)期網(wǎng)站發(fā)布后的反響。確定了這些后就要開(kāi)始組織網(wǎng)站的主要內(nèi)容。1.5網(wǎng)站建設(shè)流程1.5.1根據(jù)要求確定網(wǎng)站內(nèi)容建設(shè)1.5.2規(guī)劃網(wǎng)站欄目確定了網(wǎng)站內(nèi)容后，就要開(kāi)始進(jìn)行網(wǎng)站規(guī)劃。例如，將網(wǎng)站的內(nèi)容劃分成哪些欄目，從而使網(wǎng)站既便于瀏覽者的瀏覽，也有利于網(wǎng)站將來(lái)的維護(hù)和更新。1.5.2規(guī)劃網(wǎng)站欄目確定了網(wǎng)站內(nèi)容后，就要開(kāi)始進(jìn)行網(wǎng)站1.5.3確定網(wǎng)頁(yè)尺寸與版面布局目前顯示器最常用的分辨率是1024×768像素和800×600像素。在1024×768的分辨率下顯示的頁(yè)面的尺寸應(yīng)該為1007×600像素，而800×600的分辨率下顯示的頁(yè)面尺寸為778×435像素。1.5.3確定網(wǎng)頁(yè)尺寸與版面布局目前顯示器最常用的分辨率確定了網(wǎng)頁(yè)尺寸后，接下來(lái)的任務(wù)就是確定網(wǎng)頁(yè)布局類型了。網(wǎng)頁(yè)布局類型沒(méi)有確定的標(biāo)準(zhǔn)，可以根據(jù)需要制定。常見(jiàn)的布局有上下分割型、左右分割型和復(fù)合分割型（上下分割和左右分割結(jié)合）。上下分割型左右分割型確定了網(wǎng)頁(yè)尺寸后，接下來(lái)的任務(wù)就是確定網(wǎng)頁(yè)布局類型了。網(wǎng)頁(yè)布1.5.4確定網(wǎng)站配色與風(fēng)格不同的網(wǎng)站有著自己不同的風(fēng)格，也有著自己不同的顏色?；旧暇W(wǎng)站使用的顏色從出發(fā)點(diǎn)上看可以分為以下3種類型：行業(yè)風(fēng)格色：許多網(wǎng)站使用顏色秉承著所屬行業(yè)的風(fēng)格。企業(yè)標(biāo)準(zhǔn)色：在現(xiàn)代企業(yè)中，公司的CI形象顯得尤其重要，每一個(gè)公司的CI設(shè)計(jì)必然要有標(biāo)準(zhǔn)的顏色。比如Intel官方網(wǎng)站的主色調(diào)是一種接近于天藍(lán)的藍(lán)色，個(gè)人習(xí)慣色：這種配色方法的使用在很大程度上是憑設(shè)計(jì)者的個(gè)人愛(ài)好以及當(dāng)時(shí)的心態(tài)決定的，在個(gè)人網(wǎng)站較為多見(jiàn)。1.5.4確定網(wǎng)站配色與風(fēng)格不同的網(wǎng)站有著自己不同的風(fēng)格行業(yè)風(fēng)格色著名的化妝品公司—玫琳凱中國(guó)網(wǎng)站使用的顏色是粉色。這幾乎是所有化妝品行業(yè)中最常用到的顏色，這種顏色代表了高貴，典雅以及甜蜜等；行業(yè)風(fēng)格色著名的化妝品公司—玫琳凱中國(guó)網(wǎng)站使用的顏色是粉色。企業(yè)標(biāo)準(zhǔn)色在現(xiàn)代企業(yè)中，公司的CI形象顯得尤其重要，每一個(gè)公司的CI設(shè)計(jì)必然要有標(biāo)準(zhǔn)的顏色。比如Intel官方網(wǎng)站的主色調(diào)是一種接近于天藍(lán)的藍(lán)色。企業(yè)標(biāo)準(zhǔn)色在現(xiàn)代企業(yè)中，公司的CI形象顯得尤其重要，每一個(gè)公個(gè)人習(xí)慣色這種配色方法在設(shè)計(jì)的時(shí)候自由度非常高，同時(shí)所選的題材與要表現(xiàn)的內(nèi)容也是由設(shè)計(jì)者自己決定，比如設(shè)計(jì)者喜歡紅色和黑色，那么在設(shè)計(jì)的時(shí)候就傾向于使用這兩種顏色。個(gè)人習(xí)慣色這種配色方法在設(shè)計(jì)的時(shí)候自由度非常高，同時(shí)所選的題下面是一些網(wǎng)頁(yè)配色時(shí)的小技巧用一種色彩：這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度。用兩種色彩：先選定一種色彩，然后選擇它的對(duì)比色。用一個(gè)色系：簡(jiǎn)單地說(shuō)就是用一個(gè)感覺(jué)的色彩，例如淡藍(lán)、淡黃、淡綠，或者土黃、土灰、土藍(lán)。顏色不能太多：不要將所有顏色都用到，盡量控制在3～5種色彩以內(nèi)。背景和前文的對(duì)比：背景和前文的對(duì)比盡量要大（尤其不要使用花紋圖案作為頁(yè)面背景），以便突出主要文字內(nèi)容。下面是一些網(wǎng)頁(yè)配色時(shí)的小技巧用一種色彩：這里是指先選定一種色1.5.5收集網(wǎng)頁(yè)所用素材在制作網(wǎng)頁(yè)之前，應(yīng)首先收集好制作網(wǎng)頁(yè)時(shí)要使用的素材，這些素材包括文字資料、圖片、動(dòng)畫、聲音、視頻等。對(duì)于一些原始的材料還可以使用PhotoShop、Fireworks、Flash等軟件進(jìn)行處理，使其可以更好地應(yīng)用于網(wǎng)頁(yè)。1.5.5收集網(wǎng)頁(yè)所用素材在制作網(wǎng)頁(yè)之前，應(yīng)首先收集好制1.5.6利用軟件制作網(wǎng)頁(yè)制作網(wǎng)頁(yè)也就是整合網(wǎng)頁(yè)素材，即使用Dreamweaver等軟件進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。還可以根據(jù)需要為網(wǎng)頁(yè)增加一些特效，比如閃爍的字幕、跳出動(dòng)畫、改變鼠標(biāo)的形狀等，這些多是通過(guò)JavaScript來(lái)實(shí)現(xiàn)的。1.5.6利用軟件制作網(wǎng)頁(yè)制作網(wǎng)頁(yè)也就是整合網(wǎng)頁(yè)素材，即1.5.7測(cè)試和發(fā)布網(wǎng)站在發(fā)布之前需要先對(duì)網(wǎng)站進(jìn)行測(cè)試，網(wǎng)站測(cè)試一般包括服務(wù)器穩(wěn)定和安全測(cè)試、程序和數(shù)據(jù)庫(kù)測(cè)試、網(wǎng)頁(yè)兼容性測(cè)試等。要發(fā)布網(wǎng)站，用戶需要具備兩個(gè)條件：域名和虛擬主機(jī)。提供這類服務(wù)的公司被稱為域名和網(wǎng)站托管服務(wù)商，目前，這類公司也有很多，如中國(guó)萬(wàn)網(wǎng)（）、通聯(lián)無(wú)限（）等。1.5.7測(cè)試和發(fā)布網(wǎng)站在發(fā)布之前需要先對(duì)網(wǎng)站進(jìn)行測(cè)試，1.6初識(shí)Dreamweaver界面1.6.1Dreamweaver8.0界面介紹

在首次啟動(dòng)Dreamweaver8時(shí)會(huì)出現(xiàn)如圖2-1的一個(gè)界面,這是一個(gè)“工作區(qū)設(shè)置”對(duì)話框，在對(duì)話框左側(cè)是Dreamweaver8的設(shè)計(jì)視圖，右側(cè)是Dreamweave8的代碼視圖。Dreamweaver8設(shè)計(jì)視圖布局提供了一個(gè)將全部元素置于一個(gè)窗口中的集成布局。我們選擇面向設(shè)計(jì)者的設(shè)計(jì)視圖布局。

1.6初識(shí)Dreamweaver界面1.6.1Dream1.6.1Dreamweaver8.0界面介紹

Dreamweaver8.0標(biāo)準(zhǔn)工作界面大致可以分為以下幾個(gè)區(qū)域:⒈標(biāo)題欄:⒉菜單欄：⒊文檔工具欄：⒋“插入”欄：⒌文檔窗口：⒍屬性欄：⒎狀態(tài)欄：⒏浮動(dòng)面板組：1.6.1Dreamweaver8.0界面介紹

Drea1.6.2常用工具

菜單欄工具：文件：用來(lái)管理文件。

插入：用來(lái)插入各種元素.

修改：具有對(duì)頁(yè)面元素修改的功能。

文本：用來(lái)對(duì)文本操作。

命令：所有的附加命令項(xiàng)

站點(diǎn)：用來(lái)創(chuàng)建和管理站點(diǎn)

窗口：用來(lái)顯示和隱藏控制面板以及切換文檔窗口

幫助：聯(lián)機(jī)幫助功能。1.6.2常用工具

1.6.2常用工具

文檔工具欄：“文檔”工具欄包含各種按鈕，它們提供各種“文檔”窗口視圖（如“設(shè)計(jì)”視圖和“代碼”視圖）的選項(xiàng)、各種查看選項(xiàng)和一些常用操作（如在瀏覽器中預(yù)覽）。界面如圖2-4所示。1.6.2常用工具

1.6.2常用工具

“插入”欄插入面板集成了所有可以在網(wǎng)頁(yè)應(yīng)用的對(duì)象包括“插入”菜單中的選項(xiàng)。有常用、布局、表單、文本、HTML、應(yīng)用程序、Flash元素和收藏夾共8個(gè)二級(jí)菜單共167個(gè)按鈕。插入面板組其實(shí)就是圖像化了的插入指令，通過(guò)一個(gè)個(gè)的按鈕，可以很容易的加入圖像、聲音、多媒體動(dòng)畫、表格。圖層、框架、表單、Flash和ActiveX等網(wǎng)頁(yè)元素。面板的界面如圖2-51.6.2常用工具

“插入”欄1.6.2常用工具

文檔窗口

“文檔”窗口顯示當(dāng)前文檔。可以選擇下列任一視圖：“設(shè)計(jì)”視圖是一個(gè)用于可視化頁(yè)面布局、可視化編輯和快速應(yīng)用程序開(kāi)發(fā)的設(shè)計(jì)環(huán)境。在該視圖中，Dreamweaver8.0顯示文檔的完全可編輯的可視化表示形式，類