FolderView DMXzone.com FolderView Manual

Size: px

Start display at page:

Download "FolderView DMXzone.com FolderView Manual"

Elwin McDowell
5 years ago
Views:

2 Index FolderView Manual... 1 Index... 2 About FolderView... 3 Features in Detail... 4 Before you begin... 9 Installing the extension... 9 Creating a Basic Folder Listing Introduction Building the Listing Editing the Folders and Their Properties Introduction Changing the Folders Editing the Field with the Property Inspector Introduction The Property Inspector Multiple Folder Views Introduction Building the page FAQ Copyright 2007 All Rights Reserved To get more go to Page 2 of 32

3 About FolderView Create cool listings like folders, categories and thumbnails with web 2.0 style icons. Apply amazing expanding effects for the greatest user experience. Choose from one of the many included designs in the library. Forget about boring bullet listings that you see on those pages with that 90 s look. Use the new great looking and space preserving animated displays of FolderView. Use it for vertical menus, categories, product listings, portfolio listings, media catalogs and countless other applications whenever you need to show a categorized view of many items. Edit everything visually in the design view of Dreamweaver, like you are editing a normal list of items, no coding is required while it is still as easy to edit as any other list items. Copyright 2007 All Rights Reserved To get more go to Page 3 of 32

5 Live Preview and visually edit in Dreamweaver Preview your designs in the design view of Dreamweaver. Edit everything visually in the design view of Dreamweaver, like you are editing a normal list of items, no coding is required while it is still as easy to edit as any other list items. Copyright 2007 All Rights Reserved To get more go to Page 5 of 32

Choose from the many Styles and Icons This extension comes with an extensive collection of icons that will be updated regularly. You can even apply your own style using your own images.

6 Choose from the many Styles and Icons This extension comes with an extensive collection of icons that will be updated regularly. You can even apply your own style using your own images. Cool Effects Apply cool slide and fade effects for collapsing and expanding folders. Web standards based FolderView complies with the latest web standards of the W3C JavaScript Unobtrusive Even if your users don t use JavaScript, they can still use the FolderView extension as they will se a normal bullet list (optionally with structure). Copyright 2007 All Rights Reserved To get more go to Page 6 of 32

7 Integrated in Dreamweaver Interactive dialog in Dreamweaver with all the options you ll need, including a cool preview field; Edit your FolderView properties with the property inspector in Dreamweaver. Copyright 2007 All Rights Reserved To get more go to Page 7 of 32

9 Before you begin Make sure to setup your site in Dreamweaver first before creating a page, if you don t know how to do this please read this. Installing the extension Read the tutorial at Login, download the product, and lookup your serial at Get the latest extension manager 1.8 from Adobe at Open the.mxp file (the extension manager should startup) and install the extension. If you experience problems please read the FAQ at before contacting support. Copyright 2007 All Rights Reserved To get more go to Page 9 of 32

10 Creating a Basic Folder Listing Introduction In this chapter we ll create a basic listing that will look this: Building the Listing 1. Create a new HTML page Create a new or open an existing HTML page and save the page. 2. Applying the extension Choose the icon from the DMXzone object bar to apply the extension, the following popup appears: Copyright 2007 All Rights Reserved To get more go to Page 10 of 32

3. Setting the Main Options List type determines what sort of list you want to display, you can set it to Normal, Bullet Images or Folders and Files. We select Folders and Files.

11 3. Setting the Main Options List type determines what sort of list you want to display, you can set it to Normal, Bullet Images or Folders and Files. We select Folders and Files. Clickable area lets you configure what part of your list is clickable. You can set it to Row or Bullet Images. We set it to row. Copyright 2007 All Rights Reserved To get more go to Page 11 of 32

12 Clickable Image sets the image that is used in front of your expandable root folders. You can set it to plus/minus or down/right arrow. We select plus/minus. When enabled Show Structure shows the structure of the folders by using lines in front of them, if you disable this option, it only shows the structure with indents. We enable the Show Structure option. Copyright 2007 All Rights Reserved To get more go to Page 12 of 32

13 4. Configuring Effects When enabled, the Slide option adds an animated slide effect to the expanding and collapsing of your folders. We enable it as it gives a nice touch to your folders. The Fade option makes your icons transparent when you collapse them and makes them fade in again when you expand your folders. We enable the Fade option for a stylish effect. Make sure you ve enabled the Slide option before enabling this option. Speed sets the expand and collapse speed of your folders. We set the Speed to normal. 5. Setting the Style Options Background color lets you change the color of your canvas. The Choose Other Icons options let s you choose different styles. Copyright 2007 All Rights Reserved To get more go to Page 13 of 32

Press the Choose Other Icons option to select a folder style.

15 Press OK to apply the properties (a progress bar might appear). The Assets manager appears, select Upload All to upload the files to your server. Copyright 2007 All Rights Reserved To get more go to Page 15 of 32

17 The preview in your design view might deviate from the view in your browser, so always test in your browser. The result should look similar to the screenshot below. Copyright 2007 All Rights Reserved To get more go to Page 17 of 32

Editing the Folders and Their Properties Introduction In this chapter we re going to edit the properties of the FolderView listing using the design view of Dreamweaver. Changing the Folders 1.

