Dreamweaver creates a page based on a template. Installing a template in Dreamweaver. Editable areas in block elements

The drop-down folder list and file list will allow us to select the desired folder and file.
In the input field File name The name of the selected file will appear (or we can enter it there ourselves). A drop down list File type will allow us to choose what type of files we need to find. All this is familiar to us by standard dialog boxes opening and saving Windows files. The only difference is that there is a preview panel on the right. And if we want to remove it, turn off the checkbox Preview images. So we have selected the file. All that remains is to click OK. But Dreamweaver will ask us for some more information by displaying the “ Image Tag Accessibility Attributes(Image Tag Accessibility Attributes)” .

Combo list “ Alternate text(Alternative text)” of this window is used to set the so-called replacement text. This was invented for users of slow communication channels. After the Web browser loads the HTML file containing the Web page, it will display an empty frame of appropriate dimensions instead of the image placed on it. When the user places the mouse cursor over an empty picture frame, the Web browser will display a small tooltip containing this same replacement text. Therefore, it is recommended to always use this option.

Actually on the list Alternate text introduced short replacement text. Its limit is no more than 50 characters. If we need to display more verbose replacement text, we can save it in separate file Web page, and then enter its Internet address in the input field Long description. You can also click the folder button to the right of this field and select required file in the dialog box Select File. When you have finished entering the data, click OK. Dreamweaver will place graphic image to the location where the text cursor is currently located.

Graphics Options

Now let's save the resulting page, select the image if it is not selected, and look at the properties editor. What we will see there Input fields W And N allow us to set the dimensions of the image by manually entering its width and height, respectively. This can be useful if the highlighted image is part of the site design; in other cases, it is more convenient to set the image dimensions by dragging the resizing markers with the mouse.

In fact, when Dreamweaver places a graphic on a Web page, it automatically places its original width and height in these input fields. As we already know, the Web browser immediately after loading the page
displays images that have not yet been loaded as empty frames. If the image sizes have been explicitly set, they will be immediately applied to the frames and the page design will not be disrupted. Otherwise, the Web browser will display frames of a certain default size, and when the images are subsequently loaded, their sizes will change, causing the page itself to be redrawn. And this is very unpleasant.

Input fields V Space And N Space set, respectively, the vertical and horizontal distance from the edge of the image to the text flowing around it. By default they are both zero.

Entry field Src specifies the Internet address of the file where the graphic image is stored. To the right of it are two buttons. By clicking on the right one (with the folder image), we will open a dialog box Select Image Source.

We can also change the image file name by clicking on the image right click mouse and selecting Source File in the context menu, or simply by double-clicking on the image. After this, a dialog box will appear on the screen Select Image Source.

Entry field Low Src similar to field Src, except that it specifies the name of the file where the so-called "draft" image. The "draft" image is smaller in size, usually due to more Low quality, and was invented, again, for owners of low-speed communication channels. The Web browser will download the “draft” first, since it is much smaller in size, and display it on the page. And only then, while the user is viewing the finished page, the main image is gradually loaded and replaces the “draft”.

It is recommended to make a "draft" only when the original image is too large to load quickly. In particular, this will be suitable if we are going to make a website with artistic graphics.

Entry field Border allows you to set the thickness of the border displayed around the image, in pixels. By default it is zero, i.e. there is no frame.

Combo list Alt specifies the short replacement text already familiar to us.

Now let's look at the drop-down list Align. It allows us to specify the alignment of the image, essentially the relative position of it and the text it contains.
List Align contains the following items:

• Default- default location, usually similar to item Baseline;
• Baseline- the bottom of the image matches baseline text(an imaginary line on which a line of text is located) the line in which it is located;
• Thor- the top of the image coincides with the top of the text of the line in which it is located;
• Middle- the middle of the image coincides with the baseline of the text;
• Bottom- the bottom of the image matches the bottom of the text (usually not the same as Baseline);
• TextTop- the top of the image matches the top of the tallest text character (usually not the same as Thor);
• Absolute Middle- the middle of the image coincides exactly with center line of text(a line passing through the center of the line);
• Absolute Bottom- the bottom of the image coincides with the bottom of the lowest text character;
• Left- the image is “pressed” to the left edge of the page, and the text “flows” around it to the right;
• Right- the image is “pressed” to the right edge of the page, and the text “flows” around it to the left.

In the last two cases the image becomes floating. web browser to the left or right, and the text in which it was inserted will wrap around it. And at the point where the floating image was inserted, Dreamweaver displays a special floating image marker. This marker is displayed only as a convenience to the Web designer and only in Dreamweaver; The web browser does not display it at all.

So, we've figured out the properties editor. Now let's set the properties of our image. The distance from the text will be 5 pixels horizontally and vertically, the alignment will be left, the “alternative” text will be a “pop-up caption”. And save the page.

