ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Computers & Software

How to create a Website in Adobe Dreamweaver

Updated on April 9, 2011

For me its a Combination, Dreamweaver, Flash & Photoshop flickr flickr

A Few Basic Steps

This article is basically the few steps I used to create a recent website, I'm not claiming to be an expert who knows all the tricks or one of these hub's I've seen giving the latest Adobe Dreamweaver plugin. I did a university degree in Graphic Design and had one module on Web Design where they taught us how to build a website in Dreamweaver and some of the other students went on to build their entire site in Adobe Flash. However, I prefer to make one in Dreamweaver because I find Flash websites can sometimes detract from the information in a website, making it hard for the viewer to find what they originally visited for. You can still make basic animations using a combination of Adobe Photoshop and Adobe ImageReady, I guess this article is aimed at people who already have a creative interest on the computer and who are familiar with photo editing programs. If you don't have much experience in other creative software you can check my Adobe Illustrator and QuarkXpress hubs.

I know I sketch bold
I know I sketch bold

Preliminary Sketches

One thing you will want to do is sketch out your ideas otherwise you will forget them when you begin the long process of constructing in the program. You should probably create a flow chart to show the navigation from your homepage and which pages link back to different menu's but since my site has only six pages at present it is fairly easy to explain the structure.

I made a basic homepage which has an illustrative background including a character which represents the subculture of my city and made a montage with a photograph in Photoshop. I also added a button to indicate the entrance to my 'News page', this is what is called an 'animated gif' file which was made using Adobe ImageReady. It is made up of a series of frames, ten in this instance, which you can edit the time between to make it look as though certain words are fading and reappearing. It is fairly easy to get the hang of, especially if you already know Photoshop, you would make one layer of lettering and they make a copy which is slightly darker.

Assembling in Dreamweaver

You will begin with a blank page of course, my usual starting place is to add the background image and you can do this by going to 'Modify' and then 'Page Properties' which will give you the option of selecting a Jpeg file from your pictures. Make sure the image is the right dimensions to fit the average computer monitor otherwise when your site is viewed at full size you will get this horrible tiled effect, I think the average monitor is around 1024 x 676. you can add certain things to the background such as the title which may appear on every page, or subtitles which are stationary and not animated gifs.

Your now ready to start adding what they call 'Tables' but which are also like Layers, this tool can be selected if you drag the cursor toward the top menu, you can see the thick square next to the word 'standard'. Now you can create the boxes to include your menu tabs, as you can see I have included pages such as 'About', 'Music' and have a link back to the 'Home' page. I chose to use what they call 'Rollover images', these are basically two identical gif image files I created but they are different colors so when you scroll over the word with the mouse the button changes color. Once you create the box, go to the grey menu bar at the top and select 'Insert' then 'Rollover Image' where it requests the two identical images, and which order you want them to appear. Then when you have created the menu text, you can click on the image and the properties menu which is usually open from default will include a box requesting the link to which page you want it directed to.

You can also include stationary images such as the flyer of my DJ friend I have included and text is automatic after you create a box, usually you have a properties tool bar along the bottom of the window which allows you chose the style font etc, but I removed it to give you a clear view of my page.

The blank boxes are Google Ads that I included by creating a new layer and then switching to the 'code' view which you can see located in the top left corner of the file window, accessing the html code and pasting the Google Ad html in the layer. Maybe this is something you will have to learn yourself if you aren't familiar with html. If you would like to view an example of the finished website in 'live' view, visit this page I have recently been updating.

Your site.root folder
Your site.root folder

Organizing you webpages

When you come to uploading your website to the internet which I will explain in a moment, you will need to organize your files so that your host server can access them in the right order. Here is a screenshot of the folder I created on my desktop called 'site.root', I think some server's allow you upload the folder as a whole, but I use it just to include my html pages(ones with the Google Chrome icon) and a sub folder including my images. Ignore the file called 'Favicon' this is just a file to include for example, the black 'H' you see for Hubpages in your browsers favorites menu.

Your Homepage needs to be saved as 'Index.html' because this how your server recognizes which file is where your website begins. 

Your server account, mine happens to be Purplecloud.
Your server account, mine happens to be Purplecloud.

Uploading to your Server

Before you have designed your website be sure to search for a 'Good-Value' provider and check if the Domain name you want is available, they all offer the option of checking this and choosing whether you want a .com,, .net or .org address. My web address was actually more expensive because I chose .com, but in the long run it could be more beneficial because this is a more established term when people think of the internet. My package means I own this address for 2 years and I paid 20 pounds to host with them for a year.

Once you have paid and designed your site, you are ready to upload, you can test whether all your pages are working by dragging your index file to your browser, it will access the site from your site.root folder. If everything is working properly, there should be a section in your host account called 'File Manager', you will see a few folders, the one you are concerned with is called 'httpdocs'. Go to 'Add New File', and from here upload all of your html pages one at a time. Secondly there should be a folder named 'Images', if not you can create a folder by selecting 'Add New Directory', open this folder and once again select 'Add New File', uploading now all of your images. 

That's it! you can log out, type your website address in your browser and it should appear on the World Wide Web! If not it could be that you need to refresh your browser or you have forgotten to upload a background image or something. So be patient and I hope I have advised some people with some tips on how to build your own personal website, Good Luck!


Submit a Comment

No comments yet.