photo credit: Zach Klein

I know this is not really on topic for this site but I thought I needed to share this just in case there are any readers that may want to set up a testing environment like this and maybe use it for testing sites in different browsers etc. For me I needed to do this for the purpose of installing a Windows 2003 Server and IIS and also MOSS as I am doing some development work with this product at the moment.

Any this was a pain in the butt for me to get Microsoft Virtual Server 2005 SP1 installed on m Windows Vista machine today and I spent ages searching web sites to get the answers I was after and had to visit quite a few before I got a mash up of solutions!!!! Painful. So I though I would put everything that I had just learnt here so that it would be finally in one spot on the internet.

After a lot of stuffing around and not being able to get past an error when loading the Web Interface to manage the Virtual Server I finally found that even though you turn on IIS you then need to also turn on the authentication protocols separately !. Ok good so I did that then when I went to load the web interface IE was asking me what i wanted to do with the vswebapp.exe file Save it or Find it. I then found out that CGI needed to be turned on under Application Development Features! Bingo finally I got it to work.

To save you the trouble I have compiled a list of services that needed to be turned on in Windows Vista for this to be able to work. Here they are.

First thing you need to do is download a copy of Virtual Server 2005 SP1. Now a default install of Vista will not have IIS installed so you will need to enable that in Control Panel > Programs and Features > Turn Windows Features on or off. Here is a list of the things that you will need to enable:

• Internet Information Services
• Expand Web Management Compatability and tick EVERYTHING under this node
• Expand World Wide Web Services > Application Development Features and tick CGI
• Tick Common HTTP Features
• Tick Health and Diagnostics
• Tick Performance Features
• Expand Security and tick Basic Authentication, Windows Authentication, Request Filtering, URL Authorization

After you have enable this you will then need to install Virtual Server. After the Install then you should be away. One thing that you may need to also do is run IE with elevated privileges. But you can’t do that from the Virtual Server Administration Website shortcut in the start menu so what I did was create a new shortcut on the desk top with this as the string:

“C:\Program Files\Internet Explorer\iexplore.exe” “http://localhost/VirtualServer/vswebapp.exe?view=1″

That should do the trick….I hope that helps anyone that is looking to install Virtual Server 2005 SP1 onto a Windows Vista Machine…

Daniel Anderson
Frustrated Windows Vista User

Don’t Miss Any More of These Tips - Subscribe to The RSS Feed.

Don’t Miss A Tip: Web & Blog Design Tips Newsletter Need Some Web or Blog Design Help? Sign Up for My Design Tips Newsletter

I am going to start this example with a new blank page, but this could quite easily be inserted into an existing page or template. With your page open go to the insert menu at the top and select the Spry Collapsable Panel (see below).

You will then see something like this inserted onto the page.

As a default the Panel is set to be displayed in an OPEN State so if you have a look at the Property Inspector you will notice that you can change this state to CLOSED. Go ahead and Save the file now and you will notice that you will be asked to Copy the Dependant Files.

If you know take a look in Code View you will notice that Dreamweaver has inserted some div elements on the page that correspond to the CSS File that is located in the Spry Assets Folder. Open up the CSS File that is placed in the SpryAssets Folder you will see that the file is fully commented and easy to understand! which is what we want.

Ok, what if you want to change the speed at which the Panels Open?. Well if you open the javascript file that is also located in the SpryAssets Folder and go down to Line 341 you will see a line that says

this.duration = 500;

Play around with this value and you will notice the speed go faster or slower. This setting is in milli seconds and the higher the number the slower the speed and vice versa.

If you liked this article you may want to check out the Spry Navigation Bar Article I wrote as well.

Daniel Anderson
Budding Spry Expert

Don’t Want to Miss a Tip or Article? Why not Sign Up for the Weekly Blog and Web Design Tips Newsletter.

Don’t Miss A Tip: Web & Blog Design Tips Newsletter Need Some Web or Blog Design Help? Sign Up for My Design Tips Newsletter

photo credit: P?rcel???g?rl°

Over the last few weeks I have been reading a lot about jQuery and how easy it is to use and that it adds some great functionality to a website. So I though I would take the plunge and spend a bit of time seeing what all the fuss is about. Over the coming weeks I will be giving you some more insights and tutorials on JQuery and you can make your mind up whether it is something that would benefit your site.

What I am trying to do here at Dreamweaver Spot is share with you the things that I am learning on my journey to becoming a better web developer. So make sure you SUBSCRIBE to MY RSS Feed so you can come on the journey with me an learn some great stuff along the way too.

Now I have really been a javascript person, but I have had it mentioned to me on numerous occasions that this jQuery stuff is pretty easy to learn so what the heck. To get started you will first need to download the jQuery File. After the download place the file into a folder in your website maybe a scripts folder, you need to add a couple of lines to the <head></head> tags of the page.

