Entering the Maze’s Center

The purpose or endgame of a maze is to have a center or goal where you reach the destination or prize. So far, as you have seen in Adobe, you have come to different junction points (Photoshop CC, Illustrator CC, Animate CC, and Media Encoder CC) to create and assemble the graphics and media that are used for the final website.

There have been a few twists and turns along the way, but as you can see, most of your multimedia can be created or edited using the four core programs that you have looked at. Now you have reached the final and most crucial Adobe software for completing your web design goal: Dreamweaver CC. As you will discover, this program has a lot to offer and can assist you in the writing of HTML5, CSS (Cascading Style Sheets), and JavaScript code to create additional animations. Refer to Figure 30-1.

Differences and Similarities Between Dreamweaver and Muse

Before you begin designing your website in Dreamweaver, or in this case, working with the HTML5 files for the Hot Glass Tango website, I would like to point out that Adobe Creative Cloud use to offer another website design program known as Muse CC. Refer to Figure 30-2.

Muse CC was a great program for beginner web designers that did not want to learn coding just yet. You could use it to create some basic responsive websites using themes. You could also use your audio, video, and images as part of the design. As you progress as a designer and coder, however, you want to customize certain settings in your layout or themes, and your site may increase in size and complexity.

One main drawback to working with Muse was that if you’re working with another person who uses Dreamweaver CC or any HTML complier to build your site, and you bring your Muse files for them to edit, once it’s in Dreamweaver as HTML, you couldn’t go back to Muse to continue designing. However, if you learn basic coding like HTML5, CSS, and JavaScript, there is no need for Muse and you can build your own responsive website using Dreamweaver.

Since not all settings in Muse were standardized, learning the code is the best web practice. Using Dreamweaver, you can still use HTML files from a client who may not have Dreamweaver or the four core Adobe programs mentioned earlier. Refer to Figure 30-3.

In Part 7, you look at a few more programs that Adobe CC offers for web design for creating websites and related products, but for now, let’s focus on using Dreamweaver to complete building your site. Refer to Figure 30-4.

Setting up in Dreamweaver

My first complete website after college in 2003 was built using Adobe’s first web development program, known as Adobe GoLive. I had read some books on basic web design but did not really understand what the purpose of the HTML coding and CSS formatting was. I was limited by what I could do with the layout because I could not manipulate the placement of the graphics and text to suit my requirements.

Eventually, around 2006 or 2007, I became more serious about learning web design and started using Macromedia Dreamweaver (later bought by Adobe and replaced Adobe GoLive in 2007). I took some continuing studies courses for several years to continue my research into coding for work, and today besides building websites for clients, I work at the college as an instructor assisting students on the basics of web design with Adobe Dreamweaver CC.

If you have never used Dreamweaver before, I recommend reading a book like Adobe Dreamweaver CC Classroom in a Book by James J. Maivald (Adobe Press, 2017), where you get a basic overview of the program and many of its tools. You can also check out Dreamweaver’s Help menu, which has step-by-step tutorials on various projects. Refer to Figure 30-5.

In this book, you work with some graphics that were already created. You will add them to various pages on the Hot Glass Tango website.

Let’s begin by opening Dreamweaver CC. If you do not have it on your computer, but you do have the Creative Cloud software console, click the Install button (see Figure 30-6) and follow the instructions on how to install the program.

If you already have Dreamweaver installed on your computer, double-click the icon, or in the Creative Cloud console, click Open to launch the program as seen in Figure 30-7.

Once Dreamweaver CC opens, let’s set up your workspace so that it is the same as mine.

Chose the Standard workspace from the Workspace icon in the upper right, as in Figure 30-8. This layout allows you to work with many visual tools, and a Split view gives you a preview of the layout while you code.

However, depending on your workflow, you may prefer the Developer workspace (a layout geared towards coding), or you may want to create a New Workspace, as you saw you could do with Photoshop (in Part 2), Illustrator (in Part 3), Animate (in Part 4), and Media Encoder (in Part 5). After saving your workspace, you can switch and manage your workspaces during your project while you edit your documents or panels.

