آموزش طراحی وب سایت جلسه هفتم - نکات مربوط به طراحی یک...

آموزش طراحی وب سایتجلسه هفتم - نکات مربوط به طراحی یک وب

سایتتدریس طراحی وب

برای اطالعات بیشتر تماس بگیریدتاو

09125773990شماره تماس: 09371410986 : پست الکترونیک

[email protected]

Web Design TrainingPage Layout

Some Spotlight

Author: Babak TavatavPart 07

Understanding a Site’s Aims• Are you dealing with a product or a service?• How often will people require this product or service?• Once they’ve ordered a product or service, are they likely to come

back to the site to order again or find out more information?• Are you trying to promote a product or service to people who will

not have heard of it, or trying• to explain more about this particular product or service to people

who know what they are after?• What is special about your product or service that differentiates it

from the rival?• Are you trying to sell direct from the site, put the visitor in touch

with a sales person (create a sales lead), or tell people where they can get a product or service?

• Identifying Key Elements for Every Page

Page Size (and Screen Resolution)

Different computers have different screen resolutions (800 × 600 and 1024 × 768 are the most popular).

Different users have different size monitors (15, 17, 19, 21+ inch monitors).

People often don’t browse with the whole screen showing — they tend to have toolbars and other applications taking up part of the space.

640 x480 800 × 600 1024 × 768 1152 × 864 1280 × 1024

jan 2008 0 8 48 3 28

jan 2007 0 13 53 3 22

jan 2006 0 21 58 3 12

jan 2005 0 28 54 3 10

jan 2004 1 37 49 3 6

jan 2003 2 46 40 3 4

jan 2002 4 52 34 2 3

jan 2001 7 54 30 2 2

jan 2000 11 56 25 2 2

Sketching the Placement of Elements

• Branding• Global navigation (a link to the home page and the main sections of

the site — note that the• home page should almost always be the first item of navigation)• Subsection navigation (if you are in one of the subsections of the

site, the subsection navigation• should contain links to the sections within that section)• A heading or title for the page (except for the home page which

probably does not need one)• Enough of the content that users can tell what the page is about• An option to search the site• Promotions/Advertising (self or others)

Single-Column Layouts<?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Single Columns CSS</title> <link rel="stylesheet" type="text/css" href=“1c.css" /> </head> <body> <div class="page"> <div class="header"><h1>My Company Name</h1></div> <div class="nav"><a href="">Home</a> | <a href="">Products</a> | <a href="">Services</a> | <a href="">About Us</a> | <a href="">Contact Us</a></div> <div class="content">

<h2>Sample Web Page</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam

semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. Proin erat. Donec sem. </p>

<p>Mauris quis urna. Donec sodales, risus non dictum ultricies, nisl lorem imperdiet sapien, vel euismod orci risus non lorem. Nam tempus, pede nec tincidunt lacinia, lectus mauris malesuada quam, a tincidunt elit justo a ligula. Nunc cursus nonummy nulla. Quisque adipiscing. Donec nisl elit, viverra in, elementum eu, auctor id, eros. Sed sagittis, neque vel blandit tempor, justo odio posuere nulla, at condimentum lorem nibh suscipit arcu. Mauris rhoncus, nunc vel hendrerit aliquet, purus velit iaculis mauris, aliquam eleifend ante augue ut velit. Pellentesque sed turpis vel odio varius posuere. Ut urna mi, ultricies ut, lobortis in, varius porta, nulla. </p>

</div> </div> </body></html>

