C4K | Website 101

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

You don't need to write the content before you design the website, but you do need to know what categories you will have before you begin. Brainstorm a list of interests that will turn into webpages within your website.Start with paper and pencil. List out all of the topics and media that you will include in the website. From this list determine groupings of content-- these groupings will be your webpages.

You need to think about if you want a consistent background image across multiple pages, clickable buttons, and/or photographs nestled with text.First, play. This is a chance to determine what the colors and patterns of your website should communicate. Is your site goth, punk, street, sweet, or playful. Your colors and graphics immediately communicate a style. Open Fireworks and play around with pattern and shapes.

Once you determine a look that you like, create more graphics using that similar style so that your website has a consistency.

3. Tables

It's important to save files so that you and the browser can find them. Browsers are pretty dumb, and don't read the words images and Images the same way. Case matters. A small error can make your whole website not work.Tables are one of the most popular ways of controlling formatting on the web. I have used it throughout this webpage. Before you start creating your webpage it is crucial that you create a plan. Paper and pencil is my favorite way.

Here is a very rough plan for a website, but I know some important information. I know that I will have a navigation bar on the left, a pretty header on the top, and that I need to make at least 8 images. I know that I will not have a background image, but I will have a background color. I also know that I will have 5 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".

Tables make graphics and text placement easier.

This is text and image with no table. The text is aligned with the bottom of the image.

This is text and image with a table with border="1". Here you can see how it allows the text to flow more evenly.

This is text and image with a table with border="0". Now it looks seamless.

HTML will not allow formatting by tabs and spacing. Nestled tables are important to create spacing.Organization is crucial. Make sure that you have all of the files that you want on your website in one "website" folder within labshare. Browsers look for files and images precisely as they are named. If you move a file or image after you have linked to it, the browser will look in the wrong place.

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.

Go to Modify
Select Page Properties
Click on the square tab to the right of "background color"
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.
Click OK

7. How to: Set a Background Image

To select a background color for your document in Dreamweaver:

Go to Modify
Select Page Properties
Click "Browse" to the right of the "background image"
Navigate to your images folder and select the appropriate . gif file.
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 1050 pixels wide. Depending on how much content is on your page you might start with 800-1000 pixels tall.

Note: Below these instructions is a short Flash tutorial on putting your website.

Open Internet Explorer. (This will ONLY work in Internet Explorer.)
Type the following in the address bar: ftp://websites.computers4kids.net
(Note: In order to access the Computers4Kids website host, the student must have obtained a web account from a staff member in the Learning Lab.)
Login using your username along with ".computers4kids" and your password. Thus, if your username is "JSmith", then you will need to put in "JSmith.computers4kids" as the username.
Drag and drop (copy) the files that are associated with your website from the home directory/labshare folder to the server.
Type in your web address in another browser to view your website. The web address should look like this: http://websites.computers4kids.net/~asmith where 'asmith' would be replaced by the first half of the username used to log in to the server (the first initial and last name of the student).
(Note: Ensure that you're main page is named "index.html" otherwise your website will not appear by typing the above web address.)
If, at first, the website does not work or does not show the changes made, refresh the page! It may have taken a few moments to update!