Cape May County ETTC Technology Proficiency Courses TPC16-1 - Web based Projects (Web Design I) Some Terms to Know www.webopedia.com www.tuxedo.org/~esr/jargon www.matisse.net/files/glossary.html What do you need to design a web page? Web Browser software Text editor or web page editor software(Notebook, word processor, or specialized software such as FrontPage) Outline or rough draft of your web site. Time! What should I do first? - darkwing.uoregon.edu/~jqj/pub-intro/web-style.html and schmidel.com/webplan.cfm  Make sure you have the two pieces of software mentioned above. It does not matter which browser you use. The browser is for checking the progress of your page. Look at other sites for ideas and examples. Sites to find school web pages and sites to look at www.bergen.org/ETTC/courses/TeacherProjects/Developing/new_jersey_core_curriculum_stand.htm  schmidel.com/schools.cfm  connectedteacher.classroom.com/library/states.asp www.classroom.net/classweb www.tenet.edu/education/main.html - links to Texas schools nssb.k12.hi.us/links.html - links to Hawaiian schools web66.coled.umn.edu/Schools.html dir.yahoo.com/Education/k_12/schools/ - Yahoo's list of schools online96.com/njschools - A brief list of some NJ schools Next, it is a good idea to make an outline or flowchart of your web site. You should know the answers to the questions below. Why am I doing this? Who is this web site for (audience)? What is the message/idea I want to convey (what do I want to accomplish with this site)? What type of computer will my audience have (more about this in the design sections)? How much time do I have to create and then update/maintain this site? Creating a web page - the basic first step - The Index OR Default Page The main page should be a short introduction to your site and contain links to different parts of your site. Try to keep the main page limited to one screen of information (to minimize scrolling and information overload). We will use a web page editor to begin our page. Many types of web editors are available. Some have drawbacks (for instance, FrontPage uses special server extensions sometimes and some servers can not handle these extensions). Some people claim the best way is to use a very simple, plain text editor and code everything. For the novice (and expert) this can take a long time. Most web editors are very similar to a word processor - you type in the text and then use commands for the formatting. We will use FrontPage 2000. Starting FrontPage Open FrontPage. If a blank document does not open, click on the New button found on the Standard toolbar. See the handout on FrontPage screen Elements. Background Color Point to any blank area in the typing screen and right click. Choose Page Properties. Click on the Background Tab. Click on the drop-down menu next to the background option in the colors section. Choose More Colors to see additional choices. When you click on a color, a number/letter combination appears in the Value box (top right corner of window). You can copy this number from page to page. This will insure you are using the exact same color on every page. Entering Text and Basic Formatting When typing text you have three options on how to space text out. If you just keep typing, the text will wrap around to the next line automatically. If you press enter, the computer skips a line before starting the next line of text (this is called a paragraph break). You can also hold down the shift key and press the enter key (line break). This keeps the computer from skipping a line. Make sure the blinking text cursor is at the top of the page. Type in a main heading for the page (for example, Mrs. Smith's 4th grade class). Press the enter key and type a second heading (for example, the name of the school you are from). It is a very good idea to have an area where people know who created the page (and later we will link your email address or a page about you to the name you typed). It is also good for you as well as others to have a place that displays how current the page is (this is part of the concept of validation). Press the enter key about five times and type the following; web page maintained by "your name". Hold down the shift key and press enter. Type the following text; last modified and today's date. A great command in any situation is Undo. You can undo almost any action in FrontPage. Basic formatting is done in a way similar to any word processor. The text to be formatted must be highlighted (although some commands only require the blinking text cursor be on the same line as the text). There are two ways to format web pages text, as a heading or as regular text. Highlight the heading you typed at the top of the page. Click on the style/heading drop-down menu (all the way to the left on the Formatting toolbar). Choose Heading 1. Try a different heading size. Notice how headings change the size and bolds the text. You can also use the basic formatting commands found on the Formatting toolbar or in the Format Menu. Try changing the color, size, and alignment of your headings. Be careful with the font type. Other computers may not have the same type of fonts you have. Try to use a universal font like Times New Roman or Arial. Many people suggest a serif font or sans serif font type. Also, some fonts have either very short or no ascenders (parts of letters that rise above the letter in lowercase such as d, f, h) and descenders (part of letter that extends below main portion of lowercase letter such as in p, j, q). Try to stay away from fonts that mix capital and lowercase Saving a Web Page Choose Save from the File Menu. Navigate to the floppy A: disk drive. Create a new folder (there is a new folder button at the top of the Save As window) called webpage. Save this page as index.htm in your webpage folder. Many people recommend calling your first page index, home, default, or some similar name. It makes it easier to find. There is no set standard but many web servers may require you to have the main page named something specific. .HTM vs .HTML - why different file extensions? (And other filename tips) IN THE BEGINNING - THERE WAS MAC AND PC. MAC COULD READ 4 LETTERS AS A FILE EXTENSION. PC (Win 3.1) ONLY 3 LETTERS. Mac created files ended .html and PC created ended .htm. With the introduction of Windows '95, PC files could have multiple letters. However, many people keep the quasi-standard of .htm (if nothing else, it is one less letter to worry about). While on the subject of file names, be careful what you name your files. Try to keep the name brief, but descriptive (at least descriptive for you). Stay away from most punctuation and try not to use too many capitals (filenames are case sensitive). OK Filename usage ~ (tilde) _ (underscore) .(only to separate filename and extension) lowercase letters and numbers short filenames BAD Filename usage All other punctuation Lots of capitals Weird filename extensions (use htm or html for web pages and the appropriate graphic, sound or movie extension for multimedia files [see graphic section for more information]). SPACES - do not use spaces in filenames. Graphics - where do I go, what do I need? Graphic File Formats .gif - Graphic Interchange Format These files are useful for many reasons. They are compressed in terms of file size (smaller files means the file loads faster). They have the ability to be transparent (this allows the background color to show through as opposed to a white box). They are interlaced (the graphic appears in layers allowing the user to get an idea of what the graphic will be). They can be animated. Files that have flat colors or large areas of color are best in GIF format. GIF files are limited to 256 colors (in comparison JPEG files can contain ~ 16 million colors, 24-bit color). .jpeg - Joint Photographic Experts Group These files are good for photographs or images that have subtle color changes. JPEG images are also compressed. You can not make a JPEG transparent. Using graphics from the web is a touchy subject. Many of the images you see are copyrighted. If you are a commercial organization, you definitely need to ask permission for every graphic, bullet, etc. you use unless the author states "free to use". Always look for Conditions of Use or permission statements. If the site is a personal page, school page or non-profit organization, there is a little more flexibility. Many pages now allow free use if for a non-profit, non-commercial page. I still recommend emailing the author and telling them who they are and why you want to use the graphic. I then keep the responses in a folder (like a license for software). PLEASE be careful using photographs of students. If the page is to be viewed outside of the school, DO NOT use last names or other personal information. Make sure you have the parents' permission (written). The same goes for any other information used on the site. Theoretically, once the site is published anyone, anywhere has access to the information. It is a good idea to keep a list of sites you use information from (text, graphics, etc.). Some people do this at the bottom of the index page, others have a link to a separate page. Below are a few sites that discuss copyright and citing issues. www.fno.org/jun96/legal.html - schools and copyrights webclipart.about.com/msubmenu28.htm?pid=2747&cob=home - About.com page of links and info. discussing copyright issues www.htmlgoodies.com/tutors/copyright.html - copyright answers www.templetons.com/brad/copymyths.html 10 myths about copyright issues www.templetons.com/brad/copyright.html - general copyright info connectedteacher.classroom.com/newsletter/citeintres.asp - how to cite electronic resources www.columbia.edu/cu/cup/cgos/idx_basic.html - more citation information www.library.wisc.edu/libraries/Memorial/citing.htm www.unmc.edu/library/eresources/citeval.html  Graphic Web Sites Finding the graphic can be hard. First I will list some search sites, then some basic art sites. Always preview a site. Many of the sites have a "mixture" of graphics. Search Sites www.ditto.com www.webplaces.com/search - searches other engines and sites www.altavista.com - lets you click on the image button before searching. Many times will return photos more than clipart. www.clipart.com - large list of clipart, much of which is free - is SEARCHABLE www.lycos.com/picturethis - Lycos image gallery www.thinker.org/fam/thinker.html - searchable database of museum paintings and similar nix.nasa.gov - search NASA photos www.ncrtec.org/picture.htm - The amazing picture machine search engine Clipart Sites www.pics4learning.com- great site with copyright cleared photos for education www.hoxie.org/clipart.htm - a list of sites put together by a school webclipart.about.com - very good collection of links www.schoolicons.com/eng - nice, colorful collection www.reallybig.com - large collection of clipart, buttons and other graphics. www.andyart.com/index2.html - nice collection of buttons, backgrounds and animated gifs. Also has tips and other tools. www.barrysclipart.com - a nice site with a range of gifs. www.animfactory.com/index.html - large collection of animated gif files www.chaosdesigns.net/ How do I save the graphic once I find it? First, find the image. For this class, try the following web sites for quick images - www.pics4learning.com www.hoxie.org/clipart/CLIP00.HTM  www.animfactory.com/index.html www.cyberbee.com/bts.html Right-click in the middle of the image. If you have Internet Explorer, choose Save Picture As. If you have Netscape choose save Image As. Next, look at the title that comes up. Many times the author will use some code. It is ok to change the name. Make sure you note the extension. If it is not GIF or JPG, you may have problems. Find ~two graphics for now. Make sure they are saved in the webpage folder. Include a bullet or small graphic to be used for a bulleted list later. Also include an animated GIF if you like. Some basic design tips (bad pages vs. good pages) There are so many things to be said here. We will cover only basic ideas and concepts. I am not a designer or artist!!!! I probably still do things that to some would be very poor design. However, there are certain items that can be discussed and avoided when constructing a site. There are five catch words often used in print and web design: alignment, proximity, repetition, contrast and simplicity. ALIGNMENT It seems like it should be simple to keep things lined up on a page, but that is not always true. Choose one type of alignment and keep it. Also, try not to keep text lined up on the far left or right edges, indent a little. This does not mean to push all text to left or right and align only along the edge. If you have three columns, left align each column. Do not center one and left align the rest. If you are going to have a lot of text on a page, try not to use center alignment. Center alignment creates an invisible line down the middle to which eyes are drawn. While a balance is obtained, it can create a weak effect, as the edges are not defined. With centered information. A person will be constantly shifting his/her line of vision while reading the information. This may be nice for two or three lines, but people are trained to read from a predefined point for each line and may become frustrated after a few centered lines. PROXIMITY (the relationships between items based on how close/far the items are to one another) If items are close to one another, the reader may assume a relationship exists between the objects (a picture with a caption underneath). Try not to let titles and headings stray to far from the text/objects they introduce. It is easy to put space between paragraphs (I often do it in this handout). People do this to separate the paragraphs so they are easier to read. However, this also causes a break in the relationship of the two items. Do not put extra space between paragraphs if they are related. You would not do that in a letter (at least a formal letter). If you think there is too much text, take out text. When you start to look at HTML or the web editor in depth. Start to look at things like the difference between a paragraph (breaks the line of text and puts a blank line between two lines of text) and a break (breaks the line without adding an extra space). REPETITION Many web sites have items/ideas that tie different parts of the site together. Sometimes it is a formatting style (always using a two-column page or the same colors for types of text). Sometimes it is an item or object (using the same image or navigation bar). Repetition has a number of pros. You can reuse many of the same formatting codes and concepts. This allows you to create a page faster or it makes it easier for someone to come in and help create pages for the site. It also makes it easier for the user. If the navigation bar is in the same place and looks the same, the user knows where to go. In terms of graphics, if you use the same graphic, the user does not have to wait while their computer loads a new graphic file. This means pages will come up faster. CONTRAST This is a very important element in design. Contrast is the element that will draw a person's attention to the page or portion of the page. Here colors, size, font type, texture and similar elements are important. Some pages may not need contrast. If it is a text only page, don't distract the reader. This area is sometimes the hardest to work in J One contrast method is to create a focus point. Changing the size of the type creates a hierarchy of importance. Different portions of text are placed at "higher values". We tend to read "top-down" meaning the highest value (the biggest or the most "attention-grabbing") will be read first. Pick out the MOST IMPORTANT ITEM and make this the focus point. Multiple focus points may confuse the reader. SIMPLICITY Many people feel the need to put 100s of graphics (half of them flashing), 100s of colors, lots of text and the latest flashing do-dad on a single page. While it is tempting, the more you put on, the less people tend to see. The trick to a nice page is to keep it short, use a few graphics, use a few, complimenting colors and resist the urge to have sound, movies, flash or more. Not to say you can not use movies, sounds, moving animation or such, just keep the items to a minimum (or warn your users that the page they are about to click to looks like you are walking down the Las Vegas Strip J Check out these pages for some design problems www.kingeider.net www.artcenter.edu www.horrible-web.com/pages.html SIZING THE PAGE One last item - the size of the computer monitor. This is actually very important. People range from still at 13 inch monitors up to ~ 17 or 20 inch (there are bigger, but not a lot of people have them). What does this mean for size? A page, depending on how designed, will look different when viewed on a 14 inch monitor and viewed on a 17 inch monitor. Especially if there are tables, graphics or other objects involved. The big thing that happens is a person will have to scroll vertically and horizontally on a small monitor and things may look ok or spacey on a large monitor. Colors also may be different (another story for later). For a 13-inch monitor you have a resolution of about 640 pixels across and 480 down. You may want to create your home (index) page to fit in that size (the other pages do not necessarily need to fit that size). This also means you should try to view your web page at different sizes to see what the page looks like. Web Design Tip sites webdesign.about.com - good collection of material www.horrible-web.com/index_800.html - great collection of information www.htmltips.com/index.html www.cyberkorean.com/webdsgn/indexF.htm www.hope.edu/resources/lib/www/goodbad.html info.med.yale.edu/caim/manual/contents.html - one of the best, basic guides www.webpagesthatsuck.com www.randomness.com/webtips www.cedarnet.org/newbies www.devry-phx.edu/webresrc/webmstry/styltips.htm www.coe.tamu.edu/~texas/web.html - good general list of resources www.useit.com/alertbox/990502.html Sites for web page design specifically for educators www.oswego.org/staff/cchamber/webdesign/edwebdesign.htm www.microsoft.com/education/curric/activity/website.htm - an activity using MS Publisher to create a basic page. www.siec.k12.in.us/~west/online - A guide from an elementary school www.qesn.meq.gouv.qc.ca/ssn/homepage/webagogy.htm www.learningspace.org/content/default.html www.teachers.net/sampler - a place to build a quick page www.microsoft.com/Education/publisher2000tutorial.asp - how to us MS Publisher to make a web page www.upnaway.com/~kareneh bailiwick.lib.uiowa.edu/webbuilder/reference.html bones.med.ohio-state.edu/eric/papers/primer/webdocs.html schmidel.com/webtools.cfm  Front Page Tutorials - www.actden.com - great site with good tutorials - good for students too webdesign.about.com/compute/webdesign/cs/frontpage/index.htm?terms=frontpage microsoftsoft.about.com/compute/microsoftsoft/cs/frontpage/index.htm?terms=frontpage www.microsoft.com/Education/frontpage2ktutorial.asp - nice tutorial for FrontPage 2000 designed for teachers www.oswego.org/staff/cchamber/webdesign/frontpage.htm microsoft.com/frontpage www.chathamtech.com/lazarscience8 - slow to load but good www.support.dsu.edu/FrontPage/frontlinks.htm  www.frontpageworld.com www.learningspace.org:88/tech/FrontPage/index.htm - Front Page 98 www.coco.cc.az.us/~it/webctr/tutorials/ - Front Page 98 www.thestrattongroup.com/supportcenter/internet/frontpage.htm - Front Page 98 www.botany.hawaii.edu/faculty/webb/FrontPageTutor/TutorialFP-1.html - Front Page 98 Last modified 4/20/01 March 7, 2002