Getting started with dreamweaver
Upcoming SlideShare
Loading in...5
×
 

Getting started with dreamweaver

on

  • 1,522 views

This tutorial will show you how to build a 3 page website using Dreamweaver CS5. The tutorial shows you how to add a navigation menu, image, and YouTube video to your site. The presentation also ...

This tutorial will show you how to build a 3 page website using Dreamweaver CS5. The tutorial shows you how to add a navigation menu, image, and YouTube video to your site. The presentation also contains links to virus-free HTML files that you can use to help you create your own site.

Statistics

Views

Total Views
1,522
Views on SlideShare
1,522
Embed Views
0

Actions

Likes
1
Downloads
39
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Getting started with dreamweaver Getting started with dreamweaver Presentation Transcript

  • Getting Started
    First Steps to Using Dreamweaver
    1
  • Open Dreamweaver
    Open Dreamweaver and then click the “HTML” option under the “Create New” colum
    2
  • 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
  • Add a Title
    Now, give your document a title
    Next, save your document. I called my document testDoc.htm
    4
  • 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
  • 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
  • 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
  • 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
  • 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
  • Inserting Videos
    There are multiple ways to add video to your web pages
    Let’s 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 computer’s clipboard
    10
  • Embedding the Video
    Now, open the HTML document for your video page
    Add the <div></div> tags
    Add the code style=“” tag to the first <div> tag. Make sure the code looks exactly how you see it in the image
    Finally, paste the <iframe> code that you copied from YouTube
    Save the HTML document
    11
  • Embedded Video
    Once the <iframe></iframe> code from YouTube is in place, your Dreamweaver authoring canvas should look like the image below
    12
  • 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
  • Create the Menu
    The new index.htm file will become the website’s 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 <h3></h3> tag
    14
  • 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
  • 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
  • Activating the Menu
    Add the <a href=“”></a> tags to each of the navigation link titles
    Notice how the titles now change to blue with an underline?
    17
  • 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 <body> tag and before the page title <h3>Title</h3>
    Save all of the HTML pages
    18
  • 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
  • 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