web site design principles -...
TRANSCRIPT
F.Y.B.Sc.I.T.
Web Technology
Unit-I & Unit-II
PRINCIPLES OF WEB DESIGNING & WEB TECHNOLOGY
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
1
WEB SITE DESIGN PRINCIPLES
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce, Goregoan West
2
DESIGN FOR THE MEDIUM Destination is computer not page Language is Hypertext not linear test Consider fonts, color and layout Craft the “LOOK AND FEEL”
User interface Make your design portable
Accessing across different browsers, OS & Comp.
Design for Low bandwidth Test your page at different connection speed Use less graphics.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
3
DESIGN FOR THE MEDIUM CONT.. Plan for clear presentation and easy access
to you information Presentation and Organization of Information and Graphics and navigation option Make information easy to read, less fonts and color,
lengthy passage of test Computer is low reading media Light source coming from the behind tires the eyes. Break text into reasonable sentence Include heading Control the horizontal length
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
4
DESIGN THE WHOLE SITE
Plan for unifying theme and structure Fonts, color, layout should say about your site
and what site want to convey Create smooth transitions
By repeating color and font and using page layout Avoid random, jarring changes
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
5
DESIGN THE WHOLE SITE CONT.. Use a grid to provide visual structure
Grid is a conceptual layout that organized page into columns and rows
You can imposed a grid to provide visual consistency throughout your site.
Table elements can be used to built the grid Use of Active White Space
Whites spaces are blank area of a page It is used to define the area of a page It is deliberately used PASSIVE WHITE SPACES are blank area that border the
screen.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
6
DESIGN FOR THE USER Design for the interaction
Use meaningful column headings, linked text and short description.
Organized linked into related topic groups and separate groupings with white space, graphics or background color
Design for location Position the important in the middle of the window the
on top and so on (less important at the left margin) Guide the user’s eye
Track user’s eye movement Users are most comfortable with paper based
information Screen based information is landscape such as
television, clockwise pattern
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
7
DESIGN FOR THE USER CONT.. Keep a flat hierarchy
Don’t allow to navigate through too many layers of your web site.
Structure you web site to include section or topic level navigation page so user quickly find content
Use the power of hypertext linking You decide how user move through you site Provide link within the text. Provide link to return, jump down the page and
back to the TOP of the page
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
8
DESIGN FOR THE SCREEN
Destination for web page is computer different from the printed page so consider the following points: Shape of a screen: it is not a portraits but landscape. While paper reflect light, computer passes light through
it from behind Don’t use blue link on black Don’t use italic text, it is hard to read on the screen Don’t allow for Horizontal scroll
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
9
PLANNING THE SITE
When we want to build or restructuring web site, manydesigners simply do not know where to begin. Ratherthan rushing straight to the computer, the best way totart is by picking up a pencil and paper and sketchingout site design.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
10
WHAT YOU WILL LEARN……?
Create a site specification documents Identify the content goal Create a user-focused site by analyzing your audience Consider the different roles and talents necessary to
build a site Create naming convention for your site files Build a relative files structure that is portable to
different web servers Create a flowchart that depicts the structure of you
design
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
11
CREATE A SITE SPECIFICATION
Determine you objectives You may want to increase comm. among employee,
gain visibility, provide a service, attract new customer etc…
Make sure that your justification is valid Start your site by creating a site specification
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
12
IDENTIFY THE CONTENT GOAL Examine closely what type of site you are creating
Your objective and user’s objectives Think about type of content you are presenting The following sites demonstrate ways to focus your content Billboard--- business and commercial venture Publishing--- newpapers Special interest, public interest and non-profit organization---
news and current information for general public Virtual gallery--- to show off samples of all types of arts and
design E-commerce, catalog and online shopping--- Product support---Manufacturer can distribute infor., upgrades,
troubleshooting advice etc… Intranet & extranet---Many companies build web site only for
those who have access to their intranet.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
13
ANALYZE YOUR AUDIENCE
What user want when they come to your site? How can you attract them and entice them visit
again? What types of computer and connection speed
does your typical visitor have?
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
14
BUILD WEBSITE DEVELOPMENT TEAM
Server administrator HTML coders Designers Writer and information designer Software programmer Database administrator Marketing
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
15
FILES NAMES AND URL’S When you upload site on web server, may run different OS from
your local development sys Transferring ur files to the server may break local URL links
because of either file name or directory structure inconsistencies
FILE NAMING Case sensitivity Character Exceptions
May space is valid in Macnitosh or PC but not in UNIX or Windows File extension
File must end with .htm or .html File name
Use lower case letters and avoid special characters Default main page name--- default.htm (Use Windows NT),
main.htm, home.htm, indes.htm etc…
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
16
URL (UNIFORM RESOURCE LOCATOR)
Complete URL It include protocol--- browsers uses to access the file Server or domain name Relative path File nameExample: <A HREF=http://www.mysite.com/business/trends/laptop.htm>
Partial URL When u are linking file that resides on your own computer is a
partial URL, in which domain name and protocol is omitted The file resides in the same direcory need no pathExample: <A HREF=“laptop.htm”>link text</A>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
17
Protocol Domain path File name
DIRECTORY STRUCTURE
When your site ready to upload on the web server, web server contain user area containing folder in each user.
Your files are stored in user area. If you do not buy a domain name, your files
will store in public area User can use following address to access
your site: --- www.webserver.com/user2/. If you buy the domain name, the name you
choose you name. Which is easy to remember
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
18
DIAGRAM THE SITE Plan your site by creating flowchart that shown the
structure and logic behind the content presentation andnavigation
CREATE INFORMATION STRUCTURE: think about informationneed of your user and how they can best access thecontent of your site, consider what information designmap should look like: See the following structure. Linear structure Tutorial structure Web Structure Hierarchical Structure Cluster Structure Catalog Structure
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
19
LINEAR INFORMATION STRUCTURE
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
20
Main Page
Sub Topic
TUTORIAL STRUCTURE
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
21
Concept
Lesson
Review
IndexTable of ContentSite Map
Main Page
WEB STRUCTURE Created By: Asst. Prof. Ashish Shah,
J.M.Patel College of Commerce, Goregoan West
22
Main Page
HIERARCHICAL STRUCTURECreated By: Asst. Prof. Ashish Shah,
J.M.Patel College of Commerce, Goregoan West
23
Main Page
Site Map
Section Page
Section Page
Section Page
Section Page
Section Page
Content PageContent
Page
Content Page
Content Page
Content Page
Content Page
Content Page
CLUSTER STRUCTURECreated By: Asst. Prof. Ashish Shah,
J.M.Patel College of Commerce, Goregoan West
24
Content pages
Main Page
Site Map
Section Page
Section Page
CATALOG STRUCTURECreated By: Asst. Prof. Ashish Shah,
J.M.Patel College of Commerce, Goregoan West
25
Main Page
Content Page
Search Page
Item Page
Shopping Char
ExitCheckout
PLANNING SITE NAVIGATION
YOU WILL LEARN You will understand navigation principal Build navigation schemes to meet users need Provide location information Use graphics for navigation and linking
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
26
CREATING USABLE NAVIGATION
The PC Webopedia defines Hypertext as a System “In which objects (text, pictures, music, program and so on) can be creatively linked to each other… you can move from one object to another even though they might have different form.
The idea of Hypertext introduced in 1960by Ted Nelson mean non-sequential writing
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
27
Effective navigation includes providing cues to the user’s location.
Provide enough location information. Where am I? Where can I go? How do I get there? How do I get back to where I started?
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
28
To allow to answer these questions, provide the following information
Let the user know their current page and what type of content they are viewing.
Let user know where they are in relation to the rest of the web site.
Provide consistent, easy to understand links. Provide alternatives to the browsers back
button that let user return to their starting point.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
29
Limiting information overload Create manageable information segment
Break you content into smaller files and then link them together, Provide logical grouping
Control page length Don’t allow user to scroll through never ending
page Long files means long time to download
Use hypertext to connect facts, relationship and concept Provide linking to related topics, concept, facts. Know your material.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
30
USING TEXT BASED NAVIGATION It is most effective way to navigate your site. It can work in both text only and graphical
browser. LINKING WITH TEXT BASED NAVIGATION BAR
Table of content page must link to other pages of web site so that user can click on link and view the pages.
You can meet this need by adding TEXT-BASED NAVIGATION BAR
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
31
You can add this bar to the top of every page. The code will be as follows:
<DIV ALIGN=CENTER><A HREF=“index.htm”>Home</A> | <B>Table of
Contents </B> | <A HREF=“contindx.htm”>Index</A> </DIV>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
32
LINKING TO INDIVIDUAL FILES
<A href=“chapter1.htm”>Chapter 1</A>
LINKING TO DOCUMENT FRAGMENTFile Name: red.html<html><body bgcolor="red"><A NAME="TOP"><center><h1>SADIQUE</h1><center>
Hi how are yoiu<a href="#hi">click</a></A>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<A name="hi">Hir </a><A HREF="#TOP">TOP</A>
</body><html>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
33
LINKING TO EXTERNAL DOCUMENT FRAGMENT
File Name: red1.html<html><body bgcolor="BLUE"><A NAME="TOP"><center><h1>SADIQUE</h1><center>
<A HREF="RED.HTML#HI">JUMP ON HI</A><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<A HREF="#TOP">TOP</A>
</body><html>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
34
ADDING PAGE-TURNER
It allow sequential navigation of the page Useful when user want to read page
sequentially Allow to move next or previous Work well with linear structureSee Enhanced navigation barHome | Table of Contents | Previous | Next | Index
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
35
ADDING CONTEXTUAL LINKING
It allow user to jump to related topics or cross references by clicking the word or item that interest them.
Include link within a line of text is more effective than including list of keywords.
Example: May leave white space intact: For more information please contact:
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
36
USING GRAPHICS BASED NAVIGATION Using text image for navigation Using Icon for navigation Using ALT attribute
It provide information if browsers are not able to display graphics
Example:<A href=“parent.htm”><img border=0 src=“smparent.gif” width=113 height=35 ALT=“Parent’s Page”></a>
Limitation ALT attribute: If text is large and icon is small text is not display properly, so msg is displays in pop-up menu.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
37
CREATING PAGE TEMPLATESYOU WILL LEARN
How table can enhance the display of your content
Table elements allow to create grid-based layout
Use HTML table elements and attributes to customize page template
Learn how to take page design from concept to HTML code
Recognize basic page template
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
38
UNDERSTANDING TABLE BASICS
Initially table used to display only tabular data Designer want to avoid left margin constraints
in HTML Using table elements they had the control and
tools to build columnar layout align text, create gutters and structure page
It is used as a primary design toll for WEB
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
39
USING TABLE ELEMENT
<TABLE BORDER><CAPTION>76-84mm Socket Pricing</CAPTION><TR><TH>Stock Number</TH><TH>Description</TH><TH>List Price</TH></TR><TR><TD>3476-AB</TD><TD>76mm Stock</TD><TD>45.00</TD></TR><TR><TD>3478-AB</TD><TD>78mm Stock</TD><TD>47.50</TD></TR><TR><TD>3480-AB</TD><TD>80mm Stock</TD><TD>50.00</TD></TR></TABLE>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
40
Defining table attributes1. Using Global attributes2. Using Row-Level attributes3. Using Cell-Level attributes
1. Global attributes affect the entire table and these attributes can be place in the initial <TABLE> tag. ALIGN, BACKGROUND, BGCOLOR, BORDER, CELLPADDING, CELLSPACING, HEIGHT, WIDTH (See table 5-1)
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
41
2. Using Row-Level attributes (See Table 5-2)It affect an entire row and place these attributes in the beginning <TR> tag. ALIGN (Horizontal align: LEFT, CENTER, RIGHT-LEFT is
default) BGCOLOR (define background color for cells within the
row) VALIGN (Vertically align: TOP, MIDDLE, BOTTOM-Default is
MIDDLE)
3. Using Cell-Level attributes (See Table 5-3)It affects only content of one cell and plce these attributes at the beginning <TD> tag. It takes precedence over low-level attributes:
<TR ALIGN=CENTER><TD>Center-aligned text</TD><TD ALIGN=RIGHT>Right-aligned Text</TD></TR>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
42
SPANNING COLUMNS
COLSPAN attribute span multiple columns of a table It always span to the rightExample:
<TABLE BORDER><!-- <CAPTION>76-84mm Socket Pricing</CAPTION> --><TR><TH COLSPAN=3>76-84mm Socket Pricing</TH></TR><TR><TH>Stock Number</TH><TH>Description</TH><TH>List Price</TH></TR><TR><TD>3476-AB</TD><TD>76mm Stock</TD><TD>45.00</TD></TR><TR><TD>3478-AB</TD><TD>78mm Stock</TD><TD>47.50</TD></TR><TR><TD>3480-AB</TD><TD>80mm Stock</TD><TD>50.00</TD></TR></TABLE>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
43
SPANNING ROWS
<TABLE BORDER><CAPTION>76-84mm Socket Pricing</CAPTION><TR><TH COLSPAN=4>76-84mm Socket Pricing</TH></TR><TR><TH>Stock Number</TH><TH>Description</TH><TH>List
Price</TH><TH>Discount</TH></TR><TR><TD>3476-AB</TD><TD>76mm Stock</TD><TD>45.00</TD><TD
ROWSPAN=3>10% DISCOUNT</TD></TR><TR><TD>3478-AB</TD><TD>78mm Stock</TD><TD>47.50</TD></TR><TR><TD>3480-AB</TD><TD>80mm Stock</TD><TD>50.00</TD></TR></TABLE>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
44
HOME WORK
CREATING A PAGE TEMPLATE AND DEVELOP A DUMMY WEB PAGE
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
45
WEB TYPOGRAPHY You will understand Principles for type design on a Web site Use the <FONT> element Why you should use Cascading Style Sheet
instead of <FONT> Create Style rules using the CSS language Selectively apply CSS style rules
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
46
TYPE DESIGN PRINCIPLES
Type is a flexible medium that can express emotion, tone and structure based on the type choices you make. You also can go overboard by using too many faces and sizes, So you must stick with fonts that your user installed on their computers. If your font not available browser substitute the default font.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
47
As you work with type, consider the following principles for creating an effective design:
Choose fever fonts and sizes Page heading (24), sub heading(18) and body text(12)
Use available fonts See table 6-1 for available font on different OS Time New Roman is default
Design for legibility The size and face of the type use on your pages determine the
legibility of your text Font that are legible on paper can be more difficult to read on
screen Keep font big enough.
Avoid using text as graphics
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
48
CONTROLLING TYPOGRAPHY WITH <FONT> ELEMENT
Setting font size <Font size=6>Some text</Font> <Font size=+2>Some text</Font>
It set size=5: Default size =3 and +2 = 5
Specifying font alternates <Font size=5 face="ARIAL, batang">Some
text</Font>
Setting font color <Font size=5 face="ARIAL, batang"
color=red>Some text</Font>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
49
CONTROLLING TYPOGRAPHY WITH CASCADING STYLE SHEET
CSS offer much greater control over <FONT> Gain more control with less code
If you want every H1 heading comes in green and centered, doing so using <FONT> you need to write following code for every instance of H1: <H1 align=center><Font color=green>The Text</Font></H1>
with CSS you can express this style once as a rule in style sheet: H1{color:green; Text-align: center}
This style rule affect every <H1> elements on any page that use the CSS
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
50
CSS BASIC
It is based on rules that select an HTMLelements and declare style characteristicsfor the elements. You can state set of rules,known as style sheet, in the head section ofan HTML documents or include them in aseparate documents known as an externalstyle sheet used when working with numberof HTML documents.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
51
UNDERSTANDING STYLE RULES<html><head><style type="text/css">H1 { color= red }p { color: blue; font-size: 20pt }</style> </head><body ><h1>Hi how are you my dear ......</h1><p>Hi! I am fine Herehow about you?Lets come and meet me at my residence address... We will
have lots of fun</p></body></html>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
52
Selector
Declaration
Property Value
LINKING WITH AN EXTERNAL STYLE SHEET
A new file names is style1.css/* Stylesheet #1 */H1 {color=red}p {color:blue; font-size: 20pt}
Another file name abc.html<head><link href="style1.css" rel="stylesheet"></head>
Href attributes specify the URL of the style sheet and all relative file location rules apply
Rel attributes specify the relation ship bet linked and current documents
You only have to change in only one documents and it affect all the pages
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
53
CSS SELECTION TECHNIQUES Selecting Multiple Elements Selecting by Context Selecting with the CLASS attributesMore complex selection includes artificial division
using two elements <DIV> Block Division <SPAN> Inline Division These are useful with combination with CLASS
attributes and allow to create entirely new HTML elements. You can use these techniques in external style sheet
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
54
Selecting Multiple Elements If you want to apply same declaration for two or more
selector then use:<STYLE TYPE=“text/css”>H1 {Color: Green}H2 {Color: Green}</STYLE>
Selecting by Context It specify the exact context in which a style is applied.
To specify that <I> elements appear blue only within <H1> elements use following code:
<STYLE TYPE=“text/css”>H1 I {Color: Blue}</STYLE>This rule state that <I> elements appear blue only when they within an <H1>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
55
<STYLE TYPE=“text/css”>H1,H2 {Color: Green}</STYLE>
Selecting with the CLASS attributes It allows you to write rules and then apply them
to groups of elements. It allows you to define your own tag and apply
them anywhere you want The general syntax is :
. Class-name { Declaration} (. Is a flag character indicates selector is a class selector)
Ex: <style type=“Text/css”>.QUOTE {color: red}</style>
Use class attributes in the documents: <p Class=“quote”>Some Text here </p>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
56
Working with <DIV>It specify logical division within a document that have their own name and style properties<style type=“text/css”>DIV.INTRO {Color: red}</style><DIV CLASS=“INTRO”>SOME TEXT <DIV>
and <SPAN> elementsIt specify inline elements within a document that have their own name and style properties<style type=“text/css”>SPAN.LOGO {Color: red}</style>Welcome to the <SPAN CLASS=“LGO”> Wonder Software </SPAN> web Site
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
57
CSS FONT PROPERTIES
Font families and alternates Font-family:arial, Font-family: Arial, Helvetica
Font Size Font-size=18pt (See Table 6-2)
Font weight Font-weight: bold (normal, bold, Bolder, Lighter)
Line Weight Line-height:30pt
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
58
•Letter spacingLetter-spacing: 2pt
•Text indentText-indent: 24pt
•ColorColor: red and background-color: blue
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
59
SPECIFYING BLOCK LEVEL SPACE VALUES Padding: The area between the text and border—
Padding-top, Padding-bottom, Padding-left, Padding-right
Ex: p {padding-left:24pt; Padding-right:50pt} Border: The area separating the padding and
margin Margin-top, Margin-bottom, Margin-left, Margin-right Ex: p {margin: 30px}
Margin: The area outside the border {BORDER: STYLE WIDTH COLOR} Ex: {Border: solid 2pt red}
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
60
HOME WORK
STYLING WITH CSSCHAPTER: WEB TYPOGRAPHYPAGE NO. 161
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
61
GRAPHICS AND COLOR Understand difference between the Web-
based image file formats: GIF, JPG and PNG Know which type of file format is to use for
which type of image Understand the basic of computer color Use <IMG> element and attributes to display
image effectively Use hexadecimal color values to add color to
your pages
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
62
FILE FORMAT BAICS We currently use only three file formats:
GIF (Graphics Interchange Format) JPG (Joint Photographics Expert Group) JPEG PNG (Portable Network Graphics)
GIF: (Graphics Interchange Format) It is designed for online delivery of graphics. It uses lossless compression technique The Color depth is 8-bit, allowing a palette of no more then
256 colors If we use fever color, compression is big and smaller file size It is not best for photographs or more complex graphics You can create animation using multiple images
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
63
JPG (Joint Photographics Expert Group) JPEG Best for photographics and continues tone images 24-bit images that allows millions of colors It do not use palette to display It uses lossy compression routine: loss of quality but
unnoticeable Faster download Using Adobe photoshop or other imaging software you
can translate photographics images into JPG format and also balance amount of compression versus the resulting image quality. Higher the compression, lower the image quality.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
64
PNG (Portable Network Graphics) Designed specially for the Web Available from 1995 Not popular because lack of browser support It support 8-bit index color, 16-bit grayscale, and
24-bit truecolor images It does not compress a JPG do It does not support animation Another format support animation i.e. MNG
(Multiple Network Graphics Format) Now a day browser supporting
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
65
COMPUTER COLOR BASIC
Computer monitor display color by mixing three color i.e. (RGB) called color channel.
Monitor can express a range of intensity for each color channel from 0 (Absence of color) – 255 (Full intensity of color)
Color vary from monitor to another based on user preferences and brand of equipments
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
66
Color depth Amount of data use to create color on display is
called color depth If monitor display 8-bit data in each of the 3 color
channel i.e. (8 X 3 = 24), it has 24 color depth. 24-bit color depth can contain 17 million different
colors and are called true color images. If you monitor have only 16-bit color depth is it
called high color and some have 8-bit color depth. If monitor not supporting any color, then it makes
this color by mixing available color.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
67
DITHERING Browsers mix it own color if you display 24-bit
image on 8-bit monitor or file form not support 8-bit monitor have fever color to work (256 only) This type of color mixing is called Dithering The dithering will be most apparent in gradations,
shadow.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
68
JPG file on the left has lot of dithering in the sky and GIF on right exhibits a different color matching called banding (Banding is an effort to match the closest color from GIF palette to the original color in the photo. (Non-dithering image < dithering image), but banding images mean unacceptable images.
Using non-dithering colors We can create images that will not use dithering
process 216 non-dithering colors that re shared PCs and
Mac are Web palette and browser-safe color These color display properly across both platforms It applies to GIF and 8-bit PNG and not for JPG.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
69
CHOOSING GRAPHICS TOOL Adobe Photoshop and Illustrator
Full-featured, expensive, and takes time to master Adobe illustrator is a high end drawing/painting tool
Graphics Workshop Professional Lview Pro Macromedia Fireworks Paint Shop Pro Ulead PhotoImpact
(Last 5 product are available in less than $100 and contain full range if image-editing features.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
70
USING THE <IMG> ELEMENT
<IMG> is a replaced element means browser replace the <IMG> element with image file reference in SRC attribute.
<IMG> and empty element so never use closing tag Ex: <IMG SRC=“logo.gif”>
For other attributes see table 7-2 We can replace <IMG> with CSS
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
71
Specifying ALT, Width and Height attributes<IMG SRC=“trains.gif” width=305 Height=185 Alt=“Trains Picture”>
Removing Hypertext Border from image<IMG SRC=“trains.gif” width=305 Height=185 Alt=“Globe” Border=0>
Aligning text and Images<IMG SRC=“trains.gif” Align=top Alt=“Globe” Border=1><IMG SRC=“trains.gif” Align=Bottom Alt=“Globe” Border=1> (Default)<IMG SRC=“trains.gif” Align=Middle Alt=“Globe” Border=1>
Wrapping text<IMG SRC=“trains.gif” width=125 Height=185 alt=“P1” Align=left><IMG SRC=“trains.gif” width=125 Height=185 alt=“P1” Align=right>
Adding white space around images<IMG ALIGN=LEFT ALT=“SAILBOAAT” Border=0 HSPACE=15 VSPACE=15
SCR=“SAIL.GIF”>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
72
WORKING WITH HEXADECIMAL COLORS
HTML use hexadecimal number to express RGB color values
Hexadecimal numbers are base-16 numbering system, so the numbers run from 0-9 and A-F.
It is a six digit numbers: First Two Digit R (Red) Next Two Digit G (Green) Last Two Digit B (Blue)
It always contain in double quotes proceeded ‘#’. Ex: <Body BGCOLOR=“#FFFFFF”>
Cascading style sheet also accept hexadecimal color values.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
73
CHANGING LINK COLOR
LINK: The unvisited color. The default is blue ALINK: The active link color. This is the color
that displays when the user points to a link and holds down the mouse button. The default is Red.
VLINK: The visited link color. The default is purple Ex: <Body LINK=“CC3399” VLINK=“9900FF”>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
74
HTML FRAMESFrame element partition the canvas area of the
browser into multiple windows called frames andeach frame can display separate HTML document
Understand the benefits and drawback of theframe
Understand use and syntax of Frame Customized Frame characteristics like scroll,
border, margin etc… Understand the frame targeting and special
targeting names Design content to fit frameset properly Design framesets that accommodate different
screen resolution
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
75
INTRODUCTION Introduce by Netscape for the 2.0 release of its
browser Frameset now supported variety of browsersIt has some benefits and limitations Allow user to scroll independent without affecting
the content of adjoining frame Some content can always visible to the user like
search option, table of content etc… It works fine if keep them simple. (2 or 3 frames
are enough in a page)
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
76
Limitations Bookmarks
Not allow user to bookmark individual pages from a web site Download overhead
Browser is loading more then one document Confusing navigation
User can became confuse if complicated frame document set without enough navigation choices to let user jump to the page of their choice.
Virtual confusion Too many frame within the browsers window with its own
scroll bar can confuse Frames and search engine
Frameset code contains no actual content User preferences
If user want to display content without frame
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
77
FRAME SYNTAX<HTML><HEAD><TITLE>FRAME ROWS</TITLE></HEAD><FRAMESET ROW=“50%, 50%”>
<FRAME SRC=“TOP.HMTL”><FRAME SRC=“TOP.HMTL”>
</FRAMESET></HTML>
<HTML><HEAD><TITLE>FRAME COLUMNS</TITLE></HEAD><FRAMESET COL=“150, *”>
<FRAME SRC=“LEFT.HMTL”><FRAME SRC=“RIGHT.HMTL”>
</FRAMESET></HTML>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
78
THE <NOFRAMES> Tag It provide alternate page for user who do not have a
frame-compliant (SUPPORT) browser<HTML><HEAD><TITLE>FRAME COLUMNS</TITLE></HEAD><FRAMESET COL=“75%,25%”>
<FRAME SRC=“LEFT.HMTL”><FRAME SRC=“RIGHT.HMTL”>
<NOFRAMES><BODY>
(Alternate page HMTL code)</BODY></NOFRAMES></FRAMESET></HTML>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
79
NESTING FRAME Nesting allows you to break the screen into both
rows and columns frames<HTML><HEAD><TITLE>NESTING FRAME</TITLE></HEAD><FRAMESET ROW=“40%,*”>
<FRAME SRC=“TOPNAV.HMTL”><FRAMESET COLS=“20%,80%”>
<FRAME SRC=“LEFT.HMTL”><FRAME SRC=“RIGHT.HMTL”>
</FRAMESET></FRAMESET></HTML>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
80
NOFRAMES, RESIZING, SCROLLING BAR, FRAMEBORDER AND FRAME MARGIN
<HEAD><TITLE>NESTING FRAME</TITLE></HEAD><FRAMESET ROWS='100,*' FRAMEBORDER=0
FRAMESPACING=0><FRAME SRC='red1.HTML' NORESIZE SCROLLING=NO><FRAMESET COLS='80,*'>
<FRAME SRC='img.HTML' NORESIZE marginwidth=10 marginheight=50>
<FRAME SRC='red.HTML'></FRAMESET>
<NOFRAMES><body><H1>Browser is not supporting FRAMES</body></NOFRAMES></FRAMESET></HTML>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
81
TARGETING IN FRAMESET One frame display information consistently while
the content of second frame might change based on the user’s choice.
By default a link loads into the same frame from which it was selected
You can change it by targeting frameset. To target from one frame to another you must perform two task: Name your frames using the NAME attributes in the
FRAME element Target links to display their content in the named
frame
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
82
Naming Frame To name the frame add name attribute to the frame
<HTML><HEAD><TITLE>FRAME Targeting</TITLE></HEAD><FRAMESET COLS="150,*" BORDER=0>
<FRAME SRC="red1.html" SCROLLING=NO NORESIZE><FRAME SRC="red.html" Name="Main">
</FRAMESET></HTML>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
83
PUBLISHING AND MAINTAINING YOUR WEB SITE To make you web site live, you transfer site
files to a Web server. A web server is a computer connected to the
internet and running server software and this s/w used HTTP to server HTML files to web browser clients.
After choosing web server select file transfer software and upload the web sites files from your development machine to the Web server.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
84
CHOOSING INTERNET SERVICE PROVIDER
This is a company that host your Web pages on a Web server, making them available to any one who know your URL.
It provide space on web server only Small web site (Around 15-20 pages need 1-
2 MB) and for large one 10 MB.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
85
BUYING A DOMAIN NAME
Check whether your domain name is available or not
OR to register your own domain name visit Network Solution (www.networksolution.com)
It is a company responsible for registering .com, .net, .org domain names
Domain names must be removed every two year To complete the process you need IP address that
you will get from ISP
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
86
ISP COMPARISON CHECKLIST Is the ISP local or national? Does the ISP have enough local POPs (Point to
Presence) in your area code? Is their space available on their Web server for your web
site? Does the ISP offer technical support? When is support
staff available? How many email address do you get in an email
account? Does the ISP provide s/w such a FTP client? Does the ISP support the largest connection
technologies? Does the ISP offer enhanced services, such as SQL
database support, Secure Socket Layer (SSL) CGI scripting and Multimedia technology?
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
87
USING THE FILE TRANSFER PROTOCOL TO UPLOAD FILES
You need FTP software called FTP client Some s/w like FrontPage, Dreamweaver ete…
include built in s/w. You also can choose many shareware such as
CNET, Shareware.com and search FTP clientFTP programs to upload your files.
WS_FTP32 developed by Ipswitch software, butmost FTP client work same.
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
88
TESTING YOUR SITE
Testing Consideration Multiple Browsers Multiple Operating System Connection speeds Display type
Develop a feedback form Did you find information you needed? Was it easy or difficult Did you find the content easy to read Did you find web site easy to navigate
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce, Goregoan West 89
ATTRACTING NOTICE TO YOUR WEB SITE Working with search engines Use meaningful titles Using <META> Elements (Empty tag)
It allow you to add your web site in search engines (like AltaVista, Excite, Inktomi and HotBot but other search engine ignore)
<META> is resided in <HEAD> allow to specify information about documents.
<META> used Name and Content attributes See example in next page
Be careful with frames Use Alt text with images
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
90
Name Attributes ValueAuthor: The Author of the PageDescription: A short Text-based description of
the content of the web siteKeywords: A comma separated list of
keywords that are potential search terms a user might use to find your site
Generator: This name and version generated by page-authoring programs
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
91
Example on <META> element
<HTML><HEAD><META NAME=“Description” CONTENT=“Joel Sklar,
Specialising in course development and Delivery on Web”><META NAME=“Keywords” CONTENT=“Joel, Joel Sklar, Sklar,
HTML, XML, Web, Course Design, Course Development, XML Links”>
</HEAD>----------</HTML>
Created By: Asst. Prof. Ashish Shah, J.M.Patel College of Commerce,
Goregoan West
92