Adobe Dreamweaver, formerly owned by Macromedia, is one of the most powerful website creation tools. It offers powerful featurs for both the creation of static websites and also dynamic websites. However, in this guide we will focus on Dreamweaver's power to create a simple website in no time at all.
- Open Dreamweaver. If you do not have this program you can either download an evaluation copy from www.adobe.com or else purchase a full version.
- Go to 'File > New'
- From the 'Category:' list, select 'Starter Pages'
- On the right hand side, you will see a list of possible websites. These are 'templates', included with Dreamweaver that you can use for your website. In this guide we will use one of these templates, do a little customisation and insert our data in it.
- For this example we will choose the 'spa' website. Now, to start we will select 'spa homepage'
- In the Document type (DTD), we will use XHTML 1.0 Transitional. This just describes what type (version/standard) of HTML we are going to use. We will use the transitional since it is better suited for a simple website. Later on, when you will learn HTML/XHTML and CSS better, you would want to create pages that are according to the XHTML strict standard.
- Now just press the 'create' button
- Dreamweaver loads up the website template choosen, and now it will be displayed on your screen. The first thing you have to do is save it. Fo to 'File > Save as', browse to where you will store your website, create a new directory, and inside it save this file as 'index.html'.
- Dreamweaver will ask you if you want to copy all dependent files in the same location – these includes any CSS files and images needed by this template. Click 'Copy'
- Now you will see that the website is displayed better, because all required files are now stored in a central location.
-
This website template consists of 4 different parts
- The header / banner on top
- Left Menu – Navigation menu for your website
- Main Content in the center
- Right section to feature any of your products / news / other information
- Let's start from the banner. Just replace the text with your website name and other related information, such as the name of your business.
- On a piece of paper, write down what pages you want in your website (i.e. the website structure), such as a page with the list of products / services, company information, contact details, etc..
-
For this example, we will use the following pages:
- Home (the main home page)
- About Us
- Services
- Contact Us
- Links
- So first, we will start by editing the left menu and writing out these sections in it.
- Now, let's focus on the right hand side section. We will use this section to display any company / service related news, however, you can use if for what you like.
- To delete any images, just click with the mouse and press the 'del' button
- Should you wish to increase the size of any section, you only need to select the border of any cell, and just 'click and drag'. However, you need keep a consistent website, thus take care that if you resize any section on this page, keep the same sizes on other pages as well.
- If you do not have the properties inspector panel open in Dreamweaver, go on 'Window > Properties'
- This will show you a properties panel in Dreamweaver, that you will use to make the most common editing such as styles and links. It is very useful, and it will automatically change what options you can edit according to what part you select in your website
- Start by creating the links of the main menu. With the mouse, select the first item in your menu (in this example home)
- In the properties inspector, find the 'Link' field. Inside it, write down the name of the file that the home page will be saved as, in this case 'index.html'.
- Now, select the 'about us' section, and write down 'about.html'
- For the services, 'services.html'
- Contact section: 'contact.html'
- and lastly for the links section, write 'links.html'
- Leave the content in the center unchanged for now, as that will be the last thing to do. First, we want to make sure the layout, and navigation areas in our website are ready.
- Save your file (as index.html)
- Now, we will make copies of the file. Go on 'File > Save As', and write about.html
- Do the same for about.html, services.html, contact.html and links.html
- That's it, your website is almost ready. You have the 'skeleton' of the website ready. Press 'F12' to preview your website in a browser. It is also good to test the website in another browser. I do suggest the use of Firefox as your main browser, and keep Internet Explorer just to test your sites in it. Safari is also starting getting quite popular, so if you want you can also install Safari and test the website in it.
Why? Because not all browsers will display your web pages in the same way. Of course, there are standards. In fact, Firefox and Safari do a pretty good job of displaying websites according to standards. However, many users do use Internet Explorer, and that browser does not exactly display pages according to standards.
- Now, we can move on to inserting the content of our website
- Go 'File > Open' and locate the 'index.html' file
- Now, insert the content that you want in the center of the file. This page will be the first one displayed on your page
-
Now, save the file, and open the 'About Us' page. Again, change the main text to what you want, maybe some background information regarding your company. In this section, it would be ideal to put maybe a photo of your shop/factory/office etc.., basically anything related to your company. To insert an image:
- Minimise dreamweaver for now
- Go on 'Start > My Computer'
- Locate the image file you want
- Go on 'Edit > Copy'
- Now, browse to the folder where you have stored your website
- Create a new directory, and name it 'images'
- Double click on this new directory
- Go on 'Edit > Paste'
- And repeat this process for the images that you are going to use in your homepage. If you have many images, and are located in another folder, remember you can select multiple images, and copy & paste them all together.
- Maximise Dreamweaver again
- With the mouse, click on the location in your homepage where you want to insert your image.
- Go to 'Insert > Image'. Now, browse to the directory named 'images' and select the image file you want to insert.
- Press OK. A dialogue box will appear, asking you to provide 'ALT Text'. Meaning Alternative text, it will be showed in case the image cannot be displayed. Always insert the ALT text for any image that you put on your website.
- Press 'OK'
- If you want to center the image, just select it, and from the properties inspector click on the 'center' icon. You can also right align or left align the image. In further tutorials, you will learn how to do this in CSS, which is the proper way according to standards.
- Save the file, and open the next page, 'services.html'
- Until now, you have learned how to change text and insert images. Now, for the services page you will just use these same two skills. In this example, we are going to create a simple list of services, and a service description for each. For any service, you might also want to insert a photo/image representing the particular service.
You can if you want create a page for each service, in which you will give detailed information about that particular service. In this tutorial you already learned how to do this. Simply create another page (just save the current into another filename), and make a link to it (from the properties inspector) from the main services page (services.html)
- Tip: to force the text to flow on a particular side of the image, click on the image, and from the properties inspector select 'Align > Left' or right whatever you might need. Also, increasing the V Space and H Space gives a better effect.
- Save the file, and we'll move on to the 'Contact Us' page.
- Open contact.html. Now, to do a contact us page, there are two ways. The best way to do it is to use a form that will take the feedback from the visitor, and sends it back to you via E-Mail. However, that will be covered in another guide, so for now we will concentrate on inserting our contact details only.
- Delete the content in the center, and replace it with your telephone/fax/address and any other contact details. Remember the E-Mail Address. After you write your email address, select it with the mouse, go to the properties inspector, and in 'link' write – mailto:info@yourdomain.com – This will result in a link, and when the user clicks on it, his/her E-Mail program will load with your address ready in the 'to' field.
- Save, and open links.html
- This page will be used to provide your visitors with a list of useful resources related to your main line of business. Simply list each one in a new paragraph, and a small description about each site. Do not put more than 20 / 30 links. Remember, to make a link to an outside page, simple select the text that you will be using as a link, and from the properties inspector, in 'link', write 'http://WEBSITE-NAME.com/page1.html'. Preferable, select the target to' _new' so that your page will not be closed when a user clicks on any of your links.
- That's it! Your website is now ready!
- Just test it again in your browsers to see if everything is working good, and we'll move on to the publishing part.
- Click on 'Site > New Site'.
- Enter the name of your site, and the address(URL) of your site (e.g. http://www.YOURNAME.COM)
- Press Next
- Select 'No, I do not want to use a server technology'
- Press Next
- Select 'Edit local copies on my machine...'
- Select the directory where you saved your website
- Press Next
- How do you connect to your remote server : FTP
- hostname or FTP address: ftp.YOURDOMAIN.com
- folder: httpdocs
- Enter your FTP login and password
- Press Next
- In 'do you want to enable checking in and...' select 'no'
- Press Next
- Press Done
- Now, go on 'Window > Files'
- Dreamweaver will show you the list of files in your site. Now, to upload your website, all you have to do is:
- Select the site
- Press the 'up' arrow
- Now, your site is uploaded, and you can go to your domain via the web browser to see your site.
This guide was written in order to help people unfamiliar with web design, that want to create a website, do their first website from scratch. using a decent tool. It is a very, very basic and simple introduction, the area of web design and web development is incredibly vast. However, this should be a good start!
My suggestion to those that will follow this guide to do their first website, is not to be afraid to do mistakes. Make changes to the content, do new pages, change the images, well...experiment how much you can!
In future guides, you will learn how to make all your code according to standards published by the W3C (World Wide Web Consortium), using XHTML and CSS. Also, continuing in the Dreamweaver guides, you will learn how to utilize Templates and Libraries, how to make Contribute compatible websites, web design automation, and many other impressive features this program offers!
Article written by Noel Grech, 2006. All content is © ANG Malta 2006 - 2007. Should you wish to publish this guide, you will need 1. Obtain permission by contacting us. 2. Include a link back to our website.
