Introduction to Web Design

Part 1
w. Mike Tyler
Objective Of Study

1.Definition of Web Design

2.Uses of Web Design
3.Components of Web Design
4.Web Design Applications

Copyright 2005 - The Small Business Depot 2

Web Design

Copyright 2005 - The Small Business Depot 3

Web design also means planning,
creation and updating of websites.
Website design also involves
information architecture, websites
structure, user interface, navigaton,
ergonomics, website layout colours,
contrast, fonts and photography as
well as icons design. All these
websites elements combined
together to form websites.
Copyright 2005 - The Small Business Depot 4
Understanding a web page
A web page is a text file containing
Hypertext Markup Language (HTML)
Formatting tags and links to graphic files
and other web pages through a web
server. Web pages are unique in such a
way that they can be interactive and use
multimedia. The man thing to remember
when creating a web is to establish a goal
by setting many links.
Copyright 2005 - The Small Business Depot 5
Web Design packages are the group
of software that are used to design
the website.
Website is a collection of related web
pages connected to one another by
hyperlinks and are available on the
internet via a uniform resource
locator (URL) or domain name.
Copyright 2005 - The Small Business Depot 6
Uses Of Web Design Package
1.They are basically used to build webpages
2. To redesign web sites
3. To maintain a site easily
4.They are used for interface design
5.They are used for authoring including standardized
code and proprietary software
6.They are used for users experience design
7.Search engine optimization

7
Components of Web Design Packages

1.Standard, normal or design view which is retarded as the

default.
2. Code View: This allows you to view and work directly with the
HTML code.
3.Split View: This is where both of the above views are displayed
simultaneously in separate windows.
4.Creating Headings and sub heading
5.Inserting links; Most web authoring software tools additionally
provide a button or icon that allows you to quickly insert a link.

8
6. Interactive buttons: Give users a new way to create web
graphics for navigation and eliminating the need for a
complicated image-editing package such as Adobe photoshop.
7. Dynamic Web Template(DWT): Allow users to create a
single template that could be used across multiple pages and
even the whole website.
8. Code snippets: Give users the advantage to create snippets
of their commonly used pieces of code allowing them to store
it for easy access when next it is needed.
9. Accessibility checker: Which gives the users the ability to
check if their codes are standard- compliant and their
websites is easily accessible for people with disabilities

Copyright 2005 - The Small Business Depot 9

Examples Of Web Design Packages
1.Adobe Dreamweaver
2.Google web designers
3.Microsoft SharePoint designer
4.Net Objects fusion
5.Xara Web designers
6.Coffee Cup visual site designer

10
Free Websites that enables you to
create your own Website.

1.www.Wix.com
2.www.Weebly. Com

Copyright 2005 - The Small Business Depot 11

Use of this material
If you would like to be able to distribute this
PowerPont presentation from your own website
– simply credit the author with a link to The small
Business Depot. Use the following:

Link URL: http://www.smallbizdepot.com

Link text: By Mike Tyler – The Small Business Depot

Copyright – 2005 – The Small Business Depot

Copyright 2005 - The Small Business Depot 12
Web Components
Clients and Servers
Internet Service Providers
Web Site Hosting Services
Domains Names, URL’s and Ips
Registrars

Copyright 2005 - The Small Business Depot 13

Clients & Servers
Clients (Browser) Servers
Internet Explorer Apache
Firefox Microsoft
Mozilla Netscape
Netscape zeus
Opera AOLserver
Amaya AV
AOL JavaWebServer
MSN Oracle

Copyright 2005 - The Small Business Depot 14

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

Copyright 2005 - The Small Business Depot 15

Internet Service Providers
Connect Clients to the Internet

Phone Company Basic internet

AOL connection
Earthlink Dialup/DSL/Cable/Sat
Verizone Email
NetZero

Copyright 2005 - The Small Business Depot 16

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

