ساختن وب سایت بوسیله قالب فتوشاپ

24 اردیبهشت

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

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

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

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

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

ایجاد فایل HTML

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website</title>
</head>
<body>
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="siteinfo"></div>
</body>
</html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website</title>
</head>
<body>
<div id="container">
<div id="header">
  <h1 id="header_title"> Welcome to my Site </h1>
  <h2 id="slogan"> A Webdesigner Portfolio </h2>
</div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="siteinfo"></div>
</body>
</html>

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

<div id="navigation">
  <ul id="main_nav">
    <li id="home"><a href="#" title="home">home</a></li>
    <li id="about"><a href="#" title="about">about</a></li>
    <li id="portfolio"><a href="#" title="portfolio">portfolio</a></li>
    <li id="services"><a href="#" title="services">services</a></li>
    <li id="contact"><a href="#" title="contact">contact</a></li>
  </ul>
</div>

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

<div id="content">
  <h1 id="content_header"> What Can I Do For You ? </h1>
  <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.

    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.

    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.

    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.

    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>
</div>

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

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

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

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

<div id="siteinfo">
<h4 id="siteinfo_title">
www.mysite.com
</h4>
  <ul id="siteinfo_nav">
    <li><a href="#" title="home">home</a></li>
    <li><a href="#" title="about">about</a></li>
    <li><a href="#" title="portfolio">portfolio</a></li>
    <li><a href="#" title="services">services</a></li>
    <li><a href="#" title="contact">contact</a></li>
  </ul>
</div>
</div>

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

کل کد

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
  <div id="header">
    <h1 id="header_title"> Welcome to my Site </h1>
    <h2 id="slogan"> A Webdesigner Portfolio </h2>
    <div id="navigation">
      <ul id="main_nav">
        <li id="home"><a href="#" title="home">home</a></li>
        <li id="about"><a href="#" title="about">about</a></li>
        <li id="portfolio"><a href="#" title="portfolio">portfolio</a></li>
        <li id="services"><a href="#" title="services">services</a></li>
        <li id="contact"><a href="#" title="contact">contact</a></li>
      </ul>
    </div>
  </div>
  <div id="content">
    <h1 id="content_header"> What Can I Do For You ? </h1>
    <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.

      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.

      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.

      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.

      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>
  </div>
  <div id="sidebar">
    <h3 id="recent_work_title"> My Recent Works </h3>
    <div class="portfolio_image"> <a href="#"><img src="images/portfolio_1.jpg" alt="Image 1" width="104" height="104"></a> </div>
    <div class="portfolio_image"> <a href="#"><img src="images/portfolio_2.jpg" alt="Image 2" width="104" height="104"></a> </div>
  </div>
  <div id="siteinfo">
    <h4 id="siteinfo_title"> www.mysite.com </h4>
    <ul id="siteinfo_nav">
      <li><a href="#" title="home">home</a></li>
      <li><a href="#" title="about">about</a></li>
      <li><a href="#" title="portfolio">portfolio</a></li>
      <li><a href="#" title="services">services</a></li>
      <li><a href="#" title="contact">contact</a></li>
    </ul>
  </div>
</div>
</body>
</html>

این مطالب هم می تواند برای شما جالب باشد :

28 دیدگاه

بخش : Photoshop, XHTML, طراحی وب سایت

28 دیدگاه

Rosina
مرداد 11, 1387

The site\’\'s very professional! Keep up the good work! Oh yes, one extra comment – maybe you could add more pictures too! So, good luck to your team!

[پاسخ دهید]
پارمیدا
فروردین 14, 1388

سلام.
متاسفانه من نمی دونم که این قالبهای آمادۀ فتوشاپ در کدوم قسمت فتوشاپ قرار دارند.
به علاوه این کدهایی که نوشتید رو ما باید کجا بنویسیم؟!
ممکنه بیشتر توضیح بدید؟
ممنونم.

[پاسخ دهید]
فرشاد
فروردین 14, 1388

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

[پاسخ دهید]
نبیل
اردیبهشت 10, 1388

سلام .راستی معلومات خوبی رواریه کردید.راستی من درست نفهمیدم که چطوراین کدها روتوفتوشاپ پیداکنم. به هرحال ازمعلومات که توی این وبسایت شمابودتونیستم یک کم بدونم درباره ساخت وبسایت.
نبیل امیری ازهرات . افغانستان

