7/8 : Dreamweaver continued

Text Pop-Up on Mouseover:

A common part of modern web pages  are those  little text boxes that pop up when moused over. These are generated via the title attribute, written in the code of your Dreamweaver page.

1. Create a link in your Dreamweaver page. See notes  from yesterday.
2. Go into the Code or Split view.
3. Insert the title=”your pop-up content here’ tag within  the a href:

Example:

<a href=”http://www.adobe.com” target=”_blank” title=”Adobe Tutorials“>

4. Save /Preview in the Browser

Slicing Images and Creating Rollovers:

Slices are a way to divide an image up into smaller pieces in Photoshop. These slices are rectangular areas that, when placed in Dreamweaver, become cells in an HTML table that a web browser then pieces back together like a puzzle. Slices allow easy creation of rollovers within an image.

Slices are created using the Slice Tool in PS.

1. Open a image in PS. Check the pixel size and adjust accordingly to one of the generic monitor sizes listed in yesterday’s notes.

2. Use the Slice Tool to ‘cut’ around the area you plan on editing (ie: adding a rollover). The fewer slices the better; slices can only be horizontal!

3. >File >Save for Web and Devices

4. Save as a .jpg or .gif

5. In the “Save Optimized As” window: rename your new sliced file  “____.html” , choose Format: HTML and Images, Settings: Background Image, and Slices: All Slices. Choose “Save”. Make sure the file is saved to your Dreamweaver Root Folder.

6. A new .html file is created with the slices. Open the page in Dreamweaver.

7. Click on a piece of the image that has been sliced. Edit a copy of the slice in Edit: PS. Save this section with a new name.

8. To do a rollover, delete a selection and swap in the >Insert >Image Object: Rollover Image option.

9. Save/Preview in the Browser.

Videos from YouTube:

Insert Youtube video files into your Dreamweaver webpages  by copying & pasting a specific video’s HTML source code.

1. Go to : http://www.youtube.com
2. Search for a video to import (smaller file size better)
3. Drag & Copy (Apple + C) the “Embed” html code for that specific video, located on the right side of the window.
4. Go to Dreamweaver and paste (Apple + V) the HTML in the “Code” -or-”Split” window.
5. Preview it with the “Play” Button in the Properties Inspector

This code is an example from YouTube:

<object width=”425″ height=”344″><param name=”movie” value=”http://www.youtube.com/v/R3fa1KVU4vM&hl=en&fs=1″></param><paramname=”allowFullScreen” value=”true”></param><embed src=”http://www.youtube.com/v/R3fa1KVU4vM&hl=en&fs=1” type=”application/x-shockwave-flash” allowfullscreen=”true” width=”425″ height=”344″></embed></object>

Open Lab Today:

Continue with your Dreamweaver website project.

Due Thursday for upload to the CCSF server.

~ by idst120 on July 8, 2009.