create a website using Adobe Dreamweaver

How to create a website in Adobe Dreamweaver?

When developing complex web applications it is important to organize your files neatly. That means keep files in a project in a structured way. As an example you may write CSS in everywhere in your project. Sometimes write in-line CSS and sometimes include CSS code from a separate file. Suppose that you have to change a CSS code of your project. Then you have to look it fore everywhere in the project. Because you can't remember where is the CSS file that use to control the styles of the web page. So it is better to keep your all CSS files in a separate folder called "css" or "styles". Likewise you can put your JavaScript, images, and PHP or any other related files in separate folders. It will provide an easy access to website source files. No need to browse files in folders, you can access all files in the website using the IDE. It save your valuable time.

Advantages of using Dreamweaver IDE in web development.

1. Easy resource management (link images, js, css files easily).
2. Auto code completion (Fast web development / Save time).
3. PHP, JavaScript, CSS, jQuery, ASP ,JSP, XML support.
4. Maintain HTML standards (HTML 4.0, HTML 5, etc).
5. Syntax highlighting and code indentation. (Easy to read code)
6. Instant HTML preview.
7. Display typing errors on your code.
8. Offer HTML templates.
9. Offer function definition.
10. Quick text search (specific code block, current document, all opened files, of entire project).
11. Easy find and replace options.
12. Fast navigation (No need to browse directories. Access all files and folders via the IDE).
13. Ability to integrate Version Control software.
14. Provide facility to connect to a remote server / Easy file upload.
15. Easy to rename images, files, etc. Dreamweaver can automatically detect the changes.
16. Spelling Checking.

 

Hoe to Create a new site using Adobe Dreamweaver?

You can manage your code easily if you use an Integrated Development Environment (IDE) like Adobe Dreamweaver CS4, Dreamweaver CS5, Dreamweaver CS5.5, or Dreamweaver CS6. So it is very important to use a IDE for your projects. In this example I will explain you how to create a project/site using Adobe Dreamweaver.

Dreamweaver offers you an easy way to create web sites. Click on "Site" menu item and select "New Site" menu item.



It will open site management dialog box for you. Before you create the project you have to create root folder for your website. Sometimes you may be work with apache web server or IIS server. it doesn't matter. Create a folder in htdocs folder in apache or www root in IIS web server. This will be your website root folder. All files related to your website should be kept here.

Adobe Dreamweaver site setup

1. After that you have open site setup dialog box, you have to give a name for your site. Then you need to specify a Local Site Folder (the folder that you have created in apache htdocs or IIS www folder).
   
   

2. After yo have select the root folder, click on "Advanced Settings" tab. Then select "Local Info". You can specify a default image folder for your website. Click and browse the image folder. You can configure remote server. But now this tutorial explains you configure a local web URL. So enter the your local testing server URL pointed to the website directory in the apache htdocs folder.
   
   Also you can set the links relative to the document or site root. It is better to use the links relative to the Site root. If you set this opption to Site Root, all links will be created relative to the site root folder. If you set this option to Document, all links will created relative to the document. See examples bellow.
   
   Related to the Document : the path looks like <img src="../../images/test.png" /> (followed by dots and slashes)
   
   Related to Site Root : <img src="/images/test.png" /> (followed by a forward slash. No dots)
   
   Click Save button to save your site configuration.
   
   
3. Now you have completed the site setup. Then you have to organize your folders and files in an meaningful way. to create a well structured website follow the instructions bellow.
   
   
   • Keep your images in a separate folder. You can create your images folder in the root folder.
   • Keep your all JavaScript files in a separate folder. This also can place in the website root folder.
   • Keep your all CSS files in a separate folder.
   • If you use third party coding libraries such as pdf generators, mailer classes you can keep those in a folder called "lib".
   • Name your files in an meaningful way. Give similar names for related files. It makes easy access to the files and you can easily determine the file by its name. For a example, suppose that you have a file for news edit. and another file to save the news. and other file for delete news. Do the file naming as follows.
     
     news-edit.php
     news-save.php
     news-delete.php
     
     Now you can easily find the files that related to the news section. Likewise always try to keep meaningful file names.
4. After you have create the sample website your folder structure look like follows.
   
   
   
   After you have created the website you may need to edit the settings. You can do it as follows. Click on Site menu and select "Manage Sites"
   
   
   Or click the drop-down in the files section (right hand side) and select "Mange Sites"
   
   
   
5. 
   Then Manage Website dialog box will open. click on "Edit" button to change your settings. You can delete your website by clicking on "Remove" button. It deletes the website from the Dreamweaver IDE only. No changes to physical files.