Adobe Dreamweaver CC

How to code HTML5 and CSS faster

Build the structure of a tile-based web page using tag highlighting, line number highlighting, CSS selector code hinting, and code completion. (Try it, 30 min)

FromTommi West, Dan Carr

Dreamweaver CC includes code editing features to help you find, select, author, and update code. The new tag-matching feature makes it easy to identify containers and page structure as you type. Line highlighting and line collapsing let you manage source code and style sheets with ease.

What do I need?

Get files Sample files to practice with (ZIP, 2 MB)

Get PDF Dreamweaver cheat sheet

Code hinting has been updated to match the latest web standards. The new CSS auto-completion feature helps you produce pages faster and reduces the possibility of introducing errors. You’ll also notice that Code View is much more responsive as you type. Update long, complex pages and see how the development environment keeps pace with each keystroke.

And if you like to work with a combination of code and design, you can manipulate page structures using the new Element Quick View feature. Select items in Live View, Design View, Element Quick View, and the tag selector to jump to the corresponding code in Code View. As you work, your edits are immediately reflected in Code View. Enhanced visual cues in Code View and customized color code hints help you implement your great web design ideas.

In this article, you’ll learn about the features in Code View that streamline your development process as you create the structure of sample page from scratch. Be sure to check out Dan Carr’s video, along with the accompanying downloadable project files (ZIP, 700 KB), in which he demonstrates using the latest features in Code View to define the basic structure of a web page (see Video 1) and then follow the steps in this article to try the features on your own.

Video 1. Dan Carr demonstrates using the latest features of Code View to create the structure of a web page.

 

Begin by downloading the project files (ZIP, 2 MB). Expand the ZIP file and save it to your desktop. Download and install the latest version of Adobe Dreamweaver CC from Adobe Creative Cloud.

The project files folder contains the finished version of the file, named index_final.html. You can open the file in Dreamweaver to use it as a reference (see Figure 1).

Figure 1. The finished version of the sample project previewed in Chrome
Figure 1. The finished version of the sample project previewed in Chrome

Special thanks to Dan Carr for designing the sample project featured in this article. After you complete the steps in this article, check out the article titled How to edit and preview web pages with new Live View features to continue working with the sample project as you explore the new features available in Live View.

Setting up a new project

Follow these steps to begin building the sample project:

  1. Launch Dreamweaver CC.

  2. Choose Site > Manage Sites, and then click New Site.

  3. In the Site Setup dialog box that appears, type a name for the site: DW CC Code. Click the folder icon next to Local Site Folder and browse to select the dw_cc_code folder on your desktop. Click Save (see Figure 2).

     

    Figure 2. Use the Site Setup dialog box to create a new project
    Figure 2. Use the Site Setup dialog box to create a new project

  4. Click Done to close the Manage Sites dialog box.

  5. Choose Window > Files to open the Files panel and take a moment to familiarize yourself with the site files.

    The sample project contains an HTML page named index_final.html, a CSS file named dw_example.css, a source folder with preproduction assets, and an images folder that contains the site's image files.

  6. Right-click the root folder of the site and choose New File from the context menu. Name the new file index.html (see Figure 3).

     

    Figure 3. Create a new file named index.html at the root level of the site project
    Figure 3. Create a new file named index.html at the root level of the site project

  7. Select the index.html file and then press Shift as you click the index_final.html file. Double-click both files to open them.

  8. Click the Code button to see the pages in Code View. Click the tab for the index.html page.

  9. Review the default page structure of the new page. The HTML5 doctype is listed first on line 1. The html tag surrounds the page content. The HTML tag contains some metadata and the title tag. It is also where you’ll add the link to the CSS file later. Below that is the set of body tags that will contain all the page elements displayed in a browser.

  10. Click in the title tag to replace the default title of Untitled Document. Type Dreamweaver CC between the opening and closing title tags. Your title tag should look like the following:

    <title>Dreamweaver CC</title>

    The site project and the initial HTML page are now set up. In the next section, you’ll create the page structure for the layout.

Adding the grid and tile containers

The sample project has a relatively positioned div container named grid. Inside, a set of eight absolutely positioned div containers are displayed at specific page locations to create the tiled effect.

