語言：英語
網址：http://www.lynda.com/Dreamweaver-tutorials/Responsive-Design-Dreamweaver-CS6/101071-2.html
類別：教程
Lynda.com 出品的時長2小時6分鐘的web設計Adobe Dreamweaver CS6教程。Adobe Dreamweaver CS6 是 Adobe Creative Suite 6 系列中的 HTML 編輯器和網頁設計軟件，是最優秀的可視化網頁設計工具之一，它擁有直觀的可視界面，可制作并編輯網站和移動應用程序。本課程演示了兩種方法來適應 web 設計新流體網格布局功能和媒體查詢，讓web設計師達到自己的目標適應受眾通過臺式電腦，平板電腦或其他移動設備訪問。Joseph Lowery演示了如何使用流體網格布局，在Dreamweaver中建立一個單一的網站，提供不同的布局有針對性的屏幕尺寸。本課程還提供了更先進的方法，通過使用媒體查詢，采用多屏預覽功能，提高所產生的輸出代碼以及移動的首要任務和自適應圖像處理方法的響應設計。
Adobe Dreamweaver CS6 使設計人員和開發人員能夠設計、開發和維護標準型網站和應用程序、高效創建復雜項目，其響應迅速的自適應網格版面系統為各種設備類型建立版面，讓頁面設計變得更有效率。Adobe Dreamweaver CS6 比 Adobe Dreamweaver CS4 和 Adobe Dreamweaver CS5 支持更多行業標準，如 HTML5 和 CSS3，另外還針對熱門平板電腦和智能手機特別設計，通過 jQuery 移動、PhoneGap、多屏幕預覽面板、自適應網格版面、CSS3/HTML5 等快速建立移動應用程序。
This course illustrates two approaches to responsive web design, the new Fluid Grid Layout feature and media queries, which allow a wide spectrum of designers to reach their target audience via desktops, tablets, or other mobile devices. Author Joseph Lowery shows how to use the Fluid Grid Layout feature in Dreamweaver to create a single web site that delivers different layouts to targeted screen sizes. The course also offers a more advanced approach to responsive design by using media queries—employing the Multiscreen Preview feature and enhancing the resulting output code—as well as methods for handling mobile first priorities and adaptive images.
Topics include:
Exploring the default Fluid Grid Layout
Adding building block div tags
Inserting content into a fluid grid
Modifying the number of grid columns
Adjusting column widths and margins
Building media queries from scratch
Handling orientation changes
Applying JavaScript techniques
Setting up server-side solutions
