Dreamweaver Templates Resources is a reviewed listing of high quality web site templates. These are professionally created templates for webmasters. Collection of all-new professional Dreamweaver Templates. Original, customizable, affordable and instant. Download Free Dreamweaver, Photoshop Templates & WordPress Themes. The following free templates are a great. Web Design Template. CSS Templates Category: Web Design Code: F-CSS-03. Learn how to use the web page design templates available in Dreamweaver as a starting point for your web project. > > > Creating a mobile-friendly web page with Dreamweaver CS5.5 Creating a mobile-friendly web page with Dreamweaver CS5.5 Acknowledging 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. One feature, which was introduced in Dreamweaver CS5 and improved in CS5.5, is support for CSS3 Media Queries. Media Queries allow web designers to create style sheets based upon the screen size of the device used to view the page. It’s easier to understand by looking at an example: @import url('tablet.css') only screen and (min-width:321px) and (max-width:768px); For the query above the style sheet, tablet.css will be used only for devices with a screen width between 321 and 768 pixels. Larger and smaller devices will ignore tablet.css. 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). 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. This also helps to avoid problems with older browsers that don’t support media queries. I’ll work through a simple example. Once you understand the concept, you’ll be able to adapt more challenging designs for mobile use. 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. Site Setup as usual. 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. Ignore it for now. It only works if you have an existing media query file that you want to use for your site. Create and save a new HTML page. For 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. Using a liquid layout is not necessary but will allow the layout to maximize screen usage at all sizes. We’ll make 4 changes to the default layout: • Change the.container width property to 90% to better use available screen width on small devices. • Change the.container max-width property to 960px (This isn’t necessary but I don’t like reading very long lines of text). • Change the.container min-width property to 760px. 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. The value of 760px will better accommodate the media queries we’ll be setting up. • Add a 960px wide image to replace the image placeholder in the header. Dynamically size an image The header image creates our first challenge. This image will be too large to work with mobile devices. We’ll solve this issue by deleting the image height and width attributes from the html and sizing the image using CSS. 2: The Media Queries dialog • Select the Insert>Media Queries menu item • In the Media Queries dialog: (fig. 2 above) • Under Write media queries to click to choose the Site-wide media queries file option (you can choose to save the queries to the current document but saving them to an external file makes them available for all of your site’s files). • Click the Specify button to create and save your media query file.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
April 2018
Categories |