По завершении работы сохраните все наработанные папки на вашем диске
ТЕМА 6: ТАБЛИЧНЫЙ WEB ДИЗАЙН
Цель работы состоит в овладении навыками организации Web-документа типа Internet витрины с использованием инструментария, основанного на табличной организации размещения данных на странице Web-документа.
Суть этого метода верстки в том, что весь сайт представляет собой одну большую таблицу. То есть все содержимое должно быть заключено в один парный тег — table. Поскольку в одну таблицу можно вложить достаточно большое число других элементов, в том числе и других таблиц, это позволяет упростить процедуру оформления Web страницы. Так можно создав «каркас» таблицы, затем поочередно наполнять ячейки контентом. Причем контент может быть любым, в ячейку вы можете вставлять сколько угодно других тегов - абзацы, изображения, видео и другие таблицы.
Следует напомнить, что информация в таблицах размещается только в ее ячейках. Они, в свою очередь, располагаются в строках. Таким образом, в теге table сначала пишут парный тег tr (table row), а потом td (то есть ячейка).
Сделать табличную верстку сайта не сложно. По сути, нужно знать всего лишь три тега и понимать, как правильно в них разместить содержимое. Из-за этого создание сайта таблицами и было в свое время таким популярным – чтобы сделать даже многоколоночный шаблон не требовалось много усилий.
Плюсы табличной верстки
Резиновый макет. Табличный способ верстки позволяет легко сделать резиновый макет, задав ширину в процентах. С помощью различных настроек можно регулировать высоту ячеек внутри.
|
|
|
Создание декоративных эффектов. Каждой ячейке можно задать отдельный фоновый рисунок и размеры. Таким способом можно создавать массу декоративных эффектов: нестандартные рамки, уголки, тени.
Вертикальное выравнивание. Внутри таблиц поддерживается выравнивание, как по горизонтали, так и по вертикали.
Кроссбраузерность. Теги для табличных данных появились очень давно и поддерживаются даже в старейших версиях Internet Explorer. Сайт на таблицах одинаково выглядит в разных браузерах.
Минусы табличной верстки
Огромный код. Для вывода таблицы требуется множество тегов. В реальных примерах табличной верстке часто встречаются еще и вложенные таблицы. Редактировать такую разметку также не очень просто.
Ухудшение скорости загрузки. Таблица имеет одну очень нехорошую особенность – она не будет отображена до тех пор, пока все ее ячейки, включая самые нижние, не будут загружены.
Плохая индексация. Из-за большой разметки и обилия вложенных тегов текст на странице хуже воспринимается поисковыми системами и даже отлично оптимизированная и интересная статья может не попасть в топ.
|
|
|
Неудобное управление через стили. Из-за обилия вложенных тегов таблицу сложно стилизовать через стили.
Несоответствие стандартам разработки. Табличный способ верстки был придуман веб-разработчиками, но на самом деле эти теги изначально предназначались только для вывода табличных данных и больше ни для чего другого. Все остальные варианты использования табличных тегов не являются правильными с точки зрения стандартов.
Задание для самостоятельной работы
Результатом выполнения пунктов данной работы должен быть получен табличным дизайном результирующий документ, известный по предыдущим заданиям:
При табличном дизайне существенно усложняется организация подмены отдельных фрагментов «картинки» использование гиперссылок, вызывающих новые фрагменты изображения в нужное место витрины.
В отличие от фреймовой структуры, где каждый фрейм представляет собой отдельное окно для браузера и, следовательно, при наименовании может использоваться как адрес для гиперссылки, у таблицы нет возможности трактовать отдельную ячейку как адрес для гиперссылки ! Таблица есть единое целое представленное на экране.
Этот факт приводит к тому, что для смены части картинки (например, по одному из кресел необходимо получить расширенную информацию) вызовом по гиперссылке придется заменять всю таблицу!
|
|
|
Таким образом, для каждой гиперссылки приходится создавать свой полный HTML текст. Работа не сложная, ибо она заключается в копировании исходного файла с внесением в него соответствующих изменений, но это приводит к тому, что создается множество однотипных во многом файлов. Это и есть проявление недостатков – объемный код и увеличенный трафик.
Базируясь на данных п.3 Установка табличных объектов Темы 2, построить таблицу нижеприведенной структуры:
Рис.1
Текст Web документа для реализации таблицы такой структуры, состоящей из отдельных таблиц, может выглядеть как приведенный ниже.
Базируясь на знаниях, полученных на предыдущих занятиях разработать проект Internet витрины используя табличный Web дизайн.
Сформируйте свой HTML текст в виде ЕДИНОЙ таблицы, реализующей структуру, приведенную на рис.1.
Используя содержимое папки Рисунки для фреймов вставьте рисунки adress и banner в нужные клетки таблицы.
Проверьте результат, открыв сформированный файл в браузере.
Действуя аналогичным образом «наполните» остальные ячейки таблицы соответствующим контентом.
Проверьте полученный результат, открыв сформированный файл в браузере.
Используя полученный HTML текст организовать как минимум два перехода по гиперссылкам с получением новых состояний Internet витрины.
Дата добавления: 2018-04-05; просмотров: 191; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!