صفحه اصلی > طراحی وب سایت > آموزش طراحی وب سایت از پایه و مراحل طراحی سایت حرفه ای از مبتدی تا پیشرفته
آموزش طراحی وب سایت
آموزش طراحی وب سایت

آموزش طراحی وب سایت از پایه و مراحل طراحی سایت حرفه ای از مبتدی تا پیشرفته

راهنمای کامل آموزش طراحی وب سایت از پایه ، همچنین مراحل طراحی وب سایت و استارت آموزش طراحی وب سایت حرفه ای از ابتدا تا انتها با سید محمد حسین حسینی بصورت مبتدی تا پیشرفته ؛

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

 

آموزش طراحی وب سایت از پایه و حرفه ای

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

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

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

آموزش طراحی وب سایت از پایه
آموزش طراحی وب سایت از پایه

پیش نیاز یادگیری و آموزش طراحی وب سایت

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

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

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

پیش نیاز یادگیری و آموزش طراحی وب سایت
پیش نیاز یادگیری و آموزش طراحی وب سایت

 

مراحل طراحی وب سایت و شروع یادگیری

خوب رسیدیم به اینکه باید از کجا شروع کنیم تا طراحی وب سایت رو یاد بگیریم. من خودم زیاد از تشبیه جملات به درو دیوار خوشم نمیاد ولی اینجا برای درک بیشتر طراحی سایت مجبورم به کار ببرم 😛 . ( میخوام طراحی سایت رو به ساخت یک ساختمان تشبیه کنم امیدوارم رفقای مهندسم  ، بخصوص رفیق قدیمیم ارشیا با فحش ازم پذیرایی نکنه 😀 )

مراحل طراحی وب سایت و شروع یادگیری
مراحل طراحی وب سایت و شروع یادگیری

 

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

 

طراحی فرونت اند در وب سایت

حالا شما باید زبان HTML رو اسکلت یک سایت در نظر بگیرید. هر متن و عکس و صدا .. که در یک سایت میبینید با HTML قرار داده شدند.

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

در نهایت ، اون ریموت در که بالا بهتون گفتم و یا آسانسور که باعث کاربر سایت رو پویا ببینه با Javascript و کتاب خونه های js مثل Jquery طراحی میشوند.

طراحی فرونت اند و بک اند در وب سایت
طراحی فرونت اند و بک اند در وب سایت

 

طراحی بک اند در وب سایت

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

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

 

آموزش HTML و CSS

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

آموزش HTML و CSS
آموزش HTML و CSS

 

سخن ادمین ، سید محمد حسین حسینی :

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

پس مرحله اول برای طراح وب سایت حرفه ای شدن

یادگیری HTML و CSS

 

نمونه کد HTML

 

<!DOCTYPE html>
<html>
<head>
  <title>Seyed Mohamad Hossein Hossseini</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="https://mohamadhossein.ir">Home page</a>
  <li><a href="https://mohamadhossein.ir">about</a>
  <li><a href="https://mohamadhossein.ir">My articles</a>
  <li><a href="https://mohamadhossein.ir">about</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my site!</p>
</body>
</html>

 

کافیه کد بالا رو داخل notepad کپی و با فرمت .html ذخیره کنید و اجرا کنید تا نتیجه اولین صفحه طراحی شده تون رو ببینید 🙂 .

 

آموزش Javascript یا JS

یادگیری طراحی با Javascript یا JS
آموزش طراحی با Javascript یا JS

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

قدم دوم برای طراحی وب سایت حرفه ای شدن

یادگیری Javascript و تسلط بر آن

آموزش زبان PHP ( زبان های بک اند یا سمت سرور )

یادگیری زبان PHP ( زبان های بک اند یا سمت سرور )
یادگیری زبان PHP ( زبان های بک اند یا سمت سرور )

 

از این جا به بعد ،شما از طراح فرونت اند بودن میخواید پیشی بگیرید و اصطلاحا میخواید Full stack باشید ؛ یعنی کسی که هم به طراحی فرونت و هم به بک اند یا سمت سرور مسلط باشه. لازم به ذکر که شما در این مسیر باید با یکی از دیتابیس ها مانند mysql هم آشنا باشید .

( ادمین در این مسیره 😳 )

قدم آخر برای طراح وب سایت حرفه ای شدن

آموزش زبان سمت سرور مانند PHP

 

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

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

همچنین میتوانید از مطالب سایر تاپیک های ما مانند سئو و بهینه سازی سایت ،تولید محتوا  و.. دیدن کنید.

دوست دار همیشگی شما

سید محمد حسین حسینی

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

درباره‌ی سید محمد حسین حسینی

سید محمد حسین حسینی | دانشجوی کامپیوتر - عاشق دنیای وب - مشغول به کار در دفتر توسعه فناوری دانشگاه صنعتی شریف - طراح وب سایت و آشنا به سئو و وردپرس , PHP , JS , Photoshop ,HTML , CSS , Boot Strap, C#, Camtasia , تولید محتوا و ...

۱۱ نظر

  1. سلام ،مثل همیشه عالی بود ؛ ولی مهندس حسینی رشته عمران و ساختمان سازی به این سادگیا ک گفتی نیست . 🙂

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

    • برای یادگیری طراحی وب سایت برای شروع میتونی از فیلم های استاد مهرداد نادری در فرانش و یا سایر اساتید ، استفاده کنی و یا تو یوتیوب و آپارات و اگر زبانت در حد خوبیه میتونی از فیلم های وب سایت لیندا ، داکیومنت های http://www.tutorialspoint.com و یا W3schools استفاده کنی. موفق باشی

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

  4. سلام ممنون بابت مطالب خوبتون

  5. سلام بسیار لذت بردم
    ممنون

  6. سلام
    وقتتون بخیر
    من حدودا یکی دو ماهی میشه که تو زمینه سئو سایت کار میکنیم، دوره ش رو شرکت کردم، و قبل از اون هیچ پیش زمینه ای از طراحی سایت و اینا نداشتم
    میخواستم بپرسم اگه بخوام وارد حوزه طراحی سایت بشم اولا این که کار منطقی ایه؟ یعنی اصلا نیازی هست وارد این حوزه بشم با توجه به اینکه سئو خودش زمینه درآمد زاییه و دوما اینکه میشه طراحی سایت رو به صورت self study یاد گرفت؟
    در حال حاضر دارم رو سئو این سایت *** (فقط همین لندینگ پیجی که گذاشتم) دارم کار میکنم که به عنوان پروژه همون دوره ای که شرکت کردم دارم انجامش میدم تا مدرکمون رو بدن، هنوز خیلی مسلط نیستم هنوز، حالا به نظرتون تایم بیشتری رو سئو بذارم بهتره یا طراحی سایت رو هم در کنارش یاد بگیرم؟

    • سلام وقت شما هم بخیر
      – خیلی عالی
      – بله ورود به حوزه طراحی وب سایت برای یک سئو کار ، کار منطقی و درستیه؛ لازمه سئو دانش طراحی وب سایت و بلد بودن اصول هست .(هرچند اندک)
      -طراحی وب سایت بصورت self study کاملا شدنیه و خود من هم به همین روش یاگرفتم 🙂
      -طراحی وب سایت هم در کنار سئو یا بگیر

      “موفق باشی”

پاسخی بگذارید

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