2019/07/14، 11:30 AM
چگونه در ۱۵ دقیقه یک سایت واکنشگرا طراحی کنیم
آموزش طراحی سایت
![[تصویر: %DA%86%DA%AF%D9%88%D9%86%D9%87-%D9%85%DB...%D9%87.jpg]](http://magbot.ir//%DA%86%DA%AF%D9%88%D9%86%D9%87-%D9%85%DB%8C-%D8%AA%D9%88%D8%A7%D9%86-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D9%BE%D8%A7%D8%B3%D8%AE%DA%AF%D9%88-%D9%81%D9%82%D8%B7-%D8%AF%D8%B1-15-%D8%AF%D9%82%DB%8C%D9%82%D9%87/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D9%85%DB%8C-%D8%AA%D9%88%D8%A7%D9%86-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D9%BE%D8%A7%D8%B3%D8%AE%DA%AF%D9%88-%D9%81%D9%82%D8%B7-%D8%AF%D8%B1-15-%D8%AF%D9%82%DB%8C%D9%82%D9%87.jpg)
در این آموزش CSS و HTML5 سریع نحوه ایجاد وب سایت پاسخگو باشید. هر دو نسخه ویدئویی و متن در دسترس هستند.
جعبه ابزار طراح شما
نامحدود دانلود: 500،000+ قالب وب، مجموعه آیکون، تم ها و طراحی دارایی
ما وعده داده بودیم که فقط 15 دقیقه طول بکشد تا یک وبسایت پاسخگو ایجاد کنیم و ما به کلمه ی ما احتیاج داریم. ما با ایجاد یک وب سایت ساده یک صفحه شروع خواهیم کرد.
طراحی وب پاسخگو چیست؟
اگر به این اصطلاح نسبتا جدید هستید، ما مواد خواندن کامل برای شما داریم!
هدف ما
در پایان این آموزش CSS پاسخگو شما با چیزی شبیه به صفحه بالا خواهید شد. این یک طراحی بسیار ساده است، اما در حال حاضر این فریب را انجام می دهد. این تصویر نسبتا آسان است، همانطور که در بالا دیده شد، اما هدف اصلی این است که آن را پاسخگو باشیم. برای ایجاد وب سایت پاسخ بر اساس اندازه اندازه صفحه دستگاه شما.
سعی کنید نسخه ی نمایشی را بر روی گوشی هوشمند خود باز کنید و این را ببینید:
[img=0x0]http://magbot.ir/%da%86%da%af%d9%88%d9%86%d9%87-%d9%85%db%8c-%d8%aa%d9%88%d8%a7%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d9%be%d8%a7%d8%b3%d8%ae%da%af%d9%88-%d9%81%d9%82%d8%b7-%d8%af%d8%b1-15-%d8%af%d9%82%db%8c%d9%82%d9%87/0.jpg[/img]
این همان چیزی است که بنیاد میتواند همراه با چندین چارچوب دیگر که بر روی ایجاد وبسایتهای پاسخگو برای دستگاههای تلفن همراه تمرکز دارد، انجام شود.
شما تمام فایل ها، از جمله تصاویر، را در لینک دانلود زیر پیدا خواهید کرد.
قبل از رفتن، بستر Web Framework را دانلود کنید و آن را به یک پوشه ای که تمامی فایل های خود را برای این آموزش در آن قرار دارید را بردارید. این باید مانند این باشد:
[img=0x0]http://magbot.ir/%da%86%da%af%d9%88%d9%86%d9%87-%d9%85%db%8c-%d8%aa%d9%88%d8%a7%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d9%be%d8%a7%d8%b3%d8%ae%da%af%d9%88-%d9%81%d9%82%d8%b7-%d8%af%d8%b1-15-%d8%af%d9%82%db%8c%d9%82%d9%87/6.jpg[/img]
با استفاده از ویرایشگر متن مورد علاقه خود، یک فایل با نام index.html ایجاد کنید و سپس در ابتدای فایل زیر را اضافه کنید:
به بنیاد خوش آمدید
کد بالا این است که در آن ما مقابله با بد اینترنت اکسپلورر. همچنین جایی است که ما به شیوه های مختلفی نیاز داریم که لازم است همه چیز را پاسخگو و در دستگاه های تلفن همراه اجرا کنیم. با بنیاد می آید سپس کد زیر را تایپ کنید:
ما قبلا توضیح دادیم که این "ردیفها" و "دوازده ستون" بالا هستند.
نکته: اگر برای شما روشن نیست که چرا باید نوار کناری و بدن را با "12 ستون" بسته کنیم، می توانید آن را پاک کنید و ببینید چه اتفاقی می افتد!
ما هنوز سبک های سبک را اضافه نکرده ایم، اما شما می توانید ببینید که چگونه با هدف ما در ارتباط است. من خیلی از طراح نیستم، اما ما بهترین ها را برای ایجاد این نگاه شگفت آور خواهیم کرد.
صبر کن صبر کن صبر کن! این نوار ناوبری چیست؟ بپرسید؟ همانطور که قبلا ذکر شد، این یکی از زیبایی های بنیاد است. این مستندات گسترده ای است که به شما نحوه استفاده درست از فرم ها، ناوبری، دکمه ها، شبکه ها، CSS و سایر عناصر تحت پوشش بنیاد را آموزش خواهد داد.
همه چیز اساسا در حال حاضر انجام می شود، همه ما باید انجام دهیم اضافه کردن برخی از تصاویر و پاراگراف و طراحی کل چیز. اگر شما این آموزش را دنبال کرده اید، اکنون شما در حال حاضر اولین صفحه پاسخگو خود را ایجاد کرده اید!
مرحله 3: افزودن محتوا به وب سایت
این مرحله لازم است تا ببینید که چگونه صفحه وب در شکوه کامل آن ظاهر خواهد شد. کپی برخی از Lorem Ipsum و آن را بر روی دیسک "body" خود قرار دهید و سپس تصاویر را با استفاده از برچسب وارد کنید، سپس شما در راه تبدیل شدن به یک ستاره فوقالعاده هستید!
اگر شما به عقب برگردید و نسخه آزمایشی را بررسی کنید، ممکن است متوجه شوید که پس زمینه دقیقا سفید نیست، اما با یک الگوی ظریف یکی را انتخاب کنید در SubtlePatterns و برای خودتان که بهترین کار را انجام دهید، را انتخاب کنید.
مرحله 4: مرحله 4 وجود ندارد
خوب، در واقع یک مرحله 4 وجود دارد. چیز بعدی که شما باید انجام دهید این است که فایل هایی را که دانلود کرده اید مطالعه کنید و از ایجاد صفحه وب پاسخگو خود را از ابتدا .
بسیاری از ابزارهای دیگر شما می توانید از بنیاد استفاده کنید، اما این ایده اساسا یکسان است. فراموش نکنید که مستندات را بررسی کنید!
چگونه یک وب سایت پاسخگو ویدئویی ایجاد کنید
در حال حاضر اگر شما به دنبال یک ویدیو هستید و شما آماده ساخت یک طراحی وب پاسخگو با HTML5 و CSS3 هستید، شما در جای مناسب قرار می گیرید. فقط فایلهای منبع را دانلود کنید، نسخه ی نمایشی را مشاهده کنید و روی ویدیوی بازی کلیک کنید - اجازه دهید یک وبسایت پاسخگو ایجاد کنیم!
آموزش طراحی سایت
در این آموزش CSS و HTML5 سریع نحوه ایجاد وب سایت پاسخگو باشید. هر دو نسخه ویدئویی و متن در دسترس هستند.
جعبه ابزار طراح شما
نامحدود دانلود: 500،000+ قالب وب، مجموعه آیکون، تم ها و طراحی دارایی
ما وعده داده بودیم که فقط 15 دقیقه طول بکشد تا یک وبسایت پاسخگو ایجاد کنیم و ما به کلمه ی ما احتیاج داریم. ما با ایجاد یک وب سایت ساده یک صفحه شروع خواهیم کرد.
طراحی وب پاسخگو چیست؟
اگر به این اصطلاح نسبتا جدید هستید، ما مواد خواندن کامل برای شما داریم!
هدف ما
در پایان این آموزش CSS پاسخگو شما با چیزی شبیه به صفحه بالا خواهید شد. این یک طراحی بسیار ساده است، اما در حال حاضر این فریب را انجام می دهد. این تصویر نسبتا آسان است، همانطور که در بالا دیده شد، اما هدف اصلی این است که آن را پاسخگو باشیم. برای ایجاد وب سایت پاسخ بر اساس اندازه اندازه صفحه دستگاه شما.
سعی کنید نسخه ی نمایشی را بر روی گوشی هوشمند خود باز کنید و این را ببینید:
[img=0x0]http://magbot.ir/%da%86%da%af%d9%88%d9%86%d9%87-%d9%85%db%8c-%d8%aa%d9%88%d8%a7%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d9%be%d8%a7%d8%b3%d8%ae%da%af%d9%88-%d9%81%d9%82%d8%b7-%d8%af%d8%b1-15-%d8%af%d9%82%db%8c%d9%82%d9%87/0.jpg[/img]
این همان چیزی است که بنیاد میتواند همراه با چندین چارچوب دیگر که بر روی ایجاد وبسایتهای پاسخگو برای دستگاههای تلفن همراه تمرکز دارد، انجام شود.
شما تمام فایل ها، از جمله تصاویر، را در لینک دانلود زیر پیدا خواهید کرد.
قبل از رفتن، بستر Web Framework را دانلود کنید و آن را به یک پوشه ای که تمامی فایل های خود را برای این آموزش در آن قرار دارید را بردارید. این باید مانند این باشد:
[img=0x0]http://magbot.ir/%da%86%da%af%d9%88%d9%86%d9%87-%d9%85%db%8c-%d8%aa%d9%88%d8%a7%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d9%be%d8%a7%d8%b3%d8%ae%da%af%d9%88-%d9%81%d9%82%d8%b7-%d8%af%d8%b1-15-%d8%af%d9%82%db%8c%d9%82%d9%87/6.jpg[/img]
با استفاده از ویرایشگر متن مورد علاقه خود، یک فایل با نام index.html ایجاد کنید و سپس در ابتدای فایل زیر را اضافه کنید:
به بنیاد خوش آمدید
کد بالا این است که در آن ما مقابله با بد اینترنت اکسپلورر. همچنین جایی است که ما به شیوه های مختلفی نیاز داریم که لازم است همه چیز را پاسخگو و در دستگاه های تلفن همراه اجرا کنیم. با بنیاد می آید سپس کد زیر را تایپ کنید:
ما قبلا توضیح دادیم که این "ردیفها" و "دوازده ستون" بالا هستند.
نکته: اگر برای شما روشن نیست که چرا باید نوار کناری و بدن را با "12 ستون" بسته کنیم، می توانید آن را پاک کنید و ببینید چه اتفاقی می افتد!
ما هنوز سبک های سبک را اضافه نکرده ایم، اما شما می توانید ببینید که چگونه با هدف ما در ارتباط است. من خیلی از طراح نیستم، اما ما بهترین ها را برای ایجاد این نگاه شگفت آور خواهیم کرد.
صبر کن صبر کن صبر کن! این نوار ناوبری چیست؟ بپرسید؟ همانطور که قبلا ذکر شد، این یکی از زیبایی های بنیاد است. این مستندات گسترده ای است که به شما نحوه استفاده درست از فرم ها، ناوبری، دکمه ها، شبکه ها، CSS و سایر عناصر تحت پوشش بنیاد را آموزش خواهد داد.
همه چیز اساسا در حال حاضر انجام می شود، همه ما باید انجام دهیم اضافه کردن برخی از تصاویر و پاراگراف و طراحی کل چیز. اگر شما این آموزش را دنبال کرده اید، اکنون شما در حال حاضر اولین صفحه پاسخگو خود را ایجاد کرده اید!
مرحله 3: افزودن محتوا به وب سایت
این مرحله لازم است تا ببینید که چگونه صفحه وب در شکوه کامل آن ظاهر خواهد شد. کپی برخی از Lorem Ipsum و آن را بر روی دیسک "body" خود قرار دهید و سپس تصاویر را با استفاده از برچسب وارد کنید، سپس شما در راه تبدیل شدن به یک ستاره فوقالعاده هستید!
اگر شما به عقب برگردید و نسخه آزمایشی را بررسی کنید، ممکن است متوجه شوید که پس زمینه دقیقا سفید نیست، اما با یک الگوی ظریف یکی را انتخاب کنید در SubtlePatterns و برای خودتان که بهترین کار را انجام دهید، را انتخاب کنید.
مرحله 4: مرحله 4 وجود ندارد
خوب، در واقع یک مرحله 4 وجود دارد. چیز بعدی که شما باید انجام دهید این است که فایل هایی را که دانلود کرده اید مطالعه کنید و از ایجاد صفحه وب پاسخگو خود را از ابتدا .
بسیاری از ابزارهای دیگر شما می توانید از بنیاد استفاده کنید، اما این ایده اساسا یکسان است. فراموش نکنید که مستندات را بررسی کنید!
چگونه یک وب سایت پاسخگو ویدئویی ایجاد کنید
در حال حاضر اگر شما به دنبال یک ویدیو هستید و شما آماده ساخت یک طراحی وب پاسخگو با HTML5 و CSS3 هستید، شما در جای مناسب قرار می گیرید. فقط فایلهای منبع را دانلود کنید، نسخه ی نمایشی را مشاهده کنید و روی ویدیوی بازی کلیک کنید - اجازه دهید یک وبسایت پاسخگو ایجاد کنیم!