Before adding the grid structure, follow the steps to review a diagram of the page layout.

  1. In the Files panel, click the _src folder to expand it. Double-click the file named tile_layout.jpg to open it in Photoshop or the application your machine is configured to open JPG file types (see Figure 4).

     

    Figure 4. Review the diagram of the layout
    Figure 4. Review the diagram of the layout

    Note: It doesn’t matter which program opens because you’ll only be viewing the JPG file.

     

    The diagram displays the positioning of tiles in the site on a grid. The dimensions for the grid and each of the div tile containers are mapped out with their width, height, and positioning coordinates. Drawing this type of blueprint, or wireframe, and calculating the attributes of each container before you begin coding the CSS styles provides a helpful starting point for designing your web site. You could just list the values on a piece of paper, but it is better to create a drawing of the layout.

  2. Notice that the grid container is a wrapper that surrounds all the tiles. You will use CSS to define the grid to be relatively positioned, so it can be styled to display in the center of the visitor’s screen.

  3. Also notice that the wireframe includes the final width of the page: 1140 pixels. This is a standard size for creating web content for desktop displays.

  4. Return to Dreamweaver. You can keep the JPG file open if you’d like to refer to it as you work.

  5. Click below the opening body tag and type the following:

    <div class="grid">
    </div>
    

    As you type the first two characters of the closing div tag, code completion hints help you finish typing it.

  6. Click between the opening and closing div tags and press the Enter or Return key 9 or 10 times to make some space for the div tiles that you’ll create in the next section.

  7. Click inside the opening grid div tag and notice that the closing div tag also highlights (see Figure 5). This light gray visual cue makes it easy to see containers and identify the page structure in your code.

     

    Figure 5. Matching tag highlighting can reduce typing mistakes
    Figure 5. Make fewer typing mistakes with matching tag highlighting

    Matching tags are highlighted whenever you select any part of an opening or closing tag. The highlighting displays when you select tags using keyboard navigation keys as well as when you click them. Tag highlighting also works with Live Code and the Code inspector.

  8. Click below the opening div tag for the grid and type:

    <div class="tile">   
    </div>

    All eight of the div tile containers have the same .tile class assigned, so you can copy and (later) paste the code you just typed to save time.

  9. Select the opening and closing div class for the tile. As two or more lines of code are selected, notice how the corresponding line numbers highlight (see Figure 6).

     

    Figure 6. While a block of code is selected, the line numbers for selected elements are highlighted in blue
    Figure 6. While a block of code is selected, the line numbers for selected elements are highlighted in blue

    Line number highlighting is a new feature in the 2014 release of Dreamweaver. The line numbers are highlighted when elements are selected in Code View, Live Code, Design View, and the Code Inspector.

  10. Right-click the div tile container and choose Copy from the context menu, or use the keyboard shortcut: Ctrl/Command+C.

  11. Paste the copied tag set seven times, to create a total of eight div tile containers nested inside the outer div grid tag. When you are working with longer pages, you can select blocks of code and collapse them by clicking the Collapse Section button (see Figure 7).

     

    Figure 7. Collapsing sections of the code makes longer pages more manageable
    Figure 7. Make longer pages more manageable by collapsing sections of the code

    To display the complete source code again, click the Expand All button below the Collapse Selection button.

Creating the CSS file and adding styles

