طراحی سایت میخوام یاد بگیرم، از کجا شروع کنم؟

خیلی زمان دوری نیست وقتی از ۱۵ سال پیش اولین صفحات سایت ها رو می دیدم و واقعا برام جالب و جذاب بود. استفاده از اطلاعات اینترنتی با همان صفحات ساده و تماما متنی!! شرایط خیلی سریع عوض شد و الان دیگه خبری از متن ساده نیست سایت ها متحول شدند و احساس میکنم هر روز از تکنولوژی عقب هستم! خب چیکار باید کرد، این نیاز به بروز بودن و شروع وبلاگ نویسی رو از کجا یاد بگیرم؟ منم مثل شما بودم و هستم طراحی سایت برام یه دنیای جدید بود که دوست داشتم خیلی زود در آن موفق بشم و رشد کنم!

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

طراحی سایت و پیش نیاز ها

آشنایی با زبان انگلیسی

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

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

آشنایی با نرم افزار طراحی سایت

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

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

این برنامه یک ویرایشگر WYSIWYG است ( آنچه شما می بینید چیزی است که شما دریافت می کنید) که به این معنیه که : هنگامی که شما در حال طراحی سایت در Dreamweaver هستید، تمام برنامه های موجود در پس زمینه برای شما کار می کنند.

مزایای اصلی Dreamweaver عبارتند از :

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

یادگیری زبان HTML، زبان پایه ای وب

خب همه چیز آماده ی شروع کار هست ولی سوال اینجاست برای اینکه طراح سایت بشم باید از کجا شروع کنم؟ شروع کار ما در ابتدا باید با زبان برنامه نویسی پایه ای باشه که ساده ترین مفاهیم وب را بتوانیم با نشانه گذاری به مرورگر بفهمانیم! پس باید در ابتدا به سراغ آموزش HTML و CSS برویم.

واژه HTML مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فرا متن است.

اچ تی ام ال زبان استاندارد و پایه طراحی صفحات وب است. چیزی که هنگام بازدید از یک صفحه اینترنتی مشاهده می کنید، نتیجه ترجمه و تفسیر مرورگر شما از کد های html است.

سنگ بنای Web ، زبان HTML می باشد.

برنامه های تحت وب بصورت کلی به دو دسته تقسیم می شوند :

برنامه های استاتیک : برنامه هایی هستند که صفحات آنها از متن، تصویر، صوت و … تشکیل شده اند و یک یا چند لینک به سایر آدرس ها در آن قرار گرفته، در واقع این نوع صفحات با کاربر تعاملی ندارند و صرفا کاربر می تواند موارد داخل این صفحات را مشاهده نماید.

برنامه های دینامیک یا پویا : برنامه هایی هستند که داده ای را از کاربر دریافت و آن را پردازش می کند، و در انتها نتیجه آن را در اختیار کاربر قرار می دهد.

زبان HTML در ساخت صفحات استاتیک مورد استفاده قرار می گیرد. همچنین ظاهر صفحات وب را نیز می توان با آن تعیین نمود، HTML مبتنی برمتن (Text Base) می باشد که ساختار آن را تگ ها (Tags) تشکیل می دهند.

هر یک از تگ های HTML معنی و مفهوم خاصی دارند و تاثیر مشخصی بر محتوای صفحه می گذارند. مانند تگ هایی برای فرمت متن یا لینک به آدرسی دیگر. برای درک بهتر وجود تگ ها باید به یکی از مهمترین تگ ها که لینک می باشد اشاره کرد که بنیان اصلی موتورهای جستجوگر حال حاضر به وجود این تگ در صفحات وب توجه ویژه ای می کنند.

بحث در مورد تگ های HTML کاملا مفصل هست به گونه ای که باید برای هر تگ مطلب مجزایی باشه تا تعریف و اجزای سازنده ی آن تگ و موارد استفاده را همراه با مثال توضیح دهیم. یکی از کاربردی ترین آموزش های HTML و CSS فرادرس را انتخاب کردم و تونستم به تمام مباحث HTML مسلط بشم.

یادگیری زبان CSS، شکل و شمایل دادن به وبسایت

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

کلمه CSS مخفف عبارت Cascading style sheets و به معنی ‌صفحات استایل آبشاری هست.

پس با زبان CSS شکل و شمایل این اجزاء تعریف می شود. به عنوان مثال پس از تعریف بخشی در صفحه با HTML، با زبان سی اس اس موقعیت آن در صفحه، اندازه و سایز، رنگ پس زمینه، کادر و حاشیه دور آن، فاصله آن از دیگر بخش ها، رنگ و نوع فونت متن آن تنظیم می شود. آموزش زبان CSS نسبت به HTML نیازمند زمان بیشتری هست چون جزئیات و پیچیدگی های بیشتری نسبت به HTML دارد.

آبشاری به چه معناست؟ چون دستورات CSS اعمال شده به هر عنصر و تگ در HTML، بر فرزندان اون عنصر هم تاثیر دارند.

مثال : در شکل زیر می توانید یک دستور ساده از ویژگی هایی که می خواهیم به یک تگ h1 در متن بدهیم را مشاهده کنید :

ترجمه کد : طبق دستور زیر می خواهیم خاصیت رنگ یا color را در یک متن به رنگ آبی کنیم و قابلیت تراز متن را به صورت وسط چین دربیاریم.

یادگیری زبان های HTML و CSS می توانند به تنهایی به شما کمک زیادی کنند که طراحی وبسایت خودتان را شروع کنید و از کار کردن در محیط وب و تعامل با کاربران لذت ببرید ولی یادگیری HTML و CSS برای ما کافیه؟

طراحی سایت با وردپرس Wordpress

قبلا اشاره کردیم که طراحی سایت های استاتیک با زبان HTML انجام می شود ولی اشاره ای به چگونگی ساخت سایت های پویا با عمکرد های چندگانه و قابلیت برنامه ریزی و هوشمند را نکردیم! در این بخش با مفهوم سیستم های مدیریت محتوا آشنا میشیم. خب سیستم مدیریت محتوا یا CMS چیست و چه کاربردی داره و از همه مهمتر چه کمکی به طراح سایت برای عملکرد بهتر کارش میکنه؟

تعریف سیستم مدیریت محتوا

سیستم مدیریت محتوا ، ترجمه عبارت content management system یا CMS هست که به معنای سیستم نرم افزاری است که به کمک آن محتوا مدیریت می شود و به نرم افزارهایی گفته می شود که نظام قابل مدیریتی را در ثبت , بروزرسانی و بازیابی محتوا فراهم می آورند لزوما CMS ها فقط تحت وب نیستند و میتونند آفلاین هم کار کنند که این از ویژگی های خوب آنهاست. ولی در این بخش منظور ما یک سیستم مدیریت محتوایی هست که بتوان در محیط وب و آنلاین با آن کار کنیم.

طراحی سایت با وردپرس

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

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

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

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

سایت های ایرانی و خارجی زیادی با وردپرس طراحی و ساخته شده اند که شاید برای شما جالب باشد :

سایت های ایرانی :

فرادرس، یاس دانلود، راست چین، دیجیاتو، شاتل و …

سایت های خارجی : 

شرکت مرسدس بنز، سایت رسمی کشور سوئد، روزنامه نیویورک تایمز، پلی استیشن و …

جمع بندی

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

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