網(wǎng)站有分靜態(tài)頁(yè)和動(dòng)態(tài)頁(yè)面，簡(jiǎn)易的網(wǎng)站制作不太難。學(xué)習(xí)網(wǎng)頁(yè)制作還是要從基礎(chǔ)學(xué)起，HTML、CSS和JavaScript是基本功。

一、要掌握一些基礎(chǔ)語(yǔ)言的應(yīng)用

HTML是一種語(yǔ)言，最初網(wǎng)站的編寫全是利用HTML代碼編寫出來(lái)的，后來(lái)出現(xiàn)了一些便捷的、優(yōu)化后的工具，才使網(wǎng)頁(yè)設(shè)計(jì)的工作簡(jiǎn)化許多。HTML是基礎(chǔ)啊，學(xué)習(xí)了就能做靜態(tài)的頁(yè)面，待做熟之后，可以開(kāi)始學(xué)習(xí)CSS和JavaScript語(yǔ)言，來(lái)調(diào)用和布局代碼，這樣會(huì)大大簡(jiǎn)化代碼！

二、對(duì)網(wǎng)站的整體布局、風(fēng)格和頁(yè)面創(chuàng)意設(shè)計(jì)的能力

學(xué)網(wǎng)站制作，除了最基本的頁(yè)面制作外，還要學(xué)習(xí)做出不同的前端效果，這是經(jīng)驗(yàn)的積累的過(guò)程。最好的辦法，就是多看優(yōu)秀的網(wǎng)站，并且常問(wèn)自己為什么會(huì)覺(jué)得這個(gè)網(wǎng)站好看？它究竟好在哪里？

久而久之，什么樣的網(wǎng)站是比較優(yōu)秀的網(wǎng)站你心里就有數(shù)了，當(dāng)自己制作網(wǎng)站時(shí)，就會(huì)下意識(shí)的去學(xué)習(xí)模仿，當(dāng)然這需要時(shí)間的磨礪，所以說(shuō)做網(wǎng)站并不是那么簡(jiǎn)單的事情。

就好比智優(yōu)營(yíng)家的網(wǎng)站制作小組，不論是前端、設(shè)計(jì)還是程序，都是積累了大量的經(jīng)驗(yàn)才來(lái)幫客戶制作網(wǎng)站，要做成什么樣、做多少天、達(dá)成什么樣的效果，自己心里得有點(diǎn)數(shù)。

三、網(wǎng)站管理及后臺(tái)程序的調(diào)試要有一定了解

網(wǎng)站管理包括資料的收集整理、寫作和制作、及時(shí)更新網(wǎng)頁(yè)和提供高質(zhì)量的服務(wù)等方面。做網(wǎng)站時(shí)會(huì)經(jīng)常遇到適配問(wèn)題，如何利用工具節(jié)省自己的時(shí)間，都是要學(xué)習(xí)的地方。

花費(fèi)幾個(gè)月的時(shí)間自學(xué)基礎(chǔ)站還是可以的，想做與時(shí)俱進(jìn)的營(yíng)銷型網(wǎng)站，就不太現(xiàn)實(shí)了，還不如直接去找公司幫你做呢。

做網(wǎng)站要多少錢？

要看你做什么類型的網(wǎng)站，網(wǎng)上做一個(gè)網(wǎng)站幾百塊的，基本都不包括手機(jī)站了，而且都是套模板，模板站都比較便宜。

如果是定制站，這個(gè)就標(biāo)準(zhǔn)不一了，少到幾千塊多達(dá)上十萬(wàn)都有，這個(gè)就是與自身需求相關(guān)的。

步驟1:打開(kāi)軟件，APP名稱以及版本號(hào)可隨意填寫，其他選項(xiàng)可默認(rèn)。完成后點(diǎn)擊生成即可安裝APP

關(guān)注小編頭條號(hào)：楊先生 私聊發(fā)送“APP”即可獲取下載鏈接。

如何打造舒適簡(jiǎn)約的網(wǎng)頁(yè)設(shè)計(jì)效果？

網(wǎng)頁(yè)設(shè)計(jì)是網(wǎng)站建設(shè)過(guò)程中重要的組成部分，一個(gè)良好的網(wǎng)站頁(yè)面設(shè)計(jì)，是一種視覺(jué)享受，可以給用戶留下深刻的印象，關(guān)系著整個(gè)網(wǎng)站的用戶體驗(yàn)。

在信息泛濫的互聯(lián)網(wǎng)時(shí)代，人們?cè)絹?lái)越追求簡(jiǎn)約的設(shè)計(jì)風(fēng)格，這種風(fēng)格能給用戶帶來(lái)良好的視覺(jué)體驗(yàn)，更利于信息的傳達(dá)效果，而打造清新簡(jiǎn)約的網(wǎng)頁(yè)設(shè)計(jì)，最關(guān)鍵的就是設(shè)計(jì)好頁(yè)面的布局與顏色搭配。那么如何打造舒適簡(jiǎn)約的網(wǎng)頁(yè)設(shè)計(jì)效果？

1、合理的頁(yè)面版式

設(shè)計(jì)網(wǎng)頁(yè)時(shí)，一定要注意頁(yè)面版式的合理性。一個(gè)合理的版式和讓人一目了然的網(wǎng)頁(yè)能夠給人帶來(lái)舒適的感覺(jué)，并且會(huì)讓人愿意花時(shí)間去了解。注重版式的設(shè)計(jì)，不要讓頁(yè)面版塊塊冗雜,頁(yè)面版式的搭配，注重協(xié)調(diào)簡(jiǎn)潔。合理地搭配設(shè)計(jì)頁(yè)面中的版式，呈現(xiàn)一個(gè)清新簡(jiǎn)潔的網(wǎng)頁(yè)。

2、舒緩的色彩設(shè)計(jì)

無(wú)論哪個(gè)行業(yè)的網(wǎng)頁(yè)，在設(shè)計(jì)過(guò)程中都不要一味地追求視覺(jué)刺激，做出奇異的色彩搭配。在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，設(shè)計(jì)者一定要注重頁(yè)面色彩的搭配，多用暖色調(diào)，協(xié)調(diào)搭配冷暖色。只有色彩足夠協(xié)調(diào)、舒緩，才能夠讓人有繼續(xù)停留的念頭。

3、新穎的網(wǎng)頁(yè)內(nèi)容

來(lái)看網(wǎng)頁(yè)中的內(nèi)容，猶如人的靈魂不可或缺。設(shè)計(jì)一個(gè)網(wǎng)頁(yè)，肯定都是想要宣傳某個(gè)企業(yè)或產(chǎn)品，而網(wǎng)頁(yè)中的內(nèi)容更是不能夠缺少的?，F(xiàn)今，想要用內(nèi)容吸引用戶，就一定需要有新穎的內(nèi)容，從文字或者其他形式的內(nèi)容出發(fā)，注重原創(chuàng)和內(nèi)容的新穎。

4、減少使用特殊字符

進(jìn)行設(shè)計(jì)網(wǎng)頁(yè)時(shí)，盡量少用特殊字符。在不同的計(jì)算機(jī)或者不同的平臺(tái)中，看到的情況有時(shí)候有一些差別，如果使用了特殊字符，很可能會(huì)有比較糟糕的展示效果，所以應(yīng)當(dāng)盡量減少特殊字符的使用。

