Creating a Website 101

Creating and designing a website is not difficult. However, more than any other kind of C4K project, it requires PLANNING.

  1. Content
  2. Images
  3. Tables
  4. Saving Nomenclature and Folders
  5. Add Links
  6. Background Color
  7. Background Image
  8. Upload Files to the Server via Dreamweaver

 
1. Content

You don't need to write the content before you design the website, but you do need to know what pages you will have before you begin.

  • Start with paper and pencil.
  • Brainstorm a list of interests that will turn into webpages within your website.
  • Narrow this list down to about 3-4 pages. Make sure that you have something to say for each page
2. Images

What images are going to be on every page? What images are going to change from page to page. By using buttons and headers that look consistent from page to page you make it look like a cohesive website.

In Fireworks I played around with different color combinations for the circles. I also played around with different filters and styles to create different looks with the same colors.
I took one of the styles and applied the attributes to different shapes and lettering. Doing this makes the different shapes look like they belong together.
3. Tables

 

You will need to use nested tables to organize the layout of your website.

Here is a very rough plan for a website, but I know some important information.

  • Navigation bar on the left
  • Header on the top
  • I need to make at least 8 images.
  • I will not have a background image, but I will have a background color.
  • I will have 3 other pages, and what will be on them.

After drawing your plan, you would then sketch in nestled tables. These tables become invisible structuring features of your website, by setting the border to "0".

 

4. Saving Nomenclature and Folders
  • Organization is crucial.
  • Create one "website" folder within your folder on labshare. Make sure ALL files and images are in this folder.
  • Do not use capitals or spaces in file names.

Examine the examples below. These addresses point to different places. Do you see the differences? All these minor differences will result in receiving error messages if you use one for the other.

http://computers4kids.net http://computers4kids.com dog.gif dog.jpg
../../mouse.htm ../mouse.htm index.htm Index.htm
index.html index.htm mysong.mp3 my song.mp3
5.How to: Add Links

To use text: highlight the text that you want to have as a link. Find the properties window at the bottom of the screen. In the right hand portion of the properties window is the link box. Type the name of your file, or click on the folder to the right and navigate to the proper folder.

To use a graphic: highlight the image that you want to have as a link. Look to the middle of your properties window for the link box. Type the name of your file, or click on the folder to the right and navigate to the proper folder.
6. How to: Set a Background Color
  1. Go to Modify
  2. Select Page Properties
  3. Click on the square tab to the right of "background color"
  4. A selection of 256 websafe colors will appear. Select one. Note that a 6 alphanumeric code will appear. This is a very helpful bit of information to note. When you type this code into Fireworks or Dreamweaver, this exact color will show up.
  5. Click OK
7. How to: Set a Background Image

To select a background color for your document in Dreamweaver:

  1. Go to Modify
  2. Select Page Properties
  3. Click "Browse" to the right of the "background image"
  4. Navigate to your images folder and select the appropriate . gif file.
  5. Click okay

Important notes. Images will repeat if the browser window is larger in pixels than your .gif file, or if you have a great deal of content, and therefore need to scroll down. If you do not want your background image to repeat on today standard monitors make it at least 1200 pixels wide. Depending on how much content is on your page you might start with 800-1000 pixels tall.

8. Upload the Files to the Server

 

Click on to "Site> Manage Sites"

 
   
Click on "New"
   

In the pop up window type in a "Site Name"-- This could be a descriptive name.

For "Local root folder", click on the folder to the right of the box and browse to the website folder in your student's folder

   

Click on "remote info" in the left side nav bar.

For Access: Choose "FTP"

For FTP host: Type "websites.computers4kids.net"

Leave Host Directory blank

You will need to get your login and password from a staff member

For Login: Type your students login firstinitiallastname.computers4kids

For Password: Type your assigned C4K password

Make sure that "Use passive FTP" is checked

Click "Test" to see if all is right.

   
To upload files, click in the files panel to the right of the screen. Select the whole site, or click on individual files. Click on the blue arrow to upload the files to the server.
   
Click on "Export"
   

Choose "Back up my settings"

Click OK
   
Save this .ste file somewhere in your student's folder.
   
When you are ready to use the site again go to "Sites<Manage Sites" and Choose "Import". Browse to your .ste file. It will appear in your window.
Session Materials
Projects
New Mentors
Tutorials and Guides
Recommended Applications
Graphics Fireworks, Photoshop
Webdesign Dreamweaver
Office Word, Excel, Powerpoint
Video
Animation		 Flash, Alice, Premiere, MovieMaker
Audio Audacity, Garageband
Print Publisher