آموزش طراحی قالب وبلاگ و وبسایت - جلسه دوم

مباحث و مفاهیم ارائه شده در این جلسه:

• مقدمات و پیش نیازهای طراحی وب
• معرفی فریم ورک bootstrap
• شروع کدنویسی

گام دوم

قبل از شروع کدنویسی نیاز است مطالبی را تحت عنوان مقدمه بیان کنیم که به شرح زیر می­باشد.

کدنویسی یعنی افکار و خواسته­های خود را با قواعدی خاص (syntax) به کامپیوتر بفهمانیم.

کدهای ما در فایل سورس و توسط ویرایشگرهای متن ذخیره می­شود.

برای مشاهده نتیجه کارمان(خروجی فایل سورس)، از مرورگرها استفاده می­کنیم.

HTML، مخفف Hyper Text Markup Language می­باشد.

HTML جزو زبان­های markup می­باشد.

یک زبان markup، زبانی است که به وسیله برچسب­های نشانه­گذاری(markup tags) نوشته می­شود.

تگ­ها محتوای صفحه را توصیف می­کنند.

زبان HTML، زبان Tagها است.

صفحات html شامل tagهای این زبان و متون ساده هستند.

صفحات html گاهی اوقات web page نیز نامیده می­شوند.

درگذشته برای قالب­بندی صفحه از جداول استفاده می­گردید اما اکنون بااستفاده از تگ div و styleهای css چنین کاری را با زیبایی، قدرت و سرعت بیشتری انجام می­دهند.

گام سوم

در این مرحله می­خواهیم فریم­ورک bootstrap را وارد پروژه خود کنیم؛ فریم­ورک­ها یا همان چهارچوب­های طراحی وب، بستری را برای تولید صفحات وب فراهم می­کنند تا برنامه­نویسان با سرعت، قدرت و خطای کمتری پروژه­های خویش را انجام دهند. لازم به ذکر است که در حال حاضر فریم­ورک­های زیادی وجود دارد که یکی از بهترین گزینه­ها همین bootstrap است. روش کلی نیز به این صورت است که شما با وارد کردن چند کتابخانه css و js از مزایا و قابلیت­های فرم­ورک استفاده می­کنید.

ابتدا برای دریافت آخرین نسخه از bootstrap با مراجعه به این سایت برای اینکار اقدام نمایید.

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

شروع کدنویسی

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

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

حالت کلی استفاده از تگ­های زبان html به صورت زیر است البته در ادامه خواهید دید که هر تگ می­تواند property­های خاص خودش را نیز داشته باشد.

ساختار کلی یک صفحه وب به شرح زیر است.

در حال حاضر نسخه­های مختلفی از html دردسترس می­باشد ولی ما از آخرین نسخه آن بهره می­گیریم؛ نسخه 5. در جدول پایین نسخه­های مختلف html را به همراه سال عرضه آن مشاهده می­کنید.

لازم به ذکر است که اعلان DOCTYPE به مرورگرهای وب کمک می­کند تا صفحات وب را درست نشان دهند زیرا مشخص کننده نسخه html درحال استفاده می­باشد.

همانطور که پیش­تر اشاره کردیم عناصر صفحه(تگ­ها) می­توانند property­های مختلفی داشته باشند؛ دو نوع مهم از property­های عناصر، ID و CLASS آن­ها می­باشد که در فراخوانی استایل برای عناصر صفحه کاربرد دارند. در ادامه تگ div را با کلاس container تعریف می­کنیم.

بقیه مطالب را در پست­های بعدی بخوانید.