12 Working with Code
Lesson overview
In this lesson, you’ll learn how to work with code and do the following:
Write code using code hinting and Emmet shorthand
Set up a CSS preprocessor and create SCSS styling
Use multiple cursors to select and edit code
Collapse and expand code entries
Use Live Code to test and troubleshoot dynamic code
Use Inspect mode to identify HTML elements and associated styling
Access and edit attached files using the Related Files interface
This lesson will take about 90 minutes to complete. If you have not already done so, please log in to your account on peachpit.com to download the project files for this lesson as described in the “Getting Started” section at the beginning of this book and follow the instructions under “Accessing the Lesson Files and Web Edition.” Define a site based on the lesson12 folder.
Your Account page is also where you’ll find any updates to the lessons or to the lesson files. Look on the Lesson & Update Files tab to access the most current content.
Dreamweaver’s claim to fame is as a visually based HTML editor, but its code-editing features don’t take a back seat to its graphical interface, and they offer few compromises to professional coders and developers.
Creating HTML code
As one of the leading WYSIWYG HTML editors, Dreamweaver allows users to create elaborate webpages and applications without touching or even seeing the code that does all the work behind the scenes. But for many designers, working with the code is not only a desire but also a necessity.
Note
If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. See “Getting Started” at the beginning of the book.
Although Dreamweaver has always made it as easy to work with a page in Code view as it is in Design view or Live view, some developers believe that the code-editing tools took a back seat to the visual design interface. Although in the past this was partially true, Dreamweaver CC (2019 release) is fully invested in the vastly improved tools and workflows for coders and developers that were brought to the program in the previous version. In fact, Dreamweaver CC can now unify your entire web development team as never before by providing a single platform that can handle almost any task.
You’ll often find that a specific task is actually easier to accomplish in Code view than in Live view or Design view alone. In the following exercises, you’ll learn more about how Dreamweaver makes working with the code an effortless and surprisingly enjoyable task.
Note
Some tools and options are available only when Code view is active.
Writing code manually
If you completed the previous 11 lessons, you have had numerous opportunities to view and edit code by hand. But for anyone jumping directly to this lesson, this exercise will provide a quick overview of the topic. The first step to experiencing Dreamweaver’s code-writing and editing tools is to create a new file.
Define a site based on the lesson12 folder downloaded from your account page, as described in the “Getting Started” section at the beginning of the book.
Select Developer from the Workspace menu.
All the code-editing tools work identically in either workspace, but the Developer workspace focuses on the Code view window and provides a better experience for the following exercises.
Choose File > New.
The New Document dialog appears.
Choose New Document > HTML > None.
Click Create.
Dreamweaver creates the basic structure of a webpage automatically. The cursor will probably appear at the beginning of the code.
As you can see, Dreamweaver provides color-coded tags and markup to make it easier to read, but that’s not all. It also offers code hinting for ten different web development languages, including but not limited to HTML, CSS, JavaScript, and PHP.
NoteIn all screen shots, we use the Solarized Light color theme, which can be selected in Preferences. See the “Getting Started” section at the beginning of the book for more details.
Choose File > Save.
Name the file myfirstpage.html and save it in the lesson12 folder.
Insert the cursor after the
<body>tag.Press Enter/Return to create a new line. Type
<
A code-hinting window appears, showing you a list of HTML-compatible codes you can select from.
Type
dThe code-hinting window filters to code elements that start with the letter d. You can continue to type the tag name directly or use this list to select the desired element. By using the list, you can eliminate simple typing errors.
Press the Down Arrow.
The
ddtag in the code-hinting window is highlighted.Continue pressing the Down Arrow until the tag
divis highlighted.Press Enter/Return.
The tag name
divis inserted in the code. The cursor remains at the end of the tag name, waiting for your next input. For example, you could complete the tag name or enter various HTML attributes. Let’s add anidattribute to thedivelement.Press the spacebar to insert a space.
The hinting menu opens again, displaying a different list; this time the list contains various appropriate HTML attributes.
Type
idand press Enter/Return.
Dreamweaver creates the
idattribute complete with equal sign and quotation marks. Note that the cursor appears within the quotation marks, ready for your entry.Type
wrapperand press the Right Arrow key once.The cursor moves outside the closing quotation mark.
NoteDepending on the settings in your program, tags may close automatically, which means you can skip step 15. This behavior can be turned off or adjusted in the Code Hints section of Preferences.
Type
></
When you type the backslash (/), Dreamweaver closes the
divelement automatically. As you see, the program can provide a lot of help as you write code manually. But it can help you write code automatically too.Choose File > Save.
Writing code automatically
Emmet is a web-developer toolkit that was added to a previous version of Dreamweaver and enables you to supercharge your code-writing tasks. When you enter shorthand characters and operators, Emmet enables you to create whole blocks of code with just a few keystrokes. To experience the power of Emmet, try this exercise.
If necessary, open myfirstpage.html.
In Code view, insert the cursor within the
divelement and press Enter/Return to create a new line.Emmet is enabled by default and works whenever you are typing in Code view. In the original site mockup, the navigation menu appears at the top of the page. HTML5 uses the
<nav>element as the foundation of site navigation.Type
navand press Tab.
Dreamweaver creates the opening and closing tags all at once. The cursor appears inside the
navelement, ready for you to add another element, some content, or both.HTML navigation menus are usually based on an unordered list, which consists of a
<ul>element with one or more child<li>elements. Emmet allows you to create more than one element at the same time, and by using one or more operators, you can specify whether the subsequent elements follow the first (+) or are nested one within the other (>).Type
ul>liand press Tab.
A
<ul>element containing one list item appears. The greater-than symbol (>) is used to create the parent—child structure you see here. By adding another operator, you can create several list items.Choose Edit > Undo.
The code reverts to the
ul>lishorthand. It’s easy to adapt this shorthand markup to create a menu with five items.Edit the existing shorthand phrase as highlighted:
ul>li*5—and press Tab.
A new unordered list appears, this time with five
<li>elements. The asterisk (*) is the mathematical symbol for multiplication, so this latest change says “<li>times 5.”To create a proper menu, you also need to add a hyperlink to each menu item.
Press Ctrl+Z/Cmd+Z or choose Edit > Undo.
The code reverts to the
ul>li*5shorthand.Edit the existing shorthand phrase as highlighted:
ul>li*5>aIf you guessed that adding the markup
>awould create a hyperlink child element for each link item, you are correct. Emmet can also create placeholder content. Let’s use it to insert some text in each link item.Edit the shorthand phrase as highlighted:
ul>li*5>a{Link}Adding text within braces passes it to the final structure of the hyperlink, but we’re not done yet. You can also increment the items, such as Link 1, Link 2, Link 3, and so on, by adding a variable character (
$).Edit the shorthand phrase as highlighted—
ul>li*5>a{Link $}—and press Tab.
NoteThe cursor must be outside the brace before pressing Tab.
The new menu appears fully structured, with five link items and hyperlink placeholders incremented 1 through 5. The menu is nearly complete. The only thing missing are targets for the
hrefattributes. You could add them now using another Emmet phrase, but let’s save this change for the next exercise.Insert the cursor after the closing
</nav>tag. Press Enter/Return to create a new line.Let’s see how easy it is to use Emmet to add a
headerelement to your new page.
NoteAdding the new line makes the code easier to read and edit, but it has no effect on how it operates.
Type
headerand press Tab.As with the
<nav>element you created earlier, the opening and closingheadertags appear, with the cursor positioned to insert the content. If you model thisheaderon the one in the site completed in Lesson 5, “Creating a Page Layout,” you need to add two text components: an<h2>for the company name and a<p>element for the motto. Emmet provides a method for adding not only the tags but also the content.Type
h2{greenstart}+p{Green Awareness in Action}and press Tab.
The two elements appear complete and contain the company name and motto. Note how you added the text to each item using braces. The plus (
+) sign designates that the<p>element should be added as a peer to the heading.Insert the cursor after the closing
</header>tag.Press Enter/Return to insert a new line.
Emmet enables you to quickly build complex multifaceted parent—child structures like the navigation menu and the header, but it doesn’t stop there. As you string together several elements with placeholder text, you can even add
idandclassattributes. To insert an id, start the name with the hash symbol (#); to add a class, start the name with a dot (.). It’s time to push your skills to the next level.
NoteThe entire phrase may wrap to more than one line in Code view, but make sure there are no spaces within the markup.
Type
main#content>aside.sidebar1>p(lorem)^article> p(lorem100)^aside.sidebar2>p(lorem)and press Tab.
A
<main>element is created with three child elements (aside,article,aside), along withidandclassattributes. The caret (^) symbol in the shorthand is used to ensure that thearticleandaside.sidebar2elements are created as siblings ofaside.sidebar1. Within each child element, you should see a paragraph of placeholder text.Emmet includes a Lorem generator to create blocks of placeholder text automatically. When you add
loremin parentheses after an element name, such asp(lorem), Emmet will generate 30 words of placeholder content. To specify a larger or smaller amount of text, just add a number at the end, such asp(lorem100)for 100 words.Let’s finish up the page with a
footerelement containing a copyright statement.Insert the cursor after the closing
</main>tag.Create a new line.
Type
footer{Copyright 2019 Meridien GreenStart Association. All rights reserved.}and press Tab.
Save the file.
Using a few shorthand phrases, you have built a complete webpage structure and some placeholder content. You can see how Emmet can supercharge your code-writing tasks. Feel free to use this amazing toolkit at any time to add a single element or a complex, multifaceted component. It’s there any time you need it.
This exercise has barely scratched the surface of what Emmet can do. It is simply too powerful to fully describe in just a few pages. But you got a good peek at its capabilities.
Check out http://emmet.io to learn more about Emmet. Check out http://docs.emmet.io/cheat-sheet/ for a handy Emmet shorthand cheat sheet.
Working with multicursor support
Have you ever wanted to edit more than one line of code at a time? Another addition to Dreamweaver CC (2019 release) is multicursor support. This feature allows you to select and edit multiple lines of code at once to speed up a variety of mundane tasks. Let’s take a look at how it works.
If necessary, open myfirstpage.html as it appears at the end of the previous exercise.
The file contains a complete webpage with
header,nav,main, andfooterelements. The content features classes and several paragraphs of placeholder text. The<nav>element includes five placeholders for a navigation menu, but thehrefattributes are empty. For the menu and links to appear and behave properly, you need to add a filename, URL, or placeholder element to each link. In previous lessons, the hash mark (#) was used as placeholder content until the final link destinations could be added.Insert the cursor between the quotation marks in the
href=""attribute in Link 1.Normally, you would have to add a hash mark (
#) to each attribute individually. Multicursor support makes this task much easier, but don’t be surprised if it takes you a little practice. Note that all the link attributes are aligned vertically on consecutive lines.Hold the Alt key (Windows) or Option key (macOS) and drag the mouse down through all five links.
Using the Alt/Option key enables you to select code or insert cursors in consecutive lines. Be careful to drag down in a straight line. If you slip a little to the left or right, you may select some of the surrounding markup. If that happens, you can just start over. When you are finished, you should see a cursor flashing in the
hrefattribute for each link.Type
#
The hash mark (
#) appears in all five attributes at the same time.The Ctrl/Cmd key enables you to select code or insert cursors in nonconsecutive lines of code.
Hold the Ctrl/Cmd key and click to insert the cursor between the
pand the>bracket in each of the three opening<p>tags in the<main>element.Press the spacebar to insert a space, and type
class="first"
The class appears simultaneously in all three
<p>tags.Save the file.
Multicursor support can save tons of time in repetitive code-editing tasks.
Customizing the Common toolbar
Some of the code-editing exercises in this lesson require tools that may not appear in the interface by default. The Common toolbar was previously called the Coding toolbar and appeared only in Code view. The new toolbar appears in all views, but some tools may be visible only when the cursor is inserted directly in the Code view window.
If the exercise calls for a tool that is not visible, even with the cursor in the proper position, you may need to customize the toolbar yourself. This can be done by first clicking the Customize Toolbar icon 
and then enabling the tools within the Customize Toolbar dialog. At the same time, feel free to disable tools you don’t use.
Commenting your code
Comments allow you to leave notes within the code—invisible in the browser—to describe the purpose of certain markup or provide important information to other coders. Although you can add comments manually at any time, Dreamweaver has a built-in feature that can speed up the process.
Open myfirstpage.html and switch to Code view, if necessary.
Insert the cursor after the opening tag
<aside class="sidebar1">.Click the Apply Comment icon
.
A pop-up menu appears with several comment options. Dreamweaver supports comment markup for various web-compatible languages, including HTML, CSS, JavaScript, and PHP.
Choose Apply HTML Comment.
An HTML comment block appears, with the text cursor positioned in the center.
Type
Insert environmental quotations into Sidebar 1
The comment appears in gray between the
<!--and-->markup. The tool can also apply comment markup to existing text.Insert the cursor after the opening tag
<aside class="sidebar2">.
Type
Sidebar 2 should be used for content related to the Article sectionSelect the text created in step 7.
Click the Apply Comment icon
.A pop-up menu opens.
Select Apply HTML Comment.
Dreamweaver applies the
<!--and-->markup to the selection. If you need to remove existing comment markup from a selection, click the Remove Comment icon
in the toolbar.Save all files.
You’ve created a complete basic webpage. The next step is to style the page. Dreamweaver CC (2019 release) now supports CSS preprocessors for LESS, Sass, and SCSS. In the next exercise, you’ll learn how to set up and create CSS styling using a preprocessor.
Working with CSS preprocessors
One of the biggest changes to the latest version of Dreamweaver was adding built-in support for LESS, Sass, and SCSS. These industry-standard CSS preprocessors are scripting languages that enable you to extend the capabilities of cascading style sheets with a variety of productivity enhancements and then compile the results in a standard CSS file. These languages provide a variety of benefits for designers and developers who prefer to write their code by hand, including speed, ease of use, reusable snippets, variables, logic, calculations, and much more. No other software is needed to work in these preprocessors, but Dreamweaver also supports other frameworks, such as Compass and Bourbon.
In this exercise, you’ll get a taste of how easy it is use a preprocessor with Dreamweaver as well as what advantages they offer compared to a regular CSS workflow.
Enabling a preprocessor
Support for CSS preprocessors is site-specific and must be enabled for each site defined in Dreamweaver, as desired. To enable LESS, Sass, or SCSS, you first define a site and then enable the CSS Preprocessors option within the Site Definition dialog.
Select Site > Manage Sites.
The Manage Sites dialog appears.
Select lesson12 in the Your Sites window.
Click the Edit icon
at the bottom of the Your Sites window.
The Site Definition for lesson12 appears.
Select the CSS Preprocessors option in the Site Definition dialog.
The CSS Preprocessors option contains six subcategories, including General, Source & Output, and options for various Compass and Bourbon frameworks. You can check out the Dreamweaver Help topics for more information on these frameworks. For this exercise, you need only the features that are built into the program itself.
Select the General category.
When selected, this category features the on/off switch for the LESS, Sass, or SCSS compiler, as well as various options for how the languages operate. For our purposes, the default settings will work fine.
Select the Enable Auto Compilation On File Save checkbox to enable the preprocessor compiler, if necessary.
When this is enabled, Dreamweaver will automatically compile your CSS from your LESS, Sass, or SCSS source files whenever they are saved. Some designers and developers use the root folder of the site for compilation. In this case, we’ll separate the source and output files in distinct folders.
LESS or Sass—the choice is yours
LESS and Sass offer similar features and functions, so which one should you choose? That’s hard to say. Some think that LESS is easier to learn but that Sass offers more powerful functionality. Both make the chore of writing CSS faster and easier and, more importantly, provide significant advantages for maintaining and extending your CSS over time. There are lots of opinions on which preprocessor is better, but you’ll find that it comes down to personal preference.
Before you decide, check out the following links to get some informed perspectives:
Dreamweaver provides two syntaxes for Sass. In this lesson, we use SCSS (Sassy CSS), which is a form of Sass that is written and looks more like regular CSS.
Select the Source & Output category.
This category enables you to designate the source and output folders for your CSS preprocessor. The default option targets the folder where the source file is saved.
Select the Define Output Folder option.
Click the Browse for Folder icon
.A file browser dialog appears.
Navigate to the Site Root folder, if necessary.
Create a new folder.
Name the new folder css.
Click Create.
Select the css folder and click Select Folder/Choose.
Click the Browse for Folder icon
beside the Source Folder field.Navigate to the Site Root folder.
Select the existing Sass folder, and click Select Folder/Choose.
Save the changes and click Done to return to your site.
The CSS preprocessor is enabled, and the source and output folders are now designated. Next, you’ll create the CSS source file.
Creating the CSS source file
When using a preprocessor workflow, you do not write the CSS code directly. Instead, you write rules and other code in a source file that is then compiled to the output file. For the following exercise, you’ll create a Sass source file and learn some of the functions of that language.
Select Standard from the Workspace menu.
Choose Window > Files to display the Files panel, if necessary. Select lesson12 from the Site List drop-down menu, if necessary.
If necessary, open myfirstpage.html and switch to Split view.
The webpage is unstyled at the moment.
Choose File > New.
The New Document dialog appears. This dialog allows you to create all types of web-compatible documents. In the Document Type section of the dialog, you will see the LESS, Sass, and SCSS file types.
Choose New Document > SCSS.
Click the Create button.
A new blank SCSS document appears in the document window. SCSS is a flavor of Sass that uses a syntax similar to regular CSS that many users find easier to learn and work with.
Save the file as green-styles.scss in the Sass folder you targeted as the Source folder in the previous exercise.
There’s no need to create the CSS file; the compiler in Dreamweaver will do that for you. You’re all set to start working with Sass. The first step is to define variables. Variables are programmatic constructs that enable you to store CSS specifications you want to use multiple times, such as colors in your site theme. By using a variable, you have to define it only once. If you need to change it in the future, you can edit one entry in the style sheet and all the instances of the variable are updated automatically.
Insert the cursor into line 2 of green-styles.scss.
Type
$logogreen: #090;and press Enter/Return.You’ve created your first variable. This is the main green color of the site theme. Let’s create the rest of the variables.
Type
$darkgreen: #060;and press Enter/Return to create a new line.
$lightgreen: #0F0;
$logoblue: #069;
$darkblue: #089;
$lightblue: #08A;
$font-stack: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;Entering the variables on separate lines makes them easier to read and edit but does not affect how they perform. Just make sure you add a semicolon (
;) at the end of each variable.Let’s start the style sheet with the base or default styling of the
bodyelement. SCSS markup in most cases looks just like regular CSS, except in this case you’ll use one of your variables to set the font family.Type
bodyand press the spacebar.Type
{and press Enter/Return.When you typed the opening brace (
{), Dreamweaver created the closing brace automatically. When you created the new line, the cursor was indented by default and the closing brace moved to the following line. You can also use Emmet to enter the settings more quickly.Type
ff$font-stackand press Tab.
The shorthand expands to
font-family: $font-stack;.Press Enter/Return to create a new line.
Type
cand press Tab.
The shorthand expands to
color: #000;. The default color is acceptable.Hold the Alt/Cmd key and press the Right Arrow key to move the cursor to the end of the current line of code.
Press Enter/Return to create a new line.
Type
m0and press Tab.
The shorthand expands to
margin: 0;. This property completes the basic styling for thebodyelement. Before you save the file, this is a good time to see how preprocessors do their work.
Compiling CSS code
You have completed the specifications for the body element. But you have not created the styling directly in a CSS file. Your entries were made entirely in the SCSS source file. In this exercise, you will see how the compiler that is built into Dreamweaver generates the CSS output.
Display the Files panel, if necessary, and expand the list of site files.
The site consists of one HTML file and three folders: css, images, and Sass.
Expand the view of the css and Sass folders.
NoteThe green-styles.css file should have been created automatically in the previous exercise when the SCSS file was saved. If you do not see the .css file, you may need to shut down and relaunch Dreamweaver.
The Sass folder contains green-styles.scss and _base.scss. The css folder contains green-styles.css. This file did not exist when you started the lesson. It was generated automatically when you created the SCSS file and saved it into the site folder defined as the Source folder. At the moment, the CSS file should contain no CSS rules or markup. It’s also not referenced in the sample webpage.
Select the document tab for myfirstpage.html.
Switch to Split view, if necessary.
The page shows only default HTML styling.
In the Code view window, insert the cursor after the opening
<head>tag and press Enter/Return to insert a new line.Type
<linkand press the spacebar.The hinting menu appears. You’ll link the webpage to the generated CSS file.
Type
hrefand press Enter/Return.
The complete
href=""attribute appears, and the hinting menu changes to display the Browse command and a list of pathnames to folders available in the site.Press the Down Arrow to select the path
css/and press Enter/Return.The hinting menu now displays the path and filename to green-styles.css.
Press the Down Arrow to select
css/green-styles.cssand press Enter/Return.
The URL to the CSS output file appears in the attribute. The cursor is moved outside the closing quotation mark and is ready for the next entry. For the style sheet reference to be valid, you need to create one more attribute.
Press the spacebar, and then type
reland press Enter/Return.Select
stylesheetfrom the hinting menu.Move the cursor outside the closing quotation mark. Type
>to close the link.
The CSS output file is now referenced by the webpage. In the Live view window, there should be no difference in the styling, but you should now see green-styles.css displayed in the Related Files interface.
NoteIf you accidentally saved the SCSS file before this step, you may see styling in the HTML file and another filename in the Related Files interface.
Select green-styles.css in the Related Files interface.
Code view displays the contents of green-styles.css, showing only the comment entry
/* Scss Document */. An asterisk appears next to the filename in the document tab for green-styles.scss, indicating that the file has been changed but not saved.Choose Window > Arrange > Tile.
The webpage and the source file appear side by side in the program window.
Insert the cursor anywhere in the green-styles.scss document window and choose File > Save.
After a moment, the display of myfirstpage.html changes, showing the new font and margin settings. The Code view window also updates to display the new contents of green-styles.css. Each time you save the SCSS source file Dreamweaver will update the output file.
Nesting CSS selectors
Targeting CSS styling to one element without accidentally affecting another is a constant challenge for web designers everywhere. Descendant selectors are one method for ensuring that the styling is applied correctly. But creating and maintaining the correct descendant structure becomes more difficult as the site and style sheets grow in size. All preprocessor languages offer some form of nesting for selector names.
In this exercise, you will learn how to nest selectors while styling the navigation menu. First, you’ll set the basic styling for the <nav> element itself.
In green-styles.scss window, insert the cursor after the closing brace (
}) on line 13 for the body rule.
NoteMake sure you are working in the SCSS file.
Create a new line and type
nav {and press Enter/Return.The nav selector and declaration structure is created and ready for your entry. Emmet provides shorthand entries for all CSS properties.
Type
bg$logoblueand press Tab. Press Enter/Return.The shorthand expands to
background: $logoblue, which is the first variable you created in the SCSS source file. This will apply the color#069to the nav element.Type
ta:cand press Tab. Press Enter/Return.The shorthand expands to
text-align: center.Type
ov:aand press Tab. Press Enter/Return.The shorthand expands to
overflow: auto.Save the source file.
The
<nav>element in myfirstpage.html displays the color#069. The menu doesn’t look like much yet, but you’ve only just begun. Next, you’ll format the<ul>element. Note that the cursor is still within the declaration structure for thenavselector.Type
ul {and press Enter/Return.The new selector and declaration are created within the
navrule.Create the following properties:
list-style: none; padding: 0;These properties reset the default styling of the unordered list, removing the bullet and indent. Next, you’ll override the styling of the list items.
Press Enter/Return and type
li {Press Enter/Return again.As before, the new selector and declaration are fully within the
ulrule.Create the property
display: inline-block;and press Enter/Return.This property will display all the links in a single row, side by side. The last element to style is the
<a>for the link itself.Type
a {and press Enter/Return. Create the following properties:margin: 0;
padding: 10px 15px;
color: #FFC;
text-decoration: none;
background: $logoblue;The rule and declaration for
aappear entirely within thelirule. Each of the rules styling the navigation menu has been nested one inside the other in a logical, intuitive manner and will result in an equally logical and intuitive CSS output.Save the file.
The navigation menu in myfirstpage.html is reformatted to display a single line of links, side by side. The CSS output file displays several new CSS rules. The new rules are not nested as in the source file. They are separate and distinct. And more surprising, the selectors have been rewritten to target the descendant structures of the menu, such as
nav ul li a. As you can see, nesting rules in the SCSS source file eliminates the chore of writing complex selectors.
Importing other style sheets
To make CSS styling more manageable, many designers split their style sheets into multiple separate files, such as one for navigation components, another for feature articles, and still another for dynamic elements. Large companies may create an overall corporate standard style sheet and then allow various departments or subsidiaries to write custom style sheets for their own products and purposes. Eventually, all these CSS files need to be brought together and called by the webpages on the site, but this can create a big problem.
Every resource linked to a page creates an HTTP request that can bog down the loading of your pages and assets. This is not a big deal for small sites or lightly traveled ones. But popular, heavily traveled sites with tons of HTTP requests can overload a web server and even cause pages to freeze in a visitor’s browser. Too many experiences like this can cause visitors to flee.
Reducing or eliminating superfluous HTTP calls should be the goal of any designer or developer, but especially those working on large enterprise or highly popular sites. One important technique is to cut down on the number of individual style sheets called by each page. If a page needs to link to more than one CSS file, it’s usually recommended that you designate one file as the main style sheet and then simply import the other files into it, creating one large universal style sheet.
In a normal CSS file, importing multiple style sheets would not produce any benefit, because the import command creates the same type of HTTP request that you’re trying to avoid in the first place. But since you are using a CSS preprocessor, the import command happens before any HTTP request occurs. The various style sheets are imported and combined. Although this makes the resulting style sheet larger, this file is downloaded only once by the visitor’s computer and then cached for their entire visit, speeding up the process overall.
Let’s see how easy it is to combine multiple style sheets in one file.
Open myfirstpage.html and switch to Split view, if necessary.
Open green-styles.scss and choose Window > Arrange > Tile.
The two files are displayed side by side to make it easier to edit the CSS and see the changes as they occur.
In myfirstpage.html, click green-styles.css in the Related Files interface.
Code view displays the content of green-styles.css. It contains the output of rules written in the SCSS Source file.
In green-styles.scss, insert the cursor before the
bodyrule. Type@import "_base.scss";and press Enter/Return to insert a new line.This command imports the contents of the file
_base.scssstored in the Sass folder. The file was created ahead of time to style other portions of your page. At the moment, nothing has changed, because green-styles.scss has not been saved yet.Save green-styles.scss and observe the changes in myfirstpage.html.
If you correctly followed the instructions on how to create the HTML structure earlier in this lesson, the page should be entirely formatted now. If you examine green-styles.css, you will see that several rules were inserted before the
bodyrule. Imported content will be added starting at line 2, the position of the@importcommand. Once the content has been imported, normal CSS precedence and specificity take effect. Just make sure that all rules and file references appear after the variables; otherwise, the variables won’t work.Save and close all files.
In this section, you created an SCSS file and learned how to work with a CSS preprocessor. You experienced various productivity enhancements and advanced functionality and have glimpsed just a bit of the breadth and scope of what is possible.
Learn more about preprocessors
Check out the following books to learn more about CSS preprocessors and supercharging your CSS workflow:
Beginning CSS Preprocessors: With SASS, Compass.js, and Less.js, by Anirudh Prabhu, Apress (2015), ISBN: 978-1484213483
Instant LESS CSS Preprocessor How-to, by Alex Libby, Packt Publishing (2013), ISBN: 978-1782163763
Jump Start Sass: Get Up to Speed with Sass in a Weekend, by Hugo Giraudel and Miriam Suzanne, SitePoint (2016), ISBN: 978-0994182678
Linting support
Dreamweaver CC (2019 release) provides live code error checking. Linting support is enabled by default in Preferences, which means the program monitors your code writing and flags errors in real time.
Open myfirstpage.html, if necessary, and switch to Code view. If necessary, select Source Code in the Related Files interface.
Insert the cursor after the opening
<article>tag and press Enter/Return to create a new line.Type
<h1>Insert headline here
NoteDreamweaver may create the opening and closing tags at once. If so, delete the closing
</h1>tag before proceeding to step 4.Save the file.
You failed to close the
<h1>element in step 3. When an error occurs, a red X will appear at the bottom of the document window whenever you save the page.Click the X icon
.
NoteYou may need to click the Refresh button to display the Linting report.
The Output panel opens automatically and displays the coding errors. In this case, the message says that the tag must be paired and identifies what line it thinks the error occurs on. The message erroneously targets line 27, but this can happen because of the nature of HTML tags and structures.
Double-click the error message.
Dreamweaver focuses on the section in the Code view window that it identifies as containing the error. Since Dreamweaver is looking for the closing tag for the
<h1>element, the first closing tag it encounters is</article>and flags it, which is incorrect. This behavior will get you close to the error, but often you will have to track down the actual issue yourself.Insert the cursor at the end of the code
<h1>Insert headline here.Type</
NoteIf your heading closed automatically in step 3, typing
</will probably not close the tag. Check your preference settings for code rewriting and adjust them as desired.Dreamweaver should close the
<h1>tag automatically. If not, go ahead and finish it properly.Save the file.
Once the error is corrected, the red X is replaced by a green checkmark
.Right-click the Output panel tab and select Close Tab Group from the context menu.
It’s important to be alert for this icon as you save your work. No other error message will pop up indicating any problems, and you’ll want to catch and correct any errors before uploading your pages to the web server.
Selecting code
Dreamweaver provides several methods for interacting with and selecting code in Code view.
Using line numbers
You can use your cursor to interact with the code in several ways.
Open myfirstpage.html, if necessary, and switch to Code view.
Scroll down and locate the
<nav>element (around line 11).Drag the cursor across the entire element, including the menu items.
Using the cursor in this way, you can select any portion of the code or its entirety. However, using the cursor in this way can be prone to error, causing you to miss vital portions of the code. At times, using line numbers to select whole lines of code is easier.
Click the line number beside the
<nav>tag.The entire line is selected within the window.
Drag down the line numbers to select the entire
<nav>element.
Dreamweaver completely highlights all seven lines. Using line numbers can save a lot of time and avoid errors during selection, but it doesn’t take into account the actual structure of the code elements, which may begin and end in the middle of a line. Tag selectors provide a better way to select logical code structures.
Using tag selectors
One of the easiest and most efficient ways to select code is to use the tag selectors, as you have frequently done in previous lessons.
Scroll down and locate the following code:
<a href="#">Link 1</a>Insert the cursor anywhere in the text
Link 1.Examine the tag selectors at the bottom of the document window.
The tag selectors in Code view display the
<a>tag and all its parent elements, the same way they do in Live or Design view.Select the
<a>tag selector.
The entire
<a>element, including its content, is highlighted in Code view. It can now be copied, cut, moved, or collapsed. The tag selectors clearly reveal the structure of the code, even without referring to the Code view display. The<a>is a child of the<li>element, which is a child of<ul>, which is in turn a child of<nav>, which is a child of<div#wrapper>, and so on.The tag selectors make it a simple chore to select any part of the code structure.
Select the
<ul>tag selector.
The code for the unordered list is entirely selected.
Select the
<nav>tag selector.The code for the entire menu is selected.
Select the
<div#wrapper>tag selector.
The code for the entire page is now selected. Using the tag selectors allows you to identify and select the structure of any element on your page, but it requires you to identify and select the parent tag yourself. Dreamweaver offers another tool that can do it for you automatically.
Using parent tags
Using the parent tag selector in the Code view window makes the job of selecting the hierarchical structure of your page even simpler.
Choose Window > Toolbar > Common to display the Common toolbar, if necessary.
Insert the cursor anywhere in the text
Link 1.In the Common toolbar, click the Select Parent Tag icon
.
The entire
<a>element is highlighted.
NoteThe Select Parent Tag icon may not be displayed by default in the Common toolbar. Click the Customize Toolbar icon and enable the tool before proceeding to step 3, if necessary.
Click the Select Parent Tag icon
again or press Ctrl+[/Cmd+[ (left bracket).The entire
<li>element is selected.Click the Select Parent Tag icon
.
The entire
<ul>element is selected.Press Ctrl+[/Cmd+[ until
<div#wrapper>is selected.
Each time you click the icon or press the shortcut key, Dreamweaver selects the parent element of the current selection. Once you’ve selected it, you may find working with long sections of code unwieldy. Code view offers other handy options to collapse long sections to make them easier to work with.
Collapsing code
Collapsing code is a productivity tool that makes a simple process out of copying or moving large sections of code. Coders and developers also collapse code sections when they are looking for a particular element or section of a page and want to temporarily hide unneeded sections from view. Code can be collapsed either by selection or by logical element.
Select the first three Link items in the
<nav>element.Note the Collapse icon along the left edge of Code view. The Collapse icon indicates that the selection is currently expanded.
Click the Collapse icon
to collapse the selection.
The selection collapses, showing only the first
<li>element and a snippet of text from it.You can also collapse code based on logical elements, like
<ul>or<nav>. Notice that each line that contains an opening element tag also displays a Collapse icon.Click the Collapse icon
beside the line for the <nav>element.
The entire <nav> element collapses in the Code window, showing only an abbreviated snippet of the entire element. In either instance, the code hasn’t been deleted or damaged in any way. It still functions and operates as expected. Also, the collapse functionality appears only in Code view in Dreamweaver; on the web or in another application, the code will appear normally. To expand the code, just reverse the process, as described in the following section.
Expanding code
When the code is collapsed, you can still copy, cut, or move it like you would any other selected element. You can then expand elements one at a time or all at once.
Click the Expand icon
beside the line for the <nav>element.
The
<nav>element expands, but the three<li>elements collapsed in the previous exercise are still collapsed.Click the Expand icon
beside the line for the <li>elements.
All collapsed elements are now expanded.
Accessing Split Code view
Why should coders be denied the ability to work in two windows at the same time? Split Code view enables you to work in two different documents or two different sections of the same document at once. Take your pick.
If necessary, switch to Code view.
Choose View > Split > Code-Code.
The document displays two Code view windows, both focusing on myfirstpage.html.
Insert the cursor in the top window and scroll down to the
<footer>element.Split Code view enables you to view and edit two different sections of the same file.
Insert the cursor in the bottom window and scroll to the
<header>element.
You can also view and edit the contents of any related file.
In the Related Files interface, select green-styles.css.
The window loads the style sheet into one of the windows. You can work in either window and save your changes in real time. Dreamweaver displays an asterisk (*) on any filename in the interface that has been changed but not saved. If you select File > Save or press Ctrl+S/Cmd+S, Dreamweaver saves the changes in the document where your cursor is inserted. Since Dreamweaver can make changes to documents even when they are not open, this feature allows you to edit and update even the files that are closed but linked to your webpage.
Previewing assets in Code view
Although you may be a diehard coder or developer, there’s no reason why 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 green-styles.css.
Click green-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
headerrule (around line 3).The
headerconsists of two text elements and two images. You should be able to see the image references in thebackgroundproperty.Position the cursor over the markup
url(../images/fern.png)in thebackgroundproperty (line 6).
A miniature preview of the fern image appears below the cursor.
Position the cursor over the markup
url(../images/stripe.png)in thebackgroundproperty.A miniature preview of the stripe image appears below the cursor. The preview function also works with color properties.
Position the cursor over the markup
#090in thebackground-colorproperty.
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 code without compromises.
Review questions
In what ways does Dreamweaver assist you in creating new code?
What is Emmet, and what functionality does it provide to users?
What do you have to install to create a LESS, Sass, or SCSS workflow in Dreamweaver?
What feature in Dreamweaver reports code errors when you save a file?
True or false: Collapsed code will not appear in Live view or the browser until it is expanded.
What Dreamweaver feature provides instant access to most linked files?
Review answers
Dreamweaver provides code hinting and auto-completion for HTML tags, attributes, and CSS styling as you type, along with support for ColdFusion, JavaScript, and PHP, among other languages.
Emmet is a scripting toolkit that creates HTML code by converting shorthand entries into complete elements, placeholders, and even content.
No additional software or services are needed to use LESS, Sass, or SCSS. Dreamweaver supports these CSS preprocessors out of the box. You merely have to enable the compiler in the Site Definition dialog.
Linting checks the HTML code and structure every time you save a file, and then displays a red X icon at the bottom of the document window when an error is detected.
False. Collapsing code has no effect on the display or operation of the code outside of Dreamweaver.
The Related Files interface appears at the top of the document window and enables users to instantly access and review CSS, JavaScript, and other compatible file types linked to the webpage. In some cases, a file displayed in the interface will be stored on a remote resource on the Internet. While the Related Files interface enables you to view the contents of all the files displayed, you will be able to edit only ones stored on your local hard drive.