18 Editing the Folders and Their Properties Introduction In this chapter we re going to edit the properties of the FolderView listing using the design view of Dreamweaver. Changing the Folders 1. Editing the folder text Since the folders are simple list items that have been customised using CSS and images, you can treat them like any other list (for instance a bullet list). Select the text in the design view and just type over it. We ll create the following Listing: Copyright 2007 All Rights Reserved To get more go to Page 18 of 32

19 2. Adding and Removing Folders Position the curser after the folder, and press enter to insert a new folder above it. We place the cursor after the first folder and press enter, the result will be as displayed below; Copyright 2007 All Rights Reserved To get more go to Page 19 of 32

22 3. Adding structure (indenting) Position the cursor in on the right side of a folder icon and press the Text Outdent or Text Indent button to move it one position higher or lower in the hierarchy. We ll place the cursor after the FLzone folder icon and press Text Indent. The result will be as follows; Copyright 2007 All Rights Reserved To get more go to Page 22 of 32

Custom Icon in Design View of Dreamweaver Custom Icon in the Browser 4. Adding links Adding links works exactly the same way as with normal list items.

23 Replacing Icons Position the cursor in on the right side of a folder icon and select Insert -> Image (CTRL+ALT+I or Command+Option+I). The design view will position the image next to the folder but when you publish, you ll see that the folder image is removed and your custom image is used. Custom Icon in Design View of Dreamweaver Custom Icon in the Browser 4. Adding links Adding links works exactly the same way as with normal list items. Select the text on the right side of your folders to add a link and enter or select the link in the Link field of your property inspector. Copyright 2007 All Rights Reserved To get more go to Page 23 of 32

5. Coloured and Transparent backgrounds If you have a colored or transparent background, you need to disable the Structure option and select the then select the

24 5. Coloured and Transparent backgrounds If you have a colored or transparent background, you need to disable the Structure option and select the then select the Background property and choose to set the background colour of your FolderView to transparent. Copyright 2007 All Rights Reserved To get more go to Page 24 of 32

25 Editing the Field with the Property Inspector Introduction In this chapter we re going to edit the properties of the FolderView listing using the property inspector of Dreamweaver. Click on in your design view to display the properties of the listing. Below is a screenshot of the property inspector. We ll create the following FolderView: The Property Inspector 1. Setting Bullet option Bullet sets the image that is used in front of your expandable root folders. You can set it to none, plus/minus or down/right arrow. We ll leave this option to plus/minus. 2. Configuring the Clickable area This option lets you configure what part of your list is clickable. You can set it to Row or Bullet Images. We ll set it to Row, when you test in your clickable area has increased to the entire row. Copyright 2007 All Rights Reserved To get more go to Page 25 of 32

26 3. Identifying your FolderView ID is used to identify the field, make sure it is unique for every field you use, we ll set it to ListingOne so we can identify it later. 4. Creating structure When enabled Show Structure shows the structure of the folders by using lines in front of them, if you disable this option, it only show the structure with indents. We leave the Show Structure option enabled. 5. Enabling and Disabling Folder Options The Icons option removes your folder images, we ll leave it checked. Copyright 2007 All Rights Reserved To get more go to Page 26 of 32

27 6. Animation Speed Speed sets the expand and collapse speed of your folders. We set the Speed to normal. 7. Configuring Effects When enabled, the Slide option adds an animated slide effect to the expanding and collapsing of your folders. Leave it enabled as it gives a nice touch to your folders. The Fade option makes your icons transparent when you collapse them and makes them fade in again when you expand your folders. We enable the Fade option for a stylish effect. Make sure you ve enabled the Slide option before enabling this option. 8. Setting the Style Options Background color lets you change the color of your canvas. The Choose Other Icons options let s you choose different styles. We leave it at white. Copyright 2007 All Rights Reserved To get more go to Page 27 of 32

The Assets manager appears, select Upload All to upload the

28 Select the Choose style template button. A popup appears, we ll select the Blue_Folder3_24x24 style. The Assets manager appears, select Upload All to upload the files to your server. Copyright 2007 All Rights Reserved To get more go to Page 28 of 32

Press F12 to preview and save. That s it you ve created your own FolderView!

Multiple Folder Views Introduction In this chapter we ll create two folder lists using a table. The result will be as follows: Building the page 1.

30 Multiple Folder Views Introduction In this chapter we ll create two folder lists using a table. The result will be as follows: Building the page 1. Create a table Select Insert -> Table to create a table on your page, we create 1 Rows, 2 Columns, a Table width of 600 pixels. Copyright 2007 All Rights Reserved To get more go to Page 30 of 32

31 2. Inserting the folder lists Place the cursor in the first column and press the FolderView icon to insert your FolderView. We re going to use the default options, and press OK, if the Assetsmanager appears, select Upload All. We do the same for the second column. Press F12 to preview and save. That s it you ve created your own FolderView! The result should be similar to the image below: Copyright 2007 All Rights Reserved To get more go to Page 31 of 32

32 FAQ Q: My FolderView does not work A: Make sure you have uploaded all the files and folders to your server and that JavaScript is enabled in your browser. Copyright 2007 All Rights Reserved To get more go to Page 32 of 32

FolderView DMXzone.com Folder View 2 Manual

FolderView DMXzone.com Folder View 2 Manual Folder View 2 Manual Copyright 2009 All Rights Reserved To get more go to Page 1 of 39 Index Folder View 2 Manual... 1 Index... 2 About FolderView... 3 Features in Detail... 4 Before you begin... 10 Installing