Probably More Than You’ve Ever Wanted to Know About Web Page Design, But Were Afraid to Ask… Presented to the Faculty & Staff of South Pointe High School

Probably More Than You’ve Probably More Than You’ve Ever Wanted to Know About Ever Wanted to Know About Web Page Design, But Were Web Page Design, But Were

Afraid to Ask…Afraid to Ask…

Presented to the Faculty & Staff of

South Pointe High School

ObjectivesObjectives Participants will create a title & accompanied Participants will create a title & accompanied

content.content. Participants will edit text, background, and Participants will edit text, background, and

background images.background images. Participants will create a hyperlink to other pages.Participants will create a hyperlink to other pages. Participants will insert an image into their web Participants will insert an image into their web

page.page. Participants will how to upload their web page to Participants will how to upload their web page to

their account.their account. Participants will make changes to their existing Participants will make changes to their existing

web page after it has been published.web page after it has been published.

What is a Web Site?What is a Web Site?

A web site is a digital page consisting of A web site is a digital page consisting of HTML (hypertext markup language) files, HTML (hypertext markup language) files, images, movies, sound, and other media.images, movies, sound, and other media.

The code in these HTML files are read by The code in these HTML files are read by your internet browser and displayed in the your internet browser and displayed in the format you see every time you go onto the format you see every time you go onto the internet. internet.

How Web Sites WorkHow Web Sites WorkWeb designer creates web page (.html files)Web designer creates web page (.html files)The web page is uploaded to a FTP server.The web page is uploaded to a FTP server.The end user then sends a request to the The end user then sends a request to the

server asking to see the web site based on server asking to see the web site based on the web address.the web address.

Creation Upload to FTP Server

End-User

Designing a Web SiteDesigning a Web Site

Steps to follow when designing a web site.Steps to follow when designing a web site.1) Decide on a purpose or main idea for your 1) Decide on a purpose or main idea for your

site.site.2) Flowchart your content graphically. 2) Flowchart your content graphically. 3) Decide on a design interface (navigation, 3) Decide on a design interface (navigation,

links, buttons, etc.)links, buttons, etc.)4) Begin web site creation.4) Begin web site creation.

Designing a Web SiteDesigning a Web Site1) The first thing to do when designing a 1) The first thing to do when designing a

web site is to decide on your Main Idea or web site is to decide on your Main Idea or purpose of the site.purpose of the site.

Is it to interface with parents &/or students, Is it to interface with parents &/or students, offer additional assignments, promote your offer additional assignments, promote your class, attract new students?class, attract new students?

?

Designing a Web SiteDesigning a Web Site2) Secondly, brainstorm subtopics that 2) Secondly, brainstorm subtopics that

relate to your site. Make a flowchart and relate to your site. Make a flowchart and write out the content for each page.write out the content for each page.

Designing a Web SiteDesigning a Web Site3) Decide on your design interface, colors, 3) Decide on your design interface, colors,

images, etc. Draw it out on paper if images, etc. Draw it out on paper if necessary. necessary.

Designing a Web SiteDesigning a Web Site4) Begin website creation.4) Begin website creation.

When you have all of the preliminary work When you have all of the preliminary work done, you have the "map" or direction in done, you have the "map" or direction in which to go. This will make it easier as you which to go. This will make it easier as you start your digital design. start your digital design.

OK, Now What?OK, Now What?

So, you’ve got your design all planned, So, you’ve got your design all planned, and your site storyboarded out, so how do and your site storyboarded out, so how do I actually make the thing?I actually make the thing?

It’s much easier than it might appear…It’s much easier than it might appear…


HTML markup language is very simple, HTML markup language is very simple, and, among computer languages, actually and, among computer languages, actually rather intuitive, once you get the general rather intuitive, once you get the general idea.idea.

It relies on “markup” code, which the It relies on “markup” code, which the browser (Internet Explorer, Firefox, Safari) browser (Internet Explorer, Firefox, Safari) interprets to modify and arrange your text, interprets to modify and arrange your text, graphics, video, whatever..graphics, video, whatever..

OK, Now What?OK, Now What? Here is the HTML code for a basic page…Here is the HTML code for a basic page…

<head><head><title></title><title></title></head></head><body><body>

blah, blah, blahblah, blah, blah

</body></body></html></html>

• Which makes a page that looks like this:Which makes a page that looks like this:

OK, Now What?OK, Now What?OK, not overwhelmingly interesting yet.OK, not overwhelmingly interesting yet.

It’s a blank page, like you start off with It’s a blank page, like you start off with your word processor documents, which your word processor documents, which also use markup language that you don’t also use markup language that you don’t seesee

So, add some more stuff, and your web So, add some more stuff, and your web page will rock…page will rock…


Now, you can make web pages with Now, you can make web pages with NotepadNotepad, using the markup language like , using the markup language like we saw before, but that can get tediouswe saw before, but that can get tedious

So, folks have developed web design So, folks have developed web design software to make it relatively painless…software to make it relatively painless…

OK, Now What?OK, Now What?There are tons of them out there, There are tons of them out there,

including: Microsoft Frontpage & including: Microsoft Frontpage & Expression, Dreamweaver, PageMill, Expression, Dreamweaver, PageMill, ColdFusion, etc.ColdFusion, etc.