Copyright 2005 - The Small Business Depot 17

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
Copyright 2005 - The Small Business Depot 18
Web Components
Clients and Servers
Internet Service Providers
Web Site Hosting Services
Domains Names, URL’s and Ips
Registrars

Copyright 2005 - The Small Business Depot 19

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

Copyright 2005 - The Small Business Depot 20

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

Copyright 2005 - The Small Business Depot 21

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

Copyright 2005 - The Small Business Depot 22

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

Copyright 2005 - The Small Business Depot 23

12 Principles of good web design
1. Visitor-centric, clear purpose
2. Progressive disclosure
3. Displays quickly
4. Browser compatible
5. Intuitive navigation
6. Spelling, grammar, writing
7. Secure (eCommerce)
8. Attractive design, easy to read
9. Cultural bias? (Regional? Domestic? International?)
10. No technical problems (broken links, buggy scripts)
11. Maintainable (separate content from style)
12. Search Engine Accessible

Copyright 2005 - The Small Business Depot 24

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, FrontPage, Coldfusion, Flash,
Hotmetal, Site Builder, etc..
Copyright 2005 - The Small Business Depot 25
Markup Languages - HTML

Derived from SGML

(Standard Generalized Markup Language )

HyperText Markup Language

Copyright 2005 - The Small Business Depot 26

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

Copyright 2005 - The Small Business Depot 27

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

Copyright 2005 - The Small Business Depot 28

HTML – Fundamentals
Document Structure

< HTML >

Header

Body

< / HTML>
Copyright 2005 - The Small Business Depot 29
HTML – Fundamentals
Basic Structure

<html>
<head>
<title> The title of your html page </title>
<meta_tags/>
</head>
<body>

<! - - your web page content and markup - ->

</body>
</html>

Copyright 2005 - The Small Business Depot 30

HTML - Fundamentals
header
<body>

Hello world

</body>

Copyright 2005 - The Small Business Depot 31

HTML - Fundamentals
header
<body>

Mike Tyler
PO Box 190387
Hungry Horse, Mt 59919

</body>
Copyright 2005 - The Small Business Depot 32
HTML - Fundamentals
header
<body>

<b>Mike Tyler</b><br>
PO Box 190387<br>
Hungry Horse, Mt 59919<br>

</body>
Copyright 2005 - The Small Business Depot 33
 HTML - Fundamentals
header
<body>

<font face=“Arial,Times,Courier” color=“red” size=“3”>

<b>Mike Tyler</b><br>
PO Box 190387<br>
Hungry Horse, Mt 59919<br></font>

</body>

Copyright 2005 - The Small Business Depot 34

 HTML - Fundamentals
header
<body>
<p align=‘center’>
<font face=“Arial,Lucida Sans” color=“red” size=“3”>
<b>Mike Tyler</b><br>
PO Box 190387<br>
Hungry Horse, Mt 59919<br></font>
</p>

</body>

Copyright 2005 - The Small Business Depot 35

 HTML - Fundamentals
header
<body>
<p align=‘center’>
<font face=“Arial,Lucida Sans” color=“red” size=“3”>
<b>Mike Tyler</b><br>
PO Box 190387<br>
Hungry Horse, Mt 59919<br></font>
</p>
<img src=‘http://www.myserver.com/images/mike.jpg’/>

</body>

Copyright 2005 - The Small Business Depot 36

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

Copyright 2005 - The Small Business Depot 37

HTML - Fundamentals

Copyright 2005 - The Small Business Depot 38

HTML - Fundamentals

ANCHORS (Hypertext Link)

<A href=“url” attributes>Displayed text </A>

Attributes
 NAME = “text”
 TITLE = "text"
 TARGET = “frame_name|window_name”

Copyright 2005 - The Small Business Depot 39

HTML – Fundamentals
Hypertext links

<a href=“mywebpage.html” target=“window2” >Click this link </a>

Click this link

opens mywebpage.html
in the window / frame
named “window2”

window2
Copyright 2005 - The Small Business Depot 40
HTML – Fundamentals
Hyperlink Colors

