Probably More Than You've Ever Wanted to Know About Web Page ...

viraginitysplashInternet και Εφαρμογές Web

10 Νοε 2013 (πριν από 3 χρόνια και 8 μήνες)

87 εμφανίσεις

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

Objectives


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.

What 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.

How 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

Designing 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.

Designing 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?

?

Designing a Web Site


2) Secondly, brainstorm subtopics that
relate to your site. Make a flowchart and
write out the content for each page.


Designing a Web Site


3) Decide on your design interface, colors,
images, etc. Draw it out on paper if
necessary.

Designing 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.

OK, Now What?


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



It’s much easier than it might appear…

OK, 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..

OK, Now What?


Here is the HTML code for a basic page…



<head>

<title></title>

</head>

<body>



blah, blah, blah


</body>

</html>



Which makes a page that looks like this:


OK, Now What?


OK, not overwhelmingly interesting yet.



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



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

OK, 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…



OK, 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.

OK, Now What?


CoffeeCup Web Software can be found
here:



http://www.coffeecup.com/



With the free stuff here:



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


OK, 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.

OK, Now What?


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



www.nakedscience.org/mrg


OK, Now What?


Now, just in case, here’s 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.


Nakedscience.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

http://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

More?


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



Designer 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.

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
better readability.


Keep it simple.


As a general rule,
using a light
background with a
dark text or a dark
background with
light text.

Designer 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

Designer Issues You Should Know.

Designer 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.


Section 508
Requirement.


(especially if
government funding
is involved)


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

Designer Issues You Should Know.

Designing Layouts


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


Example of
BAD web page
design