WORKING WITH SPRY SLIDE SHOW WIDGETS

Continuing from my earlier posts, I am going to create my second page of my website and call it photogallery.html for my texartisancakes.com website and create a customized slide show. (See earlier posts for lessons 1-10)

So far, I have created the home page of my website. Now I am ready to make my second page called Photo Gallery.  In this tutorial, I am going to show you how to create your second page, and prepare for your slide show by customizing an Adobe Spry Widget in the Widget browser!
 

Overview: I am going create the second page of my website called Photo Gallery and customize a slide-show with a filmstrip by using Adobe Spry Widgets.

(Double-click images to make them bigger.)

Lesson 11
How to create your second page and acquire and save a slide show widget to my widgets:

1. Open the index.html that you have already created.
2. Save as - photogallery.html. (see figure 11.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 11.1)
4. In the Widget Browser, click Adobe Exchange, then scroll down and double-click on Spry Image Slide show with Filmstrip. (see figure 11.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 11.3 and 11.4)

figure 11.0

 



figure 11.1

 

figure 11.2

 

figure 11.3

 

figure 11.4

Lesson 12
How to customize the slideshow widget to match your site:

1. Within the my widgets window, click on Spry Image Slideshow with Filmstrip. (see figure 12.0)
2. Select default, and configure. (see figure 12.1)
3. Give your widget a name and save. Double-click on your newly created widget to start editing it . (see figure 12.2)
4. Click on the titles toolbar and change the name of your slide show, the font, and the color of your text to suit your needs.  (see figure 12.3)
5. Click on the frame and viewport tool bar to change the background colors to match your color scheme.  (see figure 12.4)
6. Next we are going to size the slide show to fit in our .content area.  To get the size of the area in Dreamweaver, look at the CSS definition rule for .content. Notice under box, the width is set to 780 pixels.  I know that the width of my slide-show needs to be 780 pixels total to fit nicely inside the content area. (see figure 12.5)
7. Accounting for the 1 pixel width border on the left and right side, (780 px - 2 px = 778px)set the background area width to 778 pixels. (see figure 12.6)
8. Click on the filmstrip and thumbnails tool bar to change the background colors to match your color scheme.
9. Click save preset. (see figure 12.7)

figure 12.0

figure 12.1

 

 figure 12.2

 

 figure 12.3

 

 figure 12.4

 

figure 12.5

 

figure 12.6

 

figure 12.7

 

CUSTOMIZING YOUR DREAMWEAVER TEMPLATE - PART TWO

Continuing from my earlier posts, I am going to customize my index.html web page for my texartisancakes.com website. (See earlier post for lessons 1-6)

So far, I have created a file structure for my website on my computer, created a logo, a custom background image, and some content for my site. Now I am ready to put the pieces of the puzzle together for my first page.

Overview: I am going to insert my logo, background image, text, and change the color scheme of my Dreamweaver Template to match my site.

(Double-click images to make them bigger.)

Lesson 7
How to insert your background image:

1. Open the index.html that you have already created. (see lessons 1-3)
2. From the CSS Styles navigation bar, double-click on body to open the CSS Rule definition for body. (see figure 7.0)
3. In the CSS Rule definition for body, under category, click background. In background image, path to your background image within your images file. Click apply, then OK (see figure 7.1)

figure 7.0

figure 7.1

Lesson 8
How to insert and center your logo and change the background color of the header:

1. Next, we are going to change the color of the header from the template-provided green to a purple from our background image.  From the CSS Styles navigation bar, double-click on .header to open the CSS Rule definition for .header. Under category, click background. In background color, click on the color square to open the color-picker tool. Move the color-picker tool over the color you wish to duplicate and click on it. Click apply, then OK. (see figure 8.0)
2. Next, I am going to insert my logo. Since I want my logo to be centered and not anchored to the left side of the header, I am going to delete the the logo placeholder. Click on the logo placeholder and hit delete on your keyboard. Leave your cursor in the header. From the insert toolbar, click on images and path to your logo. Click OK. (see figure 8.1)
3. To center the logo, go to the CSS Styles navigation bar, double-click on .header to open the CSS Rule definition for .header. Under the block category, click text-align, center. Click apply, then OK. (see figure 8.2)

 figure 8.0

 

figure 8.1

   

figure 8.2

 

Lesson 9
How to rename the links and change the background and hover colors:

1. I am going to change the names of the links and the background color next. Simply place your cursor within the link and type in the desired text. (see figure 9.0)
2. Next I am going to change the background color of the links from the template-provided green to a color from my custom wallpaper. Go to the CSS Styles navigation bar, double-click on .ul.nav a, ul.nav a:visited to open the CSS Rule definition for .ul.nav a, ul.nav a:visited. Under the background category, click on the color square to open the color-picker tool. Move the color-picker tool over the color you wish to duplicate and click on it. In the type category, change the font color and font weight to suit your scheme. I picked white and bold. Click apply, then OK. (see figure 9.1)
3. Now I am going to change the hover background color of the links. Go to the CSS Styles navigation bar, double-click on ul.nav a:hover, ul.nav a:active, ul.nav a:focus to open the CSS Rule definition for ul.nav a:hover, ul.nav a:active, ul.nav a:focus. Under the background category, click on the color square to open the color-picker tool. Move the color-picker tool over the color you wish to duplicate and click on it. Click apply, then OK. (see figure 9.2)
4. I want to change the sidebar color to match my links. Go to the CSS Styles navigation bar, double-click on .sidebar1 to open the CSS Rule definition for .sidebar1. Under the background category, click on the color square to open the color-picker tool. Move the color-picker tool over the color you wish to duplicate and click on it. Click apply, then OK. (see figure 9.3)
5. I deleted the text in the sidebar and simply hit the return key a few times to extend the sidebar color down.
6. To check your progress, go to live view and hover over your links. (see figure 9.4)

figure 9.0

 

figure 9.1

 

figure 9.2

 

figure 9.3

 

figure 9.4

 

 

Lesson 10
How to change the body text and color and the footer text and color:

1. You can simply type in your text using the cursor. Or if you want to have it specially formatted, you can create your text in a word document and copy and paste. (see figure 10.0)
2. To change the properties of the footer, go to the CSS Styles navigation bar, double-click on .footer to open the CSS Rule definition for .footer. Under the type category, change the color and weight of the font. Under the background category, click on the color square to open the color-picker tool. Move the color-picker tool over the color you wish to duplicate and click on it.Under the block category, click text-align, center. Click apply, then OK.  (see figure 10.1-10.3) 
3. To check your progress, go to live view and see your creation! (see figure 10.4)

figure 10.0

 

figure 10.1

 

figure 10.2

 

figure 10.3

figure 10.4

 

CREATING A CUSTOM BACKGROUND IMAGE IN ADOBE PHOTOSHOP

Continuing from my earlier posts, I am going to customize my index.html webpage for my texartisancakes.com website. (See earlier posts for lessons 1-4)

After having success with placing my logo with Lesson 4, I realized my muted, dark, color scheme did not seem to fit the idea of baking cakes. I am wanting a more lively website and decided to create a custom background image.  I am going to backtrack and create a background image with a brighter color scheme.

If you want to follow along, you can download a trail version of Adobe Photoshop here.

http://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop&loc=en_us 

 

Overview: Using Adobe Photoshop, I am going to create a a lively background image with a new color scheme for my web-site using the colors I have already chosen in Kuler. (see Lesson 3)

 

(Double-click images to make them bigger.)

Lesson 5
How to make a custom background image in Photoshop:

1. In Adobe Photoshop open a new page. From the menubar click file, new. When the pop-up window appears, give your image a name like background, scroll down to web in the present box, and change the size to 1280x 1024, then click OK. (see figure 5.0)
2. Using the colors already loaded into your color swatches from Kuler (see lesson 3), create vertical lines of varying widths across the page. You can use the Rectangular Marquee Tool to create long rectangles and then use the color picker to pick your color from the color swatches. Then use the Paint Bucket Tool to fill the rectangles. (see figure 5.1)
3. After you have created lines of your basic colors, go to the layers menubar and double-click on background. This will pull up a new pop-up, click ok. This will create Layer 0. (see figure 5.2)
4. Right-click on Layer 0 and select duplicate layer. Using the move tool while holding down the shift key, drag your copy and drop it adjacent to the lines you already created. (see figure 5.3)
5. Go to the Layers toolbar and select Layer 0 copy. On your keyboard click ctrl+E to marry the layers down.
6. Repeat steps 4, 5, and 6 until your page is full of lines.
7. Now let's brighten it up. Pick a color that matches your color scheme from the color picker. In my case, I want to add more pink. (see figure 5.4)
8. In the Layers toolbar click new layer. (see figure 5.5)
9. While in Layer 1, use the Paint Bucket Tool to fill the entire background and make it pink. (see figure 5.6)
10. In the Layers toolbar select normal and scroll down to select hue. (see figure 5.7)
11. On your keyboard click ctrl+E to marry the layers down.
12. Finally, save your image for the internet. Click file, save for web and devices, select png-24 and save in your images folder within your site folder. (see figure 5.8)

