Веб-окна и HTML-форточки. Все о фреймах и мета-тегах
В предыдущих статьях по веб-дизайну мы изучили основы создания довольно сложных сайтов с использованием флэш-элементов, Java-апплетов и других модулей в одном из самых популярных веб-редакторов Macromedia Dreamweaver. Также мы разобрались, как зарегистрировать получившийся ресурс в поисковых системах.
Сегодня мы продолжим совершенствовать сайт при помощи так называемых фреймов, а также освоим ряд полезных мета-тегов.
Вся правда о фреймах
Пожалуй, любой пользователь так или иначе слышал о фреймах (от англ. frame). В переводе на русский этот термин означает « кадр » и используется в программировании, анимации, киноиндустрии и многих других областях. Давайте разберемся, что же такое фрейм применительно к веб-дизайну. Экран монитора условно можно разделить на несколько прямоугольных областей, в каждой из которых будет отображаться определенное видео, текст или картинка. Окно браузера также можно разбить на несколько частей (подокон), в каждую из которых будет выводиться определенный HTML-документ. Так вот, области, разбивающие главную страницу на несколько составляющих, и называются фреймами.
Для создания фреймов воспользуемся программой Macromedia Dreamweaver. Запустите приложение и в появившемся меню в столбце Create New выберите пункт More. Откроется окно с заголовком New Document , где нам предстоит задать тип документа. На закладке General в колонке Category выберите строку Framesets (совокупность фреймов), после чего в столбце напротив выберите нужный тип разметки документа, скажем Split Vertical. Кликнув Ok , вы завершите создание так называемого установочного файла, который содержит в себе информацию о фреймовой разметке и ссылки на странички, которые будут в дальнейшем подгружены во фреймы.
Сохраните базовый HTML-документ на компьютере под произвольным названием, например Basic_file.html. Затем в главном рабочем поле Macromedia Dreamweaver перейдите на один из фреймов (в нашем случае их два — правый и левый) и создайте в нем полноценную страничку с таблицами, навигационными панелями, логотипами. Когда HTML-документ будет сформирован, воспользуйтесь комбинацией клавиш Ctrl+S , чтобы сохранить документ для текущего фрейма на жестком диске.
Проделайте аналогичные действия со вторым фреймом. Для изменения границ фреймовой разметки достаточно перетащить ее мышкой с зажатой левой кнопкой. Если вы переместите верхнюю границу фреймовой таблицы вниз или, наоборот, нижнюю границу вверх, то этим действием вы сформируете дополнительные окна, в каждое из которых можно будет поместить целый HTML-документ. То есть совсем необязательно использовать лишь какие-то конкретные шаблоны фреймсетов, навязанные Macromedia Dreamweaver, — можно взять за основу какой-то стандартный установочный файл и модифицировать его. При необходимости совсем несложно изменить основные свойства выделенного установочного файла (таблицы фреймов) в панели Properties : активировать опцию отображения бордюра ( Borders ), установить его цвет ( Border color ), толщину ( Border width ).
Сайт в сайте
Иногда возникает необходимость подгрузить чью-нибудь страничку на свой веб-сайт в определенный фрейм — например, новости из своего блога, расположенного на другом портале. В этом случае без правки кода установочного файла не обойтись. Давайте поучимся подгружать в подокна нашей странички какие-нибудь удаленные HTML-файлы. Выделите таблицу разметки, кликнув по одной из ее границ левой кнопкой мышки, и перейдите на закладку Code над рабочим окном Macromedia Dreamweaver. Приложение перейдет в режим правки исходного кода.
Отыщите строку, начинающуюся на < frame src=", и добавьте между первыми кавычками данного тега линк на удаленный ресурс в интернете, к примеру www. igromania . ru. Модифицированная конструкция в нашем случае примет вид: < frame src=“” name=“leftFrame” >. Главная страница сайта «Игромании» загрузится в левое окно нашего ресурса, о чем свидетельствует наличие ключевого слова leftFrame в конце тега. Операции присвоения адресов другим фреймам производятся аналогичным образом. Если в исходном файле вы укажете для всех фреймов какие-либо удаленные ссылки, то специальные страницы для фреймов вовсе не нужны — достаточно установочного файла.
В завершение разговора о фреймах рассмотрим, как подгрузить в один фрейм сразу несколько страничек с удаленных ресурсов. Перейдите на вкладку Design над рабочим окном (вы вернетесь к дизайнерскому режиму программы). Активируйте колонку с левым фреймом и напечатайте там произвольный текст — скажем, « Материалы по игре Titan Quest ». Строкой ниже введите любое название документа в Сети, например: « Создание уровней для Titan Quest ». Выделите только что набранный текст (за исключением заголовка вверху столбца) и на панели свойств ( Properties ) в поле Link укажите полный адрес на страницу в интернете (как вариант www.igromania.ru/articles/index_new.php?5416).
После этого на панели инспектора свойств выберите из списка Target строку, содержащую название правого фрейма, в нашем случае это mainFrame. Добавьте в левый фрейм еще несколько подобных гиперссылок. Сохраните изменения в центральном (установочном) и добавочных HTML-документах и протестируйте сайт в браузере.
META-беспредел
В прошлой статье по веб-дизайну, опубликованной в февральском номере «Игромании» за 2007 год, мы рассказали вам о так называемых мета-тегах, которые выступают в роли поводырей для поисковиков. Но мета-теги еще много на что способны.
Если вы не хотите вникать в тонкости редактирования исходного кода страницы, воспользуйтесь редактором Macromedia Dreamweaver (седьмой версии и выше). Чтобы вмонтировать нужный мета-тег в тело странички, зайдите в меню Insert/HTML/Head Tags и выберите необходимый тег из списка: Meta , Keywords , Description , Refresh.
Напомним, что мета-теги Meta и Keywords содержат ключевые слова и словосочетания для поиска, мета-тег Description включает в себя краткое описание сайта и, наконец, тег Refresh определяет время, через которое произойдет обновление страницы или переход с нее на другой информационный ресурс. После того как нужный элемент будет выбран, откроется окно, в которое вам предложат ввести ключевые слова для поиска или описание сайта. Как только вы нажмете кнопку Ok , Dreamweaver автоматически сгенерирует мета-тег и добавит его в исходный код сайта.
Предположим, вам нужно закрыть доступ поисковику к какому-нибудь разделу сайта. Для этого применяется специальный мета-тег Robots , который имеет несколько модификаций. В общем случае он имеет следующий вид:
< META name = “robots” content = “noindex, nofollow”>
Параметр noindex указывает на то, что поисковая система не должна индексировать базу данных текущей страницы, а ключевое слово nofollow запрещает поисковику просматривать веб-документы по ссылкам, приведенным в данном файле. При необходимости вы можете изменить один из параметров данной конструкции ( noindex или nofollow ) на противоположные ( index , follow ), которые разрешат поисковику выполнить действия по индексированию страницы и путешествовать по ссылкам. Теперь ни одна поисковая машина не сможет внести закрытые странички в свою базу данных, даже если какой-то пользователь попытается сделать это насильно, вручную.
С блокировкой разобрались, самое время помочь вам привлечь на свой сайт максимальное число пользователей. Практика показывает, что многие сайты непопулярны только из-за того, что не содержат достаточного количества поисковых мета-тегов. Рассмотрим конкретный пример. Предположим, вы создали фан-сайт по NFS: Carbon и хотите привлечь на него новых посетителей. На данный момент его посещаемость составляет около 40 человек в день. Это очень мало. Для того чтобы устранить это досадное недоразумение, проделайте следующее. Найдите в интернете самые популярные сайты по данной игре и сохраните к себе на жесткий диск файлы главных страниц этих ресурсов. Вооружитесь «Блокнотом» и с его помощью откройте сохраненные веб-документы. Отыщите мета-теги Description и Keywords и скопируйте из них все ключевые слова и фразы для поиска. Соберите на их основе собственные сочетания ключевых слов и добавьте их в HTML-файл поверх старой поисковой информации.
Главное правило, которое необходимо соблюдать, — не заниматься плагиатом или полным копированием содержимого мета-конструкций. Создавайте свое на основе того, что уже придумали другие пользователи. Чтобы никакого плагиата!
* * *
Сегодня мы изучили основные принципы создания сайтов с применением так называемых фреймов, а также разобрали тонкости использования мета-тегов в HTML-файлах. Но и на этом тема веб-дизайна не закрыта — мы вернемся к ней в одном из ближайших выпусков «Игромании» и расскажем вам о том, как превратить свой сайт в полноценный игровой портал.