Иллюстрированный самоучитель по созданию сайтов :: Меню :: Главная [index.htm] 1. Как создают веб-страницы 1.1 Как создают веб-страницы 1.2. Как разместить веб-страничку на сервере 1.3. Как написать веб-страницу 1.4. Обзор программ для просмотра веб-страниц 1.5. Обзор программ для создания веб-страниц 1.6.(Часть-I) Создание веб-страниц при помощи программы Allaire Homesite/Cold Fusion 1.6.(Часть-II)Автоматизация ввода 2. Основные средства языка htmL 2.1. Простейшее форматирование текста 2.2. Самое главное на любой веб-странице — гиперссылки 2.3. Как создать списки на веб-странице 2.4. Создание таблиц 3. Графика на веб-странице 3.1.(Часть-I) Основные способы применения графики 3.1.(Часть-II)Изображение-карта 3.2. Графические форматы Интернета 3.3. Графические элементы оформления веб-страниц 3.4. Графические маркеры 3.5. Подготовка рисунков в программе Xara Webstyle 3.6.(Часть-I)Подготовка рисунков в программе Adobe Photoshop 3.6.(Часть-II)Украшение изображения мелкими деталями 4. Оформление веб-страницы с использованием стилей 4.1. Оформление с помощью атрибута STYLE 4.2. Определение стилей в специальной таблице 4.3. Обзор других возможностей стилевых таблиц 5. Использование звука на веб-странице 5.1. Добавление звукового оформления 5.2. Программы для сжатия звуковых фрагментов 5.3. Маленькие хитрости 6. Динамические веб-страницы на основе JavaScript 6.1. Простейшие примеры 6.2. Как писать собственные функции 6.3. Динамическое изменение внешнего вида страницы 6.4. Другие возможности языка JavaScript 7. Веб-страницы, реагирующие на действия пользователя 7.1. Ввод данных пользователем в формы htmL 7.2.(Часть-I)Страница, управляемая при помощи мыши 7.2.(Часть-II)Динамическое управление позиционированием элементов 7.3. Страница, управляемая с клавиатуры 7.4.(Часть-I)Динамическое отображение текста веб-страницы 7.4.(Часть-II)Использование других свойств при работе с текстом 7.5. Динамическое изменение графических элементов веб-страницы 8. Размещение элементов на веб-странице и навигация по сайту 8.1. Использование структуры фреймов 8.2. Управление расположением элементов веб-страницы с помощью таблиц 9. Дополнительные возможности формирования веб-страниц 9.1. Пример использования элемента управления Tabular Data 9.2. Пример простейшего серверного сценария Наш белый каталог сайтов | Добавить сайт Гостевая книга Контакты Добавить в избраное :: Друзья :: SiteUa - Створити свій сайт безкоштовно 1 ++ Сайты на wordpress . Спешите заказать+ рено логан купить новую :: Статистика :: - 8. Размещение элементов на веб-странице и навигация по сайту В те недавние времена, когда технология WWW только появилась на свет и стали создаваться первые веб-страницы, одной из самых больших проблем при их создании была невозможность произвольного размещение элементов на странице. Другими словами, все содержимое страницы par полагалось последовательно. Но веб-дизайнерам все чаще и чаще хотелось. расположить материал так, чтобы создать подобие композиции и облегчить восприятие. Самый простой и распространенный пример — разместить ссылки на разделы сайта в левой части, а сами разделы — в правой При этом в нижней части страницы можно разместить, например, какую либо статическую информацию, которая не меняет свое местоположеши в зависимости от количества материала на странице. Но как это осуществить? Для этого в процессе развития WWW то и дело появлялись различныx решения (некоторые из них по ходу дела уже рассматривались в этой книг выше). На сегодняшний день можно сказать, что наиболее удобных решений для произвольного расположения элементов на странице существую три: • использование фреймов; • использование таблиц; • и позиционирование независимых слоев. Давайте же рассмотрим эти технологии по порядку, и начнем с той из них, которая еще не обсуждалась в этой книге — с использования фреймов. 8.1. Использование структуры фреймов Формирование набора фреймов Итак, начнем. Разделим нашу страницу на две части (два фрейма) — левую и правую. Вообще говоря, каждый фрейм представляет собой отдельный чтобы-документ. Таким образом, нам надо так определить набор фреймов, наши в правую часть страницы загружался -HTML-документ, (назовем этот файл sergtext.html), а в левый фрейм — файл, содержащий “автопортрет” Сергея Сегеева. Этот файл мы назовем sergport.html. Сначала напишем его текст. <ТITLEЕ>Домашняя страница Сергея Сергеева.

---