5、留有合理的間距

在網(wǎng)站設(shè)計(jì)中，有種說(shuō)法叫做“留白”，也就是說(shuō)，在設(shè)計(jì)的時(shí)候，不能將信息安排得太多緊密，要留有合理的間距，這樣容易給用戶造成視覺(jué)壓迫，最終因?yàn)橐曈X(jué)疲勞而離開(kāi)。留白能夠讓圖文更加錯(cuò)落有致，讓網(wǎng)站看起來(lái)想一個(gè)井井有條的房間。

簡(jiǎn)約設(shè)計(jì)風(fēng)最重要的一點(diǎn)是要大方留白，有一些網(wǎng)站充斥著過(guò)量的文字信息，那樣不僅使用戶找不到中心，而且視覺(jué)上也是一種煎熬，我們應(yīng)該只留下重點(diǎn)信息，其余的能棄則棄，這樣網(wǎng)頁(yè)出來(lái)的效果會(huì)使人感覺(jué)到很舒適，用戶更愿意停留在網(wǎng)站上。

深圳優(yōu)聯(lián)創(chuàng)(ucreator)是一家專業(yè)網(wǎng)站建設(shè)公司,我們擁有專業(yè)的技術(shù)團(tuán)隊(duì)，豐富的開(kāi)發(fā)經(jīng)驗(yàn)，優(yōu)質(zhì)高效的服務(wù)為企業(yè)提供高端網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、電子商務(wù)網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)以及進(jìn)銷存系統(tǒng)開(kāi)發(fā)、oa系統(tǒng)開(kāi)發(fā)、微信小程序開(kāi)發(fā)、app定制開(kāi)發(fā)、h5頁(yè)面制作等開(kāi)發(fā)服務(wù),助力企業(yè)伙伴更好發(fā)展。

編輯環(huán)境

制作網(wǎng)頁(yè)不需要安裝任何程序語(yǔ)言編輯器， 所以不用擔(dān)心因?yàn)樘觳粫r(shí)、地不利、網(wǎng)不速，編輯器安裝半天還沒(méi)安裝成功，你就已經(jīng)沒(méi)熱情學(xué)習(xí)了。

制作網(wǎng)頁(yè)只需要打開(kāi)電腦系統(tǒng)自帶的記事本，對(duì)的你沒(méi)聽(tīng)錯(cuò)，就是那個(gè)生成TXT 純文本文檔的小小記事本。

在記事本中寫入網(wǎng)頁(yè)的標(biāo)簽代碼，然后將這個(gè) TXT 文檔另存為后綴名為.html 的文件。

噔！ 噔！ 噔！雙擊打開(kāi)下面這個(gè) HTML 文件，你就可以在瀏覽器看見(jiàn)自己親手制作的網(wǎng)頁(yè)啦。（要注意的是，文件圖標(biāo)會(huì)隨著電腦默認(rèn)瀏覽器的不同而改變）

HTML與CSS關(guān)系

學(xué)習(xí)制作一個(gè)靜態(tài)網(wǎng)頁(yè)需要掌握 HTML、CSS 語(yǔ)言。下面我們就來(lái)了解一下這兩個(gè)語(yǔ)言是分別用來(lái)實(shí)現(xiàn)什么的。

1. HTML 是網(wǎng)頁(yè)內(nèi)容的載體。內(nèi)容就是網(wǎng)頁(yè)制作者放在頁(yè)面上想要讓別人瀏覽的信息，

包含文字、圖片、鏈接等。

2. CSS 是樣式表現(xiàn)，就像是網(wǎng)頁(yè)的外衣。比如，字體的選擇、大小和顏色變化，或插入圖片、邊框等，這些用來(lái)改變網(wǎng)頁(yè)外觀的東西稱之為表現(xiàn)。

如果將靜態(tài)網(wǎng)頁(yè)比做一個(gè)人的話，HTML 就是人的四肢、眼睛和骨頭這種實(shí)質(zhì)性的東西，CSS 就是衣服、配飾和妝容等把人打扮得漂漂亮亮的表現(xiàn)。

HTML

HTML 是 HyperText Markup Language（超文本標(biāo)記語(yǔ)言）的縮寫，是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言，使用標(biāo)記標(biāo)簽描述網(wǎng)頁(yè)中的文字、圖片、鏈接等，標(biāo)記標(biāo)簽由開(kāi)始標(biāo)簽< >和結(jié)束標(biāo)簽組成，兩者中間填入內(nèi)容。

很官方？看不懂？沒(méi)關(guān)系，我舉一個(gè)例子你就可以 get 到了。下面是知乎的一個(gè)登錄頁(yè)面。

我們可以看到，這個(gè)登錄頁(yè)面主要包括主標(biāo)題“知乎”、副標(biāo)題“與世界分享你的知識(shí)、經(jīng)驗(yàn)和見(jiàn)解”、兩個(gè)輸入框和“登錄”按鈕。HTML 是表示內(nèi)容和語(yǔ)義的，它不僅確定網(wǎng)頁(yè)有哪些文本內(nèi)容，而且還用標(biāo)記標(biāo)簽告訴瀏覽器哪些文本是標(biāo)題，哪些文本是按鈕，哪里放置輸入框，甚至哪里需要放置圖片。比如，“知乎”這兩個(gè)字的語(yǔ)義是主標(biāo)題，所以它在頁(yè)面中字體最大。HTML中主標(biāo)題（一級(jí)標(biāo)題）的標(biāo)記標(biāo)簽是

知乎

HTML 的基本結(jié)構(gòu)

打開(kāi)你電腦的記事本，把下面這段代碼復(fù)制到記事本中吧，我們開(kāi)始一步一步來(lái)制作網(wǎng)頁(yè)。

名字：

性別：

生日：

班級(jí)：

興趣愛(ài)好：

我先介紹一下HTML 的基本結(jié)構(gòu)：

定義這個(gè)網(wǎng)頁(yè)是用 HTML 語(yǔ)言制作的。

稱為根標(biāo)簽，所有的網(wǎng)頁(yè)標(biāo)簽都要嵌套在中，標(biāo)記著HTML 的開(kāi)始和結(jié)束。

表示 HTML 的頭部，描述 HTML 文檔的各種屬性和信息，包括網(wǎng)頁(yè)的標(biāo)題、CSS 樣式通過(guò)標(biāo)簽嵌套在ＨＴＭＬ的頭部控制網(wǎng)頁(yè)內(nèi)容的樣式。

CSS樣式由選擇符和聲明組成，而聲明又由屬性和值組成。

選擇符又稱選擇器，指明網(wǎng)頁(yè)中要應(yīng)用樣式規(guī)則的標(biāo)簽，如上圖的例子就是把網(wǎng)頁(yè)中所有段落（p）的文字顏色變成藍(lán)色，而其他標(biāo)簽不會(huì)受到影響。

