1. Where to Start When Re-Designing a Webpage
Justin Georges
Instructional Design Assistant
Carl Sandburg College
February 18th, 2010

2. How Web Pages work (background)
You first create a website “locally” or on your own machine.
Organize your files on your machine first, then upload to a server.
Websites are physically saved on computers. These are special computers called servers which “serve” up the websites they have saved on their hard drives on demand. Servers are usually run by web hosts, but can also be run by individuals or companies.
Domain (hosting)
A domain name is a word or words separated by dots (e.g. and which corresponds to a number, known as an internet protocol (IP) number. This IP number or address is used by computers to locate other computers and servers on the internet. A domain name is used because it is easier for humans to remember and work with words rather than numbers.

3. How Web Pages work Can use any simple text editor to design a web page
HTML code is behind the scenes (view source code on any web page.) *
HTML=Hyper Text Markup Language
Code used to create a web page
CSS (Cascading Style Sheet)
Used to separate the presentation of a page from its structure.
Presentation=how the page looks
Structure=meaning of the page’s content
You can use CSS to specify the font used for the text on the page, to lay out an entire Web page, and much more.
Much more popular in web development today than it was years ago.

4. Let’s take a look
Website I designed for a class at WIU: oject/start.html
Here’s the file structure: oject/
I created the files “Locally” and uploaded them to the server. *

5. Website Software WYSIWYG (What You See Is What You Get)
Adobe Dreamweaver
Microsoft Expressions Web (available at Sandburg) *
Microsoft Frontpage (outdated)

6. Planning Your Website Mock-up (storyboard) Site map (flowchart)
What will it look like?
Header?
Navigation?
Content?
Draw it out on paper/design layout in Photoshop? *
Site map (flowchart)
How will everything work?
Develop a Style Guide *
Colors
Fonts (check for web safe fonts-sans serif)
Size Specs
Banner Information

7. Content What information does your website need to contain?
How much content?

8. Helpful Tips Get your page to load quickly and efficiently
Compress images for the web
Use JPG, GIF or PNG image types. On the web, JPG is the best choice (smallest file, with quality being less important than size)
Sock photos *
When naming files=NEVER use spaces!!!
Always use underscore (e.g. imc_home_banner)
Be VERY careful of file-naming conventions (pay special attention when working with code.)
Always close statements with code *
Firebug (for Firefox) *

9. Sites to get you started
Look at other sites for ideas Look for free CSS sites Guide I created for WIU about locating Media on the web: Good website planning site: guide/ Free website building tutorials: Learning HTML:

10. Contact Me
Justin Georges