DreamWeaver Tutorial (for IGCSE ICT Practicals)

THE WINCHESTER SCHOOL ICT DEPARTMENT

COMPILED BY : MRS. SHALINI RAJAN



Dreamweaver 8

The Dreamweaver 8 Workspace Overview of the Workspace Using The Insert Toolbar Show or Hide Windows Using the Properties Inspector Customize the Document Window Creating a Web Site Creating a New Web Site

Creating Basic Web Pages Create a Basic Webpage Creating New Web Pages Opening and Saving Web Pages Closing Web Pages Previewing Web Pages in a Browser

Cascading Style Sheets Cascading Style Sheets Creating CSS Styles Defining CSS Styles Using the CSS Panel Applying and Removing CSS Styles

Using Text Add Paragraphs and Headings Align Paragraphs and Headings Formatting Text Inserting Special Characters

Inserting Hyperlinks Create Hyperlinks Using Named Anchors Create Email Links

Using Graphics Inserting Images Cropping and Resizing Images Changing the Brightness and Contrast of an Image Setting Image Properties Change Image Size

Using HTML Tables About HTML Tables and Table Modes Inserting Tables Selecting Tables, Rows, Columns, and Cells Formatting Tables and Cells Importing Tabular Data Using Table Design Schemes to Format a Table Setting Table Colors



The Dreamweaver Workspace

The Dreamweaver workspace features a number of windows, panels, and inspectors. The first time you start Dreamweaver, a dialog box asks you to select a workspace layout using either the Designer or the Coder layout.

Standard Toolbar ‐ The toolbar contains shortcuts to preview and display features, and a text field where you can specify the title of a page. It allows you to change between Code view, Design view, and Split view. You can also preview your Web page in various browsers, and change various view options.

Menu Bar - Menus contain the commands for using Dreamweaver. Many of the menu commands are duplicated in other locations within the windows, panels, and inspectors in Dreamweaver. Like many applications, the menu bar provides access to program commands such as file saving and closing.

Insert Bar - The Insert Bar is where you will insert most of the content and objects such as text and images on your web page. There are several different Insert Bars that you can select depending on the type of element you want to place on your web page.



Properties Inspector also called the Tag Inspector- The Property Inspector is used to display and edit attributes or properties of any element that is selected in the Docu-ment Window. Click the Property Inspector's Hide button to hide the panel tempora-rily.

Panels and Panel Groups - Panels are windows that provide access to the Design, Code, Application, Tag, Files, Layers, and History panels. Panels can be grouped to-gether to form Panel Groups, and they can be easily hidden, expanded, or moved.

Document Window- The Document Window is the main workspace where you insert and arrange the elements on your web page. Most of your work inserting text and images on your web page is done in the Document Window.



Create a Web Page in Dreamweaver

Create a Web Page

Click and choose New. The New Document dialog box will appear. Click the Basic Page and then click HTML. Click the Create button.

A new blank page opens. Type a title for the page. The filename will be Untitled-1 until you save the page and give it a name.



Save a Web Page

In order to users to view your web page, it must be saved. It's a good practice to save your Web page often so that you don't lose your work. If you try to upload a page to a Web server without saving it first, Dreamweaver will remind you and ask if you want to save the page first before uploading it to a server. To save a web page, click File and then choose Save As. The Save As dialog box will appear.

Closing Web Pages

When you're done working on a file, you can close it by choosing File, Close or by using the keyboard command Ctrl + W. If you've made any changes that haven't been saved. Dream-weaver will prompt you to save the file. Click Yes to save the file or No to close it without saving your changes.

Note that you can tell whether or not a file has been saved by looking at the file name in the title bar. An asterisk * indicates that the file has been changed and the changes have not been saved.



Previewing Web Pages

Or you can view preview the web page by clicking on the Preview in Browser button on the Document toolbar. This brings up a pop-up menu with a list of the browser choices available on your computer.



Dreamweaver: Add Paragraphs and Headings

This Dreamweaver section demonstrates how to add paragraphs and headings in Dream-weaver.

Add Paragraphs

Almost all web pages include some type of text formatted in paragraphs. Much like aword processor, you can insert text by positioning the cursor in the Document Window and Dreamweaver and typing the text. Hit enter at the end of the paragraph andDreamweaver adds a blank line after the text. Dreamweaver adds the following HTMLsource code to your paragraph of text: <p>Your paragraph of text</p>

Note: The <p> is called an opening paragraph tag and the </p> is called a closing paragraph tag. Any time text is added to a web page, the default text properties for font, size, align-ment, and so forth is applied to the text. You can also change the formatting of the text in several ways including the use of the Properties Panel.

Add Headings

You can also create Headings on your web page. Dreamweaver changes the HTML tags in the source code from <p> tags to heading tags which are signified by <h1>, <h2>, <h3> and so forth. Heading tags provide a way to organize your page with headings of various sizes to indicate relative importance or to provide a framework or outline for your page. See the code ex-ample below: <h1>This is the heading surrounded by heading tags</h1> This is what the <h1> heading tag looks like for this page.

<h1>Heading 1</h1>



<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

In the headings above the size, font, color, and style are all formatted by a CSS

page

. Format a Heading To format a heading, place the cursor in the paragraph containing the heading and do the same.



Align Paragraphs and Headings in Dreamweaver

This Dreamweaver tutorial demonstrates how to align paragraphs and headings in Dream-weaver.

Set Paragraph Alignment

You can set the alignment of paragraphs and headings so that they align on the left, right, or center. Left alignment is the Dreamweaver default.

When you press Enter to insert a new paragraph, Dreamweaver applies the same format-ting as the previous paragraph. So if your first paragraph was justified and you hit the en-ter key to insert a new paragraph, it too will be justified.

The checkmark in the Alignment menu indicates what type of alignment is applied to the selected paragraph. Notice that the procedure for aligning the paragraph text above is the same as it is for aligning the Heading below. The Heading below is Center aligned while the Paragraph text above is Left aligned.



Dreamweaver Tutorial: Format Text

This Dreamweaver tutorial will show you how to format text in a variety of ways using the Text sub-menu and the Property Inspector. You can apply individual formatting to any text on your page. It could be a character, a word, a sentence, or a paragraph. Dreamweaver provides an HTML Style menu item to facilitate formatting text.

Bold and Italic are the two most common types of styles. The Strong style has the same effect as Bold and Emphasis has the same effect as Italic. By default, Dreamweaver uses the <strong> and <emphasis> tags when you format text to be Bold or Italic. Like a word processor, there are other styles available such as Teletype, Underline, Strikethrough, and the others shown below. This is an example of normal text. This is an example of a Bold style using the <strong> tag. This is an example of the Italic style using the <emphasis> tag. This is an example of the Teletype style using the <tt> tag. This is an example of the Underline style using the <u>tag. This is an example of the Strikethrough using the <s> tag. This is an example of the Code style using the <code> tag. This is an example of the Variable style using the <var> tag. This is an example of the Sample style using the <samp> tag. This is an example of the Keyboard style using the <kbd> tag. This is an example of the Citation style using the <cite> tag. This is an example of the Definition style using the <dfn> tag. This is an example of the Deleted style using the <del> tag. This is an example of the Inserted tag using the <ins> tag.

Dreamweaver Tutorial: Change Font Style

Highlight the text to be formatted on the web page. Right-click the highlighted text or click on the Text menu and then click Style. From the Style sub-menu select the style type you want to apply to the selected text. Dreamweaver applies the style to the text.



You can combine styles to create more complicated effects. For example, you can apply Bold and Italic to get Bold Italic.

You can also select the Text menu from the Insert Menu options. The Text menu will ap-pear with several options for formatting text.



In the Property Inspector, click on B for Bold text or I for Italic text.



Dreamweaver: Change a Font Typeface With the text selected, click on a font family from the Font drop-down menu in the Prop-erty Inspector. Dreamweaver applies the font family to the selected text. You can also right-click the highlighted text and choose Font from the menu, then select a font family to apply to the text.



Dreamweaver: Change Font Size

Make Text Bold, Italic, or Underlined

