آموزش طراحی وب سایت(۱)

آموزش طراحی وب سایت(1)

شروع طراحی وب سایت

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

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

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

به طور کلی تمامی سایت ها دارای ۳ جزء اصلی می باشند:

Header(در قسمت هدر سایت، در حداقل ترین حالت، معمولا منو سایت و لوگو قرار دارد. Header در بالاترین جای ممکن در صفحه قرار میگیرد.)

Footer(فوتر سایت انتهای صفحه سایت قرار می گیرد و اطلاعات تماس و راه های ارتباطی در آن قرار می گیرد.)

Content (محتوای سایت بین header و footer سایت قرار می گیرد و بسته به نوع سایت شما طرح بندی می شود)

آموزش طراحی وب سایت(1)

نکته: دقت داشته باشید که رنگ بندی سایت از نکاتی است که در زیبایی سایت شما و کاربری آن تاثیر زیادی دارد، لذا دقت داشته باشید در دفترچه راهنمای سایت خود  از یک تم رنگ و یا از ۲ رنگ ست استفاده کنید.

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

برای شروع شما می بایست در یک فولدر ۵ فایل به نام های زیر درست کنید:

  • Css
  • Fonts
  • Bootstrapt
  • Image
  • Js

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

برای درک راحت تر این فایل ها و نحوه کارایی آن ها یک سایت را در ذهن خود در نظر بگیرید. قسمت html در واقع نوشته ها و باکس های سایت شما می باشد. رنگ بندی، اندازه، موقعیت و به عبارتی گرافیک سایت می باشد. Js یا همان جاوا اسکریپت و جی کوئری به طور کلی جلوه های ویژه یک سایت به شمار می رود. برای بهره بردن از جلوه های ویژه شما می بایست در ابتدا کتابخانه جی کوئری را دانلود و در فایل js ذخیره کنید.

بوت استپرت هم به زبان ساده کتابخانه یک سری از کدهای آماده می باشد که روند کدنویسی شما را راحت تر می کند.(استفاده از بوت استرپت برای قسمت کدنویسی ریسپانسیو بسیار کارآمد می باشد)

نحوه کد نوشتن در فایل html

سند html ایتدایی و اصلی ترین فایل برای طراحی سایت می باشد. در واقع شما طرح psd خود را در این سند کدنویسی خواهید کرد.

Html از ۲ قسمت تشکیل شده است:

  • Head
  • Body

در قسمت head، کدهایی نوشته خواهد شد که کاربر قادر به مشاهده آن ها نیست و به عبارتی پشت پرده سایت به شمار می رود و در مقابله آن body در واقع چیزهایی می باشد که کاربر مشاهده خواهد کرد.

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

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

برای ذخیره فایل های css و js هم به همین منوال پیش خواهیم رفت.به عنوان مثال برای ذخیره فایل css شما باید نام style.css را استفاده کنید. انتخاب نام فایل امری اختیاری اما پسوند آن اجباری می باشد.

مطالب مرتبط

نظر خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *