Join Paul Trani for an in-depth discussion in this video Creating a layout for mobile, part of Creating a First Website in Dreamweaver CC 2014.
…When it comes to mobile devices, you don't need to create a separate mobile site,…because what you can do is you can use media queries,…which is what I have going on here.…I have my desktop.…I have my tablet media query.…And then, my mobile media query.…But really, it means some drastic changes, usually.…At least, in this case, somewhat drastic, because I want to make sure these are not…two columns, but one column and really two rows, so I need to format these two boxes.…
I need to change this navigations, and to be honest with you,…I think this logo is pretty large on mobile.…All right?…So, multiple changes I need to make.…How would I do that?…Well, I want to show you how you can add a selector for mobile.…And that's what I want to do.…I want to select Styles CSS > Select Screen > 600 pixels.…And right here, for this logo, I want to add a new selector, all right?…So coming right over here, I'm going to make sure that's selected.…Adding a selector.…And it does give you that specific selector, but…I'm going to make it a .logo, a logo selector class, specifically.…
Author Paul Trani begins with brief introductions to HTML and CSS. Then you'll learn how to create a basic webpage, add text and images, and style the content with CSS. Paul then shows how to add navigation and links between pages, integrate video and social media (such as a Twitter feed), and create a contact form. The course also covers making sure your layout is "flexible" (i.e., that it resizes to fit mobile devices), testing your site, and uploading it to the web.
- Understanding the Internet and websites
- Adding HTML content to a webpage
- Styling content with CSS
- Creating navigation
- Adding more pages
- Creating a flexible layout
- Adding video and animations from Edge Animate
- Linking to other pages and websites
- Creating a contact form
- Creating a responsive site for mobile devices
- Uploading and testing the website