老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.預覽
【本文由麥子學院獨家原創,轉載請注明出處并保留原文鏈接】