Creation and layout of a web page, Gif-graphics



Consider the basic <..> html encoding commands or "tags". This is how the page code looks first, here is the title of the page <title>, its type and character encoding, the background and text color. Immediately need to change the charset on windows-1251 , otherwise the page display will be incorrect (you need the Cyryllic encoding, do not confuse with 1252):

<html>
<head>
<title> Untitled Document </title>
<meta http-equiv="Content-Type" content="text/html; charset= iso-8859-1 ">
</head>
<body bgcolor=" #FFFFFF " text=" #000000 ">
</body>
</html>

Here is the name of the page we see on the top of the browser panel, the background file and its stillness when scrolling the text, left margin = 40pix:

<html>
<head>
<title> Y-net страница1 </title>
<meta http-equiv="Content-Type" content="text/html; charset= windows-1251 ">
</head>
<body background=" index.files/fon.gif " bgproperties=" fixed "
leftmargin="40" >
</body>

In Dreamweaver, all the parameters of the <body> tag can be set using the menu Edit / From the page properties:

A quick tag editor allows you to edit any tag at once from the visual mode, and the name of the new tag can be selected from the alphabetical list of names of all possible attributes of this tag. Parameters for format, font, size, color, links and others are set by the properties or formatting panel that Can be called by pressing (Ctrl-F3) :

Selecting any text, you can specify a link on the Internet - where you get when you click on it with your mouse. Then you can touch the entered addresses with the arrow. Clicking on the folder icon, you select a link to any file on your page.

Graphics objects: drawings (simple and with guidance), tables, buttons, menus, flash and other inserts are created and edited using the Common panel called by the buttons (Ctrl-F2).

In addition, all these commands are in the main menu: In the set

A text link to another page forms the following tag:

<a href=" http://www.shram.kiev.ua "> название ссылки </a>

If you specify a file instead of an address, then it can be uploaded by a visitor from your page:

<a href=" http://www.shram.kiev.ua/file.zip "> скачать file.zip </a>

When you insert a picture, the program immediately sets its size, with their help it can be scaled, but not without distortion:

<img src=" pen_.gif " width=" 100 " height=" 200 ">

If you create a layer for a drawing, you can move it across the page regardless of the text, its coordinates are automatically saved as a code, and you can superimpose one image to another:

<div id=" Layer2 " style="position:absolute; width: 112 px; height: 205 px; z-index:2; left: 602px; top: 787px">

There is another way of placing the picture on the side of the text, without using layers:

<p align="justify"><font size="3"><img align="right" hspace=" 20 " src=" name.jpg " width=" 120 " height=" 100 ">... д а л е е идет нужный т е к с т </font></p>

In this case, the text will be on the left, and the figure on the right align = "right" , hspace = "20" - the picture fields, to place the picture on the left, you need to specify the parameter align = "left"

By putting on the Gif-animation page you can make the decoration more vivid, but do not get too carried away to overload it unnecessarily. In any case, the collection of animated gif images is sure to come in handy when creating a page:

In a quality Gif file there can be quite a lot of frames (frame - frame, frame), so in the dancing pencil there are as many as 40 - somewhere on 1 Kb per frame. Each frame is a separate picture that you can edit and create your own new animations (hover over the 3rd ball - an example of an interactive drawing):


Figure 1:
Figure 2:

Now together:

Here you can use three figures: 1- when you hover the cursor, 2- after the hover, 3 - before hovering

<a href="" onMouseOver="document.image.src=' 1.gif '; return true;" onMouseOut="document.image.src=' 2.gif '; return true;"><IMG SRC=" 3.gif " border=0 name=image></a>

Serial for Gif Movie Gear 3.0.2 - Name: Sempai ^ LasH , Serial: mg37slsh03217

Dreamweaver has a rich arsenal of insertion commands for ready-made web page objects (set), which greatly simplifies the layout process and reduces the number of errors in the structure and parameters of the tags, however, the editor does not completely eliminate the "manual" correction of the page code. It is also convenient to use various pop-up panels with a variety of settings ( About ), but a large number of open panels overload the working screen, so experienced users try to use the main menu commands instead of additional panels (in most cases they are duplicated).

Right-click the pop-up menu that duplicates all the commands in the format bar:

Setting default editor options in the Edit / Settings menu :


Quick call - (Ctrl-U)

The Fireworks utility is specifically designed to create and design a web photo album. Dreamweaver allows you to insert the html code created in the Fireworks application along with associated images and JavaScript code into the final document ( To / Create photo album). This feature makes it easy to insert ready-made tables or image maps into the Dreamweaver document. If you save a workpiece or template of your page, then it can be easily used by inserting it into other documents. At once folders are created: thumbnails, images, pages, notes, as well as the main page of your photo album.

In Dreamweaver 4 you can convert and import web files of different formats:

Creation of the page begins with the development of its content and structure, then a sketch of the layout of all menu items, graphics, text and object fields is done.

First the page is created on the vintchester, the start file is called ../index.htm , the graphics mapping files are better sorted by folders either by subject, or by belonging to the page. Names to other files can be given as conveniently, but if you changed something when editing the page, you need to update the references to new names and the location of the files used earlier. If you notice that you have lost the picture, you can click on it in the editor and Dreamweaver will open the folder where the lost file used to be and highlight its name. You just have to find it and point it at the editor. Uploaded files from the network will be displayed only when accessing the Internet from the address specified in advance. In addition, it must be remembered that the file names must consist only of Latin letters and not contain spaces and forbidden characters.

During the editing process, the page should be periodically downloaded to Internet Explorer, as it can be displayed differently in the editor. When you make a layout, you specify the files as they are on the disk. When the page is ready, it can be downloaded to the server where you register. At the same time, the structure of your site should not be violated, and the path to the file on the disk will be replaced with the address of your future page. For example, file C: /../ temp / index.htm will be http://www.shram.kiev.ua/index.htm

There are programs called ftp-managers that help to update and download files from any available computer on the Internet and work with them as in a conductor (in remote access mode).