在英文大括號(hào)“｛｝”中的就是聲明，屬性是指字體大小、顏色、對(duì)齊方式等，值是指字體具體有多大。顏色具體是哪個(gè)等。屬性和值之間用英文冒號(hào)“：”分隔，當(dāng)有多條聲明時(shí)，中間可以英文分號(hào)“;”分隔。

CSS的常用屬性

在這里我們主要講幾種ＣＳＳ常用的屬性。

網(wǎng)頁(yè)的字體屬性是font-family，常用的值有ＳｉｍＳｕｎ（宋體）?。樱椋恚龋澹椋ê隗w）　Microsoft Yahei（微軟雅黑）　ＫａｉＴｉ（楷體）

我們來(lái)嘗試一下，將前面做的自我介紹網(wǎng)頁(yè)的字體設(shè)置為常用的微軟雅黑字體。整個(gè)網(wǎng)頁(yè)的字體包含在標(biāo)簽中，所以選擇符為body.

標(biāo)簽代碼：

在瀏覽器中顯示：

字體大小的屬性是font-size，它的值常用的單位是px（像素），px的值越大字號(hào)越大；

字體顏色的屬性是color，你可以將它的值設(shè)置為你喜歡的顏色。

用代碼將自我介紹網(wǎng)頁(yè)中段落

的字號(hào)放大一點(diǎn)，并將整個(gè)網(wǎng)頁(yè)的字體顏色設(shè)置為與編玩邊學(xué)圖片相似的藍(lán)色。段落的選擇符為p,整個(gè)網(wǎng)頁(yè)的選擇符為body。

標(biāo)簽代碼：

在瀏覽器中顯示：

我們還可以給網(wǎng)頁(yè)中的某部分增加一個(gè)邊框。

邊框樣式的屬性是border-style，常用的值有solid（實(shí)線）和

dotted（虛線）

邊框?qū)挾鹊膶傩允莃order-width，它的值常用單位也是px（像素）

邊框顏色屬性是border-color，你可以設(shè)置成自己喜歡的顏色。

我想給名字的部分加一個(gè)紅色的實(shí)線邊框，所以選擇符是h1。

標(biāo)簽代碼：

在瀏覽器中顯示：

美化網(wǎng)頁(yè)的CSS屬性有很多種類，而且方法也不只一種，在這里無(wú)法一一詳述?？齑蜷_(kāi)記事本為你剛剛制作的自我介紹網(wǎng)頁(yè)添加一些好看的CSS樣式吧。

雙擊打開(kāi)html文件你會(huì)發(fā)現(xiàn)之前不忍直視的網(wǎng)頁(yè)變得好看了哦。給自己點(diǎn)個(gè)贊吧！

極簡(jiǎn)主義網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格，如何才能做到簡(jiǎn)約而不簡(jiǎn)單？簡(jiǎn)約風(fēng)設(shè)計(jì)需要了解和掌握哪些禁忌和技巧，才能讓網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)潔而不失魅力？繼續(xù)閱讀文章，小編將結(jié)合具體實(shí)例為大家一一講解。

近幾年，極簡(jiǎn)主義設(shè)計(jì)風(fēng)格（也稱簡(jiǎn)約設(shè)計(jì)風(fēng)格）越來(lái)越多的為設(shè)計(jì)師們所認(rèn)可，采用并日漸流行。而這不僅僅是因?yàn)槠浣缑婧?jiǎn)單整潔，便于用戶理解和操作，還因其在提升網(wǎng)站和軟件應(yīng)用的加載速度，頁(yè)面屏幕兼容度，以及用戶體驗(yàn)愉悅度等方面，作用巨大。

然而，簡(jiǎn)約設(shè)計(jì)風(fēng)格并不是機(jī)械地刪除或減少網(wǎng)站或頁(yè)面組件/模塊那么簡(jiǎn)單。相反，界面中每一個(gè)小細(xì)節(jié)都應(yīng)該被重視，且飽含設(shè)計(jì)師創(chuàng)意和用心。

那么，作為UX/UI設(shè)計(jì)師，如何才能設(shè)計(jì)出簡(jiǎn)約而不失活力以及魅力的網(wǎng)頁(yè)呢？網(wǎng)頁(yè)極簡(jiǎn)主義設(shè)計(jì)究竟有哪些設(shè)計(jì)技巧和禁忌呢？

以下小編就結(jié)合最新的網(wǎng)頁(yè)設(shè)計(jì)實(shí)例，為大家分析和講解簡(jiǎn)約頁(yè)面設(shè)計(jì)風(fēng)格的相關(guān)技巧，禁忌以及思路：

首先，究竟什么是極簡(jiǎn)主義設(shè)計(jì)風(fēng)格？

極簡(jiǎn)主義設(shè)計(jì)風(fēng)格，也稱簡(jiǎn)約設(shè)計(jì)風(fēng)格，顧名思義，就是使用盡可能少的組件或部件，實(shí)現(xiàn)網(wǎng)站以及軟件應(yīng)用的人機(jī)交互。

當(dāng)然，這并不代表設(shè)計(jì)師可以毫無(wú)節(jié)制的簡(jiǎn)化網(wǎng)頁(yè)或軟件界面，以致丟失掉其本有魅力和生命力，造成界面難以理解，甚至使用更加復(fù)雜的局面。反而應(yīng)該在去除多余組件或模塊的基礎(chǔ)上，使用最少的元素，達(dá)到最佳的用戶體驗(yàn)和銷售效果。

而這一點(diǎn)上，與小編經(jīng)常使用的一款名為Mockplus的原型工具，不斷追求更快，更簡(jiǎn)單地設(shè)計(jì)，制作，測(cè)試，分享和迭代網(wǎng)頁(yè)或軟件應(yīng)用原型的設(shè)計(jì)理念是不謀而合的。Mockplus對(duì)你創(chuàng)建簡(jiǎn)約而極具魅力的網(wǎng)頁(yè)設(shè)計(jì)非常有用。

如圖，簡(jiǎn)約風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì)，簡(jiǎn)潔而直觀。

其次，為什么選擇簡(jiǎn)約設(shè)計(jì)風(fēng)格？

在閱讀簡(jiǎn)約網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格的相關(guān)概念之后，希望能夠進(jìn)一步了解其為設(shè)計(jì)師所追捧的真正原因？以及極簡(jiǎn)主義網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格的相關(guān)作用具體體現(xiàn)在哪些方面？不用擔(dān)心，大家可以從以下幾個(gè)方面簡(jiǎn)單理解這類網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格的效用：

1.簡(jiǎn)約網(wǎng)頁(yè)設(shè)計(jì)更加簡(jiǎn)潔易用，用戶體驗(yàn)愉悅度極高

2.極簡(jiǎn)主義設(shè)計(jì)簡(jiǎn)單且兼容性強(qiáng)，更易于軟件或網(wǎng)頁(yè)響應(yīng)式設(shè)計(jì)

3.簡(jiǎn)單干凈的界面設(shè)計(jì)更符合現(xiàn)今快節(jié)奏的用戶需求

4.簡(jiǎn)約整潔的網(wǎng)頁(yè)設(shè)計(jì)，加載速度更快，能有效地降低網(wǎng)頁(yè)跳出率

5.簡(jiǎn)潔低噪音的界面設(shè)計(jì)，更易于用戶專注于界面內(nèi)容和產(chǎn)品功能，提升產(chǎn)品銷量

