January 9, 2012

AUTHOR: CH. BILAL A. KHAN

Page 1 of 7

Chapter 1: Setting Up for Dreamweaver

1 Who Should Read This? This tutorial is mainly for the people who want to learn how to develop web in short period of time and with the least amount of code involved in it. To understand this tutorial, it is expected that audience does not know programming and databases. The concept of programming and database will be provided to an extent that audience should be able to make a dynamic web page. All the pre-requisites will be discussed in this tutorial and audience will be given enough understanding about all the important topics.

2 Tools Used in this Tutorial Before we start the tutorial session, first we should discuss the tools that we are going to use in this tutorial. The tutorial will be tool oriented and will be discussed and elaborated accordingly. The tools that will be discussed in this tutorial are mentioned as under:

First we need to install Adobe Dreamweaver CS4 or higher on which we will be designing or developing (coding if required) our website. You can get the Dreamweaver CS4 from www.adobe.com

Second we will be required software which will help us in developing an interactive website or in other words a dynamic website. Wamp Server will be required for developing database. The function of Wamp Server will be discussed in detail in the coming topics. For the time being download the Wamp Server from http://www.wampserver.com and install the available versions. We will be using an older version of it, but the tasks that will be doing will not create any ambiguity while using the new version

The last software is optional and it is your own choice if you want to install it or not. The software is Adobe Photoshop. This will be used occasionally, for making buttons or back drop images etc. If you do not want to install it, it is totally up to you as we will not be discussing Adobe Photoshop in our tutorial

3 Key Concepts before Learning Web Development Before we start discussing Adobe Dreamweaver, we will be discussing some concepts which will become a prerequisite for any web developer. These concepts are related to the some of the techniques with which we can define our computer as a web server.

3.1 How Does a Website Works? In order to understand how the website works, we need to understand what happens when we open a web browser, write an address in the website and then press enter. Let us make it clear that when we browse any website, the web site is hosted at a remote location anywhere in the world. The companies which host the websites are known as Web Hosts. There are many companies which host the websites; www.godaddy.com is an example of Web Hosts.

All the Web Hosts have servers at their hosting company and those servers carry the webpages that we will make in near future in the same tutorial. These web pages will be stored on remote servers and when some web page is requested, it is fetched from the very same server it has been stored in. For easy visualization see the three steps followed in the figure below.

January 9, 2012

AUTHOR: CH. BILAL A. KHAN

Page 2 of 7

The figure given above shows that we need to have a web server to make our website functional. This is absolutely right. The web server is required when the website is to be hosted with some web host. But what do should be done when the website is under development and needs to be tested. When the website is in the development phase, it is not necessary to purchase the web server space and test it live over the internet, rather this kind of approach is not at all recommended.

3.2 Making Your PC as Local Web Server: If the website is under development and needs to tested, there is a better approach. The operating system provides a service on which we can test the website locally. This service is known as localhost. localhost gives the users the capability to make their computers as local server.

As Dreamweaver gives us a multiple options as development platform, for instance, it provides VB Scripting, Active Server Pages, cold Fusion and PHP etc. All these names are different languages and platforms in which one can develop the web. Let us not get in the details of the languages and platforms and move ahead with the main topic.

It does not matter which platform is being used for the development, localhost should be installed and configured for all these platforms, specially, if we need to test the website on local server. Although we will be using PHP for development and WAMP Server, some of local host installation and configuration details will be discussed so that knowledge should be imparted for other platforms.

3.2.1 Installing and Configuring localhost for Active Server Pages and Internet Information Services (IIS):

If you want to work on Active Server Pages (ASP), then you need to have Internet Information Services (IIS) installed on your computer. This gives the capability to the user to make their computer as a web server.

January 9, 2012

AUTHOR: CH. BILAL A. KHAN

Page 3 of 7

Installing IIS on Windows Vista in Five Easy Steps:

Although IIS is already installed by Windows Vista, but if it is not installed, follow the following steps to install IIS on your computer:

Step 1:

Go to control panel and click on click on Uninstall a Program under Programs

Step 2:

This will open up a window with all the programs installed on your computer, on the left side panel there will be a option Turn Windows Features on or off. Click on this option

Step 3:

Once the option is clicked, wait for a few seconds and a newly opened window will be populated with all the features installed and yet to be installed on your computer. Look out for the Internet Information Services option. If it is not checked, please check it and install all the services given under this option. For Windows Vista, you do not need to insert a separate disk in this. It will install everything automatically. Wait for a while and IIS will be installed on your computer.

January 9, 2012

AUTHOR: CH. BILAL A. KHAN

Page 4 of 7

Step 4:

After the installation of IIS, it is time to test whether it has been successfully or not. Open the browser and write http://localhost/ in the URL bar. The image given below should appear. If does not appear an error is occurred, try installing IIS again and restart the computer and then test again.

Step 5:

Now find the root folder. Once the IIS has been installed, the root folder will be formed at C:\inetpub\wwwroot. This root folder named wwwroot is the web server on your local computer. Anything in this folder will be displayed on the web browser given that it resides in the folder. We will discuss it further when we are developing the website and setting up the server.

The image given below gives an idea about the location of the root folder.

January 9, 2012

AUTHOR: CH. BILAL A. KHAN

Page 5 of 7

3.2.2 Installing and Configuring localhost for PHP and Apache Server:

As we will be working on PHP, things will be a lot different than the process mentioned above. While working with PHP, generally IIS is not used as a localhost server instead Apache Server is required. If databases are required, MYSQL is an ideal database platform. Now the question arises, from where should be get Apache Server and MYSQL server to make our local computer a server. The answer to all the questions is WAMP Server. WAMP Server has Apache Server as well as MYSQL database included in it. WAMP Server can be downloaded easily fromwww.wanpserver.com.

Installing WAMP Server on Windows Vista in Three Easy Steps:

Step 1:

Once WAMP Server is downloaded from its website. Please double click on the setup to install it.

Step 2:

Once it has been installed, it is time to check whether it has been installed properly or not. In order to start WAMP Server, IIS needs to be stopped. To stop IIS from running, run the command prompt and type the command iisreset/stop. Give it a few seconds and IIS will stop running. If you want to turn on IIS back again, type iisreset/start.

January 9, 2012

AUTHOR: CH. BILAL A. KHAN

Page 6 of 7

Once the IIS has stopped. Go to the programs and run WAMP Server and you will see a small clock on the right bottom side in the task bar.

Click on the icon in the task bar and a pop-up menu will open.

It can be seen that Apache Server, MYSQL and PHP integration are all installed with this software. Click on Localhost on from the options and if the following diagram opens (the contents may vary), it means that the localhost server is set successfully. If it gives an error, please try installing again, restart the computer and then test the Localhost again.

Step 3:

January 9, 2012

AUTHOR: CH. BILAL A. KHAN

Page 7 of 7

Now find the root folder. After the successful installation of WAMP Server, a root folder will be formed in C:\wamp\www\. The folder named www is the root folder and will act as a web server on local computer. The image given below will give a better idea about the location of the root folder.

Now that everything is setup, let us jump onto the basic part of our Dreamweaver training.