<BODY LINK=color, VLINK=color, ALINK=color >

<BODY LINK=“blue”, VLINK=“purple”, ALINK=“red” >

<BODY LINK=“#0000FF”, VLINK=“#FF00FF”, ALINK=“#FF0000” >

Copyright 2005 - The Small Business Depot 41

HTML – Fundamentals
Colors

Cathode Ray Tubes (CRT)

Copyright 2005 - The Small Business Depot 42

HTML – Fundamentals
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
#FF FF FF

Red Blue

Green

Copyright 2005 - The Small Business Depot 43

HTML – Fundamentals
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>

<h2>Heading 2 level text</h2>
<h3>Heading 3 level text</h3>
<h4>Heading 4 level text</h4>
<h5>Heading 5 level text</h5>
<h6>Heading 6 level text</h6>
Copyright 2005 - The Small Business Depot 44
HTML – Fundamentals
Lists

Unordered list Ordered list

<ul> <ol type=‘i’ start=‘2’>

<li>apples</li> <li>apples</li>
<li>bananas</li> <li>bananas</li>
<li>grapes</li> <li>grapes</li>
<li>strawberries</li> <li>strawberries</li>
</ul> </ol>

Copyright 2005 - The Small Business Depot 45

HTML – Fundamentals
Lists

Unordered list Ordered list

apples II. apples

bananas III. bananas
grapes IV. grapes
strawberries V. strawberries

Copyright 2005 - The Small Business Depot 46

HTML – Fundamentals
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>
Copyright 2005 - The Small Business Depot 47
HTML – Fundamentals
Tables

Copyright 2005 - The Small Business Depot 48

HTML – Fundamentals
Tables

BORDER=value

ALIGN=left|right|center

CELLSPACING=value

CELLPADDING=value

WIDTH=value|percent

Copyright 2005 - The Small Business Depot 49

HTML – Fundamentals
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>
Copyright 2005 - The Small Business Depot 50
HTML – Fundamentals
Tables

Student Grade

Tom B-

Sue A+

Class Grades

Copyright 2005 - The Small Business Depot 51

HTML – Fundamentals
Tables

rowspan and colspan

Copyright 2005 - The Small Business Depot 52

HTML – Fundamentals
<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>
Copyright 2005 - The Small Business Depot 53
HTML – Fundamentals

Student Grades
Student Grade
Tom
A
Sue

Copyright 2005 - The Small Business Depot 54

Screen Compatibility
1280 x 1024

1024 x 768

800 x 600

640 x 480

Copyright 2005 - The Small Business Depot 55

HTML – Fundamentals
Tables

 Tables are frequently used to layout the basic web page design .
1280

640
Copyright 2005 - The Small Business Depot 56
HTML – Fundamentals
Frames

Basic Frames
Floating Frames (inline frames)
Picture in picture

Frames let you divide a screen into

windows with each window viewing a
different web page.

Copyright 2005 - The Small Business Depot 57

HTML – Fundamentals
Basic Frames

Banner

Menu Content

Footer

Copyright 2005 - The Small Business Depot 58

HTML – Fundamentals
Basic Frames

Basic tags
 <frameset> ..</frameset>
 <frame />
 <noframes> .. </noframes>

Basic attributes
 cols = “values”
 rows = “values”
 name = “frame_name”
 src = “frame_source(url)”
 target = “frame_name”
Copyright 2005 - The Small Business Depot 59
HTML – Fundamentals
Basic Frames

Banner

Menu Content

Footer

Copyright 2005 - The Small Business Depot 60

HTML – Fundamentals
Basic Frames