總之，極簡(jiǎn)主義設(shè)計(jì)風(fēng)格是一種既能滿足用戶需求，又能體現(xiàn)設(shè)計(jì)師創(chuàng)造性和獨(dú)特性的設(shè)計(jì)方式。它不僅是現(xiàn)今熱門的UI設(shè)計(jì)流行趨勢(shì)，還將在相當(dāng)長(zhǎng)的一段時(shí)間內(nèi)繼續(xù)流行下去。所以，作為app或web UX/UI設(shè)計(jì)師，了解和學(xué)習(xí)相關(guān)技巧，結(jié)合網(wǎng)站，軟件或產(chǎn)品特色，有選擇的使用簡(jiǎn)約設(shè)計(jì)風(fēng)格，也是非常必要的。

如圖，簡(jiǎn)潔低噪音的界面設(shè)計(jì)，更易于展示網(wǎng)頁(yè)產(chǎn)品，增加其銷量。

如何才能在網(wǎng)頁(yè)界面設(shè)計(jì)中體現(xiàn)簡(jiǎn)約之美？

既然簡(jiǎn)約設(shè)計(jì)在提升用戶體驗(yàn)愉悅度，加載速度以及頁(yè)面兼容性和產(chǎn)品銷量方面，作用如此巨大，究竟如何才能在頁(yè)面設(shè)計(jì)中體現(xiàn)其簡(jiǎn)約之美？簡(jiǎn)約設(shè)計(jì)的技巧和禁忌有哪些？接下來(lái)，小編就結(jié)合最新網(wǎng)頁(yè)設(shè)計(jì)實(shí)例以及小編利用更快，更簡(jiǎn)單的原型工具制作的相關(guān)實(shí)例，為大家講解，在網(wǎng)頁(yè)界面設(shè)計(jì)中該如何兼具魅力和簡(jiǎn)約之美：

1.利用自然留白，突出軟件或產(chǎn)品功能/特色

與繪畫中添加留白以增加作品神秘感，給予受眾足夠想象空間的目的不同，網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)中留白（也稱負(fù)空間）的使用，則更偏向于減少界面噪音，突出界面展示內(nèi)容。讓用戶更自然地將視線集中于展示的軟件或產(chǎn)品功能，服務(wù)和特色，加深用戶印象，從而增加產(chǎn)品銷量。

如圖，利用大量留白突出頁(yè)面展示內(nèi)容。

所以，設(shè)計(jì)師在界面設(shè)計(jì)中，要注意自然留白的設(shè)計(jì)和應(yīng)用，引導(dǎo)用戶點(diǎn)擊或購(gòu)買。

2.巧用色彩，讓界面簡(jiǎn)約而不失視覺(jué)吸引力

簡(jiǎn)單色彩的選擇和應(yīng)用，不僅不會(huì)增加頁(yè)面的復(fù)雜程度，相反，還能幫助劃分界面功能模塊，讓界面簡(jiǎn)單而不失視覺(jué)魅力。而這一方面，大家可以從以下幾個(gè)方面進(jìn)行嘗試：

*簡(jiǎn)單色彩或配色方案的選擇和應(yīng)用，提升界面視覺(jué)吸引力

簡(jiǎn)約界面設(shè)計(jì)風(fēng)格并不等于毫無(wú)色彩或僅僅單調(diào)地使用一種或黑白兩種色彩。事實(shí)上，即使是簡(jiǎn)單使用一種色彩，結(jié)合色彩漸變，飽和度以及透明度的變化，也可以使整個(gè)網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)潔而極富視覺(jué)效果。

所以，在極簡(jiǎn)主義網(wǎng)頁(yè)設(shè)計(jì)中，設(shè)計(jì)師可以嘗試一種，多種以及同一色系色彩的選擇和應(yīng)用，簡(jiǎn)化界面設(shè)計(jì)，提升其視覺(jué)吸引力。

如圖，簡(jiǎn)單選擇同一色系色彩，結(jié)合形狀以及背景圖片，讓頁(yè)面視覺(jué)上更加豐富而出眾。

當(dāng)然，色彩的選擇也應(yīng)把握一個(gè)度。過(guò)多的色彩應(yīng)用，反而事倍功半，使界面更加復(fù)雜。

而且，即使是日漸流行的簡(jiǎn)單黑白配色的選擇，巧妙結(jié)合設(shè)計(jì)師創(chuàng)意，也可以大氣時(shí)尚。

如圖，簡(jiǎn)單的黑白配色，也可時(shí)尚而獨(dú)特。

*色塊可兼具劃分界面功能/模塊的作用

為簡(jiǎn)化頁(yè)面設(shè)計(jì)，色塊的使用也可兼具界面功能/板塊劃分的作用。

如圖，利用簡(jiǎn)單色塊劃分界面功能區(qū)。

而就這一方面而言，在使用Mockplus原型化相關(guān)簡(jiǎn)約界面設(shè)計(jì)時(shí)，設(shè)計(jì)師可以簡(jiǎn)單的拖拽“形狀”組件以及文本相關(guān)組件，結(jié)合其色彩，透明度以及邊框等屬性設(shè)置輕松實(shí)現(xiàn)。

如圖，利用Mockplus的形狀，圖片以及文本等組件，通過(guò)不同背景色彩劃分頁(yè)面功能模塊。

*色彩的對(duì)比使用，增強(qiáng)界面活力

色彩屬性（例如色彩透明度和飽和度），形狀以及明暗色系的對(duì)比使用，不僅能夠極大地提升界面視覺(jué)效果，在增強(qiáng)界面生命力和活力方面作用也不容小覷。

如圖，利用跳躍的色彩對(duì)比，提升頁(yè)面視覺(jué)影響力。

簡(jiǎn)而言之，色彩的簡(jiǎn)單使用，能夠簡(jiǎn)化頁(yè)面的同時(shí)，提升其視覺(jué)吸引力和生命力。

3.優(yōu)化界面字體以及排版，體現(xiàn)界面層次結(jié)構(gòu)

除去色彩，界面文本內(nèi)容，字體以及排版的優(yōu)化，也能使整款網(wǎng)頁(yè)設(shè)計(jì)更加簡(jiǎn)潔干凈，直觀生動(dòng)地展示其頁(yè)面層次結(jié)構(gòu)。比如：

*簡(jiǎn)化文本內(nèi)容，讓界面更加直觀易懂

采用更加簡(jiǎn)潔的用語(yǔ)，句式或形式（例如小標(biāo)題或列表）簡(jiǎn)化界面文本內(nèi)容，讓頁(yè)面設(shè)計(jì)更加簡(jiǎn)單易懂，直觀實(shí)用。

如圖，利用列表簡(jiǎn)化頁(yè)面文本內(nèi)容。

*巧用文字屬性/排版，體現(xiàn)頁(yè)面結(jié)構(gòu)和層次

優(yōu)秀的簡(jiǎn)約網(wǎng)頁(yè)設(shè)計(jì)，一般不會(huì)使用太多字體和排版。簡(jiǎn)單一兩種，結(jié)合文字大小，顏色，粗細(xì)，行間距以及排列位置（例如包含，并列等排列方式）等屬性設(shè)置，也能簡(jiǎn)單而直觀地體現(xiàn)頁(yè)面結(jié)構(gòu)和層次關(guān)系。

