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

2018-09-15 18:24 更新

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


第一步:作出計劃

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

開始之前,你需要回答這些問題:

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

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

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


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

選擇你的內(nèi)容

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

文本

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

主題顏色

要選擇一種顏色,訪問 the Color Picker 找出你喜歡的顏色。當(dāng)你在一種顏色上點擊時,你會看到一個奇怪的六位編碼像 #660066。這是十六進制編碼,并且表示了你的顏色。拷貝下來并將它暫時保存在安全的地方。

圖像

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

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


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

字體

要選擇一種字體:

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

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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號