Download
web site design n.
Skip this Video
Loading SlideShow in 5 Seconds..
Web Site Design PowerPoint Presentation
Download Presentation
Web Site Design

Web Site Design

481 Views Download Presentation
Download Presentation

Web Site Design

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Web Site Design Stanley Chiang Fall 2008 University of Northern Iowa

  2. When was the Internet born? • E) 1985 • F) 1990 • G) 1992 • I) 1995 • A) 1954 • B) 1963 • C) 1969 • D) 1976

  3. Introduction to the Internet • Either Sept 2, 1969 / Oct 29, 1969. • The 1st computer talked to a router on Sept 2, 1969. • Oct 29, 1969 was the 1st time a computer talked to another computer via the router over a network. • 1990 the former release of the Internet

  4. What is Internet? • A) a piece of software that came with your new computer. • B) a government program for citizens. • C) a new way of shopping earrings without cable tv. • D) a network of many networks running on the TCP/IP protocol.

  5. What is Internet? Con. • The Internet is the largest computer network in the world. • Technically, the internet is actually a network of many smaller networks that exist all over the world. • All computers on the Internet communicate with one another using the Transmission Control Protocol/Internet Protocol suite, abbreviated to TCP/IP.

  6. What is Internet? Con. • No one is in charge of the Internet. • Anyone can access information on the Internet. • Anyone can publish information on the Internet. • Ex. DNS server, Host Server. • Windows VISTA, Windows XP for Home V.S. Windows XP for Professionals, Windows NT, Windows 2000,etc.

  7. The World Wide Web (WWW) • The World Wide Web was created in 1989 by English scientist Tim Berners-Lee, working at the European Organization for Nuclear Research (CERN) in Geneva, Switzerland, and released in 1992. • The WWW (i.e., the Web) is a global, interactive, dynamic, cross-platform, distributed, graphical hypertext information system that runs over the internet. • With a Web browser, one can view Web pages that may contain text, images, videos, and other multimedia and navigate between them using hyperlinks.

  8. Hypertext Transfer Protocol (Http) • An application-level protocol for distributed, collaborative, hypermedia information systems. • It is a standard method of transferring data between a Web server and a Web browser • For Clients, the protocol performs the request and retrieve functions of a server. • For servers, accepts connections in order to service requests by sending back responses. • Ex. Connecting to Other Countries V.S. the States.

  9. Introduction to HTML • http://www.uni.edu/wm/paint/auth/michelangelo/michel.jpg Document Server (computer/domain name) Path (Folders) Means of access (Hyper Text transfer protocol)

  10. Hands on Activity • Physical Address VS IP address • Function keys • ipconfig • ipconfig /all • ping

  11. Web Basics http://www.uni.edu Sunny.uni.edu 134.161.14.23

  12. Software Needed • Dreamwaver • Filezilla • Personal website register: Creating Account • Open www.uni.edu • Search for personal website page • Download form for registration • Register your site • Register your site option II: Apply for a domain name (DNS) website address for $20 a year. • Mostly for commercial business.

  13. File Transfer Protocol (FTP) • Specifies the rules by which files are sent and received across the internet. • It lets you log onto a remote computer, browse through directories, download, upload files. • Server Authority: setting up different security level. • Share files, home works, Website.

  14. Secure shell (SSH) is a terminal program that encrypts the • data that you send and receive to a remote system.

  15. TCP/IP(Transmission Control Protocol/Internet Protocol) • Basic communication language or protocol of the Internet. • It can also be used as a communications protocol in a private network (either an intranet or an extranet). • When setting up with direct access to the Internet, your computer is provided with a copy of the TCP/IP program just as every other computer that you may send messages to or get information from also has a copy of TCP/IP.

  16. Home Page Pages With in The Web Page Figure 1-1 Different layers with in the Web Site

  17. Introduction to HTML • HTML is a language for describing the structure of a document (Web page), not its actual presentation. • HTML consists a series of short codes typed into a text-file by the site author — these are the tags. • Each element has a name and is contained in what is called a tag.

  18. Introduction to HTML • HTML tags: <TagName> affected text </TagName> • HTML tags are the information inside brackets < > that indicate features or elements of a page. ex: <TITLE> This is my webpage </TITLE> • Tags have an opening tag that “turns on” a feature, and closing tag that “turns off” a feature. • HTML tags are not case sensitive, but put your tags in ALL CAPS (<HTML>) to make them easier to distinguish from other text.

  19. Introduction to HTML • When an HTML page is read by a browser, the browser interprets the HTML tags and formats the text and images on the screen. • HTML defines a set of common styles for Web page elements: • Headings • Paragraphs • Lists • Tables • Character styles…etc

  20. Other Language and Scripts • Java script? • A scripting language developed by Netscape, enable Web authors to design interactive sites. • Java script could interact with HTML source code, enable Web authors to spice up their site with dynamic content. • Most importantly Java script is free. • http://www.uni.edu/coe/hpels/

  21. Language and Scripts • What is Active Server Pages, ASP? • Enables user to make dynamic and interactive web pages. • Uses server-side scripting to dynamically produce web pages that does not affect the type of browser the web site visitor is using. • The extension .asp only runs through the server, no ASP will ever be passed to the web browser. • Example: www2.pccu.edu.tw/CRRMSS

  22. Other Web design programs • Front page • Dreamweaver • HTML • XHTML • CSS • PHP

  23. Basic Structure of a Web Site <head> <title> This is an example </title> </head> <body> <img src="images/Dr.E.JPG" width="110" height="143" alt=“this is an description” /> </body> • <body bgcolor="#FFFFFF" text="#000080" vlink="#0000FF">

  24. In class Activity 1 <head> <title> This is an example </title> </head> <body> <h1> <font color=“#003366” face=Arial, Helvetica, sans-self”> <strong> Hot Beaches – hot Times</strong> </font> </h1> We started Sizzle Resorts to meet our own needs, and those of other like-minded young vactioners in 2007, we realized that we had finished college – but we hadn’t finished Spring Break, or at least the concept of Spring Break… <img src="images/Dr.E.JPG" width="110" height="143" alt=“this is an description” /> Title: This is an example Body:

  25. Preparation • Constructing Bone Structure • Sitemap • Frame sets & Tables • Searching the website for useable pictures, icons, etc. • Construct the Index page as your main page (home page)

  26. Creating: Site Map Index.html

  27. Web site design: Tables • A table need three sets of tags. The table is enclosed within <table> tags, each row is enclosed within <tr> tags, and each cell, defined by columns, is enclosed within <td> tags. • Inside a <table> tags, you can put table headers, other elements, and other tables. <tr> <table> <tr>

  28. <Html><head><title>test</title></head><body> • <body> • <table width="600" height="233" border="1" cellpadding="0" cellspacing="10"> • <tr> • <td height="99">&nbsp;</td> • <td>&nbsp;</td> • </tr> • <tr> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • </table> • </body> • </html> <tr> <table> <tr>

  29. Web site design: Tables <table width="600" height="233" border="1" cellpadding="0" cellspacing="10"> • Border: Value in pixels; specifies border width • Cellpadding: Value in pixels or percentage (%); • specifies space between • cell walls and content of cell • Cellspacing: Value in pixels or percentage (%); • specifies space between cells Cellspacing border Cellpadding

  30. Background Design http://www.loriswebs.com/texture.html http://www.website-designs.com/background_images_05.asp

  31. Web site design: Tables <table width="402" border="1" cellspacing="0" cellpadding="10"> <table width="402" border="1" cellspacing=“10" cellpadding=“0">

  32. In class Activity 1 <table width="50" border="2" cellspacing="0" cellpadding="0"> <table border="1" align="center" cellpadding="0" cellspacing="1"> <tr> <td>Cell A</td> <td>Cell B</td> </tr> <tr> <td>Cell C</td> <td>Cell D</td> </tr> </table>

  33. Designing your Webpage

  34. Multimedia: Playing Music • Simple Style <embed src="http://www.fileden.com/files/2006/8/30/194361/nomore.wma" loop="True" ShowControls="True" autostart="False" height="24">(False or True) /embed> • Mutiple Style • <embed src="http://www.fileden.com/files/2006/8/30/194361/nomore.wma" loop="True" controls="SmallConsole" ShowControls="True" ShowStatusBar="True" ShowDisplay="False" autostart="False" height="69">http://down.lndvd.com/musicdowngo/NEWdaoliansiquanjia_O0O3stop/A265/13.Wma

  35. Multimedia: Playing Video • <center> • <embed src="http://www.fileden.com/files/2006/8/30/194361/otitta.wmv" ShowControls="True"width="480" height="400"><br> • <a target="_blank" href="http://www.fileden.com/files/2006/8/30/194361/otitta.wmv"><open in new window ></a> Windows Media Compatible<br><a target="_blank" href="http://www.fileden.com/files/2006/8/30/194361/otitta.wmv">< Save as a new file ></a> <br> • <a target="_blank" href="http://www.wretch.cc/blog/koshiyen&article_id=1853716"><connect to the source ></a> http://www.wretch.cc/blog/koshiyen&article_id=1853716<br></center>

  36. Introduction to Dreamweaver • Tool Bar • Design • Script • Property • Link • Font • Style

  37. Top Ten Web Design Mistakes • Breaking or Slowing Down the Back Button • Opening New Browser Windows • Non-Standard Use of GUI Widgets • Lack of Biographies • Lack of Archives • Moving Pages to New URLs • Headlines That Make No Sense Out of Context • Jumping at the Latest Internet Buzzword • Slow Server Response Times • Anything That Looks Like Advertising

  38. Search key words • Clipart Pictures • Banner Clipart • Background Clipart • Flowers Clipart • Other • http://mx.nthu.edu.tw/~htwang/trick/trick03.html • http://www.msjh.tp.edu.tw/~c207a/picture3.htm • Java planet http://www.geocities.com/SiliconValley/7116/ • Free Backgrounds • http://www.khjh.kh.edu.tw/mewawa/dw4/bg2-a/index.htm • http://www.internet.idv.tw/experiment/backgr.htm • http://home.pchome.com.tw/star/vul31ao41/materialsback1.htm • http://ktzhk.com/material.php?action=list&tid=1 • http://www.zsp.ks.edu.tw/source/webpic/bg.htm • http://home.kimo.com.tw/qfen/q2-2.htm • http://home.pchome.com.tw/good/fang600213/box.htm • http://fanny.fujinets.com/material.htm • http://ap3.powergame.com.tw/htm/ • free button • http://www.webplaces.com/html/buttons.htm • http://www.freebuttons.com/index.php?page=freebuttons • http://www.buttongenerator.com/ • http://www.ccps.hcc.edu.tw/netcenter/pagemake.htm • http://mx.nthu.edu.tw/~htwang/trick/trick03.html • http://www.msjh.tp.edu.tw/~c207a/picture3.htm • Java planet http://www.geocities.com/SiliconValley/7116/

  39. Final Presentation • When presenting you should tell the class your: • Structure • What kind of technique used in constructing your website • What effects did you use to attract visitors • Requirements for your Website • Links: Home, Resume, Personal Hobby section (Anchor), Photo Gallery, Favorite Links, Site Map. • Main page includes: Video Clip, music.

  40. Dreamweaver - How to use • Copy and paste text into Dreamwaver • Date & Time • Creating Photo as links • Crop Image • Turn in Assignments

  41. Related art clips and backgrounds

  42. In class activity 2 Creating a Home Page • Requirements: • Use the insert hyperlink command to create a list of three to five hyperlinks. • Use spell check to find and correct errors. • Select all of the links after they are entered, then click and create bullets button on the formatting toolbar. • Add additional link after the bulleted list of hyperlinks that contains your e-mail. • Save the document as html. • Upload your website. View your website to correct any errors.