A Simple Dreamweaver Tutorial - Beginners Guide

[iGuides]

Dreamweaver tutorial

Dreamweaver is a software made by Adobe it helps user to create their own website without knowing HTML coding. There are four important things that must be present before creating a web page in Dreamweaver, a web hosting site, a domain name, design plan and layout and ready graphics in jpg or gif formats saved in one folder for easy importing.

Getting Started

When Dreamweaver is opened, a new site must be identified click on Site > New Site > 'Advanced' tab type in the site name in the field “Site Name”. Below to the Local Root folder the user will see the Default images field, click on the folder icon to choose the folder where images are stored

It is recommended to make a Dreamweaver template if the pages on the website have a consistent appearance. It can also provide the user the ease of editing the site, a user can just make changes on the template and all the pages will follow. Click on File > New then select page type > HTML template. For the layouts, there are options for pre-made layouts and custom layouts.

There are two ways to create web layouts in Dreamweaver, Table layouts and CSS layouts

Table Layouts

The layout will have tables and cells. This method is much easier than CSS layouts and old browsers support it. After studying the layout from Adobe Photoshop or Fireworks, work out the number of tables and cells to be formed in Dreamweaver.

Creating the table

Pixels and Percentages define the dimensions of the table. It is important to note that the widths of each column are equivalent with the width of the whole table.

When editing any element in the table the Properties Inspector should be used (Windows > Properties) Background colors and cell alignment can be changed by the user in this method. The more tables, the better because the table will load once all the components have appeared.

CSS Layouts

Unlike table layouts, CSS layouts are faster to load and the design can easily be changed because the content is different from the design component. This, however, is challenging to do.

Creating the stylesheets

Select File > New > Page type> CSS, this file must be saved in the website folder, after which attach a Dreamweaver template file. Select the CSS file then click on OK.

Creating Customized CSS stylesheets

First, select the selector type "class". Second, define it with a "." at the start like .heading. Type in: styles.css (or the name of your css file)

Redefining an html tag

Start by Selecting the selector type "Tag". Then choose the Tag from the drop down menu e.g. "h1" Define in: styles.css (or the name of your css file) Lastly, a dialog box will appear that will ask for the properties.

Inserting Text and Images

Text can be done just like MS Word, just type and select different styles and font by clicking on Properties.


Inserting images is easy by just selecting Insert > Images. The Properties Inspector can define the alignment of the image.


Menu text can be treated as a simple text, just edit the desired style. Javascript code may also be applied.

Server Side Includes

This enables the user to update or edit the web layout look at once without individually accessing the pages. It must have the file extension .shtml or .shtm.

Creating an Include

Select the page section that you would like to make into an include. Select [File > New > Blank Page > HTML > none] To view the html code, select [View > Code] and delete the default code. Go to design view [View > Design ] and paste the code that you had copied earlier. Double check if all links in the include file are in relation to site root. Then, save it an 'Includes' folder.
To insert an include into the template, simply click the area you would like to insert the include. Select Insert > Server Side Include.

Library Items and Creating a library item:

Library items is another option if you do not wish to create .shtml files. Highlight and copy the portion of the template to be converted into a library item. Click File > New > Blank Page > Library Item, just Paste and Save it.

The library item must be inserted into the template or into the web page. Just click on Window > Assets. the library icon will appear in the Assets Panel, click it then select the library name and insert.

Template Editable Regions

These regions are the parts of the template where the web content will be placed. The content differs from page to page.
Place the cursor in the area desired for editables, then click on insert, template objects, editable regions. Name the region. The template with a colored outline and the specified name will appear, this is the editable region.

Library items can also be editable regions. Simply highlight the area you wish to be editable.

Creating HTML/ SHTML pages:

First, select File , New , Page from Template , Project Name , Template Name, and Create, then, name and save it in the project folder. The homepage is named index.shtml if SSI is used and if UNIX server is the remote hosting server. For an NT server it is usual that the homepage will need to be named 'default.shtml'. The file extensions are .htm if SSI is not used.
The HTML page title must be suitable, you can do this by selecting Modify, Page Properties , Title/ Encoding , Title

You can key in the meta data for the page. Meta data are the keywords and description of the page

For keywords: Select Insert, HTML, Head Tags, Keywords
For Description: Select Insert , HTML ,Head Tags ,Description

You can key in or paste the Heading and page content into the editable region. the styled formatting can be chosen from the Properties Panel. When you wish to add any images/ flash files just place and align them it in the editable region. This is also the time to change any applicable library items/ SSI. Just follow the steps above to create all the other HTML/ SHTML pages required.

Normally a website has a “contact us” menu, and this requires form elements. To create a form, simply click on insert, select form and the form item of choice. Remember that it must always be in a form tag, thus it is essential to select “form” first before inserting other form fields such as Text fields.

Linking pages

Since all the pages have been created, they can now be linked. To do so, basically select the text/ image you want to have a link then, in the Properties panel select the yellow folder icon next to the 'Link' field. A dialog box will open and just browse for the web page you want to link to then select.

For SSI, make sure that the link is in relation to the site. When the link is all set, click on OK. If there are links in the Dreamweaver Template or Library item, Dreamweaver will verify if all the pages should be updated. Do so.

Testing and Uploading in the host server

Now, you are ready to upload your website in the server, however, testing is strongly recommended to make sure if the site will work well.

Select File, Preview in Browser, select the chosen browser. Remember to view each page and click on the links. Dreamweaver also checks spelling (text, check spelling) and checks links sitewide (site, check links)

Entering hosting details in Dreamweaver

Fill out the particulars in the Remote Info Panel of the Site Definition [Files Panel, in the site name drop down, select Manage Sites, then, Select the Site simply click Edit. In the Advanced Tab , just click "Remote Info". From the drop down menu, you will see access = FTP. For the FTP host you will enter your site URL It will then ask for your login and password, Click "Test" to make sure of the connection.

Source: iGuides Webmasters Talk

[sfdf]

Thanks for all your post, I have the same problem and now it has been sorted!