Web site design
Download
1 / 56

Web Site Design - PowerPoint PPT Presentation


  • 441 Views
  • 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.

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

PowerPoint Slideshow about 'Web Site Design' - Audrey


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 l.jpg

Web Site Design

Stanley Chiang

Fall 2008

University of Northern Iowa


When was the internet born l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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.


Slide7 l.jpg

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


Slide8 l.jpg

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


Slide9 l.jpg

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)


Slide10 l.jpg

Hands on Activity

  • Physical Address VS IP address

    • Function keys

      • ipconfig

      • ipconfig /all

      • ping


Web basics l.jpg
Web Basics

http://www.uni.edu

Sunny.uni.edu

134.161.14.23


Software needed l.jpg
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 l.jpg
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.


Slide14 l.jpg

  • 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 l.jpg
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.


Slide17 l.jpg

Home Page

Pages With in The Web Page

Figure 1-1 Different layers with in the Web Site


Introduction to html l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
Other Web design programs

  • Front page

  • Dreamweaver

    • HTML

    • XHTML

    • CSS

  • PHP


Basic structure of a web site l.jpg
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">


In class activity 1 l.jpg
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:


Preparation l.jpg
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)


Creating site map l.jpg
Creating: Site Map

Index.html


Web site design tables l.jpg
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>


Slide31 l.jpg

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


Web site design tables32 l.jpg
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


Background design l.jpg
Background Design

http://www.loriswebs.com/texture.html

http://www.website-designs.com/background_images_05.asp


Web site design tables34 l.jpg
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 l.jpg
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>



Multimedia playing music l.jpg
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


Multimedia playing video l.jpg
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 l.jpg
Introduction to Dreamweaver

  • Tool Bar

    • Design

    • Script

  • Property

    • Link

    • Font

    • Style


Top ten web design mistakes l.jpg
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


Slide41 l.jpg

  • 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 l.jpg
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.


Slide46 l.jpg

  • 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 l.jpg
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.






ad