1c.cssbody {background-color:#d6d6d6; font-family:arial, verdana, sans-serif;}

.page { width:700px; margin-left:auto; margin-right:auto; text-align:left; font-size:12px; background-color:#ffffff; border-style:solid; border-width:1px; border-color:#666666;}

.header {background-color:#f3f3f3; padding:3px;}

.nav {font-weight:bold; background-color:#e3e3e3; padding:5px;}

.content {padding:10px;}

.sacrificial {font-weight:bold; background-color:#e3e3e3; padding:5px; vertical-align:top;}

Two-Column Layouts<?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Two Columns Layout Using CSS</title> <link rel="stylesheet" type="text/css" href=“2.css" /> </head> <body> <div class="page"> <div class="header"><h1>My Company Name</h1></div> <div class="nav"> <a href="">Home</a><br /><a href="">Products</a><br /><a href="">Services</a><br /><a href="">About Us</a><br /><a href="">Contact Us</a> </div> <div class="content"> <h2>Sample Web Page</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae

nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. Proin erat. Donec sem. </p>

<p>Mauris quis urna. Donec sodales, risus non dictum ultricies, nisl lorem imperdiet sapien, vel euismod orci risus non lorem. Nam tempus, pede nec tincidunt lacinia, lectus mauris malesuada quam, a tincidunt elit justo a ligula. Nunc cursus nonummy nulla. Quisque adipiscing. Donec nisl elit, viverra in, elementum eu, auctor id, eros. Sed sagittis, neque vel blandit tempor, justo odio posuere nulla, at condimentum lorem nibh suscipit arcu. Mauris rhoncus, nunc vel hendrerit aliquet, purus velit iaculis mauris, aliquam eleifend ante augue ut velit. Pellentesque sed turpis vel odio varius posuere. Ut urna mi, ultricies ut, lobortis in, varius porta, nulla. </p>

</div> </div> </body></html>

2.cssbody {background-color:#efefef; font-family:arial, verdana, sans-serif; text-align:center;}

.page { margin-left:auto; margin-right:auto; text-align:left; width:700px; font-size:12px; background-image:url(images/2columnbackground.gif); background-repeat:repeat-y; border:1px solid #666666;}

.header { padding:3px; background-color:#ffffff;}

.nav { font-weight:bold; padding:5px; float:left; width:100px;}

.content { padding:10px; margin-left:100px;}

Three-Column Layouts

??????

Exercise

Shading Multiple Rows of a Table

body{ color:#000000; background-color:#ffffff; font-family:arial, verdana, sans-serif; font-

size:12pt;}

th {font-weight:bold; text-align:left; background-color:#fff336;}

td {padding:3px;}.odd {background-color:#d6d6d6;}.even {background-color:#ffffff;}

Structuring Your Forms with <fieldset>and <legend> Elements

The <fieldset> element creates a border around the group of form controls to show that they are related.The <legend> element allows you to specify a caption for the <fieldset> element, which acts as a title for the group of form controls. When used, the <legend> element should always be the first child of the <fieldset> element.

<?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head> <title>Organizing Elements With <fieldset> and <legend>Elements</title></head>

<body><form action="http://www.example.org/competition.asp" method="post" name="frmComp"> <fieldset> <legend><em>Contact Information</em></legend> <label>First name: <input type="text" name="txtFName" size="20" /></label><br /> <label>Last name: <input type="text" name="txtLName" size="20" /></label><br /> <label>E-mail: <input type="text" name="txtEmail" size="20" /></label><br /> </fieldset> <fieldset> <legend><em>Competition Question</em></legend> How tall is the Eiffel Tower in Paris, France?<br /> <label><input type="radio" name="radAnswer" value="584" />584 ft</label><br /> <label><input type="radio" name="radAnswer" value="784" />784 ft</label><br /> <label><input type="radio" name="radAnswer" value="984" />984 ft</label><br /> <label><input type="radio" name="radAnswer" value="1184" />1184 ft</label><br /> </fieldset> <fieldset> <legend><em>Tiebreaker Question</em></legend> <label>In 25 words or less, say why you would like to win $10,000: <br /> <textarea name="txtTiebreaker" rows="10" cols="40"></textarea> </label> </fieldset> <fieldset> <legend><em>Enter competition</em></legend> <input type="submit" value="Enter Competition" /> </fieldset></form></body></html>

Tabbing Order

If you want to control the order in which elements can gain focus, you can use the tabindex attribute to give that element a number between 0 and 32767, which forms part of the tabbing order. Every time the

user presses the Tab key, the focus moves to the element with the next highest tabbing order (and again, Shift+Tab moves focus in reverse order).

<form action=”http://www.example.com/tabbing.asp” method=”get”name=”frmTabExample”><input type=”checkbox” name=”chkNumber” value=”1” tabindex=”3” /> One<br /><input type=”checkbox” name=”chkNumber” value=”2” tabindex=”7” /> Two<br /><input type=”checkbox” name=”chkNumber” value=”3” tabindex=”4” /> Three<br /><input type=”checkbox” name=”chkNumber” value=”4” tabindex=”1” /> Four<br /><input type=”checkbox” name=”chkNumber” value=”5” tabindex=”9” /> Five<br /><input type=”checkbox” name=”chkNumber” value=”6” tabindex=”6” /> Six<br /><input type=”checkbox” name=”chkNumber” value=”7” tabindex=”10” />Seven <br /><input type=”checkbox” name=”chkNumber” value=”8” tabindex=”2” /> Eight<br /><input type=”checkbox” name=”chkNumber” value=”9” tabindex=”8” /> Nine<br /><input type=”checkbox” name=”chkNumber” value=”10” tabindex=”5” /> Ten<br /><input type=”submit” value=”Submit” /></form>

Access Keys

• Access keys act just like keyboard shortcuts. The access key is a single character from the document’s character set that is expected to appear on the user’s keyboard.

<?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head> <title>Organizing Elements With <fieldset> and <legend>Elements</title></head>

<body><form action="http://www.example.org/competition.asp" method="post" name="frmComp"> <fieldset> <legend accesskey="c"><u>C</u>ontact Information (ALT + C)</legend> <label>First name: <input type="text" name="txtFName" size="20" /></label><br /> <label>Last name: <input type="text" name="txtLName" size="20" /></label><br /> <label>Email: <input type="text" name="txtEmail" size="20" /></label><br /> </fieldset> <br /> <fieldset> <legend>Competition Question</legend> How tall is the Eiffel Tower in Paris, France?<br /> <label><input type="radio" name="radAnswer" value="584" />584 ft</label><br /> <label><input type="radio" name="radAnswer" value="784" />784 ft</label><br /> <label><input type="radio" name="radAnswer" value="984" />984 ft</label><br /> <label><input type="radio" name="radAnswer" value="1184" />1184 ft</label><br /> </fieldset> <br /> <fieldset> <legend accesskey="t"><u>T</u>iebreaker Question (ALT + T)</legend> <label>In 25 words or less, say why you would like to win $10,000: <br /> <textarea name="txtTiebreaker" rows="10" cols="40"></textarea> </label> </fieldset> <br /> <fieldset> <legend>Enter competition</legend> <input type="submit" value="Enter Competition" /> </fieldset></form></body></html>

CHROME?

آموزش طراحی وب سایت جلسه هفتم - نکات مربوط به طراحی یک...

Documents