Most Popular Google Tools

Flash 5 Tutorial – Part 4 – Symbols & Animation the standard drawing tools in Flash

Introduction

Over the last few parts you have learnt how to use most of the standard drawing tools in Flash. In this part of the tutorial I will show you how to create your first Flash movie with animation.

Symbols

In order to animate something in Flash it must first be changed into a Symbol. There are three types of symbol: Graphic, Button and Movie. In this part of the tutorial I will just deal with Graphics.

To start, draw a filled circle in the middle of the screen, a few centimetres high. Choose the arrow tool and double click on the circle to select it and the line around it. Then press F8 on the keyboard. You will get a window called Symbol Properties. In this window you can give a name to your symbol so that you can refer to it later. Type ‘Circle’ (without the quotes) in the box and then select Graphic and click OK.

You will now notice that the circle apears with a blue line around it. The next thing you will want to do is to animate this circle.

The Timeline

To create animation in flash you must use the timeline:

The timeline window shows all the frames that make up your animation and all the layers (which will be covered later). Each small box in the timeline is a frame. The animation runs at 12 frames per second (shown at the bottom) as standard but this can be changed. As you can see above, there is a black dot in the first frame. This signifies that it is a keyframe.

Keyframes

Keyframes are very important in flash as they are used whenever something is changed. For instance if you wanted the circle to appear in another position later in the movie you would create a keyframe in the frame where you want it to change and then you could move the circle without affecting the rest of the movie. That is exactly what you are going to do now.

Right click in frame 50 on the timeline and choose Insert Keyframe. This will insert a new keyframe into the animation at frame 50 and it will contain the same information as the previous keyframe. You could have also chosen Blank Keyframe which will make a new blank keyframe but you want the circle to be in both keyframes in your movie.

Now, click in frame one and press Enter to play the movie. As you can see you now have a 4.1 second long movie of a circle in the middle of the screen – not very interesting.

To make something happen you will need to change the second keyframe. Click on it (frame 50) and the symbol of the circle will be selected. Now, with the arrow tool, click and drag the circle to the upper left hand corner of the stage. Then click in frame one again and press Enter to play the movie.

Animation

The movie you have created now has a circle which moves on the screen but, as you will have noticed, it stays in the same place and then suddenly moves in the last frame. Animations, like television and film, are made up many frames, each of which has a slight change from the last one. As they are played very fast (12 frames per second in flash) the object looks like it is moving. Luckily, flash has been built so that you don’t have to do all of this manually.

Acutally, animating the circle on the screen is amazingly easy because of the Flash feature called Motion Tweening. This feature will automatically create all the frames to go between two keyframes to animate an object which you have moved (in this case the circle). All you have to do is right click in any frame between your two keyframes and choose Create Motion Tween.

Once you have done this the frames will change from being grey to being blue with an arrow across them. This signifies a motion tween. Click in frame one and press Enter to view your movie. As you can see, now flash has made your circle move smoothly accross the screen and, if you click i
n the frames between your keyframes you will see that it has created all the frames in between.

Scaling

Motion Tweens can be used for other things as well as moving objects. You can also change their size. For this you will use the scale tool. Right click inn frame 80 and create a new keyframe.Your circle will be selected. Now choose the Scale tool:

from the Options section on the tools pallette (if it is not available make sure you have the black pointer tool selected). This tool allows you to change the size of objects. 6 white boxes will appear at the edges of the circle, just like in any other image application. Use the bottom right hand one to drag the circle size until it is considerably larger. You will also notice that the circle grows equally around its centre point. Now, as before, right click in between frames 50 and 80 and choose Create Motion Tween.

Flash 5 Tutorial – Part 3 – More Tools the basic drawing tools in Flash

Introduction

In the last part of the tutorial I showed you some of the basic drawing tools in Flash. Before I show you how to create animations in Flash, I will first explain some more of the tools available to you. These tools are not as important as the ones I showed you last week but, to create good animations, it is useful to know how to use all the tools.

Ink Bottle

The ink bottle tool is quite useful. If you have a block of colour (for example one created with the paintbrush – which will be covered later in this tutorial) you can click on it to add a line round the edge. The colour of the line placed round the edge will be the same as the colour selected as line colour on the tools bar.

Dropper Tool

The dropper tool, like the ones in graphics software, is used to pick a colour off one part of the screen and use it as the fill or line colour. If you click on a fill, the fill colour will be set and the pointer will change to the fill tool. If you click on a line, the line colour will be set and the pointer will change to the ink bottle tool.

Eraser Tool

The eraser tool is used to rub things out on the stage. It is used by just clicking and holding down the mouse. It does have a few options though:

The large section at the bottom is used to select the size and shape of the eraser brush. On the right at the top is the faucet tool. This makes the eraser work like the fill tool – you just have to click once to remove the fill from an area. The part on the left is the special option. This allows you to choose the type of eraser you use. The default is Erase Normal, which works like a normal eraser tool. Some of the other options are:

• Erase Fills which will leave all lines intact as you use the eraser but will rub out fills
• Erase Lines which leaves fills but rubs out lines
• Erase Inside which allows you to erase inside a shape without harming the edges

Paintbrush Tool

The paintbrush tool will paint lines all the time you have the mouse button held down. It has some options, though, which are like the eraser tool options:

• Paint fills, will only paint inside a shape
• Paint Behind, which will paint behind all shapes and fills

Pencil Tool

The pencil tool allows you to draw lines on the screen. It is different to a normal freehand tool, though, as it has three options which can be set:

This option will allow you to choose what flash does to your line once you have drawn it. The default option is Straighten. Flash will straighten out your line so that any part of it that is almost straight will be made into a straight line. The two other options are smooth and ink. Smooth will change your line so that it is smoothed out to make curves. The ink option will not make so many changes to your line but will still smooth it a bit and straighten some lines.

The Text Tool

The text tool is used for adding text to your flash movies. Just click on the stage where you want the text to appear and a cursor will appear, where you can type in your text. To make chan
ges you need to use the character palette:

The options here are quite self explanitary. The font section lets you choose the font for the text. With flash all fonts are embeded in the file so the user does not need to have the font on their computer. Below that is the size box which lets you choose the text size. Next to that are the normal bold, italic and colour options. Below that is the Tracking option. This allows you to choose how spaced out the characters are. At 0 the spacing is normal. If you increase this, spaces will be left between your characters. If you decrese it, your characters will start to overlap. The option below this is the superscript/subscript option and below this you can specify a URL for a link.

Flash 5 Tutorial – Part 2 – Drawing to draw basic shapes in Flash

Introduction

In the last part I showed you the Flash interface and explained exactly what Flash is. In this part I will show you how to use Flash’s drawing and painting tools to put something into your animation. At this point there will be no interactivity and nothing will move but once you know the basics you can develop this futher.

