Title: Probably More Than You
1Probably More Than Youve Ever Wanted to Know
About Web Page Design, But Were Afraid to Ask
Presented to the Faculty Staff of South Pointe
High School
2Objectives
- Participants will create a title accompanied
content. - Participants will edit text, background, and
background images. - Participants will create a hyperlink to other
pages. - Participants will insert an image into their web
page. - Participants will how to upload their web page to
their account. - Participants will make changes to their existing
web page after it has been published.
3What is a Web Site?
- A web site is a digital page consisting of HTML
(hypertext markup language) files, images,
movies, sound, and other media. - The code in these HTML files are read by your
internet browser and displayed in the format you
see every time you go onto the internet.
4How Web Sites Work
- Web designer creates web page (.html files)
- The web page is uploaded to a FTP server.
- The end user then sends a request to the server
asking to see the web site based on the web
address.
Creation
Upload to FTP Server
End-User
5Designing a Web Site
- Steps to follow when designing a web site.
- 1) Decide on a purpose or main idea for your
site. - 2) Flowchart your content graphically.
- 3) Decide on a design interface (navigation,
links, buttons, etc.) - 4) Begin web site creation.
6Designing a Web Site
- 1) The first thing to do when designing a web
site is to decide on your Main Idea or purpose of
the site. - Is it to interface with parents /or students,
offer additional assignments, promote your class,
attract new students?
?
7Designing a Web Site
- 2) Secondly, brainstorm subtopics that relate to
your site. Make a flowchart and write out the
content for each page.
8Designing a Web Site
- 3) Decide on your design interface, colors,
images, etc. Draw it out on paper if necessary.
9Designing a Web Site
- 4) Begin website creation.
- When you have all of the preliminary work done,
you have the "map" or direction in which to go.
This will make it easier as you start your
digital design.
10OK, Now What?
- So, youve got your design all planned, and your
site storyboarded out, so how do I actually make
the thing? - Its much easier than it might appear
11OK, Now What?
- HTML markup language is very simple, and, among
computer languages, actually rather intuitive,
once you get the general idea. - It relies on markup code, which the browser
(Internet Explorer, Firefox, Safari) interprets
to modify and arrange your text, graphics, video,
whatever..
12OK, Now What?
- Here is the HTML code for a basic page
- ltheadgtlttitlegtlt/titlegtlt/headgtltbodygt
- blah, blah, blahlt/bodygtlt/htmlgt
- Which makes a page that looks like this
13(No Transcript)
14OK, Now What?
- OK, not overwhelmingly interesting yet.
- Its a blank page, like you start off with your
word processor documents, which also use markup
language that you dont see - So, add some more stuff, and your web page will
rock
15OK, Now What?
- Now, you can make web pages with Notepad, using
the markup language like we saw before, but that
can get tedious - So, folks have developed web design software to
make it relatively painless
16OK, Now What?
- There are tons of them out there, including
Microsoft Frontpage Expression, Dreamweaver,
PageMill, ColdFusion, etc. - One I like is called CoffeeCup. They are very
intuitively designed, fast, low footprint on your
computer, and, they have a free version available.
17OK, Now What?
- CoffeeCup Web Software can be found here
- http//www.coffeecup.com/
- With the free stuff here
- http//www.coffeecup.com/freestuff/
18OK, Now What?
- Plan A was to have you all play around with the
free version of CoffeeCup, create your first
webpage, and then even have you upload it to
either the South Pointe or my website. - Well, best the best laid plans of mice and men
were laid waste by our friendly and helpful IT
department, so, well, nevermind.
19OK, Now What?
- To give you a quick idea of what you might do
with a web page, lets look at mine, located at - www.nakedscience.org/mrg
20(No Transcript)
21OK, Now What?
- Now, just in case, heres what I use my web page
for - Providing a vector for reinforcement of
curriculum - Include course syllabi, class lecture notes,
PowerPoints, sample exams, worksheets, and
graphics. Anything I can make digital.
22Nakedscience.org Includes
- separate pages per course with full course
content - field trip, lab photos, video
- classroom procedures
- SAT/ACT information
- articles of interest
- contact information
- a Blog for less formal communication
23http//nakedscience.blogspot.com/
- Includes
- short commentaries, current events, interesting
science articles - easy response feedback mechanisms, displayed on
page dynamically - calendar and archived postings
- easy hypertext markup
24(No Transcript)
25More?
- Maybe we should end it here.
- If you want more, check out a web page of this
presentation with design tips, additional
reference and software links, plus more fun and
adventure in web design - http//www.nakedscience.org/mrg/WebDesignIntro.htm
26(No Transcript)
27Designer Issues You Should Know.
- You should always consider your audience, both
with regard to content and to design
technicalities. For example - Computer screen size. As a general rule, a site
should be developed at 640 pixels wide. - This will also allow your end user to print out
the page so it will fit on a piece of paper. - Any pages over 780 pixels wide will look poorly
or will be hard to navigate on screen sizes that
are set at 800x600.
28Designer Issues You Should Know.
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.
46KB
6KB
See any difference?
29Designer Issues You Should Know.
- Contrast colors for better readability.
- Keep it simple.
- As a general rule, using a light background with
a dark text or a dark background with light text.
30Designer Issues You Should Know.
- Sans-Serif fonts are easier to read on screens
that are being projected or on web pages. - NEVER USE CAPS
Serif Sans-Serif
Times New Roman Arial
Garamond Verdana
Georgia Tahoma
31Designer Issues You Should Know.
- Your user should be able to navigate to the main
sections (especially the home page) on your site
from every page.
32Designer Issues You Should Know.
- Section 508 Requirement.
- (especially if government funding is involved)
- Websites need to be accessible to all people so
ltaltgt tags on all images need to be used.
33Designing Layouts
- Too many animations are distracting to your
audience, however cool they may seem at the time. - Example of BAD web page design