To return the original dimensions of the image, we can use the cancel button) located between the W and H input fields of the property editor and to the right of them, as well as the context menu item Reset Size. This is useful if we have badly distorted them and want to start over.

Special images

HTML and Dreamweaver allow you to create not only ordinary images, but also those with special properties. This hyperlink images, active images And image maps. They are often used on Web pages, so we will need to look at them.

Any image can be used as a hyperlink; to do this, just enter the Internet address in the " field Link"panels" Properties".
Moreover, you can give a link either to an email address or to another web page. In the second case, you will have access to the list " Target"

The image can be made active, reacting to hovering the mouse cursor over it - Rollover. To do this, you will need to stock up on two images that will replace each other, and on the " Common" press the appropriate button.
In the window that opens, you will need to fill in the required fields

In field Image Name- indicate the original name of the active image, and the name can only contain Latin letters (any active image must begin with a letter) and numbers (certainly Arabic!-:)
In field Original Image- enter the path to the main image, the one that will be loaded first on the page.

In field Rollover Image- enter the path to the “image effect”, - this image will appear only when you hover the mouse over your active image.
Check the box Preload Rollover- in this case, both images will be loaded by the browser at once and the effect will begin immediately upon hovering the mouse. Otherwise (if the checkbox is disabled), when you hover your mouse over such an image, the browser will start loading the second image... and some kind of slow effect will result.
In field Altemate Text- enter a text comment that will pop up when you hover your mouse over the image.
Well, in the Go To URL field - the Internet address.

Image maps

A map is a solid image with marked “hot areas”, and each such area is a hyperlink and has its own Internet address.

To begin, place the drawing on the page, select it by left-clicking on it and on the " tab Properties"Using the turquoise shapes (in the lower left corner there is a group of Map elements) select one of the methods for selecting a “hot area”. Since for the example I want to make blue icons the “hot area”, the closest thing to this is a rectangle shape. But you can select both a circle and an irregular shape Click on the quadrilateral and select the area of ​​interest.

The shape you select will look like this:

All you have to do is enter the Internet address in the “field” Link” (links can be to other pages of your site or to other sites, or to postal addresses), select one of the items in the Target field and enter alternative text in the Alt field.

After selection, you can move the selected area by clicking the arrow button in the lower left corner.
And to select figures of irregular shapes, just click with the left mouse button along the perimeter of the area to select. Finally, give the original name to your map in the Map input field and that’s it.

Tables

To create a new table, go to the " tab Commons"panels" Insert" and press the button.

In the dialog that appears, fill in the required fields.
Rows- number of rows in the table
Columns- number of columns in the table
Table width- table width, and in the drop-down menu you need to specify the units of measurement - percentages or pixels.
Border thickness- the thickness of the table frame in pixels, and if you set the value to zero, the table itself will not be visible on the page.
Cell Padding- indent distance inside table cells
Cell Spacing- distance between table cell borders
Switch set Header(Header) will allow us to create a "header" and highlight the first column of the table. This set includes the following switches: None (no header or first column selected), Left (first column selected), Top (header), and Both (both header and first column selected).
The cells that make up the header and the highlighted column will be styled as header cells, and the text we enter in them will be automatically centered and bold.
In the input field Caption(Title) Enter the name of the table. This name will be located above the created table.
Drop-down list Align caption(Alignment) will allow us to set the location and alignment of the title (if, of course, we entered one). The following items are available here:
default (by default) - the alignment is performed by the Web browser itself, usually in this case the title is located above the table and aligned in the center;
top - the title is above the table and aligned in the center;
bottom - the title is located below the table and is centered;
left - the title is above the table and aligned to the left;
right - the title is located above the table and is aligned to the right.

In the editing area Summary(Total) table note is entered. This note is not displayed on the screen by Web browsers, but may be used for some other purpose (for example, it may be processed by programs that read on-screen text). It is not necessary to set it.

Once the table is created, you can resize it by dragging the borders with the mouse. Hover your cursor over one of the three squares in the table highlight.
Now let's place the text cursor in any cell of the table and type some text. Let's repeat the same with the remaining cells of the table.
A table cell must have at least some content, otherwise the Web browser may display it incorrectly. If the cell still needs to be empty, insert a non-breaking space into it (its HTML code is -), as Dreamweaver itself does in such cases.
To define the properties of a table - Select it by left-clicking on the table border. After that, on the "Properties" tab.

You can change the properties of the table and customize its appearance.
Field Table id- specify the table name (the attribute is optional)
Fields Rows And Cols- number of rows and columns in the table.
Fields V And H- width and height of the table in pixels or percentages.
Field Align- table alignment left, center or right
Field CellPad- distance inside the cell (between the content and the cell border)
Field CellSpace- distance between table cells
Field Bolder- table border width
BG Color- table background color
Brdr Color- border color for the entire table.
Bg Image- setting a background image for the table.

