Flexi CSS Layouts for Dreamweaver

How to create a site quick using the full templates embedded in the Flexi CSS Layouts gallery

In this tutorial we will show how easy is to create a site using the templates that come with the Flexi CSS Layouts gallery. The basics are: defining a site in Dreamweaver, create as many html pages as you need for the site, insert a layout in each of the pages then change the menu links to point to the right pages. For this tutorial we will create 3 pages: an index page (index.html), a contact page (contact.html) and a features page (features.html); you can add more pages using the same procedure.

Note: this tutorial assumes that you already know the basics of using the Flexi CSS Layouts Dreamweaver extension.

Creating the index page

Create a new empty html file in Dreamweaver. Save the file as "index.html" then find the Flexi CSS Layouts tab and open the Template Gallery. Select the full templates category and select one of the home page templates (for example "Software Product - Home page"). Press "Insert" to add the layout in the page or "Customize layout" if you want to make changes.

Adding a home page layout

Changing the menu to link to the other pages

You can change the menu in 2 ways: using the Dreamweaver's design view or going through the code.

• Change the menu in Dreamweaver's design view

If you look at the layout inserted in the page, we have a horizontal menu just below the header:

Menu in Design view

You can change the names as you wish. Let's change Overview to Home, Products to Features and we already have Contact. Let's change the links for these 3 pages and I will show you how to delete the other menu entries from the code view if you don't need them. Select the Home text and in the Properties panel you need to change the link to: index.html; features should point to features.html and Contact to contact.html.

Change the link

• Change the menu in Dreamweaver's Code view

Switch to code view and search for <div class="horizontalNav">; this is the navigation menu code:

<div class="horizontalNav">
<a href="#firsthmlink">Overview</a><a href="#secondhmlink">Services</a><a href="#thirdhmlink">Products</a><a href="#fourthhmlink">About</a><a href="#fifthhmlink" style="margin-right:-3px;">Contact</a>
</div>

You need to change the names for the menus and the links and delete the menu entries that you don't need (if you already changed the names and links in Design view, you only need to delete the un-wanted menu entries):
<div class="horizontalNav">
<a href="index.html">Home</a><a href="features.html">Features</a> <a href="contact.html">Contact</a>
</div>

Changing the navigation menu

You need to change the menu also on the other pages.

Creating the features and contact pages

Creating other pages is quite easy: create 2 new empty html pages and save one as features.html and the other one as conctat.html. Open the template gallery and under the full templates category select the Features page from the Software Product and Contact page for contact.html. You need to change the navigation menu exactly like you did for the index.html page.

Adding the features page

Making changes to the pages

You can change the text in the pages quite easily in the Dreamweaver's design view. You can go the code view way as well, for example, to change the text from the headings inside the header section, find the <!-- showcase_text Content Starts Here --> and change the sample text.

Changing the headings

If you want to change the samples images from the index page find the comment line <!-- column_3 Content Starts Here -->. Inside this div is the line for the first sample image. If you want to find the image go to "includes/CSSLayouts/hometemp1_assets/" and view image1.png. You can remove this image and name your image with the same name.

Changing the sample images

For the second image find the <!-- column_4 Content Starts Here --> line and inside the div is the code line for the second image.

If you want to change the clients logo images find the heading 3 Some of our clients and replace the location with your own images.

Changing the clients images

Change the CSS Styles for the text

The most important CSS settings for the text are done from the Flexi CSS Layouts Editor. You need to click on the cell in the editor, then in the right column you have the CSS Styling for text panel:

CSS Styling Panel

Here is a video that shows how to edit the CSS settings for the text inside the cells:

Creating additional pages from an existing layouts

You might need to create additional pages using small changes to the existing layouts. To create additional pages from an existing layout you should NOT "Save AS" the old page as a new page. If you do this, the new page will use the same CSS as the old page and changes done in one of the pages will also apply on the other page. The correct way to make more pages with small layout differences is to save the layout in the gallery, create a new HTML page, then insert in this page the layout from the gallery and make the changes there. Here is a complete tutorial on how to create multiple Flexi CSS pages for a site using a layout with minor differences between pages.