Online Bootstrap/Dreamweaver Course
Bootstrap Using Dreamweaver I
Tap the power of Bootstrap using the Adobe HTML editor
Feedback from design professionals
Stretch your skills, grow your portfolio
Learn at Your Own Pace
Self-paced and scheduled programs available
1 - Intro to Bootstrap and Dreamweaver
Bootstrap 5 and Dreamweaver work very well together; Adobe's HTML editor provides an intuitive platform for managing the Bootstrap's extensive resources. In Lesson One, you'll learn how to edit page content in Dreamweaver, and navigate document views, insert images and text, create links, and preview a page in a browser. You will learn how to define a site, so you can publish your project to the Web, and discover the three common ways to install the Bootstrap framework.
Project - Favorite links/cards page
Accessibility test - Enable text resize in the browser.
2 - Bootstrap Layouts
Lesson Two begins by exploring how Bootstrap uses media query ranges to adapt the display of images to the different ways that users will access your site. You will learn how containers can be used to construct page layouts and how responsive column classes can help you refine your layouts. You will learn to manipulate the vertical and horizontal alignment of rows and columns so that your pages are optimized for a range of browsers and devices.
Project - Vice Versa Page Layout
Accessibility test - Use a screen reader to navigate website content.
3 - Custom CSS
There's nothing wrong with using Bootstrap's CSS utilities, but as a designer you'll need to develop custom CSS for your site designs. In Lesson 3, you'll learn how to use tag, class, and ID selectors to style page elements and link states, and add custom CSS stylesheets to a Bootstrap site. You'll discover how to edit layout, type, border and and background attributes to give you fine control over content areas and explore the many advantage of Dreamweaver's CSS Designer panel.
Project - Vice Versa Custom Styles
Accessibility test - Run accessibility tests using Chrome DevTools.
4 - Data Tables
HTML tables were developed for data display: rows and columns of facts and figures. With the advent of CSS positioning, tables regained their original purpose: representing data. In this lesson you'll learn how to create and edit tables in an HTML document and apply Bootstrap's table selectors, making HTML tables responsive.
Project - Restaurant site
Accessibility test - Check tables for accessibility using a screen reader.
5 - CSS Positioning
Web designers who want to break out of the box need to explore CSS positioning: absolute, relative, fixed, and static. Using a combination of floats and CSS positioning, you can build virtually any layout imaginable. In Lesson Five, you 'll learn how to apply absolute positioning and overlap elements using CSS and Bootstrap. To ensure your content displays as intended, we'll discuss how to manage content overflow properties and fixed and static positioning options.
Project - Gardening site
Accessibility test - Run a color blindness accessibility test.
6 - jQuery, Multimedia, and Troubleshooting
In this last lecture, we'll venture beyond the bones of layout design in Bootstrap and look at some exciting (and important) extras. It's important to realize that Bootstrap sites can be enhanced with any number of add-ons from Bootstrap or other frameworks. Thus we will explore how to add a jQuery lightbox gallery and a Bootstrap image carousel to your site. Finally, because troubleshooting is a key final stage in any Web project, we'll review some essential ground rules to follow to make sure your sites are successfully launched.
Project - Pop band site
Accessibility test - Test for accessibility using a keyboard.
Students in this course can expect to learn to:
- Install the Bootstrap 5 framework and manage its assets using Dreamweaver.
- Edit page content in Dreamweaver, insert images and text, create links, and preview a page in a browser.
- Define a site in Dreamweaver and publish website content.
- Design responsive layouts in Bootstrap, using media query ranges, containers, and responsive column classes.
- Develop custom CSS styles for Bootstrap sites, using tag, class, and ID selectors to style page elements and link states.
- Edit the layout, type, border and and background attributes of page elements.
- Design responsive data tables.
- Control page layouts using absolute positioning, content overflow properties, and fixed and static positioning.
- Add multimedia features such as jQuery lightbox gallery and a Bootstrap image carousel.
- Test and troubleshoot a site to eliminate issues before it goes live.
- Tackle a range of project scenarios and create consistent, appealing web site designs.
Interested in this course? Scheduled and self-paced enrollment options are available. Ask Admissions about taking this course as part of a degree or certificate program.
|Course Level||Classes start||Registration Fee||Tuition|
3 credits, 15 weeks
|Jan, Apr, Aug||$200||$510/credit|
60 clock hours, 3 months access
|Enroll today, start tomorrow||$50||$949|
|* Registration fees are nonrefundable after 5 days from enrollment. All tuition includes a digital materials fee for updates to course or program content.|
Software and Supplies
To take this course you'll need:
- Computer with Internet connection.
- Adobe Dreamweaver CC.
- An account with a Web hosting service. Free services are available. Your Web host must support Dreamweaver's FTP protocol.
- Adobe Photoshop or equivalent program recommended but not required.
Course developed by Piper Nilsson
Enrolling online is easy and convenient.
Chat with our knowledgeable admissions staff to select course and program options.
Complete your registration entirely online.