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

Loading in 2 Seconds...

play fullscreen
1 / 56

Web Site Design - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
web site design

Web Site Design

Stanley Chiang

Fall 2008

University of Northern Iowa

when was the internet born
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
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
what is internet
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.
what is internet con
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.
what is internet con6
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.

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.

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.

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)


Hands on Activity

  • Physical Address VS IP address
    • Function keys
      • ipconfig
      • ipconfig /all
      • ping
web basics
Web Basics



software needed
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.
file transfer protocol ftp
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.

Secure shell (SSH) is a terminal program that encrypts the

  • data that you send and receive to a remote system.
tcp ip transmission control protocol internet protocol
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.

Home Page

Pages With in The Web Page

Figure 1-1 Different layers with in the Web Site

introduction to html
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.
introduction to html19
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.
introduction to html20
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
other language and scripts
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/
language and scripts
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
other web design programs
Other Web design programs
  • Front page
  • Dreamweaver
    • HTML
    • XHTML
    • CSS
  • PHP
basic structure of a web site
Basic Structure of a Web Site



This is an example




<img src="images/Dr.E.JPG" width="110" height="143"

alt=“this is an description” />


  • <body bgcolor="#FFFFFF" text="#000080" vlink="#0000FF">
in class activity 1
In class Activity 1



This is an example





<font color=“#003366” face=Arial, Helvetica, sans-self”>

<strong> Hot Beaches – hot Times</strong>



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


  • 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)
web site design tables
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.






  • <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>




web site design tables32
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




background design
Background Design



web site design tables34
Web site design: Tables

<table width="402" border="1" cellspacing="0" cellpadding="10">

<table width="402" border="1" cellspacing=“10" cellpadding=“0">

in class activity 135
In class Activity 1

<table width="50" border="2" cellspacing="0" cellpadding="0">

<table border="1" align="center" cellpadding="0" cellspacing="1">


<td>Cell A</td>

<td>Cell B</td>



<td>Cell C</td>

<td>Cell D</td>



multimedia playing music
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)


  • 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
multimedia playing video
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>
introduction to dreamweaver
Introduction to Dreamweaver
  • Tool Bar
    • Design
    • Script
  • Property
    • Link
    • Font
    • Style
top ten web design mistakes
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

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/
final presentation
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.

Dreamweaver - How to use

  • Copy and paste text into Dreamwaver
  • Date & Time
  • Creating Photo as links
  • Crop Image
  • Turn in Assignments
in class activity 2 creating a home page
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.