One I like is called CoffeeCup. They are One I like is called CoffeeCup. They are very intuitively designed, fast, low footprint very intuitively designed, fast, low footprint on your computer, and, they have a free on your computer, and, they have a free version available.version available.

OK, Now What?OK, Now What?CoffeeCup Web Software can be found CoffeeCup Web Software can be found

here:here:

http://www.coffeecup.com/http://www.coffeecup.com/

With the free stuff here:With the free stuff here:

http://www.coffeecup.com/freestuff/http://www.coffeecup.com/freestuff/


Plan A was to have you all play around Plan A was to have you all play around with the free version of CoffeeCup, create with the free version of CoffeeCup, create your first webpage, and then even have your first webpage, and then even have you upload it to either the South Pointe or you upload it to either the South Pointe or my website.my website.

Well, best the best laid plans of mice and Well, best the best laid plans of mice and men were laid waste by our friendly and men were laid waste by our friendly and helpful IT department, so, well, nevermind.helpful IT department, so, well, nevermind.


To give you a quick idea of what you might To give you a quick idea of what you might do with a web page, let’s look at mine, do with a web page, let’s look at mine, located at:located at:

www.nakedscience.org/mrgwww.nakedscience.org/mrg


Now, just in case, here’s what I use my Now, just in case, here’s what I use my web page for…web page for…Providing a vector for reinforcement of Providing a vector for reinforcement of

curriculumcurriculum

Include course syllabi, class lecture notes, Include course syllabi, class lecture notes, PowerPoints, sample exams, worksheets, and PowerPoints, sample exams, worksheets, and graphics. Anything I can make digital.graphics. Anything I can make digital.

Nakedscience.org Includes:Nakedscience.org Includes:separate pages per course with full separate pages per course with full

course contentcourse contentfield trip, lab photos, & videofield trip, lab photos, & videoclassroom proceduresclassroom proceduresSAT/ACT informationSAT/ACT informationarticles of interestarticles of interestcontact informationcontact informationa Blog for less formal communicationa Blog for less formal communication

http://nakedscience.blogspot.com/http://nakedscience.blogspot.com/

Includes:Includes:short commentaries, current events, short commentaries, current events,

interesting science articlesinteresting science articleseasy response feedback mechanisms, easy response feedback mechanisms,

displayed on page dynamicallydisplayed on page dynamicallycalendar and archived postingscalendar and archived postingseasy hypertext markupeasy hypertext markup

More?More?Maybe we should end it here.Maybe we should end it here.

If you want more, check out a web page of If you want more, check out a web page of this presentation with design tips, additional this presentation with design tips, additional reference and software links, plus more fun reference and software links, plus more fun and adventure in web design…and adventure in web design…

http://www.nakedscience.org/mrg/WebDesignIntro.htmhttp://www.nakedscience.org/mrg/WebDesignIntro.htm

Designer Issues You Should Designer Issues You Should Know.Know.

You should always consider your audience, both You should always consider your audience, both with regard to content and to design with regard to content and to design technicalities. For example: technicalities. For example:

Computer screen size. As a general rule, a site Computer screen size. As a general rule, a site should be developed at 640 pixels wide.should be developed at 640 pixels wide.

This will also allow your end user to print out the This will also allow your end user to print out the page so it will fit on a piece of paper.page so it will fit on a piece of paper.

Any pages over 780 pixels wide will look poorly Any pages over 780 pixels wide will look poorly or will be hard to navigate on screen sizes that or will be hard to navigate on screen sizes that are set at 800x600.are set at 800x600.

Designer Issues You Should Know.Designer Issues You Should Know.

46KB 6KB

Optimize your images for the web. Make your pictures download fast for your viewers. Use 72 dpi when scanning or creating an image for the web.

See any difference?

Contrast colors for Contrast colors for better readability.better readability.

Keep it simple.Keep it simple.As a general rule, As a general rule,

using a light using a light background with a background with a dark text or a dark dark text or a dark background with background with light text.light text.


Sans-Serif fonts Sans-Serif fonts are easier to read are easier to read on screens that on screens that are being are being projected or on projected or on web pages.web pages.

NEVER USE NEVER USE CAPSCAPS

SerifSerif Sans-Sans-SerifSerif

Times New Times New RomanRoman

ArialArial

GaramonGaramondd

VerdanaVerdana

GeorgiaGeorgia TahomaTahoma

Designer Issues You Should Know.Designer Issues You Should Know.


Your user should be able to navigate to Your user should be able to navigate to the main sections (especially the home the main sections (especially the home page) on your site from every page.page) on your site from every page.

Section 508 Section 508 Requirement.Requirement.

(especially if (especially if government funding government funding is involved)is involved)

Websites need to be Websites need to be accessible to all accessible to all people so <alt> tags people so <alt> tags on all images need on all images need to be used.to be used.


Designing LayoutsDesigning Layouts

Too many animations Too many animations are distracting to your are distracting to your audience, however cool audience, however cool they may seem at the they may seem at the time.time.

Example of Example of BAD web page designBAD web page design

Documents

Probably More Than You’ve Ever Wanted to Know About Web Page Design, But Were Afraid to Ask… Presented to the Faculty & Staff of South Pointe High School