秦皇島網頁設計基礎知識全在這(zhè)裏

1.1 網站

網站(Web Site)是一個(gè)存放網絡服務器上的(de)完整信息的(de)集合體。它包含一個(gè)或多(duō)個(gè)網頁，這(zhè)些網頁以一定的(de)方式鏈接在一起，成爲一個(gè)整體，用(yòng)來(lái)描述一組完整的(de)信息或達到某種期望的(de)宣傳效果。有的(de)網站内容衆多(duō)，如新浪、搜狐等門戶網站；有的(de)網站隻有幾個(gè)頁面，如個(gè)人(rén)網站。秦皇島網頁設計公司

1.2 網頁

網頁（Web Page）實際上是一個(gè)文件，網頁裏可(kě)以有文字、圖像、聲音(yīn)及視頻(pín)信息等。網頁可(kě)以看成是一個(gè)單一體，是網站的(de)一個(gè)元素。

平常我們所聽(tīng)說的(de)“新浪”、“搜狐”、“網易”等，即是俗稱的(de)“網站”。而當我們訪問這(zhè)些網站的(de)時(shí)候，最直接訪問的(de)就是“網頁”了(le)。這(zhè)許許多(duō)多(duō)的(de)網頁則組成了(le)整個(gè)站點，也(yě)就是網站。
 

1.3 首頁

首頁(Home page)，它是一個(gè)單獨的(de)網頁，和(hé)一般網頁一樣，可(kě)以存放各種信息，同時(shí)又是一個(gè)特殊的(de)網頁，作爲整個(gè)網站的(de)起始點和(hé)彙總點。例如，當浏覽者輸入搜狐網站地址“www.sohu.com”後出現在第一個(gè)頁面，即sohu網站的(de)首頁。

問題：首頁和(hé)主頁有區(qū)别嗎？

通(tōng)常網站爲方便浏覽者查找和(hé)分(fēn)類浏覽網站的(de)信息，會将信息分(fēn)類，并建立一個(gè)網頁以放置網站信息的(de)目錄，即網站的(de)主頁。

并非所有的(de)網站都将主頁設置爲首頁，有的(de)網站喜歡在首頁放置一段進入動畫(huà)，并将主頁的(de)鏈接放置在首頁上，浏覽者需要單擊首頁的(de)鏈接進入主頁。

1.4網頁的(de)表現形式

1.靜态網頁：客戶端與服務器端不發生交互

訪問者隻能被動地浏覽網站建設者提供的(de)網頁内容。其特點：

網頁内容不會發生變化(huà)，除非網頁設計者修改了(le)網頁的(de)内容。不能實現和(hé)浏覽網頁的(de)用(yòng)戶之間的(de)交互。信息流向是單向的(de)。

2.動态網頁：客戶端與服務器端要發生交互

動态網頁是指浏覽器可(kě)以和(hé)服務器數據庫進行實時(shí)數據交流的(de)交互網頁，而不是加上了(le)動畫(huà)等效果的(de)動感網頁。動态網頁技術的(de)網站可(kě)以實現更多(duō)的(de)功能，如用(yòng)戶注冊、用(yòng)戶登錄、搜索查詢、用(yòng)戶管理(lǐ)、訂單管理(lǐ)等。信息流向是雙向的(de)。

2.1 網站LOGO

1.通(tōng)常網站爲體現其特色與内涵，涉及并制作一個(gè)LOGO圖像放置在網站的(de)左上角或其他(tā)醒目的(de)位置。

2.企業網站常常使用(yòng)企業的(de)标志或者注冊商标。

3.一個(gè)設計優秀的(de)LOGO可(kě)以給浏覽者留下(xià)深刻的(de)印象，爲網站和(hé)企業形象宣傳起到十分(fēn)重要的(de)作用(yòng)。

2.2 導航條

導航條是網頁的(de)重要組成元素。設計的(de)目的(de)是将站點内的(de)信息分(fēn)類處理(lǐ)，然後放在網頁中以幫助浏覽者快(kuài)速查找站内信息。

導航條的(de)形式多(duō)種多(duō)樣，包括文本導航條、圖像導航條以及動畫(huà)導航條等。

有些使用(yòng)特殊技術（例如Flash、JavaScript、CSS）制作的(de)導航條還(hái)可(kě)以具有下(xià)拉菜單的(de)功能。

2.3 Banner

Banner的(de)中文意思是橫幅。Banner的(de)内容通(tōng)常爲網頁中的(de)廣告。

在網頁布局中，大(dà)部分(fēn)網頁将Banner放置在與導航條相鄰處，或者其他(tā)醒目的(de)位置以吸引浏覽者浏覽。

