網(wǎng)頁設(shè)計基礎(chǔ)知識1.1網(wǎng)站

網(wǎng)站是存儲在網(wǎng)絡(luò)服務(wù)器上的完整信息的集合。它包含一個或多個網(wǎng)頁，這些網(wǎng)頁以某種方式鏈接在一起，成為一個整體，用于描述一套完整的信息或達(dá)到預(yù)期的宣傳效果。有的網(wǎng)站內(nèi)容很多，比如新浪、搜狐等門戶網(wǎng)站；有些網(wǎng)站只有幾頁，比如個人網(wǎng)站。

1.2網(wǎng)頁

網(wǎng)頁實(shí)際上是一個文件，它可以包含文本、圖像、聲音和視頻信息。網(wǎng)頁可以看作是一個單一的主體，是網(wǎng)站的一個元素。

通常，“新浪”、“搜狐”、“網(wǎng)易”俗稱“網(wǎng)站”。當(dāng)我們訪問這些網(wǎng)站時，最直接的訪問是“網(wǎng)頁”。這許多網(wǎng)頁組成了整個網(wǎng)站，也就是網(wǎng)站。

1.3主頁

主頁是一個單獨(dú)的網(wǎng)頁，可以像一般網(wǎng)頁一樣存儲各種信息，也是一個特殊的網(wǎng)頁，作為整個網(wǎng)站的起點(diǎn)和總結(jié)點(diǎn)。例如，當(dāng)一個瀏覽者輸入搜狐網(wǎng)站地址“www.sohu.com”時，它出現(xiàn)在第一頁，即搜狐網(wǎng)站的主頁上。

問題:首頁和首頁有區(qū)別嗎？

通常情況下，網(wǎng)站為了對網(wǎng)站的信息進(jìn)行查找和分類，會對信息進(jìn)行分類，建立網(wǎng)頁來放置網(wǎng)站信息的目錄，即網(wǎng)站的首頁。

不是所有的網(wǎng)站都把首頁設(shè)為首頁。有些網(wǎng)站喜歡在首頁放一個入門動畫，在首頁放首頁鏈接。訪問者需要點(diǎn)擊主頁鏈接才能進(jìn)入主頁。

1.4網(wǎng)頁的表達(dá)1。靜態(tài)網(wǎng)頁:客戶端和服務(wù)器之間沒有交互

訪問者只能被動地瀏覽網(wǎng)站構(gòu)建者提供的網(wǎng)頁內(nèi)容。其特點(diǎn):

除非網(wǎng)頁設(shè)計者修改網(wǎng)頁的內(nèi)容，否則網(wǎng)頁的內(nèi)容不會改變。無法實(shí)現(xiàn)與瀏覽網(wǎng)頁的用戶的交互。信息流是單向的。

2.動態(tài)網(wǎng)頁:客戶端和服務(wù)器應(yīng)該交互

動態(tài)網(wǎng)頁是指瀏覽器可以與服務(wù)器數(shù)據(jù)庫進(jìn)行實(shí)時數(shù)據(jù)通信的交互式網(wǎng)頁，而不是具有動畫等效果的動態(tài)網(wǎng)頁。采用動態(tài)web技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多功能，如用戶注冊、用戶登錄、搜索查詢、用戶管理、訂單管理等。信息流是雙向的。

2.1網(wǎng)站LOGO

1.通常為了體現(xiàn)其特點(diǎn)和內(nèi)涵，會制作一個LOGO圖像，放在網(wǎng)站的左上角或者其他顯眼的位置。

2.公司網(wǎng)站經(jīng)常使用公司標(biāo)志或注冊商標(biāo)。

3.一個設(shè)計良好的LOGO可以給訪問者留下深刻的印象，對網(wǎng)站和企業(yè)形象的提升起到非常重要的作用。

2.2導(dǎo)航欄

導(dǎo)航欄是網(wǎng)頁的重要元素。設(shè)計的目的是對網(wǎng)站中的信息進(jìn)行分類和處理，然后放入網(wǎng)頁中，幫助訪問者快速找到網(wǎng)站中的信息。

導(dǎo)航欄有多種形式，包括文本導(dǎo)航欄、圖像導(dǎo)航欄和動畫導(dǎo)航欄。