Basic Drawing

The first thing you need to learn how to do is to draw basic shapes in Flash. We will start with the most basic shape, the circle/oval. Before you start you might want to move some of the floating pallettes so that you can see enough of the stage to work on.

Firstly, choose the Oval tool from the Tools bar on the left:

Then, draw the oval or circle you want on the stage (just as you would in a normal graphics program). Holding down shift will force the object drawn to be a circle. Once you have drawn your circle you will now notice a few things about it. Firstly, there is a line around the circle and a fill inside it. These are changed using the colors section of the Tools bar:

The first option (set at black in this example) is the line colour and the bottom option (blue in this example) is the fill colour. To change them click on the box filled with colour. You will get a menu with a selection of colours. If you want to match the colour to a colour on your screen click on anything on the screen and its colour will be used.

Now, try drawing another circle or oval, but this time change the fill and line colours.

The next tool you will use is the rectangle tool:

As with the circle tool, this works in exactly the same way as in any standard grapics program, you can drag out a rectangle you want to draw and hold down shift to force a square. Like the circle, the rectangle’s line and fill colours are set using the colors section of the Tools bar.

The rectange tool, unlike the oval, has some options which can be set. These appear in the Options section of the Tools bar:

There is only one option for the rectange, the Round Rectangle Radius. This creates rectangles with rounded corners like this:

Click on the option. A box appears asking for the radius in pixels. The example above used a radius of 20 pixels but it is best to experiment to find the best setting for what you want. After you have set this draw another rectangle. This one should have rounded corners. Remember: Flash will remember this setting so before you draw another standard rectange you should set it back to 0.

Like any other drawing program, Flash also has a straight line too:

This works in exactly the same way as the line tool in graphics software.

The objects you have drawn can also be moved. You must be careful, though, as Flash treats the fill and the line separately, so to move both together you must double-click in the object before dragging it if you want to move them both.

Drawing Or Painting?

Flash is a very strange program for editing grapics. It is really a cross between a drawing and a painting program with some special features of its own. It is like a drawing program because you can move and change objects once you have drawn them but it acts like a painting program with fills etc. For example if you drew two circles, a large one with a black line and a blue fill and a small one with a black line and no fill, then moved
the small one on top of the bigger one. You could then use the fill tool to fill in the middle of the small circle, changing only part of the big one.

Flash also allows you to break up graphics using other ones. If you now moved the small circle away from the larger circle it would leave a white space behind where it used to be. This feature can be extremely useful.

Special Fills

AS well as filling a shape with a single colour you can also use Flash’s premade fills. They are found at the bottom of the fill box. There are three gradient fills but the best are the radial fills. These allow you to fill in any shape with a radial gradient (going from light to dark). The special thing about them is that the lightest part will be where you click your mouse when using the fill option:

so you can very effectively make 3D looking circles, which are excellent for buttons.

Flash 5 Tutorial – Part 1 – Introduction multimedia on web pages,

Introduction

Flash is one of the most popular technologies on the internet, with thousands of websites using it for introductions, animations and advertisements. Although many people feel that these animations are sometimes unnecessary, Flash has created a way of including multimedia on web pages, which will run over a standard internet connections. The recent release, Flash 5, has brought many changes to the creation of Flash animations. Many of the techniques covered in this tutorial will also apply to past versions of Flash, as well as Flash MX, the very latest version, though. If you are not sure what a Flash animation is like click here for an example. If this does not work you will need to download the Flash Plugin.

Why Use Flash?

Flash is one of the best multimedia formats on the internet today for several reasons. Firstly, the Flash plugin (required to view the animations) is installed on nearly every computer connected to the internet. All the major browsers come with it installed by default and, for those who don’t have it, the download is very small. Secondly, Flash is a ‘vector based’ program, which means the animations and graphics created by it have much smaller file sizes than a video or streaming media version of the same animation would be. You can also include sound, graphics and dynamically created information in your animation.

Flash provides a versatile and easy way for webmasters to create animations for their users.

What Do I Need?

As mentioned above, all you need to view a Flash animation is a modern web browser with the Flash plugin. To create Flash animations, though, you will need some software. Although there are other Flash creations on the market, Macromedia’s Flash 5, is by far the best and, as Macromedia created the Flash format, it always has the latest features in it. Unfortunately, the software costs $400, but you can download a free 30 day trial from Macromedia.

Once you have downloaded and installed the trial (or bought the software) you will be ready to start creating Flash animations.

The Flash Interface

When you first open Flash you will find an interface that looks something like this:

I will quickly cover the different aspects of this screen.

In the centre is the large white ‘Stage’. This is the actual movie where you will place all the objects you want to include in it.

Across the top of the screen is the timeline. This is where you insert all the actions that happen in your movie so that they happen at the correct times. It is split up into frames.

Down the left hand side of the screen is the ‘Tools’ pallette. This is where you will find all the tools for inserting objects and text into your animation.

There are also four floating pallettes on the screen. The ‘Mixer’ pallette allows you to choose the colours you will be using in your animation. It will change the colours of the currently selected object. The’ Info’ pallette will allow you to find out a bit of information about the object you have selected and will allow you to make changes to the properties of a tool you are using. The ‘Character’ pallette contains all the text formatting tools. Finally the ‘Instance’ pallette contains all the tools for changing objects when you are animating them, including sound and several other tools for making changes to your animation.

Each of the parts of the Flash window does many different things. Instead of going through each tool explaining what it does, I will show you examples and explain how to create them, showing you how to use each tool while doing so.

.htaccess Tutorial – Part 3 – Password Protection on websites

Introduction

Although there are many uses of the .htaccess file, by far the most popular, and probably most useful, is being able to relaibly password protect directories on websites. Although JavaScript etc. can also be used to do this, only .htaccess has total security (as someone must know the password to get into the directory, there are no ‘back doors’)

The .htaccess File

Adding password protection to a directory using .htaccess takes two stages. The first part is to add the appropriate lines to your .htaccess file in the directory you would like to protect. Everything below this directory will be password protected:

AuthName “Section Name”
AuthType Basic
AuthUserFile /full/path/to/.htpasswd
Require valid-user

There are a few parts of this which you will need to change for your site. You should replace “Section Name” with the name of the part of the site you are protecting e.g. “Members Area”.

The /full/parth/to/.htpasswd should be changed to reflect the full server path to the .htpasswd file (more on this later). If you do not know what the full path to your webspace is, contact your system administrator for details.

The .htpasswd File

Password protecting a directory takes a little more work than any of the other .htaccess functions because you must also create a file to contain the usernames and passwords which are allowed to access the site. These should be placed in a file which (by default) should be called .htpasswd. Like the .htaccess file, this is a file with no name and an 8 letter extension. This can be placed anywhere within you website (as the passwords are encrypted) but it is advisable to store it outside the web root so that it is impossible to access it from the web.

