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

Немного истории

Каждая Web-страница имеет две ипостаси: одна — внешняя, которую видят пользова­тели в окне браузера, и другая — HTML-код, который соединяет все элементы стра­ницы воедино и делает ее работающей. Чтобы ваш дизайнерский труд был более эффектив­ным, нужно понимать, как устроена Web-страница. Я не говорю, что вам надо научиться про­граммировать с закрытыми глазами, но необходимо четко представлять структуру HTML-кода, как его оптимизировать и какие части кода можно копировать и вставлять (мое самое любимое занятие в HTML-программировании).

Овладеть навыками работы с HTML совсем несложно. Сам Web-браузер помогает в изу­чении HTML-трюков и ловких приемов, так как программный код любой Web-страницы можно просмотреть с помощью браузера. Кроме того, существуют мощные программные средства, которые позволяют создавать новые сайты так же легко, как разрабатывать графику С помощью графических программ. Интерфейсы этих программ очень похожи между собой. В данной главе вы узнаете: как использовать таблицы, фреймы и CSS-стили для эффективно­го управления макетом страницы; как создавать фоновые узоры; как сделать страницу инте­рактивной с помощью ссылок.

Читать полностью

Сплошной фон

В CSS еще больше возможностей по работе с фоновыми рисунками, чем в старом и понятном HTML. HTML позволяет задать сплошной цвет фо­на и фоновый узор для всей страницы. Таким образом, существует два способа задания тек­стуры каждой страницы еще до того, как вы что-либо на ней разместите. Это как покупать бумагу для принтера с уже напечатанными шаблонами фоновых изображений или таблиц.

Вдобавок, если вы используете один и тот же фоновый узор на всех страницах сайта, вы по­лучите преимуществ благодаря свойству браузера кешироватъ изображение. После того как изображение уже было загружено, браузер сохранит его в памяти. В следующий раз браузер бы­стро воспроизведет это изображение из памяти, вместо того, чтобы перезагружать его снова.

С помощью HTML совсем несложно добавить фоновый узор или сплошной фон на Web-страницу. Для этого нужно просто дописать два атрибута тега <body>.

Читать полностью

Таблицы

Еще один способ разбивки содержимого страницы— с помощью таблиц. В отличие от фреймов, таблицы не делят страницу на множество отдельных частей. Вместо этого таблица размещается на Web-странице, как плавающий фрейм. Таблица представляет собой сетку, в ячейки которой помещается различное содержимое. Сетку таблицы можно "расчертить" про­извольным образом, что позволяет упорядочить содержимое макета страницы. В результате вы получите желаемое количество ячеек, каждая из которых является мини-страницей.

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

Читать полностью

Учитесь у других

Теперь, когда вы знаете, как "заглянуть за кулисы" и просмотреть HTML-код, вы можете делать для себя закладки на интересных Web-страницах, которые вам встретились в Интерне­те. Как мне кажется, лучший способ научиться программировать на HTML— каждый день изучать структуру встречающихся вам страниц. После просмотра и детального анализа доста­точного количества Web-страниц, вы начнете понимать основную структуру HTML-кода, по­рядок расположения тегов на странице. Этому важно научиться до того, как вы начнете ко­пировать и вставлять части HTML-кода.

Как крылья бабочки, открывающий и закрывающий HTML-теги зеркально ото­бражают друг друга на странице. К примеру, первая строка HTML-кода начина­ется с тега <html>. Последняя строка содержит закрывающийся тег </html>. Такого рода зеркальная иерархия наблюдается вплоть до объектного уровня (например, в надписях, кнопках и т.д.). Обратите внимание на то, что закрываю­щие теги располагаются в обратной последовательности от соответствующих им открывающих.

Читать полностью

Фреймы

На сегодняшний день использование фреймов несколько неактуально, так как появились новые технологии CSS. Тем не менее фреймы обладаю! интересными свойствами и могут пригодиться при разработке вашего сайта. Фреймы напоминают окно с несколькими перегорешками, в итоге получается, что вся площадь окна разделена на квадратные или прямоуголь­ные области. Web-страница с фреймами называется родительской. На ней расположено мно­жество дочерних Web-страниц (внутри каждого фрейма). Каждый фрейм содержит новую Web-страницу. Фреймовая организация страницы позволяет заниматься дизайном каждого сегмента в отдельности. Например, один фрейм может содержать длинный перечень с поло­сой прокрутки, а другой фрейм с навигационными элементами выбора может быть вообще без прокрутки. Это позволяет добиться того, что ваши навигационные элементы не пропадут из виду при просмотре содержимого страницы.

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

Читать полностью