Enter "4" columns for Mobile, "8" columns for Tablet, and "12" columns for Desktop.Ĭlick Create, saving the style sheet as "styles.css" inside the fluid-grid folder. ![]() For this practice project, you will create a layout based on Stephen Caver's design, so the number of columns should be divisible by 4. Unzip it and move it into your dw2projects folder. ![]() The percentage values are quite complicated to calculate, but Dreamweaver CS6's fluid grid layout tool will do the work for you.ĭownload the fluid-grid folder from the course downloads area. The fluid columns are achieved by percentage widths and margins. Test Caver's site in your browser, resizing your window and watching as the columns slide into place. ![]() Web designer Stephen Caver's portfolio site expands across four columns to fit a large resolution:Ĭompresses to two columns to fit a tablet:Īnd wraps to a single column to fit a mobile device: Don't use height and width image attributes in fluid grid layouts.įluid grid layouts meld to any screen size.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |