Join Paul Trani for an in-depth discussion in this video Building transitions on navigation, part of Dreamweaver CC 2015: Creating a First Website.
- One thing I love about creating web content…is it doesn't have to be static.…You can bring your content to life…with animation and transitions.…And that's exactly what I wanna do…with this navigation here.…So rather than these graphics being static…on the roll over or the hover of each one of these…I wanna change the font color to white…and I wanna reveal more of this image.…Okay, all on hover, kind of inviting the user…to interact with the content.…And Dreamweaver makes this easy…because you have CSS Transitions…built right into Dreamweaver.…
Selecting CSS Transitions,…all you need to do is come right over here…and Create a New Transition.…Now I'm gonna start with _navHome,…so you can see it right here, _navHome,…you select that specific Target Rule, _navHome,…and you want it to Transition On, hover, in this case,…as you roll over it.…And then how fast do we want it to go?…Well I'm gonna type in .3 seconds, okay?…Let's make it kind of fast, something like that.…The Timing Function, you can change this to ease in and out,…
Over the course of the training, you'll learn about building basic webpages; adding text, links, images, and navigation; and making your layout "flexible" on mobile devices. Each step provides another lesson on HTML and CSS, the building blocks of the web. Along the way, Paul shows how to add bonus features, such as animation from Edge Animate, a Twitter feed, and an interactive contact form.
- Planning a website
- Creating your first webpage
- Adding HTML5 content
- Styling content and the layout with CSS
- Adding images
- Creating navigation
- Building alternate layouts for tablets and mobile devices
- Adding animation and video
- Creating a contact form
- Uploading and testing the website
Skill Level Beginner
1. Understanding Website Design
2. Creating a Webpage
3. Stylizing Content
4. Adding Navigation and Pages
5. Creating a Flexible Layout
6. Adding Media
7. Creating a Contact Form
8. Testing and Uploading
- 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.