WEB SITE DESIGN PRINCIPLES - jmpcollege.orgjmpcollege.org/downloads/UNIT_I_II_WEBSITE_DESIGN_PRINCIPLES.pdfIt can work in both text only and graphical browser. LINKING WITH TEXT BASED

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.


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


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


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.


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


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


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


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.


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


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


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.


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?


Goregoan West

14

BUILD WEBSITE DEVELOPMENT TEAM

Server administrator HTML coders Designers Writer and information designer Software programmer Database administrator Marketing


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…


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>


Goregoan West

17

Protocol Domain path File name

http://www.mysite.com/business/trends/laptop.htm�

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


Goregoan West

18

http://www.webserver.com/user2/�

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


Goregoan West

19

LINEAR INFORMATION STRUCTURE


Goregoan West

20

Main Page

Sub Topic

TUTORIAL STRUCTURE


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,


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,


24

Content pages

Main Page

Site Map

Section Page

Section Page

CATALOG STRUCTURECreated By: Asst. Prof. Ashish Shah,


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


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


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?


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.


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.


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


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>


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>


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>


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


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:


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.


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


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


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>


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)


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>


Goregoan West

42

SPANNING COLUMNS

COLSPAN attribute span multiple columns of a table It always span to the rightExample:

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


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>


Goregoan West

44

HOME WORK

CREATING A PAGE TEMPLATE AND DEVELOP A DUMMY WEB PAGE


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


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.


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


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>


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


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.


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>


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


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


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>


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>


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


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


Goregoan West

58

•Letter spacingLetter-spacing: 2pt

•Text indentText-indent: 24pt

•ColorColor: red and background-color: blue


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}


Goregoan West

60

HOME WORK

STYLING WITH CSSCHAPTER: WEB TYPOGRAPHYPAGE NO. 161


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


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


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.


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


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


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.


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.


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.


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.


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


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


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.


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


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


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)


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


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>


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


<NOFRAMES><BODY>

(Alternate page HMTL code)</BODY></NOFRAMES></FRAMESET></HTML>


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


</FRAMESET></FRAMESET></HTML>


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>


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


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>


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.


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.


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


Goregoan West

86

http://www.networksolution.com/�

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?


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.


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


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


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>


Goregoan West

92

Documents

WEB SITE DESIGN PRINCIPLES - jmpcollege.orgjmpcollege.org/downloads/UNIT_I_II_WEBSITE_DESIGN_PRINCIPLES.pdfIt can work in both text only and graphical browser. LINKING WITH TEXT BASED