Welcome Installation Using the extensions The Manual (static) menu Wizard For first level Add item...

Size: px

Start display at page:

Download "Welcome Installation Using the extensions The Manual (static) menu Wizard For first level Add item..."

Marshall Jacobs
5 years ago
Views:

1 USER GUIDE

2 1 CONTENTS Welcome... 3 Installation... 3 Using the extensions... 4 The Manual (static) menu Wizard... 5 For first level... 8 Add item... 8 Add sub item... 8 Remove item... 8 Label... 9 URL... 9 Tooltip Target Sub-items animation Menu absolute position Highlight current item Specify Image Menu Settings The database menu wizard ID Label Parent_Id Tooltip Order by URL Visibility Built with URL parameter Retrieved from database Setting Up A Site in Dreamweaver All Rights Reserved.

3 2 The menus Canary clashing Classic Classic Blue Classic Orange Clay Contemporary Blue Contemporary Green Contemporary Red Contemporary Violet Formal Blue Formal Green Formal Red Formal Violet Ice Blue Ice Brown Ice Green Organic Red Classic Sombre TDB Blue Uncomplicated Obtaining Help All Rights Reserved.

3 WELCOME Thank you for purchasing our menu maker extension for Adobe s Dreamweaver. We hope this guide will answer your question, but if not please check our website (www.tdbcomputing.

4 3 WELCOME Thank you for purchasing our menu maker extension for Adobe s Dreamweaver. We hope this guide will answer your question, but if not please check our website ( or us at menu@tdbcomputing.com. INSTALLATION The installation is extremely simple and fully automatic. Open the Adobe Extension Manager and select the install button: which will open a standard dialogue box. Navigate to the extension on your computer: and select TDBCSSMenus.mxp. You will see a disclaimer screen from Adobe and then the installation will proceed. When finished it is placed in the list of installed extensions. If Dreamweaver is open, close it and restart the program. You will see a tab TDB has been added and the two extensions will be shown All Rights Reserved.

5 4 USING THE EXTENSIONS If you select the TDB area you will see there are two icons: The first is the manual wizard and the second (with the lightning bolt) is the database version. There is a slight difference in their use but they look the same to the end user. You can more than one on your page, but it is really not good practice All Rights Reserved.

6 5 THE MANUAL (STATIC) MENU WIZARD We will commence with this wizard and assume we have a simple store. Note it is important to properly set up a site in Dreamweaver otherwise various dependent files and CSS items will not show. The Dreamweaver instructions show how to set up a site correctly. We want our menu to have the following: Welcome About Us Our Terms Our Products Buy Now For the Products we want four product groups with some items: Shoes o o Coats o o Scarves o o o Black shoes Brown shoes Summer Coats Winter Coats Silk Scarves Wool Scarves Pattern Scarves Umbrellas o Ladies Umbrellas o Gents Umbrellas We will use the product or page name as the link (e.g., welcome.php, blackshoes.php and do on). We will start with a blank sheet for this example although of course you could use whatever designs you require. We are using PHP but the method is exactly the same for the other languages supported by Dreamweaver. As the menu is javascript there will be no difference. On a blank saved page (the wizard will tell you to save the page if you try to apply it to an unsaved page) select the icon for the menu All Rights Reserved.

7 So we select that and press the next button.

9 8 This is where most of your work will be done so let is look at the options. FOR FIRST LEVEL The options here are either text or images. We will stick to text for the moment. If we select images when a first level option is added a standard dialogue will appear to locate the image. ADD ITEM No prizes for guessing what this does! ADD SUB ITEM A sub item in our example would be the product groups and item. REMOVE ITEM We won t insult your intelligence! We will put in the top level items first, commencing with Welcome, so select add item All Rights Reserved.

As this is a CSS menu you can change the CSS to allow for uppercasing, bold or whatever.

10 9 Fairly obviously type welcome as this is the label for the menu item and we now see Let us look at the 4 items that make up the menu LABEL The label is what the user will see. As this is a CSS menu you can change the CSS to allow for uppercasing, bold or whatever. URL You can browse or type in the destination of the URL for this All Rights Reserved.

11 10 TOOLTIP Frequently forgotten but this can be very useful. This the small popup that will show under the cursor as it travels over the menu TARGET This drop down contains the usual HTML selections: Self the default which will occur even if you leave this field blank. The menu will put the URL exactly where the menu appears. Blank the link will open in a new page or tab (depending on how the visitor s browser is set. Parent Useful for frames when you want the whole containing frame (it s parent) to refresh. Top the whole page will refresh (similar to self). We will leave the target option blank for the moment as we just want a straightforward menu, so we will fill in our five headings. As you will see we have made a mistake buy now should be at the end. This is simple to rectify. Just select buy now and use the down arrow All Rights Reserved.

12 11 and it will move down so we have the correct order There is one other mistake our products is linked to a page which is incorrect as it will be the parent of other menus. Just remove the URL: All Rights Reserved.

13 12 Our top level is complete so we will add the four product groups shoes, coats, scarves and umbrellas. With our products highlighted select Add sub-item and add shoes without a URL (it is going to have another menu under it) All Rights Reserved.

15 14 You can adjust the level with the level adjustment buttons So we will now select shoes and add a sub-tem black shoes. This time it will have a URL. We will also add brown shoes All Rights Reserved.

16 Now select NEXT for our final options

MENU ABSOLUTE POSITION As this is a CSS menu we can tell it to make the div in which the menu appears absolute, rather than

18 17 Let us look at these options a moment SUB-ITEMS ANIMATION Here we have options of how the sub menus (shoes etc) will appear. We want them to slide so we select that. MENU ABSOLUTE POSITION As this is a CSS menu we can tell it to make the div in which the menu appears absolute, rather than relative. We will leave this unchecked as we want it relative (which is usually the safest option!). HIGHLIGHT CURRENT ITEM Obvious this and we will make sure it is checked All Rights Reserved.

18 SPECIFY IMAGE MENU SETTINGS As we are not having images for our top level this is

If we had images this would be where we specify the highlight and the hover images.

appears on our page If we actually run the page we will see it all functioning Notice

19 18 SPECIFY IMAGE MENU SETTINGS As we are not having images for our top level this is grayed out. If we had images this would be where we specify the highlight and the hover images. Our menu is finished, so select Finish and it is done and a representation of our menu appears on our page If we actually run the page we will see it all functioning Notice our products has an arrow which indicates it has sub menus. And each if its menu items also is correctly marked as a menu item All Rights Reserved.

20 19 So our menu is finished. If we select to view the code in Dreamweaver we will see a div has been set up and our menus is actually an unordered list. which is useful as we could edit this if we wanted to very easily indeed All Rights Reserved.

21 20 THE DATABASE MENU WIZARD Here the menu is composed dynamically from a table, which is incredibly flexible. We have a table which is composed of the following fields Let us look at the fields (the names can of course be changed): ID This is set as an auto increment primary key the table must have a key field LABEL This is the field that will hold the actual text the user will see PARENT_ID Our menu must know if this is a sub menu if not it should be set as 0. TOOLTIP The field for the text that will be our tooltip it can be left blank. ORDER BY This will be the sort order for the database query URL The wizard can generate a URL or read from a database. If the latter is what you require fill in the URL with any parameters you are passing here All Rights Reserved.

22 21 VISIBILITY This is extremely useful in a dynamic site. If this figure is 0 then the item will not appear in our menu. It could be the number of items in stock or a simple 0 or 1. If it was the number of items in stock and it dropped to zero the item would not appear in our menu. We have used the same schema as the example of the static menu and here is the SQL of the completed table: TABLE STRUCTURE FOR SHOPEXAMPLE DROP TABLE IF EXISTS `SHOPEXAMPLE`; CREATE TABLE `SHOPEXAMPLE` ( `ID` INT(11) NOT NULL AUTO_INCREMENT, `LABEL` VARCHAR(40) DEFAULT NULL, `PARENT_ID` INT(11) DEFAULT NULL, `TOOLTIP` VARCHAR(40) DEFAULT NULL, `ORDERBY` INT(11) DEFAULT NULL, `URL` VARCHAR(60) DEFAULT NULL, `VISIBILITY` INT(11) DEFAULT '1', PRIMARY KEY (`ID`) ) ENGINE=INNODB AUTO_INCREMENT=19 DEFAULT CHARSET=LATIN1; RECORDS INSERT INTO `SHOPEXAMPLE` VALUES ('1', 'WELCOME', '0', 'WELCOME TO OUR SITE', '1', 'WELCOME.PHP', '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('2', 'ABOUT US', '0', 'ABOUT US', '2', 'ABOUTUS.PHP', '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('3', 'OUR TERMS', '0', 'OUR TERMS', '3', 'OURTERMS.PHP', '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('4', 'OUR PRODUCTS', '0', 'OUR PRODUCTS', '4', NULL, '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('5', 'BUY NOW', '0', 'BUY NOW', '5', 'BUYNOW.PHP', '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('6', 'SHOES', '4', 'SHOES', '6', NULL, '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('7', 'COATS', '4', 'COATS', '7', NULL, '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('8', 'SCARVES', '4', 'SCARVES', '8', NULL, '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('9', 'UMBRELLAS', '4', 'UMBRELLAS', '9', NULL, '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('10', 'BLACK SHOES', '6', 'BLACK SHOES', '10', 'BLACKSHOES.PHP', '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('11', 'BROWN SHOES', '6', 'BROWN SHOES', '11', 'BROWNSHOES.PHP', '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('12', 'SUMMER COATS', '7', 'SUMMER COATS', '12', 'SUMMERCOATS.PHP', '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('13', 'WINTER COATS', '7', 'WINTER COATS', '13', 'WINTERCOATS', '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('14', 'SILK SCARVES', '8', 'SILK SCARVES', '14', 'SILKSCARVES.PHP', '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('15', 'WOOL SCARVES', '8', 'WOOL SCARVES', '15', 'WOOLSCARVES.PHP', '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('16', 'PATTERNED SCRAVES', '8', 'PATTERNED SCARVES', '16', 'PATTERNEDSCRAVES.PHP', '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('17', 'LADIES UMBRELLAS', '9', 'LADIES UMBRELLAS', '17', 'LADIESUMBRELLAS.PHP', '1'); INSERT INTO `SHOPEXAMPLE` VALUES ('18', 'GENTS UNMBRELLAS', '9', 'GENTS UMBRELLAS', '18', 'GENTSUMBRELLAS.PHP', '1'); Let us look at the parent_id fields as we will get an understanding of the layers much easier: All Rights Reserved.

For this demonstration we will assume you are able to set up a site and are familiar with databases and Dreamweaver.

23 22 Our top level items are level 0, then we have our product types which we want to show under our products so they are set with the parent id of the id of our products 4. If we look at the black shoes which should be visible under shoes we find that it is set to 6. For this demonstration we will assume you are able to set up a site and are familiar with databases and Dreamweaver. So with a blank saved page start the wizard via the TDB item on the toolbar: And the wizard will commence All Rights Reserved.

23 Make your choice of layout and skin (we are going to use the vertical of Formal Blue and press

25 24 The fields are extremely obvious and we have selected them according to our database schema, so we can select the next button. This will bring us to the instructions in building the link: All Rights Reserved.

BUILT WITH URL PARAMETER Basically you will select a page and select a field as a parameter.

26 25 There are two link types Built with URL parameter and Retrieved from database. Let us look at them for a moment. BUILT WITH URL PARAMETER Basically you will select a page and select a field as a parameter. For example we could have a page detail.php and we will pass the id as a parameter id, so it would be filled in as All Rights Reserved.

select ALL as the number of levels and slide as our animation type.

27 26 RETRIEVED FROM DATABASE Here we give the field that contains the URL and (optionally) a field that contains the target (_blank, _self etc) Our next step is the final information: We are going to select ALL as the number of levels and slide as our animation type. We are not going to set the div as an absolute and we want the current item highlighted All Rights Reserved.

27 If we wanted images for our top level we would select

represented on our page: When we run it we find it is all

on the list of server behaviours: And double clicking on

28 27 If we wanted images for our top level we would select it and give the wizard details of the three images required and the image size. When we press finish our menu is complete and is represented on our page: When we run it we find it is all running perfectly: As it is a server behavior we see it on the list of server behaviours: And double clicking on it will bring up the wizard for any amendments required: All Rights Reserved.

28 But we also now have the option of editing the CSS

select help for the appropriate version you are using and follow their instructions for setting up a site:

34 33 SETTING UP A SITE IN DREAMWEAVER We mentioned earlier that you must be working within a site for it to function properly and rather than rewrite Adobe s own wording you can simply select Dreamweaver s Help and then select help for the appropriate version you are using and follow their instructions for setting up a site: Clicking the open icon will bring up pages with all the instructions you need: All Rights Reserved.

35 THE MENUS All the menus are available in 4

sake of space we will just show the vertical menus here.

37 CLAY CONTEMPORARY BLUE CONTEMPORARY GREEN

Dreamweaver MX The Basics

Dreamweaver MX The Basics Chapter 1 Dreamweaver MX 2004 - The Basics COPYRIGHTED MATERIAL Welcome to Dreamweaver MX 2004! Dreamweaver is a powerful Web page creation program created by Macromedia. It s included in the Macromedia