Creating responsive designs is the best innovation in web design, and Adobe’s new Fluid Grid Layout system is a great starting point for Dreamweaver CS6.
The new Fluid Grid Layout option is over “File” menu, and it’s a new category in the New Document window.
Reading: How to create a fluid website in dreamweaver cs6
As you develop your designs, remember that the key to creating an attractive web design is to use all divs and other elements in your HTML document so that they work in all three layouts. For example, create a one-column layout on the mobile version, a two-column layout on the tablet, and expand on the desktop version the design on three or more columns.
Remember that in responsive design, the Divs and other elements need to be positioned on the page in such a way that you can use CSS c to rearrange them for the best display on each device category (phone, tablet, desktop). This approach requires some planning and usually a bit of trial and error. However, your reward will be that you get a consistent, efficient look to the siteen)
See also: How to start a book blog
Step 6: Add Fluid Grid Layout Divs
When you add Fluid Grid Layout Divs, you can resize them by You click and drag on the corners of each div. When you resize, the divs automatically snap to the nearest grid line. Warning: If you view the corresponding styles, which are automatically created in code view, you will see , that sizes are given to the fourth decimal point, like this: Width: 48.2758%. Resist the urge to round those numbers. If you change these numbers in Code view, Dreamweaver will no longer automatically adjust them for you.
Tip: If you resize a layout div by dragging it from right to left, you are physically shrinking the div. If you drag from left to right, add a border on the left side.
See also: Best Blogging Niche – 7 That Will Make Money (Easily)
Step 7: Create multi-column layouts
To create multiple columns, click the small arrow to the right of a resized div element. After a div is moved up, a new arrow will appear in the lower left to move it back down.
More Responsive / Adaptive Web Design Tutorials
- Get inspired by these great responsive design examples
- Multiscreen design: How to create responsive/adaptive web designs
- What is the difference between adaptive and Responsive web design?
Step-by-step video training with project files to get you started
Order Janine’s Dreamweaver CS6 training video and receive the Antonio Gaudi Website Watch as you create your own responsive websites using Dreamweaver’s fluid grid layout capabilities.
See also: How Much Does a Domain Name Cost? 4 Key Factors Influencing What You Should Expect to Pay
css, dwcs6, mobile web design.
