Практическая работа 10 Табличная верстка макета сайта Цель работы
 Скачать 475.59 Kb.
|
|
Практическая работа № 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? |