دانلود آموزش صفر تا صد طراحی سایت – چطور و چگونه یک سایت طراحی کنیم؟

چطور یک سایت طراحی کنم؟

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

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

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

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

در طرف دیگر برنامه نویسی سایت قرار دارد. در برنامه نویسی سایت که توسط زبان های برنامه نویسی وب کدنویسی می شود؛ بیشترین تمرکز بر روی نحوه رد و بدل کردن اطلاعات و ارتباط بین قسمت های مختلف یک سایت است. برای برنامه نویسی یک سایت حتماً باید دید برنامه نویسی داشته باشید و حداقل در یک زبان برنامه نویسی وب تسلط یا آشنایی کافی را داشته باشید. افرادی که در این قسمت از حوزه سایت فعالیت می کنند در اصطلاح، برنامه نویسی بک اِند Back End انجام می دهند.

خوب اگر کسی هم در قسمت Front End و Back End یک سایت کار می کند در واقع یک برنامه نویس Full Stack است. پس با داشتن اطلاعات در مورد مفاهیم ذکر شده به سراغ آموزش می رویم و در هر بخش منابع مهم آموزشی همچون فرادرس را برای دانلود آموزش صفر تا صد طراحی سایت معرفی خواهیم کرد.

دامنه و هاست خود را بخرید

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

هزینه دامنه های ir. ناچیز است و براحتی با راهنمایی سایت های فروش دامنه، این کار را می توانید انجام دهید. (با توجه به تجربه شخصی خودم تا زمانی که اولین قدم برای این کار را یعنی خرید دامنه و هزینه کردن برای هدفتان را انجام ندهید؛ نمی توانید کار و هدفتان را جلو ببرید.)

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

این کار شاید کمی زمانبر باشد چون ابتدا دامنه شما باید فعال شود و عامل فروش هاست نیز مهلت لازم برای ارتباط بین هاست و دامنه را داشته باشد شاید در کمتر از ۲۴ ساعت، هاست و دامنه شما آماده شود.

تا الان کاری که انجام دادید فقط ثبت نام و وارد کردن اطلاعات در سایت های فروش دامنه و هاست بود. پس از این مرحله نام کاربری و کلمه عبوری برای شما داده خواهد شد تا بسته به اینکه کنترل پنل‌های میزبانی وب یا همان وب هاستینگ شما Cpanel یا Direct Admin باشد می توانید وارد محیط پنل خود بشوید.

شاید با نام های Cpanel و Direct Admin آشنا هستید. در واقع این محیط ها کنترل پنل‌های شما برای دسترسی به بخش های مختلف سایت است. هر دوی این کنترل پنل‌ها رفتاری تقریباً نزدیک به هم دارد و با چند ساعت کار کردن می توانید با قسمت های مختلف آشنا شوید.

• آموزش کار با cPanel __ کلیک کنید
• آموزش مدیریت هاست با دایرکت ادمین (DirectAdmin) __ کلیک کنید

اولین صفحه سایت خود را با HTML طراحی کنید

برای طراحی یک سایت نیاز هست شما با HTML آشنا شوید. HTML مخفف عبارت Hyper Text Markup Language می باشد و  به معنی زبان نشانه گذاری فرا متن است. تمامی کدهای زبان های برنامه نویسی وب برای این که در مرورگر ها نشان داده شوند به کدهای HTML تبدیل می شوند تا برای انسان دارای مفهوم باشند. همه مرورگر ها فقط کدهای HTML را می شناسند و کدهای هر زبان برنامه نویسی به کدهای HTML تبدیل می شوند و بوسیله مرورگر نمایش داده می شوند.

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

در HTML هر چیز با تگ نشان داده می شود. یعنی تمامی اجزا در صفحه نشانه گذاری می‌شوند و در مرورگر نشان داده می شوند. تگ ها انواع مختلفی دارند. هر کدام از tag ها برای نمایش یک نوع از المان یا بخش به کار برده می شوند.

برای اجرای فایل های HTML نیازی به داشتن سرور نیست یعنی در کامپیوترهای شخصی خود می توانید آنها را بنویسید و فقط با مرورگر خروجی ها را ببینید. برای اینکه در هاست خود برنامه را بنویسید به قسمت ریشه یا root هاست خود بروید و یک فایل با نام index.html بسازید و کدهای زیر را در داخل این فایل قرار دهید و آن را ذخیره کنید.