<head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
// Your jQuery Stuff goes here
</script>
</head>

What made me think of using jQuery in the first place was that on a project I am working on at a local High School they are using Sharepoint Portal and on the particular page that I was working on, the screen real estate is very important and I needed to fit a few things in that would not have fitted ordinarily. Hense I wanted to create some collapsible divs and I know that with jQuery this is possible.

Now that we have the references to the jquery.js file in place we are ready to use it. In the above code you should see where we will put the code. In between the script tags we will put what they call a “ready event” which basically checks that the document is ready to be manipulated. This ready event looks like this;

$(document).ready(function(){
// All your code goes in here..............
});

For the purpose of this example all I am going to show you is how easy it is so show and hide an entire div element. So here is my CSS and (X)HTML Markup for this example.

CSS

<style>
body{font-size:12px; font-family:"Trebuchet MS";}
#content1{
border:1px solid #CCCC33;
padding:10px;
margin-top:10px;
width:500px;
}
</style>

(X)HTML

<a href="#" id="click">Something Here</a>
<div class="box">
<div id="content1">

<p><a href="#" id="close">Close</a></p>
</div>
</div>
</body>

As you can see it is a very simple example, but the use of this it just about limitless!

Now for the jQuery code that does all the funky stuff. What I am going to do is Show and Hide the Content1 Div element. For that I created the jQuery code below, have a look then I will go through it.

$(document).ready(function(){

$('#content1').hide();

$('a').click(function(){
$('#content1').show('slow');
});

$('a#close').click(function(){
$('#content1').hide('slow');
})

});

As I mentioned earlier the $(document).ready(function()} is a function that waits until the page is ready to be manipulated before executing the code inside it.

The next line $('#content1').hide(); Hides the Content1 Div to start with. Notice how there is a relationship between jQuery and CSS in that is uses the, ID is this case, but it could use a class in exactly the same manner, as the argument inside the parenthesis.