Next you’ll create the external CSS file that will contain all the styles to define the page layout and appearance.

  1. Choose File > New. In the New Document dialog box, choose CSS as the Page Type and click Create.

    The new CSS file opens in the Document window.

  2. Choose File > Save to save the file in the site folder alongside the index.html file. Name the file grid_styles.css and click Save.

    Notice that the CSS file immediately appears in the Files panel along with the other site files (see Figure 8).

     

    Figure 8. The site definition ensures that all related files are saved in the local root folder
    Figure 8. The site definition ensures that all related files are saved in the local root folder

    The Files panel includes many features for managing your assets, so you don’t need to leave the Dreamweaver workspace. It’s a best practice to use the Files panel whenever you want to rename files or update a file’s location within the site folder because Dreamweaver can update links in pages and reduce potential file management issues.

     

    Next, you’ll add a style to control attributes of the body tag.

    1. In the CSS style sheet, type:


      body { 
         font-family: "Helvetica Neue", Helvetica, Arial, sans- serif;   
         color: #ffffff; 
         background-color: #1a1a1a; 
      }
      

      This rule sets the background color for the body and sets the default font styles for text content.

    2. Notice that as soon as you type the colon after the font-family property, code hints appear to help you choose a font set from the list (see Figure 9).

       

      Figure 9. CSS code hinting helps you type faster and more accurately
      Figure 9. CSS code hinting lets you type faster and more accurately

    3. Choose the font-family set that begins with Gotham. This site uses Helvetica Neue as the primary font for the body tag, so delete the blue word Gotham and the comma that follows it after choosing the font set in the list.

    4. As you continue typing, notice that as soon as you type the colon after the property color, you can click the color palette icon to display a color picker. Type the hexadecimal value #FFFFFF or click the white area in the top left corner of the spectrum (see Figure 10).

       

      Figure 10. Choose a color, sample a color on the page, or type the color value in your choice of three different color spaces
      Figure 10. Choose a color, sample a color on the page, or enter the color value in your choice of three different color spaces

    5. Click back in Code View to simultaneously close the color picker, save your selection, and add the selected color value to the rule.

      The color picker is another example of how Code View provides help just when you need it, keeping the development environment clear and uncluttered as you write code.

    6. Finish typing the third line of the rule and notice that the color picker appears again to help you set the value for the background-color property.

      Now that you’ve added the first rule to the style sheet, it’s time to link it to the HTML page.

      1. Select the index.html tab to edit the source code in Code View.

      2. Click directly below the title tag in the head section of the page and press Enter/Return once to add an extra line before the closing head tag.

      3. Select the grid_styles.css file in the files panel and drag it to the page. A link to the CSS file is generated automatically (see Figure 11).

         

        Figure 11. Add the link to the CSS style sheet by dragging it from the Files panel
        Figure 11. Add the link to the CSS style sheet by dragging it from the Files panel

      4. Choose File > Save All to save the HTML file and the CSS file.

Authoring CSS styles to control the tile’s appearance

Next you’ll add the CSS styles and update the div tile selectors in the HTML page.

  1. Click the grid_styles.css tab to return to the style sheet and start adding more styles.

  2. Add the following style to control the div grid wrapper that surrounds the div tile containers:

    .grid { 
       width: 1140px; 
       height: 890px; 
       margin-left: auto; 
       margin-right: auto; 
       padding-left: 40px; 
       position: relative; 
       border-radius: 10px; 
       background-color: #3a3a3a; 
    }

    This rule sets the dimensions, margins, padding, and positioning values for the grid. It also sets a different background color than the body style and adds rounded corners to soften the square edges.

  3. Add the style that controls the appearance of the div tile containers below the grid class:

    .tile { 
       background-color: #2a2a2a; 
       position: absolute;   
       width: 270px; 
    }

    The tile class contains the common attributes shared by all div tiles.

  4. Next, you’ll add the eight rules to control the specific attributes that affect each of the div tile containers individually. These rules set the positioning coordinates, the dimensions, and source content for the tiles.

    Either copy and paste the code below into the style sheet, or copy the eight rules from the completed index_final.html file:

    #tile1 { 
       top: 20px; 
       left: 20px; 
       width: 270px; 
       height: 270px; 
    } 
    
    #tile2 { 
       top: 310px; 
       left: 20px; 
       width: 270px; 
       height: 270px; 
       background-image: url(images/tile2.jpg); 
    } 
    
    #tile3 { 
       top: 20px; 
       left: 310px; 
       width: 560px; 
       height: 560px; 
    } 
    
    #tile4 { 
       top: 20px; 
       left: 890px; 
       width: 270px; 
       height: 270px; 
       background-image: url(images/tile4.jpg); 
    } 
    
    #tile5 { 
       top: 310px; 
       left: 890px; 
       width: 270px; 
       height: 270px; 
       background-image: url(images/tile5.jpg); 
    } 
    
    #tile6 { 
       top: 600px; 
       left: 20px; 
       width: 560px; 
       height: 270px; 
       background-image: url(images/tile6.jpg); 
    } 
    
    #tile7 { 
       top: 600px; 
       left: 600px; 
       width: 270px; 
       height: 270px; 
    } 
    
    #tile8 { 
       top: 600px; 
       left: 890px; 
       width: 270px; 
       height: 270px; 
       background-image: url(images/tile8.jpg); 
    } 
  5. Click the index.html tab to switch back to the HTML page.

  6. Update the first div tile tag to add a new ID selector by inserting id="title1" as shown below:

    <div class="tile" id="tile1" >
  7. Use the code-hinting feature in Code View to type the ID selectors for the remaining seven div tiles. ID selectors must be uniquely named and can only exist once per page, so update the IDs for each selector to the next ascending number to match the eight ID names you added to the style sheet (see Figure 12).

     

    Figure 12. Use code hinting to narrow the list of selectors available to style the div After adding the styles for the layout, the page design is almost complete.
    Figure 12. Use code hinting to narrow the list of selectors available to style the div After adding the styles for the layout, the page design is almost complete.

    1. Choose File > Save All to save all of the site files.

    2. Click the Split and Live buttons to enable Live View and review the page.

      Live view uses a new Chromium-based rendering engine, so that your content looks the same in Dreamweaver as it does in your favorite browsers (see Figure 13).

       

      Figure 13. Preview your work as you code using Split view with Live view enabled
      Figure 13. Preview your work as you code using Split view with Live view enabled

    3. Click Code again to return to Code View. You don’t need to disable Live View to continue working because pages are now editable while Live View is enabled.

