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


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

وب چطور کار می کنه؟
برای شروع، اول باید یک قدم به عقب برگردیم و به این موضوع فکر کنیم که اصلاً وب چطور کار می کنه؟ وقتی دو کامپیوتر، به اینترنت (خط زرد رنگ در عکس پایین) وصل می شن، می تونن با هم ارتباط برقرار کنن. یک سرور (که در عکس زیر به شکل یک جعبه ی آبی رنگ هست) یک کامپیوتر مخصوصه که فایل های صفحات وب سایت های مختلف -مثلا سکان آکادمی- رو نگه داری می کنه. کامپیوتری که شما توی خونه و یا مدرسه ازش استفاده می کنید، سرور نیست چون مستقیم به اینترنت وصل نیست. ما با استفاده از یک ISP که مخفف  Internet Service Provider و به معنی رساننده ی خدمات اینترنتیه، به اینترنت وصل می شیم. آی اس پی ها شرکت هایی هستن که کامپیوتر شما رو با استفاده از خط تلفن یا روش های دیگه، به اینترنت وصل می کنن (مثل پارس آنلاین، شاتل، داتک و ...) محتوای یک سایت (یعنی همه ی چیزهایی که توی یک سایت وجود داره) با مجموعه ای از قانون های مخصوصی کنار هم چیده شدن که کامپیوتر ها این قوانین رو می فهمن. مثل صحبت کردن به یک زبان رمزی! البته ما هم به زودی از راز این زبان، سر در میاریم!


وقتی که شما وارد سایت سکان آکادمی می شید، مرورگر از سرور -یعنی جایی که فایل های سایت سکان آکادمی در اونجا وجود دارن- می خواد که صفحه ی اصلی www.sokanacademy.com رو نشون بده، سرور این فایل ها رو می فرسته و مرورگر اون ها رو برای نشون دادن روی صفحه ی کامپیوتر، رمزگشایی می کنه. شاید براتون سوال شده که اصلاً مرورگر چیه! مرورگرها، نرم افزار هایی هستن که توی کامپیوتر شما نصب شدن و با استفاده از اون ها می تونید سایت های اینترنتی رو ببینید. اینترنت اکسپلورر، گوگل کروم و فایر فاکس و سافاری مرورگرهای معروفی هستن که شما حتماً یکیش رو توی کامپیوترتون دارید. البته همه ی این اتفاق ها خیلی سریع می افته. به این مراحل، برقراری ارتباط و یا به اشتراک گذاری اطلاعات می گن. برای گذروندن این مراحلی که بالاتر توضیح دادیم، سایتی که شما در کامپیوتر خودتون می سازین رو افراد دیگه با کامپیوتر های دیگه نمی تونن ببینن، مگر این که شما اون رو به یک سرور منتقل کنین که در پایان دوره این کار رو هم براتون توضیح می دیم.


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


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

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

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


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


زبان اچ تی ام ال
HTML که مخفف HyperText Markup Language است، همان زبان مرموزیه که قبلاً درباره ی اون صحبت کردیم. این زبان به مرورگرها کمک می کنه تا فایل های وب سایتمون رو بفهمن و نمایش بدن. همه ی چیزهایی که ما در سایتمون داریم، در درون اجزاء HTML قرار دارن. این اجزاء، مثل کلمه های این زبان هستن که هر کدام معنی خاصی دارن و چیزهایی که ما در صفحه ی وب سایتمون داریم رو توصیف می کنن.


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


زبان سی اس اس
CSS مخفف Cascading Stylesheets است و به ما اجازه می ده تا شکل ظاهری وب سایتمون مثل فونت ها و رنگ ها رو مشخص کنیم و کاری کنیم تا وب سایتمون جذاب باشه و بازدیدکننده ها به راحتی بتونن ازش استفاده کنن و لذت ببرن. سی اس اس هم مثل اچ تی ام ال یک زبانه که برای خوشکل کردن ظاهر سایت ها ازش استفاده می کنن.


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


عکس ها
فرض کنید که شما وارد یک سایت می شید. اگر در آن سایت از هیچ عکسی استفاده نشده باشه چه حسی به شما دست می ده؟ مسلما اون سایت، سایتی خسته کننده خواهد بود (فرض کنید ما در سکان آکادمی در این دوره ی آموزشی اصلا از هیچ عکسی استفاده نکنیم!). در این قسمت از مسیرمون، در مورد انواع عکس هایی که می تونیم در سایتمون استفاده کنیم صحبت می کنیم و یاد می گیریم چطور اون ها رو شکل بدیم.


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


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


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


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

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

