Dreamweaver is a great tool for creating and managing html web sites.
Before you start using Dreamweaver however you would have completed the
following steps:
Understood your client's requirements.
Created a layout (and got it approved) using a graphics software
like Fireworks or Photoshop.
Sliced the necessary gifs/jpgs.
Have any Flash animation ready
Site Manager
The
Site Manager is where you'll get an overview of the entire site.
Create the folder in which you will store all your project files.
Create an 'images' folder within and transfer all the sliced images
to this folder.
Open Dreamweaver
Open the Site Manager [Window>Site Map]
Define a new site [Site > Define Sites>New]
Fill in your Project Name in the box provided for 'Site Name'.
Use the yellow folder icon next to the 'Local Root Folder' box to
browse for the project folder you had created.
You should be able to see the 'images' folder in your site manager.
Next you will create the pages you need for the site.
Creating HTML pages
Create the HTML homepage [File > New File]
A new HTML file named untitled.htm will appear in the site manager.
Rename it to index or default. Keep the .htm file extension.
Double click the file to open it.
Change the HTML page title to something more appropriate like Homepage
[ Modify > Page Properties >Title]
Similarly create all the other HTML pages you need.
Next you will need to create your page layout.
Page Layout
The key thing to understand about designing your pages in HTML is
that your layout is structured within tables and cells. Analyze your
layout on paper. Superimpose tables over it using the number of rows
and columns that you will need.
Now start creating your tables. You can use pixels or percentages
to define the width and height. If you have more that 1 column make
sure the widths of all the columns add up to the width of the table.
[Insert > Table]
The Properties Inspector is extremely useful for editing the properties
of any element in your page. To edit the properties of a table simply
select the table and open the Properties Inspector. [Window > Properties]
Try and create separate tables as much as possible. This is because
a table will load only once all the elements within it have loaded.
Explore creating the layout you designed using tables. You can give
background colors, create tables within tables, specify the alignment
of the content within the cell etc. So go ahead and try it out.
Inserting Text and Pictures
Once you've created the basic structure of the page using tables, rows
and columns, the page is ready for content.
You can type in text just as you would in any text editing software.
Many times content is provided in Word documents. If you would like to
retain the formatting, you can save the Word.doc as an Html/ web Page.
This will create and HTML page. You can then open this html page in Dreamweaver,
clean up Word HTML [Commands > Clean up Word HTML], copy the content
and paste it [Edit>Paste HTML] into your HTML page.
You can Insert images [Insert>Image]. You can also position them :
Click on the image.
Open the Properties Inspector. Select the required alignment from
the 'align' drop down menu. You could also set the alignment of the
cell in which the image will be placed.
Using Templates and Libraries
If all or many of the page in your web site will have the same look and
feel (which is usually the case), it is advisable to use templates &
libraries for easy updating.
Open the page that you created & save it as a template [File>Save
as Template]
This will create a .dwt file in a Templates folder in your root directory.
Decide on the areas of the template that will change from page to
page. e.g.. Content. If there is any existing content in this area you
can delete it and make that area an editable region and give it a name
e.g. 'content'. [Modify > Templates > New editable region]. If
you would like an editable region to have an item e.g.. Banner ad by
default but you would like to change it in certain pages as well. You
can select that item and make it an editable region.
Libraries are bits of html pages that can be reused in many pages.
This is especially useful for reusable items like submenus. [Window
> Library . Click on the small arrow on the top and select 'New Library
Item, form the drop down menu. Once created, click the 'insert button
to reuse it other pages.
Using Server Side Includes (SSI)
Includes are like library items. The advantage is that when you make
a change to an include you don't have to update all the pages that access
it. The changes will automatically get reflected in them. Therefore you
do not have to upload all the pages that use the include every time you
make a change, only the include itself.
To create an include:
Copy the part of the page that you would like to make into an include.
Create a new html page [File > New]
Go into the HTML code and delete all the default code that Dreamweaver
puts in.
Paste the code that you had copied previously make sure all links
are relative to site root. Finally save this file in an 'Includes' folder.
To insert an include into a page:
Rename the file extension to .shtml
Click where you would like to insert the include and Insert >
Server Side Include.
Using Cascading Style Sheets (CSS)
Style Sheets are another extremely useful feature that will speed up
you work and help you to easily update your site.
The best way to use it is by creating an external .css file and linking
it to your Template.dwt. This way you can make changes to your .css file
and the changes will be reflected in all the pages using it. On a live
site you just need to upload the .css file and nothing else.
Open the template.dwt. Click Window > CSS Styles. Click on the
'New Style' icon.
Give your style a name e.g. .title, Define in: New Style Sheet File
Give your preferences and save the .css file. I usually save it in
the root directory.
Redefining HTML tags are also extremely useful.
To apply the style, select the text, select the style in the CSS
panel and 'Apply'
Testing
After applying the template to all the pages, inserting the content into
editable regions, inserting images and applying CSS styles. You would
have probably linked all the pages together in the template itself (navigation)
using an include.
Once the site is complete you are ready to upload it to your server and
go live. Before that however, you should test the site to in various browsers,
at least Netscape and Internet Explore to make sure it is working all
right. If you use Site Relative paths (as you must in includes) the Preview
in browser feature will not work. You will need to test on a web server.
Other tools that Dreamweaver provides :
In Site Manager: Site > Check Links Sitewide
In Document Window: Text > Check Spelling
Uploading and Going Live
After you have developed and tested your site it is ready to go live.
You will need a hosting service. They will provide you with your server
details:
IP address or www.yoursitename.com
username
password
To Upload your files into the remote hosting Server:
Fill in these details in Site Manger: Site > Define Sites >
Edit > Remote Info >
Access = FTP (from drop down menu)
To connect to your remote server, click the 'connects to remote host'
icon in the Site Manger.
Once you connect you should see the remote folder and files on the
left window.
To upload your files click the 'Put Files' Arrow icon in the site
manager.
After uploading all the files test the site online using www.yoursitename.com.
We at India Web Developers have been serving clients over the world for five years now!
We are experts at web application development, website design and web development.
The
Site Manager is where you'll get an overview of the entire site.