Personalize your development workspace

The 2014 release of Dreamweaver includes another new feature to help you author projects more efficiently. You can choose custom colors to highlight your code as you work.

  1. In Dreamweaver preferences, choose the Code Coloring category. In the Document Type list, choose HTML or CSS (see Figure 14).

     

    Figure 14. Choose colors or type color values in the fields
    Figure 14. Choose colors or enter color values in the fields

    Notice that you can also set the highlight colors for Live Code background and Live Code changes. As you author new CSS styles, the custom colors you choose make it easy to identify your code changes.

  2. Select the HTML document type. In the Current Tag Highlighting section, notice that while Enable Tag Highlighting is selected, you can click the color chip next to Highlight Color and change the color from the default gray to any color you prefer. For this example, a bright green color is selected (see Figure 15).

     

    Figure 15. Choose a custom color to highlight HTML or CSS tags in Code View
    Figure 15. Choose a custom color to highlight HTML or CSS tags in Code View

  3. Click Apply to save your changes.

  4. In the source code, click the opening div tile1 tag and see how the custom color highlights both the opening and closing tags in bright green (see Figure 16).

     

    Figure 16. Tag highlighting makes it easy to identify the entire container
    Figure 16. Tag highlighting makes it easy to identify the entire container

  5. Click between the opening and closing div tile1 tags and press Return/Enter once to add space for more content. This time, you’ll insert an image. Type <img

     

    When you type a space, code hints appear. Type the letter "s" and press the Down Arrow key twice, and then press Return/Enter to choose the src attribute from the list.

     

    After choosing src, a new code hint appears. Click Browse and select the file named logo.jpg in the images folder. Click Open (see Figure 17).

     

    Figure 17. Browse to select the image file located in the images folder
    Figure 17. Browse to select the image file located in the images folder

    The Select File dialog box closes and the code updates to display the path to the image.

  6. Type another space followed by the letter "w" and then press Enter/Return to choose the width attribute. Type the image’s width between the quotes: 270.

  7. Type another space followed by the letter "h" and then press Enter/Return to choose the height attribute. This time, you can choose 270 from the code hint that appears and press Enter/Return to add 270 between the quotes. Type /> (a forward slash and a greater than sign) to finish the image tag.

     

    The complete image tag looks like this:

    <img src="images/logo.jpg" width="270" height="270"/>
  8. Click the Split button to see the updated design in Live View. The div tile1 displays the inserted image of the PLAY logo.

  9. Click the Code button to return to Code View.

