macromedia dreamweaver 8 tutorial n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Macromedia Dreamweaver 8 Tutorial PowerPoint Presentation
Download Presentation
Macromedia Dreamweaver 8 Tutorial

Loading in 2 Seconds...

play fullscreen
1 / 59

Macromedia Dreamweaver 8 Tutorial - PowerPoint PPT Presentation


  • 239 Views
  • Uploaded on

Macromedia Dreamweaver 8 Tutorial.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Macromedia Dreamweaver 8 Tutorial' - guy


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide2

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.

images

website1

All folders, webpages, and graphic names must be lowercase, no spaces, and no special characters for ease of linking later.

setting up a new website
Setting Up a New Website

Window>Files Checked You Will See The Files Palette on the Right

set the new site definitions
Set the New Site Definitions

1. Name Your Webpage

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

1

2

3

4

click the curser on the page select alignment type in text
Click the Curser on the Page, Select Alignment, Type in Text

Window> Properties

Center Alignment Button

highlight text select ariel font
Highlight Text, Select Ariel Font

Window> Properties

Font Pop-up Menu

highlight text select the title format size
Highlight Text, & Select the Title Format Size

Window> Properties

Pop-up Format for Title Heading Size: Example 2

or to create a title with a graphic insert table or select table icon
Or to Create a Title With a Graphic: Insert>Table or Select Table Icon

Tables control object placement

set row column table width border ok
Set Row, Column, Table Width, Border, OK

Title Example:

1 Row

2 Columns

adjust column widths
Adjust Column Widths

Drag Table Column Line Left or Right to Adjust the Width

before adding graphic images go to file save as name your file
Before Adding Graphic Images go to File>Save As>name your file

Remember to use all lowercase letters, no spaces or special characters

click in the left cell insert image or use the image icon locate gif or jpg file
Click in the Left Cell, Insert>Image, or use the Image Icon, Locate .gif or .jpg File

Window>Insert Menu

To Insert Logo or Graphic in a Header

to make border invisible select table set border to 0
To Make Border Invisible, Select Table, Set Border to 0

Select Edge of Table

Window> Properties Menu

button settings style text font link size apply ok
Button Settings: Style, Text, Font, Link, Size, Apply, OK

Remember when uploading your website to the server to add your .swf Flash buttons you created

repeat to add all buttons
Repeat to Add All Buttons

If you need to edit the button after has been created or to check the links just double click on the button again, change the features, Apply, OK.

example of completed title navigation buttons
Example of Completed Title & Navigation Buttons

You May Have Different Titles For Your Navigation Buttons

external links type text highlight type in link url press return key
External Links: Type Text & Highlight, Type in Link URL & Press Return Key

http://www.google.com

e mail links type text highlight type in link url press return key
E-Mail Links: Type Text & Highlight, Type in Link URL & Press Return Key

mailto:hollandj@emporia.edu

mailto:hollandj@emporia.edu

click in the right cell add your text
Click in the Right Cell & Add Your Text

May Need to Adjust Column Width

Adjust Font to Ariel

file save as provide name location
File>Save As, Provide Name & Location

Example

index.html

or

standards.html

can duplicate pages
Can Duplicate Pages
  • Once the index.html page is set up as desired with the logo, header, and navigation buttons it can serve as a template for creating new pages.
  • Just be sure to save each new page with new name.
notice how the browser opens in front to preview what it will look like when uploaded to the server
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

viewing options split code design
Viewing Options: Split Code & Design

You Can Highlight Areas in Design Mode & See It in Code

file save as provide name location1
File>Save As, Provide Name & Location

Example

index.html

or

standards.html

new folder website1 save webpage files inside of the folder
New Folder: website1 (save webpage files inside of the folder)

website1

website2

website3

website4

website5

Reminder: Lowercase, No Spaces, No Special Characters

example of files in your website1 folder
Example of Files in Your website1 folder

Must Have a Main Page Named index.html

Your page names may be different from this example & will be an exact name match to your navigation buttons

upload all files to idrive web server space
Upload All Files to iDrive Web Server Space

public_html

website1

index.html

goals.html

instructor.html

syllabus.html

grading.html

rules.html

sitemap.html

graphic1.jpg

graphic2.gif

website2

index.html

task.html

process.html

resources.html

evaluation.html

standards.html

conclusion.html

graphic1.jpg

graphic2.gif

file naming conventions example
File Naming Conventions Example

website1

index.html

goals.html

instructor.html

syllabus.html

grading.html

rules.html

sitemap.html

graphic1.jpg

graphic2.gif

All Lowercase Letters

Short Descriptive Names

No Spaces

No Special Characters

Names Exact Match to Navigation Buttons

Correct File Extensions

website1 (Folder Name)

index.html

additional resources
Additional Resources

Dreamweaver Tutorials:

http://www.macromedia.com/

Internet Search:http://www.google.com

Great Resource Book:

“Teach Yourself Visually The Fast and Easy Way to Learn Dreamweaver 8”