Edit ➤ Preferences of Browsers

As you continue to work with your files on your desktop, you can also set up which browsers you want to do a real-time preview in. Dreamweaver is not sufficient in its rendering or browser compatibility for testing. Under Edit ➤ Preferences, go to the Real-time Preview tab and set up the browser that you want as your primary, and secondary if you have more than one. Click Apply to confirm and exit. Refer to Figure 38-1.

Then the next time you test (File ➤ Real-time Preview), those browsers will be available in the list. You may want to add other browsers, such as Safari, Firefox, and Opera, and their versions to your testing computer. Refer to Figure 38-2.

Solely testing your site on the machine it was developed on isn’t best practice, because you cannot know whether or not it is compatible with other devices. Having multiple users test your site on their devices, as well as having a strategy for mobile testing, should be part of your project’s development plan. For example, testing on several desktop operating systems, such as Windows 7, 8, or 10, or versions of Mac 10, as well as a variety of tablet and mobile smartphone devices. With testing, it really all comes down to time and the budget.

Validation Options and Uploading Site

Before your site goes live, take the time to make sure that you have eliminated as many HTML5, CSS, and JavaScript errors as possible. Catching errors prelaunch saves time and money. If you don’t correct such things such as broken links or missing images now, this can affect the user’s ability to navigate through your site. For the user, this can cause frustration or cause them to miss important information; as a result, they may not return to your site. In turn, the quality of your website impacts the brand that you are trying to exhibit.

While there are many quality assurance tests available online, most errors you see in the Window ➤ Results ➤ Output panel if the red X appears at the bottom of the page. But you can always find a few more errors using Site ➤ Reports. Refer to Figure 38-3.

Reports can be run on the current document, selected files, or on the entire current local site. I generally only check off the boxes under the HTML Reports tab. This is great for discovering if any of my images are missing alt tags.

Site Reports Panel

Warnings and errors appear in the Window ➤ Results ➤ Site reports panel. Refer to Figure 38-4.

You can open these pages by double-clicking the error. Find the lines where the error occurs, make the changes, resave the file, and run the report again to see if the error is gone.

Next, I discuss other panels that are useful.

Link Checker Panel

The Link Checker panel (Window ➤ Results ➤ Link Checker) checks for broken links, external links, and files in your root folder that may be orphaned. Right-click or use the panel’s menu to choose options. Refer to Figure 38-5.

When no files are selected, you can choose from the panel’s menu, Check links for entire Current Local site as seen in Figure 38-5.

If you have any linked PDF document on your site, make sure to manually check for the PDF using Find ➤ Find in Current Document and enter .pdf. Then check if those links are opening appropriately with the "_blank" targets attribute; correct if missing. Likewise, repeat these steps for external navigation.

Validation Panel

The Validation panel (Window ➤ Results ➤ Validation) brings up CSS and HTML validation issues. Right-click or use the panel’s menu to choose options. Refer to Figure 38-6.

Choosing Current Document W3C brings up a note that it will send the file to the W3C service for validation.

Note

Once your site is no longer local and is remote (uploaded) the alternative is to use the following links to do further testing:

For HTML, W3C validator: https://validator.w3.org/

For CSS: https://jigsaw.w3.org/css-validator/

Either way, you will find additional errors that you should correct on the local site and then upload the file again.

Output Panel

The other way to validate without uploading files is to rely on your Output panel (Window ➤ Results ➤ Output), which catches most HTML5 errors. Refer to Figure 38-7.

Local and Remote Sites

Before you enter the Local and Remote dialog box area found in your Files panel, it important to decide which side you want to see your local files on, the right or the left. Refer to Figure 38-8.

Note

If you have not set up your Remote Server area in the Site dialog box, you may not see this button. Follow along with the screenshots for now.

I prefer seeing my local files on the left and my remote files on the right; this is a common workflow. So go into Edit ➤ Preferences ➤ Site tab and change Always show Local Files on the Left and click Apply. Now when you go back to the Local and Remote dialog box, the local files are on the left and the remote files are on the right, as seen in Figures 38-8 and 38-9.

You don’t have to change most of the other settings in this tab. However, be aware of the proxy port 21. In some cases, it can interact with a program like Skype, which may be using the same port. If that happens, there may be a conflict, and you may need to adjust the setting in Skype (Tools ➤ Connection options) to a different port. For Dreamweaver, leave it at port 21 unless the company that manages your site has different settings.

