Если необходимо разбить страницу на два столбца, чтобы ширина первого составляла 15 % от всего доступного пространства, следует ввести:
<FRAMESET C0LS='15%,85%'>
Но этого мало. Теперь нужно сообщить браузеру, какие документы будут открываться в каждой из полученных областей. Для этого существует тег <FRAME> и его параметр SRC:
<FRAMESET C0LS='15%,85%'>
<FRAME SRC='I ist.htm'>
<FRAME SRC='intro.htm'> </FRAMESET>
В левом фрейме будет открываться документ list. htm, a в правом – intro. htm.
Организуем страницу таким образом, чтобы в левом столбце находились пункты меню, а в правом – содержимое этих пунктов.
Однако здесь мы сразу же столкнемся с проблемой: если щелкать на ссылках одного из фреймов, то новые веб-страницы будут загружаться в нем же.
Нам же необходимо, чтобы при щелчках на пунктах меню левого фрейма документы открывались в правом. Сделать это очень просто.
Сначала следует задать имя правого фрейма с помощью параметра NAME тега <FRAME>:
<FRAME SRC='intro.htm' NAME='content'>
Теперь в каждой ссылке левого фрейма следует указать данное имя. Для этого служит параметр TARGET:
<А HREF='item1.htm' TARGET='content'>Текст ссылки</А>
Результат выполненных действий представлен на рис. 6.4.
Рис. 6.4. Использование фреймов.
Иногда необходимо, чтобы документ открылся на все окно. Осуществить это проще простого:
<А HREF='item6.htm' TARGET='_top'>Текст ссылки</А>
Кстати говоря, совершенно не обязательно делить страницу только на строки или столбцы. Можно превосходно сочетать оба эти способа. Давайте, например, разобьем страницу на два горизонтальных фрейма, а нижний, в свою очередь, – на два вертикальных:
<FRAMESET ROWS='40%,60%'> <FRAME SRC='part1.htm'> <FRAMESET COLS='50%,50%'> <FRAME SRC='part2.htm'> <FRAME SRC='part3.htm'> </FRAMESET> </FRAMESET>
Действуя подобным образом, можно получать самые замысловатые конструкции (рис. 6.5).
Рис. 6.5. Разбиение окна на фреймы
Другие возможности
Все, что было написано выше по поводу HTML, – это только вершина айсберга. И даже если бы мы рассмотрели все существующие теги, то это тоже была бы всего лишь малая часть тех возможностей, которые можно реализовать на веб-страницах.
Помимо HTML-кода существуют специальные скриптовые языки, встраиваемые в HTML-документ и придающие ему динамичность и интерактивность, то есть позволяющие управлять содержимым веб- страницы после ее загрузки. Наиболее популярными языками сценариев, обеспечивающими данные возможности, являются JavaScript и Visual Basic. С их помощью на веб-страницах можно воплотить свои самые смелые дизайнерские фантазии.
Для более сложных интернет-проектов используется CGI (Common Gateway Interface) – общий шлюзовый интерфейс. Он позволяет в интерактивном режиме работать с данными веб-сервера. Допустим, на сервере находится какая-либо база данных. Очевидно, что обыкновенный HTML-документ не сможет справиться с такой задачей, как обращение к этой базе с определенным запросом. Решить же данную проблему можно с помощью CGI: запрос с веб-страницы передается специальной CGI-программе, которая обрабатывает его и возвращает полученную информацию. CGI-программы пишут на специальных языках программирования, самым популярным из которых является Perl.
Еще одной технологией, существенно расширяющей возможности HTML, является ActiveX. Данная технология реализует тесную и максимально прозрачную для пользователя интеграцию веб-ресурсов в операционную систему Windows.
Органы управления ActiveX – это небольшие программы, которые берут под свое управление часть пространства веб-страницы и в пределах своего участка могут делать все, что им заблагорассудится. Таким образом, обыкновенный HTML-документ может превратиться в настоящее мультимедийное приложение.
Но и это далеко не все! И пока вы читаете эти строки, программисты наверняка придумывают и внедряют в жизнь что-то еще более новое и интересное.
Оформление
Перейдем от строгих и четких правил программирования к более расплывчатым и носящим преимущественно рекомендательный характер принципам оформления и структурирования веб-страницы. В идеале необходимо представлять структуру и внешний вид страниц своего сайта, еще не приступив к работе над ним. Это как составление плана перед написанием сочинения: можно и без него, но в этом случае в тексте уже не будет той стройности и ясности. Поэтому, прежде чем включать компьютер, присядьте за письменный стол с карандашом и листком бумаги и прикиньте, что же вы действительно собираетесь создать. Поверьте, эти несколько минут позволят сэкономить вам часы неорганизованных действий.
Структура
Первое, с чего следует начинать планирование, – это структура сайта. Структура главным образом определяется содержимым сайта и должна обеспечивать удобство доступа к нужной информации. Если неправильно выбрать структуру, то пользователь может очень быстро запутаться, вследствие чего покинуть ваш сайт и отправиться к конкурентам. Этого нельзя допустить ни в коем случае.
Наиболее распространены три структуры сайта: линейная, древовидная и смешанная. Рассмотрим подробнее каждую из них.
– Линейная (рис. 6.6). Это самая простая для реализации структура. Она представляет собой совокупность равноправных страниц, идущих одна за другой.
Каждая такая веб-страница должна иметь ссылки на предыдущую и следующую страницы. Кроме того, для удобства навигации желательно снабдить все документы ссылками на первую страницу, содержащую, к примеру, оглавление. Это нужно еще для того, чтобы случайный посетитель, попавший с помощью поисковой системы на какую-либо страницу вашего сайта, смог без труда сориентироваться и разобраться что к чему.
Достоинством данной структуры, безусловно, является простота, а недостатком – весьма ограниченная область применения. Линейную структуру можно использовать при создании сайтов-презентаций и онлайн-учебников, то есть в случаях, когда для перехода к очередному разделу требуется понимание предыдущего. В иных ситуациях лучше применять другую структуру.
Рис. 6.6. Линейная структура сайта.
– Древовидная (рис. 6.7). Универсальная структура, подходящая для создания практически любого сайта. Принцип работы прост. Главная страница имеет несколько разделов, предоставляющих пользователю выбор, куда идти дальше. Каждый раздел в свою очередь имеет несколько подразделов, подразделы – свои подразделы и т. д. Таким образом, путешествуя по ветвям дерева, посетитель очень быстро сможет найти нужную ему информацию.
Рис. 6.7. Древовидная структура сайта.
Работа с сайтом, построенным с использованием древовидной структуры, очень наглядна и интуитивно понятна. Единственное, на что следует обратить внимание при проектировании, – баланс глубины и ширины дерева. Если сделать дерево слишком глубоким, то у посетителя может попросту не
