Computer Skills

0761111

Adobe Dreamweaver CC Tutorial

Part 2

Prepared by: Eman Alnaji

Chapter Two: Working with Text

When adding a text to your web page, Dreamweaver works like a word-processing program. You can type whatever text you need in the Design view and a code will be generated automatically in HTML.

This sentence "Welcome to Dreamweaver!" was written directly in the Design view. Check the document toolbar, "Design" button is clicked.

If you need to check the HTML code generated by writing this sentence, press on "Code" button.

1

Click "Split" button to display both the design and the code at the same time.

Add any extra text in the right-hind side view (design) and note the change in the left-hind side view (code), and vice versa.

Surely, sometimes you need to add ready text entered in another program, such as Notepad, your email, etc. Simply copy the text you need (Ctrl+C) and paste it in the Design view in Dreamweaver (Ctrt+V). You can use "Edit" menu for copy, cut and paste.

2

Paste Special

Paste Special command, helps you paste any text copied from MS word, Excel, etc. so that you can choose whether to add its format or not, according to several options you can use. Of course, you can use this command only on Design View, not Code View.

Paste Special From MS Word:

If you have the following text written in Microsoft Word Program:

Copy this text, then in Dreamweaver, Select "Edit" "Paste Special". From the resulting dialog, choose "Text only".

The resulting text will result plain without any formatting.

If "Text with Structure (Paragraphs, list, table,etc,)" was selected, the resulted text will be pasted with bullets formatted but without styles (bold, italic, etc.) or colors.

3

If "Text with structure plus basic formatting (bold, italic)" is selected, styles (bold and underlined) will be pasted, but the highlighted color will not.

Finally, if "Text with structure plus full formatting (bold, italic, styles)" is selected, the colors will be pasted too.

Paste Special From MS Excel:

Suppose you have the following table inserted in Excel. Copy the table, and then use Paste Special in Dreamweaver.

4

The following shows the resulting table in Dreamweaver according to the selection:

- "Text only"

- "Text with Structure (Paragraphs, lists, tables, etc)"

- "Text with structure plus basic formatting (bold, italic)"

The same as the previous option.

- "Text with structure plus full formatting (bold, italic, styles)

Adding a Date to Your Page

To display the current date, (the date stored in your system); Place the cursor on the design view, then go to "Insert Panel", and select "Date".

5

The Insert Date dialog will be displayed

From this dialog, you can select the format of the date to be displayed. Try to select the following formats:

6

The resulted date will look like:

The Option "Update automatically on save", if checked, that will make the date updated each time you save the page.

To change the selected form, select the date and check the Properties Panel.

Press "Edit date format" button, to re-open the "Insert Date" dialog, where you can reset the format.

Selecting Text

You have to select a text before performing some types of actions, such as formatting. So, to select a text in Dreamweaver, act as you are selecting in MS word:

- To select a word, double-click it- To select a paragraph, triple-click anywhere inside it.- To select a line or multi-lines of text, place the cursor at the starting point,

hold the mouse, and drag until selection is done.

Applying HTML Tags to Text

When placing a text in the design view, the Properties panel will look this way.

When "HTML" button is pressed, means that the other options in this panel will add code to the HTML code of your web page.

The options described in this section will enable you to format your text as if you are formatting a text using MS Word.

Check the following image that displays a simple text on the design view, along with its code in the code view.

7

Select the sentence in the design view, and then press the button from Properties panel.

Note that the text will become "Bold" in the design view, and new tags <strong> </strong> will be added to the code view, these tags are "HTML tags".

- To format the selected text as Italic, use .

- To add an unordered list, use

8

- To add an ordered list, use

- You can change between these two types of text, by selecting the list, and pressing the desired button.

- When placing the cursor over any place on the list, the button , in Properties panel will be activated. Pressing this button will display the dialog below.

From this dialog you can change the settings (type, style, starting count) for your list.

- Changing the style as follows:

9

Will change the list to

- Changing the settings as follows:

Will change the list to

- You can create Nested lists, and change the format of each inner list from the same dialog, by clicking any were in the intended list.

10

- To change a certain list item (ex. i. Programming Fundamentals), alone without affecting the other list(s), select the desired item and then modify the format in the lower part of the dialog.

The resulting list:

- To delete any list item, only select it and delete it using "Delete" from keyboard.

11

Paragraphs and Headlines:

From the "Format" List below, from Properties Panel, you can change the format of your text to look like a "Paragraph", or one of the Heading Styles listed. The Heading Styles, format a line as a heading with a certain style (bold) and proper size.

In the following image, these 6 lines of text has been formatted using the "Headings"

Using HTML Text Styles

From the main menu, select "Format" HTML Styles

You can choose the style you like to add on your text.

12

13