#Dw cc fluid image width code#

before the links to the boilerplate.css and files, indicating that theses files are located one folder level up from the index.html file. If you've saved your index.html file inside your fluid-grid folder, you'll notice a. This comment links to a JavaScript file which fixes the display of HTML5 elements in versions of IE 8 and below. This is useful info, and you should check out Paul Irish's article when you have a chance, but you don't need this comment repeated in all of your HTML files.īe careful not to delete the comment tag. Select the 'To learn more about.' comment and press Delete. The mobile, layout, and desktop layouts are driven by the same HTML source code-just the styles change.

#Dw cc fluid image width code#

Using the Related Files toolbar, select Source Code and switch to Code View. Click the mobile, tablet, and desktop icons in the lower right corner to see how the layout will appear on each device. You can click the 'Switch to Fluid Grid View' icon in the Document toolbar to toggle the stripes on or off, but keep them turned on for now.

The columns are delineated by pale gray stripes. These are basic stylesheet and JavaScript files that Dreamweaver includes to make your layout fluid. Right away, go to File > Save As, saving the HTML file as index.html in your fluid-grid folder.Ī dialog will pop up, alerting you that you need boilerplate.css and files, which Dreamweaver will create for you automatically. The fluid grid layout will open in a new document window. When the Save Style Sheet File As dialog pops up, name the style sheet style.css and save in the fluid-grid folder. You can modify the number of columns if you like, the overall percentage width of the grid container, and the width of the column gutters (which default to 25% of the column width). The New Fluid Grid layout window shows column layouts for mobile, tablet, and desktop screen sizes. Enter '4' columns for Mobile, '8' columns for Tablet, and '12' columns for Desktop. 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. Go to File > New and choose Fluid Grid Layout. Unzip it and move it into your dw1exercises folder. Creating a New Layoutĭownload the fluid-grid folder from the course downloads area. Percentage values can be complicated to calculate, but Dreamweaver's Fluid Grid Layout tool will do the work for you. 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. For example, 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: The header, body, and footer are all create inside of the main div.Study the different styles to see how they are geared toward ease of use for different devices.Ī fluid grid layout melds to any screen size. For example, a page with a main div, header, body, and footer:

For example, I normally work all of my divs inside a master div, so that my entire page is affected. To do so, create different div's in the document. Are you trying to make the header wider than the rest of the page?