To answer a question, inserting rollover text into a web page using dreamweaver cs3 is easy. It is a matter of some simple css work. Unless of course you are using graphics then you are probably working with rollover images even though it looks like text.

When using dreamweaver you will notice on the right side panel an area for css. You right click on that area and create a new class, or a new stylesheet if none has been added yet. You then set the properties for the text. IF it is a link then you want to set the standard, visited, and hover properties or you will end up with one of those ugly purple links after it is clicked on. The visited attribute tells the browser to reset that style to the standard setting so it looks the same after it has been visited. The hover attribute lets you show underlined text or a different color text. There are other goodies but I am not getting into all of that right now.

If you are working with rollover images then you need to insert image elements, then select rollover image. You would select the standard image and the hover image along with the alt text and a name for the image being called in the javascript. Simple as that.

Good Luck!

Customizing wordpress themes at first is a hard task in your mind. You see all of this code and you need to figure out what makes the cms work and what is filler design.

When you are starting with a custom design that you created with photoshop and constructed with notepad or dreamweaver you can start with a blank wordpress theme then you will be happy knowing that the code involved is minimal. You just have to copy and paste the php code into your template within the right areas.

You also have many resources to work with including the theme docs, also known as template tags, on wordpress.org itself. These are just small bits of php code that tells wordpress what to display on your design template.

In addition to the standard tags you will want to make sure you widgetize your theme so you can easily add functionality to your blog site using the administration rather than chopping through code in the future. Be sure to style your widgets accordingly or it will look different from your design. You can find the styling for the widgets in the wp-includes/widgets.php file. You will notice an area where it says before widget and after widget. This is where your widget calls the style from via classes in your style.css file.

If all else fails and you get confused, we currently develop custom wordpress themes for a mere $350.00 so don’t be afraid to ask (if you are reading this at a much later date then this price may have moved up).

CSS (cascading style sheets) is a language used to style web pages. With css you can position elements, change font sizes and colors, and create dropdown menus without messy javascript cluttering up your code.

This post will cover rollover text links. In your stylesheet you will have a class that you created for the navigation text. For this example let’s call it .NavText from now on.

You will notice that if you add a link to that text, your text will no longer have the style you created for it. This is because you created the style for the NavText but you did not create it for a linked item. To create these styles you would insert the following style code.

.NavText a {      //This is for linked items. It shows the same as original style.
samestylesasNavText;
}

.NavText a:visited {    // This shows original style after the link was clicked.
samestylesasNavText;
}

.NavText a:hover {   // Here I added an underline for when you mouseover the link.
samestylesasNavText;
text-decoration: underline; }

Notice that I added the ‘hover’ style underneath the others. If you were to place that style in between or before then it would not show the desired result. This is because the style on the bottom overrides the ones above it. That is why it is called CASCADING style sheets.

Below is the start of a series of video tutorials. This is a BASIC web layout using photoshop cs3. It will be a multi-part series. We will begin with the layout design, then we will finish the design in a few days. Then we will slice and code the design using css in dreamweaver cs3.

To download the video tutorial directly simply right-click and “save as” here. The download is an AVI and is supported by Windows Media Player. The download is approximately 270 megs and the video is 17 minutes or so in length. You would also be able to see the video in it’s full height and width.

Any website using this video and does not give full credit and a link back clearly visible is using the video illegally.