當前位置:才華齋>資格證>職稱考試>

職稱計算機Dreamweaver輔導:關於站點設計

職稱考試 閱讀(1.85W)

導語:Dreamweaver是第一套針對專業網頁設計師特別發展的視覺化網頁開發工具,利用它可以輕而易舉地製作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網頁。

職稱計算機Dreamweaver輔導:關於站點設計

  一、關於站點計劃和站點設計

在Dreamweaver中,術語“Site(站點)”涉及兩者—Web站點和從屬於Web站點的所有文件的本地儲存位置。當你開始考慮準備建立一個Web站點時,你應當遵循一系列的步驟以確保你的站點能夠獲得成功。即使你只打算建立一個給朋友和親人看的個人站點也應如此。小心地計劃你的站點可以保證每個人都能夠成功地訪問它。

  1.確定你的目標

確定你的站點目標是什麼,是當你建立一個Web站點時,應該慎重考慮的第一步。向你自己和你的客戶提出一些關於站點的問題,看看你自己和大家對站點的期望是什麼。通過建立這樣一個站點你希望達到一個什麼目的?寫下你的站點目標,以便在你設計站點的整個過程中你都能清楚的記得它們。站點目標可以幫助你將注意力集中並瞄準到你的特別需要。

  2.選擇目標觀眾

在你確定了你通過建立你的網站達到什麼目的後,你就需要確定你想讓誰來訪問你的站點了。這看起來像是一個蠢問題,因為大多數人都希望世界上每一個能上網的人都去訪問他的站點。然而,建立一個世界上每個人都能使用的網站,是十分困難的,甚至可以說是不可能的,這正像沒有一個航空公司能飛遍全球所有的航線一樣。人們總是使用不同的瀏覽器,以不同的速度連線,並且可能沒有安裝某些外掛。所有這些不可預期的因素都將對你的站點產生影響。這就是你需要確定一個目標觀眾的原因。   考慮那些可能被吸引到你的網站的人們,或你希望能夠吸引的那些人群。你認為他們更多的在使用什麼樣的計算機,對他們來說主流的作業系統將是什麼平臺(Macintosh、Windows,或是Linux)?平均的連線速度是多少(56K調變解調器或ADSL)?他們通常使用什麼樣的瀏覽器,以及所使用的監視器的解析度?你正在建立的站點是一個真正的Internet站點,還是一個公司內部或組織內部使用的Intranet(在Intranet中,通常每個人都使用相同的計算機作業系統和瀏覽器)?所有這些因素都將對你網站將以什麼樣的感覺呈現給使用者產生巨大的影響。   一旦你確定了你的目標觀眾群,並確定了計算機的型別、連線速度,以及你的目標群體通常使用的瀏覽器等諸多因素,你就已經瞄準了你的設計目標。

例如:假如說你的目標觀眾是一個通常使用17英寸顯示器的Windows作業系統的使用者,並總是使用Internet Explorer 4.0或更高版本的瀏覽器。那麼當你設計你的網頁時,你就應該在一臺Windows計算機上,在1024*768的解析度下的Microsoft Internet Explorer瀏覽器中測試你的站點。儘管對你來說,你的使用者中只會有極少數者在Macintosh平臺上使用Netscape Navigator瀏覽器,但你也應該保證你的站點在那種情況下也能正常的工作,儘管可能不會達到非常好的視覺效果。

  3.建立多瀏覽器相容的站點

當你建立你的站點時,你應該意識到你的來賓們的瀏覽器可能是花樣繁多的。要建立具有最大相容性的站點,在設計時就要給出約束條件。

現在有超過兩打的瀏覽器被使用,它們中大多數又已經不止發行了一個版本。就算你的目標只使用Netscape Navigator和Microsoft Internet Explorer,你也應意識到並不是每個人都在使用這些瀏覽器的最新版本。只要你的網站是在Web上的,遲早總會有某個使用Netscape Navigator 2.0或Lynx(僅支援文字)的人來到你的站點。

在某些情況下,你不需要建立跨瀏覽器相容的站點。例如:如果你的站點只在你公司的內部網上可用,並且你知道公司的僱員使用的都是同一種瀏覽器。在這種情況下,你可以針對這種瀏覽器優化你的站點。同樣,如果你正在建立的HTML內容將被髮布到一張CD-ROM上,而且隨同HTML內容一起還將釋出一個瀏覽器,那麼你可以假定你的使用者都有權使用這個特別的瀏覽器。

但在大多數情形下,網站是為公共消費設計的,使你的網站可以被儘可能多的瀏覽器瀏覽是個不錯的主意。挑選一個或兩個主流的瀏覽器作為你的目標,以這些瀏覽器為目標設計你的站點,但偶爾也用其它的瀏覽器探索一下站點,以避免出現太誇張的不調和。

  4.通常要考慮的問題

從佈局、動畫、多媒體內容,以及互動性上考慮,你的站點越複雜,它就越難以對多種瀏覽器相容,例如並不是所有的瀏覽器都能執行&106avascript。不使用特殊字元的普通文字可以在所有的瀏覽器中很好的顯示,但是如此這般的一個頁面,同那些有著影象、佈局,以及互動功能的複雜頁面相比,就只有少得可憐的一點美學吸引力了。因此,在最大的效果設計和最大的相容性設計之間找到一個平衡。

