table of contents - · pdf filedmxzone accordion manual dmxzone.com copyright © 2012...

DMXzone Accordion Manual DMXzone.com

Copyright © 2012 DMXzone.com All Rights Reserved

To get more go to DMXzone.com

of 52

Table of contents

Table of contents ..................................................................................................................................................................... 1 About DMXzone Accordion .................................................................................................................................................. 2 Features in Detail ..................................................................................................................................................................... 3 The Basics: Adding DMXzone Accordion on a Website ................................................................................................ 14 Advanced: Controlling DMXzone Accordion with Dreamweaver Behaviors ........................................................... 24 Advanced: Inserting Nivo Slider within DMXzone Accordion ....................................................................................... 32 Reference: DMXzone Tabs Skins ......................................................................................................................................... 38 Video: Adding DMXzone Accordion on a Website. ...................................................................................................... 52 Video: Controlling DMXzone Accordion with Dreamweaver Behaviors. ................................................................... 52 Video: Inserting Nivo Slider within DMXzone Accordion ................................................................................................ 52




of 52

About DMXzone Accordion

If you’ve wondered how you can split your web content into accordion-like fields within

Dreamweaver, now we offer you the best tool that makes it possible. With the DMXzone

Accordion you can have accordion sections instead of pages anywhere on your site.

Arrange your texts, images, videos and even whole pages and style them to create an

intuitive and user-friendly navigation that will fit perfectly any window or monitor size. Grab

your users’ attention with stunning animation effects that will be played when toggling the

content of your sections and present your products or ideas more effectively!

Supplied with 24 stylish designs that can be edited through the CSS and options for customizing the size and

the header icons, the DMXzone Accordion is live rendered in Dreamweaver so that you can change

anything right in place. The extension is fully controllable by behaviors and can be bind to other DMXzone

extension.




of 52

Features in Detail

24 CSS Designs included - You can simply choose one of the 24 amazing styles available or edit them

through the CSS to fit your website perfectly.




of 52

Easy to choose style picker - We’ve included a style picker where you can see a preview of the

chosen design




of 52

Display your content in a stylish accordion - Divide your web content into different sections that can

be easily switched and save space on your pages




of 52

Display any content - You can add rich content into the sections, such as text, images, videos and

even whole pages




of 52

Fully customizable styles - Our tabs are all CSS based so you can easily make your own adjustments in

the CSS from within Dreamweaver’s CSS editor




of 52

All sections are live rendered in Dreamweaver and can be fully navigated in design view! So you can

easily visual switch from section to section and edit it right in place! Note that this feature requires

Dreamweaver CS3+

Add, remove, rearrange or set start sections- You can add, remove, rearrange and add start section

from the Inline property inspector




of 52

Fully resizable - The height of the sections expands depending on the content but the width can be

set manually

Toggle sections onClick or on mouse over - You can set your sections to be switched onClick or on

hover in order to create a more intuitive navigation

Amazing animation effects - You can add a stunning animation effect that will be played when

switching between sections

Auto Height - If you select Auto Height your Accordion will adjust its height according to the size of

the highest section.




of 52

Fill Space - If you select Fill Space your accordion will fill the vertical space allocated by its container.

Collapsible sections - You can make the sections collapsible so that when clicked will toggle the

content closed/open

Opened/Closed Section Icons - Choose the best icons that will fit your website design in order to

indicate whether a section is opened or closed

Inline property inspector - You can easily change all the visual options later on




of 52

Fully controllable by behaviors - If you want to navigate to a specific section or start an event within it

- it can be easily done with the Control DMXzone Accordion behavior




of 52

Full support for the DMXzone Behavior Connector - You can easily bind other DMXzone extensions like

DMXzone Lightbox, Animated Thumbnail Gallery, DMXzone Calendar 2 and Advanced HTML Editor 3

to your sections

Search Engine Friendly - As the DMXzone Accordion is pure HTML and CSS code it can be nicely

indexed by all search engines and web spiders.

http://www.dmxzone.com/go?16607







of 52

Before you begin Make sure to setup your site in Dreamweaver first before creating a page. If you don’t know how to do that

please read this.

Installing the extension Read the tutorial at http://www.dmxzone.com/go?4671

Login, download the product, and look up your serial at http://www.dmxzone.com/myZone/purchases

Get the latest extension manager from Adobe at

http://www.adobe.com/exchange/em_download/

Open the .mxp file (the extension manager should start-up) and install the extension.

If you experience any problems contact our Live Support!

http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html


http://www.dmxzone.com/myZone/purchases

http://www.adobe.com/exchange/em_download/




of 52

The Basics: Adding DMXzone Accordion on a Website In this tutorial we will show you how to insert DMXzone Accordion on your page and the options that we

included in it.

*You can also check out the video.





of 52

