خرداد
۱۷
۱۳۹۴

آموزش طراحی قالب سایت

هر سایت یا وبلاگ دارای یک نمای ظاهری است که به این نما قالب یا تم سایت گفته میشود . در گذشته بعضی طراحان برای ساده شدن کار و چیدمان عناصر موجود در صفحه از جداول استفاده می کردند ( و می کنند) که البته این کار باعث غیراستاندارد شدن طراحی میشود. امروزه برای ایجاد قالب سایت، از DIV استفاده می شود. کنار هم گذاشتن و یا استفاده از چندین DIV به صورت تو  در تو یکی از مشکلات طراحان سایت است که البته به مرور زمان و پس از تسلط یافتن به دستورات CSS به راحتی می توان هر قالبی را طراحی کرد.

برای اینکه بتوان نحوه طراحی قالب رو به صورت کامل گرفت باید موارد زیر نیاز داریم:

  1. تسلط بر HTML
  2. تسلط بر CSS
  3. دانش عمومی و پایه از فتوشاپ

مراحل کلی کار

  1. ایجاد طرح اولیه و پیاده سازی چیزی که در ذهن دارید بر روی کاغذ
  2. پیاده سازی طرحی که بر روی کاغذ کشیده اید در فتوشاپ و اضافه کردن جزئیات و رنگها
  3. تبدیل فایل فتوشاپ طراحی شده به قالب سایت/وبلاگ با استفاده از html و css
  4. بررسی قالب در مرورگرهای مختلف و رفع ایرادات احتمالی و یکسان سازی در مرورگرها
مراحل بالا به ترتیب طی خواهند شد تا در نهایت یک قالب سایت دلخواه آماده شده و بتوانیم از آن در سایت خود استفاده کنیم.

رسم طرح اولیه بر روی کاغذ

هر قالب از چهار بخش اصلی تشکیل میشه که عبارتند از:

  1. سربرگ (header)
  2. منو یا منوها (sidebar)
  3. بدنه (body)
  4. پابرگ (footer)

main-template

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

گر در ترکیب رنگها نیاز به کمک دارید همچنین میتوانید از ابزارهای رایگان و آنلاین که در سایتهای مختلف وجود دارد استفاده کنید ، برای مثال :

http://www.colorschemer.com/online.html

http://www.colorblender.com/

ابتدا قالب سایت مورد نظر خود را در فتوشاپ رسم می کنیم. این کار نیاز به تسلط شما به نرم افزار فتوشاپ دارد. آموزش طراحی قالب سایت در فتوشاپ، به زودی بر روی سایت حامی پروژه قرار داده خواهد شد.

طراحی صفحات وب با استفاده از HTML

HTML مخفف “HyperText Markup Language” است. HTML زبانی است که از آن برای نوشتن صفحات وب ایستا (استاتیک) استفاده می شود. این زبان برای مشخص کردن عناصر مختلف صفحه از یک سری تگ (برچسب) استفاده می شود. برای مثال برای اینکه یک تصویر را وارد صفحه کنیم از برچسب <img> استفاده می کنیم و برای مشخص کردن یک پاراگراف متن مورد نظر خود را بین تگ <p> و <p/> قرار می دهیم. بدین وسیله مرورگر اینترنت می تواند عناصر مختلف صفحه را شناسایی کند و آنها را نمایش دهد. مرورگرهای اینترنت کدهای HTML را دریافت می کنند و پس از تفسیر آنها را به صورت یک صفحه وب به نمایش در می آورند.

نوشتن صفحات HTML لزوماً به برنامه خاصی احتیاج ندارد. حتی با استفاده از NotePad در ویندوز هم می توانید صفحات مورد نظر خود را طراحی کنید. صرف نظر از برنامه ای که از آن برای طراحی صفحات خود کمک می گیرید آشنایی شما با HTML می تواند تا حد بسیار زیادی در کیفیت صفحات تأثیر بگذارد.

استفاده از CSS برای قالب بندی عناصر HTML

HTML اصولاً برای مشخص کردن هویت عناصر صفحه به وجود آمد. یعنی برای اینکه مشخص شود کدام بخش صفحه یک پاراگراف است یا کدام قسمت سرفصل است و کدام بخش یک جدول است و… برای این منظور هم از یک سری تگ استاندارد نظیر <p> ، <h1> و <table> استفاده می شد. وظیفه ای که برای HTML در نظر گرفته شده بود فقط همین بود و نحوه نمایش این عناصر بر عهده مرورگرهای وب بود. برای مثال مشخصاتی نظیر فونت متن، رنگ و مشخصاتی از این قبیل را مرورگر انتخاب می کرد و HTML در قالب بندی عناصر صفحه نقشی نداشت.

به تدریج مرورگرهای بزرگ مثل اینترنت اکسپلورر و Netscape از تگهای HTML جدیدی برای قالب بندی و تعیین ظاهر صفحات وب استفاده کردند مانند تگ <font> که برای تعیین فونت متن مورد استفاده قرار می گیرد و شناسه color که رنگ متن را مشخص می کند.

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

استفاده از استایل و شیوه نامه ها (CSS) با HTML 4.0 آغاز شد. از CSS برای قلب بندی عناصر صفحه استفاده می شود. برای مثال با آن می توان برای قسمتهای مختلف در صفحه تصویر زمینه تعیین کرد، فونت آنها را تغییر داد، رنگ متن ها را تغییر داد و بسیاری از قابلیتهای دیگر که قبلاً در HTML وجود نداشت با CSS در دسترس طراحان قرار می گیرد.

دانلود فایل آموزشی HTML,CSS

دانلود یک قالب سایت نمونه

WD103_1

دیدگاه ها بسته شده اند.

قیمت لحظه ای طلا و سکه و ارز

راهنمای دانلود

برای دانلود، کافی است که بر روی لینک دانلود آن کلیک نمایید تا وارد صفحه پرداخت آنلاین شوید. بعد از وارد کردن مشخصات کارت بانکی و مبلغ، پرداخت انجام شده و لینک دانلود نمایش داده می شود.

از این که حامی پروژه را برای دانلود انتخاب نموده اید، سپاسگزاریم.

در صورت بروز هر گونه مشکل برای خرید و دانلود، لطفا از طریق ایمیل زیر با ما مکاتبه نمایید.

HamiProje@Gmail.com

تبلیغات

alibaba02

تقویم شمسی

آبان ۱۳۹۷
ش ی د س چ پ ج
« شهریور    
 1234
۵۶۷۸۹۱۰۱۱
۱۲۱۳۱۴۱۵۱۶۱۷۱۸
۱۹۲۰۲۱۲۲۲۳۲۴۲۵
۲۶۲۷۲۸۲۹۳۰