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

2. Objectives Participants will create a title & accompanied content. Participants will create a title & accompanied content. Participants will edit text, background, and background images. Participants will edit text, background, and 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 page. Participants will insert an image into their web page. Participants will how to upload their web page to their account. 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. 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. 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. 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) 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 server asking to see the web site based on the web address. The end user then sends a request to the server asking to see the web site based on the web address. CreationUpload to FTP ServerEnd-User

5. Designing 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 site. 1) Decide on a purpose or main idea for your site. 2) Flowchart your content graphically. 2) Flowchart your content graphically. 3) Decide on a design interface (navigation, links, buttons, etc.) 3) Decide on a design interface (navigation, links, buttons, etc.) 4) Begin web site creation. 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. 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? 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. 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. 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. 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. 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? 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… 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. 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.. 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… Here is the HTML code for a basic page… blah, blah, blah blah, blah, blah Which makes a page that looks like this:Which makes a page that looks like this:

14. OK, Now What? OK, not overwhelmingly interesting yet. 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 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… 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 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… 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, PageMill, ColdFusion, etc. 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. One I like is called CoffeeCup. 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: CoffeeCup Web Software can be found here: http://www.coffeecup.com/ 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/ 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, and then even have you upload it to either the South Pointe or my website. 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. 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: 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 www.nakedscience.org/mrg www.nakedscience.org/mrg

21. OK, Now What? Now, just in case, here’s what I use my web page for… Now, just in case, here’s what I use my web page for… Providing a vector for reinforcement of curriculum Providing a vector for reinforcement of curriculum Include course syllabi, class lecture notes, PowerPoints, sample exams, worksheets, and graphics. Anything I can make digital. Include course syllabi, class lecture notes, PowerPoints, sample exams, worksheets, and graphics. Anything I can make digital.

22. Nakedscience.org Includes: separate pages per course with full course content separate pages per course with full course content field trip, lab photos, & video field trip, lab photos, & video classroom procedures classroom procedures SAT/ACT information SAT/ACT information articles of interest articles of interest contact information contact information a Blog for less formal communication a Blog for less formal communication

23. http://nakedscience.blogspot.com/ Includes: Includes: short commentaries, current events, interesting science articles short commentaries, current events, interesting science articles easy response feedback mechanisms, displayed on page dynamically easy response feedback mechanisms, displayed on page dynamically calendar and archived postings calendar and archived postings easy hypertext markup easy hypertext markup

25. More? Maybe we should end it here. 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… 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 http://www.nakedscience.org/mrg/WebDesignIntro.htm http://www.nakedscience.org/mrg/WebDesignIntro.htm

27. Designer Issues You Should Know. You should always consider your audience, both with regard to content and to design technicalities. For example: 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. 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. 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. Any pages over 780 pixels wide will look poorly or will be hard to navigate on screen sizes that are set at 800x600.

28. Designer Issues You Should Know. 46KB6KB 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?

29. Contrast colors for better readability. Contrast colors for better readability. Keep it simple. Keep it simple. As a general rule, using a light background with a dark text or a dark background with light text. As a general rule, using a light background with a dark text or a dark background with light text. Designer Issues You Should Know.

30. Sans-Serif fonts are easier to read on screens that are being projected or on web pages. Sans-Serif fonts are easier to read on screens that are being projected or on web pages. NEVER USE CAPS NEVER USE CAPS Serif Sans- Serif Times New Roman Arial GaramondVerdana GeorgiaTahoma Designer Issues You Should Know.

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

32. Section 508 Requirement. Section 508 Requirement. (especially if government funding is involved) (especially if government funding is involved) Websites need to be accessible to all people so tags on all images need to be used. Websites need to be accessible to all people so tags on all images need to be used. Designer Issues You Should Know.

33. Designing Layouts Too many animations are distracting to your audience, however cool they may seem at the time. Too many animations are distracting to your audience, however cool they may seem at the time. Example of BAD web page design Example of BAD web page designBAD web page designBAD web page design