There are also six additional buttons there.

• Button ClearColumnWidths- clear column width values
• Button ClearRowHeights- clear line height values
• Buttons ConvertWidthstoPixels And ConvertWidthstoPercent- convert cell width to pixels and convert cell width to percentage
• Buttons ConvertHeightstoPixels And ConvertHeightstoPercent- convert cell height to pixels and convert cell height to percentage

In addition to setting table properties, there is also setting the properties of a cell or group of cells. To set the properties of a cell, left-click on it. If you want to set properties for a group of cells, then after clicking on the field of the first cell, without releasing the left mouse button, select the required cells (you can select at least the entire table in this way). When selected, the borders of all added cells will be painted in a different color.
After the cells are selected, pay attention again to the "panel" Properties"

Horz- horizontal alignment of cell contents (left, center or right)
Vert - vertical alignment cell contents (top, middle, bottom, or baseline)
In the fields W And H- specify the width and height of the selected cells; if you need to specify the values ​​as percentages, add the % symbol after the numeric value.
Bg And Brdr- setting the background of cells and setting the color of cell borders. And using the top field Bg - you can set background image for cells.
Checkbox NoWrap- prohibition of line breaks
Checkbox Header- to format selected cells as table header.
Now left-click inside any cell and press the button.
Using this dialog, you can split the selected cell into several parts. Switches Rows And Columns- divide into rows and columns respectively. Number of... - how many rows or columns the selected cell should be divided into.

Now select two cells and click the button.
The two cells you selected have merged into one and you can divide this new merged cell again or, on the contrary, combine it with others just like standard ones.
You can quickly apply formatting to any table. To do this, select the table and in the menu “ Commands” select item “ FormatTable(Format table)".
And in the dialog that opens you can customize the design of your table

After choosing one of the preset templates, you can change all its attributes to your taste.
You can cut, paste or copy table cells.
In order to cut a cell (or several cells), you need to select it and give the Edit - Cut command. The cell (or several) will be deleted from the table.
In order to copy a cell (or several cells), you need to select it and give the Edit - Copy command. The cell (or several) will be copied.
To paste copied or cut cells, use the Edit – Paste command.
Before moving on, try your hand at creating simple tables.

Table design

Let's say we are making an online store. We need to put the name, description, price and photo of the product on the page. With tables it's easier than ever.

With the help of a specially formatted table, we can place several pieces of text and a graphic image the way we need. And if we don’t like something, we can slightly alter this table and get a completely different result.

Web designers have long mastered tables. And just as long ago, a simple idea, like everything ingenious, was floating in the air. What if you put ALL the text of a Web page into a large, complexly formatted table, “stretching” it across the entire Web browser window? After all, then we will get practically unlimited possibilities, almost the same as those of our fellow printers. We will be able to create notes, footnotes, sidebars, and multiple “streams” of text that will start and stop where we need them.