如圖，利用文本尺寸，字體以及排版的不同展現(xiàn)頁(yè)面的層次關(guān)系。

而這一點(diǎn)上，設(shè)計(jì)師們可以直接使用Mockplus的“單行文本”和“多行文本”組件輕松實(shí)現(xiàn)。無(wú)論是其文本色彩，下劃線，斜體，字體，尺寸，對(duì)齊方式，還是文字邊框，行間距，自動(dòng)折行，外部鏈接以及排版等屬性設(shè)計(jì)，都能簡(jiǎn)單實(shí)現(xiàn)，真正的做到“所見(jiàn)即所得”。

因此，在你網(wǎng)頁(yè)或軟件應(yīng)用的設(shè)計(jì)之中，除了簡(jiǎn)化文本內(nèi)容，也要注意文本字體，屬性以及排版的選擇和使用，突出其頁(yè)面層次和結(jié)構(gòu)。

4.利用圖片對(duì)界面文本進(jìn)行闡釋

極簡(jiǎn)主義界面設(shè)計(jì)，“少即是多”的設(shè)計(jì)理念告訴我們，當(dāng)千言萬(wàn)語(yǔ)也無(wú)法清楚表情達(dá)意時(shí)，簡(jiǎn)單地添加適當(dāng)圖片，更能清晰明了的表達(dá)設(shè)計(jì)師意愿，事半而功倍。

如圖，利用圖片更加生動(dòng)直觀地闡釋文字。

而在圖片添加方面，設(shè)計(jì)師可以充分嘗試Mockplus的“圖片”，“GIF”組件以及“我的組件庫(kù)”等功能，實(shí)現(xiàn)靜態(tài)，動(dòng)態(tài)以及批量圖片的添加的和優(yōu)化。Sketch圖片的導(dǎo)入，批量圖標(biāo)的添加和編輯等等，都不是問(wèn)題。

5.利用網(wǎng)格區(qū)分界面功能和重要性

簡(jiǎn)單的網(wǎng)格設(shè)計(jì)是網(wǎng)頁(yè)極簡(jiǎn)主義設(shè)計(jì)風(fēng)格中，設(shè)計(jì)師們最常用的功能/模塊劃分方式之一。當(dāng)軟件或網(wǎng)頁(yè)設(shè)計(jì)中使用一致的網(wǎng)格設(shè)計(jì)時(shí)，不僅能夠簡(jiǎn)潔直觀的劃分和展示其功能模塊，還能幫助用戶在瀏覽頁(yè)面的過(guò)程中形成一定的閱讀習(xí)慣，從而更加快速流暢的查詢需要的網(wǎng)頁(yè)內(nèi)容。

如圖，簡(jiǎn)單網(wǎng)格的應(yīng)用，更加直觀地劃分頁(yè)面功能模塊。

而網(wǎng)格的設(shè)計(jì)，設(shè)計(jì)師可以嘗試使用Mockplus的 “格子”和“自動(dòng)填充”功能，一鍵批量填充所需界面文本或圖片，一次性解決重復(fù)性工作。

6.保留菜單和導(dǎo)航設(shè)計(jì)，優(yōu)化用戶體驗(yàn)

極簡(jiǎn)主義設(shè)計(jì)風(fēng)格并不是毫無(wú)節(jié)制的減少界面部件。而網(wǎng)頁(yè)菜單和導(dǎo)航設(shè)計(jì)，作為優(yōu)化用戶體驗(yàn)的重要因素，即便是簡(jiǎn)約風(fēng)格的頁(yè)面設(shè)計(jì)，也不應(yīng)該被忽略或刪除。反而應(yīng)該使用更加直觀易識(shí)別的方式呈現(xiàn)，例如使用鏈接，側(cè)邊欄或隱藏菜單欄的方式呈現(xiàn)導(dǎo)航或菜單設(shè)計(jì)，優(yōu)化用戶體驗(yàn)。

如圖，保留菜單欄導(dǎo)航設(shè)計(jì)，引導(dǎo)用戶使用，提升用戶體驗(yàn)。

7.簡(jiǎn)約設(shè)計(jì)風(fēng)格與其他設(shè)計(jì)技巧的完美結(jié)合

極簡(jiǎn)主義設(shè)計(jì)風(fēng)格，因其簡(jiǎn)單直觀且靈活的設(shè)計(jì)特點(diǎn)，在具體的設(shè)計(jì)實(shí)例中，可以輕松地與其他設(shè)計(jì)風(fēng)格和技巧進(jìn)行結(jié)合，創(chuàng)建更加優(yōu)質(zhì)的網(wǎng)頁(yè)設(shè)計(jì)。比如，設(shè)計(jì)師們可以從以下解各方面進(jìn)行嘗試：

*與漸進(jìn)式設(shè)計(jì)技巧的結(jié)合，讓頁(yè)面更加簡(jiǎn)潔直觀

漸進(jìn)式設(shè)計(jì)技巧，即通過(guò)添加簡(jiǎn)單的組件或元素（例如側(cè)邊欄或隱藏菜單欄等部件）逐漸展現(xiàn)網(wǎng)頁(yè)或界面功能的設(shè)計(jì)技巧。用戶需要時(shí)，即可簡(jiǎn)單點(diǎn)擊，展開(kāi)和了解更能多軟件網(wǎng)頁(yè)功能。而這一點(diǎn)上，在本質(zhì)上與追求界面簡(jiǎn)潔直觀的簡(jiǎn)約設(shè)計(jì)風(fēng)格是相符合的。所以，設(shè)計(jì)中，可簡(jiǎn)單的加以結(jié)合。

*與不同設(shè)計(jì)主題的結(jié)合，切合網(wǎng)頁(yè)或產(chǎn)品主題/特色

極簡(jiǎn)主義設(shè)計(jì)也可在圖標(biāo)，色彩以及圖片的選擇上體現(xiàn)不同的主題，以切合不同網(wǎng)頁(yè)或產(chǎn)品主題或特色，加深用戶印象。

如圖，直接首頁(yè)輪播展示產(chǎn)品圖片，加深用戶印象，提升產(chǎn)品銷量。

*與設(shè)計(jì)師創(chuàng)意的結(jié)合，打造網(wǎng)頁(yè)的獨(dú)特魅力

簡(jiǎn)約網(wǎng)頁(yè)設(shè)計(jì)處處都可體現(xiàn)設(shè)計(jì)師的創(chuàng)意和用心，注重設(shè)計(jì)與創(chuàng)意的結(jié)合，打造網(wǎng)頁(yè)的特有魅力。

總之，設(shè)計(jì)師需要開(kāi)動(dòng)腦筋，結(jié)合不同的設(shè)計(jì)熱點(diǎn)，風(fēng)格或技巧，打造簡(jiǎn)單而獨(dú)特的網(wǎng)頁(yè)設(shè)計(jì)。

8.采用Web設(shè)計(jì)習(xí)慣用法，讓網(wǎng)頁(yè)設(shè)計(jì)更符合用戶“口味”

