Adobe Dreamweaver and doctypes

Dreamweaver is an editor for web pages that offers many conveniences over a straight text editor.

Find it under "Start | Adobe ....".

Readings

See also:

DOCTYPES and similar details to forget for the rest of the course

There are a number of niggling details about the overall syntax of web pages that have been swept under the rug so far. It turns out that Dreamweaver makes it a bit easier to not think about these, and it's also good to set this sort of thing up when we're starting to work with Dreamweaver in it's preferences. Once these are set, Dreamweaver will create new documents with these settings and we shouldn't need to think about this sort of thing again.

DOCTYPES

Really, the correct syntax for a web page includes not only <html>, <head>, and <body> sections, but also a Document Type Declaration (DTD) at the beginning:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
  <html>
  <head>
  ...

You can set this in Dreamweaver: "Preferences | New Documents | Default Document Type"

default DTD
Browsers are very forgiving, and most of the time you won't notice the effects of having a DOCTYPE or not. But there are two situations where it will matter:

Choose HTML 4.01 strict as your usual DOCTYPE. (XHTML 1.0 strict is certainly OK, but a bit tougher to trouble-shoot).

Choosing a character encoding

Text editors are very consistent about how they handle the digits 0-9 and the letters a-z we routinely use in English.

However there are several inconsistent ways of saving the characters used in non-English languages like, unmöglich or ¡Mama Mía! or sin(βt) or とり. The way you save such characters is called a "character encoding".

Setting the character encoding

You can find out the special HTML entity codes for each such character, but for daily use, it's easier to set up your computer with the keyboard from the other language and type the characters in directly.

Then, you need to know what convention you're using to save your text files, and then communicate that information to the web-browser with the appropriate tag.

The tag needed (using the Unicode UTF-8 convention) is:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

and goes in your <head>...</head> section. Set yourself up for New Documents according to the screen above, and you won't ever have to worry again.

Line breaks

There is also variation in how computers save the line breaks in "text files". PCs, Apples, and Unix computers each have a different convention. I've found it simplest to have Dreamweaver use Unix convention (the GC webserver is a Unix computer):

setting the linebreak convention

 

 

Windows

Now that those setting are out of the way, open up a new document, and type a bit of text somewhere. You'll probably be typing in the Design window.

 

The Document window shows the page you are working on in different ways.

In the upper left you of the Document window you may select one of three different 'Views' of the document: The Code View shows the page source. The Design View shows Dreamweaver's rendering of the page (which may vary from your browsers'). The Split View (shown below) shows both. . .

At the bottom of the Document Window you will see the path in the document "tree"to your current tag. Clicking on the various tags will select the entire scope of that tag, may change the property inspector, or let you edit things about just that tag in the hierarchy:
tree view

The Property Inspector shows different options for the object selected. That window changes, depending on what is selected.


Miscellaneous things to know:

Images and links: Tell DW where your web page is

Dreamweaver will usually try to make relative links to images or other pages that you link to. But this is only possible if it knows where your page is in relation to these other resources. It is very important to save your document before make any links or inserting images.
If you don't save your page first, DW will start to make links to locations like "File:///W:/yourwebpage.html", and this is terribly hard to catch because such links will work for you but no one else! Why?

Validation

validation screenDreamweaver has a bright green triangle that lets you validate your document from within DW.

Learning to Learn--Sources of Assistance in Dreamweaver


Inserting an image

Pick "Insert | Image" and you can browse to find an image you want to put on your page. You'll have to save your page first if you want to browse for (and create relative links to) images in the same folder as the page.
[note of caution: If you are working on a pre-existing page on, for example, your M: drive, don't transfer the page to the webserver by doing a "Save As" to W: Dreamweaver will "helpfully" change all your links and image tags so that they're still pointing to files on M:. Instead, get out of Dreamweaver and copy things with e.g. Windows Explorer]
Once an image has been inserted, and selected, the properties window changes to something like:

...allowing you to fill in ALT text, image alignment, and other attributes of the IMG tag. Notice that width and height are filled in for you, and you get an indication of the size of your image file ("10 K" in the example above).