1. Getting Started
First Steps to Using Dreamweaver
1

2. Open Dreamweaver
Open Dreamweaver and then click the HTML option under the Create New colum
2
3. Set up the Stage
New documents often open in Design view by default
Locate the toolbar in the upper left-hand corner of the Dreamweaver production stage and click Split
The Split view allows you to see your coding and the results of your coding at the same time
3
4. Add a Title
Now, give your document a title
Next, save your document. I called my document testDoc.htm
4
5. Preview Your Coding
Notice that the HTML coding I added on the Code side of the screen rendered as text without coding on the Design side of the screen?
Design Screen
Code Screen
5
6. Next Steps
Your next steps are to figure out what additional pages and content you want to add to your site
Consider adding images, a navigation menu, and perhaps an embedded video
6
7. Adding an Image
Next, I am going to add an image to my very basic website
The best option is to add a two-row, one-column table
First, click Insert then click table (image 1)
Now, configure the table parameters as shown in image 2
Click OK
1.
2.
7
8. Inserting the Image
Now, click Insert on the tool bar again but this time click Image
Navigate to an image you want to upload
Click OK
1.
2.
8
9. Inserting the Image
Next, add an Alternate Text name. This is important for when you actually launch your site in the future.
Notice how Dreamweaver adds coding for you?
1.
2.
9
10. Inserting Videos
There are multiple ways to add video to your web pages
Lets keep it simple and use a YouTube video
From the YouTube video page, click Share then Embed
Next, highlight the entire Embed Code and copy it to your computers clipboard
10
11. Embedding the Video
Now, open the HTML document for your video page
Add the

tags
Add the code style= tag to the first

tag. Make sure the code looks exactly how you see it in the image
Finally, paste the code that you copied from YouTube
Save the HTML document
11
12. Embedded Video
Once the code from YouTube is in place, your Dreamweaver authoring canvas should look like the image below
12
13. Add the Menu
Now we need to add a navigation menu to out pages
Open the testDoc.htm document again
From the tool bar, click File and Save As
Name the file index.htm
13
14. Create the Menu
The new index.htm file will become the websites Home Page. The web standard is to name the HTML document for a Home Page as index.htm
Now, add a title to the document called Home Page
Add titles to the remaining two pages using the tag
14
15. Create the Menu
Now, we need to build the menu body
Create a table again but insert it above the page title (HINT: Use the image to help you with the coding)
15
16. Create the Menu
Add the titles for each of your web pages
Make sure to center the text by adding the text-align:center tag
Now we need to add the URLs to the new navigation bar
16
17. Activating the Menu
Add the tags to each of the navigation link titles
Notice how the titles now change to blue with an underline?
17
18. Paste the Menu
Finally, copy the nav menu table
Paste in onto the remaining two HTML pages
Make sure to paste it after the opening tag and before the page title Title
Save all of the HTML pages
18
19. Conclusion
You now have the beginnings to a basic website!
Add more images and videos to enliven your website
Consider purchasing a URL and webhosting plan to launch your site
Explore CSS coding to make your site robust
19
20. Resources
HTML documents and Images from this tutorial:
Download
eLearning Website with more tutorials:
http://www.elearning-pathways.com
Twitter account to receive the most current tutorials:
http://twitter.com/trainingguy
eLearning blog with Blackboard version 9.1 LMS tutorials:
http://www.elearning-pathways.com/blog
20