To make selected text bold or italic, click the Bold or Italic button in the Properties In-spector. To underline selected text, choose Text, Style, Underline from the menu bar. Think twice about using the Underline style on your web page. Most web site visitors ex-pect underlined text to be hyperlinks. You may confuse them if they yours are not.

Change Text Color

You can choose the color of your text by clicking on a color chip from the color palette or you can enter the color's hexadecimal code.





Insert Special Characters in Dreamweaver

This Section will explain how to insert special characters in your Web page. From the menu on the Insert Bar, choose the Text category.

If the Insert bar isn't visible, choose Window > Insert to open it.

When you click on the Characters symbol at the end of the InsertText toolbar, a menu of special characters will appear like the oneon the left.

If the character you want is listed in the menu, simply click on it to place the character in the text of your page. To see other characters, click on the "Other Characters" option as the bottom of the menu.

The Insert Other Character dialog box will appear with more symbols and special characters. Click on the character or symbol you want, and notice in the insert box, the HTML code for the selected symbol or character will appear. In the sample below, the trademark, TM, symbol is selected and the HTML code for the symbol appears in the text box.

When you click on the the TM symbol ™ (TM) symbol and click OK. Dreamweaver inserts the ™ code into the Web page.



Dreamweaver: Create a Hyperlink

This Dreamweaver tutorial will demonstrate how to create a hyperlink on your web page that will link the page to another page within your web site or to an entirely different web site.

Hyperlinks, or links, are the elements on a Web page that can be clicked on and thattransfer a user to another Web page or file. In Dreamweaver, you can select a text or an image in your Web page to be a link. You then specify the destination address, which isthe page or file that appears when someone click on the link. The link can be to another Web page on your Web site, a Web page on a different Web site, or a file in another format that is not a Web page, such as a PDF document, an im-age, a Microsoft PowerPoint presentation, or multimedia file. The destination page or filecan appear in the current browser window or in a new browser window.

Linking with Insert Hyperlink

Click on your web page where you want to insert the link. From the Insert Menu, choose Insert Hyperlink.

You can also select the Insert Link button from the Insert Common Tool panel icons. This will also bring up the Insert Hyperlink dialog box.



When the Insert Hyperlink dialog box appears, you can enter the text that you want to turn into a link by typing it in the Text field. In the Link field, you should type the name or path of the file you want to link to if it's on your Web site, or type the complete URL if the link is to a different Web site.

The Hyperlink dialog box filled in with the text that will become the link (Free PowerPoint Tutorials) and the link to the file in the Link field.



You can also choose to target the page that the link goes to. By default, the file opens in _self, which means that it will open in the same browser window your visitor is currently using to view your Web page..

A word about Titles: Notice that one of the options in the Hyperlink dialog box is the Title field. You can set a title for the file to which you are linking..





Dreamweaver Tutorial: Link to a Specific Place in a Document

Click in the Web page where you want the named anchor should go. Click on the Insert menu and then Named Anchor from the dro-down menu.

Another way to create a named anchor is to click on the Common Insert Panel and choose the Named Anchor icon. Click on the anchor and the named anchor dialog box will appear.

In the Named Anchor dialog box, place the cursor in the text field and type in the name of the anchor.

Once the named anchors are created, you can then link to them like you would any other web page.



DreamweaverTutorial:InsertImagesIntoYourWebPage This Dreamweaver tutorial will show you how to insert an image into your web page using the Insert menu and the Insert Common Elements toolbar. It will also show you how to resize images on your page.

Click on the Web page where you want to insert an image. One way to insert an image is to click on Insert on the menu bar and then Image from the drop-down menu.

Another way to insert an image is to choose the Image icon from the Insert Common Elements tool-bar.



From the Select Image Source dialog box, navigate to find the image file that you want to insert and click on the filename. Then click OK.

After you select the image, you can enter alternate text for the image.

Click OK and Dreamweaver inserts the image. You can perform additional edits and adjustments by using the Property Inspector.



ResizeanImage Resize an image by selecting it and then dragging one of the resizing handles. Drag the side handle to resize the width, the bottom handle to resize the height, and the corner handle to resize both.