How to do it 1. We’re going to insert the DMXzone Accordion on our page. Click the DMXzone Accordion icon.




of 52

2. Clicking the icon automatically inserts the DMXzone Accordion on our page. Now click on the blue

DMXzone Accordion Label in order to get the settings in the property inspector.




of 52

3. To customize our Accordion appearance and navigation first we set a width (1). If you leave this field

empty the Accordion will fit the width of the container it was inserted in. Then we have to choose

whether to switch sections on click or on hover. We select the onClick option (2).




of 52

4. The next step is to choose one of the 24 CSS designs available. Click the Style pickup button (1)

where you can preview them. For our page we select the Hot-sneaks (2) style.




of 52

5. You can select Auto Height (1) to adjust its height according to the size of the highest section. By

selecting Fill Space (2) your Accordion will fill the vertical space allocated by its container. Check

collapsible (3) if you want when clicked the selected section to toggle its content closed/open.




of 52

6. We’ll add an animation effect that will be played when switching between the sections.




of 52

7. In order to divide your content into sections you can add and remove Sections by clicking the Add

(1) and Remove (2) buttons. You can see them in the Selection list (3). To rearrange the Sections

you’ve created, click the Move Up (4) or Move Down (5) buttons. You can also add a start section

from the Star icon (6).




of 52

8. You can edit your Sections names (1) and their content (2), directly in Dreamweaver. When you are

done, save your work and preview the result in the browser




of 52

9. That’s how easy it is to insert a DMXzone Accordion on your page.




of 52

Advanced: Controlling DMXzone Accordion with Dreamweaver

Behaviors

In this tutorial we will show you how to use Dreamweaver Behaviors in order to control DMXzone Accordion.






of 52

How to do it 1. We’ve already added DMXzone Accordion on our page and inserted 3 buttons on the page, which

we’ll use in order to control the Accordion.




of 52

2. Select the first buttons (Disable Accordion). To open the Control DMXzone Accordion window (1) first

click the Tag Inspector button (2), then the Add Behavior button (3), select the DMXzone menu item

(4) and the Control DMXzone Accordion menu item (5).




of 52

3. Now we’re going to bind a behavior to the button. Select the Disable Accordion Item (1) from the

Action dropdown menu and click the OK button (2).




of 52

4. We do the same with the second button (Enable Accordion) but we choose the Enable Accordion

action.




of 52

5. For the Open Section 3 button we’ll use a behavior that will navigate to the section on button click.

Select the Open Section 3 button (1) , click the Tag Inspector button (2), then the Add Behavior

button (3), select the DMXzone menu item (4) and the Control DMXzone Accordion menu item (5).




of 52

6. Open the Action dropdown menu and select Open Section action (1). Enter the number of the

section that you want to open: 0 for the first one, 1 for the second, etc. In our case we want to

control the third section that’s why we enter 2 (2). When you’re done, click the OK button (3).




of 52

7. Now you can save your work and preview the result in the browser. That’s how easy it is to control

DMXzone Accordion with behaviors.




of 52

Advanced: Inserting Nivo Slider within DMXzone Accordion In this tutorial we will show you how to insert DMXzone Nivo Slider within DMXzone Accordion.







of 52

How to do it 1. We’ve already added the DMXzone Accordion on our page and we’re going to insert the Nivo Slider

into the second section. Delete the default content (1) from the section and click the Nivo Slider icon

(2).





of 52

2. The Nivo Slider window opens. Click the Import a whole folder button in order to add images to the

slider.




of 52

3. Import your images from a folder by clicking the Select button.




of 52

4. Click the Advanced tab (1) and adjust the Nivo Slider appearance (2). Click the OK button (3) when

you’re done.




of 52

5. Now, you can save your work and preview the result in the browser.




of 52

Reference: DMXzone Tabs Skins

Black-tie




of 52

Blitzer

Cupertino




of 52

Dark-hive




of 52

Dot-luv




of 52

Eggplant

Excite-bike




of 52

Flick

Hot sneaks




of 52

Humanity

Le-frog




of 52

Mint-choc

Overcast




of 52

Pepper-grinder

Redmond




of 52

Smoothness

South-street




of 52

Start

Sunny




of 52

Swanky-purse

Trontastic




of 52

Ui-Darkness

Ui-Lightness




of 52

Vader




of 52

Video: Adding DMXzone Accordion on a Website

With this movie we will show you how to insert the DMXzone Accordion on your page and

the options that we included in it.

Video: Controlling DMXzone Accordion with Dreamweaver

Behaviors

With this movie we will show you how to use Dreamweaver Behaviors in order to control

DMXzone Accordion.

Video: Inserting Nivo Slider within DMXzone Accordion

With this movie we will show you how to insert DMXzone Nivo Slider within the DMXzone

Accordion.





table of contents - · pdf filedmxzone accordion manual dmxzone.com copyright © 2012...

Documents