This document provides guidance on redesigning a webpage, beginning with organizing files locally before uploading to a server. It discusses using HTML code and CSS to structure pages and separate presentation from content. The document recommends planning the design with a mock-up and site map, developing a style guide, and considering what content to include. It offers tips like using optimized image types, careful file naming, and closing all statements in code. Resources for inspiration, tutorials, and free website building tools are also provided.

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. www.realfreewebsites.com), 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:http://www.wiu.edu/users/jog100/250Project/Georges_Project/start.html Here’s the file structure:http://www.wiu.edu/users/jog100/250Project/Georges_Project/ 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) 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 ideashttp://www.edustyle.net/ Look for free CSS siteshttp://www.oswd.org/ Guide I created for WIU about locating Media on the web:http://wiu.libguides.com/content.php?pid=52532&sid=385448 Good website planning site:http://www.realfreewebsites.com/articles/website-planning-guide/ Free website building tutorials:http://www.w3schools.com/ Learning HTML:http://htmldog.com/

10. Contact Me Justin Georges jgeorges@sanburg.edu