CSS3 Media Queries are a relatively new phenomenon in web design and are part of the CSS3 specification. Most of the CSS you have been working on throughout the book has been part of the CSS2.0 specification. There are a few ways to add Media Queries to a page. The first method adds the Media Queries code within your existing style sheet (either an internal or external style sheet). The second method is the one that Dreamweaver CS5.5 uses by default, and is called a site-wide media query file. In this method, the site-wide media query file is a special type of external style sheet that has no style rules; instead, this file imports screen-specific external style sheets into your page.
The difference between the two methods is that the first method (where all the screen-specific style rules are contained within a single style sheet) keeps all the rules in one central location. This method is simpler, but the code can become quite large and is not as efficient for the browser. The second method, which uses the site-wide media query file, lets you organize and easily identify your style sheets by category; with this method, adding new screen layouts when necessary is a simple procedure. In the next exercise, you’ll learn how to create the site-wide query file and how to create new style sheets for a Phone layout and a Tablet layout. You’ll also learn how to link your existing style sheet to the site-wide media query file.
1 Your Multiscreen Preview window should be open from the last exercise. If it is not, click the Multiscreen button.
2 Click the Media Queries button in the Edit section at the top right of the preview window. The Media Queries window appears.
|
The Media Queries window in Dreamweaver CS5.5. |
The site-wide media queries file you are about to create will function as a hub to import style sheets with rules designed for Phone and Tablet screens.
3 In the Write Media Queries to section, click the option button for site-wide media queries file, and then click the Specify button. In the window that appears, click the CSS File menu and choose Create new file.
|
Specify a new site-wide media query file. |
4 Click the folder icon to the right of the box you just typed in. The Save File As window appears. Navigate to your dw16lessons folder, type mobile_styles, and click Save. Click OK in the Specify Site-wide Media Query File window. (You do not need to type the .css extension, since Dreamweaver automatically adds this extension.)
This site-wide media query file has a very specific job: it imports external style sheets that contain styles for your different screen resolutions. Right now you don’t have the external style sheets needed, so you will make them.
5 Select the Force devices to report actual width check box. This option overrides a smartphone’s default behavior of scaling a web page to fit the screen.
6 In the Media Queries window, click the Default Presets button; three media query presets appear in the middle window. The first preset is called Phone, and you can use it for screens up to 320 pixels. This preset is selected automatically; you can see the properties of this media query in the Properties section at the bottom.
|
The properties of the Phone preset are visible after you create your default presets. |
7 Click the second preset for Tablet and note the properties for min-width and max-width. These properties are media queries designed to detect the width of the user’s browser window; for this exercise, these values specifically indicate that this query will target windows with a minimum width of 321 pixels and a maximum width of 768 pixels. In other words, any window less than 321 pixels wide will use the Phone style sheet; any window wider than 768 pixels will use the Desktop style sheet. You will now look at the Desktop style sheet.
8 Click the Desktop preset. This preset is designed for a width of 769 or more, which describes the original style of the site.
None of the three presets you have just examined have any style sheets associated with them, yet. You now need to create or link these style sheets so you can begin to add styles for each screen size.
9 Click the Phone preset again, and make sure Create new file is selected in the CSS file section. Click the folder icon to the right; the Save As window appears. Ensure you are saving into your dw16lessons folder, type phone, and then click Save. The file phone.css is created to hold all the styles specific to this layout. Before proceeding, you need to connect the other style sheets.
10 Click the Tablet preset, and then click the folder icon in the Create new file section below. In the Save As window, make sure you are saving into your dw16lessons folder, type tablet, and then click Save.
11 Click the Desktop preset. This time, click the CSS File menu and choose Use Existing file. Click the folder icon, and within your dw16lessons folder, click the styles.css document and press Choose. Since this is the current style sheet containing your pages styles, you only need to point to it.
|
Your Desktop preset links to your original external style sheet. |
12 Click OK in the Media Queries window, and then close the Multiscreen Preview window. Locate the files you just created within the Files panel (mobile_styles.css, phone.css, and tablet.css).
13 In the Files panel, double-click the mobile_styles.css file to open it. This is the site-wide media query file you created in steps 3 and 4. Note that it uses the @import syntax to link to the other three external style sheets. Keep this file open; you will modify it in the next exercise.
The preceding steps might seem long, but you only need to do them the first time you set up media queries. Once you have set them up, you have a framework for creating unique styles for screens of different sizes.
Dreamweaver CS5.5’s new media queries feature simplifies complicated tasks when creating site-wide media queries, but it’s not perfect. To ensure your style sheets are most effective, you need to manually fine-tune them. In this exercise, you will organize the style sheets you created in the last exercise.
1 Your mobile_styles.css file should still be open from the last exercise. If not, open it by double-clicking the file in the Files panel.
2 Select the following code, and then choose Edit > Cut, Ctrl+X (Windows), or Cmd+X (MacOS).
/* Desktop */
@import url(“styles.css”) only screen and (min-width:769px);
3 Place your cursor on the first line, and then choose Edit > Paste, Ctrl+V (Windows), or Cmd+V (MacOS) to paste the code at the top of your document. This step is necessary to ensure that the desktop style sheet is used first, followed by the styles for the phone and tablet style sheets.
|
Your Desktop preset links to your original external style sheet. |
4 Next, select the following code (highlighted in red) and delete it. Do NOT delete the semicolon at the end of the line, or your styles will no longer work.
/* Desktop */
@import url(“styles.css”) only screen and (min-width:769px);
This step is necessary for older browsers that don’t support media queries and only need a standard style sheet to use. Since this line is now a reference to your original style sheet you should not encounter problems with older browsers.
5 Choose File > Save to save this style sheet. Your next step is to remove the reference in your HTML page to your original style sheet.
6 Click your 16_indexwork.html document to open it. Click the Source Code button in the top-left corner to view the HTML of your document.
7 In the Code view, locate the following line in your head section (it should be on line 7):
<link href=”styles.css” rel=”stylesheet” type=”text/css” />
Select this entire line and then press Delete to remove it.
This code is the original link to your style sheet, but you don’t need it because you added a reference to this file in your mobile_styles.css document.
8 Choose File > Save All. Your design view might not appear styled after performing the previous steps, but this is a sign that your mobile style sheet is working. Depending on the resolution of your monitor, if the width of this window is less than 769 pixels, it will use the media query styles. Since you haven’t added media query styles, your site does not appear styled.
Now that you have prepared your site with a site-wide media query file and the associated style sheets, you can begin using them. The general principle of CSS3 Media Queries is that you use the exact same names for the style rules in your phone and tablet style sheets as the style rules in your desktop style sheet. By using the same names, you override the desktop style wherever needed. For example, you will first apply this rule with the ID style called #container. In your desktop style sheet this ID style defines the width of the entire page as 960 pixels. In your phone style sheet you will create another rule with the name #container, but you will set the width to 100% for this style.
In the following exercise, you will only work with the phone style sheet; save the tablet style sheet for practice.
1 Click the Multiscreen button to preview your page and see the current layout of the Phone view. Close your Multiscreen Preview window when done.
2 In your Related Files toolbar, click the phone.css link. The blank style sheet opens in the Code view indicating that there are no styles in this file, yet. Your first task is to change the width of your container.
3 In the CSS Styles panel, click the New CSS Rule button, and then in the Selector Type menu, choose ID. In the Selector name box, type #container.
|
Creating a new rule for the container ID in your phone.css style sheet. |
4 Click OK. In the CSS rule definition window, click the Box category and type 100 in the width box. Click the menu to the right and change the value from px to %. Click OK.
To see the effect this has on your phone style sheet, you will need to preview your page in the Multiscreen Preview.
5 Since you cannot open the Multiscreen Preview when you have a style sheet selected, click the Source Code button in your Related Files toolbar to switch to your HTML page. Now click the MultiScreen button to view your page.
6 When the Multiscreen Preview page opens, you will see your page has dramatically changed. By setting the width of the container to 100%, it will only be as wide as the browser and most of the content within will have shifted or is overlapping. For example, the background image of the vegetables is now under the logo. Also notice the navigation bar does not fit all the way across the screen and has broken to the next line. Scroll down the page and note that your side columns have shifted.
|
The Phone view shows the effect of changing the |
As you can see, creating a page optimized for mobile is not as simple as setting the container width to 100%. The other style rules have explicit height or width values and some of the elements are floating. To fix the rest of the page, you will add rules that remove floats and override any explicit pixel width or height value. The goal is to create a single column layout.
The following is a list of tips and strategies to consider when designing pages for mobile. Navigating and using websites on smaller screens or screens that are touch-enabled is very different from the desktop, and you should take it into consideration.
7 Close your MultiScreen Preview; you’ll now add more styles to your phone.css style sheet and create a single column layout.
8 Click the phone.css button in the Related Files toolbar. You’ll now add styles for the header section.
9 In the CSS Styles panel, click the New CSS Rule button, and then in the Selector Type menu, choose ID. In the Selector name box, type #header.
Click OK. In the CSS rule definition window, click the Background category, click the Background-image menu, and choose none. Click OK. The image of the vegetables that works well in the desktop version but not in the phone version is removed.
|
Setting the background-image to none removes the image of the vegetables from the header. |
10 Choose File > Save all. Choose Source Code and then click the Multiscreen button to see your progress. The background image no longer appears in the header. Close your Multiscreen Preview window.
Your next step is to address the styles of navigation bar. Typically, CSS navigation bars have a few different rules that need to be modified.
Learn Dreamweaver with this Adobe Dreamweaver Tutorial based on the book written by AGI's Adobe Certified Instructors and used in AGI's Adobe Dreamweaver training classes. This Dreamweaver tutorial is provided free of charge for you to learn Dreamweaver on your own and to see the quality of the Dreamweaver book, Dreamweaver training, and Dreamweaver tutorials created by AGI. To learn Dreamweaver with the help of one of our expert instructors please visit AGI's training website. If you are interested in buying this Dreamweaver training book you can buy it on-line at Amazon.com or at your favorite local book store. The team at AGI hopes that you find this Adobe Dreamweaver tutorial a useful way to learn Dreamweaver.