一些用特殊技術(shù)制作的導(dǎo)航欄(如Flash、Java、CSS)也可以有下拉菜單的功能。

2.3橫幅

橫幅在中文里是橫幅的意思。橫幅的內(nèi)容通常是網(wǎng)頁中的廣告。

在網(wǎng)頁布局中，大多數(shù)網(wǎng)頁將橫幅放置在導(dǎo)航欄旁邊或其他顯眼的位置，以吸引訪問者瀏覽。

2.4內(nèi)容部分

網(wǎng)頁的內(nèi)容部分是整個網(wǎng)頁不可分割的一部分。

設(shè)計人員可以根據(jù)頁面的欄目要求設(shè)計不同的欄目，每個欄目可以有一個標(biāo)題內(nèi)容，每個內(nèi)容欄目主要顯示不同的文字信息。

版本2.5或版權(quán)部分結(jié)束

頁面的末尾是頁面的最低部分。

這一部分通常包含網(wǎng)頁的版權(quán)信息，以及網(wǎng)頁所有者和設(shè)計者的聯(lián)系信息。

有些網(wǎng)站還在這里放了友好的鏈接和一些附帶的導(dǎo)航欄。

3.1文本

網(wǎng)頁中的信息主要是文本。與圖片相比，文字不能像圖片那樣迅速吸引訪問者的注意力，但卻能準(zhǔn)確地表達(dá)信息的內(nèi)容和意義。

3.2圖片

用戶在網(wǎng)頁中使用的圖像格式主要有GIF、JPEG和PNG，其中GIF和JPEG使用最為廣泛。

3.3超鏈接

超鏈接本質(zhì)上是網(wǎng)頁的一部分，是允許用戶與其他網(wǎng)頁或網(wǎng)站連接的元素。

超鏈接是指從一個網(wǎng)頁到一個目標(biāo)的連接關(guān)系，可以是另一個網(wǎng)頁，同一網(wǎng)頁上的不同位置，一張圖片，一個電子郵件地址，一個文件，甚至一個應(yīng)用程序。

3.4動畫

為了更有效地吸引訪問者的注意力，許多網(wǎng)站的廣告都是動畫的。

網(wǎng)頁中的動畫有兩種:GIF動畫和Flash動畫。GIF動畫只能有256種顏色，主要用于簡單的動畫和圖標(biāo)。

3.5聲音和視頻

聲音是多媒體網(wǎng)頁的重要組成部分。網(wǎng)絡(luò)上使用的聲音文件格式很多，比如MIDI、WAV、MP3、AIF。

很多瀏覽器不需要插件就可以支持MIDI、WAV、AIF文件，而MP3、RM聲音文件需要專門的瀏覽器才能播放。

3.6表格

表格用于控制網(wǎng)頁中信息的布局。

它包括兩個方面:一是以行和列的形式布局文本、圖像和其他列表數(shù)據(jù)；第二，表格可以用來精確控制網(wǎng)頁中各種網(wǎng)頁元素的位置。

3.7表格

網(wǎng)頁中的表單通常用于在瀏覽器端接受用戶的輸入，然后將信息發(fā)送到網(wǎng)頁設(shè)計者設(shè)置的目標(biāo)端。該目標(biāo)可以是文本文件、網(wǎng)頁、電子郵件或服務(wù)器端應(yīng)用程序。

表單一般用于收集聯(lián)系方式，接受用戶需求，獲取反饋，設(shè)置嘉賓簽名簿，讓訪客注冊為會員，以會員身份登錄網(wǎng)站。

3.8其他常見元素

包括懸停按鈕、Java特效、ActiveX等特效。它們不僅可以點(diǎn)綴網(wǎng)頁，使網(wǎng)頁更加生動有趣，而且在在線娛樂和電子商務(wù)中發(fā)揮著重要作用。

4.1文本編輯器

不僅可以在記事本上寫HTML代碼，任何文本編輯器也可以寫HTML。比如寫字板，Word等。，但必須保存在。html或。htm格式。

有些文本編輯器提供了網(wǎng)頁制作、編程等很多有用的功能，支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、Java、VB等語法的著色顯示。