<!DOCTYPE html>
<html>
<head>
<title>My First Site</title>
</head>
<body>

<h1> Test </h1>
<p>This is Test Message</p>

</body>

</html>

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

• آموزش طراحی وب با HTML – کلیک کنید

برای طراحی ظاهر سایت با CSS کار کنید

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

بطور کلی سه نوع روش برای استفاده کدهای از CSS در HTML داریم:

1. روش خطی یا Inline
2. روش داخلی Internal
3. روش خارجی External

در اکثر پروژه ها طراحی سایت از روش خارجی External برای CSS نویسی استفاده می شود. در این روش دستورات CSS و HTML بطور جداگانه از هم نوشته می شوند. برای این کار در قسمت ریشه هاست خود یک پوشه ایجاد کنید و نام آن را CSS بگذارید. حال در پوشه CSS یک فایل با نام style.css ایجاد کنید و دستورات CSS زیر را داخل آن فایل بنویسید:

h1 {
color: red;
margin-left: 40px;
}
p
{
text-align:center;
color:blue;
}

حالا در قسمت HTML که در فایل index.html نوشته شده بود در قسمت Head لینک مربوط به ارتباط بین CSS و HTML را قرار دهید:

<head>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>

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

• آموزش طراحی وب با CSS – مقدماتی __ کلیک کنید

جاوا اسکریپت JS را به طراحی خود اضافه کنید

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

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

function myFunction() {
  var x=10;
  var y=20;
  var z=x+y;
  document.getElementById("demo").innerHTML = z;
}

حال کد HTML خود را بصورت زیر تغییر دهید:

<!DOCTYPE html>
<html>
<body>

<h1>Test JavaScript</h1>

<p id="demo">X+Y= </p>

<button type="button" onclick="myFunction()">Try it</button>


<script src="JS/Script1.js"></script>

</body>
</html>

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

• آموزش جاوا اسکریپت -کلیک کنید

با PHP برنامه نویسی وب را برای سایت شروع کنید

در گام بعدی با PHP برنامه نویسی وب را برای سایت شروع کنید. PHP یک زبان برنامه نویسی سمت سرور و برای برنامه نویسی Back end استفاده می شود. PHP به شما امکان می دهد تا اطلاعات خود را بین صفحات سایت انتقال دهید یا از پایگاه داده استفاده کنید. همانطور که گفته شد PHP در سمت سرور کدنویسی و اجرا می شود یعنی برای اجرای کدهای php از سرور باید استفاده کرد.

هاست شما بر روی یک سرور قرار دارد پس نیازی به دستکاری و موارد دیگر نیست و با نوشتن کد در یک فایل مثلاً test.php می توانید کدهای خود را اجرا کنید.

زمانی که نام دامنه خود را در آدرس بار مرورگر تایپ می کنید اولین چیزی که در صفحه مرورگر لود می شود فایل index هست که قبلاً این فایل را در ریشه هاست خود با نام index.html ایجاد کرده بودیم. حالا فرمت این فایل را به php. تغییر دهید (index.php). به عنوان نمونه کد زیر برای چاپ Hello World با PHP می باشد:

<!DOCTYPE html> 
<html> 
<body> 
 <h1>Test JavaScript</h1>
   <?php echo "Hello world" ?> 
  <p id="demo">X+Y= </p> 
  <button type="button" onclick="myFunction()">Try it</button> 
  <script src="JS/Script1.js"></script>
 </body>
</html>

همانطور که مشاهده می کنید در داخل تگ های HTML از php استفاده کرده ایم. فقط کافیست دستورات php را در داخل تگ php?> بنویسیم. برای دانلود آموزش صفر تا صد طراحی سایت با زبان برنامه نویسی php نیز می توانید از لینک زیر کمک بگیرید.

• مجموعه آموزش‌ PHP | آموزش برنامه نویسی پی اچ پی | مقدماتی تا پیشرفته __ کلیک کنید

سخن آخر در مورد دانلود آموزش صفر تا صد طراحی سایت

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

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