Dreamweaver Dreamweaver Client Side Web Development

Dreamweaver is a proprietary web development tool developed by Adobe Systems. It supports many web technologies including HTML, CSS, JavaScript, and PHP. Dreamweaver provides syntax highlighting and real-time syntax checking for many web languages. A new feature in CS6 is support for "fluid grid layouts" which is used to automatically adjust the elements on a web page to accommodate the screen size of the viewing device. Adobe maintains a development site called Dreamweaver Developer Center.

Note: This page covers using Dreamweaver on the client side. That is developing HTML, CSS, JavaScript, and jQuery on the local host and synchronizing with the remote host. The Dreamweaver Server Side page covers using Dreamweaver with server technologies such as PHP. I am using CS6 version of Dreamweaver (April 2012).


Configuring Dreamweaver Site Local Site and Remote Server

Configuring a Dreamweaver site involves defining the location of the root web directory on the local machine and defining a corresponding remote web server site. Then Dreamweaver can compare and FTP files between the local and remote sites to keep them synchronized. Dreamweaver also has source code control capability (Subversion SVN) for the web site. Below are the local site and remote server configurations I have set up.

dream2

SiteConf

When setting up and testing the remote website, the following commands are useful:

  1. ping kcshadow.net - Four replies with average of 128 ms.
  2. tracert kcshadow.net - Fifteen hops, 130 ms.
  3. ipconfig (and ipconfig /flushdns) - local and gateway IP addresses. Also flush DNS cache
  4. telnet kcshadow.net 80 - connect to website through telnet.
  5. 192.168.1.1 - Netgear router configurations.

Monitoring Website

For monitoring the website I set up a check in pingdom to ping the website once a minute. Notification of failures can be sent to email or smart phone. Various reports are available in a range from 1 day to 1 year. My "UpTime Report" for today shows 100% uptime with various results depending on ping location: Amsterdam, Netherlands = 78 ms; Paris, France = 140 ms; Montreal, Canada = 527 ms; Philadelphia, PA = 429 ms.


Backing Up Dreamweaver Site Definitions

Dreamweaver creates an .ste file for each site definition. This is an XML file than can be used to restore the site, or create the site on a different computer. The steps for creating a site definition file are:

  1. <Site><Manage Sites>
  2. Select the Site and click on the <Export Currently Selected Site> icon.
  3. Select the type of backup you desire (All or Share) and click <OK>
  4. Enter name and location of backup .ste file. Click <Save>.


Dreamweaver Previews and Browser Views

Dreamweaver provides a design view and a live view of the web page. The layout engine for the live view is not up to date with the latest browsers, so some newer features may not be supported. However Dreamweaver also allows you to preview the page in any browser you have set up. I set up previews for Chrome, Firefox, Internet Explorer, Safari, and Opera.

Dreamweaver also has a "Browser Compatibility" test which can be run on a web page. It allows you to specify the minimum browser version for each browser in the test group.


Dreamweaver Automated Processes

Dreamweaver has many automated processes such as W3C validation and source code formatting. I perform these processes for each web page:

  1. Use the CSS Panel to automatically move any styling in HTML into CSS. See CSS Tip below.
  2. Run the clean up HTML process.
  3. Run the spell checker.
  4. Run through the screen previewers to see web page under various screen sizes and browsers.
  5. Use the validation tool to submit the page to W3C validation service.
  6. Run Browser Compatibility test.
  7. Run Link Check to check for broken or orphaned links.
  8. Apply Source Formatting to automatically format the web page according to specifications.

Note: On the HTML clean up I turned off the option to remove empty tags as some of these are used by JavaScripts.


Working with Cascading Style Sheets

Below is the process to see the cascading of each elements properties. You can also experiment with the properties and immediately see the impact of the change:

  1. Turn on the Live View.
  2. Set the screen for Split View.
  3. Turn on the Inspect.
  4. Click on the desired element in live view.
  5. Go to code half of screen. Click on the element in the code.
  6. Go down to the Properties tab. Click on CSS and then CSS Panel.

You can see how the CSS properties cascade down each rule. You can also modify the property value and immediately see the change in the live view. With the CSS Panel open, you can also click on any element in the live view and put that element into the CSS Panel.

CSS Tip: If you have style tags in HTML you wish to put into CSS, you can right-click on the <inline style> rule and choose: "Convert to Rule". This will automatically remove the style from the HTML and put into CSS. However review the new rule carefully as it will impact the entire website and may change more than just the element you are inspecting.

Performance Tip: CSS can be automatically formatted also <Edit><Preferences><Code Format><CSS>. To improve performance you can reduce the size of your production CSS files by turning off the option to put "Each property on a separate line". The file can be automatically reformatted with the option turned back on for readability.


Working Faster with Dreamweaver Shortcuts and Tips

The keyboard shortcuts for Dreamweaver are defined in <Edit><Keyboard Shortcuts>. Below are a few of the useful default definitions:

Dreamweaver Keyboard Short Cut Keys
Short Cut Keys
Keys Short Cut Description
<Ctrl><Space> Content Assist Context Auto Completion.
<Ctrl><Click> Follow Link Use in Live view. Supports local links only.
<Ctrl><Return> Add Line Break Insert <br> tag.
<Ctrl>B Bold Code Wrap selected code in <strong></strong> tags.
<Ctrl>I Italic Code Wrap selected code in <em></em> tags.
<Ctrl>T Quick Tag Editor Allows selection of tag to wrap around selected contents..


Tips
  1. Use Split Code view to same document in two editor windows.
    • <View>
    • <Split Code>

  2. Collapse sections of code in document.
    • Select the code you wish to collapse.
    • Select the "-" icon to collapse and the "+" icon to restore.

  3. Define macros to execute a series of commands.
    • <Commands>
    • <Start Recording>
    • Enter command you wish in macro.
    • <Play Recorded Command>



Top | Site Definitions | Cascading Style Sheets | Working with Dreamweaver