7/27/2019 ART162 Tut Dw

1/2

76 Technique

02 Launch Dreamweaverand open both the index.html and

screen.css fles you copied rom the CD.

Continue by making sure index.html is

the active fle, and select File>Preview in

Browser>Fireox to open the fle in your

browser. You should now see the layout

o the portolio without styles applied.

01 Start out by copying the oldernamed working_fles and the code_

blocks.txt text fle rom your disc to your

computer. Next, visit jQuery.com and

download the latest production version

to the js older contained within the

working_fles older.

03 MinimizeFireox and return to

Dreamweaver. Right/

Ctrl+click anywhere

within the code viewand select CSS Styles>

Attach Style Sheet.

Using the new window,

browse and select

screen.css rom the

working_fles older.

Select Screen within

the Media feld, then

click the OK button to

attach

the CSS fle.

Dreamweaver CS3or later

New waysto presentyour images

Animating the imagesin your online portolio is a

snip i, like Anthony Zinni,you know which librariesand plug-ins to employ

While jQuery and similar JavaScript libraries have been

popular in the development community for some time now, the

technical nature of these libraries has typically left them outside

the role of the web designer. Luckily, there are developers willing to

share their code and simpliy the process or designers. One such

web developer is Alen Grakalic o cssglobe.com, who has created

the extremely easy-to-use and appropriately named Easy Slider

plug-in or jQuery.

This tutorial will teach you to use Easy Slider and a

couple lines o code to add sliding blocks o content or images to

your portolio quickly and easily. Once the script is installed and

unctional, we will use CSS to customise its appearance andimprove the usability o its Previous and Next buttons. Finally, we

will use the scripts confguration options to make the animation ft

the design more appropriately.

Anthony ZinniAnthony is a

Chicago-based artdirector and partnerat the design frmAssociaDirect. In hisspare time he likesto talk about graphicdesign on his blog,Positive Space. Findout more at www.associadirect.comand www.positivespaceblog.com

On the discThe fles you need orthis tutorial can belocated inDiscContents\Resources\Dreamweaver

Time needed1 hour

SkillsInstalling jQueryEasy SlidercustomisationCSS imagerollovers

Computer ArtsJune 2009 www.computerarts.co.uk

ART162.tut_dw 76 2/4/09 5:53:27 pm

7/27/2019 ART162 Tut Dw

2/2

77

05 The frst step in animating theportolio shots is to install jQuery. To do

this, copy and paste the frst section o

code rom the text fle you copied rom

the CD onto line 7, directly below the link

to the CSS fle. Because you downloaded

jQuery, it is important that the fle name

matches the one you downloaded,otherwise it will not work.

04 Return to Fireox and reresh the page to see thelayout o the portolio. Currently there is only one image, so we

will need to add more in order or the script to cycle through

them. To do this, fnd line 21 in index.html and duplicate it

twice. Change the source link o the image tags on these new

lines to the second and third sample photos and update theiraccompanying alt descriptions.

08 To see the slideshow inaction, return to Fireox and reresh thepage. You will notice that there is now

only one photo visible and that next to it

there is an arrow pointing down. I you

click on this arrow, the photo will slide

rom let to right and the upward-

pointing arrow will appear.

07 In order to fnish installingEasy Slider, you will need to add somestyles to the bottom o the Screen.css

fle. Switch over to the CSS fle and then

copy and paste the third block o code

rom the text fle onto line 129. These

styles set the appearance o the area or

the images, and set the placement o

the Previous and Next buttons used to

control the animation.

06 Installing the Easy Sliderplug-in is almost as simple as jQuery. To

install Easy Slider, copy and paste the

second block o code rom the text fle

onto line 8, just below the jQuery line.

Make sure to place this code below

jQuery, otherwise it will not work.

10 Finally, inorder to make the

script match our

design, we should

make the animation

move vertically. This

can be accomplishedby replacing line 11

in the index.html fle

with the fnal piece o

code in the text fle.

Return to Fireox and

reresh the page to see

the result.

09 The deault behaviour o the script is okay, althoughin order to make it more usable we should add rollover

animation to the arrows. This can be done by returning to the

Screen.css fle and copying and pasting the ourth block o

code onto line 172. This CSS code will make each arrow graphic

change when the mouse pointer hovers over it.

www.computerarts.co.uk Computer Arts June 2009

More on Easy SliderEasy Slider is such a great

script. Not only it is a quick and easy wayto add scrolling images to your portolio,but HTML content as well. For this reason

it has been used in a wide range oapplications. For more inormation onhow Easy Slider works or on its otheruses, visit http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider

ART162.tut_dw 77 2/4/09 5:53:28 pm