DreamweaverTutorial:CroppinganimageClick the image to select it on you page.

Click the Crop button in the Property Inspector. If a notification box pops up notifying you that you are about to permanently alter the image, click OK.

A frame appears around the image to be cropped with black handles around the edges.



Drag the handles to frame the desired area of the image. The side handles move the frame on the left and right of the image. The top and bottom handles adjust the frame above and below the image. The handles in the corners adjust both.

After you've adjusted the frame as desired, click on the Crop button again in the Property Inspector. This will discard the area outside of the frame and leave the cropped image.

The Difference Between Resizing and Cropping - Resizing changes the dimensions of the image. It does not change the file size and it doesn't alter the original image.

Cropping changes what part of the image is actually visible. It removed the unwanted portions of the image and in so doing, reduces the file size. Cropping permanently alters the original image.

DreamweaverTutorial:ResizeanImage Resize an image by selecting it and then dragging one of the resizing handles. Drag the side handle to resize the width, the bottom handle to resize the height, and the corner handle to resize both.





Dreamweaver Tutorial: Setting Image Properties This Dreamweaver Tutorial will show you how to change an image's properties by using the Property Inspector. You will learn to who use alternate text, adjust the image size, image alignment, add a border, and margins.

GivinganImageAlternatetext In the Document Window, select the image whose attributes you want to change.

In the Properties Inspector, type an alternative name for the image in the Alt box. This alternate name shows when a user holds the mouse pointer over the image and it's what the user sees if the user is viewing in a browser with images turned off. It is also the text that is read by screen readers for those who are sight disabled.



AdjusttheImage'sSize Resize an image by selecting it and then dragging one of the resizing handles. Drag the side handle to resize the width, the bottom handle to resize the height, and the corner handle to resize both.

You can more precisely adjust an image's size by changing the values in pixels in the width and height property in the Property Inspector.



DreamweaverTutorial:SettheImage'sAlignment Open the Align list and select how to vertically or horizontally align the image with text, or within its layer, cell, or frame To align the image horizontally, click the Align Left, Align Center, or Align Right buttons.

DreamweaverTutorial:AddaBordertoanImage To surround an image with a border on all four sides, enter a Border width in pixels. The color of the border is determined by the color of ordinary text in the surrounding vicinity or by a CSS file.

Here is the resulting image with a 1 pixel thick border around it.



AddMarginsAroundtheImage You usually don't want your text to be right up against the edge of an image, especially when wrap-ping text around an image. To add empty space along the left and right sides of the image enter a value in pixels under H Space (Horizontal Space). To add space along the top and bottom of an image, enter a value in pixels in the V Space (Vertical Space). Dreamweaver will create a margin with a width equal to the number of pixels you enter.



DreamweaverTutorial:TableFormattingPrecedenceWhen formatting Dreamweaver tables in Design view, you can set the properties for the entire table or for selected rows and columns, or cells in the table. The order of precedence for table formatting is:

1. Cells 2. Rows 3. Table

Table is the lowest level of precedence

Row is the middle level of prece-dence

A cell is the highest level of precedence

SplittingandMergingCells You can split a cell into any number of rows or columns. Dreamweaver automatically adds the neces-sary code in the <table> tag to tell the browser how to render the table.

You can merge any number of cells that are adjacent to each other as long as the entire selection is a line or a rectangle of cells to produce a single cell that spans several rows or columns.

These two cells were merged into one. The cell below was split into three cells.

Dreamweaver Tutorial: Inserting a Table

Use the Insert bar or the Insert menu to create a new table. Then you can add text and images to the table in the same way that you add text and images outside of a table.

In the Design view of the Document window, place the insertion point where you want the table to appear.

Select Insert, Table from the Insert menu or choose the Table button in the Common category of the Insert Bar.



The Common category on the Insert Bar - Locate the Insert Table button.

The Insert Table Dialog Box appears. You can navigate from box to box by using the Tab key.



Complete the dialog box by telling Dreamweaver how many rows and col-umns you want in your table. In the Table Width text box, enter a number that will either be in pixels or a percentage of the page width, then choose the units from the pop-up menu to the right of the text box. You can also specify other properties. For Border thickness, enter a number in the text box for the size of the border, in pixels, that will be displayed between cells.

