1 / 36

Web Design

Web Design. Website Designers Goal. Evolve from know-nothing, nat-brain rookies …. into Incredible Website Designers. Reference Websites: http://navigators.com/internet_architecture.html http://www.rci.rutgers.edu/~au/workshop/int-def.htm http://www.profitgate.net/webchart.html

camden-leblanc
Download Presentation

Web Design

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. Web Design

  2. Website Designers Goal Evolve from know-nothing, nat-brain rookies … into Incredible Website Designers Reference Websites: http://navigators.com/internet_architecture.html http://www.rci.rutgers.edu/~au/workshop/int-def.htm http://www.profitgate.net/webchart.html http://www.build-it-yourself.com/project-website/

  3. Website Designers Plan • How the Internet works • Web page vocabulary • Web page grammar • Programming tricks • Pictures, Audio, Video • Web site plan and navigation • Build-Your-Own-Site www.Build-It-Yourself.com

  4. Project Planning (Teamwork) Extreme Programming • Share ideas • Build on others’ ideas • 2 heads better than 1 … teamwork • www.build-it-yourself.com • Go to ‘Projects.’ • Scroll down to ‘Incredible Web Designers.’ • Download your lab book template. www.Build-It-Yourself.com

  5. Presenting Ideas Ugly Average Way Cool www.Build-It-Yourself.com

  6. Web Design Hot Shot Web Designer www.Build-It-Yourself.com

  7. View / Source Code html file sections (index.html) <html> <head> < ! - - page description info - - > </head> <body> < ! - - page layout code - - > </body> </html> www.Build-It-Yourself.com

  8. HTML Source Code Body Section Indent your code so it can be read and edited easily. <body bgcolor=“gray”> < ! - - The Title Section Starts Here - - > <center> <font size=“6” color=“purple” face=“arial”> Hot Shot Web Designer </font> <img src=“images/turnip-head.jpg” border=1> </center> </body> www.Build-It-Yourself.com

  9. Web Design Bad HTML code Good HTML code <html><head><title> Hot Shot Web Designers </title><meta name=“keywords” content=hot shots, smarties, your name> <meta name= “description” content=Best Web designers on the planet!></head> <body bgcolor=gray><!-- The Title Section Starts Here --><center> <font size=6 color=purple face=arial>Hot Shot Web Designer<p></font><img src="images/head-turnip.jpg" border=1 width="250" height="367"></center></body></html> <html> <head> <title> Hot Shot Web Designers </title> <meta name=“keywords” content= hot shots, smarties, your name> <meta name= “description” content= Best Web designers on the planet!> </head> <body bgcolor=gray> <!-- The Title Section Starts Here --> <center> <font size=6 color=purple face=arial> Hot Shot Web Designer </font> <p> <!– line feed or space tag --> <img src="images/head-turnip.jpg" border=1> </center> </body> </html> www.Build-It-Yourself.com

  10. Web Design Browser (Internet Explorer) HTML code Web Page <html> <body bgcolor=gray> <!-- The Title Section Starts Here --> <center> <font size=6 color=purple face=arial> Hot Shot Web Designer </font> <p> <!– line feed or space tag --> <img src="images/head-turnip.jpg" border=1> </center> </body> </html> Hot Shot Web Designer www.Build-It-Yourself.com

  11. Audio and Video You can embed sound effects or videos on a page: <embed src=“images/burp.wav” autostart=true> Record or search for an audio file (.WAV) or a video file (.WMV) Save the WAV or WMV files to your ‘images’ folder and then embed them inside your <body> tags. www.Build-It-Yourself.com

  12. View Source Code / Save As / Edit 1 Find a Web page you like. 2 View ‘Source’ COPY all source code to a text editor (Notepad or Apple Works). 3 Save as ‘name-description.html’ in your folder in the folder ‘My Documents’ My Documents/john/john-turnip-head.html Create a sub-folder called ‘images’ and save your favorite pictures in this folder. To get pictures (JPG’s or GIF’s) from the Web, search Google Images. Right click (or CTRL click on Mac’s) on a picture and save the image to you images folder. 4 5 Edit the tags, text and image names. Then save the html file. Launch Internet Explorer. File / Open ‘john-turnip-head.html’ Click on ‘Refresh’ after an edit is made and saved. 6 www.Build-It-Yourself.com

  13. Set up your work folders. Never leave your files on the desktop. Files left on the desktop will get deleted. Desktop documents C: or Hard Drive yourname-lab-book.ppt yourname-web-page.html your name cat.jpg ball.gif song.wav movie.wmv images www.Build-It-Yourself.com

  14. File Structure • File Names • Use long descriptive names like • school-date-name-description.html • 2) Use lower case text. • Use “-” between words. • Do not use “_” or “ “ • Good: biy-hot-shot.html • Bad: biy_hot_shot.html • Bad: biy hot shot.html www.Build-It-Yourself.com

  15. Internet Components Your local Internet Service Provider You, Client Type a URL like ‘www.build-it-yourself.com’ in the address bar of your Web browser. Your local ISP (or Internet Service Provider) will convert this URL to an IP (or Internet Protocol) address by looking it up on a Domain Name Server. Your local ISP will then request a Web page from the Internet at the appropriate IP address. Domain Name Server

  16. Internet Components Routers & Switches Routers & Switches Your local Internet Service Provider Website Internet Service Provider You, Client Domain Name Server Route Server I N T E R N E T B A C K B O N E A Route Server will determine the best route from your ISP to the ISP that hosts the Website you want.

  17. Internet Components Routers & Switches Routers & Switches Your local Internet Service Provider Website Internet Service Provider Website Host Server You, Client Domain Name Server Route Server I N T E R N E T B A C K B O N E When the Website Internet Service Provider gets a Web page request, it sends back all the information necessary to display that Web page to the IP address associated with your client computer.

  18. Internet Definitions Internet The name given to the collective electronic network of computers and computer networks which are inter-connected throughout the world. Like a network of highways. WorldWideWeb – WWW The name given to the collection of computers which serve information in hypertext format to the INTERNET Like the US Post Office that uses the network of highways to deliver letters based on ZIP codes.

  19. Internet Definitions HTML - Hyper Text Markup Language the text markup language used to insert tags which allow a Web browser to correctly display a hyper-text document. <font color = “red”> Title </font> How many HTML commands are there? Web Browser (What are 2 popular browsers?) Application that converts HTML to a screen display www.Build-It-Yourself.com

  20. Internet Definitions Server A server is a computer that controls information on a network. Domain Name Server Translates a Web address like www.hotshot.com to an IP address like 231.987.520.52 www.Build-It-Yourself.com

  21. Internet Definitions Client Dial Up / DSL / Cable / T1 transmission speed ISP (Internet Service Provider) Domain Name Servers IP address (Intrnet Protocol) Routers / Switches Server TCP/IP (Transmission Control Protocol / Internet Protocol) FTP (File Transfer Protocol) www.Build-It-Yourself.com

  22. HTML HTML What is ? • Stands for: Hypertext Markup Language • Is the document format used on the world wide web • Is read by web browsers that then display the web page What are browsers ? www.Build-It-Yourself.com

  23. Editing A Simple Table Add text here that describes your research, storylines, goals, and solution. Add text here that describes your research, storylines, goals, and solution. www.Build-It-Yourself.com

  24. Editing A Simple Table Add text here that describes your research, storylines, goals, and solution. Add text here that describes your research, storylines, goals, and solution. www.Build-It-Yourself.com

  25. Editing A Simple Table <table> table <tr> <td> <td> row data data </td> </td> </tr> <tr> <td> <td> row data data </td> </td> </tr> </table> www.Build-It-Yourself.com

  26. Editing Simple Table <div align="center"> <table border="0" cellpadding="5" cellspacing="5" width="650"> <tr> <td width="250" valign="top" align="left"> <img border="0" src="images/placemark.jpg"> </td> <td width="400" valign="top" align="left"> <font face="Times New Roman" size="4" color="gray"> Team 1:<br> Add text here that describes your research, storylines, goals, and solution. </font> </td> </tr> <tr> <td width="250" valign="top" align="left"> <img border="0" src="images/placemark.jpg"> </td> <td width="400" valign="top" align="left"> <font face="Times New Roman" size="4" color="gray"> Team 2<br> Add text here that describes your research, storylines, goals, and solution. </font> </td> </tr> </table> </div> <p> Change Image Change Text www.Build-It-Yourself.com

  27. Navigation <body bgcolor=“gray"> <!-- The Title Section Starts Here --> <center> <font size=6 color=purple face=arial> Hot Shot Web Designer<br> </font> <!-- Navigation --> <font face="arial" size="4"> <a href="index.html">Home</a> | <a href="table.html">Page 2</a> </font> <p> www.Build-It-Yourself.com

  28. Preparing Images • Capture JPG’s and GIF’s from Web sites • Make your own image in Power Point, Appleworks Paint • Download photos from a camera • Process image in: • Photoshop • Paintshop Pro • Free Online Tool for editing gif’s (crop and size): • http://www.gifworks.com www.Build-It-Yourself.com

  29. Designing your Web site Audience: Who are you speaking to? (Young, grown up, boys or girls? Interested in entertainment, hobbies, or evaluating your work?) Goals: Sell or Convince (For example, demonstrate that you have mastered HTML and therefore should have a budget to buy some new hardware or software) Share (Share a story, information, or links to cool sites.) www.Build-It-Yourself.com

  30. Designing your Web site • Design, code and link 3 pages that would let an alien from another universe know who you are. • Possible sections include: • Goals and accomplishments • Hobbies and interests • Friends and heroes • Favorite quotes and jokes • Short story about how you would like your future to unfold. www.Build-It-Yourself.com

  31. Website Map and Navigation Home Page Favorite Stuff Favorite Web sites Friends Hobbies Heroes www.Build-It-Yourself.com

  32. File Structure Folders Web Site index.html Section ‘n’ Section 1 sec-1.html Sec1 Images sec-n.html Sec1 Images www.Build-It-Yourself.com

  33. Development (Code Tricks) You can add interesting background effects or a background image. If you do this, make sure your page information does not get lost in a complex background picture. <body background=“sparkle-background.gif”> Hannah www.Build-It-Yourself.com

  34. Development (Code Tricks) Design your Web site so that no page, including pictures, requires more than 100k bytes of download data. Time to view a page that requires 100K of information ___ Telephone modem download time. ___ Cable download time. ___ DSL download time. ___ Wireless download time. ___ T1 download time. www.Build-It-Yourself.com

  35. Favorite Web Sites Build Your Own Toys http://www.build-it-yourself.com/ Mechanical Toys http://www.cabaret.co.uk/ Mechanisms http://www.flying-pig.co.uk/mechanisms/ www.Build-It-Yourself.com

  36. Deployment (FTP / Backup) Web Server You can set up a free Web Server space at: www.yahoo.tripod.com URL for Websites built in Build-It-Yourself Workshops http://biyweb.tripod.com FTP URL for transferring files from your computer to the Tripod Web Server ftp.tripod.com UID: biyweb PWD: password www.Build-It-Yourself.com

More Related