Your paragraph of text
Note: Theis called an opening paragraph tag and the
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 Headingstags to heading tags which are signified by
tag. This is an example of the Variable style using the tag. This is an example of the Sample style using the tag. This is an example of the Keyboard style using the tag. This is an example of the Citation style using the tag. This is an example of the Definition style using the tag. This is an example of the Deleted style using the tag. This is an example of the Inserted tag using the 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 ty pe you want to apply to the selected text. Dreamweaver Dreamweaver applies applies the style to the text.
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.
THE WINCHESTER SCHOOL
In the Property Inspector, click on B for Bold text or I for Italic text.
ICT DEPARTMENT
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.
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 hexadecimal code.
THE WINCHESTER SCHOOL
ICT DEPARTMENT
THE WINCHESTER SCHOOL
ICT DEPARTMENT
Insert Special Characters in Dreamweaver This Section will explain how to insert special special characters in your Web page. 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.
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 document,, an image, a Microsoft PowerPoint presentation, or multimedia file. The destination page or f ile 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.
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.
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 th at 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 t o which you are linking..
THE WINCHESTER SCHOOL
ICT DEPARTMENT
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.
THE WINCHESTER SCHOOL
ICT DEPARTMENT
Dreamweaver Tutorial: Insert Insert Images 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.
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.
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.
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 i mage, click OK.
A frame appears around the image to be cropped with black handles around the edges.
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 i mage 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.
THE WINCHESTER SCHOOL
ICT DEPARTMENT
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 Image Alternate 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.
THE WINCHESTER SCHOOL
ICT DEPARTMENT
Adjust the 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.
THE WINCHESTER SCHOOL
ICT DEPARTMENT
Dreamweaver Tutorial: Set Set the the Image's Image's Alignment 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: Tutorial: Add 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.
THE WINCHESTER SCHOOL
ICT DEPARTMENT
Add Margins Margins Around Around the Image You usually don't want your text to be right up against the edge of an i mage, 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 Dreamweaver will create a margin with a width equal to the number of pixels you enter.
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 low est level of precedence R o w i s t h e m i d d l e l e v el el o f p r e c e dence
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 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 w ant the table to appear.
Select I n s e r t , T a b l e from the I n se s e r t m e n u or choose the T a b l e button in the Common category of the Insert Bar.
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.
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, 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.
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 w ithout pixel values. To insert a table within a table, place the insertion point inside a cell of an exist ing 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 tag in the tag selector at the lower-left corner of the Document window.
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 T ab ab l e I D 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
THE WINCHESTER SCHOOL
Width Height Cell Pad CellSpace
ICT DEPARTMENT
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.
Align
Border Bg Color B g I m a ge ge B r d r Co l o r Clear Column Widths Cl e a r R o w H e i g h t s Co n v e r t T a b l e W i d t h s t o P i x e ls ls Co n v e r t T a b l e H e i g h t t o P ix ix e l s Co n v e r t T a b l e W i d t h s t o P e r c en en t Co n v e r t T a b l e Heights to Percent
Left - aligns the table to the left of other elements so that text w ill 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.
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.
Sign In
Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close