Mr. Skocko | Digital Arts | 3D | Web Design | Tech Fun | Tutorials | Standards | Valhalla Home  
     
   
     
 

These tutorials will guide you through the necessary steps to build a Website using Dreamweaver MX 2004 and upload it onto the Internet via your eBackpack. If you have no experience with the program, good! These tutorials are designed with you in mind.

Note: Your monitor must be set to a resolution of at least 1024 x 768 in order to view the entire movie. Maximize your browser window if necessary. This is a work in progress so check back for updates.

 

Newbie Links: Login to eBackpack (the First Time) Note: Use your own Username and Password and Set a Secret Question and Answer!
  I forgot my password This is why the Secret Question is important!
  Uploading Your Files to eBackpack The hard, tedious way (you can't upload whole folders via the browser)
  Using Universal Locker Connect To mount eBackpack on your desktop and upload folders and files by dragging and dropping. Sorry, this is a Mac-only feature.
   
  Updating Your Site

 

Getting Started  

How to set up your site using a few tables and a Cascading Style Sheet (CSS)

Overriding the htm Default
(I've already done this for the computers in the Mac Lab)

Panels You Need And you better not ever close them!

Manage Your Site Let Dreamweaver know where your files are

Preview Existing Index Page in Browser Just to see what it looks like (Note: We are using Safari as our default browser this year)

Archive Existing Files So you can begin your own Site

Create New Files Right-Click to get the contextual menu

The Shortcut Page Will save you hours of work! (Only a template would work better)

Set Table Alignment Override the default settings

Copy a Spacer gif Hold the Option key as you drag it to copy (Or Just Make Your Own)

Insert Spacers And resize to set tale size

Give the Page a Title And save your work

Add Link Text Try to anticipate as many page topics as you can

Enter Links by Hand Be sure to name_your_pages.html correctly!

Add an email Link (If you have an email account)

Add Sample Text If you do as shown you'll have better luck with the following movies

Set Page Properties Your first taste of CSS

Fix Bold on Visited State Your first CSS edit

Fix Bug in CSS Code Your first look and edit of raw CSS

Export CSS Your first external style sheet (the real power of CSS)

Italic Text Your first CSS custom class (don't forget the period before the name: .italic)

Bold Text Custom classes continued

Orange Text Just because we can

Quoted Text Changing the font

The Main Heading Using a Border to create a horizontal rule and a look at Small Caps

The Sub Heading Custom classes continued

Adjust the Padding To refine the look of your page

Edit the Margins Poking deeper into CSS to tweak the look of the page

Save As Only when you like the look of the page (repeat for all pages)

Test Links To see if you have any problems to fix

Give Each Page a Title Prove you're paying attention to detail (repeat for all pages)

Copy and Paste Your Text Files This is why I had you write in TextEdit last week

Set Line Spacing This is only possible with CSS (play around with these settings)

Layout the Index Page You'll eventually replace the text with a custom image

Test Your Site Do all the links work? Are all your pages titled?

Congratulations! Experiment with CSS to see what you can discover about its power to reformat your entire Site.

Top