網(wǎng)頁(yè)設(shè)計(jì)中的習(xí)慣用法，是無(wú)數(shù)設(shè)計(jì)師根據(jù)用戶需求，不斷實(shí)踐，調(diào)整和改進(jìn)的結(jié)果，是符合用戶“口味”的設(shè)計(jì)方法。所以，設(shè)計(jì)師在進(jìn)行極簡(jiǎn)主義設(shè)計(jì)的過(guò)程中，也可直接沿用一些Web設(shè)計(jì)習(xí)慣用法，讓界面更加實(shí)用。

例如，web導(dǎo)航習(xí)慣用法（包括站點(diǎn)ID，搜索方式，實(shí)用工具，回主頁(yè)的方式，導(dǎo)航欄目等五個(gè)基本元素）的使用，讓導(dǎo)航真正發(fā)揮其引導(dǎo)作用。如圖：

或者，利用用戶所熟知的“矩形 + 鏈接”的方式，設(shè)計(jì)CTA按鈕，增加其點(diǎn)擊率。利用放大鏡圖標(biāo)或圖樣，指代界面搜索功能。以及使用側(cè)邊欄或隱藏式菜單欄擴(kuò)展界面功能等等。

使用習(xí)慣性用法，使網(wǎng)頁(yè)設(shè)計(jì)更易于用戶識(shí)別區(qū)分，簡(jiǎn)化操作過(guò)程。而且，在一定情景下，設(shè)計(jì)所對(duì)應(yīng)的解釋文本都可以在不影響達(dá)意的情況下，直接省略，從而簡(jiǎn)化網(wǎng)頁(yè)設(shè)計(jì)。

9.注意界面細(xì)節(jié)設(shè)計(jì)，讓每一個(gè)部件或設(shè)計(jì)都發(fā)揮其作用

簡(jiǎn)約設(shè)計(jì)，是盡量減少多余的組件或元素的設(shè)計(jì)。所以，設(shè)計(jì)師需要花費(fèi)足夠多的時(shí)間對(duì)留下來(lái)的組件或元素進(jìn)行優(yōu)化，讓每一個(gè)組件都發(fā)揮其應(yīng)有的作用。簡(jiǎn)而言之，就是在實(shí)際的設(shè)計(jì)案例中，注重網(wǎng)頁(yè)logo, 色彩，圖標(biāo)，網(wǎng)格，文字字體排版，幾何圖形選擇與添加以及簡(jiǎn)單交互與動(dòng)畫的創(chuàng)意設(shè)計(jì)等等細(xì)節(jié)的設(shè)計(jì)，擴(kuò)展界面功能。

如圖，利用簡(jiǎn)單小動(dòng)畫或交互，吸引用戶注意力。

比如，在使用Mockplus創(chuàng)建簡(jiǎn)約網(wǎng)頁(yè)設(shè)計(jì)原型時(shí)，可以使用其交互設(shè)計(jì)和交互狀態(tài)功能為界面按鈕，文字或組件添加簡(jiǎn)單交互或動(dòng)畫，優(yōu)化用戶體驗(yàn)。

此外，界面打開(kāi)之后，默認(rèn)選中項(xiàng)的設(shè)置，對(duì)于簡(jiǎn)化頁(yè)面設(shè)計(jì)，引導(dǎo)或暗示用戶完成某項(xiàng)操作，作用也是非常明顯的。

細(xì)節(jié)決定成敗，網(wǎng)頁(yè)的簡(jiǎn)約設(shè)計(jì)更是如此。

總之，希望以上羅列的設(shè)計(jì)實(shí)例和技巧能對(duì)你的極簡(jiǎn)主義網(wǎng)頁(yè)設(shè)計(jì)有所幫助。

牢記簡(jiǎn)約風(fēng)設(shè)計(jì)思路：

設(shè)計(jì)師在進(jìn)行簡(jiǎn)約風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)時(shí)，也需要牢記一些簡(jiǎn)單的設(shè)計(jì)思路，簡(jiǎn)化整個(gè)設(shè)計(jì)過(guò)程

首先，先復(fù)雜，再逐個(gè)簡(jiǎn)化

為了防止漏掉某些設(shè)計(jì)元素或功能，設(shè)計(jì)師可以通過(guò)先將所有需要的設(shè)計(jì)一一添加到界面中，然后...

Frontpage是微軟公司出品的一款制作網(wǎng)頁(yè)入門級(jí)軟件，制作網(wǎng)頁(yè)的前提是自己必需要有一定的網(wǎng)頁(yè)代碼知識(shí)能力，下面為大家介紹下如何用frontpage制作簡(jiǎn)單的網(wǎng)頁(yè)，感興趣的朋友可以參考下

Frontpage是微軟公司出品的一款制作網(wǎng)頁(yè)入門級(jí)軟件，也是Office辦公軟件里的其中一種，主要是針對(duì)于網(wǎng)頁(yè)制作的.當(dāng)然，現(xiàn)在很多人使用 Dreamweaver制作網(wǎng)頁(yè)。一般剛開(kāi)始學(xué)習(xí)做網(wǎng)頁(yè)的朋友可以考慮用Frontpage和Dreamweaver一起來(lái)制作，F(xiàn)rontpage是結(jié) 合于大家平臺(tái)操作OFFICE工具的習(xí)慣性開(kāi)發(fā)的，所以也不難，而Dreamweaver制作也不難，在開(kāi)始操作前，可以對(duì)兩個(gè)軟件的功能先有一個(gè)基礎(chǔ)了 解即可，另一個(gè)，制作網(wǎng)頁(yè)的前提是自己必需要有一定的網(wǎng)頁(yè)代碼知識(shí)能力，如果自己一個(gè)代碼都不認(rèn)得，建議先了解一些基礎(chǔ)先，可以買一些入門書籍，然后跟著 書的演示一步步操作即可.兩個(gè)軟件的制作方法雷同，只是有一些個(gè)別地方使用方法不一樣而已，問(wèn)題不大，基本類似，可根據(jù)自己有習(xí)慣選擇。

對(duì)于有些朋友來(lái)說(shuō),可能自己有OFFICE辦公軟件不全,并沒(méi)有配套Frontpage,那么小編提供一個(gè)Frontpage獨(dú)立包,下載安裝即可使用. 請(qǐng)看下方參考處分享鏈接http://pan.baidu/s/1pJ4Wl2j(安裝過(guò)呈中如果出現(xiàn)錯(cuò)誤,請(qǐng)選擇"忽略"提示即可)

然后,我們打開(kāi)Frontpage軟件,些軟件打開(kāi)如同其它辦公軟件雷同,我們選擇文件菜單欄下的下新建或者是又邊的新建空白文本檔都行

如果我們要插入一個(gè)表格,可以選擇菜單欄上的表格>插入>表格,之后就是打開(kāi)一個(gè)表格的屬性,設(shè)置表格樣式.

如果對(duì)表格進(jìn)行屬性設(shè)置,可以雙擊表格,或者選中表格,然后右鍵,選擇單元格屬性即可打開(kāi)屬性窗口.(Dreamwaever此處就方便一些,在下方有屬性可直接設(shè)置)