АВТОПОРТРЕТ СЕРГЕЯ СЕРГЕЕВА Здесь пока что нет ничего нового — это обычная статическая страница, содержащая рисунок, горизонтальную черту и подрисуночную подпись. Теперь настало время определить набор фреймов. Надо сказать, что НТМL-файлы, содержащие набор фреймов, существенно отличаются от обычных HTML-файлов. В частности, они не должны содержать тег . Их основная часть определяется тегом . Все, что заключено между ним и его закрывающим тегом , является набором фреймов. Содержимое каждого фрейма задается с помощью тега . Его основным атрибутом является SRC=, значением которого является имя соответствующего .HTML-файла. Кроме того, в первой строке файла, содержащего набор фреймов, необхидимо указывать тип Frameset, например, вот так: Давайте напишем текст набора фреймов для нашего примера, а затем paссмотрим его подробнее. Итак, если страница с портретом называем ч sergport.html, а страница с текстом — sergtext.html, то текст основного документа будет следующим. <ТITLЕ>Домашняя страница Сергея CepreeBa Давайте внесем некоторые пояснения. Чтобы фреймы располагались, как столбцы таблицы (а не как ряды, Hanpимер, сверху и снизу), нужно в теге указать атрибут COLS= Его значением должно быть перечисление ширины каждого фрейма (через запятую). Например, если написать ,то окно броузера будет разделено на три фрейма: левый шириной в четверть окна броузера, средний такой же ширины и правый шириной в половину окна броузера. В данном случае ширина каждого фрейма указана в про- центах. Можно также указывать ширину фрейма в пикселах. В приведенном выше коде мы определяем ширину левого фрейма в 277 пикселов чтобы туда уместился рисунок: В этой записи звездочка означает, что для другого фрейма отведено все оставшееся место в окне броузера. Сколько его будет — зависит только отi ширины окна броузера на компьютере пользователя. (Если у пользователя разрешение 1600х1200 и окно броузера развернуто на весь экран, то у него ширина правого фрейма будет около 1320 пикселов, а если он сузил окно броузера до 300 пикселов, то на правый фрейм у него останется менее 15 пикселов.) В большинстве случаев левый фрейм шириной 277 пикселов будет все же занимать меньше половины окна броузера, а значит, у пользователя сложится правильное впечатление, что основная информация заключена в правом фрейме. Далее, чтобы между фреймами на было видимой границы, следует установить значения атрибутов FRAMESPACING= (расстояние между фреймами) и FRAMEBORDER= (наличие рамки фреймов) равными нулю. В принципе, если установить значение атрибута FRAMEBORDER= равным 1 (кстати, для Netscape версии 3 было необходимо вместо значений 0 и 1 для атрибута RAMEBORDER= использовать значения Yes или No), то можно проконтролировать толщину рамки с помощью атрибута BORDER=, а также ее цвет с помощью атрибута BORDERCOLOR=. Если надо расположить фреймы, как строки таблицы, то вместо атрибута COLS= следует использовать атрибут ROWS=. В остальном все остается точно так же, как ранее. В принципе, возможно использовать в одном теге оба атрибута: и COLS=, и ROWS=. Но вернемся к приведенному выше коду. Между тегами и в нем находятся определения содержимого каждого из фрей-мов. Каждый фрейм определяется с помощью тега : Атрибут NAME= в этом примере не несет никакой нагрузки — это прост, название фрейма. Однако его присутствие нам потребуется в случае организации межфреймовой навигации (например, если при нажатии на гиперссылку, находящуюся в одном из фреймов, следует загрузить соответствующи документ в другой фрейм — об этом речь пойдет в следующем разделе В любом случае установка атрибута NAME= является хорошей привычкой Атрибут SRC=, как уже говорилось выше, является самым главным атрибутом, поскольку его значение указывает, какой, собственно говоря, файл следует в этот фрейм загрузить. Атрибут SCROLLING= управляет наличием полосы прокрутки в каждом фрейме. Если его значением является auto, то броузер сам определяет, отображать ли полосу прокрутки. Как правило, это самое удобное значение — если все содержимое фрейма помещается и видимую область, то полоса прокрутки не отображается, а если часть содержимого не видна, то полоса прокрутки отображается. И, наконец, атрибут NORESIZE означает, что пользователь не может изменять ширину (или высоту) данного фрейма. Если этот атрибут не установлен, то при желании можно передвигать границу между фреймами помощью мыши. Как видите, все достаточно просто. Нужно только не забывать определи нужное количество тегов . Впрочем, если их будет меньше, не указано в теге , то на месте “отсутствующего” фрейма отобразится просто белый прямоугольник. Вложенные наборы фреймов — Хорошо, — скажете вы, а как быть, если мы захотим, к примеру, oто- бразить заголовок страницы во всю ширину окна броузера, а уж под ним расположить левый и правый фреймы? — Это весьма просто. Создадим отдельный НТМL-файл заголовка. <ТITLЕ>Домашняя страница Сергея Сергеева. <Н1>Домашняя страница Сергея Сергеева Назовем этот файл, например, serghdr. html. Далее удалим заголовок из файла sergtext.html. И теперь давайте немного подумаем. Чтобы расположить наш заголовок в верхнем фрейме, придется сначала определить набор горизонтальных фреймов с помощью атрибута ROWS= в теге : Здесь мы определили высоту верхнего фрейма в 80 пикселов — вполне достаточно для заголовка. Теперь определим содержимое верхнего фрейма (загрузим туда наш только что созданный файл serghdr.html): Теперь нужно определить содержимое нижнего фрейма. А что там должно находиться? А там должен находиться тот самый набор фреймов, который был определен в прошлом примере! К счастью, нам ничто не мешает в качестве содержимого одного из фреймов указывать тег — ведь каждый фрейм имеет те же “права”, что и отдельное окно броузера! Вот что у нас получится в целом. <ТITLE>Домашняя страница Сергея CepreeBa Навигация между фреймами А теперь давайте рассмотрим чуть более сложный пример. Попытаемся наконец, организовать полную навигацию по сайту гипотетической фирмы “Лентяй”, отдельные части которого мы создали в предыдущих главах. Здесь в правой части имеются гиперссылкп на различные разделы сайта, но при создании примера эти гиперссылю i не действовали. А ведь по крайней мере три из них могут действовать, поскольку три раздела: “Услуги”, “Цены” и “Книга отзывов” уже созданы! Для реализации полной навигации мы в этом разделе будем использовать фреймы, хотя это не единственное решение. (Более изящное решение на основе позиционирования будет предложено в конце этой главы.) Прежде всего, нам придется выделить в отдельные файлы заголовок и блок гиперссылок. Кроме того, чтобы пользоваться одинаковыми стилями г нескольких HTML-файлах сразу, мы не будем дублировать таблицу стилей в каждом из файлов, а тоже выделим ее в отдельный файл. Назовем и, его lent.css. Давайте вначале взглянем на его содержимое: BODY { background-color: #D2FFFF; color: #003737; background-image: url("Images\grad2.jpg"); background-position: right; background-repeat: repeat-y; } A:link,A:active,A:visited { color: #006A6A; } A:hover { font-weight: bold; text-decoration: none; } .hdr { position: absolute; left: 50px; top: 10px; text-align: center; font-family: OdessaScriptFWF, fantasy; font-size: 60px; font-weight: 900; width: 90%; height: 100px; letter-spacing: 0.05em; line-height: 100px; filter: shadow; border: 10px outset #003163; color: #3163CE; } .rght { font-size: large; } .Ink { border-width: thick; border-style: ridged; margin: 10px; padding: 5px; border-color: #319CFF; background-image: url("Images\backlnkl.jpg"); color: red; text-align: center; } .Ink A:link, .Ink A:visited { text-decoration: none; color: white; } .Ink A:active ( text-decoration: none; color: red; } .1ft { font-size: meduim; } .bigger { font-size: larger; font-family: sans-serif; } .logo { position: absolute; left: 70; top: 120; z-index: -5; } Как видите, эта таблица стилей очень похожа на ту, однако в нее пришлось внести некоторые изменения. Поскольку все разделы будут теперь располагаться в отдельных фреймах, отпадает необходимость в позиционировании, поэтому для классов Ift и rght свойства position, left, top, width и height мы вообще не опре делили. Кроме того, изменена позиция (свойства left и top) логотипа, то есть класса logo. Для выделения красным цветом ссылки на текущий раз дел (то есть тот, который в данный момент просматривает пользователь) пришлось добавить псевдокласс .Ink Aactive. Теперь давайте напишем главный документ, определяющий набор фреймов. После изучения предыдущего раздела это не составит никакого труда — он будет в точности таким же, как в предыдущем примере, только имена файлов и названия фреймов изменятся. Кроме того, для верхнего фрейма придется выделить чуть больше места (150 пикселов), а для правого ниж- него фрейма (блока ссылок) определить фиксированную ширину 200 пикселов <ТIТLЕ>Фирма "Лентяй" Теперь создадим файл заголовка lenthdr.html. Собственно говоря, он будет очень коротким, поскольку в нем не должно быть ничего, кроме заголовка, написанного классом hdr, уже определенным в файле lent.css. Надо только не забыть подключить файл таблицы стилей с помощью тега : Взглянем на текст этого файла целиком. Итак, посмотрим целиком на текст файла lentlink.html. Собственно говоря, на этом этапе можно уже открыть основной файл и броузере. Правда, чтобы гиперссылки работали, давайте напишем еще файлы prices.html и guestbook.html.