CONTENTS1.設計和制作網(wǎng)站頁面布局設計和制作網(wǎng)站頁面布局1.微課網(wǎng)的視覺設計遵循共同的網(wǎng)頁風格，有自己的配色體系，它們分別是橙色、白色和灰色，我們的色彩體系是如圖所示。微課網(wǎng)色彩體系PART.1設計和制作網(wǎng)站頁面布局網(wǎng)站由非常多的頁面組成，它們都會作為一個資源放入隨書所附的電子資源里面。在這個案例中，重點要介紹4張網(wǎng)頁，分別是首頁、課程、筆記和登陸注冊頁面。它們涉及到交互類型網(wǎng)站的大部分知識，因此，在這里也列出它們的布局圖。網(wǎng)站頁面布局PART.1設計和制作網(wǎng)站頁面布局首頁頁面布局圖課程頁面布局圖PART.1設計和制作網(wǎng)站頁面布局筆記頁面布局圖登陸注冊頁面布局圖根據(jù)上一節(jié)提供的布局圖，以我們的系統(tǒng)配色為依據(jù)，我們制作了頁面圖，這些圖片默認網(wǎng)頁寬度是1024px。PART.1設計和制作網(wǎng)站頁面布局設計和制作頁面圖首頁設計圖課程頁面設計圖根據(jù)上一節(jié)提供的布局圖，以我們的系統(tǒng)配色為依據(jù)，我們制作了頁面圖，這些圖片默認網(wǎng)頁寬度是1024px。PART.1設計和制作網(wǎng)站頁面布局設計和制作頁面圖筆記頁面設計圖登陸注冊頁面設計圖網(wǎng)頁設計師需要考慮有效的表達構思的圖形效果。通過圖形確立網(wǎng)頁風格大致分為：平面圖形、半立體圖形、立體圖形。微課網(wǎng)用平面圖形進行視覺造型。我們設計了統(tǒng)一的字體，插圖，圖形符號，和照片。漢字是我們數(shù)千年來的交流工具，它象形，表意。時至今日，字體(typography)的發(fā)展和研究仍然在繼續(xù)。計算機出現(xiàn)后，字形（typeface）的開發(fā)和表現(xiàn)越來越多樣化字體不僅僅局限于可讀性，也可以依靠文字的屬性-字形、大小、字號、字間距等變化主動的引導人們集中視線。本網(wǎng)站采用微軟雅黑為標準字體，正文字號14px，標題30px，PART.1設計和制作網(wǎng)站頁面布局設計和制作logo、icon字體微課網(wǎng)的Logo來源于微課的漢語拼音Weike，我們使用了前兩個字母W和e然后對它進行變形。我們設計了2個Logo樣式，分別放在首頁和子頁面里面。如圖所示。PART.1設計和制作網(wǎng)站頁面布局logo用于首頁的logo圖用于子頁的logo圖對于網(wǎng)頁而言，圖形符號主要用作象征主頁、網(wǎng)站地圖、留言等圖標，比如說點贊的圖標。稱之為icon。圖形符號有著單一的形態(tài)。在微課網(wǎng)中我們采用了Bootstrap授權使用的圖形。如圖所示。圖形符號（pictogram）是指不受國家、文化、地區(qū)等限制的單一化視覺語言，它也是人們能夠快速、最準確地進行溝通的交流手段。比如奧運會圖形符號如圖所示。PART.1設計和制作網(wǎng)站頁面布局Icon08奧運會圖標公共場所符號微課網(wǎng)使用的部分icon圖越來越多的網(wǎng)站重視網(wǎng)站特效的設計和使用，我們稱之為動效（DynamicEffect）大到頁面的轉(zhuǎn)場，圖片相冊的切換，小到圖標的動作等，在重視用戶交互和用戶體驗的網(wǎng)站中非常多見。比如說w3網(wǎng)站的首頁，它的Logo會隨著http://ua.w3.co/。PART.1設計和制作網(wǎng)站頁面布局設計和制作網(wǎng)站特效圖片輪播首頁中我們采用了圖片輪播的形式，一次播放熱門課程、熱門專題、熱門討論的鏈接式大圖如圖所示。用戶在收藏某課程、筆記的時候就需要點擊收藏圖標。或者在點贊某個帖子，某個課程時，就會出現(xiàn)這