The Webmaster's Café » Web Design

Video: How To Create A Dropdown Menu For Your Website With Fireworks

Stephane — Tue, 04 Dec 2007 04:00:49 +0000

Dropdown menus, or popup menus, can be very useful to your visitors if used carefully. When a visitor enters a website, he visually scans the page for useful informations. Therefore if you are “hiding” important links in your dropdown menus, be sure that the visitor will be able to navigate without them.he

I tend to use dropdown (listboxes) in web applications but not in standard, public web pages. When people use an application on a regular basic, they can afford to learn how to use them efficiently.

I made the following video tutorial so you can learn how to create dropdown menus using Adobe Fireworks. The link open in a new window as using YouTube.com produced a video too fuzy to watch here.

Watch Fireworks video tutorial here

Please bear with me as this is my first video tutorial. I think the speed is kind of fast but the video file is almost 5 Mo so I didn’t want it to last longer.

Let me know what you think!

How To Protect Your Website Content & Images

Stephane — Tue, 13 Nov 2007 04:00:13 +0000

If you’ve ever got your content stolen, you know it kinda sucks. Not only content but also images. Now I am not making any references to a previous post about a website who stole some of my content cause I don’t care that much about this incident.

Anyway I know I’ve probably stolen a few stock images myself at some point but I now use free image banks.

What Can You Do If Your Content Is Stolen?

As a webmaster, blogger, designer or whatever, if your content is stolen, you can always file a DCMA (Digital Millennium Copyright Act).

DMCA definition at Wikipedia.com
DMCA – What does it mean for webmasters? – Blogcast from shoemoney.com
12 U.S. Laws Bloggers Should Know

You can find out if your content has been reproduced by using CopyScape.com free service. Simply type in the URL of the page you want to verify and see where it’s being used.

You can also add a Copyscape.com banner at the bottom of your webpages. Not that it really protects you or anything but it let your readers know you are aware of content stealing.

Protecting Your Images

As stolen images cannot be detected by services like copyscape.com, you have to add a signature to them. This signature is called a watermark. This can either be visible or not. The thing with visible watermark is that they can easily be removed. Here are a few links on how to add watermarks to your images:

Create a hidden watermark in images - Photoshop Tutorial
Watermarking Images in Macromedia Fireworks

Where To Get Free Content And Images

And if you’re tempted to steal someone else’s content always remember there are free online resources.

EzineArticle.com
ArticleCity.com
ArticlesFactory.com
eZINESearch.com
8 Great Sources For Free Stock Photos from DerekBeau.com

How To Add A Favicon.ico To Your Website

Stephane — Wed, 31 Oct 2007 16:21:05 +0000

When there are hundreds or thousands of websites that compete with yours, what makes your website stand out from the crowd? It’s the image you give, it’s the way people recognize your website… it’s branding.

Drop the stock image you’ve got at the top of your website and get a custom-designed header. Get your own logo, give your website its own look and feel.

Adding A Favicon.ico

Part of getting your image out there is by adding a favicon.ico to your website. The favicon.ico is the icon that’s being displayed in your browser’s address bar:

This is also the icon that will be displayed in your bookmarks or shortcut to your website.

Adding this icon is pretty easy. It’s a 16×16 or 32×32 image with a 16 colours depth. You can create this image with your favorite editor and then convert it to a .ico using a third party application.

There is an online conversion tool available at http://www.favicon.cc/ that allows you to either create your icon online or import it from a JPEG or a GIF file. When you’re done creating your icon, upload it to the root of your website and add the following HTML code between the and tags of your pages:

[path to your favicon]/favicon.ico” mce_href=”[path to your favicon]/favicon.ico”>

If your favicon is not displayed after reloading your webpage, delete your browser’s history and cache (yes, both).

Run Internet Explorer On Linux With IEs4Linux

Stephane — Thu, 11 Oct 2007 01:48:49 +0000

Web designers who work in Linux may find it difficult to test their work with all of today’s popular browsers. One of the major difficulties is that the most popular one is Internet Explorer which is only available for MS Windows. Even though this browser is known for its quirky interpretation of web standards, it is so widespread that web designers can’t afford to ignore it.

You can always try to run Windows applications on Linux using Wine but finding all DLL dependencies and registry entries can turn to be a total pain.

Introducing IEs4Linux

The Microsoft browser is an integral part of Windows and relies heavily on the WinAPI. Even though Wine is designed to handle WinAPI references, installing Internet Explorer with it can be an adventure.

IEs4Linux is a collection of shell scripts that automatically download the compressed packages (.cab files) from Microsoft’s website, modify the configuration files and use Wine to install the software. The current version of IEs4Linux supports Internet Explorer versions 5.0, 5.5 and 6. Version 7 of IE is supported in the latest beta version of IEs4Linux.