[پاسخ دهید]
شعبانی
شهریور 23, 1388

با عرض سلام و خسته نباشید ممنون از آموزش بسیار خوبتون دوست عزیز می خواستم لطف کنی و آموزش طراحی اولیه وب رو هم بزاری یعنی اون قسمتی که با فوتوشاپ قسمتها رو برش میدی و اسم گذاری می کنی
موفق باشی

[پاسخ دهید]
فرشاد
شهریور 23, 1388

سلام شاید این آموزش کمکتون بکنه :
http://blog.datisdesign.com/persian/?p=72
موفق باشید

[پاسخ دهید]
mina
مهر 11, 1388

عالی بود مرسی.

[پاسخ دهید]
parmida
دی 22, 1388

سلام ……میشه طریقه آپلود کردن رو هم یاد بدین ؟؟؟؟؟؟مررررررررسی از وبلاگ بسیار خوبتون…..

[پاسخ دهید]
tina
اسفند 1, 1388

سلام از مطلبتون نهایت استفاده رو بردم. امیدوارم همیشه موفق باشی…

[پاسخ دهید]
فرشاد
خرداد 21, 1389

آقا خیلی از کدها اضافی و از نظر من ضرورتی ندارند/
مثلاً اینجا نیازی نیست به اچ 1 آیدی بدهید:
Welcome to my Site
و البته خیلی جاهای دیگر
روی صحبت من این است که برای کانتنت و سایدبار میتوان در مجموعه یک آیدی مین باشند که سایدبار و کانتنت را فلوت داد و فوتر هم کلیر داد و در این حال به بادی هم یک استایل داد و نیازی به یک آیدی کلی برای تمام المانها نبود/ به هر حال ممنون

[پاسخ دهید]
فرشاد
خرداد 21, 1389

ممنون
بله ممکن هست بعضی جاها نیازی به ID نباشه ولی اکثر موارد پیش میاد که شما h1 رو میخواین استایل بدین و از تکست خالی استفاده نمی کنید
در ضمن ID حتما باید برای یک المان فقط به کار برده بشه چون unique هست برای مواردی که تکرار میشه باید از class استفاده کرد

[پاسخ دهید]
elham
مرداد 10, 1389

عالیه آقای ذوالفقاری
امیدوارم همیشه بتونین همچنان موفق به ماها کمک کنین!

[پاسخ دهید]
nahid
مهر 7, 1389

واقعا مفید و عالی بود. مرسی

[پاسخ دهید]
hassan
آذر 15, 1389

سلام . افرین واقعا که کارتون عالیه ولی برای منی که هیچی از این جور چیزا نمیدونم خیلی سخت بود البته تقصیر خودمه کار شما را نفی نمیکنم

[پاسخ دهید]
khademi
آذر 19, 1389

salam agha farshad…
man daram ye web sit tarahi mikonam ama nemishe.. azat mikham komakam koni duste aziz.. kheyli mamnunam.

[پاسخ دهید]
فرشاد پاسخ در تاريخ 19 آذر 1389 10:27 ب.ظ:
خب با این توضیحاتی که شما دادین من کاری نمیتونم بکنم ! چون هیچ اطلاعاتی در اختیار من قرار ندادین !

[پاسخ دهید]
علی
دی 6, 1389

لطفا پی دی اف مطالب رو در سایت قرار بدید

ممنون

[پاسخ دهید]
شیما
شهریور 2, 1390

سلام دوست عزیز.
من میخوام بدونم چطور طرحی رو که توی فتوشاپ طراحی کردم رو بصورت کد html و css پیادش کنم!؟

[پاسخ دهید]
فرشاد پاسخ در تاريخ 2 شهریور 1390 12:44 ب.ظ:
دوست عزیز همین مقاله این مطلب رو آموزش داده

[پاسخ دهید]
روژ
دی 21, 1390

ممنون.ساده وروان.همیشه دراوج باشید

[پاسخ دهید]
مهراب
فروردین 24, 1391

سلام
آقا من همیشه از اطلاعات سایت شما بهره می برم و واقعاً خسته نباشید میگم و امیدوارم موفق باشید. باز هم ممنون از زحمات شما.

[پاسخ دهید]