تبلیغات
فرشته مهربانی - ساختن وب سایت بوسیله قالب فتوشاپ
فرشته مهربانی
هرچیزی که بخوای
صفحه نخست       پست الکترونیک          تماس با ما              ATOM            طراح قالب
گروه طراحی قالب من گروه طراحی قالب من گروه طراحی قالب من گروه طراحی قالب من گروه طراحی قالب من
درباره وبلاگ


هرچیزی که توبخوای درهرزمینه ای

مدیر وبلاگ :محمدامین نجفی فینی
نظرسنجی
به نظرشمادربازی جمعه پرسپولیس-استقلال چه نتیجه ای رغم خواهدخورد؟




HTMLیکی از مسائل مهمی که طراحان وب سایت با آن درگیر هستند، ساختن یک وب سایت است که Valid XHTML و Valid CSS و از روی قالبی که در Photoshop یا برنامه دیگری تهیه کرده اند باشد. در این آموزش من سعی می کنم نحوه تبدیل یک قالب که در Photoshop آماده شده است را به یک سایت آموزش دهم. توجه کنید که این آموزش در دو قسمت تهیه شده که در قسمت اول آماده سازی فایل HTML توضیح داده می شود و در قسمت دوم آموزش مربوط به دادن Style ها توسط CSS خواهد بود.

آماده کردن قالب

اگر به وب سایتها دقت کنید معمولا از یک ساختار ثابتی پیروی می کنند و در بعضی موارد المانهای کمتر و در بعضی موارد المانهای بیشتری دارند. شما هم بهتر است موقعی که در حال طراحی قالب سایت می باشید به این اجزا و نحوه قرار دادن آنها در کنار هم دقت کنید. اگر به تصویر زیر دقت کنید بیشتر متوجه منظور من می شوید :

Website Theme

در این تصویر که یک قالب ساده وب سایت است که در Photoshop تهیه شده، می بینید که سایت ها معمولا از یک Header، یک Navigation، یک قسمت برای Content، یک قسمت برای Sidebar و یک قسمت هم برای Site Info یا همان Footer در نظر گرفته می شود. ممکن است در بعضی موارد یک سایت دارای Sidebar دیگری باشد و …. ولی در کل می توان یک وب سایت را به اجزای ساده فوق تجزیه کرد. حال به شکل زیر دقت کنید :

Website Theme Divided

در این شکل من قالب را به قسمتهایی که قبلا گفتم تجزیه کردم، حال به راحتی می توان این اجزا را در یک فایل HTML ایجاد کرد. (برای بزرگتر دیدن عکسها روی آنها کلیک کنید)

ایجاد فایل HTML

برای ساختن فایل HTML از بالای تصویر شروع می کنیم، اولین بخشی که دیده می شود قسمت Header سایت می باشد. پس به راحتی توسط DIV یک بخش برای Header ایجاد می کنیم و به آن Header ID می دهیم، همینطور برای سایر اجزا هم همین DIV ها را می سازیم :

01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
02 <html>
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
05 <title>My Website</title>
06 </head>
07 <body>
08 <div id="header"></div>
09 <div id="navigation"></div>
10 <div id="content"></div>
11 <div id="sidebar"></div>
12 <div id="siteinfo"></div>
13 </body>
14 </html>

در ساخت یک وب سایت که هم Valid XHTML و هم Valid CSS باشد و هم از نظر SEO دارای موقعیت مناسبی باشد حتما باید همان مطالبی را که در قالب آورده اید به صورت HTML ایجاد کنید، مثلا من در قسمت Header یک نوشته درشت با عنوان Welcome to my Website ایجاد کردم، من این نوشته را درون تگ H1 قرار می دهم و در پایان وقتی خواستم به آن Style بدهم آنرا به شکل مورد نظر در قالب تبدیل می کنم. با این کار در پایان متوجه می شوید که سایت شما حتی بدون داشتن هیچ Style دارای خوانایی بسیار بالایی است، همه اجزا سر جای خودشان قرار دارند و از Semantic بودن هم بسیار مناسب می باشد، هر Screen Reader به راحتی می تواند سایت شما را بدون داشتن هیچ Style بخواند.