From a legal point of view, you can install Internet Explorer if you own a MS Windows licence. The browser doesn’t have to be running on your Windows system though.

How To Install IEs4Linux

First you gotta make sure you’ve got Wine installed on your system. If not, you can grab a copy at http://www.winehq.org/site/download. They’ve got many binaries available so you should find one for your Linux distribution.

Next you gotta install the cabextract. Cabextract is a free software for extracting Microsoft cabinet files, also called .CAB files, on UNIX or UNIX-like systems. You can download cabextract here.

If you are logged in as root, log out and use your normal user account from here. Now that you’ve got the required component, download a copy of IEs4Linux and install it:

# wget http://www.tatanka.com.br/ies4linux/downloads/ies4linux-latest.tar.gz
# tar zxvf ies4linux-latest.tar.gz
# cd ies4linux-*
# ./ies4linux

The installer will take you to a series of questions, download the necessary file and configure Wine. When the installation is completed, simply launch Internet Explorer by issuing one of these commands:

ie5
ie55
ie6

Other Alternatives

For those who don’t want to bother with running IE on Linux, there are some online services such as Netrenderer (free) and Browsercam.com (commercial but offers many other browsers and OS) that allow you to see your work under Microsoft’s web browsers.

Fireworks Tutorial : Creating A Curled Photo Effect – Part 2

Stephane — Tue, 02 Oct 2007 15:32:24 +0000

If you’ve followed Fireworks Tutorial : Creating A Curled Photo Effect – Part 1, you should have added a border to a photo of your choice. Now we’re going to see how to add a reflective sheen to the curled photo and we’re going to make the drop shadow look a little bit better.

Using the pointer tool , start by dragging the vertical guide off the canvas. Select the grouped item from the layer panel and click on “Modify => Ungroup” from the main menu.

Select the vector path from the masked photo item in the layer panel and click on “Edit => Copy” and then “Edit => Paste” form the main menu.

You should now have a copy of the vector path appearing in the layer panel.

Using the pointer tool, select the newly copied path and change it’s fill property to “Gradient” and select “Bars” from the list.

You need to customize this gradient in terms of color and opacity. Click above the opacity gradient to add an additional swatch.

Click on the newly created swatch and set it’s opacity to zero.

Now you need to alter the gradient color. Click on the existing swatch to the left and set it’s color to white.