<frameset rows=“80,*,80”>
<frame src=“banner.html” />
<frameset cols = “25%,75%” >
<frame src=“menu.html” />
<frame src=“content.html” />
</frameset>
<frame src=“footer.html” />
</frameset>
Copyright 2005 - The Small Business Depot 61
HTML – Fundamentals
Basic Frames
<frameset rows=“80,*,80”>
<frame src=“banner.html” />
<frameset cols = “25%,75%” >
<frame src=“menu.html” />
<frame src=“content.html” />
</frameset>
<frame src=“footer.html” />
<noframes>
<body>
Welcome to my page.
<A HREF="noframes.htm">Continue</A>
to the frame-free version.
</body>
</noframes>
</frameset>
Copyright 2005 - The Small Business Depot 62
HTML – Fundamentals
Basic Frames

FRAMESET attributes

 FRAMEBORDER="yes|no"|0
 BORDER=pixels
 BORDERCOLOR="#hexcolor|colorname"

< frameset rows="80,*,80" border=2 bordercolor=“red" >

..
..
</frameset>

Copyright 2005 - The Small Business Depot 63

HTML – Fundamentals
Basic Frames

Individual FRAME attributes

 SCROLLING="yes|no|auto"
 NORESIZE
 MARGINWIDTH=pixels
 MARGINHEIGHT="pixels"
 BORDERCOLOR="color"
 FRAMESPACING="pixels"
 FRAMEBORDER="yes|no"|0
 NAME=“frame_name”
Copyright 2005 - The Small Business Depot 64
HTML – Fundamentals
Floating Frames

Floating frames allow you to create a

frame within the boundaries of a page

Basic Frames Floating Frames

Copyright 2005 - The Small Business Depot 65

HTML – Fundamentals
Floating Frames

<IFRAME attributes ></IFRAME>

Attributes
 SRC=URL
 HEIGHT=pixels|percent,
 WIDTH=pixels|percent
 HSPACE=pixels
 VSPACE=pixels
 ALIGN=left|right
 FRAMEBORDER=0

Copyright 2005 - The Small Business Depot 66

HTML – Fundamentals
Floating Frames

<IFRAME
NAME=“frame_name”
ALIGN="right"
HSPACE=“40”
VSPACE=“40”
WIDTH="75%"
HEIGHT=“150”
FRAMEBORDER=0
SRC=http://www.mysite/mypage.htm >
</IFRAME>
Copyright 2005 - The Small Business Depot 67
HTML – Fundamentals
Hypertext links

<a href=“page.html” target=“blank” >Click this link </a>

 Creates new window for the page

<a href=“page.html” target=“parent” >Click this link </a>

 Opens page in the parent frame/wind of this frame/window

<a href=“page.html” target=“top” >Click this link </a>

 Opens page in top most frame/window

Copyright 2005 - The Small Business Depot 68

HTML – Fundamentals
DIV and ILAYER

Allows you create a position-able block of

content.

Content
positioned
within this
block

Copyright 2005 - The Small Business Depot 69

HTML – Fundamentals
DIV

<div attributes> content </div>

attributes
ID=“name”
STYLE = “style parameters re: CSS”

Copyright 2005 - The Small Business Depot 70

HTML – Fundamentals
DIV

< DIV ID=“fred”

STYLE = “POSITION:absolute|relative;
VISIBILITY:visible:hidden;
Z-INDEX:number;
WIDTH:width in pixels;
HEIGHT:height in pixels;
TOP:pixels from top of page or block;
LEFT:pixels from left edge of page or block;
PADDING:margin in pixels;
other style attributes; “ >
content
</DIV>
Copyright 2005 - The Small Business Depot 71
HTML – Fundamentals
DIV

content

content
contentc
content content

content
content

Copyright 2005 - The Small Business Depot 72

HTML – Fundamentals
DIV

<div style="position:absolute; left:100px;

top:100px; width:100px; height:100px;
background-color:#ffffff; ">

Copyright 2005 - The Small Business Depot 73

HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)

Styles enable you to define a consistent 'look' for

your documents by describing once how
headings, paragraphs, quotes, etc. should be
displayed.

Style sheet syntax is made up of three parts:

selector {property: value}

selector = element.class
Copyright 2005 - The Small Business Depot 74
HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)

H1 {text-align: center; color: blue}

