【Dreamweave CS4案例教程】第1章 初識(shí)網(wǎng)站和網(wǎng)頁課件

第1章初識(shí)網(wǎng)站和網(wǎng)頁網(wǎng)站和網(wǎng)頁網(wǎng)頁中的元素類型從功能角度分析網(wǎng)頁網(wǎng)站建設(shè)流程【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁1.1網(wǎng)站和網(wǎng)頁

網(wǎng)站是網(wǎng)頁的集合，網(wǎng)頁是組成網(wǎng)站的元素。現(xiàn)場(chǎng)解答1：網(wǎng)站、網(wǎng)頁和主頁之間有何聯(lián)系網(wǎng)頁【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁大型網(wǎng)站一個(gè)小型網(wǎng)站可能只包含幾個(gè)網(wǎng)頁，而一個(gè)大型網(wǎng)站則可能包含成千上萬個(gè)網(wǎng)頁。小型網(wǎng)站【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁新浪網(wǎng)站首頁主頁也叫首頁，每個(gè)網(wǎng)站都有自己的首頁，是瀏覽者登錄網(wǎng)站時(shí)看見的第一個(gè)網(wǎng)頁，也是網(wǎng)站的入口?！綝reamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁現(xiàn)場(chǎng)解答2：什么是網(wǎng)頁

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

【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁現(xiàn)場(chǎng)解答2：網(wǎng)頁中的動(dòng)畫與視頻影像有何特點(diǎn)

視頻流技術(shù)常見的格式有RealVideo及AppleQuickTime。

GIF動(dòng)畫SWF動(dòng)畫目前，大家在網(wǎng)頁中看到的動(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)頁上使用一些大型、復(fù)雜或帶有聲音的動(dòng)畫，可借助Adobe的Flash軟件來制作SWF動(dòng)畫?！綝reamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁現(xiàn)場(chǎng)解答3：網(wǎng)頁中是否可以添加聲音

適當(dāng)?shù)卦诰W(wǎng)頁上加點(diǎn)音樂效果，會(huì)使網(wǎng)頁更具吸引力。目前，網(wǎng)上比較流行的音頻格式主要有MIDI、WAV、MP3與RealAudio。控制音樂的播放【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁1.3從功能角度分析網(wǎng)頁從功能的角度來看，可以將網(wǎng)頁中的元素分為站標(biāo)、導(dǎo)航欄、廣告條、標(biāo)題欄和按鈕。站標(biāo)導(dǎo)航欄廣告條標(biāo)題欄按鈕【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁現(xiàn)場(chǎng)解答1：什么是站標(biāo)

站標(biāo)也叫LOGO，是網(wǎng)站的標(biāo)志，其作用是使人看見它就能夠聯(lián)想到企業(yè)。因此，網(wǎng)站LOGO通常采用企業(yè)的LOGO。LOGO通常采用帶有企業(yè)特色和思想的圖案，或是與企業(yè)相關(guān)的字符或符號(hào)及其變形，當(dāng)然也有很多是圖文組合?！綝reamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁現(xiàn)場(chǎng)解答2：導(dǎo)航欄的類型有哪些

導(dǎo)航欄實(shí)際上是網(wǎng)站內(nèi)多個(gè)頁面的超鏈接組合。導(dǎo)航欄也是網(wǎng)站中所有重要內(nèi)容的概括，可以讓瀏覽者在最短時(shí)間內(nèi)了解網(wǎng)站的主要內(nèi)容。設(shè)計(jì)導(dǎo)航欄時(shí)，有幾點(diǎn)需要注意?！綝reamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁如果網(wǎng)站內(nèi)容不多，并且導(dǎo)航欄不超過兩排，可以根據(jù)網(wǎng)站風(fēng)格嘗試靈活擺放，如放在網(wǎng)頁的左側(cè)或者放在頁面上方等。頁面左側(cè)頁面上方【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁如果網(wǎng)站的欄目很多，可以將導(dǎo)航欄分為多排放置在主頁LOGO的右側(cè)或下方，為便于觀看，可為各排設(shè)置不同的底色。LOGO右側(cè)LOGO下方【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁如果導(dǎo)航欄內(nèi)容較多的話，盡量使用文字超鏈接而不用圖片。不過，如果導(dǎo)航欄內(nèi)容不多，或者網(wǎng)頁內(nèi)容比較活潑的話，多采用圖片或Flash制作導(dǎo)航欄。圖片導(dǎo)航欄Flash導(dǎo)航欄【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁廣告條又稱Banner，其功能是宣傳網(wǎng)站或替其他企業(yè)做廣告，以賺取廣告費(fèi)。現(xiàn)場(chǎng)解答3：廣告條有何特點(diǎn)

