ION Presentation

Getting Started

Creating a new Folder on our disk or the desktop

Create a Folder on your floppy disk (if you want you can do this on your desktop)

right click the disk drive (or your desktop) and choose New > Folder to create a new folder
right click the new folder and choose Rename from the shortcut menu
name the new folder (Your Name) Site

Opening Dreamweaver

Defining a new Site

choose Start > Programs > Macromedia > Macromedia Dreamweaver MX

If this is the first time using Dreamweaver you will get a screen that allows you to pick the way your workspace appears, select Dreamweaver MX Workspace > click OK > next screen select Design

choose Site > New Site (the Site Definition dialog box will open)
select the Basic tab
type (Your Name) First Site in the Site Name area
click Next
select No, I do not want to use a server technology
click Next
click the Folder Icon (to the right of Where on your computer do you want to store your files?)
navigate to the folder you created earlier to open it
select the folder and click Select
make sure the Edit local copies on my machine, then upload to server when ready is selected
click Next
select None from the drop-down list (under How do you connect to your remote server)
click Next
click Done

First Steps!

Create an Index Page

There should be a page already open, click in the window to activate it

choose File > Save
name this page index.htm
be sure you are saving it to the site folder, and then click save

Create a New Page

choose File > New (the New Document dialog box will open)
select the General Tab
select Basic Page from the Category list
choose HTML from the Basic Page list
click Create
save this new page as syllabus.htm

Create 3 more new pages using the steps above

save and name the first one instructor.htm
save and name the second one links.htm
save and name the third one calendar.htm

Working with Content

Adding Content to a Page

select the index.htm page
click on the page and type Welcome to My Home Page, press return
type Use the text links below to navigate, press return
type Course Syllabus | Meet the Instructor | Course Resources | Course Calendar

* The | symbol above is called a pipe, you can type this character by pressing (Shift) and (\) on your keyboard

choose File > Save (or use the CTRL key and the S key together to save)

Changing the Title of the page

select the words Untitled Document in the Title area (found in the toolbar area at the top of the text window)
replace the highlighted words with My Index Page
repeat these steps to assign a new name for each of the pages you have created
be sure to save each page after you are finished

Modifying the Page and Text

Modifying the Page Properties

choose Modify > Page Properties
next to the word Background click and hold the little color chip to open the color palette
select any color you like by clicking on the color
click and hold the chip next to the word Text
select an appropriate color for the background you selected
click OK
be sure to Save your work

Formatting Text on a Web Page

if the Properties Pane (located below your text window) isn't open, then click on Window > Properties to open it
click anywhere in your Welcome text line
on the Properties pane, select Heading 1 from the Format area
click anywhere in the next line of text
select Heading 2 from the Format area
click anywhere in the bottom line of text
select Heading 4 from the Format area
be sure to save your work

Repeat the above steps on each of the pages created earlier

add your own text to each page, then format
on the resource page add some of your favorite links (i.e. Google.com)
be sure to save all pages and then close each leaving the index.htm page open

Other

Centering the all the text

choose Edit > Select All
click Align Center tool from the Properties pane (located below your text window)

Spell Check each page

select Text > Check Spelling

Web Page Preview - F12

Navigation

Linking Web pages together

highlight Course Syllabus (Course Syllabus | Meet the Instructor | Course Resources | Course Calendar) from the navigational area you created
on the Properties pane click the folder icon next to the word Target (the folder is to the left of the word)
from your site folder select the instructor.htm file
be sure that Document is selected in the Relative To area (bottom of the Select File Dialog box)
click OK

Repeat the above steps and link the rest of the navigational text to its appropriate files and be sure to save your work!

Optional: On each of the pages you open there is no need for the name of the page to be part of the navigational bar, so replace it with Home and link it to your index.htm page. (i.e. On the Course Syllabus page this navigational link could be changed to Home and linked to index.htm)

Changing the color of your links

To change the color of your links
choose Modify > Page Properties
click the box next to Links and select a color that you think looks okay with your color scheme
click OK
you can also change the Visited Link the same way as you did for Link
choose Modify > Page Properties
click the box next to Visited Links and select a color that's different than the color your selected for Links
click OK
save your work

Linking Web Pages to Web Sites

on the Course Resources page (you created this earlier, you may need to open it from the site window to the right of your screen)
highlight one of the links you typed earlier (i.e. Google.com)
in the Properties pane area labeled Link type in the URL for the link (http://www.google.com)
save your work

Adding an Email Link

click so your insertion point is at the bottom of your index.htm page
choose Insert > Email Link
type Send Me Email into the text area of the Email Link dialog box
type your email address into the email area of the dialog box
click OK
save your work

Tables and Images

Adding a Table to a page

choose Insert > Table
on the Insert Table dialog box decide how many rows and columns you want
click OK

Inserting an Image

be sure that your page is saved
using the table created above, click to select where you want to insert your image
choose Insert > Image (Use images from this page to get started, you will have to right click on them and then select Save Picture As from the popup menu)
browse for the desired image (this will be where you have saved them for use in building this website, for this tutorial use the link provided above)
select the image, click OK, OK, YES, SAVE to the next boxes that come up
this will insert the Image into your page and import it into your site