1 / 28

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

آموزش طراحی وب سایت جلسه هفتم - نکات مربوط به طراحی یک وب سایت. تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: 09125773990 09371410986 پست الکترونیک : TargetLearning@gmail.com. Web Design Training Page Layout Some Spotlight. Author: Babak Tavatav Part 07.

kaylee
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. آموزش طراحی وب سایتجلسه هفتم - نکات مربوط به طراحی یک وب سایت تدریس طراحی وببرای اطلاعات بیشتر تماس بگیرید تاوشماره تماس: 0912577399009371410986پست الکترونیک : TargetLearning@gmail.com

  2. Web Design TrainingPage LayoutSome 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?

  4. Identifying Key Elements for Every Page

  5. 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.

  6. Sketching the Placement of Elements

  7. 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)

  8. 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>

  9. 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;}

  10. 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>Loremipsum dolor sit amet, consectetueradipiscingelit. Nunceleifend, erat id commodoplacerat, nullapurusbibendumjusto, in dictum orci mi vitae nulla. Nullamsemperviverranulla. Sedlaciniafeugiateros. Maecenas ullamcorperligulaquisodio. Donecpedemassa, pharetra sit amet, accumsan a, iaculisegestas, lectus. Etiamullamcorperelementumwisi. Etiam et felisaliquet dui tempus sagittis. Donecdapibusipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. Integer lobortiswisi id erat. Nullamaliquetaugue ac elit. Nullafacilisi. Vivamusligulatortor, molestie at, accumsanquis, semper vitae, augue. Praesentpedeneque, sollicitudin non, facilisissed, viverra a, pede. Crasnecurna. Curabiturutmetus. Curabiturerat lacus, tempus vitae, elementumnec, pulvinarvel, leo. Sed a velit. Proinerat. Donec sem. </p> <p>Maurisquisurna. Donecsodales, risus non dictum ultricies, nislloremimperdietsapien, veleuismodorcirisus non lorem. Nam tempus, pedenectinciduntlacinia, lectusmaurismalesuada quam, a tinciduntelitjusto a ligula. Nunccursusnonummynulla. Quisqueadipiscing. Donecnislelit, viverra in, elementumeu, auctor id, eros. Sedsagittis, nequevelblandittempor, justoodioposuerenulla, at condimentumloremnibhsuscipitarcu. Maurisrhoncus, nuncvelhendreritaliquet, purusvelitiaculismauris, aliquameleifend ante augueutvelit. Pellentesquesedturpisvelodiovariusposuere. Uturna mi, ultriciesut, lobortis in, variusporta, nulla. </p> </div> </div> </body> </html>

  11. 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;}

  12. Three-Column Layouts ??????

  13. Exercise

  14. Shading Multiple Rows of a Table <table> <tr> <th>Item</th> <th>Description</th> <th>Cost</th> <th>Subtotal</th> </tr> <tr class="even"> <td>Imation CD-R 25pk</td> <td>Blank CDs 25pk 700mb data and audio</td> <td>16.99</td> <td>16.99</td> </tr> <tr class="odd"> <td>Biro</td> <td>Bic biro black</td> <td>.25</td> <td>17.24</td> </tr> <tr class="even"> <td>Envelopes</td> <td>25 pack DL size brown</td> <td>2.50</td> <td>19.74</td> </tr> <tr class="odd"> <td>Pencils</td> <td>10 x HB pencils</td> <td>1.50</td> <td>21.24</td> </tr> <tr class="even"> <td>Value Paper Reem</td> <td>500 sheets economy deskjet paper</td> <td>2.50</td> <td>23.74</td> </tr> <tr class="odd"> <td>Bulldog Clip</td> <td>Large silver bulldog clip</td> <td>1.80</td> <td>25.54</td> </tr> <tr class="even"> <td>Elastic bands</td> <td>100 pack multi-color elastic bands</td> <td>0.99</td> <td>26.53</td> </tr> </table>

  15. 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;}

  16. 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.

  17. <?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 &lt;fieldset&gt; and &lt;legend&gt;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>

  18. 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).

  19. <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>

  20. 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.

  21. 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.

  22. <?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 &lt;fieldset&gt; and &lt;legend&gt;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>

  23. CHROME?

More Related