Boost Fertility New Invention Ups Success Rates.pdf
Introduction to web sites design
1. Probably More Than You’ve Ever
Wanted to Know About Web Page
…Design, But Were Afraid to Ask
Presented by: Marwa Gawad
2. 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 know how to upload their web page to
their account.
• Participants will make changes to their existing web
page after it has been published.
3. ?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.
4. 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
5. 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.
6. 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?
?
7. Designing a Web Site
• 2) Secondly, brainstorm subtopics that relate to your site.
Make a flowchart and write out the content for each page.
8. Designing a Web Site
• 3) Decide on your design interface, colors, images, etc. Draw it
out on paper if necessary.
9. 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.
10. ?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…
11. ?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..
12. ?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:
13.
14. ?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…
15. ?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…
16. ?OK, Now What
• There are tons of them out there, including: Microsoft
FrontPage & Expression, Dreamweaver, Page Mill,
ColdFusion, etc.
• One I like is called Coffee Cup. They are very intuitively
designed, fast, low footprint on your computer, and, they
have a free version available.
17. ?OK, Now What
• CoffeeCup Web Software can be found here:
• http://www.coffeecup.com/
• With the free stuff here:
• http://www.coffeecup.com/freestuff/
18. ?OK, Now What
• Plan A was to have you all play around with the free version of
CoffeeCup, create your first webpage.
• Well, best the best laid plans of mice and men were laid waste
by our friendly and helpful IT department, so, well,
nevermind.
19. ?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.e2st.net •
20. ?OK, Now What
• Now, just in case, here’s what I use my web page for…
• Providing a group of software based solutions
21. :Elmanara.net 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 •
22. ?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.slideshare.net/marwaabdelgawad
23. .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.
24. .Designer 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?
25. .Designer 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.
26. .Designer Issues You Should Know
Serif Sans-
Serif
• Sans-Serif fonts are easier
to read on screens that are Times New Arial
being projected or on web Roman
pages.
Garamond Verdana
• NEVER USE CAPS
Georgia Tahoma
27. .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.
28. .Designer Issues You Should Know
• 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.
29. Designing Layouts
• Too many animations are
distracting to your audience,
however cool they may seem at
the time.
• Example of
BAD web page design