Repeat the same process with the right color swatch but set it’s color to a dark grey (#333333). At this point, your photo should look like this:

You can rotate the gradient’s angle to match the photo.

Now we’re going to lower the opacity of the gradient path to 80.

Select the masked photo from the layer panel…

…and add a drop shadow effect to the masked photo. Tweak the drop shadow effect to your liking. I’ve set the softness to 20 and the distance to 20 also. Here’s what it looks like at this point:

From the main menu, click on “Modify => Canvas -> Fit Canvas”. I’ve decided to move the reflective sheen to the right but you can set it the way you want.

To make the photo come out a little more, I’ve created a rectangle underneath it that covers the whole canvas. Then I’ve added a wood pattern fill to it. Here’s the final result:

Download the final source image for this Fireworks tutorial here.

Fireworks Tutorial : Creating A Curled Photo Effect – Part 1

Stephane — Tue, 02 Oct 2007 00:09:18 +0000

Back from babyland (my girlfriend gave birth last monday), I gotta say it’s been a pretty busy week with little to no sleep! I’m getting back on track a little at a time, gotta say that a first baby isn’t an easy task but it’s totally worth it!

Anyway, let’s start the week with a Fireworks tutorial on how to create a curled photo effect.

You can use Macromedia Fireworks MX, Fireworks 8 or Adobe Fireworks CS3. For this tutorial, I’ll be using this photo:

You can download the original photo for this tutorial here.

Open the picture with Fireworks and drag a vertical guide onto the canvas. Using the skew tool distort the image like this (click to enlarge):

From the main menu, click on “Modify => Canvas => Fit Canvas” to adjust the canvas to the distorted picture’s size. Using the rectangle tool, draw a rectangle over the picture. Make sure the newly created rectangle is selected and click on “Modify => Ungroup” from the main menu.

Select the subselection tool and drag the corner points of the rectangle to match the distorded photo’s shape.

Use the pen tool to add a couple of curve points to the rectangle, one at the top and one at the bottom:

Using the subselection tool, drag the top curve point downward and do the same thing with the bottom one too.

Still using the subselection tool, modify both curve points’ radius.

Select the selection tool and move the vertical guide over the curve points.

Select both the distorted rectangle and the distorded picture using the selection tool while holding the shift key. Click on “Modify => Mask => Group as mask”.

We now need to create a border for our masked photo. From the layer panel, select the rectangle from the masked photo item:

Click on “Edit => Copy” and then “Edit => Paste”.

We’ll need another copy of the vector shape. Click on “Edit => Repeat paste”.

We’ll need to punch the top shape through the bottom one. Select the top shape and click on “Modify => Transform => Numeric Transform”. Select “Scale” from the combo box and set the size to 85%.

Select both shapes by using the selection tool while holding the shift key. Click on “Modify => Combine Paths => Punch”.

Our photo now has a nice white border! It may not be totally adjusted so use the subselection tool to modify the interior path. When you’re done, select both the masked photo and it’s border and click on “Modify => Group”. Select the grouped items and add a drop shadow effect.

Click on “Modify => Canvas => Fit Canvas”. Select the scale tool and rotate the object by clicking and dragging outside the selection area.

Click on “Modify => Canvas => Fit Canvas” once again. You can use the subselection tool if you need to tweak the border any more.

Here’s what the final result (for part 1) should look like (I’ve added a grey background so you can see the border better):

Stay tuned for part 2 of this tutorial where we’ll add a reflective sheen to the photo and we’ll tweak the drop shadow a little bit.

You can download the source image for this Fireworks tutorial here.

CSS Tutorial: 3 Columns Website Layout

Stephane — Fri, 14 Sep 2007 16:32:36 +0000

Designing with CSS and layers can sometime be more challenging than using tables. The main advantages are flexibility and precision.

Today I’m going to show you how to build a 3 columns layout with CSS. I’m going to assume you already know how to setup a website with Dreamweaver or your favorite HTML editor.

3 Columns, Centered, Static Width

First, we’re going to create two files: index.html and style.css. Don’t forget to attach the style sheet to index.html.
Let’s put in place our frame which will contain every other objects and layers.
We’re now going to make everything centered through our style sheet:
```
body {text-align: center;}
```

Now set the style attributes for our frame in style.css:

#divFrame {
width: 760px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

Add a new header layer into our frame:
```
    
```

Set the style attributes for the header:

#divHeader {width: 100%;height: 100px; background-color: #003366; }

A top menu could be useful. Let’s add a new layer to our frame, right after the header:
```
        
       
```

Set the style attributes for the top menu:

#divTopMenu {width: 100%;height: 20px; background-color: #000000;}

We’re going to need a container for our columns so that a background image can be used to cover the full width of the page:
```
    
    
    
```

Set the style attributes of the container:

#divBody {
     position: relative;
     width: 100%;
     background-image: url(images/background.jpg);
     background-repeat: repeat-y;
     padding-top: 15px;
}

Now we’re going to add all three layers for our columns into our container:
```
     
     
     
```

Set the attributes of all three columns:

#divLeftCol {
     width: 130px;
     float: left;
}

#divContent {
     position: relative;
     width: 470px;
     margin-left: 15px;
     float: left;
     padding-bottom: 15px;
}

#divRightCol {
     position: relative;
     width: 130px;
     float: right;
}

Add a layer for the footer right after the container (divBody):

Set the footer’s CSS attributes:

#divFooter {
 position: relative;
 height: 22px;
 width: 100%;
 background-color: #333333;
}

Alhtough I’ve added some text and a logo to the webpage, this is what it should look like:

Download the source code for this CSS tutorial here

Web Design Tutorial: How To Create A Gel Button With Fireworks

Stephane — Thu, 13 Sep 2007 04:25:16 +0000

Yesterday I created a gel button for a customer’s website so I decided to turn it into a tutorial. I did this with Adobe Fireworks CS3 but you’re probably going to be able to do it with Fireworks MX or 8. Now I don’t pretend to be an advanced graphic designer; I mostly do basic stuff. But when I need more complex graphics, I rather outsource it.

Start by creating a new canvas. The size doesn’t really matter as long as its large enough to hold the button you want to create. 200×100 should do the job.
Select the rectangle tool and create a drag a rectuangular shape of 190×35.
Set the rectangle roundess to 100.
Set the gradient fill to “Linear”.
Move the gradient anchor points so that it goes from top to bottom.
Change the gradient colors so that it goes from light blue to dark blue.
Select the rectangle, copy it and paste it so that you’ll have two identical buttons. You may want to give them different names so that you won’t confuse them.
Hide the layer named “MyGelButton” so that you can work on the “Reflection” layer.
On the “Reflection” layer, change both colors to white and set the opacity of the left side of the gradient to zero.
Now make the “MyGelButton” layer visible again and send it behind the other one.

Your image should look something like this:
Scale the “Reflection” layer by right-clicking on it and selecting “Scale” from the “Transform” options.

