آموزش طراحی وب سایت جلسه هفتم - نکات مربوط به طراحی یک وب سایت تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: پست الکترونیک :
Web Design Training Page Layout Some Spotlight Author: Babak Tavatav Part 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 x × × × × 1024 jan jan jan jan jan jan jan jan jan
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN" " Single Columns CSS My Company Name Home | Products | Services | About Us | Contact Us Sample Web Page 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. 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.
1c.css body {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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN" " Two Columns Layout Using CSS My Company Name Home Products Services About Us Contact Us Sample Web Page 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. 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.
2.css body {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 Item Description Cost Subtotal Imation CD-R 25pk Blank CDs 25pk 700mb data and audio Biro Bic biro black Envelopes 25 pack DL size brown Pencils 10 x HB pencils Value Paper Reem 500 sheets economy deskjet paper Bulldog Clip Large silver bulldog clip Elastic bands 100 pack multi-color elastic bands
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 and Elements The element creates a border around the group of form controls to show that they are related.The element allows you to specify a caption for the element, which acts as a title for the group of form controls. When used, the element should always be the first child of the element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Organizing Elements With <fieldset> and <legend>Elements Contact Information First name: Last name: Competition Question How tall is the Eiffel Tower in Paris, France? 584 ft 784 ft 984 ft 1184 ft Tiebreaker Question In 25 words or less, say why you would like to win $10,000: Enter competition
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=” method=”get” name=”frmTabExample”> One Two Three Four Five Six Seven Eight Nine Ten
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.
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Organizing Elements With <fieldset> and <legend>Elements C ontact Information (ALT + C) First name: Last name: Competition Question How tall is the Eiffel Tower in Paris, France? 584 ft 784 ft 984 ft 1184 ft T iebreaker Question (ALT + T) In 25 words or less, say why you would like to win $10,000: Enter competition
CHROME?