نکته
نکاتی که منجر به درک بهتر موارد مطروحه می‌شوند، در قالب باکس‌های سبز رنگی به این شکل در اختیار دانشجویان قرار خواهند گرفت.
هشدار
برنامه‌نویسان مبتدی در برخی موارد می‌بایست دقت بیشتری به خرج دهند تا در آینده با سردرگمی کمتری مواجه شوند؛ به همین منظور، هشدارهای این دورهٔ آموزشی در قالب باکس‌های قرمز رنگی به این شکل درمعرض دید دانشجویان قرار خواهند گرفت.
به خاطر داشته باشید
برخی نکات هستند که مخاطبین این دورهٔ آموزشی می‌بایست به‌خاطر بسپارند چراکه در آموزش‌های آتی به آن نیاز خواهند داشت که کلیهٔ این نکات در قالب باکس‌های آبی رنگی به این شکل عرضه خواهند شد.
دانلود فایل‌های تمرین
لیست نظرات
کاربر میهمان
دیدگاه شما چیست؟
کاربر میهمان
Insight
Insight
فرمت فایل های HTML به دو صورت html. و htm. قابل استفاده‌ست. امروزه فرمت استاندارد html. هست اما در گذشته به دلیل اینکه در تعداد کاراکتر های فرمت محدودیت وجود داشت و حداکثر 3 کاراکتر قابل استفاده بود،‌ از htm استفاده میشد.
حتی الان اگه به برخی صفحات سایتی مثل W3schools نگاه کنید میبینید که هنوز فرمت فایل ها به صورت همون ۳ کاراکتر هست.
محسن
محسن
دوست عزیز این جا بخش"دورهٔ آموزش برنامه‌نویسی به کودکان" صرفا برای کسب امتیاز spam نکنید لطفا

در پاسخ به

HAMIDREZA ABBASI
HAMIDREZA ABBASI
سلام خسته نباشید خدمت شما آموزش هاتون واقعا عالی هستن فقط من از کجا میتونم فایل های تمرین رو دانلود کنم ممنون از زحماتتون
ادمین سایت
ادمین سایت
با سلام خدمت شما کاربر گرامی
لینک دانلود در انتهای همین آموزش قرار دارد. روی دکمهٔ «دانلود فایل‌های تمرین کلیک نمایید» و کلیهٔ فایل‌ها را دانلود نمایید.

با تشکر
ارادتمند
تیم سکان آکادمی

در پاسخ به

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

https://sokanacademy.com/courses/coding

در پاسخ به

Mina Av
Mina Av
با عرض سلام و خسته نباشید خدمت شما وضمن تشکر از سایت خوبتون
من تصمیم گرفتم طراحی وب رو یاد بگیرم.از اونجایی که هیچی ازش بلد نبودم اومدم این قسمت رو بخونم که بتونم از پایه یاد بگیرم.میخواستم بدونم بعد از خوندن این دوره ۱۱ جلسه ای شما پیشنهاد میکنید که در ادامش چی مطالعه کنم؟
در کل ازتون میخوام راهنماییم کنید تا بتونم بصورت کامل طراحی وب رو یاد بگیرم.
با تشکر
ادمین سایت
ادمین سایت
با سلام و عرض ادب خدمت شما کاربر گرامی،
احتراماً خواهشمند است سؤال خود را در تالار گفتگوی سایت مطرح نمایید تا کاربران بیشتری بتوانند شما را راهنمایی نمایند.


با تشکر
ارادتمند
تیم سکان

در پاسخ به

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

YadCom.ir

کانال تلگرام ما :
@yadcom
aherehef
aherehef
ادامه ش کجاست؟
محمد پارسا
محمد پارسا
سلام
بالا سمت چپ مانتیور قسمت های بعدی هم وجود داره

در پاسخ به

رضا بختیاری
رضا بختیاری
مثل هميشه عالي بود ❤️
کاربر میهمان
کاربر میهمان
سلام
خسته نباشید من تاحالا خیلی از سایتتون استفاده کردم واقعا عالیه
یه سوال داشتم
کل این دوره همینه؟
ادمین سایت
ادمین سایت
با سلام خدمت شما کاربر گرامی
آری

در پاسخ به

mohsen
mohsen
سلام
می خواستم بدونم دوره آموزش طراحی سایت به کودکان دارای فرمت pdf برای دانلود می باشد؟

در پاسخ به

ادمین سایت
ادمین سایت
با سلام خدمت شما کاربر گرامی،
احتراماً به استحضار می‌رساند که این دوره صرفا تحت وب منتشر می‌شود.


با تشکر
ارادتمند
تیم سکان آکادمی

در پاسخ به