اگر شما کمی استعداد طراحی و گرافیکی دارید و از انجام کارهای خلاقانه لذت می برید، این آموزش مناسب شماست. در واقع برای تولید یک وب سایت اینترنتی از متخصص های مختلفی استفاده می شود که یکی از آنها طراح وب است. طراح وب بیشتر به طراحی و برنامه نویسی لایه ظاهری و گرافیکی سایت می پردازد و برنامه نویس ها به تولید کد برای کنترل و پردازش محتوا که در بخش های مختلف وب سایت نمایش داده می شود می پردازند.
طراح وب باید ظاهر سایت را در ذهن خود تصویر سازی کرده و درک کند و سپس به کمک طرح‌های اولیه در صفحه‌ی کاغذ کار طراحی خود را آغاز کند. سپس طرح را در نرم افزارهای گرافیکی مثل فتوشاپ پیاده‌سازی می‌نماید و در انتها طرح را به کد تبدیل می‌کند. شما به عنوان یک طراح وب می توانید روی انواع سایت ها از سایت های آموزشی و تبلیغاتی تا فروشگاه های اینترنتی کار کنید.
شغل طراحی وب سایت از جمله مشاغلی است که در این سال‌ها مورد توجه بسیاری از افراد قرار گرفته است. طراح وب سایت از خلاقیت و مهارت‌های فنی خود، برای ایجاد و طراحی وب سایت‌ها استفاده می‌کند.
آشنایی اولیه با آموزش طراحی وب سایت:
طراحی وب سایت نیاز به تخصص و تجربه فراوان دارد. یک طراح وب سایت لازم است در مورد طراحی گرافیک، کد نویسی وب سایت اطلاعات کافی داشته باشد. برای آنکه بتوانید به تنهایی یک وب سایت حرفه ای را مدیریت نمایید دانستن مواردی مثل HTML و CSS، زبان برنامه نویسی سمت سرور نظیر PHP، ایمن سازی وب سایت، تنظیمات سرور و هاستینگ، سئو و بهینه سازی سایت الزامی می باشد.
یکی از محبوب ترین روش های آموزشی دیدن فیلم های آموزشی است که انتقال دانش را سریعتر انجام میدهد. برای این کار کافی است که از سایت های آموزشی استفاده کنید.
سایت های مثل www.w3schools.com نیز با سرفصل های مشخص و دانش کمی از زبان انگلیسی می تواند برای شما مفید باشد.
برای شروع طراحی وب سایت به خصوص برای تازه کارها لازم است از ابتدا آموزش های پایه و مبانی را به صورت مختصر توضیح دهیم. دو نوع کد نویسی برای طراحی وب سایت وجود دارد که به اصطلاح کد نویسی سمت کلاینت ( کاربر ) و کد نویسی سمت سرور که مربوط به مدیریت محتوای و اطلاعات می باشد. برای هر کدام از این نوع کد نویسی ما نیاز به دانش خاصی داریم و معمولا بهتر است در یکی از این شاخه ها حرفه ای باشیم.
اگر علاقه مند به طراحی هستیم بهتر است که کد نویسی سمت کلاینت ( کاربر ) را یاد بگیریم و اگر علاقه مند به برنامه نویسی هستیم بهتر است کد نویسی سمت سرور را یاد بگیریم.
برای یاد گیری هر کدام از این ها ما نیازمند یاد گیری زبان برنامه نویسی خاصی هستیم که به طور مختصر مهارت ای پایه هر کدام را برای شما در زیر شرح می دهم.
مهارت های پایه برای کد نویسی سمت کلاینت (کاربر) یا همان طراحی ظاهری سایت:
- آشنایی با برنامه فتوشاپ
- آشنایی با HTML
- آشنایی با CSS
- آشنایی با jQuery
مهارت های پایه برای کد نویسی سمت سرور یا همان کنترل تولید محتوا و اطلاعات:
- آشنایی با اصول اولیه برنامه نویسی
- آشنایی با PHP
- آشنایی با SQL
- آشنایی با JavaScript
آموزش طراحی وب سایت قسمت اول
در این سری آموزشها ما فقط با کد نویسی سمت کلاینت (کاربر) یا همان طراحی ظاهری سایت آشنا خواهیم شد.
1- خوب در ابتدا نیاز است از Notepad استفاده کنیم. در قسمت سرچ ویندوز عبارت Notepad را جستجو کنید این برنامه به طور پیش فرض روی ویندوز شما نصب بوده است و فقط کافی است این برنامه را باز کنید.
2- خوب بعد از اجرای Notepad اولین خط کدی که می نویسیم تگ html است. در برنامه نویسی به این نوع کدها تگ (tag) گفته می شود. با نوشتن این تگ ما یک صفحه وب سایت ایجاد کردیم ولی هنوز محتوایی برای نمایش نداریم.
3- تگ بعدی که نیاز هست نوشته شود تگ head است که در این قسمت اسم صفحه و منابع مورد نیاز برای پشتیبانی از صفحه وب را فراخوانی میکنیم.
4- مراحله بعدی نوشتن تگ body است که محتوای اصلی سایت ما در این قسمت نمایش داده می شود.
5- حالا در قسمت Head تگ title را اضافه میکنیم که نمایشگر اسم صفحه ی وب سایت ما می باشد.
6- برای ذخیره کردن صفحه و نمایش آن در مرورگر کافی است مراحل زیر را انجام دهید.
- قسمت file روی گذینه save کلیک کنید
- یک اسم برای صفحه خود بنویسید مثلا web
- بعد پسوند html. را ادامه اسم صفحه بنویسید مثلا web.html
- در قسمت Encoding گذینه UTF-8 را انتخاب کنید
- و در آخر گذینه save را کلیک کنید (صفحه خود را در جایی مشخص کامپیوتر خود ذخیره کنید مثلا در دسکتاپ)
7- حالا به دسکتاپ میرویم و صفحه وب که به اسم web.html ذخیره کرده ایم را مشاهد می کنیم. روی همین صفحه ذخیره شده راست کلیک کنید و گذینه open with و بعد یکی از مرورگرهای سیستم خود را انتخاب کنید مثلا google chrome حالا صفحه ی وب شما نمایش داده می شود.
روی قسمت Tab وب سایت اسمی را که برای صفحه وب خود نوشته بودید در تگ title را مشاهده می کنید.
طراحی وب سایت قسمت اول
توضیحات بیشتر درباره طراحی وب سایت:
<html>
<head>
<title>
طراحی وب سایت
</title>
</head>
<body>
</body>
</html>
این نمونه کد را کپی کنید و در یک فایل notepad با پسوند html ذخیره کنید.
برای این که یک فایل notepad داشته باشید کافیه کلمه notepad را در سرچ ویندوزتون بزند و برنامه notepad را باز کنید و کد بالا را در آن ذخیره کنید و پس از اینکه فایل را ذخیره کردید روی فایل ذخیره شده کلیک راست کنید و گزینه open with و سپس google chrome را انتخاب کنید تا فایل ذخیره شده شما در مرورگر گوگل نمایش داده شود.
این کد فقط فعلا ساخت یک صفحه هست که هنوز محتوایی ندارد و اسم صفحه را شما مشخص کرده اید.
مثل عکس زیر:
