> >

Courses on working at dreamweaver. dreamweaver training

Target : Familiarize yourself with Dreamweaver when creating a web page, as well as the program’s workspace.

Tasks:

  • Explore the work area.
  • Learn to create a new page using CSS content.
  • Learn to save a document.
  • Learn to change page title and text headings.
  • Learn to insert text from an external document.
  • Learn to add foreground and background images.
  • Learn to create, change and select CSS styles.
  • Learn to work with Code and Code and Design display modes.

Before you start studying,.

In the process of completing all laboratory work, you will create a full-fledged website for a travel company.

The structure of web pages is shown in Figure 1.

Figure 1 - Structure of the final website

As a result of this laboratory work, you should end up with a web page like this (Figure 1.1):

Figure 1.1 - Web page preview

Using the Welcome screen

The Welcome screen provides quick access to pages you've recently worked on, helping you easily create different types pages and provides direct access to some key topics where you can find answers to your questions. The Welcome screen appears the first time you start the program or if no other documents are open.

Let's use the Welcome screen to learn how to open a document.

1. To open a new blank page, click on the option HTML in column Create New(Create) (Figure 1.2).

Figure 1.2 - Welcome screen window

2. A new one will open before you HTML document (Figure 1.3).

Figure 1.3 - New HTML window

Selecting a CSS Layout

Adobe Dreamweaver CS4 has 32 CSS layout files, each with a different design. In this task we will select one file and modify it.

  1. Execute File => New(File => Create) .
  2. Select Column Blank Page (Empty page) in the dialog box New Document(Create Document) .
  3. Select HTML in column Page Type(Page Type) .
  4. Select 2 columns fixed, left sidebar, header and footer(2 fixed width columns, left side margin, header and footer) per column Layout(Layout) .
  5. Leave the other options set to their default settings and click the button Create(Create).
  6. Select File => Save(File => Save).
  7. Save As(Save As) go to folder lab1. Enter "Umbria.html" and click on the button Save.

Selecting a document display mode

We will perform most web design operations in the window Design, but remember that by the window Document There are four display modes (Figure 1.4):

  • Design(Design) - presents the page in a browser-like context;
  • Code(Code) - displays the source code of the page;
  • Code and Design(Code and Design) - combines and display mode Design and display mode Code. Click the button Split(split) to display this display mode.
  • Live(Live View) - presents the page in a browser operating in real time.

Figure 1.4 - Display modes

The display modes are related to each other. Any changes made in one of them can be immediately seen in the others.

Changing the page title

The page title appears in the browser title bar. Page titles are one of the key elements, used search engines for website indexing.

  1. Select the "Untitled Document" text placeholder in the field Title(Name) toolbars Document(Figure 1.5).
  2. Type in "Umbria Hill Town Tours" and click Enter.

Figure 1.5 - Document toolbar

Changing Headers

Title placeholders in Dreamweaver are easy to change.

1. Double-click the placeholder text Title to select it. Then enter “Travel Umbria with us” (Figure 1.6).

Figure 1.6 - Changing the title placeholder

2. Hover over the beginning of the placeholder text MainContent(Main content) and highlight the entire phrase.
3. With the text selected, type “You're having fun. We are working." (Figure 1.7)

Figure 1.7 - Changing the content placeholder

4. Select File => Save(File => Save).

Inserting text

Plain text can be changed as easily as headings.

1. Place the cursor in front of in plain text placeholder and select the rest of the text to select the second header placeholder and all paragraphs.
2. Press the key Delete to remove what you selected.
3. Browse to file Text. txt located in a folder Lessons/lab1/Text.txt.

4. Copy the text to the clipboard.
5. Paste the copied text under the heading “You're having fun. We are working." (Figure 1.8).

Figure 1.8 - Inserting text

The text will automatically be formatted as paragraphs.

6. In the same way, enter “Umbria Hill Town Tours” in the field Footer.
 7. Create the end of the line by clicking Shift+ Enter, then enter "Our Contacts".

Inserting Images

1. Select all content in the sidebar including the placeholder title Sidebar1 Content and the next two paragraphs.
2. Click Delete.
3. Click

and press Delete in the tag selector located at the bottom of the Document window to remove the tag

(Figure 1.9).

Figure 1.9 - Tag selector

4. If the panel Insert(Insert) is invisible, make it visible by selecting Window => Insert(Window => Insert). Execute Insert => Common => Images(Insert => General => Image) (Figure 1.10).

Figure 1.10 - Insert panel

5. Go to the files located in the folder Lessons/lab1/ and select sculpted-garden.jpg and click OK (Figure 1.11).

Figure 1.11 - Inserting the image sculpted-garden.jpg

6. Place your cursor at the beginning of the body paragraph that begins with “Come and Enjoy” and select Images on the panel Insert.
7. Select an image italian-hill-town.jpg and press OK.
8. Enter "italian-hill-town" as additional text. Click OK(Figure 1.12).
9. If the Properties panel is not visible, select Window => Properties.
10. With the image you just inserted selected, activate fltrt in the popup menu Class panels Properties.

The class fltrt is an abbreviation for float right, respectively fltlft - float left.

11. Select File => Save.

Figure 1.12 - Inserting the image italian-hill-town.jpg

Selecting and changing styles CSS

Modern web pages use Cascading Style Sheets (CSS) for styling and layout. A web page is often compared to a chair with three legs, with HTML, CSS and JavaScript being the components of its structure. HTML is the content, the material that you enter in the Design display mode. CSS is appearance and layout with certain elements, colors and backgrounds. JavaScript adds interactive functionality. In this exercise, you will change the background color of an existing page, add graphics to the background, and configure several text attributes. All these actions are performed through the use of the panel CSSStyles(CSS styles).

CSS can be used to change the style properties of any HTML tag, for example tag .

1. Select Window => CSS Styles (Window => CSS Styles). The panel will open CSS Styles.
2. If necessary, click the button All on the panel CSS Styles to change the current mode Current.

All mode displays all CSS styles associated with the current page. You must have the document open in the document viewer to see any styles in the panel CSS Styles.

3. Open the entry