This chapter is from the book
This chapter is from the book
This chapter is from the book
Previewing assets in Code view
Although you may be a diehard coder or developer, there’s no reason you can’t feel the love from Dreamweaver’s graphical display too. The program provides visual previews of graphic assets and certain CSS properties in Code view.
Open myfirstpage.html. Select Code view.
In Code view, you see only the HTML. The graphical assets are simply references that appear in the CSS file favorite-styles.css.
Click favorite-styles.css in the Related Files interface.
The style sheet appears in the window. Although it’s fully editable, don’t waste your time making any changes to it. Since the file is the output of the SCSS source file, any changes you make will be overwritten the next time the file compiles.
Locate the header rule (around line 5).
The header consists of two text elements and two images. You should be able to see the image references in the background property.
Position the cursor over the markup url(../images/favcity-logo.jpg) in the background property (line 8).
A miniature preview of the company logo appears below the cursor.
Position the cursor over the markup background-color: #ED6; in the background property.
A small color chip appears, displaying the color specified. The preview functions the same way for all color models. You no longer have to guess what image or color you specified before you can see it in Live view or the browser.
)
)
In this lesson, you learned a number of techniques to make working with code easier and more efficient. You learned how to write code manually using hinting and auto-code completion and how to write code automatically using Emmet shorthand. You learned how to check code construction using built-in linting support. You learned how to select, collapse, and expand code, as well as how to create HTML comments and view code in different ways.
Overall, you learned that whether you are a visual designer or a hands-on coder, you can rely on Dreamweaver to offer vital features and power that will allow you to create and edit HTML and CSS code without compromises. Remember these techniques as you work through the book and use any of them whenever appropriate.