Then I added the Properties panel (Window ➤ Properties). Refer to Figure 30-9.

This way, you have the access to the Properties panel as you would with the other Adobe programs that you use, in case you need to make edits to your graphics and text. I usually drag this panel to the bottom of my screen so that it does not block the preview. Before you open and create a new file, the Properties panel is blank. Refer to Figure 30-10.

Make sure to choose Quick Start; this option is found in the Start-up panel and the Work tab. This option allows you to quickly start building a preset file type without having to go through the File ➤ New dialog box.

Toolbar Overview

You will notice that, like Photoshop CC, Illustrator CC, and Animate CC, Dreamweaver CC has a toolbar that appears on the left (Windows ➤ Toolbars ➤ Common). However, the tools within it are very different than those in the other programs. Refer to Figure 30-11.

Like Photoshop, you can customize the toolbar to suit your needs, by adding further menu options or removing unwanted tools from the toolbar. These settings can be saved as part of one of your customized workspaces.

• Open Documents : Allows you to open or review the currently opened documents, in a single window with the tabs. You can switch between the documents by selecting that file from the pop-out list.

• File Management : Allows you to get (download) and put (upload) a current file via FTP, providing you have this set-up, in Site ➤ Manage Sites, files can also be Check in or out if working with another group member or team, Design Notes allow you to add notes to a separate HTML file that team members can access as a reference. Locate in Site helps you locate the currently open file in your Files panel so that you can see where it is in the hierarchy of the site.

• View Live Options : This only appears in the toolbar if your Live option is enabled in Toolbars ➤ Document. Refer to Figure 30-12. It allows you to work with your JavaScript during testing to freeze or disable it. Highlight changes in the Live code, hide/show live view displays guides, edit the Live view page in a new tab, and follow links. You can also automatically synchronize with remote files and transfer the document you are viewing between your local and remote sites. Further options include the testing server for document source, local files for document links, and the HTTP Request settings.

• Toggle Visual Media Queries Bar : Allows this bar to show or hide when a file is open. Refer to Figure 30-13.

• Make a plus arrow appear on a ruler and you can set various change points or CSS media queries. This happens in various browser layouts; for example, your site may have three states: one for mobile, another for tablet, and a final for the desktop. This can ultimately be controlled using CSS. Media query refers to the type of media (mobile, tablet, or desktop) that you are viewing the website on. For now, leave this area hidden or in Design view. Design view displays a representation of the document, previewing how the user views a page in a web browser.

• Turn on Live view and inspect mode : Live view is an interactive preview of your website that is accurately rendering in real time. In this view, you can also edit your HTML elements. This tool also removes the rulers. You can add them back by clicking in the design and then the Live view in the Document toolbar. When this is on, you can click the menu area (triple horizontal lines) of the image and then the code appears in a pop-out dialog box that you can edit and it points out where the code can be found when you are in Split view. Refer to Figure 30-14.

• Expand All : Refers to when you are working either in Code view or Split view, if part of the code is collapsed or hidden, Expand All restores all the code to the expanded or show state so that you can look at it all.

• Format Source Code : Allows you to apply formatting to a selection; it also allows you to view and edit code format settings and edit tag libraries, which are advanced settings that require knowledge of HTML and CSS. This tool is only visible when in Code view or Split view.

• Apply Comment and Remove Comment : Allows you to add or remove HTML, CSS, JavaScript, or server comments. Comments are lines of code that do not affect the operation of the code. They are just helpful reminders or hints while working on a project to you as the designer or other designers as to what the code does. In HTML you might write

<!-- This div will contain a video -->

This reminds you or the designer what goes in that <div> tag. In CSS or JavaScript, you might write for a large area of code:

 /* This section is for navigation*/

or for one line of code

//This is the width of the button.

Highlighting the comment in the Code view and clicking the Remove Comment icon removes the comment symbols. It now becomes just a sentence which can affect the operation of the code.

As with the other mentioned Adobe programs like Photoshop you can access more subtools when you click the triangle in the lower right of each tools.

