پیشنهاد فرادرس

طراحی سایت واکنشگرا با Dreamweaver C C و بوت استرپ 4

دسته بندی ها: آموزش بوت استرپ (Bootstrap) ، آموزش Adobe Dreamweaver ، طراحی وب واکنشگرا ، آموزش طراحی وب

به نظر می رسد برنامه Dreamweaver CC همراه با Bootstrap 4 - برای طراحان ذهنی حرفه ای جهت ایجاد وبسایت ها، بر روی رایانه های رومیزی و دستگاه های شبیه تلفن همراه عالی می باشد.

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

مباحث دوره:

  • آنچه باید بدانید
  • تنظیم نسخه بوت استرپ
  • درک شبکه طرح بندی بوت استرپ
  • تعریف شبکه طرح بندی بوت استرپ
  • درج یک نوار پیمایش
  • ویرایش پیوند ها
  • بهبود کارایی small screens
  • اعمال quick style به نوار پیمایش
  • سفارشی سازی رنگ شمایل
  • اضافه کردن تصویر پس زمینه به برند
  • اضافه کردن یک نگه دارنده به محتوی صفحه
  • درج ردیف و ستون ها
  • درج تصاویر واکنش گرا یا تعاملی
  • حذف فضا های خالی اطراف تصویر
  • قرار دادن متن در بالای تصویر
  • تغییر اندازه و تکثیر ستون ها
  • طرح بندی Flex: ستون های به طور یکسان توزیع شده اند
  • استفاده از نشانه گذاری معنایی
  • الصاق متن قالب بندی شده
  • طرح بندی Flex: ستون های در مرکز، متمرکز
  • الصاق به یک ستون خالی
  • آرایش بخش ویژگی
  • اضافه کردن کارت ها
  • درج محتوی در کارت ها
  • متن سوار شده بر روی تصویر کارت
  • ساختار یک اسلایدر چگونه است؟
  • ویرایش یک اسلایدر
  • اضافه کردن یک پاصفحه
  • مخفی سازی اجزا
  • گام بعدی
آیا این نوشته را دوست داشتید؟
Dreamweaver CC: Responsive Design with Bootstrap 4 Publisher:Linkedin Author:David Powers Duration:2h 34m 17s Level:Intermediate

Learn how to build responsive websites using Dreamweaver CC and the Bootstrap 4 framework.
Released: : December 21, 2018
Dreamweaver CC—coupled with Bootstrap 4—makes it easier for design-minded professionals to build websites that look great on desktops and mobile devices alike. In this course, learn how to efficiently build responsive web pages using Dreamweaver CC and Bootstrap, the popular HTML, CSS, and JavaScript framework. Instructor David Powers demonstrates how to define a Bootstrap layout grid, insert a navigation bar, add a hero image, and resize, offset, duplicate, and copy Bootstrap columns. Plus, he covers how to edit Bootstrap components such as cards and carousels.
Introduction
Speed up responsive design
What you should know
1. Get Started
Set the Bootstrap version
Understand the layout grid
Define the layout grid
2. Create the Site Navigation
Insert a navigation bar
Edit the links
Improve usability on small screens
Apply quick styles to the navigation bar
Customize the color scheme
Add a background image to the brand
3. Add a Hero Image
Add a container for the page content
Insert a row and columns
Insert a responsive image
Remove gaps around the image
Position text over the image
4. Work with Rows and Columns
Resize and duplicate columns
Flex layout: Equally distributed columns
Use semantic markup
Paste formatted text
Insert fixed-size images
Flex layout: Centered columns
Paste into an empty column
Style the feature section
5. Edit Bootstrap Components
Insert cards
Add content to cards
Superimpose text on a card image
How a carousel is structured
Edit a carousel
6. Complete the Design
Add the footer
Hide elements
Add extra pages
Conclusion
Next steps

پیشنهاد فرادرس