你的網(wǎng)頁(yè)將呈現(xiàn)什么樣子?

2018-09-15 18:24 更新

你的網(wǎng)頁(yè)將呈現(xiàn)什么樣子?在你編寫(xiě)代碼之前討論好你的計(jì)劃和設(shè)計(jì)工作,包括:“我的網(wǎng)頁(yè)要呈現(xiàn)什么信息?” “我想要什么字體和顏色?” “我的網(wǎng)頁(yè)有什么用處?”


第一步:作出計(jì)劃

在做任何事之前,你需要一些主意。我的網(wǎng)頁(yè)到底有什么作用?一個(gè)網(wǎng)頁(yè)基本可以做任何事,但是你的第一次嘗試應(yīng)該讓事情簡(jiǎn)單點(diǎn)。我們將以編寫(xiě)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)開(kāi)始,包括一個(gè)頭部,一張圖片和幾個(gè)段落。

開(kāi)始之前,你需要回答這些問(wèn)題:

  1. 你的網(wǎng)頁(yè)內(nèi)容是什么?你喜歡狗狗,紐約或者吃豆人嗎?
  2. 你的主題中要展示什么信息?編寫(xiě)一個(gè)標(biāo)題和幾個(gè)段落,再想幾張你想展示出來(lái)的圖片。
  3. 你的網(wǎng)頁(yè)長(zhǎng)得什么樣?用高級(jí)一點(diǎn)的術(shù)語(yǔ)來(lái)說(shuō)就是,你的背景顏色是什么?什么字體合適:正式的,卡通的,粗體的還是微小的?
提示:復(fù)雜的項(xiàng)目需要詳細(xì)的參考手冊(cè),內(nèi)容包括 顏色,字體,網(wǎng)頁(yè)中各項(xiàng)目的間距。適合的編寫(xiě)規(guī)范等等。參考手冊(cè)有時(shí)也被稱為設(shè)計(jì)指導(dǎo)或者品牌手冊(cè),你可以在 Firefox OS Guidelines 查看一個(gè)參考手冊(cè)。

為你的設(shè)出一個(gè)草稿圖

接下來(lái),拿一支筆和一張紙然后粗糙地畫(huà)出你希望你的網(wǎng)站呈現(xiàn)出來(lái)的樣子。對(duì)于你的第一個(gè)簡(jiǎn)單網(wǎng)頁(yè),并沒(méi)有什么好做的,但是你現(xiàn)在應(yīng)該養(yǎng)成這樣的習(xí)慣。這真的很有用——你并不需要成為下一個(gè)梵高!


提示:即使是在真正的復(fù)雜的網(wǎng)站中,設(shè)計(jì)團(tuán)隊(duì)也是首先在紙上畫(huà)出草稿,然后在圖形編輯器中或者使用Web技術(shù)作出數(shù)碼模型;
Web團(tuán)隊(duì)通常包括一個(gè)圖形設(shè)計(jì)師和用戶體驗(yàn)設(shè)計(jì)師。圖形設(shè)計(jì)師,很顯然,是將網(wǎng)頁(yè)視覺(jué)部分組合在一起。用戶體驗(yàn)設(shè)計(jì)師則負(fù)責(zé)更具體的部分,如用戶如何瀏覽和與網(wǎng)頁(yè)交互。

選擇你的內(nèi)容

現(xiàn)在,最好以將最終將呈現(xiàn)在你網(wǎng)頁(yè)上的內(nèi)容放在一起開(kāi)始。

文本

你應(yīng)該還記得之前的段落和標(biāo)題。

主題顏色

要選擇一種顏色,訪問(wèn) the Color Picker 找出你喜歡的顏色。當(dāng)你在一種顏色上點(diǎn)擊時(shí),你會(huì)看到一個(gè)奇怪的六位編碼像 #660066。這是十六進(jìn)制編碼,并且表示了你的顏色??截愊聛?lái)并將它暫時(shí)保存在安全的地方。

圖像

要選擇一個(gè)圖像,訪問(wèn) Google Images 搜索合適的內(nèi)容。

  1. 當(dāng)你找到想要的圖像時(shí),在圖像上單擊。
  2. 按下 查看圖像 按鈕。
  3. 在下一頁(yè),右擊圖像(或者在Mac上 Ctrl + Click),選擇 圖像另存為…,然后選擇一個(gè)安全的位置存放你的圖像。另外可選的方法是,拷貝你的瀏覽器地址欄上的圖像地址以便后來(lái)使用。


提示:大部分網(wǎng)絡(luò)上的圖片,包括 Google 中的都是有版權(quán)的。為了減少你盜用版權(quán)行為的可能,你可以使用 Google 許可過(guò)濾器。只需 1)點(diǎn)擊搜索按鈕,然后 2)選擇使用權(quán)利:

字體

要選擇一種字體:

  1. 訪問(wèn)  Google Fonts 并把列表一直往下翻直到你找到你想要的。你也可以使用左側(cè)的控制欄來(lái)過(guò)濾結(jié)果。
  2. 點(diǎn)擊"+"(增加)圖標(biāo)旁邊的你想要的字體。
  3. 點(diǎn)擊頁(yè)面底部面板的"* Family Selected"按鈕(‘*’取決于你選擇的字體數(shù)量)。
  4. 在彈出框中,你可以看到并且復(fù)制Google 給你的代碼片段保存至你的文本編輯器以便后續(xù)使用。

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)