Learn Dreamweaver Tutorials: What's New in Dreamweaver CS5 & CS5.5?

Dreamweaver CS5 book
Dreamweaver's features evolve as the web evolves. In this lesson, you'll take a tour of Dreamweaver's new features.
What you'll learn in this lesson:
  • CMS support
  • CSS Inspection tool
  • CSS Enable.Disable
  • Adobe BrowserLab
  • PHP Code Hinting

Creating a site-wide media query file

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.

Media Queries window in Dreamweaver

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.

Specifying a new site-wide media query 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.

  • Note
    After you have defined a site-wide media query file, the information is stored within your site definitions. To access it, choose Site > Manage Site. Choose your current site and click Edit. Click the Advanced Settings; the path to your site-wide media query file appears.

 

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.

  • Note
    Selecting this option places the following line of HTML in the head section of your page: <meta name="viewport" content="width=device-width" />

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.

Media query for mobile

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.

external style sheet in Dreamweaver

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.

Organizing your style sheets

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.

organizing 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.

Creating a layout optimized for mobile

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

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.

Phone view in Dreamweaver CS5.5

The Phone view shows the effect of changing the
container width to 100%

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.

Tips and strategies for optimizing pages for mobile

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.

  • Navigation should be at or near the top of the screen to be easily accessible. Repeat navigation at the bottom of all your pages so the user does not have to scroll up after reading a page.
  • For touchscreen devices, use a large target size for navigation links to prevent accidental clicking.
  • Touchscreen devices do not always have a hover capability as triggered by the mouse cursor on desktops. Plan your styles accordingly and avoid rollover styles.
  • Avoid image-based navigation; use list-based navigation styled with CSS.
  • Single column layout is much easier to navigate and read on a smaller screen. A general strategy for accomplishing this with media queries is by removing floated elements and most layout containers with fixed width and height pixel values.


7 Close your MultiScreen Preview; you’ll now add more styles to your phone.css style sheet and create a single column layout.

  • Note
    Since the Multiscreen Preview is large, it can become cumbersome to constantly open it and close it. If you have dual monitors, you can drag this window to a second monitor. Alternatively, you can collapse the Multiscreen Preview window by clicking the double arrows in the top right corner. Click the arrows again to expand it.
  • 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

    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.

    Previous | 1 2 3 | Next

split

Dreamweaver Tutorial

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.