Уроки создания сайтов
Урок 1. Шаблон любого сайта
Все сайты состоят из тегов, тег - это элемент, заключенный в скобки "<" ">".
Подробно о тегах читайте в любом html справочнике.
Примеры тегов:
<html> - обозначение начала веб страницы
</html> - обозначение конца веб страницы
<center> - начало размещения по центру всех последующих изображений, ссылок, картинок и т.д.<br>
Текст по центру(пример).
</center> - конец размещения объектов по центру.
<br> - тег перевода строки.
<title>
Заголовок Вашей страницы
</title>
Это тег, который используют поисковые машины для определения тематики Вашего сайта.
|
Шаблон любого сайта:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Заголовок сайта</title>
</head>
<body bgcolor="grey">
Тело Вашего сайта (меню, ссылки, картинки, текст, ролики и.т.д).
</body>
</html>
|
Перенесите этот текст в блокнот и сохраните его в Вашей рабочей папке под именем stranica2.html. Откройте страницу в Вашем браузере.
<html> - обозначаем тип документа.
<head> - обозначаем головную часть страницы.
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> - Устанавливаем кодировку страницы для читаемости страниц на русском.
<title>Заголовок сайта</title> - заголовок Вашей страницы.
</head> - конец головной части страницы.
<body bgcolor="grey"> - начало тела страницы с серым цветом фона.
Тело Вашего сайта (меню, ссылки, картинки, текст, ролики и.т.д). - Все видимые элементы страницы размещаются в теге <body>
</body> - конец тела страницы.
</html> - конец html страницы.
|
Описание тегов:
Урок 2. Таблицы - главный способ размещения объектов
Все объекты на страницах размещаются в невидимых таблицах. Вы задаете размеры этих таблиц, кол-во ячеек, размеры ячеек и.т.д.
Пример таблицы:
<table border="1">
<tr>
<td>A</td> <td>B</td> <td>C</td> <td>D</td>
</tr>
<tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
</table>
|
Перенесите этот текст в блокнот и сохраните его в Вашей рабочей папке под именем stranica3.html.
Откройте страницу в Вашем браузере.
Для создания строки таблицы используется тег "tr".
Для создания столбца в таблице используется тег "td".
Урок 3. Добавляем графику на сайт
Чтобы добавить изображние на сайт используется тег img.
Пример веб страницы с картинкой:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Картинка на странице</title>
</head>
<body bgcolor="grey">
<img src="kartinka.jpg">
</body>
</html>
|
Перенесите этот текст в блокнот и сохраните его в Вашей рабочей папке под именем stranica4.html.
Файл kartinka.jpg должен находиться в той же папке, что и файл stranica4.html
Откройте страницу в Вашем браузере.
Теперь вы умеете размещать картинки на страницах.
Чтобы разместить картинку в конкретном месте нужно использовать таблицу.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Картинка в таблице</title>
</head>
<body bgcolor="grey">
<table>
<tr height="300">
<td width="200"></td><td><img src="kartinka.jpg"></td>
</tr>
</table>
</body>
</html>
|
Перенесите этот текст в блокнот и сохраните его в Вашей рабочей папке под именем stranica5.html. Откройте страницу в Вашем браузере.
Здесь мы задали высоту строки tr height="300" - 300 пикселей.
И задали ширину столбца td width="200" - 200 пикселей
Задавая размеры ячеек и таблицы Вы можете регулировать положения картинок и др. объектов на странице.
Урок 4. Создаем кнопку и меню
Кнопку создать также элементарно, как и предыдущие объекты:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Магазины 3-го тысячелетия</title>
</head>
<body bgcolor="grey">
<table>
<tr height="300">
<td width="200"></td><td><a href="http://www.game-z.biz/promo.php?login=34739"><img src="knopka1.jpg" border="0"></a></td>
<td width="200"></td><td><a href="http://www.magashop.net/?aid=5442&said=34739"><img src="knopka2.jpg" border="0"></a></td>
<td width="200"></td><td><a href="http://www.mogozin.com/promo.php?login=34739"><img src="knopka3.jpg" border="0"></a></td>
</tr>
</table>
</body>
</html>
|
Перенесите этот текст в блокнот и сохраните его в Вашей рабочей папке под именем stranica6.html. Откройте страницу в Вашем браузере.
Файлы knopka1.jpg knopka2.jpg knopka3.jpg должны находиться в той же папке, что и файл stranica5.html
Мы создали с Вами меню с 3-мя кнопками при нажатии на которые посетитель переходит на сайты магазинов.
Вы поняли принцип создания любых Веб страниц.
Теперь используя любой html справочник Вы можете создавать сложнейшие сайты и зарабатывать.
Урок 5. Создаем gif анимацию
Чтобы оживить Вашу страницу создается gif картинка со сменой кадров, которую Вы размещаете с помощью тега img как и обычную картинку.
Чтобы создать gif анимацию Вам понадобится одна из этих программ: Adobe Image Ready, Ulead GIF Animator, Active GIF Creator, Easy GIF Animator и т.д. Создайте несколько стационарных кадров в формате gif и объедините эти кадры в анимацию. Помните, что большие анимационные файлы очень замедляют загрузку страницы. Ваша gif анимация не должна превышать размера в 100 килобайт.
Урок 6. Создаем флэш анимацию
Более продвинутый способ оживить сайт - Flash анимация. Для создания Вам понадобится Adobe Flash CS3 и выше.
Инструкция по созданию флэш анимации:
Пример 1:
1) Запустите программу Adobe Flash CS3, или выше.
2) Выберите команду Файл -> Создать -> Ok (FIle - > New - > Ok)
3) Изобразите в появившемся белом поле простую фигуру или линию или испльзуйте карандаш или кисть и.т.д.
4) Нажмите F6
5) Изобразите еще что-нибудь
6) Нажмите F6
7) Чередуйте рисование с нажатием клавиши F6.
8) Нажмите кнопку F12 и в окне браузера появится созданый Вами мультик.
Приятное ощущение, не правда ли?
Adobe Flash CS3 автоматически создает html страницу и Вам остается только разместить эту анимацию в сети.
Для создания анимации не требуются глубокие художественные познания.
Пример 2:
1) Запустите программу Adobe Flash CS3, или выше.
2) Выберите команду Файл -> Создать -> Ok (FIle - > New - > Ok)
3) Создайте квадрат в появившемся окне
4) Выберите кадр номер 100 в верхнем окне
5) Нажмите F6
6) Выберите кадр номер 99 в верхнем окне и нажмите правую клавишу мыши, во всплывшем окошке выберите команду Создать анимацию движения.
7) Линия кадров от 1 до 99 должна окраситься в серый цвет.
8) Выберите кадр номер 100 в верхнем окне и нажмите правую клавишу мыши, во всплывшем окошке выберите команду Создать анимацию движения.
9) Кадр 100 должен окраситься в серый цвет.
10) Кликнете на кадр номер 1
11) Наведите мышку на Ваш квадратик и нажмите правую клавишу мыши,
12) В открывшемся меню выбирите Свободное преобразование.
13) Уменьшите Ваш квадратик в 10-15 раз и поверните его на 90-180 градусов.
14) Нажмите F12 и перейдите в окно браузера.
Урок 7. Размещаем страницы в сети
Для размещения страниц в сети удобно использовать Total Commander.
Запустите Total Commander и нажмите CTRL + F.
Появится окошко для установления FTP соединения с Вашим хостингом.
Создайте новое FTP соединение.
Заполните поля в окошке следующим образом:
Имя соединения: Любое
Сервер[:Порт]: адрес FTP сервера и порт, который Вам выдал хостер
Учетная запись: имя FTP пользователя, который Вам выдал хостер
Пароль: пароль FTP пользователя, который Вам выдал хостер
Отметьте галочку "Пассивный режим обмена"
Нажмите ОК.
Нажмите "Соединиться" и Total Commander начнет соединение с FTP сервером для закачки файлов на сервер.
После установки соединения просто копируйте файлы на сервер как с жесткого диска на жесткий диск.
После копирования файлов Ваш сайт доступен по всему миру.
|
