THE WINCHESTER SCHOOL

ICT DEPARTMENT

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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.

StandardToolbarThetoolbarcontainsshortcutstopreviewanddisplayfeatures,andatextfieldwhere youcanspecifythetitleofapage.ItallowsyoutochangebetweenCodeview,Designview,andSplit view.YoucanalsopreviewyourWebpageinvariousbrowsers,andchangevariousviewoptions.

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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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 Document Window. Click the Property Inspector's Hide button to hide the panel temporarily.

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 together 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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL Save a Web Page

ICT DEPARTMENT

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. Dreamweaver 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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

Dreamweaver: Add Paragraphs and Headings

This Dreamweaver section demonstrates how to add paragraphs and headings in Dreamweaver. Add Paragraphs Almost all web pages include some type of text formatted in paragraphs. Much like a word 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 and Dreamweaver adds a blank line after the text. Dreamweaver adds the following HTML source 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, alignment, 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 example 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>

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL <h2>Heading 2</h2> <h3>Heading 3</h3>

ICT DEPARTMENT

<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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

Align Paragraphs and Headings in Dreamweaver

This Dreamweaver tutorial demonstrates how to align paragraphs and headings in Dreamweaver. 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 formatting as the previous paragraph. So if your first paragraph was justified and you hit the enter 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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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 This is an example of This is an example of This is an example of

This is an example of the Italic style using the <emphasis> tag.

This is an example of the Variable style using the <var> tag.

the Teletype style using the <tt> tag. the Underline style using the <u>tag. the Strikethrough using the <s> tag. the Code style using the <code> 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.

This is an example of the Sample style using the <samp> tag. This is an example of the Keyboard style using the <kbd> 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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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 appear with several options for formatting text.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

Dreamweaver: Change a Font Typeface

With the text selected, click on a font family from the Font drop-down menu in the Property 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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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 Inspector. 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 expect 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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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 Insert Text toolbar, a menu of special characters will appear like the one on 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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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 that transfer 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 is the 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 image, a Microsoft PowerPoint presentation, or multimedia file. The destination page or file can 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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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..

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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. COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

Dreamweaver Tutorial: Insert Images Into Your Web Page

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 toolbar.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

Resize an Image
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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

Dreamweaver Tutorial: Cropping an image

Click 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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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.

Dreamweaver Tutorial: Resize an Image

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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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.

Giving an Image Alternate text

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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

Adjust the Image's Size

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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

Dreamweaver Tutorial: Set the Image's Alignment

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.

Dreamweaver Tutorial: Add a Border to an Image

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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

Add Margins Around the Image

You usually don't want your text to be right up against the edge of an image, especially when wrapping 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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

Dreamweaver Tutorial: Table Formatting Precedence

When 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 precedence A cell is the highest level of precedence

Splitting and Merging Cells

You can split a cell into any number of rows or columns. Dreamweaver automatically adds the necessary 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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

Complete the dialog box by telling Dreamweaver how many rows and columns 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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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.

Dreamweaver Tutorial: Selecting Rows and Columns

You can select an individual row or column or multiple rows or columns. To select individual or multiple rows or columns, position the pointer to point to the left edge of a row or the top edge of a column. 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.

Dreamweaver Tutorial: Selecting Cells

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.

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

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, highlighting 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
Table ID Rows Cols

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

COMPILED BY : MRS. SHALINI RAJAN

THE WINCHESTER SCHOOL

ICT DEPARTMENT

Width Height Cell Pad CellSpace

The width of the table in pixels, or as a percentage of the browser window's width. The height of the table in pixels, or as a percentage of the browser window's height. You usually don't need to set the height of a table. 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. 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 determines where the table appears, relative to other elements in the same paragraph. 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 alignment.

Align

Border Bg Color Bg Image Brdr Color Clear Column Widths Clear Row Heights Convert Table Widths to Pixels Convert Table Height to Pixels Convert Table Widths to Percent Convert Table Heights to Percent

Border specified the width, in pixels, of the table's borders. Bg Color is the table's background color. Bg Image specified the image to use for the table background image. Brdr Color is the color for the table's borders. This button deletes all explicitly specified column width values This button deletes all explicitly specified row heights This button sets the width of each column in the table to its current width in pixels. This button sets the height of each column in the table to its current width in pixels. 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. 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.

COMPILED BY : MRS. SHALINI RAJAN