Manage Site

Earlier, you set up your local site (Site ➤ New Site) and saved it. This area is where you manage the transfer and sync between the local and remote sites. Now you will go to Site ➤ Manage Sites, locate the site, select it, and then click the Pencil icon to edit the currently selected site. Refer to Figure 38-10.

Then proceed down to the Severs tab in the Site Setup dialog box, as seen in Figure 38-11.

Currently, you may have no servers if you haven’t set this up; otherwise, they appear here. Refer to Figure 38-12.

If not, click the plus icon, as seen in Figure 38-11, to enter the server settings. Your settings are different from mine; in most cases, the Basic tab is all you need to set up. Check with your hosting site if you are not sure. Get the server name. The connection is generally FTP (File Transfer Protocol). Next, you need an FTP address or (IP address), a username, and a password. Leave the port at 21 unless you are instructed otherwise. Refer to Figure 38-13.

At this point, click test to see if you can connect. Make sure that your password and username are correct.

Your root directory should be in the public_html folder.

Then set up your web URL for your index. If your site folder is not on the remote yet, you have to add this later and then alter the root directory and web URL in this dialog box and test again; for example

/public_html/mysitefolder/

http://mysite.com/public_html/mysitefolder/

Further options can be found in the More Options and Advanced tabs, but generally, you don’t need to make adjustments here unless you are working with a testing server. So, you can leave this area at the default settings as with the Advanced Tab. Refer to Figure 38-14.

When done, click Save to save your sever connection settings. You should now be linked to the remote, as seen in Figure 38-12.

Check Advanced Settings…

Before you leave the Site Setup dialog box and click its Save button to exit the site setup, take a moment to check the Advanced Settings tab on the left. Check the subtabs (jQuery, Web Fonts, and Animations Assets) to make sure that your links are pointing to the correct folder. Refer to Figure 38-15.

If you find your site to be running smoothly, or you do not have these items, then you may not need to adjust here; but it’s good to check anyway.

Once done, click Save to ensure that your managed server settings are saved. Then click Done to exit the Manage Site area. You might receive an alert saying that you have made changes, if so click OK to return to your project.

Uploading Site to Remote Server

Once you have finished reviewing your Site Setup, you can upload the site to your server via the Files panel Local and Remote Sites dialog box icon that looks like a rectangle with a diagonal arrow. Make sure the remote server connection is enabled so that it appears plugged in with a yellow check mark and you can see the files on the remote side. Refer to Figure 38-16.

From the menu, choose Site ➤ Synchronize. Refer to Figure 38-17.

From the Synchronize with Remote Server dialog box, choose the entire site for the first upload. In subsequent uploads, you can choose Selected Local Files Only, if you have uploaded before. Refer to Figure 38-18.

Lastly, click the Preview button, as seen in Figure 38-18.

Dreamweaver goes through the files to see what is newer than what is on the server. If it finds files that are newer, it asks if you want to upload them. Refer to Figure 38-20.

In the Preview dialog box, you can choose not to upload by clicking the crossed-out circle button in the lower left to ignore when that file name is selected. Or you can force the upload using the up arrow when the file is name is selected.

Once you have set which files you want to upload, click the OK button. Give it some time if you have a lot of files; the new files will appear in the Remote side.

During this process, Dreamweaver creates a log that includes file activity during the transfer, which you can view and save. It also records all FTP activity so if an error occurs, you can use the log to determine and troubleshoot the issue.

Later, outside Dreamweaver, you can type the URL into your browser to see if the files are online.

Once done, you can click the local and remote button to exit this area and return to the main area of Dreamweaver which includes all the panels. Refer to Figure 38-21.

At this point, you could continue to edit and upload, or close all files and File ➤ Close and File ➤ Exit Dreamweaver CC. You have achieved your goal of working with images and media to build a site.

Summary

In this chapter, you did some basic maintenance on your site before you uploaded it to the remote server. You also looked at how to adjust server settings so that your links to the remote server are correct. Finally, you synchronized and uploaded the site to the remote server. While there may be many more quality assurance tests that you may want to perform, this gives you a basic idea of how site maintenance works.

In the concluding chapter, you look at three final projects created in the Hot Glass Tango site. As you review these projects, take some time to consider how you could apply these ideas to your own projects.