2.4 内容版塊

網頁的(de)内容版塊是整個(gè)頁面的(de)組成部分(fēn)。

設計人(rén)員(yuán)可(kě)以通(tōng)過該頁面的(de)欄目要求來(lái)設計不同版塊，每個(gè)版塊可(kě)以有一個(gè)标題内容，并且每個(gè)内容版塊主要來(lái)顯示不同文本信息。

2.5 版尾或版權版塊

版尾，即頁面最低端的(de)版塊。

這(zhè)部分(fēn)位置通(tōng)常放置網頁的(de)版權信息，以及網頁所有者、設計者的(de)聯系方式等。

有的(de)網站也(yě)将網站的(de)友情鏈接以及一些附屬的(de)導航條放置在這(zhè)裏。

3.1 文本

網頁中的(de)信息以文本爲主。與圖片相比，文字雖然不如圖片那樣能夠很快(kuài)引起浏覽者的(de)注意，但卻能準确地表達信息的(de)内容和(hé)含義。

3.2 圖片

用(yòng)戶在網頁中使用(yòng)的(de)圖片格式主要包括GIF、JPEG和(hé)PNG等，其中使用(yòng)最廣泛的(de)是GIF和(hé)JPEG兩種格式。

3.3 超鏈接

超鏈接在本質上屬于一個(gè)網頁的(de)一部分(fēn)，是一種允許用(yòng)戶同其他(tā)網頁或站點之間進行連接的(de)元素。

超鏈接是指從一個(gè)網頁指向一個(gè)目标的(de)連接關系，這(zhè)個(gè)目标可(kě)以是另一個(gè)網頁，也(yě)可(kě)以是相同網頁上的(de)不同位置，還(hái)可(kě)以是一個(gè)圖片、一個(gè)電子郵件地址、一個(gè)文件，甚至是一個(gè)應用(yòng)程序。

3.4 動畫(huà)

在網頁中爲了(le)更有效地吸引浏覽者的(de)注意，許多(duō)網站的(de)廣告都做(zuò)成了(le)動畫(huà)形式。

網頁中的(de)動畫(huà)主要有兩種：GIF動畫(huà)和(hé)Flash動畫(huà)。其中GIF動畫(huà)隻能有256種顔色，主要用(yòng)于簡單動畫(huà)和(hé)圖标。

3.5 聲音(yīn)和(hé)視頻(pín)

聲音(yīn)是多(duō)媒體網頁的(de)一個(gè)重要組成部分(fēn)。用(yòng)于網絡的(de)聲音(yīn)文件的(de)格式非常多(duō)，常用(yòng)的(de)有MIDI、WAV、MP3和(hé)AIF等。

很多(duō)浏覽器不要插件也(yě)可(kě)以支持MIDI、WAV和(hé)AIF格式的(de)文件，而MP3和(hé)RM格式的(de)聲音(yīn)文件則需要專門的(de)浏覽器播放。

3.6 表格

在網頁中表格用(yòng)來(lái)控制網頁中信息的(de)布局方式。

包括兩個(gè)方面：一是使用(yòng)行和(hé)列的(de)形式來(lái)布局文本和(hé)圖像以及其他(tā)的(de)列表化(huà)數據；二是可(kě)以使用(yòng)表格來(lái)精确控制各種網頁元素在網頁中出現的(de)位置。

3.7 表單

網頁中的(de)表單通(tōng)常用(yòng)來(lái)接受用(yòng)戶在浏覽器端的(de)輸入，然後将這(zhè)些信息發送到網頁設計者設置的(de)目标端。這(zhè)個(gè)目标可(kě)以是文本文件、Web頁、電子郵件，也(yě)可(kě)以是服務器端的(de)應用(yòng)程序。

表單一般用(yòng)來(lái)收集聯系信息、接受用(yòng)戶要求、獲得(de)反饋意見、設置來(lái)賓簽名簿、讓浏覽者注冊爲會員(yuán)并以會員(yuán)的(de)身份登錄站點等。

3.8 其他(tā)常見元素

包括懸停按鈕、Java特效、ActiveX等各種特效。它們不僅能點綴網頁，使網頁更活潑有趣，而且在網上娛樂(yuè)、電子商務等方面也(yě)有著(zhe)不可(kě)忽視的(de)作用(yòng)。

4.1 文本編輯器

不僅在記事本中可(kě)以編寫HTML代碼，任何文本編輯器都可(kě)以編寫HTML。比如寫字闆、word等，但保存的(de)時(shí)候必須保存爲.html或.htm格式。

有一些文本編輯器專門提供網頁制作及程序設計等許多(duō)有用(yòng)的(de)功能，支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript、VBScript等多(duō)種語法的(de)著(zhe)色顯示。

