Web design


Published on

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web design

  1. 1. Where to Start When Re-Designing a Webpage<br />Justin Georges<br />Instructional Design Assistant<br />Carl Sandburg College<br />February 18th, 2010<br />
  2. 2. How Web Pages work (background)<br />You first create a website “locally” or on your own machine.<br />Organize your files on your machine first, then upload to a server.<br />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.<br />Domain (hosting)<br />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.<br />
  3. 3. How Web Pages work<br />Can use any simple text editor to design a web page<br />HTML code is behind the scenes (view source code on any web page.) *<br />HTML=Hyper Text Markup Language<br />Code used to create a web page<br />CSS (Cascading Style Sheet)<br />Used to separate the presentation of a page from its structure. <br />Presentation=how the page looks<br />Structure=meaning of the page’s content<br />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.<br />Much more popular in web development today than it was years ago.<br />
  4. 4. Let’s take a look<br />Website I designed for a class at WIU:http://www.wiu.edu/users/jog100/250Project/Georges_Project/start.html<br />Here’s the file structure:http://www.wiu.edu/users/jog100/250Project/Georges_Project/<br />I created the files “Locally” and uploaded them to the server. *<br />
  5. 5. Website Software<br />WYSIWYG (What You See Is What You Get)<br />Adobe Dreamweaver<br />Microsoft Expressions Web (available at Sandburg) *<br />Microsoft Frontpage (outdated)<br />
  6. 6. Planning Your Website<br />Mock-up (storyboard) <br />What will it look like?<br />Header?<br />Navigation?<br />Content?<br />Draw it out on paper/design layout in Photoshop? *<br />Site map (flowchart)<br />How will everything work?<br />Develop a Style Guide *<br />Colors<br />Fonts (check for web safe fonts-sans serif)<br />Size Specs<br />Banner Information<br />
  7. 7. Content<br />What information does your website need to contain?<br />How much content?<br />
  8. 8. Helpful Tips<br />Get your page to load quickly and efficiently<br />Compress images for the web<br />Use JPG, GIF or PNG image types. On the web, JPG is the best choice (smallest file, with quality being less important than size)<br />Sock photos *<br />When naming files=NEVER use spaces!!!<br />Always use underscore (e.g. imc_home_banner)<br />Be VERY careful of file-naming conventions (pay special attention when working with code.)<br />Always close statements with code *<br />Firebug (for Firefox) *<br />
  9. 9. Sites to get you started<br />Look at other sites for ideashttp://www.edustyle.net/<br />Look for free CSS siteshttp://www.oswd.org/<br />Guide I created for WIU about locating Media on the web:http://wiu.libguides.com/content.php?pid=52532&sid=385448<br />Good website planning site:http://www.realfreewebsites.com/articles/website-planning-guide/<br />Free website building tutorials:http://www.w3schools.com/<br />Learning HTML:http://htmldog.com/<br />
  10. 10. Contact Me<br />Justin Georges<br />jgeorges@sanburg.edu<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.