网页设计初了解-基础知识篇
為了學(xué)習(xí)GitHub去下載Git，結(jié)果n次下載失敗，心態(tài)小崩，今天不學(xué)編程了，轉(zhuǎn)hTML5換換心情，按大佬們教的，學(xué)了一段時(shí)間的枯燥編程要換個(gè)方向換換口味，不然學(xué)習(xí)效率會(huì)變低。這一篇是基礎(chǔ)知識(shí)。
學(xué)前必看
對(duì)于網(wǎng)頁(yè)設(shè)計(jì)，你要明確學(xué)習(xí)的方向，因?yàn)榫W(wǎng)頁(yè)是分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)兩種的，這種靜態(tài)動(dòng)態(tài)并不是指網(wǎng)頁(yè)有無(wú)動(dòng)畫(huà)，而是指一種交互性，靜態(tài)網(wǎng)頁(yè)只能單純的進(jìn)行瀏覽，不能發(fā)表評(píng)論等交互操作。而動(dòng)態(tài)網(wǎng)頁(yè)，是取決于由用戶提供的參數(shù)，并根據(jù)存儲(chǔ)在數(shù)據(jù)庫(kù)中的網(wǎng)站上的數(shù)據(jù)中創(chuàng)建的頁(yè)面。因此每個(gè)人所看到的內(nèi)容都是不一樣的。
對(duì)于不同的網(wǎng)頁(yè)，所使用的語(yǔ)言也不一樣的。例如我現(xiàn)在以HTML5入門(mén)靜態(tài)網(wǎng)頁(yè)，就專攻HTML5，就算以后會(huì)轉(zhuǎn)向PHP做動(dòng)態(tài)網(wǎng)頁(yè)，也屆時(shí)再去學(xué)習(xí)，兩頭兼顧的方法并不適合每個(gè)人，踏踏實(shí)實(shí)學(xué)才是真。
文章目錄
- 學(xué)前必看
- 一、 網(wǎng)頁(yè)設(shè)計(jì)基本概念
- （1） 網(wǎng)址
- （2） 瀏覽器
- （3） 網(wǎng)頁(yè)
- （4） 網(wǎng)站
- （5） 首頁(yè)
- 二、 常見(jiàn)網(wǎng)站類型
- （1） 咨訊門(mén)戶類網(wǎng)站
- （2） 企業(yè)品牌類網(wǎng)站
- （3） 交易類網(wǎng)站
- （4） 功能類網(wǎng)站
- （5） 交互類網(wǎng)站
- 三、 網(wǎng)頁(yè)基本結(jié)構(gòu)
- （1） 網(wǎng)站Logo
- （2） 網(wǎng)站名稱
- （3） 導(dǎo)航菜單
- （4） Banner （橫幅廣告）
- （5） 網(wǎng)頁(yè)正文
- （6） 網(wǎng)頁(yè)頁(yè)腳
- 四、 網(wǎng)頁(yè)基本構(gòu)成元素
- （1） 文本
- （2） 圖像
- （3） 超級(jí)鏈接
- （4） 導(dǎo)航欄
- （5） 動(dòng)畫(huà)
- （6） 表格
- （7） 框架
- （8） 表單
- 五、 網(wǎng)頁(yè)配色
- （1） 色彩搭配原則
- （2） 網(wǎng)頁(yè)色彩搭配方法
一、 網(wǎng)頁(yè)設(shè)計(jì)基本概念
（1） 網(wǎng)址
網(wǎng)址就是文件在互聯(lián)網(wǎng)上的網(wǎng)址。互聯(lián)網(wǎng)是個(gè)虛擬的系統(tǒng)，所有文件或網(wǎng)絡(luò)的位置就用網(wǎng)址表示。在互聯(lián)網(wǎng)上常用來(lái)表示網(wǎng)址的是==“IP”地址==、域名和“URL”。
- IP地址：為保證整個(gè)網(wǎng)絡(luò)的正常運(yùn)行，每個(gè)網(wǎng)絡(luò)和每臺(tái)主機(jī)在互聯(lián)網(wǎng)上都有一個(gè)唯一的地址，稱為IP地址。每個(gè)IP地址由地址類型、網(wǎng)絡(luò)號(hào)與主機(jī)號(hào)三部分組成，通常用數(shù)字與小數(shù)點(diǎn)隔開(kāi)表示。例如： 122.12.3.14； 62.5.48.4等。
- 域名地址：以層次化表示，一般由主機(jī)名、機(jī)構(gòu)名、網(wǎng)絡(luò)名和最高層域名組成。例如：中國(guó)清華大學(xué)的域名地址為：www.tsinghua.edu.cn，它的四部分分別代表WWW服務(wù)器、校名即機(jī)構(gòu)名、網(wǎng)絡(luò)名（edu為教育部門(mén)網(wǎng)絡(luò)）、國(guó)民（cn代表中國(guó)）。
- URL：要定位某一個(gè)文件在互聯(lián)網(wǎng)上的位置就必須使用URL，也就是統(tǒng)一資源定位器（Uniform Resource Locator）的格式由下列三部分組成：
i. 第一部分就是文件打開(kāi)的協(xié)議（或稱為服務(wù)模式）；
ii. 第二部分是存有文件的主機(jī)IP地址（有時(shí)也包括端口號(hào)）；
iii. 第三部分是文件的具體地址，如路徑、目錄和文件名等。
（2） 瀏覽器
瀏覽器是用來(lái)顯示在萬(wàn)維網(wǎng)或局域網(wǎng)等內(nèi)的文字、圖像及其他信息的軟件，它還可以讓用戶與這些文件進(jìn)行交互操作。瀏覽器是電腦上網(wǎng)時(shí)經(jīng)常使用到的應(yīng)用軟件，瀏覽器正是Internet時(shí)代的產(chǎn)物，隨著電腦操作系統(tǒng)的普及、Internet的全球連接及人們對(duì)信息需求的爆炸式增長(zhǎng)，為瀏覽器的誕生和興起提供了強(qiáng)大的動(dòng)力，同時(shí)它也標(biāo)志著互聯(lián)網(wǎng)時(shí)代的來(lái)臨
個(gè)人建議，學(xué)Web前端的，計(jì)算機(jī)上應(yīng)配有IE瀏覽器、Edge瀏覽器、谷歌瀏覽器、火狐瀏覽器這四類基礎(chǔ)瀏覽器，IE的話是為了驗(yàn)證網(wǎng)頁(yè)的兼容性，老師教的要要的，不確定過(guò)時(shí)與否，推薦安裝IE Tasker。
（3） 網(wǎng)頁(yè)
網(wǎng)頁(yè)是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)。通俗地說(shuō)，網(wǎng)站就是由網(wǎng)頁(yè)組成的。網(wǎng)頁(yè)是一個(gè)包含HTML標(biāo)簽的純文本文件，它可以存放在世界某個(gè)角落的某一臺(tái)計(jì)算機(jī)中，是萬(wàn)維網(wǎng)中的一“頁(yè)”，是超文本標(biāo)記語(yǔ)言格式（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用，文件擴(kuò)展名為.html或.htm）。網(wǎng)頁(yè)通常用圖像檔來(lái)提供圖畫(huà)。網(wǎng)頁(yè)要通過(guò)網(wǎng)頁(yè)瀏覽器來(lái)閱讀。
歸根結(jié)底，網(wǎng)頁(yè)就是一個(gè)文本文檔，但是它又能超越文本來(lái)展示內(nèi)容，因此叫超文本。
（4） 網(wǎng)站
網(wǎng)站(Website)是指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言）等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁(yè)的集合。簡(jiǎn)單地說(shuō)，網(wǎng)站是一種溝通工具，人們可以通過(guò)網(wǎng)站來(lái)發(fā)布自己想要公開(kāi)的資訊，或者利用網(wǎng)站來(lái)提供相關(guān)的網(wǎng)絡(luò)服務(wù)。網(wǎng)站是在互聯(lián)網(wǎng)上擁有域名或地址并提供一定網(wǎng)絡(luò)服務(wù)的主機(jī)，是存儲(chǔ)文件的空間，以服務(wù)器為載體。人們可通過(guò)瀏覽器等進(jìn)行訪問(wèn)、查找文件，也可通過(guò)遠(yuǎn)程文件傳輸(FTP)方式上傳、下載網(wǎng)站文件。
網(wǎng)站的制作牽扯到太多技術(shù)，靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)的制作，數(shù)據(jù)庫(kù)等等。路漫漫其修遠(yuǎn)兮。
（5） 首頁(yè)
網(wǎng)站首頁(yè)是一個(gè)網(wǎng)站的入口網(wǎng)頁(yè)，故往往會(huì)被編輯得易于了解該網(wǎng)站，并引導(dǎo)互聯(lián)網(wǎng)用戶瀏覽網(wǎng)站其他部分的內(nèi)容。這部分內(nèi)容一般被認(rèn)為是一個(gè)目錄性質(zhì)的內(nèi)容。大多數(shù)作為首頁(yè)的文件名是index、default、main或portal加上擴(kuò)展名。
例如index.html、 index.aspx、 index.php、 index.asp 。
二、 常見(jiàn)網(wǎng)站類型
（1） 咨訊門(mén)戶類網(wǎng)站
以新聞、供求、產(chǎn)品、展會(huì)、行業(yè)導(dǎo)航、招聘為主的集成式網(wǎng)站，如新浪、騰訊新聞等。
（2） 企業(yè)品牌類網(wǎng)站
企業(yè)網(wǎng)站是企業(yè)在互聯(lián)網(wǎng)上進(jìn)行網(wǎng)絡(luò)營(yíng)銷和形象宣傳的平臺(tái)，相當(dāng)于企業(yè)的網(wǎng)絡(luò)名片。例如Microsoft官網(wǎng)、Oracle官網(wǎng)等等。
（3） 交易類網(wǎng)站
提供網(wǎng)絡(luò)交易的站點(diǎn)，足不出戶即可購(gòu)買到你所喜歡的商品。有B2B、B2C、C2C、C2B四種模式，像我們常用的淘寶、京東、蘇寧都屬于交易類網(wǎng)站。
（4） 功能類網(wǎng)站
網(wǎng)站提供某一種或者幾種功能，比如站長(zhǎng)工具、電話手機(jī)號(hào)碼查詢、物流信息查詢、火車票購(gòu)買等。功能性網(wǎng)站以實(shí)現(xiàn)某一種或者幾種功能為主要服務(wù)內(nèi)容。用戶也是為了實(shí)現(xiàn)某一種功能來(lái)瀏覽該網(wǎng)站。
（5） 交互類網(wǎng)站
這類網(wǎng)站也較為常見(jiàn)，像論壇這類能夠提供用戶進(jìn)行信息交流的站點(diǎn)都是交互類網(wǎng)站，CSDN就是一個(gè)交互類網(wǎng)站。
三、 網(wǎng)頁(yè)基本結(jié)構(gòu)
（1） 網(wǎng)站Logo
LOGO是徽標(biāo)或者商標(biāo)的外語(yǔ)縮寫(xiě)，起到對(duì)徽標(biāo)擁有公司的識(shí)別和推廣的作用，通過(guò)形象的徽標(biāo)可以讓消費(fèi)者記住公司主體和品牌文化。網(wǎng)絡(luò)中的徽標(biāo)主要是各個(gè)網(wǎng)站用來(lái)與其它網(wǎng)站鏈接的圖形標(biāo)志，代表一個(gè)網(wǎng)站或網(wǎng)站的一個(gè)板塊。另外，LOGO還是一種早期的計(jì)算機(jī)編程語(yǔ)言，也是一種與自然語(yǔ)言非常接近的編程語(yǔ)言，它通過(guò)“繪圖”的方式來(lái)學(xué)習(xí)編程，對(duì)初學(xué)者特別是兒童進(jìn)行寓教于樂(lè)的教學(xué)方式。
（2） 網(wǎng)站名稱
網(wǎng)站名稱類似于電視臺(tái)的名稱，網(wǎng)站名稱一般在網(wǎng)站首頁(yè)上，起到區(qū)別網(wǎng)站的目的。
（3） 導(dǎo)航菜單
導(dǎo)航菜單是指位于頁(yè)面頂部或者側(cè)邊區(qū)域的，也稱之為導(dǎo)航欄。在頁(yè)眉橫幅圖片上邊或下邊的一排水平導(dǎo)航按鈕，它起著鏈接站點(diǎn)或者軟件內(nèi)的各個(gè)頁(yè)面的作用。
（4） Banner （橫幅廣告）
橫幅廣告（Banner Ad.）是網(wǎng)絡(luò)廣告最早采用的形式，也是目前最常見(jiàn)的形式。橫幅廣告又稱旗幟廣告，它是橫跨于網(wǎng)頁(yè)上的矩形公告牌，當(dāng)用戶點(diǎn)擊這些橫幅的時(shí)候，通常可以鏈接到廣告主的網(wǎng)頁(yè)。
（5） 網(wǎng)頁(yè)正文
即網(wǎng)頁(yè)的主體內(nèi)容。
（6） 網(wǎng)頁(yè)頁(yè)腳
網(wǎng)頁(yè)頁(yè)腳是網(wǎng)頁(yè)中每個(gè)頁(yè)面的底部的區(qū)域。常用于顯示附加信息。如作者、備案號(hào)等。
四、 網(wǎng)頁(yè)基本構(gòu)成元素
（1） 文本
文本是網(wǎng)頁(yè)上最重要的信息載體和交流工具，網(wǎng)頁(yè)中的主要信息一般都以文本形式為主。
（2） 圖像
圖像元素在網(wǎng)頁(yè)中具有提供信息并展示直觀形象的作用。
而圖像也分為兩種：
- 靜態(tài)圖像：在頁(yè)面中可能是光柵圖形或矢量圖形。通常為GIF，JPEG或PNG；或矢量格式，如SVG或Flash。
- 動(dòng)畫(huà)圖像：通常動(dòng)畫(huà)為GIF和SVG。
對(duì)的，GIF并不一定要是動(dòng)畫(huà)，它也可以不動(dòng)！
（3） 超級(jí)鏈接
超鏈接是從一個(gè)網(wǎng)頁(yè)指向另一個(gè)目的端的鏈接，超鏈界的目的端可以是網(wǎng)頁(yè)，也可以是圖片、電子郵件地址、文件和程序等（標(biāo)準(zhǔn)的“換頁(yè)”反應(yīng)。分為URL、URI、URN），是網(wǎng)頁(yè)重要的構(gòu)成元素。
（4） 導(dǎo)航欄
導(dǎo)航欄在網(wǎng)頁(yè)中是一組超鏈接，其連接的目的端是網(wǎng)頁(yè)中重要的頁(yè)面。
（5） 動(dòng)畫(huà)
動(dòng)畫(huà)（flash動(dòng)畫(huà)）在網(wǎng)頁(yè)中的作用是有效地吸引訪問(wèn)者更多的注意。
（6） 表格
表格是在網(wǎng)頁(yè)中用來(lái)控制面業(yè)信息的布局方式。
（7） 框架
通過(guò)使用框架，你可以在同一個(gè)瀏覽器窗口中顯示不止一個(gè)頁(yè)面。每份HTML文檔稱為一個(gè)框架，并且每個(gè)框架都獨(dú)立于其他的框架。
（8） 表單
表單可以用來(lái)在網(wǎng)頁(yè)中發(fā)送數(shù)據(jù)，特別是經(jīng)常被用在聯(lián)系表單-用戶輸入信息然后發(fā)送到Email中。
五、 網(wǎng)頁(yè)配色
（1） 色彩搭配原則
一個(gè)網(wǎng)站的用色必須要有自己獨(dú)特的風(fēng)格，這樣才能顯得個(gè)性鮮明，給瀏覽者留下深刻的印象。例如順豐官網(wǎng)的黑紅配色就給人一種穩(wěn)重的商務(wù)感。
因?yàn)榫W(wǎng)頁(yè)是設(shè)計(jì)給人看的，因此在遵從藝術(shù)規(guī)律的同時(shí)，還考慮人的生理特點(diǎn)，色彩搭配一定要合理，給人一種和諧、愉快的感覺(jué)，避免采用純度很高的單一色彩，這樣容易造成視覺(jué)疲勞。
網(wǎng)站設(shè)計(jì)也是一種藝術(shù)創(chuàng)作，如何抓住瀏覽者的目光，需要進(jìn)行藝術(shù)創(chuàng)新，設(shè)計(jì)出既符合網(wǎng)站要求，又有一定藝術(shù)特色的網(wǎng)站。
（2） 網(wǎng)頁(yè)色彩搭配方法
同一色相的色彩進(jìn)行變化統(tǒng)一，形成不同明暗層次的色彩，是只有明度變化的配色，給人以親和感。盡管網(wǎng)站設(shè)計(jì)要避免采用單一色彩，以免產(chǎn)生單調(diào)的感覺(jué)，但通過(guò)調(diào)整色彩的飽和度和透明度也可以產(chǎn)生變化，使網(wǎng)站避免單調(diào)。
色環(huán)上相鄰色變化統(tǒng)一配色，能給人以融合、親近感，可以構(gòu)成平靜、調(diào)和而又有變化的色彩效果。采用鄰近色設(shè)計(jì)網(wǎng)頁(yè)可以使網(wǎng)頁(yè)避免色彩雜亂，易于達(dá)到頁(yè)面的和諧統(tǒng)一。
不同相貌的色彩被運(yùn)用到一起，會(huì)產(chǎn)生豐富的色彩效果，能夠引起人們的關(guān)注。通過(guò)合理使用對(duì)比色能夠使網(wǎng)站特色鮮明、重點(diǎn)突出。在設(shè)計(jì)時(shí)一般以一種顏色為主色調(diào)，對(duì)比色作為點(diǎn)綴，可以起到畫(huà)龍點(diǎn)睛的作用。
以紅、橙、黃等暖色為主調(diào)的色彩搭配。這種搭配能給人以熱烈、溫暖、激情等感覺(jué)。
冷色調(diào)是以藍(lán)、綠等冷色為主色調(diào)的色彩搭配。這種搭配能給人以清涼、冷靜、親和的印象。
有問(wèn)題歡迎指出糾正。
轉(zhuǎn)載注明出處。
總結(jié)
以上是生活随笔為你收集整理的网页设计初了解-基础知识篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： x86已安装该产品 剑灵vcredist
- 下一篇： CAD 2014 删除 Autodesk