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