例如：Sublime text3、EmEditor、EditPlus、UltraEdit

4.2 Dreamweaver網頁設計軟件

這(zhè)是現在使用(yòng)最廣泛的(de)網頁編輯工具之一。

Dreamweaver是Macromedia公司推出的(de)網頁編輯工具。

它是一個(gè)所見即所得(de)網頁編輯器，支持最新的(de)DHTML（Dynamic HTML，動态HTML）和(hé)CSS标準。采用(yòng)了(le)多(duō)種先進技術，能夠快(kuài)速高(gāo)效地創建極具表現力和(hé)動感效果的(de)網頁，使網頁創作過程變得(de)非常簡單。

另外還(hái)有Microsoft公司開發的(de)FrontPage也(yě)是設計網頁和(hé)管理(lǐ)網站的(de)軟件。除了(le)所見即所得(de)的(de)編輯功能之外，也(yě)可(kě)以直接編輯HTML标記，讓設計者可(kě)以輕松的(de)編輯網頁。

4.3 Photoshop圖像處理(lǐ)軟件

Photoshop是Adobe公司推出的(de)功能強大(dà)的(de)平面圖像處理(lǐ)軟件，Photoshop在圖像編輯、桌面出版、網頁圖像編輯、廣告設計、婚紗攝影(yǐng)等各行各業的(de)廣泛應用(yòng)，它已成爲許多(duō)涉及圖像處理(lǐ)的(de)行業的(de)事實标準。

4.4 Flash動畫(huà)設計軟件

Flash是Macromedia公司開發的(de)一款優秀的(de)網頁動畫(huà)開發軟件，從簡單的(de)動畫(huà)到複雜(zá)的(de)交互式Web應用(yòng)程序，它使用(yòng)戶可(kě)以創建任何作品。通(tōng)過添加圖片、聲音(yīn)和(hé)視頻(pín)，可(kě)以使Flash應用(yòng)程序媒體豐富多(duō)彩。

Flash被稱爲“最靈活的(de)前台”，其獨特的(de)編譯方式和(hé)跨平台的(de)能力，廣泛的(de)應用(yòng)（軟件、遊戲、Web應用(yòng)程序、多(duō)媒體娛樂(yuè)等多(duō)方面），使之越來(lái)越成爲一種重要的(de)工具。

4.5 Fireworks網頁圖像處理(lǐ)軟件

Fireworks是Macromedia公司發布的(de)一款專爲網絡圖形設計的(de)圖形編輯軟件，使用(yòng)Fireworks都不僅可(kě)以輕松地制作出尺寸較小的(de)圖形、GIF動畫(huà)。

如果将Photoshop比作全能的(de)圖像處理(lǐ)大(dà)師的(de)話(huà)，Fireworks就是精于網頁圖像處理(lǐ)的(de)專家。它在矢量圖形的(de)處理(lǐ)方面有其獨特之處。

在Web應用(yòng)方面，Fireworks是最早提供切片功能的(de)圖像處理(lǐ)軟件。Fireworks支持在圖像中繪制熱(rè)區(qū)并直接生成網頁文檔，并且具備簡單的(de)GIF動畫(huà)制作能力，同時(shí)支持将動畫(huà)轉換爲Flash文件并嵌入到網絡中播放。

5.1 CSS

CSS即層疊樣式表（CascadingStyle Sheet）。在主頁制作時(shí)采用(yòng)CSS技術，可(kě)以有效地對(duì)頁面的(de)布局、字體、顔色、背景和(hé)其它效果實現更加精确的(de)控制。

HTML=内容

CSS=表現

CSS帶來(lái)的(de)好處：

CSS使頁面載入更快(kuài)；

CSS可(kě)以降低網站的(de)流量費用(yòng)；

CSS使設計師在修改設計時(shí)更有效率，而代價更低；

CSS使整個(gè)站點保持視覺的(de)一緻性；

5.2 JavaScript

JavaScript是由 Netscape公司開發的(de)一種腳本語言，可(kě)以被嵌入HTML文件中，它是一種基于對(duì)象和(hé)事件驅動，并具有安全性能的(de)腳本語言。

在HTML基礎上，使用(yòng)JavaScript可(kě)以開發交互式Web網頁，可(kě)以回應使用(yòng)者的(de)需求事件而不需要通(tōng)過網絡來(lái)回傳輸資料。

簡單地說，當用(yòng)戶輸入一項信息時(shí)，不需要先将信息傳給服務器處理(lǐ)，再傳回來(lái)，而是可(kě)以直接被客戶端的(de)程序處理(lǐ)。

