An Introduction to Dreamweaver
Discover how quickly HTML comes to life with Dreamweaver!
Sources for Images ~ Color Basics & Color Matchers ~ Sources for CSS Templates
More Info About Dreamweaver ~ XHTML Basics
Design It Hints & Tips!
- Create your site first. . .
- Create the folders and files for your site. . .
- Insert your images into folders. . .
- Then you are ready to start coding!
Always name your home page index.html so it will automatically come up when the address of a domain or directory is typed into the browser. (Note: some servers will request that you use default.htm)
Paragraphs are created automatically as you press ENTER.
Don't use line breaks inside paragraphs. The browser knows when to break the line and continue on to the next!
Alignment (Left, Center, and Right) in done via CSS. Avoid focusing crucial information on the right of the page. If the users browser window is too small, they may miss this information. The upper left of the web page is the focal point of the eye.
Lists - Type each list item. Dreamweaver will type each as its own paragraph. Highlight all the items in the list and click the bulleted list or numbered list icon in the Properties Inspector.
Stop that Code! Headings, strong (bold), emphasis (italics) and lists - Drag your mouse to select the section you want to change click the button that turned it on - which will now turn it off.
CSS: Font Options
- Use the most common fonts faces for your text and include several. Always include a font for the PC and for the Mac.
- Check out the font size - PC and Mac vary. Mac users - check out the view in a PC before increasing size.
Watch for overlapping tags that conflict - "nest" your tags!
example of bad coding: <em><strong>text goes here</em></strong>
- The delete and backspace buttons appear to have no effect.
- Highlight the problem area in design view and then click on the code view to delete the "space related" HTML tags.
- "space related" HTML tags that add extra space:
- <br /> (single line break)
- <p> </p> OR <h1></h1> (create blank lines)
-
If you highlight an area in the design view of Dreamweaver, and then click on code view, you will see the same area highlighted. The reverse of this is also true: highlight/select an item in the HTML view, click on design view and you see the same area highlighted.
Whenever you preview a page in Dreamweaver, it creates a temporary HTML file. You can delete these files or leave them. You will want to delete them after you complete the website to the files don't upload to the server. They are not linked to anything but will take up memory.
Links
Email Links ~ Absolute Links ~ Relative Links ~ Internal Links
Links are what the web is made of. It doesn't matter what you call the text that appears on the page that is associated with a link – as long as you connect the text to a valid URL.
Why? The browser isn't reading your wording – it is looking for the URL or path you have asked it to find.
- Hi-lite the text that will appear as the email link in the browser
- Insert > email link
or
Insert Bar > email icon
or
Properties Inspector > link field, type in (mailto:president@whitehouse.gov)
- Hi-lite the text that will appear as the link in the browser (don't hi-lite spaces)
- Properties inspector > link field, type in the URL
- Hi-lite the text that will appear as the link in the browser (don't hi-lite spaces)
- Properties inspector > link field yellow folder > locate the file name of the page that will be "linked to" and double-click it
- Place the cursor in front a heading that will be linked to from the navigation menu.
- Place the cursor in front of the line "back to the top".
- Insert > invisible tags > named anchor >
or
Insert Bar > characters > anchor icon > - popup box > give the anchor a descriptive name (no spaces, case-sensitive) and click OK. An anchor "marker" should appear.
- Highlight the matching menu item or top of page link location.
- Properties inspector > click the circle following the link field (point-to-file icon) > drag the arrow to the anchor marker
or
Properties inspector > link field > #anchorname
Templates
If you have a 10-page site that has the very same logo, image, and navigation list of links on every page in the very same location - a template will save you time in updating and editing these sections of your page.
If you page may vary some from page to page, you may need to decide how useful a template will be. Templates are very structured and do not offer page-to-page flexibility for "locked" regions.
You can create a template from an existing or new web page. It is easier to create a template from a new page and build the site from this template but obviously, most templates are created from an already existing page mockup.
When you create the template, you create "locked regions" (sections of the page which are locked out from any changes on other pages) and "editable regions" (sections of the page which can be added to or changed from one page to the next).
Only on the template can you make changes to "locked regions". Once you have modified a "locked region", the non-editable sections of every page using the template will change instantly.
To utilize templates effectively, have the look and feel of your site created on paper or created as a mockup. Create and edit the page prior to locking the look into a template. This will save you editing time and effort later.
Dreamweaver saves templates with the extension .dwt, in a folder entitled TEMPLATES. Dreamweaver will create this folder when you save the file.
TIP: Do not move templates outside of the templates folder or put non-template files in this folder. Do not move this folder from the location Dreamweaver puts in it.