Macromedia dreamweaver cs3 tutorial
Download
1 / 58

macromedia dreamweaver - PowerPoint PPT Presentation


  • 544 Views
  • Updated On :
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' - Audrey


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 l.jpg

Create a folder on your computer called website1 to hold all of your web pages. Example of the webpage Link: syllabus.htmlInside of the website1 folder create a folder called images to hold your graphics.Example of the Image Link: images/logo.jpgNotice how the forward slash in the link represents the location of a new folder.

images

website1

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


Launch dreamweaver select html l.jpg
Launch Dreamweaver of your web pages. Example of the webpage Link: syllabus.htmlSelect HTML


New page appears l.jpg
New Page Appears of your web pages. Example of the webpage Link: syllabus.html


Or select file new l.jpg
Or Select File>New of your web pages. Example of the webpage Link: syllabus.html


Select html create l.jpg
Select HTML, Create of your web pages. Example of the webpage Link: syllabus.html


Page size settings l.jpg
Page Size Settings of your web pages. Example of the webpage Link: syllabus.html


Check mark when active l.jpg
Check Mark When Active of your web pages. Example of the webpage Link: syllabus.html

Window>Insert

Window>Properties

Window>Files


Window insert palette l.jpg
Window>Insert Palette of your web pages. Example of the webpage Link: syllabus.html


Window properties palette l.jpg
Window>Properties Palette of your web pages. Example of the webpage Link: syllabus.html


Window files palette l.jpg
Window>Files Palette of your web pages. Example of the webpage Link: syllabus.html


From the files palette link select manage sites l.jpg
From the Files Palette Link: Select Manage Sites of your web pages. Example of the webpage Link: syllabus.html


Select the new site button l.jpg
Select The New Site Button of your web pages. Example of the webpage Link: syllabus.html


Set the new site definitions l.jpg
Set the New Site Definitions of your web pages. Example of the webpage Link: syllabus.html

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

5. OK, Done Buttons

1

2

3

4


The file structure you created l.jpg
The File Structure You Created of your web pages. Example of the webpage Link: syllabus.html


Begin creating the index html main webpage l.jpg
Begin Creating the index.html main webpage of your web pages. Example of the webpage Link: syllabus.html


Modify page properties l.jpg
Modify>Page Properties of your web pages. Example of the webpage Link: syllabus.html


Appearance set font text background color l.jpg
Appearance, Set of your web pages. Example of the webpage Link: syllabus.htmlFont, Text, Background Color


Links set link visited link colors l.jpg
Links, Set Link, Visited Link Colors of your web pages. Example of the webpage Link: syllabus.html


Insert tables to hold content in the desired locations l.jpg
Insert Tables to Hold Content in the Desired Locations of your web pages. Example of the webpage Link: syllabus.html


Insert table set rows columns width border ok l.jpg
Insert>Table: Set Rows, Columns, Width, Border, OK of your web pages. Example of the webpage Link: syllabus.html



Font hierarchy setting example l.jpg
Font Hierarchy Setting Example in text

Title = Heading 1 size, Ariel font, left align, bold style.

Subtitles = Paragraph size, Ariel font, left align, bold style.

Body = Paragraph size, Ariel font, left align, normal style.



Before adding images go to file save as name your page main page is named index html l.jpg
Before Adding Images go to File>Save As & name your page in text (main page is named index.html)

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


Place your logo graphic image inside of the website1 images folder l.jpg
Place your logo graphic image inside of the website1, images folder

  • logo.jpg (Photo type of images)

  • logo.gif (Line art, or transparent areas)


Slide27 l.jpg
Click inside of the top Left Cell, Insert>Image, or use the Image Icon to locate your .jpg or .gif image





For an invisible border select the table edge set border to 0 or match the border fill colors l.jpg
For an Invisible Border, select the table edge, Set Border to 0, or match the border & fill colors


Click inside of the first cell to add a flash navigation button select insert media flash button l.jpg
Click Inside of the First Cell to add a Flash Navigation Button, select Insert>Media>Flash Button


Button settings set style text font link size apply ok l.jpg
Button Settings: Set 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 l.jpg
Repeat to Add All Buttons OK

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.





E mail link type text highlight type in mailto e mailaddress press return key l.jpg
E-mail Link: Type Text & Highlight, Type in name & Press Return Keymailto:e-mailaddressPress Return Key

index.html






Notice the yellow anchor this will not show when posted l.jpg
Notice the Yellow Anchor, TextThis Will Not Show When Posted


File save as provide name location l.jpg
File>Save As, Provide Name & Location Text

Example

index.html for the main webpage

or

standards.html


Can duplicate pages l.jpg
Can Duplicate Pages Text

  • 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 other new pages.

  • Just be sure to save each new page with new name.


File preview in browser select the desired browser l.jpg
File>Preview in Browser> TextSelect the desired browser


Notice how the browser opens in front to preview what it will look like when uploaded to the server l.jpg
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 l.jpg
Optional: File>Preview in Browser>Edit Browser List Will Look Like When Uploaded to the Server


For selecting primary secondary browser choices l.jpg
For Selecting Primary & Secondary Browser Choices Will Look Like When Uploaded to the Server


Viewing options html code l.jpg
Viewing Options: HTML Code Will Look Like When Uploaded to the Server


Viewing options split code design l.jpg
Viewing Options: Will Look Like When Uploaded to the ServerSplit Code & Design

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


Viewing options design for creating editing web pages l.jpg
Viewing Options: Design Will Look Like When Uploaded to the ServerFor Creating & Editing Web Pages


File save as provide name location53 l.jpg
File>Save As, Provide Name & Location Will Look Like When Uploaded to the Server

Example

index.html for the main webpage

or

standards.html


New folder website1 save web pages inside of the folder l.jpg
New Folder: website1 (save web pages inside of the folder) Will Look Like When Uploaded to the Server

website1

website2

website3

website4

website5

Reminder: Lowercase, No Spaces, No Special Characters


Example of files in your website1 folder l.jpg
Example of Files in Your Will Look Like When Uploaded to the Serverwebsite1 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 your server space such as idrive web esu l.jpg
Upload Will Look Like When Uploaded to the ServerAll Files to your Server Space such as iDrive Web (ESU)

public_html

website1

index.html

goals.html

instructor.html

syllabus.html

grading.html

rules.html

sitemap.html

website2

index.html

task.html

process.html

resources.html

evaluation.html

standards.html

conclusion.html

images

images

logo.jpg

button.swf

logo.jpg

button.swf


File naming conventions example l.jpg
File Naming Conventions Example Will Look Like When Uploaded to the Server

website1

index.html

goals.html

instructor.html

syllabus.html

grading.html

rules.html

sitemap.html

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 (main page)

images

logo.jpg

button.swf


Additional resources l.jpg
Additional Resources Will Look Like When Uploaded to the Server

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”


ad