Introduction to web_design_cs_final_ason

How to develop web pages
Mr.A.Sathishkumar,M.C.A.,M.Phil.,
Assistant Professor,
Department of Computer Science ,
K.S.Rangasamy College of Arts and Science (Autonomous),
Tiruchengode.
satisa123@gmail.com

Web Site Design
What is a web site?
A website is an address (location) on the World Wide Web that contains
your web pages. Basically, a website is your personal online
communications connection to the rest of the world.
•A website is totally different from any other type of publishing,
advertising or communications media.
The Design Process
Designing for the web requires the relevant content of a brochure or
magazine, the colorful look of high-quality print, and the attention-
grabbing impact of television advertising. Plus it should offer a valuable
product and/or information, be updated frequently and stay current
with changing technology
•A Web Site is never done

Web Components
• Clients and Servers
• Internet Service Providers
• Web Site Hosting Services
• Domains Names, URL’s and Ips
• Registrars
3

Clients & Servers
Clients (Browser)
• Internet Explorer
• Google Crome
• Mozilla Firefox
• Netscape
• Opera
• Safari
• AOL
• MSN
Servers
• Apache
• Microsoft
• Netscape
• Filezilla
• XAMPP
• AV
• JavaWebServer
• Oracle
4

Web Components
• Registrars
8

Internet Service Providers
Connect Clients to the Internet
• Phone Company
• AOL
• Earthlink
• Verizone
• NetZero
• Net4India
• Basic internet connection
• Dialup/DSL/Cable/Sat
• Email
9

Web Components
• Registrars
10

Web Hosting Services
Connects Web Sites to the Internet
• Computer (server) farm
• Web server software
• Firewall hardware and software
• IT services
– (Backup, troubleshooting, hardware repair)
• Disk space
• Bandwidth / connection to internet
• Routers and switchers
• Email server / storage
11

Web Components
• Registrars
12

Domain’s URL’s and IPs
• Domain name: The specific address of a computer
on the Internet
– microsoft.com
• Uniform Resource Locator (URL):
– http://www.microsoft.com/faqs.html
• Internet protocol (IP) address
– 192.168.1.1
13

Web Components
• Registrars
14

Domain Registrar
• A company that provides domain name
registration services for a fee.
• Maintain database which maps domain names to
IP’s
• Propagate new domain name/IP address
information across the internet
15

Creating a Web Site
1. Choose a domain name
2. Register with a Registrar
3. Choose a hosting service
4. Tell Registrar the IP address
5. Create web content
6. Store (publish) onto hosting server (FTP)
7. Submit new site to search engines
17

12 Principles of good web design
1. Keep web pages short
2. Know your audience
3. Attractive design, easy to read
4. Avoid large images
5. Use web safe colours
6. Clearly identify all links
7. Check spelling
8. Use a site map or directory page
9. Update and check all links
10. Include contact information
11. Search Engine Accessible
12. Browser compatible

Creating your Web Site
Technologies & Tools
• Markup Languages
– HTML, DHTML, XML, XSLT, etc....
• Cascading Style Sheets (CSS)
• Scripting languages
– perl,javascript,php, etc....
• Web creation and editing software
– Notepad, Notepad ++, FrontPage, Coldfusion, Flash,
Hotmetal, Dreamviewer, Site Builder, Net beans etc….
19

Markup Languages - HTML
Derived from SGML
(Standard Generalized Markup Language )
• HyperText Markup Language
23

HTML Fundamentals
• Clear text, case insensitive
• Ignores white space
• Comprised of tags <tag />
• Open tags and closed tags
24

HTML - Fundamentals
• Open tags
– <name attributes/>
– <hr/>, <br/>
– <img src=“url” width=‘100px’ height=’60px’/>
• Closed tags
– <name attributes> stuff </name>
– <b>text to be bolded</b>
– <h1>level 1 heading text</h1>
• Comments
< ! - - comment text -- >
25

HTML – Fundamentals
Document Structure
26
Header
Body
< / HTML>
< HTML >

