ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to create a Website in Adobe Dreamweaver

Updated on April 9, 2011

For me its a Combination, Dreamweaver, Flash & Photoshop

http://tinyurl.com/yaultbv flickr
http://tinyurl.com/yaultbv 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, .co.uk, .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!

Comments

Submit a Comment

No comments yet.

working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)