Macromedia Dreamweaver 8 Tutorial
Create a folder on your computer called website1 to hold all web pages and graphics. (example of what your link will look like when you set it up later: map.jpg) Optional: inside of the website1 folder create a folder called images to hold your graphics. (example of what your link will look like when you set it up later: images/map.jpg) Notice how the forward slash in the link represents the location of a file in a new folder.
Launch Dreamweaver Select HTML
New Page Appears
Or Select File>New
Select HTML, Create
Window>Insert, Properties, Files Have a Check Mark When Active
Setting Up a New Website
From the Pop Up Files Palette Window: Select Manage Sites
Select The New Button>Site
Set the New Site Definitions
The File Structure You Created
Begin Creating the index.html main webpage
Modify>Page Properties
Appearance, Set Font, Text, Background Color
Links, Set Link, Visited Link Colors
Click the Curser on the Page, Select Alignment, Type in Text
Highlight Text, Select Ariel Font
Highlight Text, & Select the Title Format Size
Or to Create a Title With a Graphic: Insert>Table or Select Table Icon
Set Row, Column, Table Width, Border, OK
Adjust Column Widths
Before Adding Graphic Images go to File>Save As>name your file
Click in the Left Cell, Insert>Image, or use the Image Icon, Locate .gif or .jpg File
Click in the Right Cell & Type to Add the Title
Select the Table, Select BG to Add a Background Cell Color
To Make Border Invisible, Select Table, Set Border to 0
To Add Navigation Table, Insert>Table or Table Icon
Click Inside of the First Cell to Add a Flash Navigation Button
Insert>Media>Flash Button
Button Settings: Style, Text, Font, Link, Size, Apply, OK
Repeat to Add All Buttons
Example of Completed Title & Navigation Buttons
External Links: Type Text & Highlight, Type in Link URL & Press Return Key
Internal Links: Type Text & Highlight, Type in Link URL & Press Return Key
E-Mail Links: Type Text & Highlight, Type in Link URL & Press Return Key
To Add a Graphic, Add a Table, & Adjust the Column Width
Click in the Left Cell, Select Insert>Image or Image Icon
Click in the Right Cell & Add Your Text
Anchors Are Used to Jump Down on a Long Page of Text
Highlight Word, In the Link Box Type in #name
Highlight Text to Link To, Insert>Named Anchor
Type in Exact Name Match, Example: august, OK
Notice the Yellow Anchor, This Will Not Show When Posted
File>Save As, Provide Name & Location
Can Duplicate Pages
File>Preview in Browser> Select the desired browser
Notice How the Browser Opens in Front To Preview What it Will Look Like When Uploaded to the Server
Optional: File>Preview in Browser>Edit Browser List
For Selecting Primary & Secondary Browser Choices
Viewing Options: HTML Code
Viewing Options: Split Code & Design
Viewing Options: Design For Creating & Editing Web Pages
Slide 54
New Folder: website1 (save webpage files inside of the folder)
Example of Files in Your website1 folder
Upload All Files to iDrive Web Server Space
File Naming Conventions Example
Additional Resources