Занятие 7. "Верстка основного каркаса сайта интернет-магазина"

На этом занятии мы выполним верстку каркаса сайта: - познакомимся с методиками верстки; - рассмотрим типы верстки; - создадим табличную верстку для основного каркаса страницы.

Методики верстки

Мы изучили некоторыеHTML-тегии CSS-свойства. Чтобы сайт был удобен пользователю, все элементы веб-страницы (изображения, текст, кнопки,текстовые поля и др.) нужно расположить определенным образом. Для этого используется верстка –специальная технология создания веб-страницы.

Существуют две основные методики верстки: табличная и блочная. Табличная верстка использует таблицы (напомним, что таблицы создаются при помощи тега <table>). Это один из самых ранних способов верстки. В ячейки таблицы вставляются элементы страницы(изображения, текст и т.д.), рамки таблицы убираются, вследствие чего получается, что таблица держит элементы страницы как каркас. Пользователю, зашедшему на сайт,таблица не видна, ее рамки скрыты. Одно из преимуществ такой верстки –любой браузер, даже устаревший, отобразит таблицу со всем ее содержимым на веб-странице. Получается, что при таком подходе таблицы используются не по своему прямому назначению.

Блочнаяверстка использует блоки (блок вставляется при помощи тега <div>).Это более современная верстка. Страница строится из блоков, а их настройка происходит при помощи CSS.

На сегодняшний день рекомендованной является блочная верстка.

Обе методики верстки имеют свои недостатки, которые перечислены ниже.

• Недостатки табличной верстки:

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

1. Индексация страницы поисковой системой происходит сложнее, что влияет на оптимизацию сайта для поисковых систем(сайт хуже находится).

• Недостатки блочной верстки:

1. При открытии страницы в старых браузерах страница может отображаться не корректно –старый браузер не поддерживает современные css- свойства.

На начальном этапе изучения верстки и создания сайтов можно использовать табличную верстку.Первые сайты обычно носят экспериментальный характер - скорее всего у них не будет высокой посещаемости и раскрутки для поисковой системы. Табличная верстка позволит создать сайт и адаптировать его к различным браузерам (в том числе и старым) с меньшими проблемами, но, в тоже время,позволит получить желаемый результат.Затем лучше перейти к блочной верстке. Можно использовать комбинированную верстку:блочную итабличнуюодновременно.

В процессе создания нашего сайта мы будем изучать обе методики.

Для помощи в верстке страниц существуют различные программные продукты, такие как: Dreamweaverили Visual Studio. Они помогают и ускоряют процесс верстки. Но веб-разработчик должен понимать основы верстки и уметь создавать веб-страницы без автоматизированных вспомогательных программ. Поэтому мы будем выполнять верстку без использования подобных программ –только при помощи программного кода!

Типы верстки

Существует два основных типа верстки: статичная и резиновая. При статичной верстке ширина страницы фиксированная и не зависит от разрешения экрана пользователя. Прирезиновойверстке страница может сжиматься или растягиваться по ширине, подстраиваясь под разрешение экрана пользователя. Принципрезиновойверстки основан на возможности задавать значения в HTML-атрибутах и CSS-стилях в виде процентов(%) от ширины экрана пользователя. Приведем примеры CSS-свойств статичной и резиновойверстки:

/*Резиновая верстка*/

width: 100%;

/*Статичная верстка*/

width: 1000px;

При резиновой верстке ширина указана как 100%, при статичной верстке ширина указана как 1000px. Статичный вариант при любом разрешении экрана пользователя будет 1000 пикселей, в то время как резиновый вариант будет изменяться в зависимости от разрешения экрана пользователя. Резиновая верстка сложнее статичной, поэтому начинать практику проще состатичнойверстки.