為那些最重要的頁面設計多個版本是一種有效的方法。例如:通過為你的主頁設計有框架和無框架的兩個版本來獲得好的效果,雖然你無法預測使用者的瀏覽器是否可以正確的處理框架,但通過雙版本的設計,你可以根據瀏覽器的能力自動地將來賓導向最適合他們的瀏覽器的頁面版本。

  5.使用行為來檢測瀏覽器和外掛

你能夠使用行為來確定你的來賓正在使用哪個瀏覽器,以及確定他們是否在瀏覽器中安裝了某個特別的外掛。

檢查瀏覽器—根據來賓的瀏覽器的名稱和版本將不同的頁面傳送給使用者。例如:如果他們使用Netscape Navigator 4.0或更新的版本的話,你可能希望來賓去往;如果他們使用Microsoft Internet Explorer 4.0或更新的版本,讓他們去往;如果他們使用其它種類的瀏覽器就讓他們留在當前頁上。

檢查外掛—根據來賓的瀏覽器是否安裝了某個特別的外掛將來賓導向不同的頁面。例如:如果他們安裝了Shockwave,將使用者導向;如果他們沒有安裝Shockwave,將他們導向頁。

  6.組織站點結構

建立一個站點通常所採用的方法是首先在你的本地硬碟上建立一個資料夾,其中包含了你的站點要用到的所有檔案,同時你也將在這個資料夾中建立和編輯文件。接下來的就是你週期性地拷貝那些檔案到你的Web伺服器,並允許其他的人瀏覽你的站點。這種方法比直接在Web站點建立和編輯檔案要好,因為這允許你在將你的網站暴露於眾目睽睽之下前,先在本地站點上測試所做的一切改變。通過測試後,你可以在某個時刻神不知鬼不覺的將檔案上傳到你的Web伺服器,完成一次完美的網站更新任務。

從一開始就精心的組織你的站點,能為你以後節省下大量的時間。如果你在開始建立文件的時候,沒有考慮這些文件應該分別進入你的站點層級結構中的哪個資料夾中,那麼最終你的工作將終結於一個巨大的、笨拙的、塞滿了各種各樣檔案的資料夾,或是面對一種相關的檔案,卻分別坐落於半打以上的、有著相似名稱的資料夾的局面而一籌莫展。

因此,你應當按類目分解你的站點。把相關的頁放進同一個資料夾。例如,你的公司的新聞釋出、聯絡資訊,以及工作職位都可以放在同一個資料夾中,而將線上產品目錄放在另一個資料夾中。在必要的地方使用子資料夾。

你要決定在哪兒存放諸如影象和聲音這樣的檔案。組織存放你所有的影象是一件簡單的事情。例如,將它們都存放在同一個地點,以便當你想要把一幅影象插入到某個頁時,你知道在哪兒能找到它。設計者們有時將整個站點中使用的非HTML檔案都存放在一個被稱為資產(Asset)的資料夾中。這個資料夾可以包含一些有意義的子資料夾。例如:一個影象資料夾、一個Shockwave資料夾,以及一個聲音資料夾。或者你也可能在你的站點上為每組相關的頁面準備一個獨立的資產資料夾,如果在這些頁面組中沒有太多的東西要共享的話。如(圖)

保持你的本地站點和遠端伺服器上的'站點有同樣的結構,這種相同應該是嚴格意義上的一致。如果你是使用Dreamweaver建立站點,並且上傳了每一樣東西,Dreamweaver可以保證本地站點的結構將被精確的複製到遠端站點。

  7.建立你的設計外觀

如果你在真正使用Dreamweaver開始開發工作之前,仔細的計劃過你的設計和佈局,那麼你將在以後的開發中節省下大量的時間。對於不太大的工程,這個工作可以簡單到只需在一張紙上繪製出你希望的你的站點的佈局和外觀模型。對於更復雜的工程,你可以使用Macromedia Freehand或Fireworks來繪製你的站點的佈局和外觀模型。在真正開始開發你的站點之前,繪製出你的站點佈局和外觀模型是一件非常重要的事情,你將在以後的整個開發過程中,沿著它來進行。

保持你的頁面的佈局和設計的一致性是十分重要的。當你的每一個頁面都有一個不同的外觀,每一頁上的導航條都出現在不同的位置時,要想指望你的使用者無困惑的在你的站點中游歷將是不可能。

  8.設計導航方案

規劃的另一個需要費心的地方是導航。當你設計一個站點時,你應該考慮這樣的一個問題—你想讓你的來賓在你的站點有怎樣的一個經歷?

“你在這裡!”—讓來賓時刻都清楚他們此時正處於你的站點的什麼位置是可以給你的使用者帶來安全感的,這也包括讓來賓們清楚的知道如果他們希望的話,他們將如何回到你的頂層頁面。

搜尋和索引—這將使參觀者比較容易的找到他們想要的任何資訊。

反饋—如果網站上的東西出了問題,提供一個方法讓來賓可以聯絡網站管理員(如果合適的話),以及來賓如何同公司或網站的有關人員聯絡(如果這是公司的業務所希望的話)。

設計你的站點導航的外觀。你的站點的導航條應該在你的整個的站點中都保持一致,如果你在你的主頁中將導航條放置在了頁面的頂部,你應當試圖使你的站點中的每一個頁面中的導航條都保持在這個位置。