01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
02 <html>
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
05 <title>My Website</title>
06 </head>
07 <body>
08 <div id="container">
09 <div id="header">
10   <h1 id="header_title"> Welcome to my Site </h1>
11   <h2 id="slogan"> A Webdesigner Portfolio </h2>
12 </div>
13 <div id="navigation"></div>
14 <div id="content"></div>
15 <div id="sidebar"></div>
16 <div id="siteinfo"></div>
17 </body>
18 </html>

دادن ID بسیار مناسب می باشد چون بعدا موقع دادن CSS به راحتی می توانید به آنها رجوع کنید، فقط توجه داشته باشید هر ID می تواند یکبار استفاده شود. حال برای ایجاد Navigation می توانیم از تگهای ul و li استفاده کنیم، بدین صورت :

1 <div id="navigation">
2   <ul id="main_nav">
3     <li id="home"><a href="#" title="home">home</a></li>
4     <li id="about"><a href="#" title="about">about</a></li>
5     <li id="portfolio"><a href="#" title="portfolio">portfolio</a></li>
6     <li id="services"><a href="#" title="services">services</a></li>
7     <li id="contact"><a href="#" title="contact">contact</a></li>
8   </ul>
9 </div>

کد فوق را درون Navigation DIV قرار دهید. حال نوبت Content DIV است، برای این قسمت هم مانند Header به یک تگ H1 نیاز داریم، علاوه بر آن چون این قسمت دارای پاراگراف است به تگ p هم نیاز خواهیم داشت :

01 <div id="content">
02   <h1 id="content_header"> What Can I Do For You ? </h1>
03   <p id="main_content"> Lorem ipsum vis eu hinc animal iuvaret, agam munere apeirian cum in. Erroribus suscipiantur ad vim. Eu qui euismod appetere scriptorem, duo in unum porro. Erant alterum cu qui, mea ut partiendo pertinacia, an sea viris alienum.
04   
05     Ea duo viris intellegat, nam ut quando elaboraret. Populo omnium appetere et eos. Dicant docendi nominavi mel an, eam an probo consul. Eu has quem blandit maiestatis, soleat fierent ex ius.
06   
07     Et cum facete propriae, mei eu aliquid urbanitas interesset. Nam ex docendi omittantur. Duo cetero laboramus ei, cu dolores accumsan persecuti ius. Liber vivendo vix id, mel ad omnis voluptatibus. Pri an accumsan appareat singulis, ne mel veri epicurei philosophia, te nam enim sonet dolorum.
08   
09     Vis an sadipscing dissentiunt. Atqui omnium eos id, ei senserit erroribus sed. Est aeterno virtute id, harum aperiri graecis vel eu. Posse quidam nostrud mel no, habeo adipisci at mel. Has munere audire aperiam cu.
10   
11     Ex vix cetero euripidis, ius tantas perfecto similique ne. Ea duo mundi detracto appareat, pri vocent menandri prodesset ex. Vide labores te vix. Illud aliquam eum ad. Mel in illud vidisse, nec tota iudicabit ad, pericula honestatis eum cu. Qui sonet utroque gloriatur id.</p>
12 </div>

حال به سراغ Sidebar می رویم، در این قسمت ما می خواهیم دو تصویر از نمونه کارهایمان بگذاریم پس به تگ img نیاز داریم :

1 <div id="sidebar">
2   <h3 id="recent_work_title"> My Recent Works </h3>
3   <div class="portfolio_image"> <a href="#"><img src="" alt="Image 1" width="150" height="150"></a> </div>
4   <div class="portfolio_image"> <a href="#"><img src="" alt="Image 2" width="150" height="150"></a> </div>
5 </div>

در این قسمت من از یک DIV دیگر استفاده کردم چون من دو تا تصویر دارم که دارای Style یکسان خواهند بود به این Div یک Class اضافه کردم و تگهای img را درون آنها قرار دادم.

 

و در نهایت قسمت Site Info که تقریبا مانند Navigation می باشد :

