Файл: Практическая работа 10 Табличная верстка макета сайта Цель работы.pdf
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 04.12.2023
Просмотров: 17
Скачиваний: 1
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
Практическая работа № 10
«Табличная верстка макета сайта»
Цель работы: 1. Изучение особенностей табличной верстки макета и получение практических навыков в создании сайтов. 2. Закрепление теоретического материала.
Оборудование и ПО: ПК, операционная система Windows7, офисный пакет Microsoft.
Порядок выполнения работы:
1. Ознакомление с методическими рекомендациями по табличной верстке макета сайта.
Просмотр обучающих роликов к практическому занятию № 10.
2. Получение задания для практического выполнения.
3. Выполнение практической части задания в соответствии с рекомендациями.
1. Особенности табличной верстки (универсальный табличный макет)
Web-страница должна иметь внутреннюю структуру, так называемый базовый каркас. Часто этот каркас представляет собой таблицу – набор аккуратно выстроенных прямоугольников, в которых размещаются компоненты web-страницы. Границы между ячейками такой таблицы можно сделать видимыми или, ради большей элегантности, невидимыми. В этом случае говорят о табличной верстке сайтов.
В последнее время очень популярной стала блочная верстка сайтов или, как ее еще называют, div-верстка.
Суть ее заключается в том, что базовый каркас (шаблон) страницы формируется из блоков, в качестве которых выступает html-тег DIV. С помощью стилей эти блоки позиционируются на странице определенным образом, формируя каркас, который уже затем наполняют содержимым.
Главный плюс табличной верстки - простота реализации и кроссбраузерность (одинаково выглядят во всех браузерах).
Рассмотрим, по какому принципу строятся табличные макеты страницы и рассмотрим построение
различных
вариаций
2-х
наиболее
популярных шаблонов, приведенных на
рисунке ниже.
Таким образом, изучив данный материал, Вы научитесь создавать самые популярные табличные макеты страницы, и, причем, по всем правилам. А макет – это уже практически готовый сайт. Вам останется лишь наполнить соответствующие блоки информацией.
2. Верстаем двухколонный макет
фиксированной ширины (меню слева)
MARGIN (Поля) – это расстояние от границы (рамки) блока, до ближайших элементов, или, если их нет, до краев документа.
PADDING (Отступы) – как бы внутреннее расстояние, между границей (рамкой) и содержимым блока.
Файл style.css
/*Делаем чтобы макет прижимался вплотную, т.е. убираем любые возможные отступы*/ body,html{ margin:0px; padding:0px;
}
/*Стиль общей таблицы. Если нужен резиновый макет, нужно задать ширину 100% и убрать рамку, т.к. с ней будет некрасиво*/
#container { width:600px; height:100%; border:1px solid gray; margin:0 auto;
}
/*Делаем нужное выравнивание в ячейках таблицы*/
#container td{
vertical-align:top
}
/*Стиль шапки сайта*/
#header { background-color:#999999; border-bottom:1px solid black; height:80px;
}
/* Стили для внутренней таблицы */
#maket { height:100%; width:100%;
}
/*Стили левой колонки (там, где обычно меню)*/
#left_column{ width:180px; background-color:#0099CC;
}
/*Стили колонки с основным содержанием*/
#main_column { padding:10px;
}
/* Конец стилей для внутренней таблицы */
/*стиль подвала сайта*/
#footer{ background-color:#999999; border-top:1px solid black; height:15px;
}
Файл index.html
"http://www.w3.org/TR/html4/loose.dtd">
#right_column{ width:150px; background-color:#339966;
}
/* Конец стилей для внутренней таблицы */
/*стиль подвала сайта*/
#footer{ background-color:#33ff99; border-top:1px solid black; height:15px;
}
#footer p{ margin:0px; /* обнуляем отступы*/ padding: 10px 0; /* задаем поля */
}
Файл index.html
4. Выполнение практической части
Практическая часть задания выполняется по одному из 10-ти вариантов. Варианты имеют разные исходные данные и одинаковую задачу – построение html-документа по одному из приведенных выше примеров в разделах 2(двухколонный макет) и 3(трехколонный макет) в описательной части методического пособия. Обратите внимание на необходимость создания файла style.css
Вариант 1
Вариант 2
Вариант 3
Исходные данные:
1. трехколонный макет;
2. заполнить header;
3. Разместить изображение в контенте.
1. двухколонный макет;
2. Заполнить header;
3. Разместить произвольный текст и изображение в контенте;
4. Указать разделы в оглавлении слева.
Исходные данные:
1. трехколонный макет;
2. Заполнить footer;
3. Разместить произвольный текст в контенте.
Вариант 4
Вариант 5
Вариант 6
Исходные данные:
1. двухколонный макет;
2. Заполнить footer;
3. Разместить простой список в контенте;
4. Указать разделы в оглавлении слева.
Исходные данные:
1. трехколонный макет;
2. Заполнить header;
3. Разместить произвольный текст в контенте;
4. Указать разделы в оглавлении слева.
Исходные данные:
1. двухколонный макет;
2. Заполнить header;
3. Разместить произвольный текст в контенте;
4. Указать разделы в оглавлении слева.
Вариант 7
Вариант 8
Вариант 9
Исходные данные:
1. трехколонный макет;
2. Заполнить header и footer;
3. Разместить изображение в контенте;
4. Добавить ссылки в правом разделе
Исходные данные:
1. двухколонный макет;
2. Заполнить footer;
3. Разместить изображение в контенте;
4. Указать разделы в оглавлении слева.
Исходные данные:
1. трехколонный макет;
2. Заполнить header;
3. Разместить произвольный текст и изображение в контенте;
4. Указать разделы в оглавлении слева
Вариант 10
Исходные данные:
1. двухколонный макет;
2. Заполнить footer;
3. Разместить изображение и простой список в контенте;
4. Указать разделы в оглавлении слева.
Контрольные вопросы:
1. В чем заключаются особенности табличной верстки сайта в связи с понятием «каркас» и
«компоненты»?
2. Перечислите и охарактеризуйте типы макетов сайта.
3. Для чего создается файл style.css?
}
/*Стиль шапки сайта*/
#header { background-color:#999999; border-bottom:1px solid black; height:80px;
}
/* Стили для внутренней таблицы */
#maket { height:100%; width:100%;
}
/*Стили левой колонки (там, где обычно меню)*/
#left_column{ width:180px; background-color:#0099CC;
}
/*Стили колонки с основным содержанием*/
#main_column { padding:10px;
}
/* Конец стилей для внутренней таблицы */
/*стиль подвала сайта*/
#footer{ background-color:#999999; border-top:1px solid black; height:15px;
}
Файл index.html
"http://www.w3.org/TR/html4/loose.dtd">
| Шапка сайта | ||
другая - без указания ширины (в таком случае она автоматически растягивается на всю оставшуюся ширину)-->
| ||
| Подвал |
#right_column{ width:150px; background-color:#339966;
}
/* Конец стилей для внутренней таблицы */
/*стиль подвала сайта*/
#footer{ background-color:#33ff99; border-top:1px solid black; height:15px;
}
#footer p{ margin:0px; /* обнуляем отступы*/ padding: 10px 0; /* задаем поля */
}
Файл index.html
Шапка сайта | |||
другая - без указания ширины (в таком случае она автоматически растягивается на всю оставшуюся ширину)-->
| |||
| Подвал © Все права защищены |
4. Выполнение практической части
Практическая часть задания выполняется по одному из 10-ти вариантов. Варианты имеют разные исходные данные и одинаковую задачу – построение html-документа по одному из приведенных выше примеров в разделах 2(двухколонный макет) и 3(трехколонный макет) в описательной части методического пособия. Обратите внимание на необходимость создания файла style.css
Вариант 1
Вариант 2
Вариант 3
Исходные данные:
1. трехколонный макет;
2. заполнить header;
3. Разместить изображение в контенте.
1. двухколонный макет;
2. Заполнить header;
3. Разместить произвольный текст и изображение в контенте;
4. Указать разделы в оглавлении слева.
Исходные данные:
1. трехколонный макет;
2. Заполнить footer;
3. Разместить произвольный текст в контенте.
Вариант 4
Вариант 5
Вариант 6
Исходные данные:
1. двухколонный макет;
2. Заполнить footer;
3. Разместить простой список в контенте;
4. Указать разделы в оглавлении слева.
Исходные данные:
1. трехколонный макет;
2. Заполнить header;
3. Разместить произвольный текст в контенте;
4. Указать разделы в оглавлении слева.
Исходные данные:
1. двухколонный макет;
2. Заполнить header;
3. Разместить произвольный текст в контенте;
4. Указать разделы в оглавлении слева.
Вариант 7
Вариант 8
Вариант 9
Исходные данные:
1. трехколонный макет;
2. Заполнить header и footer;
3. Разместить изображение в контенте;
4. Добавить ссылки в правом разделе
Исходные данные:
1. двухколонный макет;
2. Заполнить footer;
3. Разместить изображение в контенте;
4. Указать разделы в оглавлении слева.
Исходные данные:
1. трехколонный макет;
2. Заполнить header;
3. Разместить произвольный текст и изображение в контенте;
4. Указать разделы в оглавлении слева
Вариант 10
Исходные данные:
1. двухколонный макет;
2. Заполнить footer;
3. Разместить изображение и простой список в контенте;
4. Указать разделы в оглавлении слева.
Контрольные вопросы:
1. В чем заключаются особенности табличной верстки сайта в связи с понятием «каркас» и
«компоненты»?
2. Перечислите и охарактеризуйте типы макетов сайта.
3. Для чего создается файл style.css?