Then simply drag the bottom anchor point up.
Duplicate the “MyGelButton” layer again (copy + paste) and name it “Blur”. Send this layer completely to the back.
Select the layer named “Blur” and add click on “Filters => Blur => Gaussian Blur”.
Set the blur radius to 4.7.
Set the opacity of the “Blur” layer to 60.
Your final image should now look like this:

See How Your Website Looks On An iPhone

Stephane — Wed, 05 Sep 2007 11:30:00 +0000

As mobile communication devices are more and more likely to offer web capabilities, web designers must be able to develop websites that will fit these tiny little screens. Unfortunately, they cannot afford to buy every device on the market so sometimes it’s kind of hard to test their sites’ compatibility. But what if you could at least test your site on one of the most popular mobile device on the market, the iPhone?

Enter the new iPhoney from Marketcircle

The iPhoney is a free open-source web browsing environment powered by Safari. It is designed for developers who want to create 320 x 480 websites for use with iPhone. Marketcircle clearly states that it is not an iPhone simulator but rather a canvas on which you can test the visual quality of your designs. At the time of this writing, the latest iPhoney version is 1.2 and requires mac OS X 10.4.7 or later.

iPhoney Capabilities and Features

Test your iPhone-enabled Web 2.0 applications and compatible web sites.
Open any website that works with Rotate to see websites in either portrait or landscape orientation.
Show or hide the location bar for a full-screen iPhone experience.
Simulate the iPhone user agent, to test browser redirection scripts.
Zoom out to see how your current pages might look while zoomed out on iPhone.
Turn off plug-ins (including Flash, but note that they all turn off (including QuickTime).
Automatic updates with Sparkle, so you’ll always know if there’s a new version.
And of course, open source code so you can contribute to iPhoney’s rapid development

Choosing A Tool To Build Your Own Website

Stephane — Wed, 08 Aug 2007 20:45:36 +0000

Ok I see this question asked so often : What do you use to build your website?

Short answer is : Macromedia Dreamweaver, CodeCharge Studio or WordPress.

But you gotta know what you want out of your website first. Do you need a custom website with a custom database to handle to your company’s catalog for example? Or do you simply want an online editor to post text content on basic layout website?

Building A Dynamic Website With a Custom Database

If you’re not familiar with programming, I suggest you go out and hire a programmer through a business or developper you know. An alternative would be to search for web developpers over at http://www.getafreelancer.com/ . You can get the job done for cheap.

For my part, I only develop with PHP. Sometimes I happen to code only with a text editor. To do that, you better learn PHP . When it comes to more complex web sites, I use YesSoftware’s CodeCharge Studio for PHP development and Macromedia Dreamweaver for web design. I know Adobe Dreamweaver CS3 is out but I haven’t tried it yet. I’ll let you know when I buy it.

Building A Static Content Website

If you need to build a simple website with few pages that won’t be updated often, I’d go with Macromedia Dreamweaver again because it allows you to work faster. I wouldn’t go into content management systems as they require installation, configuration and maintenance.

You could also work with any other HTML editor of your choice such as Adobe GoLive.

Sorry, I can’t recommend Microsoft FrontPage, get over it with this one please! It sucks ass! lol…

Building A Text Content Website With Basic Layout

When I need to build a simple content website like TheWebmastersCafe.net, I tend to use WordPress. It is an open-source tool which basically means it’s free. All you need is a web host that supports PHP and MySQL. They almost all do now. WordPress is a PHP blog but you can pretty much turn it into a CMS (Content Management System). There are also some more complex CMS like Joomla and Mambo which are free too.

WordPress might be easier to install and use but Joomla is a bit more complicated to run. By the way, let me tell you some bad experience I’ve had with Joomla.

A few years ago, I got this web site development contract with this big company (let’s call it Camoplast to keep it anonymous). They said they wanted a CMS. I said fine, I can install you one. So they showed me their current out-of-date CMS which sucked ass. They said they basically needed to do the same thing they did with that CMS but only updated. So I showed them a Joomla demo and they all liked it. We were going to stuff about 400 pages in there and that basically was the contract. So we started putting up everything and that’s where it got ugly. The customer now needed more and more custom dynamic content. So I started tweaking Joomla a little. Now they were getting an idea of all the “new possibilities” available since their old CMS. They wanted more custom programming, they wanted to insert videos, they wanted to use Flash with dynamic content through XML…. Arrrgghh… I finally gave up and stopped the project which ended in a 100% custom web site and a loss of time and money.

So my point is not that it’s not a good CMS. You just gotta know it’s limits. If you modify it’s code, then you’re f*cked when the time comes for updating the CMS (for security reasons for example). That applies to most CMS in my opinion.

Conclusion

Choose your tools wisely. Make sure you will be able to expand the site easily if you need to add dynamic content. Building a professional website? No cheap tool is gonna make it, go and get what the professional developpers use.