6.1 網頁布局

網頁布局是網頁設計的(de)基礎，目前網頁的(de)布局主要可(kě)歸爲三大(dà)類型：

1．分(fēn)欄式結構

2．區(qū)域分(fēn)布式結構

3．無框架局限式結構

分(fēn)欄式布局

區(qū)域分(fēn)布式布局

無框架局限式布局

6.2 導航設計

1.導航是網頁設計中不可(kě)或缺的(de)基礎元素之一。導航就如同一個(gè)網站的(de)路标，有了(le)它就不會在浏覽網站時(shí)“迷路”。導航鏈接著(zhe)各個(gè)頁面，隻要單擊導航中的(de)超級鏈接就能進入相應的(de)頁面。

2.導航設計的(de)好壞，決定著(zhe)用(yòng)戶是否能很方便地使用(yòng)網站。導航設計應直觀明(míng)确，最大(dà)限度地爲用(yòng)戶使用(yòng)考慮，盡可(kě)能使網頁切換更便捷。導航的(de)設計要符合整個(gè)網站的(de)風格和(hé)要求，不同的(de)網站會采用(yòng)不同的(de)導航方式。

3.一般來(lái)說，在網頁的(de)上端或左側設置導航欄是比較普遍的(de)方式。網站采用(yòng)上端文字作爲一級導航，左側樹狀結構菜單作爲二級導航。

讓用(yòng)戶了(le)解當前所處的(de)位置；

4.讓用(yòng)戶能根據走過的(de)路徑，确定下(xià)一步的(de)前進方向和(hé)路徑；

5.不需要浏覽太多(duō)的(de)頁面才能找到需要的(de)信息，讓用(yòng)戶能快(kuài)速而簡捷地找到所需的(de)信息，并以最佳的(de)路徑到達這(zhè)些信息；

6.讓用(yòng)戶使用(yòng)網站遇到困難時(shí)，能尋求到解決困難的(de)方法，找到最佳路徑；

7.讓用(yòng)戶清楚地了(le)解整個(gè)網站的(de)結構概況，産生整體性感知；

8.對(duì)使用(yòng)頻(pín)率不同的(de)信息作有序處理(lǐ)。

7.1 頁面配色

設計精美(měi)的(de)網站都有其色調構成的(de)總體傾向。以一種或幾種臨近顔色爲主導，使網頁全局呈現某種和(hé)諧、統一的(de)色彩傾向。

運用(yòng)色系。先根據網頁主題，選定一種主色，然後調整透明(míng)度或飽和(hé)度，也(yě)就是将色彩變淺或加深，調配出新的(de)色彩。這(zhè)樣的(de)頁面看起來(lái)色彩一緻，有層次感；一般來(lái)說，适合于網頁标準色的(de)顔色有3大(dà)系：藍色、黃(huáng)/橙色和(hé)黑(hēi)/灰/白色。

使用(yòng)對(duì)比色。可(kě)以充分(fēn)利用(yòng)對(duì)比色進行設計，同時(shí)注意使用(yòng)灰色調進行調和(hé)。這(zhè)樣的(de)作品頁面色彩豐富.

7.2 文字藝術

文字在版面中一般占有絕大(dà)部分(fēn)空間，是網頁信息的(de)主要載體。處理(lǐ)好文字關系到網頁設計的(de)成敗。字體的(de)選擇、字号的(de)大(dà)小、文字的(de)顔色、行與行的(de)距離、段落與段落的(de)安排，都需要認真考慮。好的(de)文字設計會給網頁增色不少。

7.3 實例分(fēn)析

1．網站描述

這(zhè)是一家航空公司的(de)網站首頁。界面設計給人(rén)現代、驿動的(de)感覺，這(zhè)與公司的(de)風格相一緻。導航設計簡潔利落，很值得(de)學習(xí)借鑒。

2．布局

網頁布局采用(yòng)的(de)是比較常見的(de)分(fēn)欄式結構。A爲網站的(de)Logo所在的(de)區(qū)域；B爲網站主菜單所在的(de)區(qū)域；C爲搜索與其他(tā)公共功能所在的(de)區(qū)域；D爲網站的(de)内容區(qū)域，主要由文字和(hé)圖片組成；E爲版權信息所在的(de)區(qū)域。

3．配色

網頁選用(yòng)藍色系，象征天空，與網站主題一緻。網頁主要運用(yòng)了(le)兩種藍色，分(fēn)别是“#14397D”和(hé)“1E95BD”。除此之外，網頁文字的(de)配色主要以白色和(hé)藍色爲主。

内容源于網絡，如有侵權或違規我們會盡快(kuài)整改