Join Paul Trani for an in-depth discussion in this video Creating a layout that fits all browsers, part of Creating a First Web Site with Dreamweaver CS6.
A recent movement that's going on in the web today's what is called a responsive…design, and that's having your content respond based on the browser window size…as well as even the device you view your content on.…So say for instance, if I scaled down this browser window, you can see that…everything is static.…So if you're viewing this on a smaller monitor, the user would actually have to…scroll, so that's not very usable.…What if they're on an iPad that's more like this? Well, again, you have the same…issue where they're going to have to scroll, and it gets even worse as we go down…to even a mobile device.…
So we need to make sure our content is flexible and responds based on the…browser window size. So that's what I'm going to do.…I'm going to start off first with this Nav bar. With that Nav bar selected, notice…right down here, all of these sizes and positions are fixed.…So they're fixed sizes and positions.…And what I can do is I can say, hey, you know what? From the left side, let's make…it 5% of that total width will be 5%. What about the width of the bar entirely?…
- Understanding basic web principles
- Adding content to a web page
- Linking to web sites and email addresses
- Styling content with CSS
- Creating a layout that fits multiple browsers and devices
- Building an HTML5 layout
- Inserting images and video
- Adding a menu bar
- Creating a contact form
- Integrating a Twitter feed
- Uploading and testing a web site
Skill Level Beginner
Q: Where do I learn more about how to make a website?
A: Discover more on this topic by visiting how to make a website on lynda.com.
Photoshop CS6 for Web Design (2012)with Justin Seeley4h 56m Appropriate for all
1. Understanding Web Site Design
2. Creating a Web Page
3. Stylizing Content
4. Creating a Flexible Layout
5. Adding Navigation and Pages
6. Adding a Portfolio
7. Using Content from Other Sources
8. Creating a Contact Form
9. 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.