Организация гиперссылок на сайте-витрины

Мощным инструментом динамического наполнения страниц с фреймовой организацией экрана является использование аппарата гиперссылок. Это обеспечивает тег-контейнер <a> </a>, в пределах которого указывается т.н. URL адрес. Абсолютный URL адрес указывает полный путь т.е. с указанием протокола, сервера, каталога и страницы (как например http://www.mysite.ru/public/index.html ). Он всегда точен, но громоздок. В случае адресования элементов, расположенных в одном каталоге старшая часть адреса может отсутствовать. Так, если связываемые вэб-страницы расположены в одной папке, достаточно для ссылки указать только имя файла. Если файлы расположены в соседних каталогах, следует указывать путь начиная с имени одноуровневых папок, например: ../private/price.html.Две точки в начале означает подняться в иерархии папок на уровень выше.

При создании гиперссылок важным моментом является возможность вызова вэб-страницы в нужную область экрана (в нужный фрейм). Для этого используются атрибуты, с помощью которых можно дать имя любому фрейму !

Такая конструкция выглядит следующим образом:

<FRAME src="IMYA.html" name="MY">

Когда именование фреймов произведено, вызов в эту область производится с использованием атрибута target:

<a href="IMYA.html"  target="MY"> ИМЯ </a>

Здесь ИМЯ - элемент, используемый для вызова гиперссылки. В качестве элемента вызова может выступать и любой графический элемент.

5.1 Откройте в блокноте вэб-страницу catalog.

5.2 Организуйте гиперссылку по слову кресла с вызовомпо ней в область content  веб-страницы сontent.

5.3 Сохраните изменения и проверьте работоспособность ссылки.

5.4 Аналогичным образом организуйте вызов на поле сontent расширенной информации по креслу aragon, используя как гиперссылку рисунок этого кресла  (aragon.jpg) в таблице на странице content.

В качестве расширенной информации по креслу следует взять рисунок aragon_big, находящийся в папке рисунки_кресел.Очевидно, что вызываемый по этой гиперссылке фрагмент должен быть оформлен как html-документ.

5.5 Проверьте работоспособность ссылки.

5.6 Для корректности навигации следует соблюдать правило возврата, т.е. всегдадолжна присутствовать возможность вернуться по обратной гиперссылке к предыдущему состоянию!

Реализуйте это правило, организовав гиперссылку по рисунку aragon_big с вызовом веб-страницы сontent в область content  .

5.7 Проверьте работу всех ссылок.

Доработка сайта

Для закрепления навыков, полученных при выполнении п.п. 3,4,5 доработайте сайт-витрину. Организуйте возможность вызова на поле content товарную информацию о диванах, по аналогии с тем, как это было организовано для кресел.

При оформлении этого сайта используйте рисунки товаров с сайтов в соответствии с вашим номером в списке :

№1 по списку http://gold-meb.ru,

№2 по списку http://www.homeme.ru,

№3 по списку http://www.mebel-moda.ru,

№4 по списку http://ladya.ru,

№5 по списку http://www.stolplit.ru,

№6 по списку http://www.good-mebel.com,

№7 по списку http://www.britannica.su,

№8 по списку http://www.mebelniyostrov.ru,

№9 по списку http://www.domosti.ru,

№10 по списку http://www.angagement.ru.  

 Рисунки, необходимые для наполнения области сontent, можно получить, используя технологию п.2. Для одного из образцов диванов организовать вызов расширенной информации. Рисунки диванов целесообразно разместить в отдельной папке рисунки_диванов.

Выполнение этой части работы должно привести к тому, что из поля навигатора появится возможность вызова в область сontent информации по крайней мере о двух группах товаров данного направления (мебели). Аналогично, используя строки каталога можно организовать вызов информации о других товарах, а по элементам навигатора осуществить вызов нужных для посетителя сайта сведений.

По завершении работы сохраните все наработанные папки на вашем диске.

ТЕМА 6: ТАБЛИЧНЫЙ WEB ДИЗАЙН

Цель работы состоит в овладении навыками организации Web-документа типа Internet витрины с использованием инструментария, основанного на табличной организации размещения данных на странице Web-документа.

Суть этого метода верстки в том, что весь сайт представляет собой одну большую таблицу. То есть все содержимое должно быть заключено в один парный тег — table. Поскольку в одну таблицу можно вложить достаточно большое число других элементов, в том числе и других таблиц, это позволяет упростить процедуру оформления Web страницы. Так можно создав «каркас» таблицы, затем поочередно наполнять ячейки контентом. Причем контент может быть любым, в ячейку вы можете вставлять сколько угодно других тегов - абзацы, изображения, видео и другие таблицы.

Следует напомнить, что информация в таблицах размещается только в ее ячейках. Они, в свою очередь, располагаются в строках. Таким образом, в теге table сначала пишут парный тег tr (table row), а потом td (то есть ячейка).

Сделать табличную верстку сайта не сложно. По сути, нужно знать всего лишь три тега и понимать, как правильно в них разместить содержимое. Из-за этого создание сайта таблицами и было в свое время таким популярным – чтобы сделать даже многоколоночный шаблон не требовалось много усилий.

Плюсы табличной верстки

Резиновый макет. Табличный способ верстки позволяет легко сделать резиновый макет, задав ширину в процентах. С помощью различных настроек можно регулировать высоту ячеек внутри.

Создание декоративных эффектов. Каждой ячейке можно задать отдельный фоновый рисунок и размеры. Таким способом можно создавать массу декоративных эффектов: нестандартные рамки, уголки, тени.

Вертикальное выравнивание. Внутри таблиц поддерживается выравнивание, как по горизонтали, так и по вертикали.

Кроссбраузерность. Теги для табличных данных появились очень давно и поддерживаются даже в старейших версиях Internet Explorer. Сайт на таблицах одинаково выглядит в разных браузерах.

Минусы табличной верстки

Огромный код. Для вывода таблицы требуется множество тегов. В реальных примерах табличной верстке часто встречаются еще и вложенные таблицы. Редактировать такую разметку также не очень просто.

Ухудшение скорости загрузки. Таблица имеет одну очень нехорошую особенность – она не будет отображена до тех пор, пока все ее ячейки, включая самые нижние, не будут загружены.

Плохая индексация. Из-за большой разметки и обилия вложенных тегов текст на странице хуже воспринимается поисковыми системами и даже отлично оптимизированная и интересная статья может не попасть в топ.

Неудобное управление через стили. Из-за обилия вложенных тегов таблицу сложно стилизовать через стили.

Несоответствие стандартам разработки. Табличный способ верстки был придуман веб-разработчиками, но на самом деле эти теги изначально предназначались только для вывода табличных данных и больше ни для чего другого. Все остальные варианты использования табличных тегов не являются правильными с точки зрения стандартов.