01 <div id="siteinfo">
02 <h4 id="siteinfo_title">
03 www.mysite.com
04 </h4>
05   <ul id="siteinfo_nav">
06     <li><a href="#" title="home">home</a></li>
07     <li><a href="#" title="about">about</a></li>
08     <li><a href="#" title="portfolio">portfolio</a></li>
09     <li><a href="#" title="services">services</a></li>
10     <li><a href="#" title="contact">contact</a></li>
11   </ul>
12 </div>
13 </div>

خب آماده کردن فایل HTML برای وب سایت تقریبا تمام شد، حال اگر این فایل را اجرا کنید شما یک فایل کاملا خوانا و Semantic و آماده برای دادن Style مشاهده می کنید. امیدوارم از این آموزش لذت برده باشید، در قسمت بعدی نحوه دادن Style را آموزش خواهم داد… به امید دیدار…

 

کل کد

01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
02 <html>
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
05 <title>My Website</title>
06 <link href="main.css" rel="stylesheet" type="text/css">
07 </head>
08 <body>
09 <div id="container">
10   <div id="header">
11     <h1 id="header_title"> Welcome to my Site </h1>
12     <h2 id="slogan"> A Webdesigner Portfolio </h2>
13     <div id="navigation">
14       <ul id="main_nav">
15         <li id="home"><a href="#" title="home">home</a></li>
16         <li id="about"><a href="#" title="about">about</a></li>
17         <li id="portfolio"><a href="#" title="portfolio">portfolio</a></li>
18         <li id="services"><a href="#" title="services">services</a></li>
19         <li id="contact"><a href="#" title="contact">contact</a></li>
20       </ul>
21     </div>
22   </div>
23   <div id="content">
24     <h1 id="content_header"> What Can I Do For You ? </h1>
25     <p id="main_content"> Lorem ipsum vis eu hinc animal iuvaret, agam munere apeirian cum in. Erroribus suscipiantur ad vim. Eu qui euismod appetere scriptorem, duo in unum porro. Erant alterum cu qui, mea ut partiendo pertinacia, an sea viris alienum.
26   
27       Ea duo viris intellegat, nam ut quando elaboraret. Populo omnium appetere et eos. Dicant docendi nominavi mel an, eam an probo consul. Eu has quem blandit maiestatis, soleat fierent ex ius.
28   
29       Et cum facete propriae, mei eu aliquid urbanitas interesset. Nam ex docendi omittantur. Duo cetero laboramus ei, cu dolores accumsan persecuti ius. Liber vivendo vix id, mel ad omnis voluptatibus. Pri an accumsan appareat singulis, ne mel veri epicurei philosophia, te nam enim sonet dolorum.
30   
31       Vis an sadipscing dissentiunt. Atqui omnium eos id, ei senserit erroribus sed. Est aeterno virtute id, harum aperiri graecis vel eu. Posse quidam nostrud mel no, habeo adipisci at mel. Has munere audire aperiam cu.
32   
33       Ex vix cetero euripidis, ius tantas perfecto similique ne. Ea duo mundi detracto appareat, pri vocent menandri prodesset ex. Vide labores te vix. Illud aliquam eum ad. Mel in illud vidisse, nec tota iudicabit ad, pericula honestatis eum cu. Qui sonet utroque gloriatur id.</p>
34   </div>
35   <div id="sidebar">
36     <h3 id="recent_work_title"> My Recent Works </h3>
37     <div class="portfolio_image"> <a href="#"><img src="images/portfolio_1.jpg" alt="Image 1" width="104" height="104"></a> </div>
38     <div class="portfolio_image"> <a href="#"><img src="images/portfolio_2.jpg" alt="Image 2" width="104" height="104"></a> </div>
39   </div>
40   <div id="siteinfo">
41     <h4 id="siteinfo_title"> www.mysite.com </h4>
42     <ul id="siteinfo_nav">
43       <li><a href="#" title="home">home</a></li>
44       <li><a href="#" title="about">about</a></li>
45       <li><a href="#" title="portfolio">portfolio</a></li>
46       <li><a href="#" title="services">services</a></li>
47       <li><a href="#" title="contact">contact</a></li>
48     </ul>
49   </div>
50 </div>
51 </body>
52 </html





صفحات جانبی
آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
امکانات جانبی