Getting Started with Design Extender

Tutorial created by Ray Borduin, WebAssist

Categories: Design Extender, CSS, Design, Dreamweaver, MySQL, PHP

2 ratings | Sign in to rate this tutorial | View comments

next section

Requirements

You will need the following items ready before starting this tutorial:

1. Dreamweaver CS4 or later
   
2. Design Extender Installed (click here for installation instructions)
   
3. PHP/MySQL Testing Server (optional)
   For more information see Setting up a Testing Server on Windows or Setting up a Testing Server on Mac OS X
   
4. Dynamic Site Defined in Dreamweaver
   For more information see Defining a dynamic site in Dreamweaver.

next section

What are extensions?

In case you don't know yet, Dreamweaver extensions are tools (sometimes big, sometimes small) that run from within Dreamweaver and provide invaluable, additional functionality that Dreamweaver doesn’t provide standard. The tools within Design Extender consist of step-by-step wizards and "quick insert" interfaces that make developing key parts of your website a smooth and straight forward process.

Install your extensions

With your computer running everything you need to successfully use WebAssist Dreamweaver extensions and build websites, you can install your Design Extender extension. WebAssist provides you with a Download Center for downloading all of the extensions you have purchased. You can log into your Download Center at any time to retrieve the extensions you own. Each extensions is delivered as a .mxp file which installs through the Adobe Extension Manager

Follow this tutorial for steps on how to install a Dreamweaver extension:

1. Installing WebAssist extensions

next section

Start using your extensions

In this section, we will discuss a few of the more common applications people use their extensions to make, show you the basics of the most widely used Design Extender utilities, and teach you how to go about completing those projects with your Design Extender extension.

If you are new to extensions/web development...

If you've never built a website before, or Dreamweaver extensions are new to you, you should get your feet wet by building a simple design and website. A number of the Design Extender utilities can be used to build a simple website from scratch.

Here's an outline of the steps you will want to take...

1. You want to design a CSS-based layout to use as one page of your website or to lay out your website’s template. Design Extender’s CSS layout tools will assist you with this task. These tools originated from a stand-alone extension called CSS Sculptor.
   You can refer to CSS Sculptor's Getting Started Guide to design your layout from A-Z.
   If you don't know CSS, or would rather use a pre-built template, skip this step and move on to designing your menu.
   
   
2. You now want to design a CSS-based menu system to allow users to navigate around your website. Design Extender gives you menu creation tools that are perfect for the job. These tools originally come from a stand-alone extension called CSS Menu Writer.
   You can refer to the CSS Menu Writer Getting Started Guide for more information on designing your menu.
   
3. Now you will need to build pages based around your CSS design and CSS menu system. The site building tools within Design Extender make this task a breeze. The site building tools originally come from a stand-alone extension called Site Sculptor.
   You can refer to Site Sculptor's Getting Started Guide for more detailed instructions on building your site.

Once you have built your site, you will have a complete website based on the CSS layout tools and CSS menu tools' presets you designed. You always have a built-in content management system so that you could hand this site off to a client for them to manage the content themselves. This is the fastest way to build a website for your clients, and a great starting point for using other WebAssist extensions.

There are a number of additional tools that you can use to enhance the pages that you have just built. Here are some of the tools that you might want to take a look at next as you get more comfortable with extensions and web development.

1. Design Extender’s Google Maps tool is great for adding a Google map to your website for your to advertise your store location(s) and provide driving directions to your customers. These tools originated from a stand-alone extension called Pro Maps for Google.
   You can refer to Pro Maps for Google's Getting Started Guide for more information on using this tool.
   
2. Design Extender's social media tools allow you to add your own social media share buttons (Facebook, Twitter, Google+ etc.). This is a great way for your customers to gain awareness about your site. These tools originated from a stand-alone extension called Social Media Toolkit.
   You can refer to the Social Media Toolkit Getting Started Guide for more information on using this tool.

Ready to jump into dynamic development?

Once you are used to building basic websites and adding useful functionality to your pages, you should start thinking about building dynamic websites. A dynamic website typically means that you are using a database (MySQL) and server language (PHP), in order for aspects of the site to function. Your WebAssist extensions will do the dynamic work for you, but there are certain aspects of dynamic development that you should be familiar with when you enter this level of production.