Basic Structure
<html>
<head>
<title> The title of your html page </title>
<meta_tags/>
</head>
<body>
<! - - your web page content and markup - ->
</body>
</html>
27

HTML - Fundamentals
header
<body>
Hello world
</body>
28

HTML - Fundamentals
header
<body>
Mike Tyler
PO Box 190387
Hungry Horse, Mt 59919
</body>
29

HTML - Fundamentals
header
<body>
<b>Mike Tyler</b><br>
PO Box 190387<br>
Hungry Horse, Mt 59919<br>
</body>
30

HTML - Fundamentals
header
<body>
<font face=“Arial,Times,Courier” color=“red” size=“3”>
PO Box 190387<br>
Hungry Horse, Mt 59919<br></font>
</body>
31

HTML - Fundamentals
header
<body>
<p align=‘center’>
<font face=“Arial,Lucida Sans” color=“red” size=“3”>
PO Box 190387<br>
</p>
</body>
32

HTML - Fundamentalsheader
<body>
<font face=“Arial,Lucida Sans” color=“red” size=“3”>
PO Box 190387<br>
</p>
<img src=‘http://www.myserver.com/images/mike.jpg’/>
</body>
33

HTML - Fundamentals
header
<body>
<font face=‘Arial,Lucida Sans’ color=‘red’ size=3>
PO Box 190387<br>
</p>
<img src=‘http://www.domain.com/images/mike.jpg’>
<a href=‘biopage.html’>Read my Bio</a>
</body>
34

HTML - Fundamentals
ANCHORS (Hypertext Link)
<A href=“url” attributes>Displayed text </A>
Attributes
• NAME = “text”
• TITLE = "text"
• TARGET = “frame_name|window_name”
36

Hypertext links
37
Click this link
opens mywebpage.html
in the window / frame
named “window2”
<a href=“mywebpage.html” target=“window2” >Click this link </a>
window2

Hyperlink Colors
<BODY LINK=color, VLINK=color,
ALINK=color >
<BODY LINK=“blue”, VLINK=“purple”,
ALINK=“red” >
<BODY LINK=“#0000FF”, VLINK=“#FF00FF”,
ALINK=“#FF0000” >
38

Colors
• Cathode Ray Tubes (CRT)
39

Colors
color = “red” (Browser compatibility issues)
color = “#FF0000”
values vary from 00 to FF (hexadecimal)
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
40
Red
Green
Blue
#FF FF FF

Headings
• Renders text as a heading, the rendering depending on
the level of heading selected. Headings should be
automatically spaced from the body text.
<h1>Heading 1 level text</h1>
41

Lists
Unordered list
<ul>
<li>apples</li>
<li>bananas</li>
<li>grapes</li>
<li>strawberries</li>
</ul>
Ordered list
<ol type=‘i’ start=‘1’>
<li>apples</li>
<li>bananas</li>
<li>grapes</li>
<li>strawberries</li>
</ol>
42

Lists
Unordered list
• apples
• bananas
• grapes
• strawberries
Ordered list
I. apples
II. bananas
III. grapes
IV. strawberries
43

Tables
<TABLE>
<CAPTION ALIGN="bottom">Class Grades</CAPTION>
<TR>
<TH>Student</TH>
<TH>Grade</TH>
</TR>
<TR>
<TD>Tom</TD>
<TD>B+</TD>
</TR>
<TR>
<TD>Sue</TD>
<TD>A-</TD>
</TR>
</TABLE>
44

Tables
45

Tables
• BORDER=value
• ALIGN=left|right|center
• CELLSPACING=value
• CELLPADDING=value
• WIDTH=value|percent
46

Tables
<TABLE BORDER=1 WIDTH=“50%" CELLPADDING=“6” CELLSPACING=“2” ALIGN="RIGHT">
<CAPTION ALIGN="bottom">Class Grades</CAPTION>
<TR>
<TH>Student</TH>
<TH>Grade</TH>
</TR>
<TR>
<TD>Tom</TD>
<TD>B+</TD>
</TR>
<TR>
<TD>Sue</TD>
<TD>A-</TD>
</TR>
</TABLE> 47

