#psd cs6

New Post has been published on http://www.themedevelopment.net/how-to-import-psd-layouts-into-dreamweaver-cs6-tutorial/

How to Import Psd Layouts into Dreamweaver CS6 Tutorial

In this Dreamweaver CS6 Tutorial, we will discuss the process in CSS website creation from the PSD CS6design. Through this, you’ll be able to comprehend the use of the Flexi CSS Layouts in creating a web layout.

What Is a Flexi CSS Layout?

A convenient Dreamweaver extension called Flexi CSS Layout helps in producing table-less HTML layouts several minutes without coding. Directly from this interface, you can build the page and the extension will automatically generate the CSS and divs or the layout. Customizing your layout is possible with the CSS rules using the interface.

How to Download the Flexi CSS Layout?

Upload and install the Flexi CSS Layout extension and Dreamweaver extension. Open the .mxp file by double clicking. Automatically, the Adobe extension Manager will install. You can also extract the folder, then click the Adobe Extension Manager to open, lastly install. Search the .mxp extracted folder and click open.

In any graphic design tutorials you can find special stages. And what are the steps in importing psd CS6 layouts into Dreamweaver CS6 tutorial?

Step 1: Layout Structure Understanding

It is necessary to build your understanding on the PSD layout elements before building page structure. Aside from using the common page elements like header, main, content and footer, you should also determine other elements that might be necessary in building your page. This includes the header or sidebar’s flash slide shows, menus, Facebook badge, image and text contents and more. Creating a cell on the interface is a need for each element to make the work easier.

Image credit: pcmag.com

Step 2: The Flexi CSS Layouts Extension

You have both the Flexi CSS Layout and Dreamweaver extension ready. You need to open the Dreamweaver. Use the shortcut CTRL +FT to go to the insert panel to look for the Flexi CSS Layouts tab and click the Insert Full Page Layout.

Step 3: The Main Layout Structure

After doing the second step, a window will pop out that is needed for setting up the layout’s main page. After replicating the justdreamweaver.com layout, click OK to start. Create 3 rows that will work as the header, content and footer in the Insert Row tab. Customize the row heights with 121px for the header, 1100px for the content and 76px for the footer.

In the header, add two rows with 78px on the first row and 43px for the second row. Divide the first row into two columns. The first column will be for the logo and the second column is for the contact number. In the center are the main content and right sidebar. At the bottom, the footer should include the sitemap div and copyright div.

Also you can explore psd to HTML5 tutorial if you are interested.

Step 4: Creating Content Area Complex Layouts

There are two options in creating the content area.

The first option is to create 5 smaller divs from the main content. There are a variety of div heights. 280px min-height of the first div, 228px min-height for the second div. 189px min-height for the third div and fourth div, and 220px min-height of the fifth div. Press the content div and add these 5 rows to the Insert Rows option.

The second option is to insert into the main content div the page selection. Click on the main content dive and choose the tab for Flexi Layouts. Select the option “Insert Page Selection”. You can now create a new 700px width and 183px height section layout.

After making the process, you can insert sample content on the right sidebar. You’re now done importing PSD layouts into Dreamweaver CS6 tutorial.