ЛАБОРАТОРНЫЙ ПРАКТИКУМ ПО HTML
Главная
ЛР №1: Структура HTML документа. Дескрипторы.
ЛР №2: Форматирование текста. Графика в HTML.
ЛР №3: Списки и таблицы.
ЛР №4: Гиперсвязи и фреймы.
ЛР №5: Вставка аудио, видео и flash на сайт.
ЛР №6: Технология CSS.
ЛР №7: Создание форм.
ЛР №8: Разработка сайта с нуля.
Зачетная лабораторная работа.
СПРАВОЧНАЯ ИНФОРМАЦИЯ
Копирование текста
Таблица цветов
Словарь HTML
Свойства CSS
РЕКОМЕНДУЕМЫЕ РЕСУРСЫ
Справочник по HTML и CSS. Для тех, кто делает сайты
PHP: Простой учебник - Manual
Профессиональные бесплат-ные шаблоны HTML и CSS
Яндекс.Вебмастер - проверка орфографии сайта
Адвего - проверка орфографии сайта
Поиск для сайта Яндекс
Поиск для сайта Google
Яндекс: «Поделиться» в соцсетях
Плагины JavaScript jQuery UI
Слайд-плагин Highslide JS/jQuery
Слайд-плагин Fancybox JS/jQuery
Слайд-плагин Lightbox JS/jQuery
"Кремлёвская" JS-утилита Masha
JS/jQuery утилита Flot для построения графиков
лр №8 Разработка сайта с нуля
Разработка структуры
В учебных целях необходимо научиться создавать сайт с нуля самостоятельно. Для этого выберем простую схему, при которой для организации интерфейса страниц сайта используется фреймовая структура. Для начала необходимо подготовить каталог для работы и основные необходимые файлы. Для работы с файлами рекомендуется использовать ПО Notepad. Создайте каталог для работы (с названием site, например) и расположите в нем две папки согласно рисунку:
 |
В основном каталоге создайте и сохраните html-файлы со следующими названиями:
Откройте файл главный запускаемый файл — index.html (файл-раскладка) и добавьте код для организации фреймовой структуры: |
Затем необходимо добавить код в предназначенные для этого веб-страницы:
Организация работы гиперссылок в меню
Для правильной работы гиперссылок в файле menu.html, а именно, чтобы запускаемые файлы открывались именно в правом от меню фрейме, необходимо выполнить два пункта:
- В файле фреймовой структуры добавить имя для фрейма, в котором мы собираемся открывать веб-страницы в меню.
Это уже сделано при создании фреймовой структуры. Нужный нам фрейм называется main. - В файле menu.html добавить код гиперссылок:
Добавление CSS-стилей
Для оформления сайта, а в некоторых случаях и придания динамичности его элементов необходимо использовать каскадные таблицы стилей. Сначала создайте документ для хранения стилей — файл style.css, и расположите его в папке — files. Для подключения созданного стилевого файла ко всем страницам сайта, необходимо расположить ссылку на этот файл в код всех страниц, кроме файла с фреймовой структурой (index.html), например :
Задание
Создать прототип сайта, посвященного самым выдающимся горам, морям, рекам, странам, животным и растениям нашей планеты, содержащий 5 страниц:
| Заголоаок | Содержание | Файл |
|---|---|---|
| Главная | Описание ресурса | Index.html |
| География | Страница, посвященная горам, морям, рекам, странам | Geo.html |
| Животные | Страница о самых-самых выдающихся представителях фауны | Animals.html |
| Растения | Страница о самых-самых выдающихся представителях флоры | Flora.html |
| Информационные источники | Страница с перечнем использованных ресурсов | Links.html |
Все страницы должны иметь одинаковый дизайн, основанный на использовании таблиц, например:
Пример страницы Растения:
