IGROMANIA.RU
Registration
MoreLess
Популярные за неделю
Популярные за месяц
Ассасины и тамплиеры на большом экране. Фильм «Кредо убийцы» Кино > Ассасины и тамплиеры на большом экране. Фильм «Кредо убийцы»
Ассасины и тамплиеры на большом экране. Удался ли эксперимент?
Комментариев: 49
Planet Coaster: парк развлечений своими руками Рецензии > Planet Coaster: парк развлечений своими руками
С самого детства мечтали построить идеальный парк аттракционов? Planet Coaster от Frontier Developments это позволяет!
Комментариев: 3

В предыдущих статьях по веб-дизайну мы изучили основы создания довольно сложных сайтов с использованием флэш-элементов, 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).

Сайт в сайте

В Macromedia Dreamweaver встроено множество шаблонных веб-страниц с фреймами.

Иногда возникает необходимость подгрузить чью-нибудь страничку на свой веб-сайт в определенный фрейм — например, новости из своего блога, расположенного на другом портале. В этом случае без правки кода установочного файла не обойтись. Давайте поучимся подгружать в подокна нашей странички какие-нибудь удаленные 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-файл поверх старой поисковой информации.

Главное правило, которое необходимо соблюдать, — не заниматься плагиатом или полным копированием содержимого мета-конструкций. Создавайте свое на основе того, что уже придумали другие пользователи. Чтобы никакого плагиата!

Страничка по игре Titan Quest, созданная нами с использованием двух фреймов: один выступает в роли навигационной панели, другой является окном для загрузки документа.

* * *

Сегодня мы изучили основные принципы создания сайтов с применением так называемых фреймов, а также разобрали тонкости использования мета-тегов в HTML-файлах. Но и на этом тема веб-дизайна не закрыта — мы вернемся к ней в одном из ближайших выпусков «Игромании» и расскажем вам о том, как превратить свой сайт в полноценный игровой портал.

С самого детства мечтали построить идеальный парк аттракционов? Planet Coaster от Frontier Developments это позволяет!
В 2016-м вышло немало отличных стратегий. Выбираем лучшие из лучших.
2016-й выдался удачным для всех тех, кто предпочитает нападать на врагов со спины или вообще обходить их стороной.
Игр с открытыми мирами с каждым годом выходит все больше и больше, но в каких из этих миров у игроков больше всего возможностей?
Комментарии к статьям
Войти и прокомментировать                Войти под логином игромании | Зарегистрироваться
Самые комментируемые статьи за месяц:
Кино > Ассасины и тамплиеры на большом экране. Фильм «Кредо убийцы»
Спец > Лучший мой подарочек — это Xbox One S!
Спец > Достать геймпад и плакать: игры, берущие за душу: от Ori and the Blind Forest и This War Of Mine до BioShock Infinite и Life is Strange
Спец > Игра в кубики. В чем сила Minecraft?
Рецензии > Соборы в небесах. Обзор Space Hulk: Deathwing
Спец > Влюбиться в убийцу: история серии Assassin’s Creed
Железный цех > В ожидании ZEN. Тестируем игровой компьютер Edelweiss MSI Edition на базе AMD 970
Спец > Горячий осенне-зимний сезон Windows Store. Главные игровые новинки
Спец > На скорости 160 км/ч, или Как работают гоночные игры
Прямым текстом > Darksiders: Warmastered Edition — жизнеспособное чудище Франкенштейна
Поиск по сайту Игровые платформы: PC  |   X360  |   XONE  |   PS3  |   PS4  |   Wii  |   Wii U  |   PSP  |   Vita  |   NDS  |   3DS  |   Android  |   iOS
1997-2017 ООО «Игромедиа». Мнение авторов и посетителей сайта может не совпадать с мнением редакции. Полное или частичное воспроизведение материалов сайта и журнала допускается только с согласия редакции. Для прямого контакта с редакцией пишите на основную почту «Игромании.ру».
Пользовательское соглашение

КОММЕРЧЕСКИЕ ССЫЛКИ:
Механизм выбора платформы позволяет отображать на страницах информационного портала материалы, относящиеся строго к выбранным платформам.

Каждый пользователь индивидуально выбирает для себя интересующие его игровые платформы.
 
Rambler's Top100 Яндекс цитирования