在Banner的制作過程中有一些要點(diǎn)需要注意：Banner可以是靜態(tài)的也可以是動(dòng)態(tài)的。Banner的體積不宜過大，盡量使用GIF格式的圖片與動(dòng)畫或Flash動(dòng)畫。Banner中的文字不要太多，只要達(dá)到一定的提醒效果就可以。Banner中圖片的顏色不要太多，尤其是GIF格式的圖片或動(dòng)畫，要避免出現(xiàn)顏色的漸變和光暈效果?！綝reamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁網(wǎng)頁內(nèi)部各版塊的標(biāo)題欄是各版塊內(nèi)容的概括。

標(biāo)題欄可以是文字加單元格背景，也可以是圖片，一般的大型網(wǎng)站都采用前者，一些內(nèi)容少的小網(wǎng)站常采用后者?，F(xiàn)場(chǎng)解答4：什么是版塊標(biāo)題欄

標(biāo)題欄標(biāo)題欄

【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁網(wǎng)頁中的按鈕被點(diǎn)擊之后，網(wǎng)頁會(huì)實(shí)現(xiàn)相應(yīng)的操作，比如頁面跳轉(zhuǎn)，或數(shù)據(jù)的傳輸?shù)?。設(shè)計(jì)按鈕時(shí)，要保證按鈕與頁面的協(xié)調(diào)，不能太搶眼，如果按鈕上有字則盡量使用單色或漸變色背景，保證字跡清晰。當(dāng)頁面上有多個(gè)按鈕的時(shí)候，應(yīng)分清主次，根據(jù)網(wǎng)頁的需要改變按鈕的顏色或者大小?，F(xiàn)場(chǎng)解答5：如何設(shè)計(jì)按鈕

按鈕按鈕【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁現(xiàn)場(chǎng)解答1：常用網(wǎng)站管理與網(wǎng)頁編輯軟件有哪些1.4常用網(wǎng)站管理與制作軟件Dreamweaver：網(wǎng)頁制作軟件三劍客之一，該軟件是現(xiàn)在使用最多的網(wǎng)頁編輯工具，它支持DHTML動(dòng)態(tài)網(wǎng)頁、Flash動(dòng)畫、插件，能實(shí)現(xiàn)很多FrontPage無法實(shí)現(xiàn)的功能，如動(dòng)態(tài)按鈕、下拉菜單等。另外，它還可以用來作為動(dòng)態(tài)網(wǎng)站的開發(fā)環(huán)境。FrontPage：該軟件是目前最簡(jiǎn)單、最容易上手，且功能強(qiáng)大的網(wǎng)頁制作利器，特別適合網(wǎng)頁初學(xué)者使用。不過，F(xiàn)rontpage也有不少缺點(diǎn)：首先是兼容性不好，利用FrontPage做出來的網(wǎng)頁往往不能用Netscape瀏覽器正常顯示；其次，生成的垃圾代碼多；此外，F(xiàn)rontPage對(duì)動(dòng)態(tài)網(wǎng)頁支持不好，不支持Flash，顯得有點(diǎn)落伍了?！綝reamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁現(xiàn)場(chǎng)解答2：網(wǎng)頁設(shè)計(jì)輔助軟件有哪些

在進(jìn)行網(wǎng)頁制作時(shí)，除了需要Dreamweaver、FrontPage等軟件外，還會(huì)用到Fireworks、Flash、Photoshop等軟件，這些軟件的主要功能與特點(diǎn)如下：Fireworks：主要用于制作網(wǎng)頁圖像、標(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)頁設(shè)計(jì)，但是它所具有的強(qiáng)大功能完全涵蓋了網(wǎng)頁設(shè)計(jì)所涉及到的各種需求（除了多媒體）?！綝reamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁現(xiàn)場(chǎng)解答3：常用網(wǎng)站程序設(shè)計(jì)語言有哪些

