Download presentation
Presentation is loading. Please wait.
1
آموزش طراحی وب سایت جلسه هفتم - نکات مربوط به طراحی یک وب سایت تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: 09125773990 09371410986 پست الکترونیک : TargetLearning@gmail.com
2
Web Design Training Page Layout Some Spotlight Author: Babak Tavatav Part 07
3
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?
5
Identifying Key Elements for Every Page
6
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.
7
640 x480800 × 6001024 × 7681152 × 8641280 × 1024 jan 20080848328 jan 200701353322 jan 200602158312 jan 200502854310 jan 20041374936 jan 20032464034 jan 20024523423 jan 20017543022 jan 200011562522
8
Sketching the Placement of Elements
9
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)
10
Single-Column Layouts <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 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.
11
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;}
13
Two-Column Layouts <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 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.
14
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;}
16
Three-Column Layouts ??????
17
Exercise
18
Shading Multiple Rows of a Table Item Description Cost Subtotal Imation CD-R 25pk Blank CDs 25pk 700mb data and audio 16.99 Biro Bic biro black.25 17.24 Envelopes 25 pack DL size brown 2.50 19.74 Pencils 10 x HB pencils 1.50 21.24 Value Paper Reem 500 sheets economy deskjet paper 2.50 23.74 Bulldog Clip Large silver bulldog clip 1.80 25.54 Elastic bands 100 pack multi-color elastic bands 0.99 26.53
19
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;}
20
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.
21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Organizing Elements With <fieldset> and <legend>Elements Contact Information First name: Last name: E-mail: 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
23
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).
24
<form action=”http://www.example.com/tabbing.asp” method=”get” name=”frmTabExample”> One Two Three Four Five Six Seven Eight Nine Ten
25
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.
26
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.
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Organizing Elements With <fieldset> and <legend>Elements C ontact Information (ALT + C) First name: Last name: Email: 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
28
CHROME?
Similar presentations
