老11选5开奖结果走势图一定牛:網頁原型之基本布局

我們以麥子學院個人中心的頁面為例畫一個原型圖，首先我們需要對這個頁面有一個大致的概念，首先我們看看這個頁面

頁面總覽

這個頁面包括頂部的導航條，中間老師的個人簡介，下部的老師動態列表，側邊的訪客信息等。有了這個基本框架后，我們就開始畫這個頁面吧。

繪制步驟

1.確定這個頁面的寬度并拉出兩根參考線，分別是100像素和1200像素（這個頁面的寬度是1100像素）

2.繪制導航條的白色背景：選擇矩形部件拉一個1350像素的導航條

3.鎖定導航條

4.選擇圖片部件并替換成麥子學院的logo

5.選擇標簽部件繪制導航文字部分（企業直通班，麥子圈，課程庫，移動APP),可用快捷鍵Ctrl+c快速復制。

6.在部件庫中找到搜索圖標移入畫布，并在部件屬性和樣式中更改透明度

7.在網上下載”提醒“按鈕，直接復制到畫布中并更改大小，透明度等。

8.復制老師照片過來并更改圓角半徑使其成為圓形，再添加文字標簽“文有為”

9.添加三角小箭頭（選擇矩形部件并點擊下面圓點），填充小箭頭的顏色

10.這時候整個導航條就繪制好了，因為這個導航條在很多的頁面都會用到，所以這里轉換為母版（選中導航條，右擊轉換為母版）

11.繪制老師的個人簡介部分（選擇矩形部件拉出一個矩形并填充背景顏色）

12.復制老師頭像并設為圓形，填充老師的個人簡介，繪制”老師“這個標簽

13.繪制右邊的排版

14.繪制下方的欄目（以以上的方法拉出一個矩形，添加兩個標簽：教學和動態，在網上下載教學和動態的圖標添加到畫布，調整他們的透明度）

15.繪制動態?？櫚耐廢癲⑸柚夢?/strong>

16.拉出矩形并繪制小箭頭

17.填充動態?？櫚哪諶藎ǖ蔽淖趾芏嗍?，用顏色，透明度來區分重點）

18.用矩形部件拼接繪制成如下元素，并填充文字內容

19.繪制3個一樣大的矩形

20.在上面3個矩形中分別填充：我的問答，（圖標可在網上下載）

21.“最近訪客”?？櫚幕嬤疲ㄓ蒙廈嫻姆椒ɑ嬤仆廢?，并設置昵稱，復制頭像和昵稱的組合

22.廣告位置的繪制（可使用占位符部件）

23.更多動態的填充（可復制繪制好的組來表示）

24.繪制底部的翻頁圖標（用矩形部件并修改圓角即可）

25.底部版權信息的繪制

26.預覽

【本文由麥子學院獨家原創，轉載請注明出處并保留原文鏈接】