The value of 760px will better accommodate the media queries we’ll be setting up. Note: Since we’ll be setting up rules for smaller screens, this would seem to be unnecessary but it’s useful for older browsers that don’t support media queries. container max-width property to 960px (This isn’t necessary but I don’t like reading very long lines of text). container width property to 90% to better use available screen width on small devices. We’ll make 4 changes to the default layout: Using a liquid layout is not necessary but will allow the layout to maximize screen usage at all sizes. Create and save a new HTML page.įor this example we’ll work with Dreamweaver’s built-in 2 column liquid, left sidebar, header and footer layout and save the CSS to a new file in a folder named css. It only works if you have an existing media query file that you want to use for your site. Note: Under Local Info in the Advanced Settings tab of the Site Setup dialog you will notice a field for Site-Wide Media Query file. I’m going to assume you have a basic understanding of Dreamweaver and HTML/CSS so I won’t be going into a lot of detail on the steps that aren’t directly related to creating media queries. Once you understand the concept, you’ll be able to adapt more challenging designs for mobile use. This also helps to avoid problems with older browsers that don’t support media queries. My personal preference is to create a single style sheet for all devices and then use media queries to overwrite existing styles and create new, device-specific styles as needed. Simply stated, media queries make it possible for a web page to use separate style sheets for phones, tablets and desktops (and even screen sizes in between). Larger and smaller devices will ignore tablet.css. It’s easier to understand by looking at an example: url("tablet.css") only screen and (min-width:321px) and (max-width:768px) įor the query above the style sheet, tablet.css will be used only for devices with a screen width between 321 and 768 pixels. Media Queries allow web designers to create style sheets based upon the screen size of the device used to view the page. One feature, which was introduced in Dreamweaver CS5 and improved in CS5.5, is support for CSS3 Media Queries.
Home > Tutorials > Dreamweaver Tutorials > Creating a mobile-friendly web page with Dreamweaver CS5.5 Creating a mobile-friendly web page with Dreamweaver CS5.5Īcknowledging the rising popularity of smart phones and tablet computers, Adobe has begun to integrate the ability to create mobile content across its entire Creative Suite and Dreamweaver is no exception.
0 kommentar(er)