We then move onto the next section of code that “Shows” the DIV when the linked text is clicked. $('a).click(function(){}); This is calling the “click” function and then invoking the “show” effect on the Content1 Div.

Read the code again and make sure you get a grip on the logic. It took me a little while to get the hang of it as well !!!

Inside that Div that is being Shown and Hidden there is another text link that will Hide the Div.

$('a#close').click(function(){
$('#content1').hide('slow');
})

If you look at this you can see that any “a” (link) element with an ID of “close” will invoke the “hide” Effect on the Content 1 Div.

And People that is all there is to it !!!! You can check out the example that I used in this jQuery example here.

If you have found this tutorial helpful, feel free to donate in the footer to keep this website active, so others can find this information useful. Thank You.

Don’t Miss A Tip: Web & Blog Design Tips Newsletter Need Some Web or Blog Design Help? Sign Up for My Design Tips Newsletter

photo credit: midi8

Readers here at Dreamweaver Spot will have noticed that there have been a few changes to the design over the last week. I have been playing around with a few new things that are coming out in the new CSS 3 Web Standard which at some stage will take over from the current CSS 2.

Let me tell you there are some great enhancements that I am exited about and the one that tickles my fancy at the moment is the ease at which rounded corners can now be created. For me when learning CSS getting rounded corners to work they way you wanted them to I found was a pain the the butt.

CSS 3 introduces a range of new things that you can do with borders, including gradients, shadows and border images. If you take a look at the Navigation Bar at the top, if you are using a modern browser like Fire Fox then you will notice that the corners are rounded, but if you a browser, lets say Internet Explorer 7 it degrades OK and just displays as a normal square corner. But with the imminent release of IE 8 it should work.

Have a look at the code below and there are no images or special spans or anything like that just a couple of extra lines of code to the CSS. I love it!!!

#navbar{
height:35px;
background-color:#191D26;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Try it out for yourself and let me know how things go….I would love to hear from you.

If you want to check out a good series of articles on CSS 3 then head over to Design Shack and check out their articles on it

Daniel Anderson
CSS 3 Fan

Don’t Miss A Tip: Web & Blog Design Tips Newsletter Need Some Web or Blog Design Help? Sign Up for My Design Tips Newsletter

photo credit: prakhar

I was reading an article today on Anywired today on 7 Signs of SEO Scams and it made me realize that there are still stack of people hiring so called SEO experts to get their site up high in the search rankings. For example guru’s that say they will give you a “ton of inbound links to your site”, which as you may be aware that incoming links are one of the MAJOR factors in Site Authority, but it is not the amount of links you have but the “quality” of links. These “quality” links take time to build, if you are creating quality content then the quality links will come.

I was reading a few of the comments and it got me thinking that although there are millions of sites out there outlining what you need to do to get your site to climb up the rankings in the search engines and appear on the front page of Google, web site owners are still expecting to much to soon. Unless you have an Authority site already that you can use as leverage or you can use a friend, collegue etc’s Authority site for leverage and get indexed by the spiders then things are not going to happen immediately.

Now I don’t claim to be an SEO expert, in fact far from it! but I have done quite a bit of reading about this and have undertaken a few simple things that I have no doubt have helped me with some of my sites to get them to rank better in search engines and stand out from the crowd. Over the last few weeks a site I run on Australian Rules Football ranked number 1 and 2 in Google for a particular game that was going on at the time! Now I thought that was quite an acheivemnt and it certainly bumped up the traffic volume which is what we are all after.

Things You Can and Should Do Now

Get some Keywords into your Page Title, for WordPress users, you MUST install the All in One SEO Pack If you have a static site that you have built in Dreamweaver then it is a must that you change the Title of each of your pages so they are not the same, that way you can target different keywords on different pages.

Another couple of things that are often overlooked are META Descriptions and META Keywords. I have found that using these on each page and keeping you main keywords amongst them works well. H1 Tags are also important and if you can get a keyword or two in there then even better!. Images!!!, again an often overlooked thing for beginners starting out with a wesite, get into the habit of naming your images and also putting in a descriptions an ALT tags on them. Another little tip I picked up is to link to internal pages from within your own site for example if was to mention AFL Football on my other site some where in an article I would link that anchor text back to the home page.

After implementing some of these changes you need to be patient! Don’t expect things to happen overnight, things alone and give the search engines time to crawl your site, it may take a couple of weeks before you can see any significant changes.

Once again if you would like a hand installing the ALL in One SEO Plugin, with optomizing your site or any other solution you find here then Contact Me.

Daniel Anderson
Budding SEO Guru

Don’t Miss A Tip: Web & Blog Design Tips Newsletter Need Some Web or Blog Design Help? Sign Up for My Design Tips Newsletter

photo credit: Tim Morgan

This article came about via a few emails I have had over the last week from readers asking for an article showing how to connect your website application to a back end database. It really is not all that difficult to do and once you have read this article you will have all the knowledge you need to achieve it.

Step 1. Set Up Your Local and Remote Site.

The first thing you need to do is set up your site in Dreamweaver CS3. If you do not know how this is done then I would recommend you SIGN Up for my Weekly Design and Blog Tips Newsletter where you will immediately receive a copy of my E-Book - “How to Create a Working Contact Form”. In that it outlines how to set up a site in Dreamweaver CS3.

Once you have your site set up then we can connect to a database. Now most hosting providers like BlueHost will give you a number of databases with your hosting account. In this article I have created a new database called Example, and also a user for the database, example.

Step 2. Let’s Get Connected

Now that we have your site set up and a database to connect to let’s connect to it. Over on the right hand side you will see the APPLICATIONS Tool Pane (see below) that is where we will be doing all the work.

Step 3. Use The Connection To Retrieve Data.

Now that we have a successful connection to the database you can start doing some funky stuff. Just for this article I will pull the data from a table that I had created and display it on the web page.

For that, we need to create a Record Set. So form the Application Panel > Bindings Tab click the (+) Button and select Record Set. Give the Record Set a Name and select the other fields as you can see below.

On your page, add a form and then from the Bindings Tab, expand the Record Set and simply drag and drop the table fields onto the page or select a field and click the Insert button at the bottom of the Bindings Window.

For the purpose of this article I have simply put one record on the page so you can see what happens.

And the end result is that one record is pulled out and displayed on the web page. Now you can do all sorts of stuff now that you have a connection to a database like placing forms on your page that will insert data into the database etc etc. So if people are interested I will get to work on an article that will outline how to do that. Make Sure you SUBSCRIBE to my RSS Feed so you don’t miss any more articles.

Don’t Miss Any More Design Tips !!! SIGN up to my Web and Blog Design Tips Newsletter and receive a copy of my E-Book - “Creating a Working Contact Form”

Don’t Miss A Tip: Web & Blog Design Tips Newsletter Need Some Web or Blog Design Help? Sign Up for My Design Tips Newsletter

If you haven’t read the previous article on How To Create the CSS Flyout Navigation Menu then I suggest you read that one first as I am not going to go over how to set it up from scratch.

Ok, so you have a horizontal navigation structure in your WordPress theme and you want to take advantage of the pages and sub pages facility built into WordPress and create a navigation structure to suite that facilitates the sub pages as well as the main pages in a drop down menu format. Here is how we can achieve that using PURE CSS!

First we need to find where in your WordPress Theme the navigation is located. You will usually find it in the header.php or index.php files depending on your theme. In this example mine was in the header.php file. Look for a line of PHP code that looks something like this:

<?php wp_list_pages('sort_column=menu_order&title_li='); ?>

It may not be exactly the same but it will have wp_list_pages in the line of code. This WordPress Template Tag lists all the WordPress Pages and displays them as links. If you would like to read more about this template tag, you can do so here.

All I did next was copy the CSS Code that I created for the CSS Flyout Menu (see article here.) and paste it at the end of the style.css file of the WordPress Theme and to make it easier on yourself at a later date add some commenting so that you know what that section is all about.

Now for the adjustment to the WordPress Template file (in this case the header.php file). All I did here was use the same (X)HTML code as the previous article and pasted it into the correct location. YOu need to make sure that the line of PHP code that has wp_list_pages in it goes in between the list elements like the code below.

<div class="cssfly">
<ul>
<li>
<?php wp_list_pages('title_li='); ?>
</li>
</ul>
</div>

Now straight away this will not work because the CSS Code Example that I used was for a Vertical Navigation structure. In this example I want to create a horizontal navigation structure. So the lines of code in the css that we need to adjust here are as follows.

.cssfly ul li:hover ul - You will need to change the sections that relate to the position eg: top:0; and left:105px;. If you delete the entry left:105px and change the top:0 entry then the menu will change from flying out to the right to a simple drop down menu.

The other part you may need to change is the width property of the .cssfly class. All i did there was comment out that property. You will probably need to tinker with the line heights and font sizes to make it fit in with your current theme. But apart from that it should work.

I hope that has made your life easier and now you can implement a fully functional css menu structure in your WordPress Theme.

If you need a hand to implement this solution or anything else that you have seen here at Dreamweaver Spot then be sure to Contact Me. I would be more than happy to offer my services.

Don’t Miss A Tip: Web & Blog Design Tips Newsletter Need Some Web or Blog Design Help? Sign Up for My Design Tips Newsletter

photo credit: Foxtongue

For some time now I have been using a few CSS Flyout Menu’s on different projects by just copying and pasting code from different websites that I have come across. Some of you may do just that with this article. But in a project I am currently working on I thought I would sit down and actually understand what is going on behind the scenes in the CSS to make this happen. During the early days of my development this is what I used to do to get by copying and pasting examples from other sites trying to get things done as quick as possible, well not any more. Feel free to copy and paste away with this but I urge you to take the time to read what I am about to write and take it all in so you to can understand what is involved.

I have wanted to write a pure CSS flyout menu for a while now so I though now is a good a time as any to get it done. In this example I will so you how to create it. You can have a look at the end result here. I have made the different elements different colors to separate them and make it easier to look at it in the CSS markup

Step 1. The (X)HTML Markup

For this example I used simple nested unordered lists, you can take a look at the code here. As you can see there is a top level UL with a List Element (LI), then nested inside that LI element there is another Unordered List (UL) with List Elements inside that as well. Make sense?. Take a look at the file and work through it. I found it really important to make sure I knew how this was set up. You can take a look at the result of the output here.

Step. 2. The CSS Markup

Now that you have got your head around the nesting of the Unordered Lists, let’s take a look at how we can use Cascading Style Sheets to give us that fly out effect.

.cssfly {
font-family: arial, sans-serif; width:106px; height:150px;
position:relative; margin:0; font-size:11px; margin:50px 0;
}
.cssfly ul li a, .menu ul li a:visited {
display:block; text-decoration:none; color:#000; width:104px;
height:20px; text-align:center; border:1px solid #fff;
border-width:1px 1px 0 0; background: #003399; color:#FFFFFF;
line-height:19px; font-size:11px;
}
.cssfly ul {padding:0; margin:0;list-style-type: none; }
.cssfly ul li {float:left; margin-right:1px; position:relative;}
.cssfly ul li ul {display: none;}

This first block of CSS is just some general styling. Things to note here is the use of position:relative on the list elements, and also the display:none on the nested UL. A good way to work out what each does is to comment out (/* */) those entries and look at the result.

The next block of CSS looks like this.

.cssfly ul li:hover a {color:#fff; background:#000;}
.cssfly ul li:hover ul {
display:block; position:absolute; top:0;
left:105px; width:105px;
}
.cssfly ul li:hover ul li a.hide {
background:#ccc; color:#000;
}
.cssfly ul li:hover ul li:hover a.hide {width:150px;}
.cssfly ul li:hover ul li ul {display: none;}
.cssfly ul li:hover ul li a {
display:block; background:#ccc; color:#000; width:150px;
}
.cssfly ul li:hover ul li a:hover {background:red; color:#000;}
.cssfly ul li:hover ul li:hover ul {
display:block; position:absolute; left:151px; top:0; color:#000;
}
.cssfly ul li:hover ul li:hover ul li a {
display:block; width:200px; background:#dfc184; color:#000;
}
.cssfly ul li:hover ul li:hover ul li a:hover {background:#bd8d5e;
color:#fff;
}