In this project, most of the images are set as background images in the CSS styles that define each div tile in the grid_styles.css file. You can choose to add image content either way, based on the layout and the design direction of the page you are constructing. When div tags have background images defined as styles, you can add other content in the same div, such as semi-transparent images or text, that display above the background image.

Adding and styling text content

Most of the div tiles contain background images or inserted image content, but div tile3 and div tile7 are still empty. You’ll add some placeholder text to these files and style the appearance using CSS to apply a font from Edge Web Fonts.

  1. In the HTML page, click between the opening and closing tags for div tile3. Type the tag. As you type </, code completion finishes the closing h1 tag.

  2. Click between the two h1 tags you just added. Type: Add your hero text here along with whatever else you want to call attention to.

  3. Click before the words "hero text" and type a

    <span>

    tag. Add a closing  

    </span>

    tag after the word "text".

  4. Repeat Step 3 to add a span tag around the words "attention to" with the closing span tag before the period. The final div tile3 will look like this

    <div class="tile" id="tile3">1
    <h1>Add your <span>hero text</span> here along with whatever else you want to call <span> attention to</span>.</h1>1
    </div>
  5. Choose Modify > Manage Fonts. Type the number 1 in the search field of the Manage Fonts dialog box that appears. This filters the list to show only fonts with the number 1 in their name.

  6. Select the font named M+ 1c. When you select it, a blue checkmark appears on the font’s name, indicating it will be added. Click Done (see Figure 18).

     

    Figure 18. Choose the name of the web font you want to add
    Figure 18. Choose the name of the Edge Web Font you want to add

    The new web font is added to the site’s font list, making it available to select within Dreamweaver.

    Next, you’ll add one of the styles to control the appearance of the text.

  7. Click the grid_styles.css tab to display the CSS style sheet in Code View.

    The ability to jump back and forth between the source code and linked style sheets is especially handy when working on projects with many related files

  8. Below the existing styles, type a new class named .hero and add the curly braces, like this:

    .hero {
    
    }
    
  9. In the next line, between the curly braces, type the following property:

     

    font-family:

  10. When you type the colon after font-family, a code hint appears. Type the first letter of the font name you want to add (in this case, m) to jump to the matching font name in the list (see Figure 19).

     

    Figure 19. Set the font family value to the name m-1c, the web font you just added
    Figure 19. Set the font family value to the name m-1c, the web font you just added

  11. Press Enter/Return to select the font from the list. Then, type the closing semicolon.

  12. Press Enter/Return to create another line and then type the remaining properties and values to complete the hero style:

     

    font-size: 3.25em; 
    font-weight: 300; 
    font-style: normal; 
    margin-top: 110px; 
    margin-left: 40px; 
    margin-right: 40px; 
    color: gray;
  13. Verify that the entire hero class looks like this:

    hero { 
       font-family: "m-1c"; 
       font-size: 3.25em; 
       font-weight: 300; 
       font-style: normal; 
       margin-top: 110px; 
       margin-left: 40px; 
       margin-right: 40px; 
       color: gray; 
    } 
  14. Click the index.html tab to display the HTML source code in Code View.

    Notice that after adding the web font to a style, the script with the link to download the font Edge Web Fonts is automatically added to the code right before the closing head tag. The new code looks like this:

    <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> 
    <script>var
       adobewebfontsappname ="dreamweaver"</script> <script src="http://use.edgefonts.net/m-1c:n3:default.js" type="text/javascript"></script> 
    </head>

    Note: If the script tag is not inserted into the code in the head section, choose Commands > Clean Up Web Fonts Script Tag (Current Page) to add it.

  15. Scroll down to div tile3. Update the h1 tag to add a class in the opening tag.

    After you type the quote after the equal sign, a code hint appears to display the name of the available classes. Press the Down Arrow key to select the hero class and then press Enter/Return (see Figure 20).

     

     Figure 20. Select the hero class from the code hint list that appears
    Figure 20. Select the hero class from the code hint list that appears

  16. Click the grid_styles.css tab to display the CSS file in Code View. Either copy the styles below or copy them from the dw_example.css file:

    .hero-bright { 
       color: white; 
    }  
    
    .action-title {	/*Use default... Helvetica, Arial, sans-serif*/ 
       font-size:1.5em; 
       margin-top:28px; 
       margin-left:20px; 
       margin-right:20px; 
    }  
    
    .action { 
       font-family: "m-1c"; 
       font-size: 1.25em; 
       font-weight: 400; 
       color: lightgray; 
       margin-left: 20px; 
       margin-right: 20px; 
    } 
  17. Click the index.html tab to return to the HTML source code and continue editing it.

  18. In div tile3, update both of the span tags to add class attributes.

    As you type the quote after the class=", the code hint appears. This time, the list includes the hero-bright class. Choose the hero-bright class to change the style of the words "hero text" and "attention to" inside the h1 tag. Select Design View with Live View enabled to preview your work to this point (see Figure 21).

     

     Figure 21. Check your design using Design view with Live View enabled
    Figure 21. Check your design using Design view with Live view enabled

