Егор Александров - Интернет – легко и просто! Страница 20

<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. Древовидная структура сайта.

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

– Смешанная (рис. 6.8). Само название говорит о том, что данная структура сочетает в себе элементы линейного и древовидного построения сайтов: линейная последовательность страниц может иметь ответвления, разъясняющие тот или иной факт, а древовидная структура – линейные ветки документов. Это ни в коем случае не возбраняется, если обусловлено повышением эффективности доступа к информации. Но в подобной оптимизации тоже не стоит уходить слишком далеко, иначе вы рискуете превратить свой стройный сайт в совокупность беспорядочно ссылающихся друг на друга документов.

Рис. 6.8. Смешанная структура сайта

Внешний вид

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

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

– Не стоит думать, что если ваш монитор поддерживает разрешение 1280x960, то и все остальные пользователи работают при таком же разрешении. Типичным посетителем вашего сайта будет обладатель монитора с разрешением 800x600, поэтому все содержимое должно укладываться в эти рамки.

– При создании графики используйте для рисунков формат GIF, a для фотографий —JPEG. Для рисунков лучше применять формат GIF, так как он очень сильно сжимает изображение практически без потери качества, поэтому полученные файлы рисунков весьма компактные. Кроме того, GIF позволяет определять в картинке «прозрачные» цвета, которые становятся невидимыми при просмотре рисунка в браузере. Минусом GIF является ограничение в количестве цветов – всего 256, поэтому для фотографий лучше использовать формат JPEG.

– Применяйте цвета из «безопасной» палитры. Дело в том, что разные браузеры по-разному воспринимают цвета, которые вы им задаете. Говорят же: «На вкус и цвет товарищей нет!» Как оказалось, эта пословица справедлива не только для людей. Поэтому пользователи, к примеру, Netscape Navigator и Internet Explorer при просмотре одной веб-страницы будут видеть разные цвета. Однако существует так называемая «безопасная» палитра, состоящая из 216 цветов, которые будут всегда и везде отображаться правильно и без искажений. Найти эту палитру можно, например, по адресу http://www.artlebedev.ru/tools/colors/.