如果網(wǎng)站中包含動(dòng)態(tài)網(wǎng)頁，除了需要學(xué)習(xí)一些常用的網(wǎng)頁設(shè)計(jì)軟件外，還應(yīng)掌握一些常用的網(wǎng)站程序設(shè)計(jì)語言。JavaScript和VBScript腳本語言JavaCGIASPASP.netPHPJSP【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁1.5網(wǎng)站建設(shè)流程1．根據(jù)要求確定網(wǎng)站內(nèi)容建設(shè)網(wǎng)站要有目的性，首先要確定網(wǎng)站的性質(zhì)和受眾，并預(yù)期網(wǎng)站發(fā)布后的反響。確定了這些后就要開始組織網(wǎng)站的主要內(nèi)容?！綝reamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁2．規(guī)劃網(wǎng)站欄目確定了網(wǎng)站內(nèi)容后，就要開始進(jìn)行網(wǎng)站規(guī)劃。例如，將網(wǎng)站的內(nèi)容劃分成哪些欄目，從而使網(wǎng)站既便于瀏覽者的瀏覽，也有利于網(wǎng)站將來的維護(hù)和更新。【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁3．確定網(wǎng)頁尺寸與版面布局目前顯示器最常用的分辨率是1024×768像素和800×600像素。在1024×768的分辨率下顯示的頁面的尺寸應(yīng)該為1007×600像素，而800×600的分辨率下顯示的頁面尺寸為778×435像素?！綝reamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁確定了網(wǎng)頁尺寸后，接下來的任務(wù)就是確定網(wǎng)頁布局類型了。網(wǎng)頁布局類型沒有確定的標(biāo)準(zhǔn)，可以根據(jù)需要制定。常見的布局有上下分割型、左右分割型和復(fù)合分割型（上下分割和左右分割結(jié)合）。上下分割型左右分割型【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁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è)人愛好以及當(dāng)時(shí)的心態(tài)決定的，在個(gè)人網(wǎng)站較為多見。【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁行業(yè)風(fēng)格色著名的化妝品公司—?dú)W泊萊中國網(wǎng)站使用的顏色是粉色。這幾乎是所有化妝品行業(yè)中最常用到的顏色，這種顏色代表了高貴，典雅以及甜蜜等；【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(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)色。【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁個(gè)人習(xí)慣色這種配色方法在設(shè)計(jì)的時(shí)候自由度非常高，同時(shí)所選的題材與要表現(xiàn)的內(nèi)容也是由設(shè)計(jì)者自己決定，比如設(shè)計(jì)者喜歡綠色，那么在設(shè)計(jì)的時(shí)候就傾向于使用這種顏色。【DreamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁下面是一些網(wǎng)頁配色時(shí)的小技巧用一種色彩：這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度。用兩種色彩：先選定一種色彩，然后選擇它的對(duì)比色。用一個(gè)色系：簡(jiǎn)單地說就是用一個(gè)感覺的色彩，例如淡藍(lán)、淡黃、淡綠，或者土黃、土灰、土藍(lán)。顏色不能太多：不要將所有顏色都用到，盡量控制在3～5種色彩以內(nèi)。背景和前文的對(duì)比：背景和前文的對(duì)比盡量要大（尤其不要使用花紋圖案作為頁面背景），以便突出主要文字內(nèi)容?！綝reamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁5．收集網(wǎng)頁所用素材在制作網(wǎng)頁之前，應(yīng)首先收集好制作網(wǎng)頁時(shí)要使用的素材，這些素材包括文字資料、圖片、動(dòng)畫、聲音、視頻等。對(duì)于一些原始的材料還可以使用PhotoShop、Fireworks、Flash等軟件進(jìn)行處理，使其可以更好地應(yīng)用于網(wǎng)頁?！綝reamweaveCS4案例教程】第1章初識(shí)網(wǎng)站和網(wǎng)頁6．利用軟件制作網(wǎng)頁制作網(wǎng)頁也就是整合網(wǎng)頁素材，即使用Dreamweaver等軟件進(jìn)行網(wǎng)頁制作。還可以根據(jù)需要為網(wǎng)頁增加一些特效，比如閃爍的字幕、跳出動(dòng)畫、改變鼠標(biāo)的形狀等，這些多是通過JavaScript來實(shí)現(xiàn)的