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

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

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

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

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

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

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

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

1.6初識Dreamweaver界面1.6.1Dream1.6.1Dreamweaver8.0界面介紹

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

Drea1.6.2常用工具

菜單欄工具：文件：用來管理文件。

插入：用來插入各種元素.

修改：具有對頁面元素修改的功能。

文本：用來對文本操作。

命令：所有的附加命令項

站點：用來創(chuàng)建和管理站點

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

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

1.6.2常用工具

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

1.6.2常用工具

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

“插入”欄1.6.2常用工具

文檔窗口

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