Web Designing

WEB DESIGNING : 

WEB DESIGNING By, Saravana Kumar.M

What is Web-Designing : 

What is Web-Designing Web design is the skill of creating presentations of content(usually hypertext or hypermedia) that is delivered to an end-user through the World Wide Web, using a Web Browser or other Web-enabled software . The intent of web design is to create a website (a collection of electronic documents and application that reside on a Web server/servers). The website may include text, images, sounds and other content, and may be interactive.

Webpage Layout and Web design : 

Webpage Layout and Web design Technical Definitions: A Webpage is a single HTML document. A Website is a collection of related WebPages. Designing a good website requires more than just putting together a few pages.

Web Page Layout : 

Web Page Layout Layout for Web Page is very important Poor Layouts makes for Difficult navigation Hard to locate information for page Visually unappealing

Tables, Tables, Tables……… : 

Tables, Tables, Tables……… Use tables to layout your pages. Make the table border invisible. A 2x2 table works well

Areas of a Webpage : 

Areas of a Webpage Menu Header Logo Content

A 2x2 Layout Page : 

A 2x2 Layout Page

Table within a table : 

Table within a table

The Outer Table : 

The Outer Table

The Inner Table : 

The Inner Table

The Inner Table : 

The Inner Table

Centered with Three Columns : 

Centered with Three Columns

Really Complicated Design : 

Really Complicated Design

Monitors & Dimensions : 

Monitors & Dimensions Monitor resolution affects how you should lay pages out 800x600 = 50% - 760 x 420 pixels in browser window 1024x768 = 35% 640x480 = 3%* - 595 x 360 pixels *Was 20% three years ago

Dimensions in 2x2 Table : 

Dimensions in 2x2 Table Header Content Menu Up to 760 wide* 100-140 wide Up to 650 wide

Different Resolutions : 

Different Resolutions Some of the Resolutions are available in http://www.dreamink.com/design6.shtml

Page Width : 

Page Width Because monitors differ (640x480, 800x600, 1024x768), pages look different. You can use a % width for a table, for example make it 80% of the page width.

Splash Page : 

Splash Page An initial Web site page used to capture the user's attention for a short time as a promotion or lead-in to the site home page or to tell the user what kind of browser and other software they need to view the site. To have the splash page automatically move to the home page after a specified delay, include the HTML tag in the splash page as in this example with a 10-second delay: < META http-equiv="refresh" content="10; URL=http://www.somesitename.com/home.html" > The advantage of a splash page is that you can create effects or provide information that is only needed once a visit. For example, a user can keep coming back to the home page without having to be bothered with browser requirements.

Splash Page : 

Splash Page The index.html file is called the “Splash Page” It is the key page—the first page visitors usually see Must be visually attractive, informative, and easy to navigate Examples: www.projectpuffin.org www.uncommonadv.com www.rainforestandreef.org

Site Map : 

Site Map

Design Theme : 

Design Theme Choose a common layout for your website. The Splash Page will probably differ but interior pages should be the same. Use tables to control placement throughout.

Consistency in Design : 

Consistency in Design Use the same font throughout! Use consistent graphics in website – do not use ultra modern on one page and calligraphy on another Use color scheme that is consistent

The Font Barrier : 

The Font Barrier Only fonts you can reliably use are Times New Roman (Times) and Arial (Helvetica) Text in site should be one of these choices How to overcome this? Any font used in graphics is loaded as a graphic, and does not rely upon the font being on the user’s computer Make cool font images in Photoshop

Testing : 

Testing Test your website as you go along. If you’re in the computer lab and there’s an empty computer next to you, log into it and check out your web page from there Make sure it works in Netscape Navigator and Internet Explorer Make sure all pictures come up on a different machine

Where to get help on design : 

Where to get help on design Web Pages for more info http://info.med.yale.edu/caim/manual/contents.html Good places for Graphics http://www.clipart.com/en/ http://free-clip-art.com/ Fonts http://www.1001freefonts.com/fontfiles/main.htm

Thank You : 

Thank You