New to databases?

If databases are new to you, we've got you covered with a free MySQL eCommerce Database (wa_ecommerce_db.zip). Whether you are building an eCommerce website, or just a simple user registration system, this database should have everything you need to get started with a database-driven website.

Now that you've got your database set up and ready to go, you can start creating a more dynamic and useful web application using Design Extender. Here are some examples of what you could build and which tools to use.

Create a simple portfolio site

Let's imagine together tha you have crafted something interesting that people want to see ( and even better if you actually do! ). You can easily make a nice portfolio site to show your handiwork to people all over the world and make it possible for them to share your creations with their personal network in just a few steps using the utilities your now own.

You can build a simple system like this using just two Design Extender utilities; Site Sculptor and Social Media Toolkit. Site Sculptor will generate all the pages needed and Social Media Toolkit lets you add share buttons to the pages.

1. Click WebAssist in the menu bar, select Build Site, then select New Site Sculptor Site.
   
2. Check the Include content management with this site checkbox.
   
3. Change the Site Type to Portfolio.
   
4. Click the Define button and shape the page structure to your heart's desires, adding as many categories and portfolio pages as you need.
   
5. Change each portfolio page's Page type to Blank page.
   
6. Change the Site Design and Theme to match how you want the site to look.
   
7. Click Finish to generate the pages.
   At this point, the site builder tool is creating all the pages you defined as well as all CMS pages for content management. Once this step is complete, a dialog will appear letting you know the process has wrapped up and you're good to move on. This is when it gets exciting, so hold onto your seats.
   
   
8. Open the first portfolio page in the gallery directory of your site ( they might be within category directories ).
   
9. Within the content area of the template, right after the CMS entry, place your cursor.
   
10. Click WebAssist in the menu bar, select Social Media, then select Insert Share Buttons.
    
11. Select all share buttons you wish added to the page.
    
12. Configure the button type and additional options how you would like them to appear.
    
13. Click the OK button.
    
14. Repeat steps 9 through 13 for each portfolio page in your gallery folder.
    
15. Upload every file Site Sculptor just created to your web server.
    
16. Enter the location of the files you just uploaded into the address bar of your web browser to begin the CMS Installation Wizard.
    
17. Proceed through the CMS Installation Wizard and refer to the instructions within for guidance on completing each step.
    
18. Once you have completed the CMS Installation Wizard, you will be taken to the content management system for you to start modifying the content that is on the pages of your site.
    
19. Set the content for your pages.
    
20. Save all changes.
    
21. Exit the Admin, and view your site.
    
22. Admire what you have just created.

Want to make your site over the top? Now that you have created a simple portfolio page to show off what you have made, you have the ability to take your portfolio to the next level. For example; you can add Facebook comments after the share buttons to allow viewers to critique your artwork.

You can also give maps to show the location of more public works of art by adding maps for Google, or change the site builder tool's template to an easy to manage theme with the framework manager tool.

Other useful utilities

Design Extender includes a number of other useful utilities that you can use to enhance your website or optimize it's performance and speed up your development. The following section lists some of the other tools that are included with Design Extender but have not been referenced already in this document.

1. Design Extender’s site import tool is great if you want to download a perfect clone of an HTML website. The tool will pull all static files from a live website, creating a gorgeous backup. These tools originated from a stand-alone extension called Site Import.
   You can refer to Site Import's Getting Started Guide for more information on using this tool.
   
2. Design Extender’s framework management tools take the pain and heartache out of managing Dreamweaver templates and include files for your site by replacing them with the magical power of plugins. These tools originated from a stand-alone extension called Framework Builder.
   You can refer to the Framework Builder Getting Started Guide for more information on using this tool.
   
3. Design Extender’s CMS tools will help if you want an extremely powerful CMS for managing the content of your website without using Site Sculptor to create the rest of your site. These tools originated from a stand-alone extension called PowerCMS Builder.
   You can refer to the PowerCMS Builder Getting Started Guide for more information on using this tool.

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

2 ratings | Sign in to rate this tutorial