如果想通過(guò)布局來(lái)規(guī)劃網(wǎng)站的話,可以選擇"表格">布局表格或者單元格,

然后在右邊導(dǎo)航欄處選擇"插入布局表格,或者單元格都行,再又將左邊的編輯模式設(shè)置成"設(shè)計(jì)"然后編輯頁(yè)面會(huì)出現(xiàn)一個(gè)框,對(duì)著框一直拉大拉小即可

接著就是設(shè)置表頭,表中,底部等一列表,都是插入表格或者添加圖片文字類即可.排序同文本排序一樣設(shè)置.

簡(jiǎn)單制作完成后,如下圖,選擇預(yù)覽模式即可看到.

PS:制作網(wǎng)頁(yè)還是需要制作人對(duì)基礎(chǔ)代碼有一定的了解才行,自己了解了才能看得懂,才能分析,建議多看一些基本書本.另外2007版以后的OFFICE不含frontpage已被下圖軟件所替代了.

最簡(jiǎn)單的編程，在頁(yè)面顯示hello world。

新建文本文檔在桌面上右鍵鼠標(biāo)，新建文本文檔

打開(kāi)新建文本文檔

輸入如下代碼

Hello World

Hello World

保存后重命名文本文檔為“Hello World.html”一定要是.html

用瀏覽器打開(kāi)

設(shè)置居中顯示   

Hello World

如何打造舒適簡(jiǎn)約的網(wǎng)頁(yè)設(shè)計(jì)效果？

網(wǎng)頁(yè)設(shè)計(jì)是網(wǎng)站建設(shè)過(guò)程中重要的組成部分，一個(gè)良好的網(wǎng)站頁(yè)面設(shè)計(jì)，是一種視覺(jué)享受，可以給用戶留下深刻的印象，關(guān)系著整個(gè)網(wǎng)站的用戶體驗(yàn)。

在信息泛濫的互聯(lián)網(wǎng)時(shí)代，人們?cè)絹?lái)越追求簡(jiǎn)約的設(shè)計(jì)風(fēng)格，這種風(fēng)格能給用戶帶來(lái)良好的視覺(jué)體驗(yàn)，更利于信息的傳達(dá)效果，而打造清新簡(jiǎn)約的網(wǎng)頁(yè)設(shè)計(jì)，最關(guān)鍵的就是設(shè)計(jì)好頁(yè)面的布局與顏色搭配。那么如何打造舒適簡(jiǎn)約的網(wǎng)頁(yè)設(shè)計(jì)效果？

1、合理的頁(yè)面版式

設(shè)計(jì)網(wǎng)頁(yè)時(shí)，一定要注意頁(yè)面版式的合理性。一個(gè)合理的版式和讓人一目了然的網(wǎng)頁(yè)能夠給人帶來(lái)舒適的感覺(jué)，并且會(huì)讓人愿意花時(shí)間去了解。注重版式的設(shè)計(jì)，不要讓頁(yè)面版塊塊冗雜,頁(yè)面版式的搭配，注重協(xié)調(diào)簡(jiǎn)潔。合理地搭配設(shè)計(jì)頁(yè)面中的版式，呈現(xiàn)一個(gè)清新簡(jiǎn)潔的網(wǎng)頁(yè)。

2、舒緩的色彩設(shè)計(jì)

無(wú)論哪個(gè)行業(yè)的網(wǎng)頁(yè)，在設(shè)計(jì)過(guò)程中都不要一味地追求視覺(jué)刺激，做出奇異的色彩搭配。在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，設(shè)計(jì)者一定要注重頁(yè)面色彩的搭配，多用暖色調(diào)，協(xié)調(diào)搭配冷暖色。只有色彩足夠協(xié)調(diào)、舒緩，才能夠讓人有繼續(xù)停留的念頭。

3、新穎的網(wǎng)頁(yè)內(nèi)容

來(lái)看網(wǎng)頁(yè)中的內(nèi)容，猶如人的靈魂不可或缺。設(shè)計(jì)一個(gè)網(wǎng)頁(yè)，肯定都是想要宣傳某個(gè)企業(yè)或產(chǎn)品，而網(wǎng)頁(yè)中的內(nèi)容更是不能夠缺少的。現(xiàn)今，想要用內(nèi)容吸引用戶，就一定需要有新穎的內(nèi)容，從文字或者其他形式的內(nèi)容出發(fā)，注重原創(chuàng)和內(nèi)容的新穎。

4、減少使用特殊字符

進(jìn)行設(shè)計(jì)網(wǎng)頁(yè)時(shí)，盡量少用特殊字符。在不同的計(jì)算機(jī)或者不同的平臺(tái)中，看到的情況有時(shí)候有一些差別，如果使用了特殊字符，很可能會(huì)有比較糟糕的展示效果，所以應(yīng)當(dāng)盡量減少特殊字符的使用。

5、留有合理的間距

在網(wǎng)站設(shè)計(jì)中，有種說(shuō)法叫做“留白”，也就是說(shuō)，在設(shè)計(jì)的時(shí)候，不能將信息安排得太多緊密，要留有合理的間距，這樣容易給用戶造成視覺(jué)壓迫，最終因?yàn)橐曈X(jué)疲勞而離開(kāi)。留白能夠讓圖文更加錯(cuò)落有致，讓網(wǎng)站看起來(lái)想一個(gè)井井有條的房間。

簡(jiǎn)約設(shè)計(jì)風(fēng)最重要的一點(diǎn)是要大方留白，有一些網(wǎng)站充斥著過(guò)量的文字信息，那樣不僅使用戶找不到中心，而且視覺(jué)上也是一種煎熬，我們應(yīng)該只留下重點(diǎn)信息，其余的能棄則棄，這樣網(wǎng)頁(yè)出來(lái)的效果會(huì)使人感覺(jué)到很舒適，用戶更愿意停留在網(wǎng)站上。

深圳優(yōu)聯(lián)創(chuàng)(ucreator)是一家專業(yè)網(wǎng)站建設(shè)公司,我們擁有專業(yè)的技術(shù)團(tuán)隊(duì)，豐富的開(kāi)發(fā)經(jīng)驗(yàn)，優(yōu)質(zhì)高效的服務(wù)為企業(yè)提供高端網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、電子商務(wù)網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)以及進(jìn)銷存系統(tǒng)開(kāi)發(fā)、oa系統(tǒng)開(kāi)發(fā)、微信小程序開(kāi)發(fā)、app定制開(kāi)發(fā)、h5頁(yè)面制作等開(kāi)發(fā)服務(wù),助力企業(yè)伙伴更好發(fā)展。

編輯環(huán)境

制作網(wǎng)頁(yè)不需要安裝任何程序語(yǔ)言編輯器， 所以不用擔(dān)心因?yàn)樘觳粫r(shí)、地不利、網(wǎng)不速，編輯器安裝半天還沒(méi)安裝成功，你就已經(jīng)沒(méi)熱情學(xué)習(xí)了。

制作網(wǎng)頁(yè)只需要打開(kāi)電腦系統(tǒng)自帶的記事本，對(duì)的你沒(méi)聽(tīng)錯(cuò)，就是那個(gè)生成TXT 純文本文檔的小小記事本。

