操作介面..pdfVIP

Google Web Designer 跨平台網頁設計與動畫製作超活用 2.2 操作介面 Google Web Designer 有一個大型的工作區，可以用來建立專案並編輯程式 碼。工作區周圍有工具列、工具選項列、時間軸，以及屬性面板，可進行所有 設定，包括修改元件、新增元件和新增事件等動作。 ??Google Web Designer 介面 2-10 Chapter 02 基本介紹 A. 工具面板 工具列中提供了可在工作區中建立和操作元件的工具，包括建立文字和簡單頁 面元件所需的工具，如色彩選擇工具和 3D 工具。 B. 工具選項面板 工具選項列會顯示目前所選工具的進階編輯功能，以可進一步的進行相關設 定。例如：選取文字工具時，工具選項列會顯示字體和文字版面配置的選項。 C. 時間軸 時間軸（Timeline) 用來安排圖形或元件出場的時間、移動的位置等，當你安排 好各種物件以後，在播放專案內容時，系統會依據時間軸中的順序與指令等製 成內容來進行播放。因此，時間軸是整個動畫製作的核心。 D. 屬性面板 在屬性面板中，包含了色彩、屬性、元件、事件和 CSS 等標籤面板。透過相 關面板中的屬性設定，利於設計者可很輕鬆的對各個物件進行視覺呈現上的調 整。換句話說，工作區中的任何元件內容，其基本樣式都必須透過屬性面板中 的各種標籤面板來進行設定調整。 E. 工作區 位於 Google Web Designer 介面中央的是工作區。在設計模式中，工作區會以 顯示圖片、文字和其他元件的視覺呈現效果為主，就跟在瀏覽器中會看到的顯 示情形相同。在程式碼檢視中，工作區則以相對應的色彩編碼和格式來顯示程 式碼。 F. 檢視列 檢視列可在設計和程式碼模式兩者中作切換選擇，也可預覽與發佈所設計的內 容。右邊的功能還可以變更縮放比例和頁面的切換。 2-11 Google Web Designer 跨平台網頁設計與動畫製作超活用 2.3 設定環境 Google Web Designer 的「檢視」選單中，其項目主要是以調整工作區和元件 的顯示方式為主。設計者可根據設計的需求進行工作區呈現樣貌的調整。 2.3.1 查看外框與標籤 當在「檢視」選單中選取「外框 純外框」時，工作區內所有未選取的元件 都會顯示虛線外框，藉此了解目前的選擇元件狀態。如果選取「檢視 外框 附標籤的外框」，每個元件還會附上標示類型與 ID 的標籤。最後，當在複 雜的版面配置中，選取「檢視 外框 關閉」，可關閉虛線框與標籤名稱， 藉此可降低視覺干擾。 ??純外框模式 2-12 Chapter 02 基本介紹 ??附標籤的外框 ??關閉外框與標籤名稱 2.3.2 貼齊基準 貼齊功能可讓你在移動元件時，沿著同一水平面或垂直面來放置元件。如要啟 用貼齊功能，需在「檢視」選單中選取「貼齊」，接著從「貼齊基準」子選單 中選取你要對齊的元件： 2-13 Google Web Designer