در زمینه طراحی وب سایت ها، آموزش های مختلف زیادی در اینترنت وجود دارند که افرادی که میخواهند طراحی سایت را یاد بگیرند سعی می کنند با این نرم افزار ها کار خود را شروع کنند و با خواندن مقالات مختلف و یا دیدن ویدیو های آموزشی سعی می کنند که طراحی سایت و برنامه نویسی تحت وب را یاد بگیرند تا بتوانند سایت خودشان را طراحی کنند و آغاز به کار کنند.
هدف از طراحی سایت می تواند عوامل مختلفی باشد که یا شما می خواهید یک سایتی را طراحی و راه اندازی کنید که از طریق آن کسب درآمد اینترنتی کنید و محصولات خود را به فروش بگذارید و یا می خواهید یک سری مطالب را به مخاطبان ارائه دهید و از طریق سایت آنها را منتشر کنید.
اهداف زیادی برای راه اندازی یک وب سایت وجود دارد که با توجه به هدفی که یک وبسایت دنبال میکند طراحی هایی که برای آن انجام میشود مختلف است و شما با دانستن تکنیک ها و عوامل مختلف طراحی سایت می توانید یک کار خوب و هدفمند را انجام دهید.
آموزش استارت آپ آموزش دیجیتال مارکتینگ آموزش طراحی سایت آموزش کامل طراحی وب سایت و آشنایی با پنل کاربری های وب
برای طراحی سایت هم مثل خیلی از کارهای دیگر لازم است که اول یک تئوری در مورد کار بدانید و بدانید که شرح وظایف شما به چه صورت است و چه مراحلی را باید طی کنید.
در اولین مرحله کار خود لازم است که html که مخفف زبان نشانه گذاری ابر است را یاد بگیرید. html یک زبان برنامه نویسی نیست و یک زبان نشانه گذاری می باشد که با استفاده از آن شما خواهید فهمید که کدام قسمت برنامهای که شما طراحی کرده اید یک پاراگراف است، کدام قسمت جدول و کجا عکس است و به همین ترتیب همه قسمت های مختلف شناسایی خواهند شد و در واقع زبان برقراری ارتباط با مرورگر ها html می باشد.
بعد از اینکه این زبان را یاد گرفتید و توانستید با مرور گر ها ارتباط برقرار کنید لازم است که با زبان های مختلف آشنایی پیدا کنید و یکی از اینها css است که استفاده از آن اجازه می دهد که قسمت های مختلف را اصلاح کنید و ظاهر اصلی سایت را مثل شکل و رنگ و چیزی که مد نظرتان است طراحی کنید. به طور مثال می خواهید که در یک قسمت هایی از صفحه تصویری که قرار میدهید بزرگ باشد و در یک قسمت هایی کوچک تر باشد. این تغییر پیکسل ها و اندازه ها و به طور کلی همه کارهایی که به ظاهر سایت مربوط میشود در این حیطه قرار دارد.
در مرحله بعدی لازم است که جاوا اسکریپت یاد بگیرید و جاوا اسکریپت باعث می شود از تمام اطلاعاتی که در مورد html و css بلد بودید بتوانید به صورت هدفمند استفاده کنید تا یک سایت را مدیریت کنید.
برای اولین بار وقتی که می خواهید یک زبان برنامه نویسی را یاد بگیرید قطعاً برای شما مشکل است که متوجه الگوریتم نویسی شوید و بدانید که در نوشتن به چه مواردی توجه کنید. اما وقتی که یک برنامه را یاد بگیرید و یک زبان برنامه نویسی را به خوبی فرا بگیرید یاد گرفتن بقیه زبان ها برای شما کار سختی نخواهد بود زیرا شما با تکنیک های الگوریتم نویسی آشنا شده اید و دیگر خیلی بهتر می توانید در این راه قدم بردارید.
بعد از اینکه جاوا اسکریپت را هم یاد گرفتید و تسلط نسبی روی آن پیدا کرده اید باید به قسمت جی کوئری برسید که یک کتابخانه است که با استفاده از همان زبان جاوا کد جاوا اسکریپت نوشته شده که خیلی راحت می توانید با استفاده از آن کد نویسی کنید و از کدهای آماده آن استفاده کنید و یادگیری آن یکی از موارد خیلی مهم در طول روند طراحی سایت است.
البته نگران نباشید چون یادگیری آن هم خیلی سخت نیست و شما می توانید با کد ها و برنامه های پیش فرضی که در آن قرار دارد خیلی راحتتر کار خود را ادامه دهید.
برای اینکه یک وب سایت را راه اندازی کنید باید در دو قسمت کد نویسی ها را انجام دهید یک سمت بازدید کننده ها و دیگری سمت سرور.
مواردی که تا الان برای شما صحبت کردیم از جمله html و همچنین css و جاوا اسکریپت و جی کوئری همه این ها در جهت بازدید کننده ها بودند و برای اینکه با برنامه نویسی و کد نویسی های سمت سرور هم آشنا شوید باید در موارد مرتبط با آنها را یاد بگیرید تا بتوانید در زمینه کدنویسی خیلی خوب و قوی عمل کنید.
تا به اینجای کار یکسری موارد کلی و تیتروار در مورد طراحی سایت به شما گفتیم و علت اهمیت یادگیری قسمت های مختلف آن را برای شما توضیح دادیم اما همه مراحل کار به همین سادگی نیست و وقتی که شما گرفتید و به سراغ برنامه های جدید تر و متنوع رفتید، فکر می کنید که چقدر این زبان های html و css برای شما راحت تر و قابل فهم تر بودند. پس بهتر است از پایه خود را قوی کنید تا بتوانید از عهده بقیه زبان های برنامه نویسی و بقیه مراحلی که برای طراحی سایت پیشرفته مورد نیاز است بر بیایید.
همانطور که اشاره کردیم html زبان نشانه گذاری و علامت گذاری ابر متن ها است که با این زبان شما میتوانید با مرورگرهای مختلف ارتباط برقرار کنید و به آنها بگویید که در هر قسمت از صفحه وب سایت شما چه چیزی را نمایش دهند.
این عبارت هم مخفف کلماتی است که به معنی صفحات استایل آبشاری می باشد و در واقع این یک زبان برنامه نویسی نیست بلکه یک زبان استایل نویسی است و به شما کمک می کند که با مرورگرها بهتر ارتباط برقرار کنید.
برای اینکه بتوانید کار با این ابزارهای کد نویسی را آغاز کنید و در این راه قدم بردارید لازم است که نرم افزار های خیلی ساده و قابل فهمی مثل نوت پد 2پلاس (++notepad) را داشته باشید و بعد از اینکه ماهر شدید می توانید از بقیه نرم افزار ها مثل Sublime Text یا Dream Weaver یا Atom استفاده کنید.
در اولین قدم لازم است که برای شروع کار و تمرین و راه افتادن در این مسیر یک سند html ایجاد کنید تا کار با آن را یاد بگیرید. در نظر داشته باشید که هر چقدر هم در این زمینه ها موارد تئوری را مطالعه کنید تا دست به کار نشوید و به صورت عملی این کارها را انجام ندهید نمی توانید با خم و چم کار آشنا شوید و آن را به خوبی یاد بگیرید و تجربههای جدیدی کسب کنید.
پس بهتر است در اولین قدم یک سند html تولید کنید که نشان دهنده ساختار صفحه سایت شما باشد. همان طور که گفته شد می توانید از ادیتور هایی مثل نوت پد 2پلاس استفاده کنید که در این راه می تواند به سادگی به شما کمک کند.
مراحل زیر را به ترتیب انجام دهید تا در نهایت یک سند html داشته باشید.
-
در دسکتاپ خود پوشه ای به نام mihanwp ایجاد کنید.
-
++notepad را باز کنید و از منوی file گزینه new را بزنید.
-
از قسمت منوی بالا encoding را روی utf-8 قرار دهید.
-
در نهایت فایل را در پوشه mihanwp که ایجاد کردید ، با پوسند html. ذخیره کنید.
-
حالا این سند ایجاد شده و شما می توانید در آن کد نویسی انجام دهید.
تگ ها یا برچسب ها مفهومی هستند که توصیف کننده ساختار سایت شما هستند و برای کدنویسی بخش های مختلف سایت به شما کمک خواهند کرد. مثلا اگر تگ قرار دهید می توانید یک تگ را فقط روی عکس بگذارید. هر کدام از این قسمت ها مثل عنوان متن، عکس، جدول و غیره با یک علامت مشخص میشوند که در دو نوع تگ باز و تگ بسته وجود دارند.
وقتی که یک تگ تنها باشد و یک محتوای مشخصی در آن قرار داشته باشد مثل عکس، جدول و یا غیره به آنها تگ باز می گویند که به شکل زیر نمایش داده می شود:
اگر یک تگ به صورت باز و بسته باشد به آنها جفت می گویم یا محتوای که بین دو تگ قرار داده میشود به عنوان یک پاراگراف استفاده می شود.
حالا که یاد گرفتید یک سند html ایجاد کنید و تگ ها را هم بلد هستید بهتر است که ساختار اصلی وبسایت را در ذهن خود تجسم کنید و روی کار پیاده سازی کنید. در نظر داشته باشید که بهتر است یکسری کدهایی را هم حفظ کنید که مدام از آنها استفاده میکنید و با ذخیره کردن آنها درون فایل خود می توانید خیلی سریعتر کارهایتان را پیش ببرید.
همانطور که قبلا اشاره کردیم بهتر است که یک سری از کدهای پیشفرض را حفظ کنید و آنها را به خوبی بشناسید تا بتوانید صفحه اصلی سایت را شناسایی کنید و هر جایی که خواستید آنها را ویرایش کنید.
در ادامه کدهایی را که برای فایل html به کار میرود را توضیح می دهیم تا با شناخت بهتر آنها بتوانید راحت تر از آنها استفاده کنید و اگر خواستید خصوصیاتی را به آنها اضافه یا کم کنید.
-
doctype html : نشان می دهد سند شما از نوع html است.
-
تگ شماره 2 یا همان تگ html به شما میگوید سند html ما از اینجا شروع میشود و در آخر تمام می شود. توجه داشته باشید که این تگ یک تگ باز است و باید حتما آن را ببندید.
-
تگ head کاملا شبیه مغز انسان است و اطلاعاتی که در تگ head وارد میکنید در سایت شما نمایش داده نمیشود ولی مغز اصلی سایت را تشکیل میدهد.
-
در واقع می توان گفت که عنوان سایت، اطلاعات متا که برای سئوی سایت و دادن اطلاعات مفید به مرورگر و موتورهای جستجو استفاده میشود، فایل ها و کتابخانه هاCss ، فایل ها و کتابخانه های جاوا اسکریپت و غیره همه داخل تگ بسته head قرار میگیرند.
-
همچنین برای پشتیبانی سایت خود از زبان فارسی باید از متا تگ charset استفاده کنید. استفاده از این متا تگ، اجباری است. البته اگر زبان سایتی که قرار است طراحی کنید فارسی باشد.
-
اسم سایت نیز داخل تگ بسته title قرار می گیرد و هر چه در body بنویسید کاربر آن را میبیند پس هر چیزی که در تگ بسته body قرار میگیرد مستقیما به نمایش در می آید.
برای اینکه بتوانید کد های خود را در html کامنت کنید دقت داشته باشید که این کامنتها یک سری اطلاعات در مورد کد نویسی شما در بر دارند و اگر برای یک سری از قسمت های مختلف کد وب سایتتان کامنت قرار دهید بعداً که دوباره وارد آن شوید متوجه میشوید که نیاز داشتید آنها را ویرایش کنید و یا ممکن است چیزی به یاد شما بیاید که این کامنت ها هیچ وقت در مرورگر اصلی وب سایت به مخاطبان نمایش داده نمی شود و فقط برای این است که قرار است آنها را ببینید و ویرایش را انجام دهید یا در یک قسمت های کامنت کنید که یادتان باشد به این متن عکس اضافه شود و یا به روز رسانی شود و غیره. تمام این ها به عنوان یک کامنت شناسایی میشود و به مخاطب نشان داده نمی شوند.
حالا که با ساختار اصلی فایل های html آشنایی دارید و می دانید که هر کدام از آنها چه کار هایی دارند و کامنت گذاری را هم میشناسید بهتر است که حالا یک فایل css ایجاد کنید و بتوانید آن را به فایل html متصل کنید تا کمی در این مسیر حرفهای تر شوید.
برای اینکه بتوانید این سند را اضافه کنید بهتر است در مرحله اول همان فایل html را ایجاد کرده باشید تا به این قسمت برسید و شما در این مرحله می خواهید یک سند css ایجاد کنید تا ظاهر سایت را جلا دهید و آنطور که دلتان می خواهد رنگ و جلوه آن را انتخاب کنید و همانطور که گفتیم بهتر است از یک ادیتور ساده و خوبی مثل (++notepad) استفاده کنید و تغییراتی که میخواهید را اعمال کنید.
فایل های css را معمولاً کنار فایل html در پوشه روت میگذارند و باید این دو فایل در کنار هم در یک پوشه باشند و در پوشه های جداگانه نباشند زیرا کاملاً به هم مرتبط هستند.
-
++notepad را باز کنید و از منوی file گزینه new را بزنید.
-
از منوی file گزینه save as را بزنید.
-
نام فایل را style.css بگذارید و پسوند آن را CSS. قرار بدهید.
-
نهایتا فایل را در پوشه mihanwp که قبلا ایجاد کرده بودید ذخیره کنید.
-
حالا شما توانسته اید یک سند CSS را ایجاد کنید که می توانید در آن کد نویسی انجام دهید.
تا به اینجا شما موفق شده اید که html و CSS خود را با هم مرتبط کنید و ظاهر سایت را ویرایش کنید. شما با استفاده از روشهای مختلف میتوانید این اتصال را در سایت خودتان استفاده کنید که هر کدام از آنها را توضیح خواهیم داد.
- تگ بسته یا روش اکسترنال
- روش مستقیم تگ باز و بسته
- روش درون تگی یا استایل نویسی داخل تگ
اگر تصمیم گرفتید از تگی در متن خود استفاده کنید باید از یک تگ بسته در تک بسته head استفاده کنید که باعث میشود فایل css شما به فایل html مرتبط شود و بین آنها پیوند برقرار شود و پیشنهاد می کنیم که برای استایل نویسی وب سایت خود از این روش استفاده کنید چون خیلی منظم است و خیلی از وب سایت ها هم در حال حاضر از همین روش استفاده می کنند و به مشکلی بر نمی خورند. سعی کنید همین چند کد ساده را یاد بگیرید و حفظ کنید تا بتوانید در همه قسمت های وب سایت از آن استفاده کنید و خیلی زود با نگاه به آنها مفهوم را متوجه شوید.
شما خیلی راحت و به صورت مستقیم می توانید داخل فایل های html کدهای css تان را قرار دهید ولی باید در نظر داشته باشید که حتما تگ استایل باید داخل head باشد.
شما می توانید با استفاده از ویژگی های استایل داخل تگ ها یک استایل بنویسید که خیلی توصیه نمیکنیم که از این روش استفاده کنید زیرا تا حدود زیادی کد ها به هم ریخته میشود و مخصوصا اگر شما در ابتدای مسیر باشید ممکن است که کاملا گیج شوید و نتوانید هدفی که می خواستید را دنبال کنید اما برای آشنایی بیشتر شما با این موارد سعی کردیم که از آنها نام ببریم.