Now we have come close to tabular design, i.e., a method of constructing Web pages using tables.
The basic principle of tabular design has already been given. All text and all graphics fit into table cells, allowing you to do whatever you want with them. Typically, such tables (let's call them layout tables) have invisible borders, and the rulers are created using very thin cells with background padding. Markup tables are very complex, use various formatting and multiple cell merging, and almost always use nested tables.
Creating complex markup tables manually is the pinnacle of Web design. Not everyone, even an experienced Web designer, will undertake to create complex pages based on tables. And all this is due to the incredible complexity of the resulting HTML code. Therefore, very often there are errors in the code of Web pages built on the basis of tables, which is why the Web browser cannot always display them. In fact, in all these numerous merged cells and in the most complex formatting, you can simply get confused.

Sample- this is a kind of sample, the “skeleton” of a Web page, containing elements common to all pages: the site title, a set of hyperlinks, copyright information, possibly a markup table, etc. These elements remain unchanged on all pages created based on this template , that’s why they are called immutable elements. Yes, but how does the main content fit on the page?
Very simple. Especially for this purpose, the template creates changeable areas . They are intended for the unique content of the page that will be created based on this template.

It's simple: we create a page based on the template and enter its main content into the editable areas. In this case, Dreamweaver does not allow us to edit immutable elements, and rightly so - they are immutable, after all. But it doesn’t matter - we can always change the template itself.

Let, for example, we need to fix the site title. Since it's part of the template, we open the template, fix it, and save it. Dreamweaver immediately prompts us to transfer the changes made to the template to all pages created based on it. And it transfers it so carefully that it does not affect the contents of the changeable areas! In fact, it corrects all duplicate elements on all Web pages of the site for us. Templates are saved in special files with the extension dwt, in folder Templates, which Dreamweaver creates itself in the root folder of the local copy of the site. The number of templates used in the site is not limited, so we can create some site pages based on one template, and others based on another. Or we can generally limit ourselves to one single template, as, in fact, most often happens.

Before creating a template, create a website. Register it in Dreamweaver.
Now let's create a document and make markup.

• Create a table with width 100%, 2 rows and 1 column, border 0.
• In the first line we will make a background (fon.gif) and a height of 100 pixels.
• Next, write the title My Site in the page title and in the first line. Set the text size to +7 and the color to yellow.
• In the second line, set the vertical alignment to Top.
• Insert another table with width 100%, 1 row and 3 columns, border 0.
• Set each cell's vertical alignment to Top.
• The width of the first column is 20%, the second 60%, the third 20%.
• In each column we will insert another table of 2 rows x 1 column, width 95%, table alignment centered. And also the vertical alignment in each cell is Top.
• Next, fill the lines with text as in my example.
• In the navigation column, set the color of the cells one by one to green.

Our page layout is ready. We won't do anything complicated. This will suffice for the purposes of this lecture.
Now is the time to create a template and editable areas.

There are two ways to create a Dreamweaver template. Firstly, it can be created from scratch, and then filled with content, like a regular Web page.
Secondly, an existing page can be saved as a template and then edited to remove useful content and leave only common elements. Both are equally easy to do.
To create a new template “from scratch” menu “ File – New“

It's even easier to create a new template from an existing Web page. To do this, open the desired Web page, select “ File" paragraph " Save as Template“ (Save as template). You can also click the button Make Template(Create Template) Object Panel. A dialog box will appear on the screen Save As Template ”.

In the dropdown list Site select the site where the template is saved. (Templates are an integral property of the site, remember) By default, the current site is selected there.

The template name itself is entered into the input field Save As. Let's call our new template main(“main”) because this is our main template that we will build our site around.
After entering all the required data, click the button Save(Save) to save the template.
After we create a new template, the latest one will appear in the list of templates. And because we created this new template based on an existing Web page, meaning it has content, we can preview it in the preview pane. However, this panel is very small, and in order to get an idea of ​​the contents of the template, we will have to open it in a document window.

Editing a template

The empty template needs to be filled with content. The template created on the basis of a Web page must be edited: remove content unique to this page, leaving only elements common to all pages of the site. To do this, we will need to open the template in a document window, like a regular Web page.
A document window will appear on the screen in which the template we have selected will be opened. Outwardly, it will be no different from a regular Web page.
What can we do with the template? Anything. You can think of it as a regular Web page with some special features. (We will describe these features further.) We can type text, format it, place images, tables, hyperlinks, switch to page layout mode and create tables and layout cells, create framesets, “clean up” HTML code, etc.
But still, the template is not a Web page and has some features. So, we will need to place changeable areas on it, which will subsequently contain the main content of the pages. (Moreover, we will definitely need to do this, otherwise why do we need this template then.) We will learn how to do this a little later.
Let's open the main template that we created based on the default.htm page (if it is not already open).

Now we need to put mutable areas into the template. For now, there will be only one changeable area - the main content of the page. And it will be located in the largest cell of our markup table. We'll leave the news column and navigation bar alone for now.

Creating Editable Regions

As with the template itself, we can create mutable areas in two ways. First, create an empty editable area in an empty area of ​​the page. Second, convert a portion of the page's current content into a editable region.

The first method is best if we created a template from scratch, and the second one is best if we converted an existing page into a template.

Creating an empty editable area in a template is very easy. To do this, first place the text cursor in the place where we want to create an empty editable area and decide what to use:

• object toolkit by clicking the button Templates on the tab Common and selecting the item in the menu that appears Editable Region;

• context menu by selecting from its submenu Template paragraph New Editable Region;
• system menu by selecting in the submenu Template Objects menu Insert paragraph Editable Region;
• keyboard, which is fastest - just press ++.

After this, a dialog box will appear on the screen New Editable Region.
In the only input field Name located in this window, enter the unique name of the newly created editable area. Each editable area we create in the template must have a unique name. This name can contain any characters except letters of the Russian alphabet, quotation marks, apostrophe and signs "<", ">" and "&". After entering a name, click OK to create the editable area, or Cancel to refuse this.

If we accidentally placed a mutable area in the wrong place we wanted, it can be fixed. We select the changeable area by clicking on its title, “grab” it with the mouse by its contents and drag it to the desired place.

Dreamweaver automatically creates a small editable doctitle area when you create any template. (This is why we won't be able to give the mutable area the name doctitie - a mutable area with that name already exists). This editable area includes the contents of the tag