Dreamweaver Extensions blog » Tutorials and training

Create a CSS image gallery layout in Dreamweaver

admin — Thu, 12 Aug 2010 06:27:53 +0000

Flexi CSS Layouts is an easy to use Dreamweaver extension that helps you create table-less HTML layouts without coding in less than 5 minutes. With the “Insert page section layout” functionality, you can create more detailed and complex CSS layouts for content sections that can be inserted in the full page layouts: article lists, product stores, image galleries and many more. In this tutorial you can learn how to create the layout for an Image gallery.

Requirements for this tutorial:

Adobe Dreamweaver CS3, CS4 or CS5
Flexi CSS Layouts Dreamweaver extension

Installing the Flexi CSS Layouts Dreamweaver extension

Before you open the Flexi CSS Layouts, you need to download and install this Dreamweaver extension. To download the extension, go to the product page and download a free trial, or if you have bought the product you can find the download link in your account on Extend Studio site.

After you have download the Flexi CSS Layouts extension kit, you need to install the Dreamweaver extension. Open the archive and double click the .mxp file and the Adobe Extension Manager should open and install it automatically. Or you can extract the archive, open the Adobe Extension Manager and select install. Then search the folder where you extracted the .mxp file and click open.

After you did these steps, open Dreamweaver and go to the Insert Panel (press CTRL + F2) to find the Flexi CSS Layouts tab.

Here is how to do the next steps.

How to create a 3 columns CSS layout with header and footer (video)

admin — Thu, 05 Aug 2010 12:08:26 +0000

www.youtube.com/watch?v=546zfdo0KAo

Creating a CSS layout in Dreamweaver from a PSD design

admin — Thu, 05 Aug 2010 12:07:10 +0000

In this tutorial we will go through the steps of creating a CSS website starting from a layout received from the designer. We will explain how to understand the page structure and how to use the Flexi CSS Layouts to create the CSS layout without coding.

Flexi CSS Layouts is an easy to use Dreamweaver extension that helps you create table-less HTML layouts without coding in less than 5 minutes. You can simply build the page structure directly from the interface and the extension will automatically create the divs and CSS for your layout; you can further customize the layout with your own CSS rules directly in the easy to use interface.

Quick Steps

Installing the Flexi CSS Layouts Dreamweaver Extension
Understanding the layout structure
Using the Flexi CSS Layouts Dreamweaver extension
Creating the main Layout structure
Creating complex pieces of layout

Read the tutorial here.

Creating a 3 columns fixed CSS layout in Dreameaver

admin — Thu, 05 Aug 2010 12:05:12 +0000

In this tutorial we will use the Flexi CSS Layouts Dreamweaver extension to create a simple 3 columns CSS layout with a fixed width. The layout will have a header and footer and the content part will be split in 3 columns. Using the Flexi CSS Layouts extension, the layout will look the same in all major browsers.

Requirements for this tutorial:

Adobe Dreamweaver CS3, CS4 or CS5
Flexi CSS Layouts Dreamweaver extension

Flexi CSS Layouts is an easy to use Dreamweaver extension that helps you create table-less HTML layouts without coding, in less than 5 minutes. You can simply create the page structure directly from the interface and the extension will automatically create the divs and CSS for your layout. Or choose from a wide range of embedded templates for your layout, then customize the layout with your own CSS rules.

Quick Steps

Installing the Flexi CSS Layouts Dreamweaver extension
Setting the layout main properties
Adding the header, footer and content rows
Adding 3 columns in the content area
Uploading the page on the production server
Suggested usage of the layout

Read the tutorial here.

Creating a FIFA World Cup Statistics Chart using Dreamweaver

admin — Tue, 20 Jul 2010 09:04:29 +0000

Since the FIFA World Cup 2010 finished, maybe it’s time to create a statistics chart with all FIFA editions dating back to 1930, to see how things have evolved? Included for each year: how many teams have participated, how many matches were played each year, how many goals were scored each year, average goal per year and attendances per year.

Requirements for the tutorial

Adobe Dreamweaver (CS3, CS4, CS5 )
Fusion charts for DW extension (either Designer edition or Developer)
Results from FIFA World Cup™ Record (also you can check the All time ranking)

