This page has been robot translated, sorry for typos if any. Original content here.

Creation and layout of a web page, Gif-graphics



Consider the basic commands <..> html encoding or "tags". This is how the page code looks at first, here is the title of the <title> page, its type and character encoding, background color and text. Immediately you need to change the charset to windows-1251 , otherwise the display of the page will not be correct (you need 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, which we can see on the top of the browser panel, the background file and its stillness when scrolling 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 And Change / From the page:

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

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

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

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

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 the address, it can be downloaded from your page by visiting:

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

When you insert a picture, the program immediately sets its dimensions, 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 picture, you can move it around the page regardless of the text, its coordinates are automatically saved as a code, and you can overlay one image on 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" will be the image fields;

Placing Gif-animation on the page you can make the design more vivid, but don’t get too carried away to overload it. In any case, a collection of animated gif images will definitely come in handy when creating the page:

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


Figure 1:
Figure 2:

Now together:

here you can use three pictures: 1- when you hover the cursor, 2- after pointing, 3 - before pointing

<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 commands for inserting ready-made web page objects ( B set), which greatly simplifies the layout process and reduces the number of errors in the structure and parameters of tags, however the editor does not completely relieve you of the "manual" correction of the page code. It is also convenient to use various pop-up panels with various 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).

You can use the right mouse button to open a pop-up menu duplicating all commands of the formatting panel:

The default editor options settings in the Edit / Settings menu:


quick call - (Ctrl-U)

Fireworks Utility is specifically designed to create and design a web photo album Dreamweaver allows you to insert html code created in Fireworks along with associated images and JavaScript code in the final document ( To command / Create photo album). This feature makes it easy to insert into a Dreamweaver document ready-made tables or maps of images. If you save a blank or template of your page, then it can be easily used by inserting into other documents. Immediately create folders: 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:

Page creation begins with the development of its content and structure, then a sketch is made of the layout of all menu elements, graphics, text and fields of objects.

First, the page is created on the screw reader, the startup file is called ../ index.htm , it is better to sort the graphics display files by folders, either by theme or by page. The names of other files can be given as convenient, but if you changed something when editing the page, then you need to update the links to the new names and location of the files used earlier. If you notice that the picture is missing, 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 need to find him and point him to the editor. Downloadable files from the network will be displayed only when accessing the Internet from the address that was specified in advance. In addition, it should be remembered that file names should consist only of Latin letters and should not contain spaces or prohibited characters.

During the editing process, the page must be periodically loaded into Internet Explorer, since it may appear differently in the editor. When layout, you point to the files as they are on the disk. When the page is ready, you can transfer it to the server where you register. In this case, the structure of your site should not be broken, and the path to the file on disk will replace the address of your future page. For example, the file C: /../ temp / index.htm will be http://www.shram.kiev.ua/index.htm

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