|home | et11 - Computer Skills for Digital Media - 2011 edition
|prev | next
12 - Dreamweaver and web design basics
Composition of a Web Page
Web pages are defined by text documents that describe the contents and layout of the page. These text documents are written in a mark-up language called HTML (HyperText Markup Language). The HTML contains formatting information for the page, and includes the "live" text part of the page (i.e. text that has not been rendered in a graphics program like Photoshop). Any images, audio, video, Flash files, or other contents are specified in the HTML, but are not included in it. These files are stored separately, either in the same directory with the HTML text file, or sometimes on a completely different computer.
As a result, web pages are a bit fragile, and the designer must take care to keep the HTML files and images together. For example, if the images are moved to a different location in relation to the HTML, those links will be broken, and the images won't display.
A web page is composed of the following elements:
Introduction to Dreamweaver
Because web pages are made up of HTML, Dreamweaver does not create special Dreamweaver files. On the PC, you may find that if you double click on .html files, they will open in Explorer or Netscape rather than Dreamweaver. As a result, it's best to open your .html files from within dreamweaver.
Dreamweaver is just a page formatting application, and is not capable of creating any media elements other than text. You must use Photoshop, Peak, or other applications to create images, sounds, etc.
Launcher. This window is used to launch the other Dreamweaver windows.
Document Window. This window shows you what the web page will look like - more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.
HTML Inspector. This window shows the raw HTML. You can write HTML directly in this window, and any changes you make will be reflected in the Document window when you switch to the document window, or perform a Save (control-s for PC or command-s for mac).
Properties Inspector. This window is one of the most important and is used to show and set any properties of the currently selected element (image, table, text, etc.). For example, when you have some text selected, you use this window to set the bold style and font size.
Object Palette. This small palette window is a shortcut menu used to place items into the current web page. For example, click on the first icon at the top of the object palette to place an image in the document (at the current insert location).
Site. This window servers two main purposes. First, it shows the way files are organized in your web site, and allows you to open files without using the File>Open dialog. Second, it is an FTP (File Transfer Protocol) client, which enables you to transfer your HTML files from the computer where you create them, to the web server where the files will be visible from the Web.
Creating a web page
To create a new web page in Dreamweaver, do the following:
Previewing in a Browser
Dreamweaver is a WYSIWYG (what you see is what you get) authoring tool, and you can see how your web page is going to look in the Document window. But it is not perfect or complete in the way it displays web pages. As a result, you must preview your web pages in a real web browser such as Netscape or Explorer. When you have a page to the point where you want to check how it looks, save your file, then select FILE>PREVIEW IN BROWSER>NETSCAPE (or Explorer). Alternatively, you can simply press the F12 function key.
You may need to configure the Preview function if browsers have not been set up in your version of Dreamweaver. To do so, select FILE>PREVIEW IN BROWSER>EDIT BROWSER LIST, and Add a browser by finding the browser on your hard disk.
Every web page has global properties that can be set in the MODIFY>PAGE PROPERTIES... menu. Important properties to be set are the:
See pages 20-24 of the Quickstart Dreamweaver book for more details.
Text formatting in Dreamweaver is similar to the formatting available in a word processor. You select the text you wish to modify, and then apply a style to it. For example, to make a word bold, select the word, then click on the "B" button in the Property Inspector. Alternatively, you can select the text, and use the Text pull-down menu (e.g. Text>Style>Bold).
Text characteristics can be set by Dreamweaver, including bold, italic, color, size, font, and justification. In addition, Dreamweaver offer that ability to check the spelling of either the selected text, or the entire document (TEXT>CHECK SPELLING).
You will find that if you type in some text, and then press the Enter or Return key, a blank line will be automatically put after your text. If you wish to have the next line of text appear right after the previous text (with no blank line), then hold the SHIFT key down while pressing Enter or Return.
See chapters 3 & 4 of the Quickstart Dreamweaver book for more details.
Making links to other web pages
You can create a link to another web page (a page you've made, or one on another web site) so that when a person clicks, the browser will open that new page.
See chapter 6 of the Quickstart Dreamweaver book for more details.
Working with Images
Web pages are usually a combination of text and images, and Dreamweaver allows you to place, adjust and to a limited extent, set the layout of images on the page. Keep in mind that HTML is not a page layout language but rather a page markup language, so you may find yourself being frustrated at your lack of ability to position images exactly on the page.
The simplest way to get images for use in making web pages is to "steal" the images from other web pages. This approach is only for learning purposes, and you must not use this method for commercial purposes since this would violate the rights of the copyright owner of the image.
To steal an image from a web page, place the cursor over the image, and right-click (pc) or control-click (mac). A menu will pop-up, and you can select "Save Image As...". Browse to the location on your disk where the web page is, and save the file in the same location as the web page. Here are some images to use for this exercise, one is a JPEG, and one is a GIF file.
Once you have an image to work with, these are the steps for putting an image in a web page.
See chapter 5 of the Quickstart Dreamweaver book for more details.
Web Image Types
Using Photoshop to make web images
To make a GIF, do the following to an RGB image:
Copyright © 2008-2011 - David Javelosa with Phil Van Allen