Dreamweaver is one of many programs that take the hard work out of creating web pages. It is a graphical program that allows you to position items on the screen and converts the page into HTML code which can be uploaded onto the Internet. The files that it creates have the .html extension, just like any other file of HTML code. You can then edit these files and tweak the code that has been generated automatically.
The screen consists of the following components:
There are three windows. The largest is the work area where the web page will be created. To the left of that is the object viewer which the user clicks on in order to place an object on the main work area. Beneath these is the properties box that indicates various properties of the particular item being created or selected. These parts have been placed close to each other, although they can be moved around the screen independently of each other.
Before you do any creating using Dreamweaver, you must tell it where you intend to store your files on the disc. If you create multiple web pages and/or use images in your web page, they will be stored in the position that you specify.
This is how you go about defining your site. From the Site menu, select Define Site. This will give you a list of sites that have already been defined, together with a New icon for defining a new site. When you click on that icon, you are asked to specify a name for the new site and a place on the disc (floppy disc or hard disc or whatever) for the site to exist. Once you have selected both, click on the OK icon.
The work area consists of the main surface (a base area) on which the user can place and move "layers" - small invisible rectangles which are used to hold text and other items. Items such as buttons and images can be placed either on the main surface of the work area or in a layer. Think of the layers as being like "flying carpets" which hover above the base area.
You create a layer by clicking on the layer tool,  , and "dragging" the mouse over the work area. Layers appear with a small square in the top left-hand corner and this is used to move the layer around. Move the mouse over this rectangle and hold the mouse button down. Then move it around.
|
 |
Similarly, you resize the layer (even when it contains text and/or graphics) by clicking on the layer at one of its corners (so that the black squares appear round the edge) and dragging the mouse with the button held down.
 |
 |
You can always place items on the base area rather than in a layer. However, items on the base area cannot be moved around the screen - they are put in a linear sequence, similar to words being typed into a Microsoft Word document. If you are likely to need to move an item round the screen, place it on a layer rather than on the base area.
Although you can place layers so that they overlap, this isn't generally a good idea. The HTML code that is generated wouldn't run on some older versions of browsers.
To put text into a layer, simply click on the layer and type! A flashing vertical line just like the one you find in Word will indicate the typing position. You can use the icons on the icon bar to align the text on the left, right or centre, to make it bold, italic or underline, and to alter the font face. You will recognise the icons from Microsoft Word - they work in exactly the same way.
To put an image into a layer, click on it to select it (the flashing line appears for you to type something). Then select the Insert Image icon from the toolbox. You will be faced with a File Select box similar to the one you find in an application when you open a file. This is asking you to select the image file that you want to place inside the layer. Hunt around for the image that you want and click on OK (or Cancel, of course, if you change your mind). When an image which is too large for the layer is inserted, you will find that the layer stretches to accommodate it.
Every item that makes up the web page will have a set of properties associated with it - pieces of information that are tied up with it. Whenever you click on a layer, an image on a layer, or an image on the base area, the Properties Box for that item appears. This changes slightly, depending on what sort of object you have selected, but will typically look like this:
Several of these icons you should recognise from Microsoft Word, such as B (for Bold), I (for Italic) and the text alignment icons. The bullet points and numbered list icons work exactly the same way as for Word as well.
In general, you can change the properties of the various screen items by clicking on the appropriate slot in the properties box and typing the new value. The items that you change should update themselves on the screen before your very eyes!
To insert an image, you should first decide where you want it to be - either on the base area or on a layer that you have created. Click the mouse in the correct position.
Select the image icon 
. A file box will appear prompting you for the file name where the image is stored. There is a preview facility so that you can see what the image looks like before you insert it:
The file select box will list the types of image that web browsers know how to display. These are GIF, JPG (Jpeg) and PNG images. Once you have chosen the image that you want, click on OK to insert it into the web page. Images can be resized using the same procedure as for layers - select the image so that the black squares appear around the edge, then click on one of those squares and drag the mouse to change the shape.
You can easily move an image from one layer to another just by dragging it to the new position. However, you can't move an image within a layer - you achieve this by moving the layer around the web page.
| If, for some reason, Dreamweaver can't load in an image file, it will display the "broken image" icon. This may happen, for example, if you type a file name in the file select box which doesn't exist. |  |
Hyperlinks can attached to text that has been highlighted or images. You should either select an image, or highlight a section of text in a layer. Then turn your attention to the Properties Box.
You will notice that one of the items present in the Properties Box is called Link and this gives you a simple way of turning the object selected into a hyperlink. You can type in this slot the destination for the hyperlink - either a URL (a web address) such as www.yahoo.com or another web page. Hyperlinks needn't be to web pages that have been created using Dreamweaver - you can link them to any file of HTML instructions, no matter how it has been created.
The yellow file icon next to the Link slot lets you browse for HTML files. This provides a File Select box similar to the one found in Word for opening a file. It saves you having to type the file name.
It is easy to keep track of all the HTML files that make up your web site. On the Window menu there is an option called Site Files. Clicking this shows your web site as a series of icons, each representing a file, with lines between them representing the hyperlinks.
This example shows a web site consisting of two files. The file Fun Site.htm contains a hyperlink to the file page2.htm.
The Horizontal Rule icon, 
, inserts a horizontal line into your web page. You should, of course, move to the appropriate layer before selecting the icon, although horizontal rules can be created in one layer and then dragged into another one (or onto the base area).
| Any horizontal rule created on a layer will automatically take on the width of that layer. The diagram to the right shows a horizontal rule created in a narrow layer: |  |
The  icon allows you to insert a table. First move the flashing cursor into the correct position in a layer or on the base area. Then click on the icon.
|
 |
 |
