how to create ssi navigation menu in dreamweaver cs6
how to create ssi navigation menu in dreamweaver cs6
With the ever-increasing use of mobile devices, it has become necessary to design online content that appears on multiple screen sizes and a myriad of desktops, laptops, tablets, and smartphones. The challenge involves designing sites that adapt to fit a variety of different resolutions and use the available screen real estate effectively. Previously, these goals have proven to be time-consuming. Hand-coded media queries and complex mathematical calculations were often required to deliver online presentations with fluid layouts to reach the widest audiences.
Adobe Dreamweaver CS6 introduces the Fluid Grid Layout feature to help make designing for multiple screens easier. Fluid grid-based layouts display content in containers that have widths set to percentages, which react proportionately to changes in screen sizes. In this article, I show you how to build fluid grid layouts that address these challenges.
Follow these steps to define your site:
Launch Dreamweaver CS6 and choose Site > New Site.
In the Site Setup dialog box, type fluidLayouts in the Site Name field (see Figure 1).
Click the folder icon next to the Local Site Folder field.
In the Choose Root Folder dialog box, navigate to the fluidLayouts folder on your desktop. Click Select (Windows) or Choose (Mac OS).
In the Site Setup dialog box, type fluidLayouts in the Site Name field (see Figure 1).
Click the folder icon next to the Local Site Folder field.
In the Choose Root Folder dialog box, navigate to the fluidLayouts folder on your desktop. Click Select (Windows) or Choose (Mac OS).
Site definition
Figure 1. Create a site definition to specify the local root folder for the project.
Figure 1. Create a site definition to specify the local root folder for the project.
Click Save to close the Site Setup dialog box.
Creating a fluid grid layout
Follow these steps to create a fluid grid layout:
Choose File > New Fluid Grid Layout. Alternatively, you can choose File > New and then choose Fluid Grid Layout in the New Document dialog box (see Figure 2).
New fluid grid layout
Figure 2. Create a new fluid grid layout.
Figure 2. Create a new fluid grid layout.
You can use the dialog box that appears to define the layout settings for your project. The grid that you'll use to lay out containers is based on the number of columns you specify for each screen. By default, these values are set to 5, 8, and 10 columns for mobile devices, tablets, and desktop screens respectively.
Update the Desktop layout to use 12 columns instead of 10 by typing directly in the field (see Figure 3). For this sample project, you can leave all the other default settings.
Update the Desktop layout to use 12 columns instead of 10 by typing directly in the field (see Figure 3). For this sample project, you can leave all the other default settings.
Notice the default targeted widths — Mobile: 91%, Tablet: 93%, and Desktop: 90%. These percentages are also editable.
The Percentage of Column Width specifies the width of the gap that appears between the columns, also known as the gutter value, as a percentage. By default, the layout gutter value is set to 25% of each column width. If you edit the gutter value field, the percentage you enter affects all three screen resolutions.
Number of columns
Figure 3. Set the number of columns for the Desktop layout to 12.
Figure 3. Set the number of columns for the Desktop layout to 12.
Click Create. In the Save Style Sheet File As dialog box that appears, navigate to the css subfolder located inside the fluidLayouts folder on your desktop.
Name the layout fluidLayouts.css and click Save. The dialog box closes, and the layout is displayed in Design view. Before continuing, it is important to save the HTML file.
Choose File > Save. In the Save As dialog box, save the file in the fluidLayouts folder on your desktop. Name the HTML page index.html and click Save.
Name the layout fluidLayouts.css and click Save. The dialog box closes, and the layout is displayed in Design view. Before continuing, it is important to save the HTML file.
Choose File > Save. In the Save As dialog box, save the file in the fluidLayouts folder on your desktop. Name the HTML page index.html and click Save.
The Copy Dependent Files dialog box appears. Fluid grid layouts require two different scripts to function correctly. The dialog box lists these files:
boilerplate.css: An HTML5 boilerplate that includes styles you can use to get started
respond.min.js: A JavaScript file that adds support for fluid layouts to older browsers
boilerplate.css: An HTML5 boilerplate that includes styles you can use to get started
respond.min.js: A JavaScript file that adds support for fluid layouts to older browsers
You must save these two dependent files in the site folder that contains index.html. They can be in a subfolder. Be sure not to move or rename these files after you copy them. When you upload the site, you'll need to put these dependent files on the host server with the other site files.
Click Open to select the scripts subfolder. Then click Copy to copy the dependent files. The Copy Dependent Files dialog box closes, and the layout is displayed in Design view again.
Click Open to select the scripts subfolder. Then click Copy to copy the dependent files. The Copy Dependent Files dialog box closes, and the layout is displayed in Design view again.
At this point, you have a folder on your desktop that contains all the site files you need to build the fluid layout for three screen resolutions.
buy adobe dreamweaver cs6 mac pc only at $ 50
Want buy adobe photoshop cs6 at cheap price? you can go to my webshop to buy it ,cheap dreamweaver cs6 full version .
It is not a OEM or tryout version. We offer worldwide shippment . You can pay by paypal.you can buy it at my website shop at only $50 low price cheap dreamweaver cs6 pc mac version and more other usefull design software tools.
cheap adobe dreamweaver cs6 $50 
No comments:
Post a Comment