Join Sue Jenkins for an in-depth discussion in this video Solution: Carousel, part of Designing Websites from Photoshop to Dreamweaver.
- [Instructor] Did you remember all the steps…to inserting and customizing a carousel?…Let me show you how I completed this task.…First, I place my cursor…in line 56 between those two comment tags,…and making sure that Dreamweaver is set to Live View.…Next, I'll click the Carousel button…on the Bootstrap Components of the Insert panel,…then save the file.…If Dreamweaver prompts you to update links, click Yes.…Next, I deleted the carousel caption containers…and all of their contents for all three slides.…
From there I changed the image sources…for all three slides…using jpegs in the Images carousel folder.…Then I updated the alt text attributes for each,…saying step 1, step 2, and step 3.…The next step is to copy and paste the third slide…four times, one, two, three, four,…then go back in and update the numbers…to 4, 5, 6, and 7.…
Because the slides have indicators,…I also need to copy this list item here…and paste that in four times.…One, two, three, four,…then change these numbers to 3, 4, 5, and 6.…Lastly I'll create an ID style for the carousel,…
- Setting up the Photoshop and Dreamweaver workspaces
- Planning a site and defining site goals
- Making a site mockup
- Deciding on branding and content
- Adjusting color and fonts
- Slicing graphics
- Optimizing graphics for the web
- Creating a favicon
- Working with Bootstrap files
- Creating a navigation menu
- Using the Photoshop extractor
- Coding for SEO
- Making sites accessible
- Checking for errors with the Validator tool
- Using the Clean Up HTML tool
- Using the Link Checker panel
- Building pages with HTML
- Styling pages with CSS
- Making site galleries and carousels
Skill Level Intermediate
Dreamweaver CC 2015: Responsive Design with Bootstrapwith David Powers2h 10m Appropriate for all
Creating a Responsive Web Designwith Chris Converse3h 47m Beginner
1. Setting Up Your Workspace
2. Creating a Photoshop Mockup
3. Optimizing Web Graphics
4. Creating Dreamweaver Bootstrap Files
5. Building Site Pages
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
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.