INSERTING THE ACCORDION SPRY WIDGET INTO YOUR WEBSITE

Continuing from my earlier posts: I am going to insert the customized accordion widget I created in the last post into my pricing.html.  (See earlier posts for lessons 1-18)

Moving right along, I am ready to insert the accordion widget into my third page called Pricing.  This is definitely getting easier!

 



Overview: In this tutorial, I am going to show you how to insert the accordion widget, add tabs, and change the text in a web page that has already been created! 

(Double-click images to make them bigger.)

Lesson 18

How to insert your accordion widget from my widgets:

1. Open the - pricing.html. Place the cursor in the .content area of the website and delete any lingering text. From the menubar, click on insert, then widgets (see figure 18.0)
2. In the widget pop-up, click on jQuery UI Accordion for Widget Browser. And then click on the customized widget you have already created from the previous post. In my case, it is called TexArtisan Cakes, click OK. (see figure 18.1)
3. The widget will show up as a list. This is normal.

figure 18.0

 

figure 18.1

Lesson 19

How to insert a new tab into your accordion:

1. Place your cursor on Third within the widget and click on Split to reveal the code. The cursor will automatically appear in the appropriate line of code. (see figure 19.0)
2. Copy and paste the two lines of code associated with Third right below.
3. Make sure the pattern matches the code above. Right above the lines of code you just pasted, make sure you see </div> and  <div> just below. If not, then type it in. (see figure 19.1)
4. Click Live View to check your progress.(see figure 19.1)



figure 19.0



figure 19.1

 

Lesson 20

How to change the text in your accordion:

1. Un-click Live View.
2. Simply place the cursor in the line of text you wish to change and start typing. I added more text above and outside of the accordion for extra information. (see figure 20.0)
3. Save your work.
4. Click file, preview in browser. (see figure 20.1)
5. See your new creation in a web browser! (see figure 20.2)

figure 20.0

 

figure 20.1

figure 20.2

 

EDITING AN ACCORDION SPRY WIDGET IN DREAMWEAVER

Continuing my crusade to build a website from start to finish! I am going to create the third page of my website and call it pricing.html for my texartisancakes.com website. Also, I am going to create customized accordion information tabs to match my website! (See earlier posts for lessons 1-15)

Accordion tabs are a good way to compress a lot of information in your website. After learning how to edit the slide show widget, (see lessons 11-15) this tutorial was a breeze! I really think I am getting the hang of this!

Overview: I am going create the third page of my website called Pricing and customize an Accordion Spry Widget to match my website!

(Double-click images to make them bigger.)

Lesson 16
How to create your third page and acquire and save an accordion tab widget to my widgets:

1. Open the index.html that you have already created.
2. Save as - pricing.html. (see figure 16.0)
3. From the menu bar, click on the extended dreamweaver icon (the little icon that looks like the cog of a wheel.) Then click on Widget Browser. (see figure 16.1)
4. In the Widget Browser, click Adobe Exchange, then scroll down and double-click on jQuery UI Accordion for Widget Browser. (see figure 16.2)
5. Here you can preview the widget. In the bottom right corner click, add to my widgets. Then click on go to my widgets. (see figure 16.3 and 16.4)



figure 16.0

 

figure 16.1



 

figure 16.2

 

figure 16.3

 

figure 16.4

 

Lesson 17
How to customize the accordion widget to match your site:

1. Within the my widgets window, click on jQuery UI Accordion for Widget Browser. (see figure 17.0)
2. Pick from the list of styles the will best fit the theme of your website. I selected cloudy day. Select configure. (see figure 17.1)
3. Give your widget a name and save. Double-click on your newly created widget to start editing it . (see figure 17.2)
4. Click on the general, header, and contents toolbars and change the background colors and fonts to match your website.  (see figure 17.3)
5. Click save preset. (see figure 17.4)

figure 17.0

figure 17.1

figure 17.2

figure 17.3

figure 17.4

 

 

INSERTING SPRY SLIDESHOW WIDGET & ADDING IMAGES

Continuing from my earlier posts: I am going to insert the customized slide show I created yesterday   and import my own images and text into my photogallery.html  (See earlier posts for lessons 1-12)

I am ready to insert the slide show into my second page called Photo Gallery. In this tutorial, I am going to show you how to insert the widget and import and rename your images.
You will need to have two images of each slide.
The first one is a thumbnail at about 25% of the original slide size and the second on is the original slide. I saved mine as .jpgs...

Overview: I am going to insert a slide-show into a webpage I have already created.

(Double-click images to make them bigger.)

Lesson 13
How to insert your slide show from my widgets:

1. Open the - photogallery.html. Place the cursor in the .content area of the website and delete any lingering text. From the menubar, click on insert, then widgets (see figure 13.0)
2. In the widget pop-up, click on Spry Image Slide show with Filmstrip. And then click on the customized widget you have already created from the previous post. In my case, it is called TexArtisan Cakes. (see figure 13.1)
3. The widget will show up as a list and wider than the frame. This is normal.

 figure 13.0

 

 figure 13.1

 

 

Lesson 14
How to insert your images into the slide show:

1. Click on the first thumbnail image to pull up the properties toolbar at the bottom of the page. (If the properties toolbar is not open, click Ctrl+F3.) 
2. In the properties toolbar click on source of image or src and repath to your first thumbnail image in your images folder. (see figure 14.0)
3. In the properties toolbar click on hyperlink or link and repath to your first image that matches the thumbnail. (see figure 14.1)
4. Repeat steps 2 and 3 until you have uploaded all of your images.

figure 14.0

 

figure 14.1

 

Lesson 15
How to rename your images:

1. Click on Split to open up the code. Scroll down until you find your images, and rename the text. (see figure 15.0)
2. Click on Design to close the code and then click on Live View to check your progress!

 

 figure 15.0

 

figure 15.1