The DOM hierarchy displays as an interactive list in the new Element Quick View, so you can make high-level changes to the page structure. The new Element Display streamlines the process of selecting, adding, and deleting classes and IDs, giving you more creative control.
In this article, you’ll take a tour of the new Live View features as you edit an existing sample project.
Special thanks to Dan Carr for developing the sample project provided with this article. For instructions on how to create the page, see How to code HTML5 and CSS faster. 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 Live View to complete a web page design (see Video 1) and then follow the steps in this article to try the features on your own.
Video 1. Use new Live View features to edit while you preview.
The sample project includes a single page that displays a grid of div containers filled with image and text content, designed to promote a fictitious local music center named Play (see Figure 1).
Figure 1. Review the sample project displayed in the Chrome browser
Begin by uncompressing the ZIP file and saving it to your desktop. The sample files folder contains the HTML page and related site files.
1. Launch Dreamweaver CC.
2. Choose File Open and browse to select the dw_example.html file.
3. Enable the Design View and Live View options at the top of the Document window (see Figure 2).
Figure 2. Enable both Design View and Live View
Right away you’ll notice that Live View has changed. In older versions of Dreamweaver, Live View only let you preview your designs, not edit them. In Dreamweaver CC, Live View is an interactive design surface that renders your pages accurately and updates in real time to show your changes as you make them.
Click around the page in Live View to select various page elements. As you click, an Element Live Display appears above each element. These "heads-up" dialog boxes show you the classes and IDs applied to the selection.
- Click the headphones image in the top right corner. The Element Live Display shows that the div tag has a class named .tile and an ID named #tile4 applied (see Figure 3).
Figure 3. The selected element is ready to be edited
Take a moment to look around the workspace and see that the #tile4 selector is highlighted in CSS Designer and the Tag Selector. When you select any part of the page in Live View, Dreamweaver updates to match your selection. This connection between Live View and CSS Designer lets you quickly identify selector names and make changes without hunting for the styles.
- Click the tile that contains a keyboard (below the headphones). Notice that all of the tiles have the .tile class applied. Hover over the ID #tile5 to see the Remove Class/ID button appear (see Figure 4).
Figure 4. Hover over a selector to see the Remove Class/ID button with an X icon
- Click the Remove Class/ID bu on to delete the ID named #tile5 from the HTML page. The ID is removed and the keyboard image disappears from the layout.
- Click the headphones again to bring the ID #tile4 into focus. Right-click and choose Inspect from the context menu to see a tooltip that displays the div tag’s dimensions: 270px by 270px. Exit Inspect mode by clicking the headphones again.
- In the Properties panel of CSS Designer, select Show Set to see the rules currently applied to this selector. In the Layout section, update the Height value to 560px to make the tile twice as tall, with an extra 20 pixels for padding (see Figure 5).
Figure 5. The #tile4 expands to its new height and the background image is tiled
- In the Background section of the Properties panel, click the URL once to select it and then click the folder icon to the right. Browse to select the tile4-new.jpg file in the images folder of the sample files (see Figure 6).
Figure 6. Update the background image URL to point to a new image file
Editing pages in Live View makes it easy to isolate specific selectors and update properties of a selected element on the fly, even when you’re working on projects created by someone else.
You can modify attributes of inserted images in Live View without using the Property inspector or editing the code. Make changes quickly to edit the image’s source, add titles and Alt text, add links, and improve SEO.
1. Click the logo tile in the top left corner.
2. The Attribute Live Display shows that an image file is selected. Click the sandwich icon to see the Quick PI (see Figure 7).
Figure 7. Access image attributes with a single click
- Click the folder icon next to the SRC attribute and browse to select the file named logo-new.jpg in the images subfolder of the sample files. Alternatively, type the source path directly.
- Type PLAY Logo for the Title and Alt attributes, and then type # for the Link attribute to serve as a placeholder link. To set a link, you can type a URL or click the folder icon and browse to select another page in the site. Use the Target option to specify where to open the linked document (see Figure 8).
Figure 8. Update the attributes of the selected image element
5. Click anywhere else on the page to close the Quick PI and view the updated logo image.
Notice that you can also reset the image’s width and height values. This feature, combined with Inspect Mode, makes it easier to see image dimensions as you refine your designs.
In previous versions of Dreamweaver, editing text and checking the layout required switching between Design View and Live View. You would change text in Design View and use Live View to see how the text displayed in a browser. Now you can edit text directly in the page while seeing it rendered with CSS styles and fonts from Edge Web Fonts.
- Click the bold words "hero text" in the center tile. The element is a span tag with the .hero-bright class applied (see Figure 9).
Figure 9. Select the text to see the element type and selector
- Double-click the text to select it.
The orange border around the text block indicates that it is editable.
- Replace the words "hero text" with: "tagline". In the heads-up display that appears above the text, click the Link icon to type in a link or click the folder to browse to select a page in the site (see Figure 10).
Figure 10. Apply bold and italic formatting to text or create a link
Note: Double-click a word to select it or triple-click to select the entire paragraph. Press Enter/Return to create a new paragraph and press Shift-Enter/Return to add a <br> tag.
- Click outside of the orange border, or use Ctrl (or Cmd) + Enter, to commit the changes and unselect the text.
- Select the linked text again to see the Element Live Display. The selected element is now a link, represented by the A tag. Click the plus (+) sign to the right of the A element name and start typing the first few letters of the style. As you type, a list appears displaying the matching selector names for the current site (see Figure 11).
Figure 11. Code completion lets you filter the list of existing selectors
- Press the Down Arrow key twice to choose the .hero-bright selector and then press Enter/Return.
- In CSS Designer, deselect Show Set to display the full list of available options in the Properties panel. In the Text section (T icon in properties panel), locate the text-decoration property and click the None icon to remove the underline on the linked text (see Figure 12).
Figure 12. Update the existing .hero-bright style to remove the link style underline
Editing text, formatting text blocks, and applying styles has never been easier. Live View renders the page as you make changes, so you don’t need to repeatedly preview pages in a browser to check how text content wraps and displays.
Element Quick View lets you navigate your page layouts using an interactive hierarchal tree. See the outline of the DOM structure in a list view, and then click, drag, and right-click items to select, rearrange, delete, copy, paste and duplicate HTML elements.
Be sure to check out Dan Carr’s video, along with the accompanying downloadable project files(ZIP, 700 KB), in which he demonstrates using Element Quick View (see Video 2) and then follow the steps in this article to try the features on your own.
Video 2. Use Element Quick View to view your page’s HTML hierarchy and structure the elements on your page.
To use Element Quick View to structure the elements on your page:
- Click the </> icon, or Ctrl (or Cmd)+/, in the bottom left corner of the Document window to open Element Quick View (see Figure 13).
Figure 13. Element Quick View displays the selected item within a list of page elements
Notice that the linked text with the .hero-bright class is selected in the hierarchy list. As you look around the workspace, you will see that the same element is displayed in the Element Live Display in Live View, in the Tag Selector, and in CSS Designer. If you switch temporarily to Split View, you’ll see the corresponding element is also selected in Code View.
However you prefer to work, and whichever way you select an element, all other parts of the interface update to display your selection.
The interactive list makes it easy to select elements while also providing a top-level view of your page. In Figure 13, the expanded h1 element contains three sub-elements.
- Select the span element with the .hero-bright class below the highlighted A element and see the focus update throughout Dreamweaver and Live View.
- Click the h1 element to collapse the section in the hierarchy and hide its contents.
- Expand the #tile7 div element, and then select the nested h2 .action-title item. Right-click and choose Duplicate from the context menu (see Figure 14).
Figure 14. Duplicate a selected element to make a copy of it
The duplicated element is displayed directly below the original item. The new h2 content is now in focus, ready to be double-clicked and edited (see Figure 15).
Figure 15. Duplicate a DOM element and edit content, and then add or remove styles to update pages
You can also copy an item in the list and then select a different page element and paste it inside.
- Update the duplicated text in Live View to: "Sign up now!".
- In the Element Quick View, click the div #tile7 again to collapse the section of the page structure.
You can also drag items within the Element Quick View to move them into a different part of the page structure.
- Expand the div #tile 1, and then click the A element inside it to drill down. Then select the logo image in the top left corner of the grid (see Figure 16).
Figure 16. Select a sub-element in the DOM structure
- Click-drag the image element and hover over div #tile8 before releasing the mouse button. The PLAY logo image moves from the top left corner to the bottom right corner of the page, obscuring its existing background image (see Figure 17).
Figure 17. Move sub-elements to a different section of the page
As you move elements within Element Quick View, a bright green line indicates where the element will be placed when you release the mouse (before/after) or hover over an element to nest it inside. Release the mouse while hovering over the area you want to position the element.
Live View is now integrated with the Insert panel. Drag-and-drop or click an HTML5 element in the Insert panel to insert it in relation to other elements on the page.
- Open the Insert panel and select Structure from the top menu.
- Click-drag a div element from the Insert panel onto the page. As you drag, Live View highlights the target areas on the page to show where the div will be inserted when you release the mouse. In this example, insert the new div in the empty #tile1 div container.
When you release the mouse, you are given the option to insert the element before, after, wrapped around, or nested inside the selected element.
- Select the option to nest the div inside the #tile1 div (see Figure 18).
Figure 18. Add a new div element to the page by dragging it from the Insert menu
You can also select an element in Live View to target the location first, and then click the name of the item that you want to insert in the Insert panel.
In Live View, you can create new selectors in Live View and then style page elements in CSS Designer. First you add the class or ID to the HTML page. Then you add the selector to the desired source style sheet, set the specificity for the new selector, and define the rules to add properties and their values.
- While the new div you just inserted is selected, click the plus (+) icon in the Element Live Display to create a new style in the HTML code. Type the div’s ID: #motto (see Figure 19).
Figure 19. Assign a new ID to the inserted div container
- Double-click the text content to make it editable, and then triple-click the text again to select all the words. To replace the text, type LOVE TO LISTEN.
- In CSS Designer, choose the desired Source and @media options, and then click the plus (+) icon to add a new selector to the linked CSS file.
Before the addition of the selector is committed, you can control the selector’s specificity by pressing the Up Arrow and Down Arrow keys. Pressing the Up Arrow key makes the selector less specific, and pressing the Down Arrow key adds the parent elements to make it more specific.
- Press the Up Arrow key twice until the selector is simply listed as "#motto".
- Click the plus (+) sign in the Properties panel in CSS Designer to add new properties. Select the Background tab to jump to the Background section.
- Select the color chip next to background-color and type #FB5C31. You can also use the Eyedropper tool to sample the orange background color in the lower left tile.
- Click the Text tab to jump to the Text section. Type the following property values:
- Review the finished page in Live View (see Figure 20).
color: #FFF
font-family: m-1c (the name of the Edge Web Font used on this page)
font-weight: 700
font-size: 4.5em
text-align: centered
font-family: m-1c (the name of the Edge Web Font used on this page)
font-weight: 700
font-size: 4.5em
text-align: centered
Figure 20. Review the completed sample project rendered in Dreamweaver
Compare the Live View with the page rendered in Chrome to see how accurately the layouts match (see Figure 21).
Figure 21. Preview the page in a browser to see the finished layout
When you return to Dreamweaver, switch to Code View. You’ll see that Dreamweaver generates clean HTML code and CSS styles that follow the latest web standards.
Explore the new Live View workflow to see how the new tools speed your production process. Try restructuring page elements in the Element Quick View, adding new selectors with Element Live Displays, and defining new properties in CSS Designer.
To learn how this sample project was developed, read How to code HTML5 and CSS faster.
And to discover new ways to work with CSS Designer and Live View, see How to style a web page with Dreamweaver CSS Designer.
Also visit the Dreamweaver Learn Page to find articles, video tutorials, and sample projects to help you get up to speed quickly with the new features in Dreamweaver CC.
0 comments:
Post a Comment