Tables
Student Grade
Tom B-
Sue A+
48
Class Grades

Tables
rowspan and colspan
49

<TABLE BORDER=1 WIDTH="50%" CELLPADDING=5 ALIGN="center">
<TR> <TD colspan=2 align='center'>
<font color="red"><b>Student Grades</b></font>
</TD> </TR>
<TR>
<TD><b>Student</b></TD>
<TD><b>Grade</b></TD> </TR>
<TR> <TD>Tom</TD>
<TD rowspan=2>A</TD> </TR>
<TR> <TD>Sue</TD> </TR>
</TABLE>
50

Student Grades
Student Grade
Tom
A
Sue
51

Screen Compatibility
52
1280 x 1024
1024 x 768
800 x 600
640 x 480

Tables
• Tables are frequently used to layout the basic web page design.
53
640
1280

Designing Your Page
Step 1: Design for a Computer Medium
• A computer screen is not a printed page
• Readability changes depending on color,
layout, and format
• Different browsers, screens and displays can
change how a page looks

How We Read Text
Following normal reading habits, the users eye moves from
left to right

How We View Screens
Looking at a screen, the users eye scans in a more clockwise
pattern

How Will Your Users Read/View?
• If a page uses a lot of text, the user will read in a
more traditional, left to right manner.
• If a page has more graphical elements, the user is
more likely to take in the whole page.

Accepted Relative Areas of
Importance

Organisation - Navigation
Now we need to help them find the user find the information and
the answers to their questions and we hope we can do this by the
shortest route possible
There are three different navigation methods.
– Linear navigation - Moving in a straight line.
– Database navigation - Many branches from your main page.
– Hierarchical navigation - A completely connected website.

Linear Navigation
Linear navigation is used for a web site where you want the visitor to go from one
step to another in a particular order. This is usually used within a web site but
seldom as a stand alone design. The idea here is that the visitor follows the pages
in a predefined order or sequence that you determine. This is particularly useful
for tutorials.
Straight line or sequential links
Linear "straight line" Navigation Diagram
Arrange your links so that they only permit movement in a straight
line from one page to another.This is straight line navigation. You set
up your links in such a way as to compel the visitor to start at one
end and continue to a conclusion.

Linear reciprocal links
Linear "reciprocal" Navigation Diagram
Reciprocal navigation allows the visitor to move back
and forth between a series of pages. Set-up your links
with a start page an end page and links tying the pages
together that lie between them.

Database Navigation
Database Navigation
The database or grid design is made up of multiple divisions and each division has its
own structure. This type of navigation can be used effectively when large amounts of
data are required in the web site design.
Database Navigation Diagram

Hierarchical Navigation
The hierarchical design goes from the general to the specific; from a
home page to divisions to subdivisions. A visitor could easily go from the
home page to other areas of the web site and back again.
Hierarchical Navigation Diagram
Herarchical Navigation

Resources
http://www.w3schools.com/
 HTML Tutorials
Learn HTML
Learn XHTML
Learn CSS
Learn TCP/IP
 Browser Scripting
Learn JavaScript
Learn DHTML
Learn VBScript
Learn HTML DOM
Learn WMLScript
 Server Scripting
Learn SQL
Learn ASP
Learn ADO
Learn PHP
 XML Tutorials
Learn XML
Learn XSL
Learn XSLT
Learn XSL-FO
Learn XPath
Learn XQuery
Learn XLink
Learn XPointer
Learn DTD
Learn Schema
Learn XML DOM
Learn XForms
Learn SOAP
Learn WSDL
Learn RDF
Learn RSS
Learn WAP
65
 .NET (dotnet)
.NET Microsoft
.NET ASP
.NET Mobile
 Multimedia
Learn Media
Learn SMIL
Learn SVG
Learn Flash
 Web Building
Web Building
Web W3C
Web Browsers
Web Quality
Web Semantic
Web Careers
Web Hosting
Web Certification

Introduction to web_design_cs_final_ason

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Introduction to web_design_cs_final_ason

Ähnlich wie Introduction to web_design_cs_final_ason (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Introduction to web_design_cs_final_ason