Entering Usernames And Passwords

Once you have created your .htpasswd file (you can do this in a standard text editor) you must enter the usernames and passwords to access the site. They should be entered as follows:

username:password

where the password is the encrypted format of the password. To encrypt the password you will either need to use one of the premade scripts available on the web or write your own. There is a good username/password service at the KxS site which will allow you to enter the user name and password and will output it in the correct format.

For multiple users, just add extra lines to your .htpasswd file in the same format as the first. There are even scripts available for free which will manage the .htpasswd file and will allow automatic adding/removing of users etc.

Accessing The Site

When you try to access a site which has been protected by .htaccess your browser will pop up a standard username/password dialog box. If you don’t like this, there are certain scripts available which allow you to embed a username/password box in a website to do the authentication. You can also send the username and password (unencrypted) in the URL as follows:

http://username:password@www.website.com/directory/

Summary

.htaccess is one of the most useful files a webmaster can use. There are a wide variety of different uses for it which can save time and increase security on your website.

.htaccess Tutorial – Part 2 – .htaccess Commands and its useful features

Introduction

In the last part I introduced you to .htaccess and some of its useful features. In this part I will show you how to use the .htaccess file to implement some of these.

Stop A Directory Index From Being Shown

Sometimes, for one reason or another, you will have no index file in your directory. This will, of course, mean that if someone types the directory name into their browser, a full listing of all the files in that directory will be shown. This could be a security risk for your site.

