Макет страницы html. Как создать макет веб-страницы в программе Frontpage. Шаблоны на основе обтекания
Создание макета веб страницы
служит для
упорядочивания элементов на сайте. Чтобы текст, картинки, видео
размещались на сайте красиво и аккуратно, необходимо создать
структуру страницы.
Для этого вначале рисуется таблица, а в ней ячейки. Таблица,
разбитая на ячейки, позволяет четко задавать положение каждого
элемента сайта.
Рисуем макетную таблицу
1
. На панели инструментов программы
frontpage
жмем "
Таблица"
и выбираем "
Макетные таблицы и ячейки"
Как создать макет веб страницы в программе
frontpage
2. Справа появится инструментальная панель. Нажимаем кнопку
"
Нарисовать макетную таблицу"
.
Курсор станет в виде карандаша. Теперь рисуем произвольный
прямоугольник. Далее на панели справа задаем размеры:
Ширина
- 850, Высота
- 150, Выравнивание
-
посередине.
Наша первая таблица готова! Здесь будет располагаться шапка
сайта. Теперь нам надо нарисовать вторую таблицу под тело сайта. В
ней будет располагаться основная информация сайта.
3. Для этого проделайте точно такие же действия, как для рисования
первой таблицы. Не забудьте СОХРАНИТЬ! В результате у Вас должно
получиться две одинаковые таблицы:
Рисуем макетные ячейки для веб
страницы
Теперь в верхнюю таблицу вставим ячейку и напишем название нашего
сайта.
4
. Для этого выделяем таблицу № 1. Чтобы понять, что таблица
выделилась, ее границы должны стать зелеными, в углах должны
появиться маркеры, а по бокам цифры с размерами таблицы.
Рисуем в программе
Frontpage
ячейки в таблицах
5. На панели инструментов справа нажимаем кнопку
"
Нарисовать макетную ячейку"
.
Курсор станет в виде карандаша. Ставим его в угол таблицы и рисуем
прямоугольник точно таких же размеров
, как и таблица.
Обратите внимание, что в отличии от таблицы, границы ячейки выделяются синим цветом
.
Создание макета веб-страницы - рисуем ячейку в
программе
Frontpage
После того, как Вы нарисовали ячейку для верхней таблицы,
проделайте такие же действия
и нарисуйте ячейку для
таблицы №2
. В ней будет располагаться тело нашего сайта. Не забудьте сохранить!
После того, как Вы в программе Frontpage
создали макет веб страницы
, переходим
к следующему шагу по созданию сайта. Это создание шапки для сайта.
В издательском деле многостолбцовый вывод контента известен уже много лет — узкие столбцы упрощают чтение текста. С переходом на широкоэкранные дисплеи веб-разработчики начали искать способы сохранения комфортной ширины столбцов в своих блогах и сайтах. За последнее десятилетие появился ряд довольно остроумных решений в дизайне многих вебстраниц по созданию многоколоночных макетов. Существуют различные способы создания макетов в HTML.
Макеты на основе таблиц
В недалеком прошлом таблицы были самым простым и самым популярным способом создания многоколоночных макетов в HTML. Вся веб-страница помещалась внутри большой таблицы (
). Однако элемент
разработан не для создания макетов страниц, его цель — отображение табличных данных.
Следующий макет создается с помощью таблицы, состоящей из 3-х строк и 2 столбцов, где строки содержащие контент заголовка и футера охватывают обе колонки, используя атрибут colspan
:
Пример: Макет на основе таблицы
Макет на основе таблицы
Макет на основе таблицы
Макеты на основе DIV-элементов
В течение долгого времени веб-дизайнеры используют элементы
для группировки элементов на странице (например, оформирующих шапку сайта, статьи, футер или боковую панель). Таким образом разработчики, как правило, помещают эти основные разделы страницы внутри элементов
и используют атрибуты
class
или
id
, чтобы указать назначение конкретной части страницы.
Ниже приведена визуализация макета с использованием тегов
для группировки элементов на странице:
Рис. 1. Основные секции страницы