Also, you can add a few more tools to the bar using the … icon to customize the toolbar and access the Customize Toolbar dialog box. If you want to remove or reset the toolbar, click the Restore Default button and then Done to exit. Refer to Figure 30-15.

However, most of the tools and settings that you need are found in the Properties panel and the Insert panel, which you look at in more detail shortly. Nevertheless, take some time to check out the extra tools and add them to your toolbar if required for your project.

There is also the Toolbars Standard panel, as seen in Figure 30-16.

This panel allows you to quickly access many of the settings you would find in the File or Edit menus.

You can create a new document, open a document in your site, save, save all files currently open, print the code of the file, cut, copy, paste, redo, undo, and refresh the current file.

Note

If you would like to set your interface to the same color as mine, go to Edit ➤ Preferences and choose the Interface tab. Then choose an App Theme (third from the left) and code theme: light, and click Apply and close. Refer to Figure 30-17.

I prefer a medium gray and a light code theme, as I find it reduces eye strain, but you may prefer another setting.

To create a new HTML5 page, you can do it through the Opening Start-up console in the Quick Start tab, which appears when Dreamweaver opens, or File ➤ New. Refer to Figure 30-18.

File ➤ New Document lets you set the document type to HTML5. Refer to Figure 30-19.

If you have been using the default of HTML4 in the past or need to revert to an older file version, you can choose it from the drop-down menu; however, do not keep the doc type as HTML5.

You can also work with a variety of other file formats, such as external CSS, external JavaScript, JSON, PHP, XML, and SVG. See Chapters 14 and 16 for more information on SVG files.

In addition, Dreamweaver allows you to create templates. Templates are in some ways like themes that you see on a website; you build one template background, and then all the HTML5 pages that you base on that template for your website is consistently similar. You can either create your own template, work with a starter template that Adobe has created, or a site template that a client has already created for you.

You look at templates in more detail in Chapter 35. Let’s first discuss HTML5 files. Click the Create button in the New Document dialog box to create a new HTML5 document.

What is HTML5 (.html)?

When you first create an HTML document via File ➤ New, like any file, it is not in any folder or location until it is saved. For all your projects in this book, you should save it as the latest version of Hypertext Markup Language, or HTML version 5. Refer to Figure 30-20 .

Here you can name give the document a title (this appears in the <title> tag), choose a doc type of HTML5. If you have already created an external file, attach a CSS file with the Link icon; you can also remove it using the Trash icon.

Older client files that are in HTML may have been saved in HTML4 doc type format as either transitional or strict. Refer to Figure 30-21.

For more information on doc types, review the examples at www.w3schools.com/tags/tag_doctype.asp .

To access the full range of new HTML5 features and work with the latest CSS, you need to use the HTML5 doc type and click Create to create your new page.

Let’s now take a moment to review the HTML5 settings. Make sure that you are either in Code view or Split view in Toolbars ➤ Document to look at the code. Your new blank document should look like Figure 30-22.

Refer to www.w3schools.com/html/default.asp and www.w3schools.com/tags/default.asp .

• <!doctype html> : Defines the doc type.

• <html> </html> : Surrounds the head, meta, title, and body tags: It lets you know this is an HTML document. If one of these tags is altered incorrectly or removed, the document becomes corrupt, and you should fix it right away if you are working on the file in Dreamweaver CC. See how to do this in the “Fixing Errors” section. You also want to add the lang or language attribute of your site, like this: <html lang="en">. Refer to Figure 30-23.

Dreamweaver CC does not add this attribute because it does not know what language your site is. If the language is English, then you use lang="en"; if French, lang="fr"; or Spanish, lang="es".

For a more complete reference, you can view this information at

Import and Save Your File to Your Site

Once you have created a new file, it is time to save it with a name in your site folder. If you have not set up a site, you can save the file to any folder as you would a Photoshop or Illustrator file; however, if you are saving multiple HTML files, it is important to be able to save these files to the same folder repeatedly without getting mixed up. When building a website, organization is key. Saving a site makes Dreamweaver remember the same folder each time you save a new file.