A {color:green; font-familiy:arial,courier; font-weight:bold;}

td { align:center; background-color:grey; border-color:red;}

div {position:absolute; visibily:hidden; margin:10px }

font {color:navy; font-size:2pt; font-face:trebuchet; }

hr {color:#ff0000; width:80%; align:center; }

table {width:80%; align:center; border:2px; padding:5px; }

Copyright 2005 - The Small Business Depot 75
HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)

H1 {text-align: center; color: blue}

H1.widget {text-align: center; color: red; font-size:80%; }

A {color:green; font-familiy:arial,courier; font-weight:bold;}

A.menu {color:cyan; font-familiy:arial,courier; font-style:italics;}

td { align:center; background-color:grey; border-color:red;}

td.figure { align:right; background-color:white; border-color:black;}

font {color:navy; font-size:2pt; font-face:trebuchet; }

font.fred {color:blue; font-size:2pt; font-face:trebuchet; font-weight:bold; }

element.class {property:value; }

Copyright 2005 - The Small Business Depot 76

HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)
Embedded

<head>
<title> My Page Title </title>

<style TYPE="text/css >

<! - -
element.class { property:value; }
element.class { property:value; }
-->
</style>
</head>
Copyright 2005 - The Small Business Depot 77
HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)
Linked

Styles can be defined in a separate file

<font style=“property:value; “> text </font>

<font class=“fred”> text </font>

mystyles.css

<head>
<LINK REL="stylesheet" HREF="mystyles.css“
TYPE="text/css">
</head>
Copyright 2005 - The Small Business Depot 78
HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)

/* Example style sheet file (note how this comment was created) */

BODY {background: #FFFFD8; margin-top: 20}

A:link {color: #400080; background: #FFFFD8}

H1 {font-weight: bold; text-align: center; color: #006000;

background: #FFFFD8; font-family: Gill Sans, Arial, sans-serif; }

font.caption {font-family: Gill Sans, Arial, sans-serif; font-style: italic; }

/* End of example style sheet file */

Copyright 2005 - The Small Business Depot 79

HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)
Inline

Styles can be placed within individual elements

<font style=“color:red; font-face:ariel;” >

Copyright 2005 - The Small Business Depot 80

HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)

Inline > Embedded > Linked

Defining the style of your text

linked -> font-family:arial,georgia;
embedded -> color:navy;
inline -> font-size:2pt;

Copyright 2005 - The Small Business Depot 81

HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)

Using IDs

 IDs enable you to define a unique style which you can apply to a number of
elements.

<STYLE>
<!–
#copyright {font-style:italic; font-size:smaller; }
-->
</STYLE>

<p ID=“copyright”> Any textual content </p>

Copyright 2005 - The Small Business Depot 82

HTML – Fundamentals
Images

<img src=“images/pic1.jpg” width=75px, height=50px />

<img class=“pics” src=“images/pic1.jpg” />

img.pics { width:75px; height:50px; border-width:3px }

Copyright 2005 - The Small Business Depot 83

HTML – Fundamentals
Using Images

Images take longer to download than text

The larger the image, the slower the page
Use optimization software
Use thumb nail images

Copyright 2005 - The Small Business Depot 84

HTML – Fundamentals
Other uses of Images

Page background (not recommended)

 <body background-image = “url” >
 <body class=“background”>
• body.background { background-image:$url; }
Table background
 <table background-image=“url”>
 <table class=“background”>
• table.background { backlground-image:url; }
DIV background
 <div style={ background-image:url; } >

Copyright 2005 - The Small Business Depot 85

 Resources
http://www.w3schools.com/

 HTML Tutorials  XML Tutorials  .NET (dotnet)

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

Copyright 2005 - The Small Business Depot 86

Courses at FVCC
Introduction to Web Design
FrontPage Web Design
Intermediate Web Design
Advanced Topics in Web Design
Web Site Promotion
Basic Perl Programming
Using Macromedia Studio MX

Copyright 2005 - The Small Business Depot 87