To prevent against this (without creating lots of new ‘index’ files, you can enter a command into your .htaccess file to stop the directory list from being shown:

Options -Indexes

Deny/Allow Certian IP Addresses

In some situations, you may want to only allow people with specific IP addresses to access your site (for example, only allowing people using a particular ISP to get into a certian directory) or you may want to ban certian IP addresses (for example, keeping disruptive memembers out of your message boards). Of course, this will only work if you know the IP addresses you want to ban and, as most people on the internet now have a dynamic IP address, so this is not always the best way to limit usage.

You can block an IP address by using:

deny from 000.000.000.000

where 000.000.000.000 is the IP address. If you only specify 1 or 2 of the groups of numbers, you will block a whole range.

You can allow an IP address by using:

allow from 000.000.000.000

where 000.000.000.000 is the IP address. If you only specify 1 or 2 of the groups of numbers, you will allow a whole range.

If you want to deny everyone from accessing a directory, you can use:

deny from all

but this will still allow scripts to use the files in the directory.

Alternative Index Files

You may not always want to use index.htm or index.html as your index file for a directory, for example if you are using PHP files in your site, you may want index.php to be the index file for a directory. You are not limited to ‘index’ files though. Using .htaccess you can set foofoo.blah to be your index file if you want to!

Alternate index files are entered in a list. The server will work from left to right, checking to see if each file exists, if none of them exisit it will display a directory listing (unless, of course, you have turned this off).

DirectoryIndex index.php index.php3 messagebrd.pl index.html index.htm

Redirection

One of the most useful functions of the .htaccess file is to redirect requests to different files, either on the same server, or on a completely different web site. It can be extremely useful if you change the name of one of your files but allow users to still find it. Another use (which I find very useful) is to redirect to a longer URL, for example in my newsletters I can use a very short URL for my affiliate links. The following can be done to redirect a specific file:

Redirect /location/from/root/file.ext http://www.othersite.com/new/file/location.xyz

In this above example, a file in the root directory called oldfile.html would be entered as:

/oldfile.html

and a file in the old subdirectory would be entered as:

/old/oldfile.html

You can also redirect whole directoires of your site using the .htaccess file, for example if you had a directory called olddirectory on your site and you had set up the same files on a new site at: http://www.newsite.com/newdirectory/ you could redirect all the files in that directory without having to specify each one:

Redirect /olddirectory http://www.newsite.com/newdirectory

Then, any request to your site below /olddirectory will bee redirected to the new site, with the
extra information in the URL added on, for example if someone typed in:

http://www.youroldsite.com/olddirecotry/oldfiles/images/image.gif

They would be redirected to:

http://www.newsite.com/newdirectory/oldfiles/images/image.gif

This can prove to be extremely powerful if used correctly.

.htaccess Tutorial – Part 1 – Introduction .htaccess file and its power

Introduction

In this tutorial you will find out about the .htaccess file and the power it has to improve your website. Although .htaccess is only a file, it can change settings on the servers and allow you to do many different things, the most popular being able to have your own custom 404 error pages. .htaccess isn’t difficult to use and is really just made up of a few simple instructions in a text file.

Will My Host Support It?

This is probably the hardest question to give a simple answer to. Many hosts support .htaccess but don’t actually publicise it and many other hosts have the capability but do not allow their users to have a .htaccess file. As a general rule, if your server runs Unix or Linux, or any version of the Apache web server it will support .htaccess, although your host may not allow you to use it.

A good sign of whether your host allows .htaccess files is if they support password protection of folders. To do this they will need to offer .htaccess (although in a few cases they will offer password protection but not let you use .htaccess). The best thing to do if you are unsure is to either upload your own .htaccess file and see if it works or e-mail your web host and ask them.

What Can I Do?

You may be wondering what .htaccess can do, or you may have read about some of its uses but don’t realise how many things you can actually do with it.

There is a huge range of things .htaccess can do including: password protecting folders, redirecting users automatically, custom error pages, changing your file extensions, banning users with certian IP addresses, only allowing users with certain IP addresses, stopping directory listings and using a different file as the index file.

Creating A .htaccess File

Creating a .htaccess file may cause you a few problems. Writing the file is easy, you just need enter the appropriate code into a text editor (like notepad). You may run into problems with saving the file. Because .htaccess is a strange file name (the file actually has no name but a 8 letter file extension) it may not be accepted on certain systems (e.g. Windows 3.1). With most operating systems, though, all you need to do is to save the file by entering the name as:

“.htaccess”

(including the quotes). If this doesn’t work, you will need to name it something else (e.g. htaccess.txt) and then upload it to the server. Once you have uploaded the file you can then rename it using an FTP program.

Warning

Before beginning using .htaccess, I should give you one warning. Although using .htaccess on your server is extremely unlikely to cause you any problems (if something is wrong it simply won’t work), you should be wary if you are using the Microsoft FrontPage Extensions. The FrontPage extensions use the .htaccess file so you should not really edit it to add your own information. If you do want to (this is not recommended, but possible) you should download the .htaccess file from your server first (if it exists) and then add your code to the beginning.

Custom Error Pages

The first use of the .htaccess file which I will cover is custom error pages. These will allow you to have your own, personal error pages (for example when a file is not found) instead of using your host’s error pages or having no page. This will make your site seem much more professional in the unlikely event of an error. It will also allow you to create scripts to notify you if there is an error (for example I use a PHP script on Free Webmaster Help to automatically e-mail me when a page is not found).

You can use custom error pages for any error as long as you know its number (like 404 for page not found) by adding the following to your .htaccess file:

ErrorDocument errornumber /file.html

For example if I had the file notfound.html in the root direct
ory of my site and I wanted to use it for a 404 error I would use:

ErrorDocument 404 /notfound.html

If the file is not in the root directory of your site, you just need to put the path to it:

ErrorDocument 500 /errorpages/500.html

These are some of the most common errors:

401 – Authorization Required
400 – Bad request
403 – Forbidden
500 – Internal Server Error
404 – Wrong page

Then, all you need to do is to create a file to display when the error happens and upload it and the .htaccess file.

Designing for Magento – How to create a design theme

Creating a new theme 

How to create a design theme

Warning: DO NOT DUPLICATE AN EXISTING THEME. Yes, this would make it slightly easier to create your new theme, but it will also make your new theme horribly incompatible with Magento updates. Many designers (including some major Magento design companies) did this for a long time, and left the Magento world in a bit of a mess when 1.4 was released. Instead, use the “least impact” approach, outlined in this article to maximize compatibility with updates.

The first step will be creating the folders for the new theme. We’ll call your new design new_theme. Create the following folders:

New folders:

1./app/design/frontend/default/new_theme/ – our new theme
2./app/design/frontend/default/new_theme/layout
3./app/design/frontend/default/new_theme/templates
4./skin/frontend/default/new_theme/ – our new skins folder
5./skin/frontend/default/new_theme/css/
6./skin/frontend/default/new_theme/images/Also, create the following new files:

New files:

1./app/design/frontend/default/new_theme/layout/local.xml
2./skin/frontend/default/new_theme/css/local.cssFinally, add some boiler plate to local.xml, so that local.css will get included:

local.xml:

1.<?xml version=”1.0″ encoding=”UTF-8″?>
2.
3.<layout>
4.    <default>
5.
6.        <!– Remove callouts and rarely used stuff –>
7.        <remove name=”right.poll”/>
8.        <remove name=”right.permanent.callout”/>
9.        <remove name=”left.permanent.callout”/>
10.
11.        <!– add the local stylesheet –>
12.        <reference name=”head”>
13.            <action method=”addCss”><stylesheet>css/local.css</stylesheet></action>
14.        </reference>
15.
16.    </default>
17.</layout>A well coded theme should have the following traits:

1.A single layout file, named local.xml, where all layout updates are placed.
2.no layout files with the same name as any layout file in the base theme
3.no css files with the same name as any css file in the default skin
4.no .phtml template files, except for those that were modified to support the new theme. (Usually this number will be very small.)
How to setup a new theme in administration area

After creating the folders we need to switch the theme from the administration area.

Step 1. Go to System > Configuration > Design via the top navigation bar Step 2. Under “Themes” and in the “Default” text field, type: new_theme Step 3. Press the “Save config” button in the upper right corner

Adding custom stylesheets and js libraries (part I)

Any additional external stylesheet files (css) or javascript/ajax libraries (js) that we want to include in our new project must be also copied to the proper folders.

Stylesheets Copy the files to /skin/frontend/default/new_theme/css/ folder. To link these files in, you can either modify local.xml to add the new file, or add an import in local.css, like this:

1.@import url(‘my_new.css’);Javascript / AJAX libraries Create a new folder under /js/ named new_theme and copy your files to it. If you are using javascript libraries then this is also a good place to put the library files.

The Javascript files can be added to your theme by adding the following to local.xml:

1.<?xml version=”1.0″ encoding=”UTF-8″?>
2.
3.<layout>
4.    …
5.    <default>
6.    …
7.        <reference name=”head”>
8.            …
9.            <action method=”addJs”><script>varien/js.js</script></action>
10.            …
11.        </reference>
12.    …
13.    </default>
14.    …
15.</layout>Using XML to change layout 

With the use of XML we can change almost every aspect of our new_template. For example we can set an alternate column layout for particular pages, change META information, page encoding, block types used on each page etc. To accomplish this, you will simply add various sections to your local.xml file. A good place to look at to understand this is:

1.app/design/frontend/base/default/layout/page.xmlIn 1.3.x and earlier, this is located at::

1.app/design/frontend/default/default/layout/page.xmlChanging META section

(Isn’t this section horribly obsolete?) The main file used to control values for META tags and other miscelaneous details is config.xml which is located in the /app/design/frontend/new_template/default/etc/ folder.

Below is a short description of every META tag and possible values:

1.<title>Magento Commerce</title>This is the name of our ecommerce site. This text will appear in the browser’s title bar or the browser tab for the site. This text is also highly important for search engine keyword optimization.

1.<media_type>text/html</media_type>This is default page header encoding so we should leave this as is.

1.<charset>utf8</charset>UTF8 is a variable-length character encoding for Unicode. It is able to represent any character in the Unicode standard, yet the initial encoding of byte codes and character assignments for UTF-8 is backwards compatible with the ASCII table. For these reasons, it is steadily becoming the preferred encoding for e-mail, web pages, and other places where characters are stored or streamed.

Of course we can change it to any other encoding (ex. ISO-8859-1 or ISO-8859-2) but there is no need as long as we’re saving our files with proper UTF8 encoding.

More information about UTF8 is in the Wiki: http://en.wikipedia.org/wiki/UTF-8

1.<description>Default Description</description>The description tag controls the description meta tag and allows us to enter a short description about our site. It’s often a way to get a nice description of your page to show up in the search results if your page does rank highly in a search engine. Your best bet is to write a succinct sentence or two that uses the keyword phrases that sum up the page content.

1.<keywords>Magento, Varien, E-commerce</keywords>The keywords tag controls the keyword meta tag and is the place to put the most important words that refer to the site content. Best practices suggest to enter no more than 500 characters in no more than 20 words for best results.

1.<robots>*</robots>The robots tag controls the robots meta directive and is a simple mechanism to indicate to visiting web bots and search engine spiders if a page should be indexed, or links on the page should be followed. The content of the Robots meta tag contains directives separated by commas. The currently defined directives are index, noindex, follow and nofollow. The two index directives specify if an indexing robot should index the page or not. The two follow directives specify if a robot is to follow links on the page or not. The defaults are index and follow. The values all and none set all directives on or off: all=index,follow and none=noindex,nofollow We can simply override Magento’s default directive by placing one of the four following lines here, however it’s not recommended. The options are:

■index,follow
■noindex,follow
■index,nofollow
■noindex,nofollow
The file config.xml also contains two additional tags, not connected with any meta tags but used as a default settings for every page in our shop.

1.<logo_src>images/logo.gif</logo_src>The logo_src tag sets up a reference to the logo file we wish to use on our site. The image logo.gif is located in the folder /skin/frontend/new_template/default/images/ so if we want to change it we must copy a new logo file to that folder. We can also create a new folder inside the images folder (ex. new_images) and put all our new files used by new template into it and change this tag appropriately. The easiest way to customize the logo it to simply overwrite the default logo.gif file with a new logo.gif file.

1.<logo_alt>Magento Commerce</logo_alt>The logo_alt tag defines the alt attribute for our logo image and is mostly used by screen readers or browsers with images disabled. If one of our customers uses a screen reader or has images disabled he will see the alt text instead of image.

Understanding layout XML files 

Introduction

Using xml instead of other methods (JSON, .ini files, include / require functions) allows us to change many aspects on our page without manually changing the .phtml files. This chapter refers to our default theme so after changing the theme (as we have done above) the paths will also change.

Layout / page structure

The core Layout is defined by page.xml which is located in /app/design/frontend/base/default/layout/page.xml.

There are two large tasks layout carries out.

First it defines the visual layout for your store. By default Magento uses a 3-column layout, so it defines use of 3columns.phtml (Located in your template/page/ folder):

1.<block type=”page/html” name=”root” output=”toHtml” template=”page/3columns.phtml”>If you wanted to change your store a 2-column layout, for instance, you would reference this section in local.xml, and use an action to change to the .phtml you’d like to use (in this case, 2columns-left.phtml or 2columns-right.phtml).

1.<reference name=”root”>
2.    <action method=”setTemplate”><template>page/2columns-right.phtml</template>
3.    <!– Mark root page block that template is applied –>
4.    <action method=”setIsHandle”><applied>1</applied></action>
5.</action>You could also add a new custom layout:

1.    <new_layout translate=”label”>
2.        <label>New Layout</label>
3.        <reference name=”root”>
4.            <action method=”setTemplate”><template>page/new-layout.phtml</template></action>
5.            <!– Mark root page block that template is applied –>
6.            <action method=”setIsHandle”><applied>1</applied></action>
7.        </reference>
8.    </new_layout>More information about the action tag and associated methods is located in section d of this chapter.

Secondly it creates “block containers” filled with application data for output to your .phtml template files. First, if take a look at your standard 3column.phtml file you’ll see it calls the method (function) getChildHtml() a number of times:

(excerpt from 3columns.phtml – Starting at line 56):

1.<?=$this->getChildHtml(‘header’)?>
2./div><!– [end] header –><!– [start] middle –><div>
3.<div id=”main”>
4.<?=$this->getChildHtml(‘breadcrumbs’)?>
5.<!– [start] left –>
6.<div>
7.<?=$this->getChildHtml(‘store’)?>
8.<?=$this->getChildHtml(‘left’)?>
9.</div>
10.<!– [end] left –>Each of these references point towards the “block containers” defined in your page.xml and subsequent Module .xml files. You’ll notice a container for the “left” column, for the “right”, for “content”, and other standard areas. It serves up output for your .phtml template files to use. Take a look at it:

/app/design/frontend/default/default/layout/page.xml

1.<block type=”page/html_breadcrumbs” name=”breadcrumbs” as=”breadcrumbs”/>
2.<block type=”core/text_list” name=”left” as=”left”/>
3.<block type=”core/messages” name=”global_messages” as=”global_messages”/>
4.<block type=”core/messages” name=”messages” as=”messages”/>
5.<block type=”core/text_list” name=”content” as=”content”/>
6.<block type=”core/text_list” name=”right” as=”right”>So basically page.xml creates Data Blocks, your .phtml Outputs that data where you want it. Hence, the names for left, right and so forth in your .phtml.

To add, remove, or modify blocks in your theme, use your local.xml file, not a copy of page.xml. The reference tag allows you to define what part of the theme you are working with, then you can declare additional blocks, or use actions to modify or remove blocks.

You’re aware now that page.xml contains a handle called “<default>”. The XML commands nested within the <default> layout sets up the default layout for the whole site. The subsequent handles(as listed in the top of page.xml), simply updates the default layout with the according layout for the page.

1.<layoutUpdate>
2.<reference name=”top.menu”>
3.<block type=”catalog/navigation” name=”catalog.topnav”>
4.<action method=”setTemplate”><template>catalog/navigation/top.phtml</template></action>
5.</block>
6.</reference>
7.<reference name=”right”>
8.<block type=”catalog/product_compare_sidebar” name=”catalog.compare.sidebar”>
9.<action method=”setTemplate”><template>catalog/product/compare/sidebar.phtml</template></action>
10.</block>
11.</reference>If you read the code and think about whats going on it makes sense. <layoutUpdate> is UPDATING your code with new blocks. How does it know where to put the new blocks? Well remember in your default you defined “block containers” for left, right, etc. So when it says

1.<reference name = “right”>it’s telling Magento to insert the following block into the RIGHT column when you get into “Catalog” view. (Remember, its located at layout/catalog/) so it appears once you’ve entered the catalog section of the shop. It also defines a TEMPLATE for the new block to use, so for the example above the compare box has its own template located at catalog/product/compare/sidebar.phtml (in your template folder).

These same handles can be used in local.xml to restrict the scope of a particular update.

For instance, let’s say you want a wishlist everywhere in your store, but you don’t want it in the customer account pages. You would look for the handle used on account pages (it is in customer.xml) and add that handle to local.xml. Then remove the wishlist so it does not load in the account pages.

The example below removes “Login” and adds “Register” instead, but only if the customer is not already logged in:

1.    <customer_logged_out>
2.        <reference name=”top.links”>
3.            <action method=”removeLinkByUrl” module=”catalog”><url helper=”customer/getLoginUrl” /></action>
4.            <action method=”addLink” translate=”label title” module=”customer”><label>Register</label><url helper=”customer/getRegisterUrl”/><title>Register</title><prepare/><urlParams/><position>100</position></action>
5.        </reference>
6.    </customer_logged_out>Reference name values/attributes:

As we’ve seen, the references can use different attributes for displaying blocks on our page. Possible values are:

■root – we will change it mostly to set up another .phtml file as a root template ex. (1column.phtml , 2columns-left.phtml ,2columns-right.phtml etc.)
■head – as this reffers to our <HEAD> section on page, we will use this reference name to reflect our changes in this section
■top.menu – defines our content for top menu section
■left – defines our content for left column
■right – as above but for right column
■content – defines blocks placed in main content of our page
■before_body_end – is used to add a block before end of our page so before </BODY>
There are more reference names that we could use but they are more page-specific than for global use for example:

■customer_account_navigation
■customer_account_dashboard
are used on our clients account page

product.info.additional – sets up additional block for placing related items, shipping estimator etc.

Action methods:

Action methods allow us to change many theme settings without appending manual changes to our .phtml files. The method listed in the method attribute refers to a method in the Model that is associated with the particular block in question. The most important methods are described below.

setTemplate

Action method setTemplate allows us to change the default .phtml file used in particular block. For example by navigating to app/design/frontend/default/default/layout/catalog/product/view.xml we can see the reference:

1.<reference name=”root”>
2.<action method=”setTemplate”><template>page/2columns-right.phtml</template></action>
3.</reference>and by using another <template> value we are allowed to change default .phtml file used on our products page. Possible values are:

1column.phtml 2columns-left.phtml 2columns-right.phtml 3columns.phtml one-column.phtml dashboard.phtml

As we see in app/design/frontend/default/default/layout/checkout/cart.xml , there also additional 2 values for empty and non-empty cart

1.<action method=”setCartTemplate”><value>checkout/cart.phtml</value></action>
2.<action method=”setEmptyTemplate”><value>checkout/cart/noItems.phtml</value></action>
3.<action method=”chooseTemplate”/>The method chooseTemplate is used to set a template (setCartTemplate / setEmptyTemplate) depending on quantity of items in our cart. If we have more than 0 than the

1.<action method=”setCartTemplate”><value>checkout/cart.phtml</value></action>is used. If we have no items in cart then the following will be used.

1.<action method=”setEmptyTemplate”><value>checkout/cart/noItems.phtml</value></action>The function provided by the Model is shown below:

1.public function chooseTemplate()
2.    {
3.        if ($this->getQuote()->hasItems()) {
4.            $this->setTemplate($this->getCartTemplate());
5.        } else {
6.            $this->setTemplate($this->getEmptyTemplate());
7.        }
8.    }That should clarify how we can use this particular switch. Depending on our needs we can write custom functions in our blocks and than assign a template depending on parameters returned by a function.

addCss

This method allows us to add an additional CSS file to our page on per-page basis or globally for our template. If we use a reference name “head” and action method addCss by using

1.<reference name=”head”>
2.<action method=”addCss”><link>style.css</link></action>
3.</reference>then our page will have an additional line of code to attach the CSS file, for example:

1.<link rel=”stylesheet” type=”text/css” media=”all” href=”http://www.ourstore.com/skin/frontend/default/default/css/style.css” ></link>As we can see, the <link> path refers to the /skin/frontend/default/default/css/ folder.

addCssIe

This method is very similar to the above but it will output a css file when a User-Agent (browser) is Internet Explorer or Maxthon. So using this method we can attach a specific css file for those browsers. This is very helpful if our page will requires changes in css dependant on a specific browser.

Usage:

1.<reference name=”head”>
2.<action method=”addCssIe”><link>style.css</link></action>
3.</reference>Output in page source:

1.<!–[if IE]>
2.<link rel=”stylesheet” type=”text/css” media=”all” href=”http://www.ourstore.com/skin/frontend/default/default/css/style.css” ></link>
3.<![endif]–>addJs

The below method allows us to attach a .js script in the same way as we attached a CSS file. The script path refers to the /js/test/ folder but you can specify any subdirectory of /js/

Usage:

1.<reference name=”head”>
2.<action method=”addJs”>test/script.js</action>
3.</reference>It will add a script to our page with src attribute of

1.<script src=”http://www.ourstore.com/js/test/script.js” />addJsIe – adding a .js file to head section of page and using it if User Agent (browser) is Internet Explorer.

If we can add different css files depending on User-Agent we can do the same with our .js files. Than we can use different scripts for our IE/Maxthone users and another for other browsers.

Usage:

1.<reference name=”head”>
2.<action method=”addJsIe”>our/script.js</action>
3.</reference>It will add a script to our page with src attribute of

1.<script src=”http://www.ourstore.com/js/our/script.js” />but also inside IE comments

1.<!–[if IE]><![endif]–>setContentType This method can override default headers sent by our page to the browser. So we can set a text/xml instead of text/html (or another as we wish).

Usage:

1.<reference name=”head”>
2.<action method=”setContentType”><content>text/xml</content></action>
3.</reference>setCharset allows us to override default page encoding on per-page basis or globally. As long as we are saving our files with proper encoding this will not be necessary.

Usage:

1.<reference name=”head”>
2.<action method=”setCharset”><charset>ISO-8859-2</charset></action>
3.</reference>So in this case our page will have Central European encoding instead of default UTF-8

addLink

addLink methods can be used to set a setting to which we can refer in our .phtml template files also without manually changing the .phtml files.

Example usage :

Warning, this example requires account.xml to be duplicated, which can break things after updates. Someone should rewrite this to use local.xml instead. By adding a block which was found in app/design/frontend/default/default/layout/customer/account.xml into our <reference name=”content”> in app/design/frontend/default/default/layout/checkout/cart.xml we can allow the customer to skip to the account information directly from the cart.

1.<block type=”customer/account_navigation” name=”customer_account_navigation” before=”-”>
2.<action method=”setTemplate”><template>customer/account/navigation.phtml</template></action>
3.<action method=”addLink” translate=”label”><name>account</name><path>customer/account/</path><label>Account Dashboard</label></action>
4.<action method=”addLink” translate=”label”><name>address_book</name><path>customer/address/</path><label>Address Book</label></action>
5.<action method=”addLink” translate=”label”><name>account_edit</name><path>customer/account/edit/</path><label>Account Information</label>
6.</block>The cart.xml file should look like below

1.<layoutUpdate>
2.<reference name=”root”>
3.<action method=”setTemplate”><template>page/1column.phtml</template></action>
4.</reference>
5.   
6.<reference name=”content”>
7.<block type=”customer/account_navigation” name=”customer_account_navigation” before=”-”>
8.<action method=”setTemplate”><template>customer/account/navigation.phtml</template></action>
9.<action method=”addLink” translate=”label”><name>account</name><path>customer/account/</path><label>Account Dashboard</label></action>
10.<action method=”addLink” translate=”label”><name>address_book</name><path>customer/address/</path><label>Address Book</label></action>
11.<action method=”addLink” translate=”label”><name>account_edit</name><path>customer/account/edit/</path><label>Account Information</label><base>{{baseSecureUrl}}</base></action>
12.</block>
13.<block type=”checkout/cart” name=”checkout.cart”>
14.<action method=”setCartTemplate”><value>checkout/cart.phtml</value></action>
15.<action method=”setEmptyTemplate”><value>checkout/cart/noItems.phtml</value></action>
16.<action method=”chooseTemplate”/>
17.
18.<block type=”checkout/cart_coupon” name=”checkout.cart.coupon” as=”coupon”>
19.<action method=”setTemplate”><template>checkout/cart/coupon.phtml</template></action>
20.</block>
21.<block type=”checkout/cart_shipping” name=”checkout.cart.shipping” as=”shipping”>
22.<action method=”setTemplate”><template>checkout/cart/shipping.phtml</template></action>
23.</block>
24.<block type=”checkout/cart_crosssell” name=”checkout.cart.crosssell” as=”crosssell”>
25.<action method=”setTemplate”><template>checkout/cart/crosssell.phtml</template></action>
26.</block>
27.</block>
28.</reference>
29.</layoutUpdate>Of course according to the previous references we can also change

1.<action method=”setTemplate”><template>page/1column.phtml</template></action>in the above code to suit our needs. I’ve used for example

1.<action method=”setTemplate”><template>page/one-column.phtml</template></action>to show only our cart without other blocks.

Layout blocks

As we’ve seen before, most of our xml files have a <block> tag. It defines a type of block, its name and alias “as” so we can refer to it on our page. Basic block structure looks like this:

1.<block type=”catalog/product_view_super_config” name=”product.info.config” as=”super_config”>
2.<action method=”setTemplate”><template>catalog/product/view/super/config.phtml</template></action>
3.</block>type=”catalog/product_view_super_config” – defines the type of our block on page. This example would refer to the file /app/code/core/Mage/Catalog/Block/Product/View/Super/Config.php which defines the class Mage_Catalog_Block_Product_View_Super_Config name=”product.info.config” – defines a name for our block and should be unique as=”super_config” – defines a shortname for our block which can we use with getChild function on particular page

Blocks used in our XML files can change or override most every aspect of our design. We can use them to simply change used phtml files on per-page basis, to add additional scripts, stylesheets to our page , to move particular sections of page without needing to change phtml files.

Understanding .phtml files 

Introduction

Phtml files are template files that handle the output to browser. They are nothing more than html files with nested php tags. We use them to style our page and the look of our site.

Changing .phtml files requires basic knowledge about XHTML, CSS and understanding how to use PHP functions on a page.

IMPORTANT: Before changing a .phtml file, it has to be copied from the base (or default) theme, into the new theme. When Magento finds one of these files in your new theme, it will ignore the .phtml file from the base theme, so it is important to ONLY copy over the files that you absolutely need to modify. This will minimize errors when updating Magento. The additional effort required to individually copy the 4-5 files you eventually modify will more than make up for itself the first time Magento needs to be updated.

Let’s have look at header.phtml placed in templates/page/html.

1.<div>
2.    <div>
3.        <h1 id=”logo”><a href=”<?=$this->getUrl(”)?>”><img src=”<?=$this->getLogoSrc()?>” alt=”<?=$this->getLogoAlt()?>”/></a></h1>
4.        <p><a href=”#main”><strong><?=__(‘Skip to main content’)?> &raquo;</strong></a></p>
5.
6.
7.
8.
9.        <div>
10.            <div>
11.               <strong><?=$this->getWelcome()?></strong> <?=$this->getChildHtml(‘topLeftLinks’)?>
12.            </div>
13.            <div>
14.                <?=$this->getChildHtml(‘topRightLinks’)?>
15.            </div>
16.        </div>
17.
18.    </div>
19.</div>
20.<?=$this->getChildHtml(‘topMenu’)?>In this file we see basic XHTML tags, usage of CSS classes but most important – Magento functions used to get layout XML blocks and render it in our phtml file.

Mostly in our template we’ll see <? ?> tags used for functions calls. Basing on above example: <?=$this→getUrl(’‘)?> – used without parameters will return base path of our store <?=$this→getLogoSrc()?> – will render a logo image based on path used in etc/config.xml <logo_src>images/logo.gif</logo_src>

If we’d like to change our logo we can do this in two ways. First possibility is to change <logo_src> path to anything else. Second possibility is to hardcode the path directly in phtml file so

1.<img src=”<?=$this->getLogoSrc()?>” alt=”<?=$this->getLogoAlt()?>”/>but this resolution isn’t recommended since we should use core functions and learn their usage.

<?=$this→getLogoAlt()?> – this function will allow us to change the alt tag for our logo so if it will be unavailable , the alt tag will appear. Any changes we can also append by changing <logo_alt>Magentso Commerce</logo_alt> or setting it direclty in phtml file up.

<?=__(Skip to main content)?> – all tags that look like this will be used to dynamically translate page content to other languages. We should understand it as <?=__(‘English text to translate’)?>

<?=$this→getChildHtml(’topLeftLinks’)?> – The getChildHtml() function is the most important function used in our template. It calls particular block defined in XML file and renders it as HTML , then outputs it to the browser. We can call blocks from everywhere and from corresponding XML files.

To use getChildHtml(’topLeftLinks’) we must have defined first the child “as” so take a closer look at page.xml (layout/ folder). Here’s what you should see:

1.<block type=”page/html_toplinks” name=”top.left.links” as=”topLeftLinks”/>As we see, getChildHtml(’topLeftLinks’) uses its alias “as” and calls it from the XML. The getChildHtml() function only allows Magento to call a block if that block was defined in the corresponding XML file.

We can also override this mechanism by using another function call:

<?=$this→getLayout()→getBlock(’top.left.links’)→toHtml()?>

This structure will call the top.search block (based on its name, not its alias “as”) from anywhere in any of our templates so we do not need to define it everywhere in our XML files. Remember to use the “name” attribute instead of the “as” attribute with this workaround.

We must be aware that every phtml file and every function will always refer to the corresponding XML file or files. We can identify used phtml files simply by searching for the following:

1.<action method=”setTemplate”><template>wishlist/sidebar.phtml</template></action>which tells us which phtml file will be used.

Folder structure

Every View used in our application has separate folders and subfolders to store template files. Let’s have a look at the folder structure:

■callouts – folder where are files for our callouts and ads are placed
■catalog – folder to store files used on our category, layered navigation, product, comparision pages
■catalogsearch – here we find files that are used to skin our search engine and result pages
■checkout – all the pages utilised during checkout and shopping in our shop. Here we’ll also find the shopping cart templates and blocks for cross-selling and coupons.
■cms – folder for static pages templates.
■core – folder containing store-switching templates (not yet active)
■customer – all customer pages (ex. account dashboard, address forms, orders list and reviews)
■datafeed – folder to store our csv, txt, xml files, used for comparision engines and other external applications
■directory – here we find currency switcher for our shop
■email – here we’ll find all pages that require email transport so for example order, password recovery, newsletter signup
■install – template files for Magento’s installer
■newsletter – subscribe.phtml placed in this folder will allow us to change the look of newsletter signup box on our page
■page – the most important folder in which we’ll find all main files used to style our site. More about it will be described in following subchapter.
■payment – templates used to style our payment forms (ex. CC payment.)
■poll – 2 files to change the look of our poll depending on state (didn’t vote yet / show result)
■rating – rating block used on our products pages
■review – all files used to render the blocks used by reviews
■sales – pages for order details, invoices, recent orders
■searchlucene – result output for Zend_Lucene controller used in Magento
■tag – product tags templates are stored here
■wishlist – template files to handle the output of our wishlist actions.
Appending basic changes to our templates

Every file used to skin the basic look of our template is placed in template/page folder. Here we’ll see

1column.phtml 2columns-left.phtml 2columns-right.phtml 3columns.phtml one-column.phtml dashboard.phtml

These are essentially the HTML skeleton files for our pages. By changing those files we can set up a new look of the page structure.

There is also an html subfolder placed under template/page in which we can change footer, header and links blocks of our template.

Every one of them uses simple function calls (ex. getChildHtml() ) so we can also identify the block by searching in layout XML files .

For example when we’ll see

1.<reference name=”root”>
2.<action method=”setTemplate”><template>page/2columns-right.phtml</template></action>
3.</reference>this tells us that the page will use 2columns-right.phtml as a skeleton for our page.

Calling layout blocks using Magento functions

As it was described above, there are two ways of calling blocks .

1.<block type=”page/html_toplinks” name=”top.left.links” as=”topLeftLinks”/><?=$this→getChildHtml(’as’)?> – by using the block alias “as” from the XML file we can display a block on our page providing that it was defined already in the corresponding XML file

<?=$this→getLayout()→getBlock(’name’)→toHtml()?> – by using the block name from the XML file, we can call any block whether or not it was already defined in corresponding XML file

e. Adding custom CSS and JS files to a layout (part II)

There are 2 ways of adding custom js and css files to our template. The recommended way is by extending the head section in the default XML file. But you also have the ability to add the files directly in the particular root template file.

1.<script type=”text/javascript” src=”<?=$this->getJsUrl()?>varien/js.js” ></script>
1.<script type=”text/javascript” src=”<?=$this->getJsUrl()?>varien/form.js” ></script>
3.<script type=”text/javascript” src=”<?=$this->getJsUrl()?>varien/menu.js” ></script>As we see here , we can also use getJsUrl method which adds a scripts path to our src attribute. This should output http://yoursite.com/js/ so the source will look like the following:

1.<script type=”text/javascript” src=”http://yoursite.com/js/varien/js.js” ></script>
2.<script type=”text/javascript” src=”http://yoursite.com/js/varien/form.js” ></script>
3.<script type=”text/javascript” src=”http://yoursite.com/js/varien/menu.js” ></script>Adding a css file isn’t harder than adding a js file. We do this also by using a function that outputs a path to our skins folder.

1.<link rel=”stylesheet” href=”<?=$this->getSkinUrl(‘css/styles.css’)?>” type=”text/css” media=”all”/>And the output will be

1.<link rel=”stylesheet” href=”http://yoursite.com/skin/frontend/default/default/css/styles.css” type=”text/css” media=”all”/>so getSkinUrl() sets actual path to our skins folder : http://yoursite.com/skin/frontend/default/default/

Opening .phtml files in Dreamweaver

By default, Dreamweaver cannot read PHTML files. You can add the file type to the “Open in Code View” section of the preferences if you wish to have fast access, however you cannot view the file in design view if you do that. So if you use Dreamweaver (versions 4, MX, MX2004, 8, or 9, aka CS3) to design your sites, and you wish to open Magento’s Template files (they have .phtml extensions) in Dreamweaver, you can follow these steps to add support for .phtml and make Dreamweaver render PHP code (with coloring, hinting, et al) as well as allow you to see the design in code view if desired. Below are three steps to follow.*

IMPORTANT NOTES: This guide is for Dreamweaver on Windows (XP or Vista) or Mac OS X. Note: I have excluded version numbers from the file locations shown, and if you are using a version older than Dreamweaver 9 (CS3) replace “Adobe” with “Macromedia” in the file locations shown. Some spaces have also been removed to keep the references on one line.

* Dreamweaver 4 users: if you are using the archaic Dreamweaver 4, you only need to follow step one. However, it’s highly recommended that you just upgrade to version 8 or newer for superb CSS and Web Standards support.

Step One: Add .phtml to the extension.txt configuration file

Open the following extension configuration file in a notepad and change the lines as specified below:

XP, Vista: C:Program FilesAdobeDreamweaverConfigurationExtensions.txt

Mac OS X: Applications > Adobe Dreamweaver CS3 > configuration > Extensions.txt In the first line add PHTML like so:

HTM,HTML,SHTM,SHTML, … ,TXT,PHP,PHP3,PHP4,PHP5,PHTML,JSP,WML,TPL, … ,MASTER:All Documents

In the PHP Files line add PHTML like so:

PHP,PHP3,PHP4,PHP5,PHTML,TPL,PHTML:PHP Files

Step Two: Add .phtml to extension.txt in your Application Data

This file is pretty much exactly like the extensions.txt file located in Dreamweaver’s configuration folder, except it is in your users Application Data folder (AppData folder for Vista users). Just as in Step One, find the file and change the lines as specified below.

XP: C:Documents and Settings[user]Application DataAdobeDreamweaverConfigurationextensions.txt

Vista: C:Users[user]AppDataRoamingAdobeDreamweaverConfigurationExtensions.txt

Mac OS X: Users > Library > Application Support > Adobe > Dreamweaver 9 > Configuration > Extensions.txt

In the first line add PHTML like so:

HTM,HTML,SHTM,SHTML, … ,TXT,PHP,PHP3,PHP4,PHP5,PHTML,JSP,WML,TPL, … ,MASTER:All Documents

In the PHP Files line add PHTML like so:

PHP,PHP3,PHP4,PHP5,PHTML,TPL,PHTML:PHP Files

Step Three: Add PHTML to MMDocumentTypes.xml

This file is an XML file which should be located in:

C:Program FilesAdobeDreamweaverConfigurationDocumentTypesMMDocumentTypes.XML

Mac OS X: Applications > Adobe Dreamweaver CS3 > configuration > DocumentTypes > MMDocumentTypes.XML

Add PHTML to this line (approx. line 75) twice, like so:

1.<documenttype id=”PHP_MySQL” servermodel=”PHP MySQL” internaltype=”Dynamic” winfileextension=”php,php3,php4,php5,phtml” macfileextension=”php,php3,php4,php5,phtml” file=”Default.php” writebyteordermark=”false” />

Restart or Open Dreamweaver and you shouldn’t have any problems with PHTML files any longer.