Macromedia DreamweaverCS4 Tutorial
Example of the website1 folder & images folder inside
Create a folder on your computer called website1 to hold all of your web pages.
Inside of the website1 folder create a folder called images to hold your graphics.
All folders, web pages, and graphic names must be lowercase, no spaces, and no special characters for ease of linking later.
Launch DreamweaverSelect HTML
Or, File>New to open a new page
Select Blank Page, HTML, Create
Window>Insert, Properties, Files, Workspace Layout>Classic
Tool Locations
Window>Insert
Window>Files
Window>Properties
Sites>Manage Sites
Select The New Site Button
Set the New Site Definitions
1. Site name: website1
2. Click on the Folder Icon & Locate the website1 folder
3. Click on the Folder Icon & Locate the images folder inside of the website1 folder
4. Add HTTP URL Address: http://studentaccess.emporia.edu/~yourlastname/website1/index.html
5. OK, Done Buttons
12
3
4
website1 selected & Done
Window>Files Site Structure
Begin Creating the index.html main webpage
Modify>Page Properties
Page Properties, Appearance (CSS), Font, Text, Background
Color, OK
Page Properties, Appearance (HTML), Background, Text, OK
Insert>Tables or Table Icon to Hold Contents in the Desired Locations
Table Header Settings, Rows, Columns, Width, Border 0, OK
Header Table Example
Click the cursor in the third cell and type in your page title, highlight it, and in the Window>Property set the desired Heading size.
Insert>Table, Horizontal Navigation Table Settings
Click the cursor after the first table cell before adding the horizontal navigation table.
Insert>Table, Vertical Navigation if desired & Body Contents
Click the cursor after the second table cell before adding the body contents table.
Insert>Table, to add a nested table to hold Vertical Navigation if desired
Click the cursor inside of the left contents cell to add vertical navigation cells if desired.
Modify>Page Properties, Headings (CSS), Heading Font Selected, OK
Font Hierarchy Setting Example
Title = Heading 1 size, Tahoma, left align, bold style.
Subtitles = Paragraph size, Ariel font, left align, bold style.
Body = Paragraph size, Ariel font, left align, normal style.
Window>Properties, Vertical Alignment: Top
Click the cursor in front of the text to move up, repeat for the photo
Drag Adjust Column Widths
Window>Properties, Column Split/Merge Icons
Drag cursor over the desired cells to select
File>Save As, index.html, Where: website1, Save
Place the logo and other graphic images inside of the website1
folder, inside of the images folder
• logo.jpg (Photo type of images)
• logo.gif (Line art, or transparent areas)
Click inside of the top left cell, Insert>Image, or use the Image
Icon to locate your .jpg or .gif image
Navigate to the website1 folder, select the images folder,
& Choose button
Provide an Alternate Text name for viewers using auditory readers, OK
Logo Graphic is added, type in the site title and adjust cells
Select the vertical nested navigation table and set Window>Properties to
Align to Center
Add the page image like the logo, & begin adding your text
Highlight subtitle, Window>Properties, Bold Icon
Select the header cells, Window>Properties set Bg
Background Color
The logo image had a transparent background and was saved as a .gif file format.
I used the Eyedropper Tool to select colors in the graphic image.
Select navigation bar cells, Window>Properties, Bg Color
Select the header table, Window Properties, CellPad 0, Cellspace 0
Setting the border to 0 makes in invisible. Setting the cellpad and cellspace to 0 removes the color border.
Internal Links: Highlight Text, Type in Window>Properties link name &
press Return Key to activate
Homepage link is named index.html
External Links: Highlight Text, Window>Properties Type the full
URL website address, Press Return
http://www.atomiclearing.com
E-mail Link: Highlight Text, Window>Properties, Type in
mailto:e-mailaddress & Return Key
mailto:[email protected]
To Replace Navigation Links with Buttons
Button Generator Websites http://www.buttongenerator.com/http://www.aaa-buttons.comhttp://www.freebuttons.com/
Download the button image and place it inside of your website1 folder inside of the images folder. Then, link the button image to your page. Next, select the image and add a link from it to the desired page. Next, upload the webpage and your image to the server and test to be sure it is working correctly.
Button Generator Tutorialhttp://www.buttongenerator.com/1. Scroll down and select the “Only Free Buttons” from the pop up menu2. Select the desired button design or the “Edit Button” text link3. Scroll down and type in your desired Text Label4. Select the Text, Font, Size, & Alignment etc.5. Scroll down to the bottom of the page to select the “Click Here To Generate Your Button”6. To save your button: PC users, right click on the button and choose 'Save Image As' or “Download Image to Disk” or similar menu item. Mac users Control click on the button and select Download Image to Disk.7. Navigate to your website1 folder to save the button.
Insert Button on the Webpage1. Go to Insert>Image and click on the Browse button to locate the new button you have created inside of your website1 folder inside of the images folder.2. Example of Window>Properties Link: images/buttonintro.png3. Add the name of your Alternative Text in the box provided and select the OK button.4. Now that you have returned to your webpage select your new button with the curser and go to the top menu to select Insert>Link and type in the internal link; such as index.html or syllabus.html where you want the user to go when clicking on the link.5. Be sure to provide credit at the bottom of your web page to ButtonGenerator.com6. Next, go to the top menu and select File>Save As and save your web page again.7. To test go to File>Browse Page, and click the button.
Optional: Anchors Are Used to Jump Down on a Long Page of Text
Highlight Word, In the Link Box Type in #name
#august
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, website1 folder
Can Duplicate Pages
• Once the index.html page is set up as desired with the logo, header, and navigation it can serve as a template for creating other new pages.
• Just be sure to save each new page with new name.
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
When Finished Viewing Browser Red Button Close
Optional: File>Preview in Browser>Edit Browser List
For Selecting Primary & Secondary Browser Choices
Viewing Options: HTML Code
Viewing Options: Split Code & Design
You Can Highlight Areas in Design Mode & See It in Code
Viewing Options: DesignFor Creating & Editing Web Pages
File>Save As, website1 folder
Example
index.html for the main webpage
or
instructor.html
etc.
Upload All Files to your ESU Server Space called iDrive/MyFiles
FTP File Transfer Protocal Software:
CoreLite (PC)http://www.coreftp.com/download.html
FETCH (Mac)http://fetchsoftworks.com/
Username & Password same as BuzzIn
Folder Structure on the iDrive/MyFiles ESU Server
website1 (folder)
index.html
instructor.html
syllabus.html
grading.html
rules.html
public_html (folder)
images (folder)logo.gifglobe.jpgbuttonhome.swf
Website Uniform Resource Locator (URL) Address
Type your URL address in a new Internet browser window to view your site and test it to be sure all links and images are working correctly.
http://studentaccess.emporia.edu/~yourusername/website1/index.html
Additional Resources
Adobe Dreamweaver Tutorials:http://www.adobe.com
Internet Search: http://www.google.com
Great Resource Book:“Teach Yourself Visually The Fast and Easy
Way to Learn Dreamweaver”