在記事本中寫入網(wǎng)頁(yè)的標(biāo)簽代碼，然后將這個(gè) TXT 文檔另存為后綴名為.html 的文件。

噔！ 噔！ 噔！雙擊打開(kāi)下面這個(gè) HTML 文件，你就可以在瀏覽器看見(jiàn)自己親手制作的網(wǎng)頁(yè)啦。（要注意的是，文件圖標(biāo)會(huì)隨著電腦默認(rèn)瀏覽器的不同而改變）

HTML與CSS關(guān)系

學(xué)習(xí)制作一個(gè)靜態(tài)網(wǎng)頁(yè)需要掌握 HTML、CSS 語(yǔ)言。下面我們就來(lái)了解一下這兩個(gè)語(yǔ)言是分別用來(lái)實(shí)現(xiàn)什么的。

1. HTML 是網(wǎng)頁(yè)內(nèi)容的載體。內(nèi)容就是網(wǎng)頁(yè)制作者放在頁(yè)面上想要讓別人瀏覽的信息，

包含文字、圖片、鏈接等。

2. CSS 是樣式表現(xiàn)，就像是網(wǎng)頁(yè)的外衣。比如，字體的選擇、大小和顏色變化，或插入圖片、邊框等，這些用來(lái)改變網(wǎng)頁(yè)外觀的東西稱之為表現(xiàn)。

如果將靜態(tài)網(wǎng)頁(yè)比做一個(gè)人的話，HTML 就是人的四肢、眼睛和骨頭這種實(shí)質(zhì)性的東西，CSS 就是衣服、配飾和妝容等把人打扮得漂漂亮亮的表現(xiàn)。

HTML

HTML 是 HyperText Markup Language（超文本標(biāo)記語(yǔ)言）的縮寫，是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言，使用標(biāo)記標(biāo)簽描述網(wǎng)頁(yè)中的文字、圖片、鏈接等，標(biāo)記標(biāo)簽由開(kāi)始標(biāo)簽< >和結(jié)束標(biāo)簽組成，兩者中間填入內(nèi)容。

很官方？看不懂？沒(méi)關(guān)系，我舉一個(gè)例子你就可以 get 到了。下面是知乎的一個(gè)登錄頁(yè)面。

我們可以看到，這個(gè)登錄頁(yè)面主要包括主標(biāo)題“知乎”、副標(biāo)題“與世界分享你的知識(shí)、經(jīng)驗(yàn)和見(jiàn)解”、兩個(gè)輸入框和“登錄”按鈕。HTML 是表示內(nèi)容和語(yǔ)義的，它不僅確定網(wǎng)頁(yè)有哪些文本內(nèi)容，而且還用標(biāo)記標(biāo)簽告訴瀏覽器哪些文本是標(biāo)題，哪些文本是按鈕，哪里放置輸入框，甚至哪里需要放置圖片。比如，“知乎”這兩個(gè)字的語(yǔ)義是主標(biāo)題，所以它在頁(yè)面中字體最大。HTML中主標(biāo)題（一級(jí)標(biāo)題）的標(biāo)記標(biāo)簽是

知乎

HTML 的基本結(jié)構(gòu)

打開(kāi)你電腦的記事本，把下面這段代碼復(fù)制到記事本中吧，我們開(kāi)始一步一步來(lái)制作網(wǎng)頁(yè)。

名字：

性別：

生日：

班級(jí)：

興趣愛(ài)好：

我先介紹一下HTML 的基本結(jié)構(gòu)：

定義這個(gè)網(wǎng)頁(yè)是用 HTML 語(yǔ)言制作的。

稱為根標(biāo)簽，所有的網(wǎng)頁(yè)標(biāo)簽都要嵌套在中，標(biāo)記著HTML 的開(kāi)始和結(jié)束。

表示 HTML 的頭部，描述 HTML 文檔的各種屬性和信息，包括網(wǎng)頁(yè)的標(biāo)題、CSS 樣式通過(guò)標(biāo)簽嵌套在ＨＴＭＬ的頭部控制網(wǎng)頁(yè)內(nèi)容的樣式。

CSS樣式由選擇符和聲明組成，而聲明又由屬性和值組成。

選擇符又稱選擇器，指明網(wǎng)頁(yè)中要應(yīng)用樣式規(guī)則的標(biāo)簽，如上圖的例子就是把網(wǎng)頁(yè)中所有段落（p）的文字顏色變成藍(lán)色，而其他標(biāo)簽不會(huì)受到影響。

在英文大括號(hào)“｛｝”中的就是聲明，屬性是指字體大小、顏色、對(duì)齊方式等，值是指字體具體有多大。顏色具體是哪個(gè)等。屬性和值之間用英文冒號(hào)“：”分隔，當(dāng)有多條聲明時(shí)，中間可以英文分號(hào)“;”分隔。

CSS的常用屬性

在這里我們主要講幾種ＣＳＳ常用的屬性。

網(wǎng)頁(yè)的字體屬性是font-family，常用的值有ＳｉｍＳｕｎ（宋體）　ＳｉｍＨｅｉ（黑體）　Microsoft Yahei（微軟雅黑）?。耍幔椋裕椋w）

我們來(lái)嘗試一下，將前面做的自我介紹網(wǎng)頁(yè)的字體設(shè)置為常用的微軟雅黑字體。整個(gè)網(wǎng)頁(yè)的字體包含在標(biāo)簽中，所以選擇符為body.

標(biāo)簽代碼：

在瀏覽器中顯示：

字體大小的屬性是font-size，它的值常用的單位是px（像素），px的值越大字號(hào)越大；

字體顏色的屬性是color，你可以將它的值設(shè)置為你喜歡的顏色。

用代碼將自我介紹網(wǎng)頁(yè)中段落

的字號(hào)放大一點(diǎn)，并將整個(gè)網(wǎng)頁(yè)的字體顏色設(shè)置為與編玩邊學(xué)圖片相似的藍(lán)色。段落的選擇符為p,整個(gè)網(wǎng)頁(yè)的選擇符為body。

標(biāo)簽代碼：

在瀏覽器中顯示：

我們還可以給網(wǎng)頁(yè)中的某部分增加一個(gè)邊框。

邊框樣式的屬性是border-style，常用的值有solid（實(shí)線）和

dotted（虛線）

邊框?qū)挾鹊膶傩允莃order-width，它的值常用單位也是px（像素）

邊框顏色屬性是border-color，你可以設(shè)置成自己喜歡的顏色。

我想給名字的部分加一個(gè)紅色的實(shí)線邊框，所以選擇符是h1。

標(biāo)簽代碼：

在瀏覽器中顯示：

美化網(wǎng)頁(yè)的CSS屬性有很多種類，而且方法也不只一種，在這里無(wú)法一一詳述。快打開(kāi)記事本為你剛剛制作的自我介紹網(wǎng)頁(yè)添加一些好看的CSS樣式吧。

雙擊打開(kāi)html文件你會(huì)發(fā)現(xiàn)之前不忍直視的網(wǎng)頁(yè)變得好看了哦。給自己點(diǎn)個(gè)贊吧！