Adobe Dreamweaver CS6 Sending Form Lessons. Training Dreamweaver. Select document display mode

Drimviver is a powerful tool that allows tens of times to simplify many routine operations with which any Web master is inevitably facing. The convenient transition between the graphic mode and the code editing mode allows you to get the maximum control over the site being created.

Adobe Dreamweaver for beginners.

In this lesson, we will learn to work with this code editor and make the primary setup of the program:

First of all, you must click the Edit and Go Settings -\u003e Create Document (New Document).

In the dialog box that appears, you must set the following parameters:

Default document type (DTD) -\u003e HTML 4.01 Transitional

Default Encoding -\u003e Cyrillic (Windows)

We go to the created local drive Z: \\ (this disk is created by the default program). There in the home directory create a folder with the name Plata.ru, in which, in turn, create a WWW folder in which you create an IMG folder. As a result, the hierarchy should be obtained - z: \\ home \\ plata.ru \\ www \\ img.

Press Create (NEW) -\u003e Site (Site)

On the tab Local information We introduce basic information about the site:

Site name: Plata.ru

Local root directory: z: \\ home \\ plata.ru \\ www \\

Default image folder: z: \\ home \\ plata.ru \\ www \\ img \\

In the document that opens, between tags We prescribe the following code:

Hello World

Restart Denver to update the address list and in any available browser, in the address bar We enter www.plata.ru.

It should work like this:

It remains only to attach the style sheet and the Dreamviver setup can be finished.

Create a new file with the name SS.CSS in the root directory of the site and prescribe inside a small code

Press the right mouse button in a blank area of \u200b\u200bwork with styles located in the upper right corner of the program window, and choose attach Style Sheet (ATTACH STYLE SHEET).

Enter the address where you saved the table and click OK. We save both documents and check in the browser. The color of the lettering should become red.

In this lesson, we configured the Dreamweaver program to work with our future site. This program will be simply indispensable and soon you will be able to make sure that.

In the next lesson we will analyze.

purpose : Get acquainted with Dreamweaver when creating a web page, as well as with the working area of \u200b\u200bthe program.

Tasks:

  • Explore the workspace.
  • Learn how to create a new page using CSS content.
  • Learn to save the document.
  • Learn to change the name of the page and text headers.
  • Learn to insert text from an external document.
  • Learn to add images to the foreground and as background images.
  • Learn how to create, change and choose CSS styles.
  • Learn to work with Code display modes (code) and Code and Design.

Before proceeding with the study,.

In the process of performing all laboratory work, you will be created by a full-fledged tourist company website.

The structure of the web pages is shown in Figure 1.

Figure 1 - Final Website Structure

As a result of this laboratory work, you should get such a web page (Figure 1.1):

Figure 1.1 - Preview Web Page

Using Welcome Screen.

Welcome Screen window provides quick access to the pages with which you have recently worked, helps to easily create different types of pages and provides direct access to some key themes in which you can find answers to your questions. Welcome Screen appears when you first start the program or if any other documents are not open.

Let's use the Welcome Screen window to explore ways to open the document.

1. To open a new empty page, click Option HTML In column Create New.(Create) (Figure 1.2).

Figure 1.2 - Welcome Screen window

2. Before you will open a new HTML Document (Figure 1.3).

Figure 1.3 - New HTML window

CSS layout selection

In Adobe Dreamweaver CS4 there are 32 CSS layout files, each of which is different. In this task, we will choose one file and change it.

  1. Perform File \u003d\u003e New (File \u003d\u003e Create) .
  2. Choose Column Blank Page (Empty page) in the dialog box New Document (Create a document) .
  3. Choose HTML In column Page Type (Page type) .
  4. Choose 2 column. fixed, Left. sidebar, Header. and. footer. (2 columns of fixed width, side field on the left, upper and footer) in column Layout.(Layout) .
  5. Do not change the settings for other options set by default and click on the button. Create.(Create).
  6. Choose File \u003d\u003e Save (File \u003d\u003e Save).
  7. Save As.(Save as) Go to the folder lab1. Enter "umbria.html" and click on the button Save.

Select document display mode

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

  • Design. (Design) - represents a page in the context of a similar browser;
  • 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 on the button Split. (split) to display this display mode.
  • Live. (Interactive viewing) - represents a page in a browser operating in real time.

Figure 1.4 - Display modes

Display modes are associated with each other. Any changes made in one of them can immediately be seen in others.

Changing page title

The title of the page is displayed in the browser header string. Page headers are one of the key elements used by the search engines to index the websites.

  1. Select the "Untitled Document" text filler ("Document Untitled") in the field Title (name) Toolbars Document (Figure 1.5).
  2. Type "Umbria Hill Town Tours" there and click ENTER.

Figure 1.5 - Document Toolbar

Changing headlines

Fillers headers in Dreamweaver easy to change.

1. Two times click on the text of the aggregate Titleto choose it. Then enter "Travel in Umbria to us" (Figure 1.6).

Figure 1.6 - Change title placeholder

2. Mouse over the text of the aggregate Main.Content (Basic content) and highlight the entire phrase.
3. Having highlight the text, enter "You get pleasure. We are working." (Figure 1.7)

Figure 1.7 - Changing content aggregate

4. Select File \u003d\u003e Save(File \u003d\u003e Save).

Insert text

Simple tex can be changed as easily as headlines.

1. Place the cursor before the simple text of the aggregate and select the text to the end to select the second header filler and all paragraphs.
2. Press the key Delete.To remove what you have chosen.
3. Go to the file TEXT.. tXT. Located in the folder Lessons / lab1 / text.txt.

4. Copy the text to the clipboard.
5. Insert the copied text under the heading "You get pleasure. We are working." (Figure 1.8).

Figure 1.8 - Text Insertion

The text will automatically formatted as paragraphs.

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

Inserting images

1. Select all the contents in the side panel, including the filler header Sidebar1 Content And two subsequent paragraphs.
2. Tap Delete..
3. Click by

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. (Insertion) is invisible, make it visible by choosing Window \u003d\u003e Insert (Window \u003d\u003e Insert). Perform INSERT \u003d\u003e COMMON => Images (Insert \u003d\u003e general \u003d\u003e image) (Figure 1.10).

Figure 1.10 - Panel INSERT

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 - SCULPTED-GARDEN.JPG image insert

6. Place the cursor at the beginning of the main paragraph, which begins with the words "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 an additional text. Click OK (Figure 1.12).
9. If the Properties panel is invisible, select Window \u003d\u003e Properties.
10. Selecting the newly inserted image, activate fLTRTin the pop-up menu Class (class)panels Properties..

FLTRT class Abbreviation from Float Right, respectively FLTLFT - Float Left.

11. Select File \u003d\u003e SAV.

Figure 1.12 - ITALIAN-HILL-TOWN.JPG image insertion

Selection and change of styles CSS.

Modern web pages use cascading style sheets (CSS) for stylized design and layout. The web page is often compared with a chair with three legs, which is the role of HTML, CSS and JavaScript, which are components of its structure. HTML is a co-holding, the material that you enter in Design display mode. CSS is an appearance and layout with defined elements, colors and backgrounds. JavaScript adds an interactive function. In this exercise, you will change the background color of the existing page, add graphs to the back plan and set up several text attributes. All these actions are performed by using the panel. CSS.Styles. (CSS styles).

CSS can be used to change the properties of the style of any HTML tag, such as tag .

1. Select Window \u003d\u003e CSS Styles (Window \u003d\u003e CSS Styles). Panel opens CSS Styles..
2. If necessary, click on the button. All (all) On the panel CSS Styles.to change the current mode Current.

All Mode displays all CSS styles associated with the current PC\u003e. You need a document in the document viewing window to see any styles on the panel. CSS Styles..

3. Open the entry