Web Designer - Defining the internet through beautiful design » Dreamweaver

Animated eCards with HTML5

Mark Billen — Wed, 30 Jun 2010 08:30:13 +0000

Create seasonal animated eCards using the all new

Hail HTML5! With the advent of the

Animated eCards have traditionally been created with Flash. This is because there hasn’t really been any alternative that can offer the same degree of control, ease-of-use and browser compatibility. Happily there is now a usable alternative with a smaller code footprint, and the chances are you’re using a compatible browser already (only IE doesn’t yet support the tag). Part of the new HTML5 specification, the

Project files for this tutorial can be downloaded here.
This article was originally authored by Sam Hampton-Smith and featured within Web Designer issue 165

01 Create your canvas
Create a new web document and enter the code below. This code creates a basic HTML page with a simple

Seasonal Greetings

02 Basic shapes
The code we have got as a starting point includes a couple of functions in JavaScript that we’ll need throughout the tutorial. We’ll start off with something simple – we’re going to create a large rectangle of colour to fill our canvas area. Add the following code inside the draw() function:

var lingrad = ctx.createLinearGradient(0,0,0,400);
lingrad.addColorStop(0, ‘#4280c3’);
lingrad.addColorStop(1,
‘#45bbed’);
ctx.fillStyle = lingrad;
ctx.fillRect (0, 0, 600, 400);

03 Loading images
The object named ctx represents our canvas, and to interact with the canvas we need to call methods associated with that object. The code you just added calls the fillRect method which created a filled rectangle with the gradient we created in the lines above as the fill. Let’s do something a little more ambitious. Add the code below to load in a snowflake image (you’ll find these images ):

var img = new Image();
img.onload = function(){ ctx.
drawImage(img, 100, 100); }
img.src = “WFlakeBig.png”;

Create a vertical tabbed panel with Spry

Mark Billen — Mon, 10 May 2010 16:33:40 +0000

The Spry Tabbed Panels widget eliminates the need to code. Here we demonstrate how to change the tab orientation and style with CSS

The beauty of multi-tabbed windows is that designers can cram lots of information into a single space. However, creating such an element involves coding. A frightening thought for non-developers, but Dreamweaver eases the burden with the assistance of its Spry Tabbed Panels widget.
The Tabbed Panels widget provides all the necessary assets, JavaScript, HTML and CSS, needed to add tabbed elements into a page. The initial set up is basic, it provides a simple, horizontal, set of tabbed panels with minimal styling.
The accompanying CSS file includes a set of classes that instantly set the orientation of the tabs from horizontal to vertical. This provides the basis of a vertical tabbed panel. To take the widget beyond its standard state the CSS can be modified to change background colours, hover states, fonts and add new content. This tutorial is going to demonstrate how to create the vertical tabs, restyle, add background images and integrate related content to create a much more stylised widget.

(This tutorial orginally appeared in Web Designer issue 163, authored by Steve Jenkins)

01 New class

The Spry Tabbed Panels code needs to be added. Place the cursor and head to the Insert menu and select Spry>Spry Tabbed Panels and save. The first line in the HTML code contains the div id and class. Change the class from

and save.

02 More tabs

Place the cursor over the current tabs to reveal the blue Spry Tabbed Panels tag and click. The Properties window will revert to Tabbed Panels. Click ‘+’ to add another tab, repeat for each tab. Use the up and down arrows to reposition the currently selected tab. Now select the default tab from the Default panel drop-down list.

03 Change orientation

The tabs are still effectively normal tabs placed to the left of the content. To create vertical tabs, first double-click .VTabbedPanels .TabbedPanelsTab in the CSS panel and select Box. Now add a height and width, ie 25 pixels wide by 325 pixels high and set Float to left so they sit side-by-side.

Create an image viewer with Spry

Mark Billen — Mon, 12 Apr 2010 10:18:38 +0000

The latest release of the Adobe Spry framework allows designers to create dynamic content the easy way. Here we demonstrate how to create a dynamic image viewer

The introduction of the Spry framework into Dreamweaver has brought a whole new level of dynamic possibilities for web designers. The framework is essentially a collection of assets that includes JavaScript files, CSS examples, effects, widgets and much more which can be integrated into static HTML pages.
This tutorial looks at introducing a couple of JavaScript files, xpath.js and SpryData.js, into the head of a page. These provide all the necessary JavaScript code already tried and tested, eliminating the need for designers to write long streams of code. Alongside this, we will show you how to add a data source, in this case an XML file, and use a number of Spry elements to pull information from the data source.
This tutorial is based on two div tags, one to contain the thumbnail images and the other to contain a full-size version of the chosen thumbnail. We will also give some tips on how to style and position the thumbnails and integrate into a standard static HTML page.

This tutorial originally appeared in Web Designer issue 154, authored by Steve Jenkins

01 Get ready

Before indulging in any Dreamweaver activity users will need to download the Spry framework for Ajax and create an XML file containing the image information relating to the thumbnails and full-size images needed for the gallery. The latest version of the Spry framework can be found via the Adobe Labs page at http://labs.adobe.com/technologies/spry/. Download the framework – the file is a zipped file – unzip and place the folder in an easy to access location, ie on the desktop, for the time being. We shall come back to the Spry framework folder later in the tutorial.

02 Images

The images to be used in the gallery come in two forms, thumbnail and full-size image. The thumbnails will appear in a separate absolutely positioned div tag and when clicked will display the full-size image in another absolutely positioned div tag. For the purpose of this tutorial all full images are going to be cropped and resized so that they all have the same dimensions. This is not essential, but will give the gallery a uniform look. To complete the image line-up open the image editor of choice and resize all images to the desired dimension. Now return to the newly resized images and create the thumbnails. The full-size images can be simply resized, ie 90 x 90 pixels, to fit the thumbnail gallery, But if the images are a different perspective they will look stretched. Alternatively, the thumbnails do not need to be square. They can retain the same shape as the full-size images. For this tutorial we have made the full-size images 437 pixels x 261 pixels and the thumbnails 135 x 135 pixels. Save the full images into a folder called images and save the thumbnails into a folder called thumbnails.

Scale an image to the browser window

Mark Billen — Fri, 09 Apr 2010 10:58:29 +0000

We show you how to combine absolute positioned Div tags with a scalable image as a background for all screen resolutions

Background images have become a constituent component of the webpage building process. However, they are limited in their approach and users can only display a single instance or repeat across a single tag. Taking an image away from its background status allows designers to scale an image to fit a browser window whatever its size. The procedure for creating a scaling image is relatively simple, but it brings with it other issues. The image is not placed in the background but is inserted directly into the tag. Consequently, web designers will not be able to place or position standard div tags over the image.
The workaround for this is to call AP div tags into action. These can be positioned wherever a designer wishes, effectively making the scaling image a background image. Here we show how to create the scaling image, add AP div tags and give them liquid dimensions.

This tutorial originally appeared in Web Designer issue 162, authored by Steve Jenkins

01 Choose an image

The first and perhaps most important step is choosing the right image. The image composition must be relatively uncomplicated to make sure it does not distract users from the page content. The dimensions need to be relatively large, eg 1400×1000 pixels and demonstrate the approximate proportions of a computer screen.

02 Image preparation

Open the selected image in an image editor and crop the image to include/exclude the desired elements. Now resize (Image>Image Size) the image making the width around 1500 pixels wide while keeping the aspect ratio. Finally, go to File>Save for Web & Devices and reduce the file size, ie JPEG at 50 per cent, as much as possible.

03 Create #imagewrapper

Create a new HTML page (File>New>HTML>None>
Create) and head to Modify>Page Properties and set all margins to zero. Add a new div tag called #imagewrapper (Insert>Layout Objects>Div Tag>New CSS Rule). Choose the ID Selector Type, add the name and press OK, select Box and set Height and Width to 100% and click OK.

04 Insert image

First delete the Content for id “imagewrapper” Goes Here text inside the div tag. Now head to the Insert menu and select Image, locate the image and add to the #image wrapper tag. Now save the page. Select the image and set the Width and Height in Properties to 100% and save. Now press F12 to preview in the default browser.

Create CSS speech bubbles

Steve Jenkins — Tue, 02 Mar 2010 10:50:55 +0000

COMMENTS ARE A STAPLE DIET OF TODAY’S BLOG. HERE WE SHOW YOU HOW TO GIVE A COMMENT CREDENCE AND STYLE WITH THE HELP OF CSS

COMMENTS PROVIDE THE perfect riposte for blog viewers, they provide the platform for visitors to say exactly what they want. And what better way to illustrate written comments than with pretty-looking speech bubbles. The premise of using speech bubbles is that they immediately suggest that the text is an opinion from a user. Plus, web designers being web designers they need to look the part as well. So, speech bubbles are not only effective from a design perspective they are functional as well. This tutorial looks at using div tags and CSS to create a selection of different styles and formats all from the some base code. The basis of the code is two div tags, one to contain the background, border and text and the other to contain the pointer image, commentator title and date. The background image is relatively positioned to ensure that it lines up with the other div tag to create the illusion of a single speech bubble.

Originally appeared in Issue 165

01 Insert div tags

Open a new blank page via File>New>Blank Page>HTML>Create and save with a relevant name. The standard speech bubble consists of three div tags. Insert the first via Insert>Layout Objects>Div Tag>OK and add another on a separate line. Now place the cursor inside the first set of div tags and add another div tag.

02 Create classes

Now remove all the default text, this will leave three sets of empty div tags. Now go to Format>CSS Styles>New to create a new class. Select Class from the Selector Type drop-down list, add a name, ie speechbubble, and press OK and OK again to create an empty class. Now repeat for the other two div tags.

03 Apply classes

Select the opening and closing tags for the first div tag, this will include the second set, and select speechbubble from the Class list in the Properties window. This applies the class speechbubble to the first set of tags. Now select the second set and apply the comments class and finally select the third set and apply the commentator class.

04 Font

Double-click .speechbubble in the CSS Style panel to open the CSS Rule definition window. Now select the desired font, Arial, Verdana, Georgia etc, from the drop-down list and select a font size and colour. Try 1.2em for a flexible font size or 16 pixels for a fixed font size. Experiment to suit your needs.

05 Bubble width

Now select the Box category and define the width of the div tag. There are several options here. Use a percentage, ie 80% if the bubble placement is in a liquid layout. If using this option add in the min-width tag, ie min-width: 200px, so the text is still easy to read, Alternatively, use a fixed width, ie 450 pixels.

06 Border and background

The next step is to define the border and background. Click Background and select a background colour from the palette. Now click Border and define the border for the bubble. To get started try a solid border with a width of one pixel. Choose a colour that compliments the background colour and press Apply and OK.

07 Add text

To view how the speech bubble will render add in some dummy text between the comment div tags. Make sure there is enough text for at least two lines. Note that the text is tight to the border, open the .comment CSS Rule definition window and add in ten pixels of padding for all sides.

08 Commentator text

Now add some dummy text to the remaining, commentator, div tag to bring into view. Double-click commentator, select Box and add some padding, eg Top: ten pixels, Left: ten pixels to position the commentator’s name. Head back to Type to determine the font size, style etc if different to the bubble font options.

09 Margins

Currently, there is a single instance of the speech bubble on display. However, if to be used to style comments there needs to be some breathing space between each comment. Add in a 20 pixel bottom margin to the commentator tag and press Apply and OK. This will vary depending on style, modify to suit.

Design floating pages using large fixed background images

Steve Jenkins — Sun, 27 Dec 2009 08:30:40 +0000

BACKGROUND IMAGES ARE A STAPLE DIET OF WEBPAGES. HERE WE ADD THE FIXED ATTRIBUTE TO CREATE THE ILLUSION OF FLOATING PAGE CONTENT

BACKGROUND IMAGES ARE an integral element of the web design process. They provide a one-step process to creating immediate and beautiful graphics. Typically, they are used as repeating backgrounds to compensate for screen resolutions, header and background graphics in blogs and the basis for buttons, tabs and boxes. This tutorial is going to go beyond standard practice and demonstrate how to use a single large background image and add the fixed attribute to keep it static. The background image is placed within the body tag which means that any div tags will effectively float above the background. When the scrollbar is called into action the content of the page scrolls up and down as normal but the background image remains in place. Finally, with the creative use of anchors and section headers, users get to jump to the desired section with the logo always on display.

Author: Steven Jenkins | Originally appeared in Issue159

01 Killer background image

For the style of page to be created in this tutorial the background image is effectively the key component. The background image will go on to determine, to a certain extent, the layout and colour scheme of the rest of the page. When looking for an image try to find something striking, relevant and not too over complicated. Busy images work well in specific situations but often only distract from the content on the page. Another consideration is the size and resolution of the background images. First the image needs to be 72 dpi, the web standard. If purchasing an image make sure to check the dpi. Secondly, the size is very important. Screen resolutions are a major consideration, so there is no point in using an image that is less than 800 pixels wide. This would lead to a lot of a one-colour background on show or an unwanted repeating background. The ideal choice is to get an image that is at least 2,000 pixels to compensate for all backgrounds. Alternatively, create a gradient blend on the edges of the background image using a colour that will match the chosen background. The background image used in the tutorial can be found at http://www.istockphoto. com/stock-photo-4017930-milk-in-fridge.php.

02 Create and place title
The original dimensions of the background image used in this tutorial were 3,446×2,267 pixels at 300 dpi giving a whopping file size of 4.85MB. Using Photoshop we saved the image as 72 dpi and trimmed down the image dimensions to 1,900 pixels wide and 1,009 pixels high. This was to get rid of areas of the image we didn’t want to include. For example the top of the image had too much detail so we cropped this out. With the dimensions of the image in place the next step is to incorporate the title and tagline of the website into the background image. In our example we choose to line up the top of the title with the top of the milk carton and to the left. The title itself was placed to give space to the left and above and give us an approximate working area of 1,000 pixels. The milk carton was to be used almost like a sidebar and give the page a static focal point. Finally, the title was styled up and some accompanying graphics were put in place to create the logo. The background image is now ready to be placed into a page.

03 Fix it

Once all the elements of the background image have been created the next step is to incorporate it into the page. Create a new file and save ready to populate. Now head to the Text menu and select CSS Styles>New to open the CSS Rule window. Now select the Tag Selector Type, choose body from the Tag drop-down list, Define in (New Style Sheet File) and press OK. Now give the style sheet a name and press Save to open the CSS Rule Definition window. Select Background, click Browse and locate the background image created previously and press OK. Ideally, this should be in a folder called images under the root folder. Next it is time to create the fixed background image. This is achieved by simply selecting fixed from the Attachment drop-down list. Now switch to the Box category and in the Top text box under Margin add a zero. This will set all the margins to zero. Now press OK to complete.

04 Create wrapper

With the background image in place it is time to start adding the div tags to create the layout. First, a tag is going to be added to contain all the content and give a framework to work within. Go to Insert>Layout Objects>Div Tag to open the Insert Div Tag window. Now click New CSS Style, select the Advanced Selector Type, give the tag a name (preceded by the hash symbol), ie #wrapper, Define in the style sheet created previously and press OK to open the CSS Rule Definition window. Now select the Box category and add the following: Width: 1,200 pixels, Height: auto, Left under Margin to 330 pixels and Right to auto and press Apply and OK and OK again. The left margin is set to 330 pixels to ensure the content will line up with the background image used in the tutorial. This, along with many of the other measurements used throughout this tutorial, are open to interpretation depending on the background image used. Now save the appropriate file, this will be the HTML or CSS file depending on the additions/changes made.

05 Page header
Before adding further div tags, add a comment next to the closing #wrapper div tag. Place the cursor immediately after the closing tag and go to the Insert menu, select Comment and add something like closing #wrapper tag. This should be applied across all div tags in the code, making it easier to find specific closing div tags when necessary. Now delete the text, Content for id “wrapper” Goes Here, within the #wrapper div tags, place the cursor between the opening and closing tags and create a new div tag called #header. Make the tag 100 pixels high, 1,185 pixels wide with a 15 pixel padding top and left. Now select the Border category and uncheck all checkboxes. Now select dashed from Bottom, make the width 1 and the colour white. Remember to comment the closing div tag and indent the code. It should look something like this:

06 Columns container

In Split (or Code) view place the cursor after the header comment and hit three returns to create space for the new code. Now head to the Insert menu and create a new div tag called #columns. Select the Box category and make the width 875px and set the height to auto. This will allow the tag to expand as new content is added. The top margin is set to 225 pixels to position it exactly in the desired position. Switch to Border and add a 1- pixel dashed white border to the top of the div tag. Now save the page and preview in browser (File>Preview in Browser) or via the F12 shortcut. This will frame the logo on the background image, giving it more impact.

07 Left and right columns

Delete the default text within #column tags, place the cursor between the tags and add three returns to create space for the new div tags. Now create a new div tag called #leftcol. Select the Box category and set the width to 375px, set the height to 470 and set the float to left. To create space we have added a 20px top margin to move the tag away from the previous tag and added 10px padding to all but the top. Finally, the background colour has been set to white. To accompany the #leftcol a #rightcol is going to be created. This will boast the same attributes as the leftcol but float to the right. To create the right column, we are going to copy the code for #leftcol tag. Select all the #leftcol code including the comment and copy (Ctrl/Cmd+C) and paste (Ctrl/Cmd+V) on the line underneath. Now change the code:

Content for id “leftcol” Goes Here

to the following:
Content for id “rightcol” Goes Here

Now switch to the accompanying CSS file and copy all the code for the #leftcol tag. Paste directly underneath and change the name to #rightcol and float: from left to right and save.

08 Quick code creation
There is now effectively a set of right and left columns which are ready to be populated. To create uniformity throughout the page, the code for both tags is going to be copied and pasted as many times as needed. Copy all the code for both tags, again including comments. Now create a space for the new code, after the rightcol comment, and paste in the code, repeat until complete. Now save the page and Preview in Browser to see it in action.

09 Section headers

Now it is time to split up the sets of left and right columns with a section header. The purpose of the section header is that it will allow the logo (on the background image) to been seen when each section is viewed. First, place the cursor after the first rightcol code and create space for the code. Now head to the Insert menu and create a new div tag called #section. Set the height to 280 pixels, the width to 875 pixels, float: left and add a top margin of 25 pixels. Now select the Border category and set the top border as a solid four-pixel white border. Now set the bottom border as a dashed 1- pixel white border. Now switch to Background where we are going to add a small graphic to accompany the title that is to go in the section header. Press Browse, select the image and press OK. Now set Repeat to no-repeat, Horizontal position to right and Vertical position to top. This will place a single instance of the image in the top-right corner of the tag. Now copy and paste the code after every instance of #rightcol except the last one and save the page.

10 Add a footer

To finish off the page a footer needs to be added. Place the cursor immediately after the closing comment for the #columns tag and hit three returns. Now go to the Insert menu and create a new div tag called #footer. Set the height to 100px, the width to 865 pixels and float to the left. To finish up the #footer tag add a dashed 1-pixel white border. Padding and margins will be added at a later date.

11 Header tags

With the layout tags in place it is time to start adding content. The first content to be placed on the page are the navigation links across the top. Add the text between the #header tag. To style the text go to Text>CSS Styles>New, select Tag, h1 from the Tag dropdown list and press OK. Now select the font, size and colour and change the line-height to 0. We have used Verdana at 40 pixels with a light blue colour (#BED2EA) and set the weight to lighter. To position the link text add 15 pixel padding to the top of the tag. Now place the opening and closing h1 tags,

, either side of the text. This styled text is going to be links so we are going to create a link style which will determine the colour and the link style. Switch to the CSS file and add the following:

h1 a { color: #FFFFFF; text-decoration: none;} This will make the link white and remove the underline. Now add the following code directly underneath: h1 a:hover { color: #FFFFFF; background-color: #BED2EA;}

This will change the link so that it has a coloured background when the mouse cursor is placed on the link.

12 Create content

The next stage is to add the necessary content for each of the columns created previously. Each column is to contain a title, an image and the relevant text. The title will include a new class and h3 tag to style, the images will be set to a uniform size and the body text will also be styled. To start, add the desired title, replacing the default text. Immediately after the title insert an image (Insert>Image) and finally place all the text after the image.
Now repeat this process for all the boxes added previously, remembering to save (Ctrl/Cmd+S) at regular intervals not to lose any content in case of a computer crash. Once complete, double-click body in the CSS panel to open the CSS Rule Definition window. Now select a font, size and colour, we chose the following: Verdana, 22 pixels and grey (#666666) with the weight set to lighter. This will style all text on the page. To style the title, first create a news class, Text>CSS Styles>New, set Selector type to Class, give it a name and press OK. Once again select the font, size colour etc. Our example uses the font Corbel at 30 pixels in a sky blue (#3399FF) with the weight set to lighter and the line-height set to zero. Now select each title and apply the new style via the Style drop-down list in Properties. This will make the title look odd but add opening and closing h3 tags to each title, eg

Get a grip on reality

and it will slip back into place.

13 Add in anchors

Now it is time to create the section header titles. Go to each #section div tag and change the default text, Content for id “section” Goes Here, and change to the desired title. Now add the text back to top next to each title. Now create a new class to style the section title text. Go to Text>CSS Styles> select Class, name the class, ie headertitle and select the desired font, size, colour etc. Now apply the new class to all the section titles. Now it is time to create the link between the navigation at the top of the page and the relevant section. To do this anchors are going to be used; these will take a user straight to the relevant section. But first the anchor points need to be created. To ensure that the anchors work as intended, for this style of page, a spacer tag needs to be added. Place the cursor immediately after the end of the first rightcol tag. Hit a few returns to create space for the new code. Now create a new div tag, call it spacer and make it 875 pixels wide, 32 pixels high and float it to the left. Now copy the code and place after each rightcol tag and before each section tag. Now click inside the first spacer tag and go to Insert>Named Anchor, add a name, ie Features, and press OK. Repeat for all spacer tags.

14 Create navigation

Now head back to the top of the page and select the text that is to link to a section. For example, select the Features text and in the Link text box in the Properties window first add a hash symbol and then the name of the anchor that the link is to jump to, ie #features. Now repeat this for all the links. Save the page to make sure they all work and there are no spelling mistakes in the link box. All the links now jump to the right section, but to avoid having to scroll back to the top of the page every time another anchor is to be added. Immediately after the opening #wrapper tag insert a new named anchor called top. Now go to each instance of back to top, which should be next to section title, select and add #top in the Link text box in the Properties window.

15 Tidy up
To finish, a few final adjustments needs to be made. First add a set of h2 tags to each section title, ie

// Features // back to top

. This will cause the back to top text to be restyled so create a new class to style as desired. The footer needs to be populated and any margins and padding added. Double-click #footer in the CSS panel and add 10-pixel padding and a 25-pixel margin to the top and 30-pixel margin to the bottom. The margins help position the comment section header. Finally, the text in the footer will default to the style defined in the body tag. Head to Text>CSS Styles>New and create a new class and set font, size colour and so on. We have chosen Verdana at 11 pixels and dark grey (#333333). Finally, check through the HTML code so that the div tags are indented and there is space between the major blocks of code making it easy to read.

Build an AJAX search bar

Steve Jenkins — Thu, 15 Oct 2009 08:30:14 +0000

THE SEARCH BAR HAS BECOME A FIXTURE OF MODERN WEB DESIGN. LEARN HOW TO MAKE YOURS STAND OUT USING AJAX AND JQUERY’S EFFECTS

CREATING AN EFFECTIVE search bar can be tricky. There are lots of features that have become pretty widespread but are difficult to implement. We’re going to create a bar that
has it’s own custom button that integrates with the bar, slidedown live results from an AJAX script and a helper hint that vanishes when you come to use the search bar. As the basis
for our searching, we’re going to be using the MySQL World Database, a sample database provided by MySQL that contains information on cities and countries. We’re going to use this to
create an city search for a travel agent-style website.

Author: Andy Leon | Originally appeared in Issue 159 | Download Tutorial Files

01 Design and slice

In Photoshop, create your search box. We made a box with a single pixel border, inner and outer shadows. We then overlaid an icon of a magnifying glass that will be our button. We
then slice it into two images and save them as “search_box.png” and “search_button.png”.

02 Create the HTML doc
Open Dreamweaver and start a new HTML document. Make sure the encoding is set to UTF-8 so that the various extended characters that make up the names of foreign cities are
rendered correctly. Insert a

, with a inside, and add two

tags with IDs “SearchBox” and “SearchButton”.

03 Style Divs
In the style section of your document, style the first

to show your search box image.
Set the “height” and “weight” attributes of both to match those of the images. Set the
“float” attribute to “left” so that they line up left-to-right. Add an tag with type
“image” and the “src” attribute set to your button image.

#SearchBox {
background: url(‘images/search_box.png’);
float: left;
height: 60px;
width: 305px;
}
#SearchButton {
float: left;
height: 60px;
width: 70px;
}

04 Add an input box
Add an tag inside the “SearchBox”

so that the user can enter the text they want to search for. Set the “name” and “id” attributes to “SearchInput” and the “value”
attribute to “City Search” – this will appear when the page loads so the user knows what the search box is for.

05 Style the input box
Now style “SearchInput” so that it blends in with the images. Set the “background” and “border” attributes to none so they don’t show. Increase the font size so it matches the size of the image and then adjust the margins to centre it. Set the “outline” property to “none” in order to get rid of that blue glow that some browsers add when you click into an input box. Finally, change the “color” attribute to a light grey so your “City Search” hint text doesn’t look like search text.

#SearchInput {
background: none;
border: none;
color: #999999;
font-size: 16px;
outline: none;
margin: 20px;
width: 280px;
}

06 Add search results
Add another row to the table and place a

tag in the cell underneath your search box to hold your search results. For the best browser compatibility, add another

inside
this one, which has the ID “SearchResults”. You can then style the inner div to float over the top of the rest of your content and use relative positioning on the outer div to bring it close to your search box.function repeater() {.

07 Style the search results
Style your “SearchResults”

by adding a “background” and “width” attribute. You need to set the “position” and “z-index” attributes so it floats above other content. Set the “overflow” attribute to “auto” so that it will expand to fit however many search results there are. Finally, set the “display” attribute to “none” so that it’s hidden when the page loads.

#SearchResults {
background: #000000;
display: none;
overflow: auto;
position: absolute;
width: 330px;
z-index: 99;
}

08 Focus
Now your structure’s in place, you can start adding some JavaScript, starting with the focus event, which fires when the user clicks or tabs into your search box. You only want to do
two things here – remove the “City Search” text if it’s there, and change the CSS “color” property so that the user is typing in black.

$(“#SearchInput”).focus(function() {
if($(“#SearchInput”).val() == “City Search”) {
$(“#SearchInput”).val(“”);
}
$(“#SearchInput”).css(“color”, “#000000”);
});

09 Blur
The opposite of focus is the blur event. In this function, check to see what the value of the “SearchInput” box is. If there’s nothing there, add the “City Search” text back in and change the CSS “color” property back to light grey. Finally, use jQuery’s slideUp() function to hide search results if they’re showing.

$(“#SearchInput”).blur(function() {
if($(“#SearchInput”).val() == “”) {
$(“#SearchInput”).val(“City Search”);
$(“#SearchInput”).css(“color”, “#999999”);
}
$(“#SearchResults”).slideUp();
});

10 Catching key presses
Your third function is attached to the keydown event and is used for trapping keyboard actions. Your event comes through as “e”, and you can use the “which” property to identify which key was pressed. Test the “which” property for the value 8 (corresponding) to the backspace key. If this is the case, trim one character off the end of the search text, for all other cases add the character corresponding to that key code. Then call our AJAX page through the load() function, putting the results in your SearchResults

. Then call the slideDown() function, to make sure your results are showing.

$(“#SearchInput”).keydown(function(e) {
if(e.which == {
SearchText = $(“#SearchInput”).val().substring(0, $(“#SearchInput”).val().length-1);
}
else {
SearchText = $(“#SearchInput”).val() + String.fromCharCode(e.which);
}
$(“#SearchResults”).load(“ajax.php”, { SearchInput: SearchText });
$(“#SearchResults”).slideDown();

11 Create our AJAX script
Create a new PHP document and save it as “ajax.php”. Call the necessary mysql_connect() and mysql_select_db() functions to get access to the database tables. Then check to make sure that you’ve got “SearchInput” in the $_POST array and put that in a variable called $SearchInput, converting it all to lowercase as you do so.

mysql_connect(‘127.0.0.1’, ‘root’, ‘password’);
mysql_select_db(‘world’);
if(isset($_POST[‘SearchInput’])) {
$SearchInput = strtolower($_POST[‘SearchInput’]);

12 Run the query
Use your $SearchInput variable to construct a query that searches through the database and brings you your results. In this query you’re using a descending sort on the Population field with a limit of ten. This way, when searching you’ll only get the ten biggest cities that match our search text.

$Cities = mysql_query(‘select * from City where Name like “%’.$SearchInput.’%” order by Population desc limit 10’);

13 Step through the results
Then use the mysql_fetch_assoc() function to step through the results and output them as links, but there’s more to do inside this loop. You need to use utf8_encode() on the city name to cope with foreign characters. Also use str_replace to wrap each occurrence of your search text in a , with the class “highlight”. Do this twice, the second time using the ucfirst() function to preserve any capital letters. Finally, add a comma and the country code to the end.

while($City = mysql_fetch_assoc($Cities)) {
$Name = utf8_encode($City[‘Name’]);
$Name = str_replace($SearchInput, ‘’.$SearchInput.’’, $Name);
$Name = str_replace(ucfirst($SearchInput), ‘’.ucfirst($SearchInput).’’, $Name);
$Name = $Name.’, ‘.$City[‘CountryCode’];
echo ‘’.$Name.’’;

14 Add the highlighting
Finally, add some additional styling to your HTML page so that the “highlight” class is displayed in blue. This means that your search text shows up in your results. It’s up to you what to do with the search results once you’ve got them. Change the “action” attribute of the to provide a search page or change the “href” attributes of the tags in our “ajax. php” file.while($City = mysql_fetch_assoc($Cities)) {. The full code for this step can be found on the cover disc, titled step14code.txt. We’ve included a snippet below for reference.

#SearchResults a {
color: #FFFFFF;
display: block;

Create high-impact portfolio pages

Steve Jenkins — Sun, 30 Aug 2009 10:35:22 +0000

THE WEB PROVIDES THE PERFECT OPPORTUNITY TO SHOWCASE YOUR TALENTS, PROVIDING GLOBAL 24/7 ACCESS. HERE WE SHOW YOU HOW TO CREATE A SIMPLE HIGHIMPACT ONLINE PORTFOLIO WITH CSS

WEB DESIGNERS NEED to get their work seen and a high-impact portfolio page is ideal for showcasing your talents. Web design is very much about the aesthetic but it is also about standards. Both elements need to be taken into careful consideration when creating any kind of online portfolio.
Before delving into the design, consideration should be given to what information is to appear in the portfolio and how it should be presented. The obvious elements are a
header/logo promoting the portfolio and screenshots and text of a designer’s work. The current trend for portfolio pages is to keep the text to a minimum and use images to create the impact. How the elements are laid out will also influence the viewer. A popular concept is to adopt the style often seen in blogs, with repeating elements appearing in a single stack. This gives immediate impact to the item on show and focuses the viewer’s attention and this is the technique we have chosen to focus on for this tutorial.

Author: Steven Jenkins | Originally appeared in Issue 157
Download Tutorial Files

01 Determine dimensions
Before delving into the details of the code needed to create the portfolio layout, a few decisions need to be made. First, the dimensions of any screenshots or images need to be determined. Assuming that the layout is to be a two-column affair with an approximate width of 1,000 pixels, 700 pixels would make an ideal width. Of course, this is open to interpretation and can be modified to suit specific requirements. A good guideline is approximately 75 per cent of the page width for a two-column layout and 50 per cent for a three-column layout. With the width set the next step is to decide whether or not to determine a uniform height. This will give a portfolio consistent viewing, but choosing a random height may best suit the image.

02 Create header
To start the creation process open the image editor of choice. For this example we have chosen to use Photoshop. The header can contain whatever elements you choose, but as a guideline it shouldn’t be too content heavy. We are going to create a header that first, matches the overall width of page. The background is going to be white and will include a logo, or similar graphical element, and as the page is specific to your portfolio include your name and contact details. There is no point in hiding obvious details, unless you want to appear mysterious, but this negates the point of the page. Finally, as with any images created for the portfolio, strike a balance between image size and quality. There is no point in creating an image that takes an age to download. Potential visitors, customers and employers will be gone if they have to wait for a large image to download.

03 Create basic CSS

For the purpose of this tutorial we are going to create a simple two-column layout. The layout will consist of a header, left column (75% wide), a right column (25% wide) and a footer all inside a wrapper. Note this can be easily modified to switch the column placement (see step 5) . To get started head to Dreamweaver and create a new file (File>New>HTML>None). Now add the wrapper tag, Insert>Layout Objects>Div Tag. Now click New CSS Style, choose the Advanced Selector Type, give it a name, ie #wrapper, Define in (new Style Sheet File) and press OK. Name the style sheet and press Save to view the CSS Rule Definition window. Select the Box category and add the desired Width:, ie 1,000 pixels. Now click the Same for all checkbox under Margin and set Right and Left to auto and press Apply and OK and OK again to add the new tag. This will place the wrapper, or effectively the page, in a central position whatever the resolution of the monitor the page is being viewed on.

04 Header tag

The next step is to add in the header div tag to place the header image. Using the Split view, select the text (Content for id “wrapper” Goes Here) within the div tags and delete. With the cursor between the wrapper div tag go to the Insert menu and create a new div tag as shown previously. Name the tag #header and make the width 1,000 pixels and add a height. This will be determined by the dimensions of the header image, eg if the image is 150 pixels high the header tag should also be 150 pixels in height. Alternatively, as the tag is going to be contained within the wrapper the width can be set to 100%. With the header tag in place, head to the Insert menu to add the previously created header image. Now save the page and hit F12 to preview the page.

05 Columns

The portfolio is set to contain two columns. To create the left column, using the Split view, place the cursor on a new line after the closing wrapper tag. Now create a new div tag, Insert>Layout Objects>Div Tag, and name it leftCol, or something similar, and head to the Box category. Set the width to 75%, the height to auto and select left from the Float dropdown list. Now press Apply and OK and OK again to add the new div tag. Now follow the same procedure to add the right column, we have named the tag #sidebar. However, this time set the width to 25% and the Float to the right. The width of both columns can be easily adjusted by simply changing the current width, eg 75% to 80%. Remember, when using percentages as the unit of measurement, all should add to 100 per cent or less. The width for both columns can be set to a total of 95 per cent, if desired, eg leftCol 75%, sidebar 20%. This would leave a five per cent gap between the columns effectively creating a margin or padding without the need to add via the CSS. This step creates a right-sided sidebar. To swap the main column and the sidebar simply change the float position on each tag, eg left becomes right and right becomes left.

06 Footer
To complete the basic building blocks of the portfolio page a footer is going to be put in place. Using the Split view, place the cursor on a new line after the closing sidebar div tag. Now go to the Insert menu and create a new div tag and this time name it footer. Set the width to 100% to ensure that the tag fully occupies the wrapper tag. The footer will need to be floated to the left. Without floating the footer to the left it will change position depending on the content in the columns.

07 Comment code

Before populating the div tags created so far, it is a good idea to comment the tags to help identify when the page is populated. This is extremely useful for identifying the closing tags of a tag set. This helps to avoid confusion later on, should any new elements need to be put into place. Using the Split, or Code, view, place the cursor at the end of the closing header tag, . Now go to the Insert menu and select Comment, this will add the necessary syntax to create a comment. Now add a relevant and descriptive comment, eg closing #header tag. Repeat this process for all the div tags created so far.

08 Prepare the portfolio

The elements of the portfolio are to appear in a single stack of image and text. There are several options for adding the content to the main column. We have chosen to create a new div tag to contain the contents of a single instance of a portfolio item. This gives us more control over margins, padding and so on and also allows for the inclusion of a border to create a separator without adding an image. Place the cursor between the opening and closing LeftCol tags, head to the Insert menu, create a new div tag and give it a relevant and easily identifiable name, ie #portfolio. Make the width 700 pixels and set the height to auto. We have added a 15-pixel top margin to create spacing between each portfolio item and a 15-pixel left margin to line up the tag with the header. Again, these are open to interpretation. To separate the different elements we have also added a one pixel dashed bottom border. Again this is open to interpretation, choose a different border width, style, colour and so on. Now select and copy the portfolio tags, place the cursor on a new line and paste in the portfolio div tag as many times as needed. Five is a reasonable number, but if more is needed add as desired. Around ten should be the max otherwise the impact of the portfolio will become diluted.

09 Start creating

The basis of the portfolio is now in place and each instance of the portfolio div tag is now ready to be populated. Place the cursor between the opening and closing tags of the portfolio tag, head to the Insert menu and add the image for the first instance of the portfolio. Remember to add the Alternative text and press OK to insert. To compliment the portfolio image the title of the work is to appear above the image and a brief description of the work done on the project underneath. Insert the cursor immediately after the opening portfolio tag and type in the appropriate title. Now place the cursor immediately before the closing div tag and type in the desired description.

10 Title style

The text added in the previous step is currently lacking style and positioning. To style the text create a new class via Text>CSS Styles>New, select Class, give it a name, ie titletext and define in the currently attached css file. Under the Type category select the desired font, size, style and colour and press Apply and OK. Now select the title text and select the newly created style from the Style drop-down list. To create spacing and placement of the title add a set of paragraph tags

either side of title text. Now save the page and preview in the browser (F12).

11 Description

The accompanying description needs to be styled, which can be achieved in a number of ways. First, create a class with the necessary font, style and so on, select the text and apply the new style. Alternatively, open the body tag via the CSS panel and create a base font style. Again, to create spacing and placement add a set of paragraph tags around the description text. This is the first portfolio element finished, now repeat the previous steps to create all the desired elements that are to appear in the portfolio, ie images and text. Now save the page and preview in the browser.

12 Biography

The main element of the portfolio is now in place, so it is time to start populating the sidebar. The first element to add is a short biography. To start creating place the cursor between the sidebar tags and add the text. Include a title to give the text more impact. Pressing the return key will add the necessary paragraph tags to separate the title and text. The next step is to style the title and text. Create a separate class for the title and make sure that it offers more impact than the text. For example, it can be a larger font size, made bold and a different colour. If necessary create a new class for the body of the text. Now select and apply. Introduce an image, and make sure it is a good one of yourself, to give more credibility and personality to the portfolio.

13 Portfolio PDF

Now create a new line and add a set of paragraph tags manually if Dreamweaver doesn’t do the job. Now add the title text and body text as shown in the previous step. Visitors may love your portfolio page, but they won’t always be at a computer. Create a PDF of the finished page and include a link to download the PDF. This can be added at a later date if you do not have any conversion software. Wait until your page is up online and go to http:// www.htm2pdf.co.uk. This is a service that will convert a webpage into a PDF, free of charge, which can be downloaded directly from the website. If you cannot wait until your portfolio page is up online there is an option to convert raw HTML. To finish this section, style the title and text as before and add a download link to the PDF image.

14 Finishing touches

Now create a new line and add a set of paragraph tags manually if Dreamweaver doesn’t do the job. Now add the title text and body text as shown in the previous step. Visitors may love your portfolio page, but they won’t always be at a computer. Create a PDF of the finished page and include a link to download the PDF. This can be added at a later date if you do not have any conversion software. Wait until your page is up online and go to http:// www.htm2pdf.co.uk. This is a service that will convert a webpage into a PDF, free of charge, which can be downloaded directly from the website. If you cannot wait until your portfolio page is up online there is an option to convert raw HTML. To finish this section, style the title and text as before and add a download link to the PDF image.

Build the BBC homepage

Mark Billen — Thu, 13 Aug 2009 09:30:34 +0000

The BBC’s brilliant homepage redesign has created quite a stir in the web community. Now See how it was done!

The BBC’s homepage is a stunning example of first-class Web 2.0 design. As well as presenting an elegant look and feel, it allows users to customise their experience in a genuinely useful way. You can change the content to reflect your interests, the layout to suit your behaviour online and even the colour scheme to please your taste.
It looks complicated, but it’s actually quite easy to do. In this tutorial, we’ll show you exactly how to re-create the BBC’s homepage, using XML feeds from the BBC to provide content. Like the BBC, we will use the jQuery library and its many plug-ins to build a rich interface that allows users to customise the content. We’ll use cookies to remember the settings and layout so that when you return, everything’s where you left it. By the end of this tutorial you’ll know exactly how one of the most talked-about redesigns was done – and have a BBC-style homepage of your very own. Download the project assets here

01 Site definition

Define a new site in Dreamweaver with PHP MySQL enabled – this site requires PHP so the computer/server you build it on must have it available. Copy across the files from the starting_files directory on the CD to your home directory. Open the index.php and the CSS>styles.css files.

02 BBC feeds

We will use XML feeds from the BBC website to add content, added as draggable divs, with rollover images and links at the top and text feeds underneath. We need to create two XSLT documents to format these. Select File>New>XSLT (fragment) and save as ‘image_feeds.xsl’.

03 Image feeds

Select Attach a remote file on the internet, and enter the URL of the BBC News’s XML file: http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml. In Design view, follow rss>channel>item and drag ‘link’, ‘title’ and ‘thumbnail’ onto the canvas from the bindings pane.

04 Repeating images

We want to display multiple images in our panel, so we need to add an XSLT repeat region. In Design view, highlight all of the fields you just dragged onto the page. Then under the XSLT tab, select Repeat Region. Under Select node to repeat under, select item and click OK.

05 List of images

We need to format this data as a list of images. In Code view, enter ul tags outside of the xsl:for-each loop, and inside, add

tags with and tags inside them. Set the attributes of these to the values from the XML feed – see Helper Files>image_feeds_step_5.xsl on the CD.

06 First three images

In Code view, click inside channel>item”>, and select XSLT>Conditional Region. In the Property Inspector, select the lightning bolt and then Build filter. Click the plus button and enter position() in the where field, <= as the operator and three as the value.

Style Spry widgets with CSS

Steve Jenkins — Wed, 08 Jul 2009 10:03:24 +0000

ADOBE’S SPRY FRAMEWORK MAKES CREATING DYNAMIC CONTROLS EASY, BUT IT’S UP TO YOU TO MAKE THEM LOOK GREAT.

THE INTRODUCTION OF Spry elements into Dreamweaver CS3 gave designers a whole new set of tools to work with. No need for intricate JavaScript knowledge or time-consuming CSS issues, a couple of clicks and Dreamweaver does the job for you. This is perfect for quick creation of dynamic page elements, but the default line-up is at best functional. The colours and borders can be modified so that the Spry Accordion in its various states matches the theme of the page. However, to fully realise the potential of the Accordion widget, a little imagination and knowledge needs to be employed. We used the Apple Downloads page (www.apple.com/downloads) as our inspiration. To create the effect, a number of background images are called into action, found on the disc, along with some additional CSS. The creation of individual CSS classes for each div tag in the code makes sure that there is far greater control over the output.

Download the Tutorial Files
Originally appeared in Web Designer Issue 147 – Author: Steven Jenkins

01 New label

To get started, place the mouse cursor on the page where the Spry component is to be placed, head to the Insert menu and select Spry>Spry Accordion. Dreamweaver will ask Please save this document before inserting widgets; press OK and save the file in the desired location. Now save the file again and head to File>Preview in Browser to see the Accordion in action and appreciate its function. By default, the Spry component displays two panels named Label 1 and Label 2. To add an additional label to the
proceedings, click the blue tag to display the Properties window, if not already on display. Next, click the Add Panel (+) button to add another panel to the Accordion. To rearrange the labels, select the appropriate label and use the accompanying up and down arrows to order it as you wish. By default, the Accordion is given the name Accordion1; you may change this to a more relevant one if necessary or if desired.

02 Rename div tags

By default, the Spry Accordion code in Dreamweaver is generic for all tabs, panels and content. When the CSS for the AccordionPanelTab is modified, this affects all the panels in the widget. This is perfectly okay for a quick creation of a widget, but to give greater control over the creation process, we are going to create classes for every element, ie panel and content. This will allow each panel to decide its own colour, borders and the rest. Switch to Split View to view the div tags to be modified: AccordionPanelTab and AccordionPanelContent. AccordionPanel is essentially a container tag and will be modified at a later date. In the top panel, labelled Label 1 and Content 1, rename AccordionPanelTab and AccordionPanelContent as ‘AccordionPanelTab1’ and ‘AccordionPanelContent’. Now repeat these steps for the remaining panels and content, simply adding ‘2’ for the second set and ‘3’ for the third set.

03 Copy and paste

Now open the SpryAccordion.css file, if not already open, and locate the .AccordionPanelTab class. Select the complete code set and hit Ctrl+C to copy. Now paste the code three times just after the original code. Head back to the first of the newly copied code and rename the .AccordionPanelTab class as ‘.AccordionPanelTab1’. Head to the next set of code and rename .AccordionPanelTab2 and rename the final pasted code as ‘.AccordionPanelTab3’. Next, find the .AccordionPanelContent class and copy and paste the code three times after the original code. Now rename the code ‘.AccordionPanelContent1’, ‘.AccordionPanelContent2’, ‘.AccordionPanelContent3’. You will now have all the necessary CSS code that corresponds with the div tags in the HTML page. This will allow the individual panel and content tags to be styled individually. This is essential to help achieve the desired design at the end of this tutorial.

04 Remove borders

To start the Spry transformation, first add background images to the individual tabs. We have provided the files on the disc. Double-click .AccordionPanelTab1 in the CSS panel to open the Rule Definition window, delete the current background colour, hit Browse, select silvert.gif followed by no-repeat, and press Apply and OK. Open the .AccordionPanelTab2 class, add the silverm.gif image, select no-repeat and press Apply and OK. Finally, add the silverb.gif image to the .AccordionPanelTab3 class. Save the CSS file and head to File>Preview in Browser to see the new-look widget. All the panel tabs in the widget boast a border; to remove, open the AccordionPanelTab1 class, select Border and delete any content. Repeat this step for the other two AccordionPanelTab classes. This will leave a border left, right and centre. This belongs to the Accordion class; double-click to open, head to Border, delete any content and press Apply and OK.

05 Text styling

Now preview the current build in your favourite browser and see how the widget is starting to take shape. Currently, the Accordion container tag expands to the width of the page. To fit the widget to the current selection, open the Accordion class, select Box and add 188 pixels to the Width box. This is the width of the background images used in the AccordionPanelTab classes. The next step is to modify and position the text in each of the panels. To change the actual text, ie Label1, select and type in the new title and repeat this for each panel. To style the text, first open the corresponding class, ie AccordionPanelTab1. Now select a font from the drop-down list; we are using Calibri, a Windows Vista font. Choose the size and colour – we have chosen 13 and a very dark grey (#333333). Repeat this process for the other two panel tabs. Changing the font will automatically resize the panel height. Head to the AccordionPanelTab class, select Box and make the height 24 pixels to accommodate the whole background image, and repeat for all. Currently, the padding is two pixels all-round; change this, eg, Top; 5 pixels, Left: 4 pixels, to position the titles. To compensate for the padding and make sure all the panels meet properly, adjust the height for each panel, eg, 24 pixels – 5 pixels = 19 pixels. If using a different font, adjust the padding and height to suit.

06 Style content boxes

By default, the content panels do not have any borders, giving the widget a very open look. To give the widget more structure, a couple of borders are going to be added to each. Double-click .AccordionPanelContent1 in the CSS panel, select Border and uncheck all the Same for all checkboxes. Under Style, select Solid for Left and Right, under Width add one pixel for Left and Right and finally, under Color, add #EEEEEE for Left and Right. Save the CSS file and repeat the same selections for .AccordionPanelContent2 and .AccordionPanelContent3. Each content panel only contains the default text, ie Content1. Before adding any content, padding needs to be put in place to keep it away from the left and right borders. Open .AccordionPanelContent1, add four-pixel padding Left and Right, save and repeat for the remaining two content panels. Finally, before adding any content to the content panel, determine the font, font size and style via each of the .AccordionPanelContent2 classes. Again, we have chosen Calibri at 13 pixels in dark grey.

07 Create content

Each content panel can contain any content that you wish, but here we are going to add a list of text links. This can be added using the paragraph

tags, unordered or ordered lists or simply the
tag. We have used the latter. After adding the content for the first content panel, it is a good idea to copy and paste into the remaining panels. This gives consistency and also saves time. Head to the HTML file, locate the current text, ie Content 1, Content2, Content3, and replace with the new text. To complete the text in each panel, add a link by selecting the text and adding in a link in the Property Inspector. This will revert the links to the default blue and underline style. To change the style to match the original text style, first head to Modify>Page Properties>Links. Select the appropriate font and size, change all the link options to the same colour and select Never underline from the Underline style drop-down list, and press Apply and OK.

08 Alternative backgrounds

Currently, each time a panel opens, it retains the same silver background image as added before. The next step is to add an alternative background each time a panel opens, and change the colour of the text to make it more visible on the darker background. Head to the CSS file and copy and paste three versions of the .AccordionPanelOpen .AccordionPanelTab and name accordingly. Double-click .AccordionPanelOpen .AccordionPanelTab1, select Type and match the font, size and colour to the same style used back in step five. Select Background, delete the Background color and add the image bluet.gif. Repeat this, adding bluem.gif to .AccordionPanelOpen .AccordionPanelTab2 and bluem. gif to .AccordionPanelOpen .AccordionPanelTab3. Style the text for all. The text hover effect is still applied to the text in the panel tabs in both their open and closed states. Change the .AccordionPanelTabHover colour to the same as in the title defined in step five (#333333). Change the .AccordionPanelOpen .AccordionPanelTabHover colour to the same as defined before (#FFFFFF). Save and preview.

09 Finishing touch

When the bottom panel is open, it currently lacks a bottom border. However, simply adding a bottom border will add a straight line, spoiling the effect that the curved background images have created. Quickly view the current state of the widget to appreciate this comment. We are going to add a curved outline background image to complete the look and give consistency to the design. Adding a background image inside the bottom content panel will mean that the image and border do not line up properly. Adding the image outside the div tag means that it will not line up when the bottom panel is closed. To achieve the desired effect, we are going to use an AP div (Absolutely Positioned div tag). Switch to the HTML file and go to Insert>Layout Objects> AP Div. Copy the code

and paste after the last content in content panel 3. This will be added to the CSS panel as #apDiv1; double-click to open and add the curvebottom.gif image via Browse in Background and select no-repeat so only one instance is seen. Now click on the div and resize using the resize handles, getting as close to the image outline as possible. Now save and preview to see how well positioned it is. Move into position before using the L (Left) and T (Top) boxes for perfect positioning.