Using Element Quick View with Code View

You can easily identify the DOM page elements and select them in a tree hierarchy structure using the new Element Quick View feature available in the 2014 release of Dreamweaver. As you select each page element with Element Quick View, the focus is updated in Code View and in all other parts of the workspace, making it easy to jump to a section of the code.

  1. Click Split to see both Code View and Live View (enable Live view if it is currently disabled).

  2. Click the </> button at the bottom of the Document window, to the left of the Tag Selector. The Element Quick View panel appears.

  3. Explore the page elements by clicking on the name of elements in the list to expand them. Notice that as you click any element in the Element Quick View panel, the selection is synced with Code View, Live View, the tag selector, and all other parts of the interface.

  4. Expand the grid div to see the list of eight numbered div tiles. Click div tile7 to select it. The selection for div tile7 is highlighted in Code view (see Figure 20). This selection syncing works both ways — you can also click an element in Live View to select it throughout the workspace (see Figure 22).

     

    Figure 22. Use the Element Quick View feature to navigate the page structure and select elements quickly
    Figure 22. Use the Element Quick View to navigate the page structure and select elements quickly

  5. In Code view, click between the highlighted div tile7 opening and closing tags. Type the following code to add some text content:

    <h2 class="action-title">Call to Action!</h2> 
    <p class="action">Add action statement, and click through to deeper levels of content.</p>

    As you type the classes, code hints make it easy to select the names of the styles and then quickly disappear to let you keep typing. Also notice how the code completion feature speeds the web production process because as you type the first few characters, it anticipates the tag you are typing and displays the full tag name. Press Return/Enter&nbsp; to accept the tag suggestion.

  6. Choose File > Preview in Browser to view the finished page.

Where to go from here

Explore the new timesaving features in Code view to experience how quickly you can write code and update web projects. With the ability to edit source code and CSS styles and see your changes reflected in Live view, you can check your work frequently without leaving the workspace. And the new Element Quick View feature lets you select page elements quickly and see a top-level view of the page structure.

In Dreamweaver CC, the performance in Code view is improved, making it much more responsive. Even lengthy HTML pages react quickly to typing and editing. Code hinting includes full support for modern web languages, like PHP 5.4. Author projects confidently, knowing that any syntax errors will be flagged as you work.

Check out these Dreamweaver CC articles to learn more about crafting web content visually using Live View and Element Quick View.

Be sure to visit the Dreamweaver new features summary to help you learn about the new features in the 2014 release of Dreamweaver so you can begin using them right away.

Let us know what you think

That's it! You're done. Please provide feedback in our survey so that we can make sure this tutorial is as useful as possible.

 

Tommi West

Tommi is a freelance web designer and creative director at tommiland.com. Prior to starting her own business in 2004, she worked at Macromedia for six years as a technical writer, editor, and web producer. Tommi is an Adobe Community Professional.


dan-carr_83x83

Dan Carr

Dan is an enthusiastic leader in interactive design, software development, technical writing, and training. With over 15 years’ experience collaborating with Adobe and other industry leaders, Dan has produced features and training materials for Flash, Flex, Dreamweaver, and more. Dan’s most recent work specializes in rich-media development in HTML5 and JavaScript, explorations in iOS, and continued innovation in Flash video and gaming. In his free time, Dan pursues his love of the outdoors, family, and music.

 


Purchase by phone: 800-585-0774