Dreamweaver CC generates all the necessary code for a carousel that automatically cycles three images. In this video, learn what the underlying HTML elements are for and how to add one or more extra images to the carousel.
- [Instructor] Carousels of rotating images.…You either love them or hate them.…But whatever your opinion,…I think you'll love the ease…with which you can have one up and running in minutes…in Dreamweaver CC.…But it's important to understand…how a carousel is structured.…I'm going to replace this static image with a carousel,…so select it in Live View,…and then press delete.…Then go to the Insert panel, Bootstrap Components,…and select Carousel.…And with the position assist dialogue,…nest it inside the selected column,…and Dreamweaver inserts a complete carousel…with placeholder images and placeholder text…ready for you to edit.…
But first, save the page, Control or Command + S,…and Dreamweaver tells you that you need…to copy the dependent file,…it's Carousel_Placeholder.png,…which will be put in the images folder.…You won't need to upload this to your server,…because you'll be replacing this with genuine images.…So just click OK, and after that you can forget about it.…Let's dive straight into Code view to examine the carousel.…
- Defining a layout grid
- Inserting and modifying a navigation bar
- Adding a container for the page content
- Inserting a responsive image
- Resizing and duplicating columns
- Inserting fixed-size images
- Inserting cards
- Editing a carousel
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
Bootstrap 4 Essential Trainingwith Ray Villalobos6h 46m Beginner
Bootstrap 4 Layouts: Responsive Single-Page Designwith Ray Villalobos3h 13m Intermediate
Designing Websites from Photoshop to Dreamweaverwith Sue Jenkins2h 27m Intermediate
What you should know1m 46s
1. Get Started
2. Create the Site Navigation
3. Add a Hero Image
4. Work with Rows and Columns
5. Edit Bootstrap Components
6. Complete the Design
Next steps1m 55s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.