2) Указать этапы разработки сайта. Ниже показан пример разработки:
Задание структуры всего сайта и отдельных страниц:
а) Вначале я создам основную страницу сайта. Эта страница будет состоять из трех фреймов:
-
Фрейм 1
Фрейм 2
Фрейм 3
в верхнем (Фрейм1) будет размещаться логотип фирмы (рисунок),
во Фрейме2 будут помещены ссылки на все другие страницы сайта (т.е. путеводитель по сайту):
Главная
Оборудование
Окна
О нас
(причем эти ссылки будут находиться в ячейках таблицы),
а третий Фрейм будет служить для отображения всех остальных html-страниц:
при первоначальной загрузке сайта во Фрейме3 будет загружена страница «Главная»,
при нажатии во Фрейме2 на ссылку Оборудование будет загружена страница «Оборудование»,
при нажатии на ссылку Окна будет загружена страница «Окна»,
при нажатии на ссылку О нас будет загружена страница «О нас».
-
Фрейм 1
Рисунок(логотип)
Фрейм 2
Ссылки на страницы
Фрейм 3
Отображение html-страниц, связанных со ссылками
б) структура страницы «Главная».
Страница «Главная» будет содержать таблицу вида:
-
Текст «Оборудование…»
Рисунок-ссылка
на страницу «Оборудование»
Текст «Окна…»
Рисунок-ссылка
на страницу «Окна»
Текст «Адрес…»
в) структура страницы «Оборудование».
З
аглавие,
цветная черта, данные про оборудование
будут содержаться в таблице:
Заглавие
Черта
-
Рисунок дисковой пилы TU-120
Список: Характеристики пилы
Цена
Ссылка на страницу «Заказ»
Рисунок двухголовочной автоматической пилы ТТ-351
Список: Характеристики
Цена
Ссылка на страницу «Заказ»
Рисунок автоматической пилы ТА-141
Список: Характеристики
Цена
Ссылка на страницу «Заказ»
г
)
структура страницы «Окна».
Заглавие
Рисунок
Текст
Заглавие
Текст
«Бегущий» рисунок
д
)
структура страницы «О нас»
Заглавие
Текст
е
)
структура страницы «Заказ»
Заглавие «Оформить заказ»
Таблица:
-
ФИО
Поле ввода текста
Адрес
Поле ввода текста
Теоефон
Поле ввода текста
Список товаров
Выбор1
Выбор2
Выбор3
Форма оплаты
Поле выбора из списка
Кнопка «Заказать»
ж) структура страницы «Содержание»
Невидимая таблица размером 1*4.
Т.о. будет создано 7 файлов формата html: index.html, glav.html, oborud.html, okna.html, about.html, zakaz.html, sod.html. + Прайс-лист .xls.
3) Текст программы с описанием используемых тегов, например:
Создание html-страницы “index.html”.
|
Команды HTML (текст программы) |
Пояснения |
|
<html> <head> <title>Основная страница</title> </head> |
Стандартное начало для всех файлов |
|
Создаю сложную структуру вложенных тегов <frameset>: | |
|
<frameset rows="20%,*" frameborder=yes> |
тег framesetразбивает страницу на две строки (атрибутrows), причем первая строка занимает 20% общей площади страницы, а вторая всю остальную площадь, включаю трехмерное обрамление фреймов |
|
<frame src="logo.jpg" name="frame1" scrolling=no bordercolor=blue> |
В первый фрейм загружается рисунок «logo.jpg», даю имя фрейму - frame1, запрещаю полосы прокрутки (атрибут scrolling), задаю цвет обрамления кадра – blue (атрибут bordercolor) – работает только если frameborder=yes |
|
<framesetcols="20%,*"> |
Вторую строку разбиваю на два столбца (атрибут cols), первый – 20% второй строки, второй – все остальное пространство второй строки |
|
<frame src="sod.html" name="frame2" bordercolor=blue> |
Во второй фрейм загружается файл sod.html |
|
<frame src="glav.html" name="frame3" bordercolor=blue> |
Во второй фрейм загружается файл glav.html. Этот фрейм помечен именемframe3. Впоследствии это имя будет использоваться тегом гипертекстовой ссылки <a> (свойствомtаrget), т.е. документ отобразится в поименованном кадре. |
|
</frameset> |
закрываю тег, разбивающий область на столбцы |
|
</frameset> |
закрываю тег, разбивающий область на строки |
|
</html> |
|
Сохраняю файл index.html,
нажимаю «Обновить»
.
Фреймы появились, но файлы glav.html,sod.html,logo.jpgеще не созданы, поэтому сайт работает некорректно. Все эти файлы должны находиться в одном каталоге (там, где находится файлindex.html, иначе к ним необходимо указать полный путь). Рисунокlogo.jpgперебрасываю в текущий каталог.