示例:升華文本3、電子編輯、編輯增強(qiáng)、超級編輯

4.2 Dreamweaver網(wǎng)頁設(shè)計軟件

這是最廣泛使用的網(wǎng)絡(luò)編輯工具之一。

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

它是一個所見即所得的fckeditor，支持最新的DHTML(動態(tài)HTML)和CSS標(biāo)準(zhǔn)。利用各種先進(jìn)的技術(shù)，我們可以快速高效地創(chuàng)建富有表現(xiàn)力和動態(tài)的網(wǎng)頁，這使得網(wǎng)頁創(chuàng)建過程非常簡單。

另外，微軟開發(fā)的FrontPage也是設(shè)計網(wǎng)頁和管理網(wǎng)站的軟件。除了所見即所得的編輯功能，還可以直接編輯HTML標(biāo)簽，讓設(shè)計人員輕松編輯網(wǎng)頁。

4.3 Photoshop圖像處理軟件

Photoshop是Adobe公司推出的功能強(qiáng)大的平面圖像處理軟件。Photoshop廣泛應(yīng)用于圖像編輯、桌面出版、網(wǎng)頁圖像編輯、廣告設(shè)計、婚紗攝影等各個行業(yè)。它已經(jīng)成為許多涉及圖像處理的行業(yè)事實(shí)上的標(biāo)準(zhǔn)。

4.4 Flash動畫設(shè)計軟件

Flash是Macromedia開發(fā)的優(yōu)秀的web動畫開發(fā)軟件，從簡單的動畫到復(fù)雜的交互式Web應(yīng)用，讓用戶可以創(chuàng)作任何作品。通過添加圖片、聲音和視頻，您可以使閃存應(yīng)用媒體豐富多彩。

Flash被稱為“最靈活的前臺”。其獨(dú)特的編譯方法、跨平臺能力和廣泛的應(yīng)用(軟件、游戲、Web應(yīng)用、多媒體娛樂等)。)使其成為日益重要的工具。

4.5煙花網(wǎng)頁圖像處理軟件

Fireworks是Macromedia公司發(fā)布的專門為網(wǎng)絡(luò)圖形設(shè)計的圖形編輯軟件。Fireworks可以輕松生成小尺寸圖形和GIF動畫。

如果把Photoshop比作全能的圖像處理大師，F(xiàn)ireworks就是網(wǎng)頁圖像處理的專家。它在矢量圖形處理上有自己的獨(dú)特性。

在Web應(yīng)用方面，F(xiàn)ireworks是最早提供切片功能的圖像處理軟件。Fireworks支持在圖像中繪制熱點(diǎn)和直接生成網(wǎng)頁文檔，具有簡單的GIF動畫制作能力，支持將動畫轉(zhuǎn)換成Flash文件嵌入網(wǎng)絡(luò)中播放。

5.1 CSS

CSS是級聯(lián)樣式表。CSS技術(shù)可以有效控制首頁的布局、字體、顏色、背景等效果。

HTML=內(nèi)容

CSS=演示文稿

CSS的好處:

CSS使頁面加載更快；

CSS可以降低網(wǎng)站的流量成本；

CSS使設(shè)計人員能夠以更低的成本更有效地修改設(shè)計。

CSS保持整個站點(diǎn)視覺一致；

5.2 Java

Java是網(wǎng)景開發(fā)的腳本語言，可以嵌入到HTML文件中。它是一種基于對象和事件的腳本語言，具有安全性能。

在HTML的基礎(chǔ)上，可以使用Java開發(fā)交互式Web頁面，無需通過網(wǎng)絡(luò)來回傳輸數(shù)據(jù)，即可響應(yīng)用戶的需求事件。

簡單來說，當(dāng)用戶輸入一條信息時，不需要發(fā)送到服務(wù)器進(jìn)行處理再發(fā)回，可以直接由客戶端程序進(jìn)行處理。

6.1網(wǎng)頁布局

網(wǎng)頁布局是網(wǎng)頁設(shè)計的基礎(chǔ)。目前，網(wǎng)頁布局可以分為三種類型:

1.柱狀結(jié)構(gòu)

