Dreamweaver Reference

Dreamweaver's Windows

Files

Once you've defined your site, the Files window allows you to interact with files and folders in your site. It is usually on the far right hand side of your screen. To show or hide the Files window, go to the Window menu and choose Files.

Double clicking a file will open it in the editor. You can upload (put) or download (get) files by highlighting them and clicking the up or down arrow (respectively).


Local View or Remote View?

Local view shows the files you've downloaded to your computer. Remote view shows the files on the server. Edits should always be made to a local copy of your files then uploaded to the server. You should always keep your Files menu set to Local View.

Screenshot: Switching to local view


URLs and Files

File names and URLs are directly related. If you wanted to edit a page on your site, you can figure out which file it is by looking at the URL. For example, if the page was http://faculty.wcas.northwestern.edu/~NETID/research/publications.html you would look in the "research" folder for a file called "publications.html." Conversely what you save a file as and what folder you save it in determines the URL.

One notable exception is URLs that end in a slash. In this case, the "index" files is used, usually index.html or index.htm. When publishing your URL, you can omit the index.html component and just end the URL with a slash.


Properties

The Properties window allows you to modify properties of text, images, and other objects in your web page. It is usually found on the bottom of your screen. To show or hide the properties window, go to the Window menu and choose Properties.

The properties window is where you will find formatting options when editing text (bold, italic, alignment, lists, etc). More advanced formatting options are available by clicking the triangle in the lower right-hand corner.

Screenshot: properties window


Editor

The editor is where you will enter content in to your pages. It is usually in the center of your screen but is only available when you are editing a page. To open pages, double click them in the Files window or use the File menu and choose Open....

There are three views for editing your files, found in the top right of the editor window:

  1. Design View lets you edit page in a what-you-see-is-what-you-get (WYSIWYG) environment similar to Microsoft Word.
  2. Code View lets you edit HTML code directly.
  3. Split View combines both views, showing the HTML code on the top half of the window and the WYSIWYG editor on the bottom half.

Screenshot: Dreamweaver editor


Links

To link to pages in your web site:

  1. Highlight the text you want to turn in to a link
  2. In the Properties window, click the folder icon next to the link field (pictured below)
    • If you're linking to a page outside your site, you can simply type the URL in the link field
  3. Find and highlight the page you want to link to. Click Choose

Adding a link in the Properties window


Linking to PDFs, Word Documents, etc

To link to files created outside of Dreamweaver (such as a CV created in Word) you need to add the file to your site first:

  1. Before you begin make sure your file name doesn't have any foriegn characters (é, ñ, etc)
  2. When you initially create your site you will choose a location on your computer to keep site files. Drag and drop or save files you want to add to your site to this location.
  3. Upload the document by highlighting it and clicking the blue up arrow (Put/(blue up arrow))
  4. Once you have done that follow the above steps to create the link.

In order to open files created in programs such as Word, people viewing those files have to have that application installed on their computer. It's common to convert these files to PDFs first since Adobe's PDF reader is free and installed on almost all computers. It's often safe to assume users have Word/Excel/PowerPoint installed, but take your audience into consideration when making this decision.


Images

Images, just like PDFs and Word documents, need to be added to your site before you can insert them in your pages (see the previous section). Before adding an image to your site you should resize it in an image-editing application such as Photoshop. In particular, photos taken directly from digital cameras are very large. If you would like to include the full image, you could potentially choose to include a URL to the larger-size version. (SeeLinks, above)

Once added to your site, go to the Insert menu and choose Image.


Headings

Using headings to break up large pages (such as this one) is encouraged. To make text a heading highlight it and set the format in the Properties window to the desired heading level.

Your choice of heading level should follow your document logical structure rather than a desired style. You should only have one "Heading 1" on your page, usually the page title, and major sections should be set to "Heading 2."

Using this page as an example:

  1. "Reference For Dreamweaver" is the only level 1 heading
  2. "Dreamweaver's Windows," "Links," "Images," etc are level 2 headings
  3. "Files," "Properties," and "Editor" (all under "Dreamweaver's Windows") are level 3
  4. "Local View or Remote View?" and "URLs and Files" under "Files" are level 4

Single and Double Spacing

Hitting return or enter in Dreamweaver inserts a double space. To insert a single space, hold shift and hit enter/return.

Top

Adobe Contribute Tips

#1: To create a line break without a line space, hold the shift key as you tap the "Enter" key.

Contribute indent button

#2: Need to indent a single line, or one or more paragraphs, of text? Use the indent button (see image) NOT the space bar. Why? Because using the spacebar will result in a string of non-breaking spaces that could size differently on different browsers, resulting in a ragged left margin, or create awkward and unnatural sentence wrapping.

Detailed information about using Contribute is also available on this site.

From Weinberg's Twitter Feed

July 12, 2010