Join Paul Trani for an in-depth discussion in this video Creating a layout for tablets, part of Creating a First Website in Dreamweaver CC 2015.
- I love media queries because they allow me…to change the layout without changing the content.…So the content's going to stay the same,…that's your one source, but the layout can change…and that's what I need to do.…I need to change the layout for my desktop version,…which is this purple bar, as well as the tablet version,…that's what I want to do right now.…So I can always click on either one of these.…I can see this 800 pixels wide one,…which is right here, and really what I need to do…is I need to change this content so it's not so wide.…
In fact, as we take a look,…this is way too wide for a desktop…so that's why I need to have more column space…on each end, right, so bring my content in…so you don't have such long lines, alright.…So that's the customization I want to make.…I notice the tablet one is pretty good for the most part,…we can always adjust that…but I'm going to start with this 800 pixels one…by going into my CSS Designer panel,…and if we take a look in my Styles.css,…my Global if you will, this is the content…
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?
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.