1 / 41

The Edge of IT ITEC 200

The Edge of IT ITEC 200. Web Page Design and Implementation. Agenda. Discuss basic design principles for web sites Learn the basics about web page development Get hands-on experience with FrontPage. Follow up course: ITEC-334 Computer Programming in the Web Era. What is the World Wide Web?.

ishana
Télécharger la présentation

The Edge of IT ITEC 200

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The Edge of ITITEC 200 Web Page Design and Implementation

  2. Agenda • Discuss basic design principles for web sites • Learn the basics about web page development • Get hands-on experience with FrontPage Follow up course: ITEC-334Computer Programming in the Web Era

  3. What is the World Wide Web? • The Internet vs. the WWW • Internet applications: • WWW, E-mail, FTP, Telnet, Internet EDI, etc. • WWW: • Sharing of electronic documents via the Internet • System and set of rules (standards) for storing, retrieving, formatting and displaying information • Web servers and Web browsers

  4. Web Servers and Browsers • Web Servers: • Located anywhere on the Internet • Store information to be retrieved • Serves electronic documents to users • Executes applications as needed • Web Browsers (clients): • Request information from Web servers • Formats and presents info to user • Standard user interface

  5. HTTP & HTML • HTTP hypertext transfer protocol • A standard protocol to access Web documents • A protocol: needed for 2 apps to communicate • Protocol = communication rules • HTTP: designed for efficient document retrieval • HTML hypertext markup language • A standard file format used by Web browsers • Text is “marked-up” with tags • Hyperlinks to other documents

  6. URL = Uniform Resource Locatori.e., location of a Web page Web sites are located by specifying the Uniform Resource Locator • <access protocol>://<domain>/<file location> • ex. http://auapps.american.edu/~alberto/index.html • The domain is the main Web site, which may consist of many Web serversand it translates to an IP Address, e.g. • Ex. http://147.9.18.105/~alberto/index.html • For example, see domains to IP address mappingshttp://swhois.net/

  7. Design Issue #1:Think of your page organization in advance

  8. Bad (or no) Design:

  9. Design Issue #2:Hyperlinks: internal external within a page or to other pages(like a bookmark) Link URL Link #name …. …. name …. URL …. …. …. …. ….

  10. Design Issue #3:Hyperlink Types LINK TO SPECIFIC POINTS IN A PAGE (use #) • Relative reference: within currently loaded page #ITReviews • Absolute reference: to other pages (ext docs) http://auapps.american.edu/~alberto/itec200/syllabus.html#ITReviews LINK TO OUTSIDE PAGES • Relative reference: within your web site (your docs) index.html students/teams/webpages.html students/teams/webpages.html#names • Absolute reference: external to web (ext docs) http://auapps.american.edu/~alberto/index.html

  11. Other Important Design Issues • Too many graphics slow down loading of page • Too much animation distracts • Use top page as a menu or index • Make navigation easy--back and forth • Soft backgrounds (white is best for business docs) • Dark or bright text (dark is best for business docs) • Test your colors/fonts on a variety of monitors • New things attract visitors—update your page • Include your URL and e-mail address

  12. Web Publishing Basics • Many ways to create HTML pages • By hand (Notepad), FrontPage, Dreamweaver, etc. • It helps to understand how HTML works • Tips to ensure your web site works well beforehand • Compose a quick html file and call it “test.html” • View this file using your browser • Copy this file to the www folder on your G drive • Then browse this HTML file and ensure it works • You will do this shortly

  13. HTML Tags Web Page Web Site HTML File Text Graphics Files (jpg,gif,etc.) OtherWeb Pages Other Files (video, sound) HTML Files, Web Pages and Web Sites • HTML file = Text (info) + HTML <Tags> (formatting) Ex. <BOLD>Hello</BOLD> there!! • Web page = HTML files + graphics & other files

  14. HTML TagsGeneral format:<TAG attrib1=value1 attrib2=value2….>Text</TAG> • Ex. tag without attributes <BOLD> • Ex. tag with attributes <FONT size=2 color=blue> • Need a beginning tag, e.g. <U> (underline) • And often an ending tag, e.g. <U>Hello!</U>

  15. The next several pages of this presentation contain useful pointers on HTML tags

  16. More basics • Starting a Web page • page must begin and end with an HTML tag <HTML> … … </HTML>

  17. Headings and Sub-headings • Headings are marked by the H#, where # can be from 1 (bigger) to 6 (smaller) for different sizes <HTML> <H1>Welcome to my Home Page</H1> <H2>My name is Alberto</H2> … <HTML>

  18. Text options • Flow of text can be controlled with paragraph and line breaks • <BR> breaks text at the end of a line • <P> breaks text at the end of a paragraph and adds a blank line • <BR> and <P> do not require a closing tag (i.e., </x>) • Example: Hi<BR>there<BR>Joe<BR>, which displays: Hi there Joe

  19. Justification of Text • left, center, and right justify a paragraph <P ALIGN=LEFT>imagine a BIG paragraph in here</P> <P ALIGN=CENTER> imagine a BIG paragraph in here </P> <P ALIGN=RIGHT> imagine a BIG paragraph in here </P> • note that the </P> is used here to end the paragraph and turn off the alignment • Alternatively, you can center a block of text, images, etc.: <CENTER> HTML code ………… </CENTER>

  20. Type Styles • bold <B>…</B> • italic <I>…</I> • underline <U>…</U> • typewriter <TT>…</TT> • strikeout <S>…</S> • blink <BLINK>…</ BLINK >

  21. Choosing Fonts • Font Size • base font size (default=3, range = 1-7; 1=smallest, 7=largest) • <BASEFONT SIZE=5> • font size • <FONT SIZE=3> • relative font size • <FONT SIZE=+1> increases font size by 1 • <FONT SIZE=-2> decreases font size by 2

  22. Linking to Other Pages • Use <A HREF=“…”> to link to another HTML page • HREF points to new page • text between <A…> and </A> will be highlighted as a link, e.g., click here for news will be highlighted below: <A HREF=“http://www.cnn.com” >click here for news</A>

  23. Linking to Files • Use <A HREF=“…”> to link to another HTML page • HREF points to new page • text between <A…> and </A> will be highlighted as a link, e.g., click here to download the slides will be highlighted below <A HREF=“http://eagle3.american.edu/~alberto/slides.ppt”> click here to download the slides</A>

  24. Linking within one document • the HREF refers to the anchor by putting a # in front of the name • the NAME is the anchor that HREF jumps to when clicked <A HREF=“#Education”>Education</A> <A HREF=“#Experience”> Experience </A> … <A NAME=“Education”>Where I went to school</A> … <A NAME=“Experience”>Where I’ve worked</A>

  25. Getting Colorful • Colors • background, text, and link colors are defined in the BODY • color is a six digit number, where the first two digits represent the hex code of red, the next two digits are hex code of blue, the last two digits are hex code of green • black is “000000” (i.e., no color) • white is “ffffff” • <BODY BGCOLOR=“304050” TEXT=“107030” LINK=“102010”>

  26. Choosing Backgrounds • Backgrounds • backgrounds can be added to each document, but are not readable on all browsers <BODY BACKGROUND=“clouds1.gif”>

  27. Displaying Graphics • Graphics • add graphics with the IMG SRC command • to find graphics already on andrew, go to the GSIA home page (www.gsia.cmu.edu) and look for reference to icons near the bottom of the page <IMG SRC=“JoesPicture.gif”> <IMG SRC=“Simpsons.gif”>

  28. Graphic Links • Combine links with graphics so when you click on the graphic it takes you to the linked web page <A HREF=“http://www.gsia.cmu.edu/andrew/fj56/home.html> <IMG SRC=“FredJonesPicture.gif”> </A>

  29. Graphic Sizing and Borders • WIDTH and HEIGHT specify graphic size in pixels • warning: browser will stretch picture to fit <IMG SRC=“MyPicture.gif” WIDTH=150 HEIGHT=200> • BORDER specifies width of border in pixels <IMG SRC=“MyPicture.gif” BORDER=14>

  30. Not Everyone Has Graphics • Graphic alternatives for non-graphic browsers • ALT specifies an alternative to an image <IMG SRC=“JoesPicture.gif” ALT=“[Picture of Joe and his dog.]”>

  31. Dividing lines for separating sections of page • <HR> will insert a standard line in your page • other options include size, width, alignment, and no bevel <HR SIZE=25 WIDTH=150 ALIGN=CENTER NOSHADE

  32. Ordered Lists • ordered lists <OL> can use numbers (1), capital letters (A), lowercase letters (a), or Roman numerals (i) <OL TYPE=1 START=5> <LI>first line <LI>second line ... </OL>

  33. Unordered Lists • Unordered lists <UL> can use a disc, circle, or square <UL TYPE=circle> <LI>first line ... <LI>second line ... </UL> • All lists use <LI> to specify a new line

  34. Tables • <TABLE BORDER> starts table including a border • <CAPTION ALIGN=top> add title at top • <TR> starts a new table row • <TH> adds the headers for a table • <TD> adds the data for a table

  35. Table Example <TABLE BORDER> <CAPTION ALIGN=top>Joe’s Resume</CAPTION> <TR> <TH>Year</TH><TH>Company</TH><TH>Position</TH> </TR> <TR> <TD>1995</TD><TD>Microsoft</TD><TD>Manager</TD> </TR> <TR> <TD>1994</TD><TD>Microsoft</TD><TD>Programmer</TD> </TR> </TABLE>

  36. divides screen into sections allows one section to control another often used with a fixed header, menu, and body Frames Header Menu Body

  37. A frames based web page Rows = 85 Cols = 180 Body of page

  38. Example HTML for Frames • <html> • <head> • <title>Don Harter's Home Page</title> • </head> • <frameset cols="180,*" frameborder=0 framespacing=0 border=0> • <frame src="//www.gsia.cmu.edu/andrew/harter/www/menu.html" • name=menu noresize> • <frameset rows="85,*" frameborder=0 framespacing=0 border=0> • <frame src="//www.gsia.cmu.edu/andrew/harter/www/name.html" • name=header scrolling=no noresize> • <frame src="//www.gsia.cmu.edu/andrew/harter/www/body.html" • name=body> • </frameset> • </frameset> • <noframes> • To view this page you need a browser which supports frames and java. • </noframes> • </html>

  39. <html> • <head> • <title>Don Harter's Home Page</title> • </head> • <frameset cols=“20%,80%” frameborder=0 framespacing=0 border=0> • <frame src="//www.gsia.cmu.edu/andrew/harter/www/menu.html" • name=menu noresize> • <frameset rows=”10%,90%" frameborder=0 framespacing=0 border=0> • <frame src="//www.gsia.cmu.edu/andrew/harter/www/name.html" • name=header scrolling=no noresize> • <frame src="//www.gsia.cmu.edu/andrew/harter/www/body.html" • name=body> • </frameset> • </frameset> • <noframes> • To view this page you need a browser which supports frames and java. • </noframes> • </html>

  40. <HTML> • <HEAD> • <TITLE>Don Harter</TITLE> • </HEAD> • <BODY bgcolor="#ffffff" text=ffffff link=ffffff vlink=ffffff alink=ff0000> • <FONT FACE="Verdana, Arial, Helvetica" SIZE=2> • <FONT SIZE="3" COLOR=ffffff><B>Personal</B></FONT><BR><BR> • <FONT SIZE="2"> • <A HREF="http://www.gsia.cmu.edu/andrew/harter/www/body.html" • target=body> Home </A><BR> • <A HREF="http://www.gsia.cmu.edu/andrew/harter/www/resume.html" • target=body> Resum&#233 </A> <BR> • <A HREF="http://www.gsia.cmu.edu/andrew/harter/www/teaching.html" • target=body> Teaching </A><BR> • </FONT> • </BODY> • </HTML>

  41. <html> • <body bgcolor="#005daf"> • <font face="Verdana, Arial, Helvetica" color="#ffffff" size=5> • <A HREF="http://www.gsia.cmu.edu/" target=body><IMG • SRC="http://www.gsia.cmu.edu/gifs/button.gsia.gif" ALIGN=top ALT="GSIA"></A> • <H2><B><CENTER> • Don Harter's Home Page • </CENTER></B></H2> • <A HREF="http://www.cmu.edu/" target=body><IMG • SRC="http://www.gsia.cmu.edu/gifs/cmuweb-80.gif" ALIGN=top ALT="CMU"></A> • </font> • </body> • </html>

More Related