For Cell padding, enter a figure in the text box for the amount of space, in pixels, between the content in the cells and the cell border around it.

For Cell spacing, enter a figure in the text box for the amount of space, in pixels, between cells.

You can also tell Dreamweaver whether or not the table should include a Header row or column and where it should be located: Left, Top, or Both. The icons for the headers tell you what each choice looks like.

Click OK and the table appears in the document.



Dreamweaver shows green dimension lines above the table to tell you the width of the table in pixels. The top line shows the width of the table in pixels. Each column shows the width of the column in pixels if you have set a fixed width for the column. Columns with widths relative to the table width show green lines without pixel values.

To insert a table within a table, place the insertion point inside a cell of an existing table, then choose either of the table insertion methods: Insert Table from the Insert Menu or Click on the Table icon on the Insert Bar.

DreamweaverTutorial:SelectingRowsandColumnsYou can select an individual row or column or multiple rows or columns. To select individual or mul-tiple rows or columns, position the pointer to point to the left edge of a row or the top edge of a col-umn. You'll see a small black arrow to indicate the row or column that you are about to select. When you click on the row or column, it will be selected as indicated by the black selection lines around it.

Do the same to select columns.

To select a single column, you can click the column header menu (the green arrow), and then choose Select Column from the pop-up menu.

DreamweaverTutorial:SelectingCells To select a single cell, click in the cell, then select the <td> tag in the tag selector at the lower-left corner of the Document window.



You can also Control-click in Windows or Command-click in the cell on a Mac. You can also click in the cell and then from the Edit menu, choose Select all.

To select multiple adjacent cells, you can click in one cell and drag from one cell to another, highlight-ing and selecting the adjacent cells as you go.

Selecting Nonadjacent Cells

You can select nonadjacent cells by holding down the Control key on Window (Comman key on a Mac), and clciking in the cells you want to select. You can also select nonadjacent rows and columns.

Dreamweaver Tutorial: View and Set Table Properties

1. Select a table, cell, row,or column.

2. In the Property Inspector, click the the expander selector in the lower right corner to see all the properties.

In the Property Inspector, you'll see table properties for the following:

Property Description Table ID Table ID is an ID for the table. Rows The number or rows in the table Cols The number of columns in the table



Width The width of the table in pixels, or as a percentage of the browser win-dow's width.

Height The height of the table in pixels, or as a percentage of the browser win-dow's height. You usually don't need to set the height of a table.

Cell Pad Cell Padding is the number of pixels between a cell's content and the cell boundaries. If Cell Padding is not specified, by default, Dreamweaver sets it to 1 pixel.

CellSpace Cell Spacing is the number of pixels between adjacent table cells. If Cell Spacing is not specified, by default, Dreamweaver sets it to 2 pixels.

Align

Align determines where the table appears, relative to other elements in the same para-graph.

Left - aligns the table to the left of other elements so that text will wrap around the table to the right. Right - aligns the table to the right of other elements with text wrapping around it to the left. Center - aligns the table in the center with text appearing above and below the table. Default - indicates that the browser should use its default alignment. Note: If you want to display other content next to a table, use the Left or Right align-ment.

Border Border specified the width, in pixels, of the table's borders. Bg Color Bg Color is the table's background color. Bg Image Bg Image specified the image to use for the table background image. Brdr Color Brdr Color is the color for the table's borders. Clear Column Widths

This button deletes all explicitly specified column width values

Clear Row Heights This button deletes all explicitly specified row heights Convert Table Widths to Pixels

This button sets the width of each column in the table to its current width in pixels.

Convert Table Height to Pixels

This button sets the height of each column in the table to its current width in pixels.

Convert Table Widths to Percent

This button sets the width of each column in the table to its current width expressed as a percentage of the Document window's width.

Convert Table Heights to Percent

This button sets the height of each column in the table to its current width expressed as a percentage of the Document window's width.

Documents

DreamWeaver Tutorial (for IGCSE ICT Practicals)