2.區(qū)域分布結(jié)構(gòu)

3.無框架有限結(jié)構(gòu)

列布局

區(qū)域分布式布局

無框架有限布局

6.2導(dǎo)航設(shè)計

1.導(dǎo)航是網(wǎng)頁設(shè)計中不可缺少的基本元素之一。導(dǎo)航就像一個網(wǎng)站的路標(biāo)，有了它你在瀏覽網(wǎng)站的時候就不會迷路了。導(dǎo)航鏈接每個頁面，您可以通過單擊導(dǎo)航中的超鏈接進(jìn)入相應(yīng)的頁面。

2.導(dǎo)航設(shè)計的好壞決定了用戶能否方便地使用網(wǎng)站。導(dǎo)航設(shè)計要直觀明了，最大限度的讓用戶使用，盡量讓網(wǎng)頁切換更方便。導(dǎo)航的設(shè)計要符合整個網(wǎng)站的風(fēng)格和要求，不同的網(wǎng)站會采用不同的導(dǎo)航方式。

3.一般來說，在網(wǎng)頁的頂部或左側(cè)設(shè)置導(dǎo)航欄是一種常見的方式。網(wǎng)站以上方文字為主導(dǎo)航，左側(cè)樹形菜單為副導(dǎo)航。

讓用戶知道當(dāng)前位置；

4.讓用戶根據(jù)自己走過的路徑來確定下一步的方向和路徑；

5.你不需要瀏覽太多頁面就能找到需要的信息，讓用戶快速簡單的找到需要的信息，以最佳路徑到達(dá)信息；

6.當(dāng)用戶在使用網(wǎng)站時遇到困難時，可以找到解決困難的辦法，找到最佳路徑；

7.讓用戶清晰了解整個網(wǎng)站的結(jié)構(gòu)概況，產(chǎn)生整體認(rèn)知；

8.有序處理不同使用頻率的信息。

7.1頁面顏色匹配

設(shè)計好的網(wǎng)站一般都有色彩構(gòu)成的傾向。以一種或幾種相鄰的顏色為主導(dǎo)因素，使網(wǎng)頁呈現(xiàn)出全球和諧統(tǒng)一的色彩傾向。

使用顏色系統(tǒng)。首先，根據(jù)網(wǎng)頁的主題，選擇一種主色，然后調(diào)整透明度或飽和度，即增亮或加深顏色，混合出新的顏色。這樣的頁面看起來顏色一致，有層次感；一般來說，有三種顏色適合網(wǎng)頁的標(biāo)準(zhǔn)顏色:藍(lán)色、黃色/橙色和黑色/灰色/白色。

使用對比色。可以充分利用對比色進(jìn)行設(shè)計，注意使用灰色調(diào)進(jìn)行調(diào)和。這類作品的頁面色彩豐富。

7.2寫作藝術(shù)

文字一般占據(jù)了絕大多數(shù)頁面空，是網(wǎng)頁信息的主要載體。處理好文字關(guān)系到網(wǎng)頁設(shè)計的成敗。字體的選擇、字號的大小、文字的顏色、行間的距離、段落的排列都需要仔細(xì)考慮。好的文字設(shè)計會給網(wǎng)頁增加很多色彩。

7.3示例分析1。網(wǎng)站描述

這是一家航空公司空公司網(wǎng)站的主頁。界面設(shè)計給人一種現(xiàn)代感，動作快，與公司風(fēng)格一致。導(dǎo)航設(shè)計簡潔利落，值得借鑒。

2.布局

網(wǎng)頁布局采用通用的列結(jié)構(gòu)。a是網(wǎng)站Logo所在的區(qū)域；b是網(wǎng)站主菜單所在的區(qū)域；c是搜索等公共功能所在的區(qū)域；d是網(wǎng)站的內(nèi)容區(qū)，主要由文字和圖片組成；e是版權(quán)信息所在的區(qū)域。

3.色匹配

網(wǎng)頁為藍(lán)色，象征天空空，與網(wǎng)站主題一致。網(wǎng)頁主要使用兩種藍(lán)色，分別是“#14397D”和“1E95BD”。此外，網(wǎng)頁文本的配色主要是白色和藍(lán)色。