معماری
ضعیفبد نیستمتوسطخوبعالی (1 votes, average: 5٫00 out of 5)
Loading...

فیلم آموزشی طراحی صفحات وب با HTML5 و CSS3 – قسمت 1

به نام خدا

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

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

آموزش طراحی صفحات وب با HTML5 و CSS3 | پروژه محور بصورت 0 تا 100
آموزش طراحی صفحات وب با HTML5 و CSS3 | پروژه محور بصورت 0 تا 100

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

  • در این مجموعه چه خواهیم آموخت؟

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

هر وب سایتی که در اینترنت مشاهده می کنید می تواند یا پویا باشد و یا ایستا که اکثرا امروزه بصورت پویا (Dynamic) می باشد یعنی با کاربران تعامل دارد.

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

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

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

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

در این مرحله که به آن برنامه نویسی سایت (برنامه نویسی تحت وب یا برنامه نویس Back-end) گفته می شود، امکان سنجی و پیش بینی می شود که برای این سایت با این امکانات از چه زبانی استفاده شود برای برنامه نویسی بهتر است تا پاسخگوی دائم بازدیدکنندگان باشد ضمن اینکه امنیت آن تامین شود. همچنین سروری که قرار است پس از برنامه نویسی به آن مراجعه کنیم مشخص می شود بعنوان مثال سرور ما قابلیت پشتیبانی از پایتون را خواهد داشت یا پی اچ پی و ایا چنین سروری را می توانیم با هزینه برآورد شده تهیه کنیم یا خیر که سایر جزئیات در فیلم آموزشی همراه این پی دی اف گفته می شود که از سایت میهن لرن قابل دانلود است.

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

مشاهده آنلاین در سایت میهن لرن:

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

دانلود | Download

مدت زمان: 55 دقیقه / حجم: 111 مگابایت / کیفیت: عالی / مدرس: سعید حکیمی

دانلود رایگان فیلم اموزشی

دانلود کتاب الکترونیکی

مشاهده آنلاین

توجه: ضمن اینکه از محصولات رایگان میهن لرن بهره مند می شوید با کلیک در اینجا می توانید پکیج های آموزشی جامع را در زمینه های مختلف مشاهده و دریافت نمایید.

همچنین ببینید

آموزش پروژه محور طراحی صفحات وب با HTML و CSS

فیلم آموزش پروژه محور طراحی وب با HTML5 و CSS3 – قسمت 2

به نام خداوند رزاق و مهربان خوشحالیم که در حال ارائه یک مجموعه ویژه به …

6 دیدگاه

  1. با سلام و عرض خسته نباشیدخدمت دوستان خلاق و ارجمند میهن لرن.
    اقا سعید. من فیلم اموزشی طراحی وبتونو دیدم(قسمت اولشو). اما یچیشو نفهمیدم. این notepad رو شما کجا باز میکنید که وقتی کد نویسیشو داخل اووون فابل متنی انجام میدید. بعد که باز میکنید . اجرا میکنه ؟؟؟؟؟؟؟؟؟/ من همزمان زمان شما . یه فایل متنی رو دسکتاپ ایجاد کردم و اوون فایل رو از طریق notepadباز کردمو اوون قالب اصلی و اولیه اچ تی ام ال رو نوشتن مث شما . اما اصلا واس من اجرا نمیکرد. وقتی فایل رو باز میکنم توش خالیه!!!!!!!! قضیه چیه؟؟؟؟!!!!!!!!!!!!!!

    • سلام و سپاس از نظر شما دوست گرامی.
      نوت پد را باز میکنم برای یک فایل با پسوند html. !
      دقت کنید پسوند فایلتان txt. نباشد که صفحه ای را مشاهده نخواهید کرد.
      موفق باشید

  2. سلام خیلی ممنون از آموزش خوبتون
    اگر آموزش صفر تا صد پی اچ پی هم داشته باشید خیلی ممنون میشم که بصورت پروژه محور باشه

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

  3. سلام

    عالیه . این بهترین وب سایتی که من تا حالا دیدم.

پاسخ دهید

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

Optimization WordPress Plugins & Solutions by W3 EDGE