2. Introduction to Dreamweaver
Adobe Dreamweaver is a software application that allows you to create and
develop Web sites. Dreamweaver is considered WYSIWYG (What You See
Is What You Get), meaning that when you format your Web page, you see
the results of the formatting instead of the mark-ups that are used for
formatting. HTML is not WYSIWYG, whereas Microsoft Word is
WYSIWYG. However, Dreamweaver allows you to hand code HTML as well.
Dreamweaver also supports CSS and JavaScript as well as other languages
including ASP and PHP. Dreamweaver makes it easy to upload your entire
Web site to a Web server. You can also preview your site locally.
Dreamweaver also lets you create templates for your Web site that you can
use again and again by modifying certain unrestricted areas within the
template.
Then if you want to change one particular part of your Web site (the logo
changes, a main link changes), you only have to modify the template for
the changes to propagate throughout your Web site. Dreamweaver is fairly
complex software. In this lab we will be getting a basic introduction to this
software package.
3. Using Dreamweaver Dreamweaver is a web
authoring program that uses a WYSIWYG “what you
see is what you get” interface. The HTML code is being
created and is accessible to you if you want to play with
it.
1. Start Dreamweaver. You should see a startup screen.
Dreamweaver lets you publish your Web site by easily
uploading your Web site to a Web server. Right now we
won’t be worrying about that. For now, you will be
creating and viewing your site locally (which means
the site will be located on your computer).
4. Create a New Site
2. From the Site menu, choose HTML under Create New.
Making your first Web Page
3. You should now see a blank Web page in the
Document Window.
4. Under the File Menu (top left of Dreamweaver work
area), choose Save.
5. In the Save As box, find your Web site folder and save
your file as index.html
6. Click Save. Congratulations! You’ve created your first
Web page using Dreamweaver. Unfortunately, it’s
pretty boring at the moment.
5. RULES OF THUMB for naming web files
• Do not use spaces or special characters, such as those
found above the number keys on the keyboard, in your
file names. You can use dashes and underscores. (e.g.,
my_page.html) • Always use a 3- or 4-character file
extension for every file you use on the Web. In the case
of a regular Web page, always use .htm or .html.
• Be very specific about capitalizing because most Web
servers are case-sensitive.
6. Give your Web Page a Title
In the document toolbar, find the Title box.
7. On the document toolbar (across top of Dreamweaver
work area), locate the Title field.
8. Type in a title for your page. Feel free to be creative
(but not indecent).
9. The title doesn’t show up on the page, but will appear
in tabs and across the top of browsers
7. Adding Some Content Add Content to the Page
10. If you’ve got Split selected (right above the work area but below the top
menus), you should have a split screen – the left half will be your html
code and the right half will be a blank document window. You can
always elect to click on the code button to just view code, or the design
button to just see what your design will look like. For now, work on the
right side in the document window. In this right document window,
type in a good head title. This one will be the head title at the top of
your Web page. If you can’t think of anything, you can always use,
“Aardvark Adoption Society of Delaware”.
11. Add a subtitle below it. Again, it can be anything you want. If you’d
prefer, it could be, “We speak for Aardvarks who can’t speak for
themselves.”
12. If you still have split screen, notice how Dreamweaver automatically
puts html tags around the text we’ve typed in. It’s not what we want –
we’ll change that shortly.
13. Now that you’ve got a good title, add some content. Logically, it should
go with the title. Type one or two lines now for now. We’ll add more
later. If you like, I’ve included some content on my web site about
Aardvark adoption that you can use. If you copy and paste the content,
again, notice that Dreamweaver automatically puts html tags around
the text we’ve copied and pasted. We will be changing most of those
tags below.
8. Now let’s format the content
14. In the document window, highlight the header title.
15. In the Property Inspector (usually at the bottom), click on
the Format drop down arrow, and choose Heading 1. Note:
If you do not see the Property Inspector, in the menu across
the top choose Window >> Properties.
16. In the document window, highlight “We speak for
aardvarks…”.
17. From the Format menu on the Property Inspector, choose
Heading 2. Note: When formatting your text, keep in mind
that text sizes in HTML are relative sizes. This means that,
when your page is viewed in a browser, the text size will
depend on the default text size settings on each user’s
computer. Relative sizes give users the ability to adjust the
text size to suit their individual needs. This option is
especially important for people with visual impairments,
but it means that the appearance of your pages may vary
from computer to computer.
9. Playing with Font Properties
18. Highlight the Subtitle (We speak for Aardvarks…).
19. Make sure the CSS is selected in the properties pane Change the
font size to 24. .
20. You’ll get a window telling you to create a New CSS Rule. Under
Selector Type choose Tag (redefines an HTML element)
21. Hit OK (If you still have your code window pane open on the
left, you can see the style added in the head section of your html
code).
22. With “We speak for Aardvarks…” still highlighted, click the
Bold icon ( ) in the Property Inspector. The selected word
appears bold.
23. Click the gray square to the right of the Size popup menu in the
Property Inspector. A grid of colored squares appears, and the
cursor changes to an eye dropper.
24. Click the eyedropper on the desired color. The field to the right
of the color swatch reflects the code Web browsers need to
correctly display the color you’ve chosen. (Note – if the CSS pop-
up box appears again, just select Tag again)
25. Click anywhere on the page to deselect the text. The previously
selected text appears in the new color.
10. Alignment
26. With “We Speak for Aardvarks…” selected on the
page, click on Align Center button on the Property
Inspector. The subtitle (h2) should now be centered on
your page.
27. Select the head title (“Aardvark Adoption Society of
Delaware) and choose Align Center. You’ll get the New
CSS Rule pop-up window. Make sure Tag is selected
(the tag should be h1) and click OK. You should now
have 2 rules in the head section of your html code. Feel
free to play with color and size of h1 as well.
11. Creating Lists
28. First we need to add a list.
29. Type in a title for your list and then type in a list of items. Make sure
there are at least 3 items in your list. Make sure you hit return after each
item. (Feel free to use a list from the aardvark content if you can’t think
of your own. I used the list titled “Specifically, we need…”
30. Highlight the list title and choose Heading 3 from the Format menu
on the Property Inspector (Make sure HTML is selected, not CSS).
31. Highlight the list items and click the Unordered List button on the
Property Inspector.
32. The items appear as a bulleted list.
33. Now type in another List title and another list of items, or use the one
within the content on the web page. (I used the one titled, “Please note
the following rules”).
34. Highlight the title and select Heading 3 (Note: if using copied code,
you may need to put the title on a separate line by hitting the enter
button)
35. Highlight the rest of the items and click the Ordered List button on
the Property inspector (next to the ordered list button). The items
should now appear in a numbered list
36. Save your work. Get into the habit of saving your work regularly