When you have selected the options you want, click on OK. The table will appear and the Properties Box will change to reflect that table. You can change the options by altering the numbers in the box (for instance, to add/delete rows or columns). This table, for example, has three columns and five rows, and occupies 50% of the available width of the frame. Compare it with its Properties Box below: |
Dreamweaver does not contain a facility for previewing your web page - it harnesses the power of your browser for that. You will notice that under the File menu there is an option that says Preview in Browser. Click on this, and your web browser will activate with your web page displayed in it. All the hyperlinks will work - it is essentially like a normal web page. Click on the close icon (the cross in the right-hand corner, 
) to close the browser and return to editing the web page.
When layers are placed on the screen, they stay in exactly the same position compared to the top -left corner of the browser window even when the browser is resized. For example, when a picture is placed in a layer, which is positioned in the centre of the screen, it stays at that position:
You may want this effect, of course, but should you want your layers to move around as you resize the window, then you should place the layer inside a table. Tables will resize as you change the window size, and anything inside a table cell will move around.
icon as before. This will appear in the cell itself. This then solves the problem.In fact, there is an easy way of doing the same thing. If you place your layers on the screen wherever you like, you can then convert them into cells in a table. Select Layout mode from the Modify menu. This will create a table on the screen, placing all the rows and columns so that they hold your layers in the correct places.
However, the results can be slightly unreliable. If you want to make sure that the cells are positioned correctly, place two empty layers, one on each side of the real layers containing the graphics. This produces more reliable results.
Generally speaking, if you want your web page to be compatible with older browsers, you should convert the layers in it to tables. This is because older browsers could not display layers - the contents of them simply became invisible.
I'm sure you've seen web pages where the screen has been divided up into a series of tiled rectangles. Each of these operates as a separate web page, and can be scrolled and changed independently of the others.
Such a web page is called a Frame page. The entire screen is called the frameset, and the separate "window panes" are called the frames. Very old browsers are incapable of displaying frames, so well designed web pages will have a <noframes> section which provides an alternative to displaying the frames. If you want an example of a web page with frames on it, click here. As in the case of Ian's web page, the left-hand frame is often used for navigation controls. It will contain icons that control what appears in other frames, and these icons will always be present whatever appears in the other frames.
To split your web page into two frames, select Frameset from the Modify menu. You will get the option to split the screen vertically (called "left to right") or horizontally ("up down").
Objects are placed on the frames in exactly the same way as per normal. Just select the correct icon from the toolbox and drag it out as a rectangle on the appropriate frame. The currently selected frame is the one with the flashing cursor in it. When you click on a different frame, that one becomes the currently selected frame, and inherits the flashing cursor. Only one frame can be selected at any one time.
To alter the position of the line that splits one frame from another, simply move the cursor somewhere over the border and drag it left or right, up or down. To split a frame into subframes, select the frame that you want to split and repeat the process - Modify, Frameset and then select the correct split.
When a browser window is resized, any frames that it contains will resize also. This is because the size of the frame is specified as a percentage of the browser window size - the exact percentage will depend on where the border line between the two frames has been dragged to.
Firstly, make sure that the Properties window is visible. Then click on the border between the frames. This will display the properties for the frame. One of the properties indicates whether the size of the frame is a percentage of the window size, or has a fixed size which is specified in terms of pixels (called relative units). Click on the black arrow next to these units to select the appropriate one. This option tends to produce better result in a left-right direction than it does in an up-down direction.
The default state for frames is for them not to have scroll-bars down the edge unless what they contain is too large to fit in the frame, in which case the scroll bars appear. This option can be altered. Firstly, click on the frame whose scroll property you want to change. Then select the Frame option from the Window menu. Click on the Scroll property for that frame and choose the option you require from the list of options given.
Select the Save All option from the File menu. Unfortunately, saving the frames is a fairly long procedure, as you have save each of the separate frames together with an extra file which contains the frameset details, so if the screen has been split into three frames, then it will require four file saves.
Dream Weaver will prompt you for each of the saves in turn. It does this by highlighting the frame to be saved with a "crawling rectangle" outline, and then popping up a save box. The first one to save is always the frameset itself, as indicated by the blue rectangle round the whole screen:
Then each frame is saved in turn. Keep an eye on which frame is surrounded by the crawling rectangle outline, so that you know which frame is being saved:
It helps to give the frames a consistent set of names. For instance, if the frame set is called screen1_set.htm, then the frames could be called screen1_left.htm, screen1_right.htm etc.
Frames appear by default with a border of a few pixels which is the same colour as the web browser icon bar. You may want to remove this border, so that the frames butt up flush against each other. This is done in two stages.
If you set the background colour for each frame is identical, it is possible to hide the fact that you have set the page up in frames entirely. You can still use the benefits of the frames system without it being obvious.
When you set up a link to another page associated with an item in a frame, its default action it to load the page into that particular frame. You may, on the other hand, want a hyperlink in one frame to alter the contents of another frame. This is especially true when you are planning on using the left-hand frame as a navigation bar. You would want each icon to alter the main screen area, i.e. the frame on the right. This is how you would alter the destination frame of a link:
Hold down the Alt button and click on the frame which the link is to alter. The properties box appears and then prompts you for a name for that particular frame. It is necessary to give the destination frame a name before you can direct a link to it.
Having named the frame, you can then set up the link as per normal. The hyperlink can be a piece of text or an image as per normal. However, when you select the target of the link, you will need to specify the frame as well.
You must save all the frames before previewing it in the browser. If the target frame is not specified, the hyperlink would load the destination page into the same frame as the hyperlink itself.