figure 5.0

 

figure 5.1

 

figure 5.2

 

 

figure 5.3

 

figure 5.4

 

figure 5.5

 

figure 5.6

 

figure 5.7

 

figure 5.8

CUSTOMIZING YOUR DREAMWEAVER TEMPLATE

Continuing from my earlier post, I am going to customize my index.html webpage for my texartisancakes.com website. (See earlier post for lessons 1, 2 & 3)

Overview: I have created a logo for my site and I want to insert it into my new webpage and add content.

(Double-click images to make them bigger.)

Lesson 4

1. There is a logo placeholder in the upper left hand corner. You can simply click on it and path to your image. In my case, I want my logo to be in the center of the header, so I will to delete the placeholder and insert my logo as a background image in the header.
2. From the CSS Styles navigation bar, double-click on .header to open the CSS Rule definition for .header.
3. Under Category, click on Background to edit the background properties. Using the color from weddingbliss.ase swatch, type in 595731 - or pick any background color you wish.
4. Path to your image. (Note: I saved my image as a .png file so that I could have a transparent background).
5. Select no repeat, fixed, center, and center in the following boxes. Click Apply to save the changes. (see figure 3.0)
6. Go back to Category and switch to Box. Adjust the height of the box as necessary to accommodate your image.  (see figure 3.1)

Figure 4.0

Figure 4.1

HOW TO BUILD A SIMPLE SITE WITH ADOBE DREAMWEAVER CS5 TEMPLATES

How in the heck am I going to figure out how to use this product? I started by browsing youtube tutorials and postings by others to get an understanding of it. I could not find a comprehensive tutorial that walked my through from start to finish on how to build a simple website. So I decided to share what I have learned, as I learn it.

I purchased Adobe Dreamweaver CS5. However, if you are wondering if this is the right product for you, you can download a free 30-day trial from Adobe. www.adobe.com/go/trydreamweaver/

Overview: I am going to create a simple 4-page site using the HTML template provided in Dreamweaver. Before I can do this, I have to create a new "site" location somewhere on my computer.

My first test site will showcase my hobby of making wedding cakes on the side. I will call it TexArtisan Cakes.

(Double-click images to make them bigger.)

Lesson 1
Here are my first steps after opening Dreamweaver:

1. From the menubar, click site, new site.  A pop-up window will appear. In the site name, type in your site name, in my case it is  TexArtisan Cakes. In the site location, create a folder on the local computer and also title it your site name, in my case it is TexArtisan Cakes. (see figures 1.0 and 1.1)
2. To keep the file structure nice and tidy, create two folders within your site file structure and name one Html and one Images. (see figure 1.2)

    Figure 1.0

Figure 1.1

Figure 1.2

    
Lesson 2
How to create your first webpage:

1. From the menubar, go to file, new.
2. A pop-up will open. Select HTML, 2 column fixed left sidebar, header and footer. Then click Create. (see figure 2.0)
3. Once the file is open save as index.html in your TexArtisan Cakes/HTML folder.
4. Your screen should look something like figure 2.1. Notice on the bottom right your file structure is indicated as your Site Name with HTML and Images underneath.

Figure 2.0

Figure 2.1

Lesson 3

How to use Adobe Kuler to create your color scheme:

1. Go to http://kuler.adobe.com/#create/fromanimage
2. Upload the image you are choosing to use for your logo. In my case, my color scheme will come from a picture of a wedding cake.(see figure 3.0)
3. Once you have selected your complimentary color scheme, save your scheme, and download it as an Adobe Swatch Exchange or ase. For example, I named my color scheme weddingbliss.ase.
4. You can use the colors as a reference for a general idea, or you can get the actual name of the colors by opening it in Adobe Photoshop and loading your swatches in the color palette.  (see figures 3.1 and 3.2)

Figure 3.0

Figure 3.1

Figure 3.2