1 / 56

Web Site Design

Web Site Design Stanley Chiang Fall 2008 University of Northern Iowa When was the Internet born? E) 1985 F) 1990 G) 1992 I) 1995 A) 1954 B) 1963 C) 1969 D) 1976 Introduction to the Internet Either Sept 2, 1969 / Oct 29, 1969. The 1st computer talked to a router on Sept 2, 1969.

Audrey
Télécharger la présentation

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

More Related