Read the article here.

Is CSS better than tables when building small websites?

admin — Tue, 20 Jul 2010 09:01:08 +0000

Is CSS a viable option for a web designer that only does small sites, or using tables just fits the bill? I remember back in circa 2003 I’ve did my first site using Dreamweaver. Being a marketing guy I was perfectly happy with learning how to do tables. Doing even a 3 columns CSS site looked gibberish to me. Sounds familiar?

But why it seems to be complicated to do table-less designs?

Tables always work. There is less code to learn, so chances you do it wrong are less.

Table code is easier to understand. Doing HTML tables is quite straightforward, you have the , ,

tags that make things easier to follow. DIVs look the same!

Tables designs look the same in most browsers. Being a very basic code even IE6 does a decent job in displaying the content

Table designs make no difference for the customers. Most people don’t know how the code behind a site was made.

So, does it make sense to learn CSS if you only do small websites? There are several good reasons why you should switch from a table design to a CSS design, even for a ten pages site. And yes, if you use Dreamweaver there is a very easy way to build CSS sites, even if you don’t know how to code.

Read the original article here.

lynda.com Founder, Lynda Weinman, Announced as 2010 Entrepreneur of the Year

admin — Thu, 10 Jun 2010 20:05:29 +0000

Lynda Weinman, co-founder and Executive Chair of lynda.com, has been named the 2010 Entrepreneur of the Year by the Scholarship Foundation of Santa Barbara, an organization that promotes higher education.

It is a fitting award for a woman whose career and business makes continued education accessible and comprehensible to hundreds of thousands of people worldwide. lynda.com was initially launched in 1995 as Weinman’s personal and business web site to supplement her teaching and widely popular web design books. When the demand for her expertise took her away from home far too often, Weinman cofounded the Ojai Digital Arts Center with husband Bruce Heaven in 1998, and in 2002, they launched the subscription-based Online Training Library(R) on lynda.com that continues to teach computer and design skills through easy-to-follow videos to hundreds of thousands of members worldwide. Her venture has become the leading online video training resource for instruction in web design, digital photography, digital video, audio, 3D, animation, and much more. In 2010, lynda.com launched a free iPhone app that allows members and non-members to view its videos on-the-go. For more information on the history of lynda.com, watch The lynda.com Story.

How to add a Dreamweaver menu to WordPress

admin — Tue, 08 Jun 2010 06:25:26 +0000

In this tutorial will cover the basics in adding a Dreamweaver tab menu inside the WordPress header. We will create a nice looking menu with Flash effects in Dreamweaver using the Creative DW Menus extension, then, we will go through the steps of integrating the menus in a standard WordPress Installation.

Creative DW Menu Pack is a suite of Dreamweaver extensions that seamlessly blends the flexibility of DHTML and the Flash look and feel to create beautifully web site menus. The extension comes with over 30 built in skins that can be customized to suit the design (colors, fonts, size) and include a smart resize system that preserves round corners and the gradient fills when you change the menu size.

Read the tutorial here.

Tutorial: Using a Dreamweaver generated Slideshow in WordPress

admin — Tue, 25 May 2010 10:58:44 +0000

If you want to have cool flash slideshow with your WordPress blog or website and you do not have the skills to implement jquery animations or simple you are not a big fan with the coding part, this tutorial will show you how to generate a slideshow in Dreamweaver and make it work in a typical WordPress installation. From now on, you can amaze your friends and clients with cool flash slideshows inside WordPress. More tutorials will follow, on how to customize your wordpress website with creative products.

Read the tutorial here.

How to setup a PHP & MySQL local testing server for Dreamweaver

admin — Tue, 04 May 2010 10:40:25 +0000

Do you need to create dynamic sites, for example generate menus or web charts based on database values or save a contact form in the database ? To run dynamic web applications you need a server (Apache) a server-side language (PHP) and a database (Mysql). These are provided by the hosting companies for the live application (you should check yours) but if you build dynamic webpages using Dreamweaver then you’re also going to need a local testing server so you could test the application on your machine before deployment on the live server.

Read how to setup a local testing server for Dreamweaver here.