طراحی وب سایت را چگونه و از کجا شروع کنیم؟

طراحی وب سایت را چگونه و از کجا شروع کنیم؟

در اینجا قصد داریم بطور خلاصه و مفید تجربه خودمون رو در مورد طراحی وب سایت در چند مرحله ذکر کنیم:

مقدمه: برای طراحی سایت نیاز نیست حتما برنامه نویس باشید، چیزی که ضروریست تکرار و تمرین کدهای خاص html و css هست. همچنین نیاز هست که با نرم افزار گرافیکی photoshop آشنا باشید.

 

1- نصب نرم افزارهای مربوطه:

  • نرم افزار wampserver: این نرم افزار یک محیط واقعی همانند اینترنت را بر روی سیستم شما ایجاد می کند.شما می توانید کدهای نوشته شده خود را در آن تست کنید و بعدا بر روی اینترنت انتقال بدید.
  • نرم افزار Dreamweaver: برای راحتی نوشتن کدهای html و css می بایست از این نرم افزار استفاده کنید. هر چند می توانید از برنامه Notepad خود ویندوز هم استفاده کنید.

آموزش نصب و کار با این دو نرم افزار بزودی در سایت قرار داده خواهد شد.

 

2- اساس کار همه وب سایت ها کدهای html هستند. html کدهای ثابتی هستند که شما می توانید با تکرار و تمرین آن ها را ملکه ذهن خود کنید. با در اینجا به یک مثال اکتفا می کنیم، فرض کنید بخواهید یک جدول همانند زیر ایجاد کنید:

هدر سایت
سمت راست محتوای سایت سمت چپ

می باست کدهای html زیر را در سایتتان قرار دهید:

<table width="900px" height="700px" border="1">
   <tr align="center" height="200px">
       <td colspan="3"> هدر سایت </td>
   </tr>
   <tr align="center" height="500px">
       <td width="200px"> سمت چپ </td>
       <td width="500px"> محتوای سایت </td>
       <td width="200px"> سمت راست </td>
   </tr>
</table>

 

3- css را با یک مثال ساختمانی توضیح می دهیم. زمانی که اسکلت و دیوارهای ساختمان وب سایتتان را با html بنا کردید، آن گاه نوبت به css می رسد که کار طراحی داخلی ساختمان وب سایتتان را انجام می دهد. البته با css هم می توان اسکلت ساختمان وب سایت را بنا کرد. بدین صورت که می بایست مصالح ساختمان وب سایتتان را با html ایجاد کنید و سپس کار را به css بسپارید. این کار انعطاف پذیری بسیار بالایی دارد و دست شما را جهت یک طراحی خوب باز می دارد.

css به 3 صورت امکانپذیر هست:

  • قرار دادن کدهای آن در فایل های دیگر و خارج از صفحاتی که کدهای html هستند.(این روش توصیه می شود)
  • ایجاد css در قسمت head همان صفحه ای که کدهای html شما هست.
  • در درون خود کدهای html (تگ های html )

در اینجا یک مثال از حالت سوم برای شما می زنیم. فرض کنید بخواهید در مثال بالا قسمت هدر سایت را رنگ زرد بزنید:

هدر سایت
سمت راست محتوای سایت سمت چپ

کافی است تغییر زیر را در کدهای بالا ایجاد کنید:

<table width="900px" height="700px" border="1">
   <tr align="center" height="200px">
       <td colspan="3" style="background-color: yellow;"> هدر سایت </td>
   </tr>
   <tr align="center" height="500px">
       <td width="200px"> سمت چپ </td>
       <td width="500px"> محتوای سایت </td>
       <td width="200px"> سمت راست </td>
   </tr>
</table>

 

مراحل دیگر را در آموزش های بعدی ذکر خواهیم کرد.

 

 

Submit to DeliciousSubmit to DiggSubmit to FacebookSubmit to Google PlusSubmit to StumbleuponSubmit to TechnoratiSubmit to TwitterSubmit to LinkedInاشتراک گذاری مطلب
امین
  نویسنده: امین  ایمیل: این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید

نظر خود را اضافه نمایید

ارسال نظر به عنوان مهمان

0
نظر شما به دست مدیر خواهد رسید
  • هیچ نظری یافت نشد.

شیراز - ملاصدرا

فکس :  2231058

همراه 09172279644 - 09367134692 

توجه: جهت مراجعه حضوری هماهنگی تلفنی الزامی است.

JoomShaper