Before saving your first HTML page in the main menu, go to Site ➤ New site.

To set up a basic site, the two primary areas you need to look at are the Site and Servers tabs. If you don’t have a remote website yet, that is OK. For now, you will just focus on the Site panel so that you can start building your local site for your project. In Chapter 38, you set up the remote area, but you need to make your own custom revisions, which depend on your FTP host site, the location of your domain name system (DNS), and what kind of server they use. Refer to Figure 30-24.

To follow along, Locate the “glass tango site” folder for this chapter you will be using it as a reference in Part 6.

In the site, add a site name: Hot Glass Tango. This is a reference point for you when you work in the Files panel, as you may have more than one site. Then use the Local Site Folder icon to locate where you want your local site folder to be, or in this case, the folder that is for this chapter; it may be on your local drive or your external drive. Ignore the area that refers to a Git repository because this has to do with uploading files to a GitHub site, which you are not doing in this book.

Now click the Servers tab. For now, this area should not have an added remote server. You look at this in more detail in Chapter 38. Refer to Figure 30-25.

Now go to the Advanced Settings tab and choose from the Bootstrap drop-down; make sure that it is the 4.0.0 version setting. Refer to Figure 30-26.

You learn a bit more about Bootstrap in Chapter 35. It is a free front-end framework that comes with Dreamweaver to create responsive designs while working with HTML, CSS, and various adaptable JavaScript (jQuery) plug-ins. Version 4.4.0 is supported by version IE 10 and higher.

You may want to visit the Advanced Settings tab if you must make further adjustments to your own site, but for now click Save to exit the dialog box.

Your folder should now be set up and appear in the Files panel.

Now save your HTML file; go to File ➤ Save, give it a distinct name like myfile.html, and make sure that the type is an HTML document. Refer to Figure 30-27.

If you are unsure if you are in the Site Root folder, click the Site Root button; otherwise, locate the folder within the site root that you want to save the file into.

Once done, click Save.

Files Panel

You see the new file appears in the Files panel and in your drive. Note that if you move the file outside of Dreamweaver CC, you may have to click the Refresh icon at the bottom of the panel to reflect that change. Refer to Figure 30-28.

However, if a file is moved outside of Dreamweaver, it may not update links if there are any changes. The best practice is to update links within Dreamweaver or move files within the Files panel rather than your computer’s file folder. That way, Dreamweaver can keep track and alert you to changes to links.

The Files panel is very useful for navigation in your site because it lets you add or remove files using its panel menu rather than leaving Dreamweaver. Refer to Figure 30-29.

Just remember that when you delete a file in the Files panel, it is permanently deleted outside of Dreamweaver as well.

Fixing Errors

While typing errors can occur within the HTML file, you can tell the file is corrupt or has an error by looking at the bottom left of your HTML page. If there is a green check, there are no errors to report. A red X means something is wrong in the code, and you need to correct it. Often, the errors won’t appear until you have saved the file. Refer to Figure 30-30.

Hovering over the X and clicking it opens the Output panel, which gives you a hint as to what the error, is as seen in Figure 30-31.

Likewise, you can look at the code and see the red text line number. Hovering over it gives a similar message. Refer to Figure 30-32.

When you have corrected any errors, save the file, and the icon returns to a green check. Errors are removed from the Output panel as well.

You look at other ways to further validate files in the site in Chapter 38. For now, you can File ➤ Close this practice file. File ➤ Exit Dreamweaver or leave the program open for the next chapter.

Summary

In this chapter, you looked at some of the differences between Dreamweaver and the previously used Muse. You saw how different Adobe platforms or your clients’ files can work with Dreamweaver. You then set up your workspace in Dreamweaver, created a basic HTML5 document, imported a site, and saved your file. You also saw how to use the Files panel to organize your work. Lastly, you looked at how Dreamweaver detects errors in a file and helps you correct them.

In the next chapter, you start adding graphics to the Hot Glass Tango site.