Веб-окна и 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).
Сайт в сайте
В Macromedia Dreamweaver встроено множество шаблонных веб-страниц с фреймами. |
Иногда возникает необходимость подгрузить чью-нибудь страничку на свой веб-сайт в определенный фрейм например, новости из своего блога, расположенного на другом портале. В этом случае без правки кода установочного файла не обойтись. Давайте поучимся подгружать в подокна нашей странички какие-нибудь удаленные HTML-файлы. Выделите таблицу разметки, кликнув по одной из ее границ левой кнопкой мышки, и перейдите на закладку Code над рабочим окном Macromedia Dreamweaver. Приложение перейдет в режим правки исходного кода.
Отыщите строку, начинающуюся на , и добавьте между первыми кавычками данного тега линк на удаленный ресурс в интернете, к примеру www. igromania . ru. Модифицированная конструкция в нашем случае примет вид: . Главная страница сайта «Игромании» загрузится в левое окно нашего ресурса, о чем свидетельствует наличие ключевого слова leftFrame в конце тега. Операции присвоения адресов другим фреймам производятся аналогичным образом. Если в исходном файле вы укажете для всех фреймов какие-либо удаленные ссылки, то специальные страницы для фреймов вовсе не нужны достаточно установочного файла.
В завершение разговора о фреймах рассмотрим, как подгрузить в один фрейм сразу несколько страничек с удаленных ресурсов. Перейдите на вкладку Design над рабочим окном (вы вернетесь к дизайнерскому режиму программы). Активируйте колонку с левым фреймом и напечатайте там произвольный текст скажем, «Материалы по игре Titan Quest». Строкой ниже введите любое название документа в Сети, например: «Создание уровней для Titan Quest». Выделите только что набранный текст (за исключением заголовка вверху столбца) и на панели свойств (Properties) в поле Link укажите полный адрес на страницу в интернете (как вариант ).
После этого на панели инспектора свойств выберите из списка Target строку, содержащую название правого фрейма, в нашем случае это mainFrame. Добавьте в левый фрейм еще несколько подобных гиперссылок. Сохраните изменения в центральном (установочном) и добавочных HTML-документах и протестируйте сайт в браузере.
META-беспредел
В прошлой статье по веб-дизайну, опубликованной в февральском номере «Игромании» за 2007 год, мы рассказали вам о так называемых мета-тегах, которые выступают в роли поводырей для поисковиков. Но мета-теги еще много на что способны.
Если вы не хотите вникать в тонкости редактирования исходного кода страницы, воспользуйтесь редактором Macromedia Dreamweaver (седьмой версии и выше). Чтобы вмонтировать нужный мета-тег в тело странички, зайдите в меню Insert/HTML/Head Tags и выберите необходимый тег из списка: Meta, Keywords, Description, Refresh.
Наглядный пример использования фреймов. Окно браузера разделено на две части, в каждую из которых загружен удаленный файл. |
Напомним, что мета-теги Meta и Keywords содержат ключевые слова и словосочетания для поиска, мета-тег Description включает в себя краткое описание сайта и, наконец, тег Refresh определяет время, через которое произойдет обновление страницы или переход с нее на другой информационный ресурс. После того как нужный элемент будет выбран, откроется окно, в которое вам предложат ввести ключевые слова для поиска или описание сайта. Как только вы нажмете кнопку Ok, Dreamweaver автоматически сгенерирует мета-тег и добавит его в исходный код сайта.
Предположим, вам нужно закрыть доступ поисковику к какому-нибудь разделу сайта. Для этого применяется специальный мета-тег Robots, который имеет несколько модификаций. В общем случае он имеет следующий вид:
Параметр noindex указывает на то, что поисковая система не должна индексировать базу данных текущей страницы, а ключевое слово nofollow запрещает поисковику просматривать веб-документы по ссылкам, приведенным в данном файле. При необходимости вы можете изменить один из параметров данной конструкции (noindex или nofollow) на противоположные (index, follow), которые разрешат поисковику выполнить действия по индексированию страницы и путешествовать по ссылкам. Теперь ни одна поисковая машина не сможет внести закрытые странички в свою базу данных, даже если какой-то пользователь попытается сделать это насильно, вручную.
С блокировкой разобрались, самое время помочь вам привлечь на свой сайт максимальное число пользователей. Пpaктика показывает, что многие сайты непопулярны только из-за того, что не содержат достаточного количества поисковых мета-тегов. Рассмотрим конкретный пример. Предположим, вы создали фан-сайт по NFS: Carbon и хотите привлечь на него новых посетителей. На данный момент его посещаемость составляет около 40 человек в день. Это очень мало. Для того чтобы устранить это досадное недоразумение, проделайте следующее. Найдите в интернете самые популярные сайты по данной игре и сохраните к себе на жесткий диск файлы главных страниц этих ресурсов. Вооружитесь «Блокнотом» и с его помощью откройте сохраненные веб-документы. Отыщите мета-теги Description и Keywords и скопируйте из них все ключевые слова и фразы для поиска. Соберите на их основе собственные сочетания ключевых слов и добавьте их в HTML-файл поверх старой поисковой информации.
Главное правило, которое необходимо соблюдать, не заниматься плагиатом или полным копированием содержимого мета-конструкций. Создавайте свое на основе того, что уже придумали другие пользователи. Чтобы никакого плагиата!
Страничка по игре Titan Quest, созданная нами с использованием двух фреймов: один выступает в роли навигационной панели, другой является окном для загрузки документа. | |
* * *
Сегодня мы изучили основные принципы создания сайтов с применением так называемых фреймов, а также разобрали тонкости использования мета-тегов в HTML-файлах. Но и на этом тема веб-дизайна не закрыта мы вернемся к ней в одном из ближайших выпусков «Игромании» и расскажем вам о том, как превратить свой сайт в полноценный игровой портал.
Вечнозеленые «Дешево и сердито… Категория меньше 15 000 руб.», «Cмepть тормозам… Категория меньше 20 000 руб.», «Займи, но купи… Категория меньше 30 000 руб.» и — «Тебя я видел во с...
09 02 2026 15:23:18
отличный вариант игрового компьютера. Плюсы — высокий уровень производительности и приятные бонусы, вроде информативного ЖК-дисплея и беспроводного комплекта «клавиатура + мышь». Особых минусов замечено не было...
08 02 2026 16:27:17
“Советская кампания будет проходить на известных нам по первой части островах, — которых, между прочим, хватит еще на добрый десяток аддонов. Кампания состоит из 20 миссий, не считая несвязанных между собой операций. По ходу игры вы встретите знакомых пер...
07 02 2026 4:14:51
Многоэкранный мир Выставка E3 затмила собой все остальные события. А потому мы решили сделать совершенно отдельной темой сегодняшней статьи — вне нашего огромного обзора мероприятия — один из самых интересных трендов этой выставки.…|Игромания...
06 02 2026 6:19:12
Ни для кого не секрет (а если секрет, то сейчас перестанет им быть), что эпоха обычных аудиоплееров постепенно сползает в бездну прошлого. Уже открыта дорога для новых и куда более перспективных, нежели кассеты, портативных носителей аудиоинформации...
05 02 2026 7:22:11
Сейчас никто точно не скажет, случайно ли Infinite Interactive (создатели великого варгeйма Warlords) придумали концепцию Puzzle Quest: Challenge of the Warlords или это был результат долгой вдумчивой работы. Знали ли они наверняка или просто д...
04 02 2026 7:55:17
В преддверии выхода Injustice 2 вспоминаем самые зубодробительные дpaки между героями и злодеями в комиксах издательства DC. А помогает нам в этом самая популярная дeвyшка-гик русскоязычного YouTube — Вика Кисимяка....
03 02 2026 17:46:28
Чтобы воспользоваться читами, вызовите для начала консоль, нажав ~. После чего введите в консоли одну из следующих комaнд: TMG - бесcмepтие, Help - вывести список консольных комaнд с описаниями, SetFlying 1 - получить возможность летать, SetSuperJump 1 -...
02 02 2026 2:33:16
“Опять выросли цены на память DDR и SDRAM. То, что вчера стоило копейки и продавалось на развес, сегодня вновь составляет отдельную статью затрат при покупке нового компьютера. Как следствие, оперативная память в категории "Дешево и сердито" уменьшилась с...
01 02 2026 17:26:57
24 часа в сутки я мысленно с вами. В остальное время со мной можно связаться, написав по адресу hot-line@igromania.ru или отправив SMS на короткий номер 1121 с префиксом #hard (то есть в начале сообщения вы должны ввести слово #hard и только потом,…|Игромания...
31 01 2026 10:13:24
Итак, песня спета, труба задушена, а кардинал порван на трaнcпаранты. Только вот мушкетеры Д’Артаньяна не нашли, да и "с ребятами неудобно вышло..." (с) ...
30 01 2026 11:59:43
В прошлых номерах "Игромании" уже поднималась тема создания своей домашней странички. Надеюсь, что вы уже освоили обычный HTML (а может быть, и Dynamic HTML). Возможно, вам стало тесно в рамках HTML и хочется создать что-нибудь на порядок лучше.Вершиной и...
29 01 2026 5:24:46
«…несмотря на жизнерадостную цветовую гамму и несколько анимационную эстетику, XCOM сделана с большим вниманием к эпохе и с абсолютно серьезным лицом: мирных жителей тут довольно натурально рвет инопланетной жижей, домохозяек испепеляет адский внеземной л...
28 01 2026 19:29:16
"...Сегодня мы создадим новые виды оружия, поработаем над системой рангов различных юнитов, зададим новые хаpaктеристики для трaнcпортных юнитов и... добавим в игру новые апгрейды, которые разработчики почему-то решили спрятать от гeймеров..."...
27 01 2026 13:53:17
Питерцы последовательно изучают (в том числе и на себе) влияние среды на личность. Они наблюдают за тем, как инфразвук, замкнутое прострaнcтво, время и история меняют человека. Об этом был «Сублюструм», лучший российский квест прошлого года. О...
26 01 2026 17:37:32
Начинается лето и пора отпусков — а значит, впереди долгие поездки, во время которых в машине, поезде или самолёте часами нечего делать. Любимую PS4 с собой не потащишь, а мощный игровой ноутбук или Switch есть далеко не у всех. Чем…|Игромания...
25 01 2026 8:26:43
С каждым годом мультфильмы становятся сложнее. На заре кино черно-белая мышь чистила картошку, затем под музыку Элтона Джона умирали львы, а сегодня вот Up (в отечественном прокате «Вверх») от Pixar — совершенно взрослая по духу сказка...
24 01 2026 2:48:51
Direct Action Games за несколько недолгих лет своего существования успели выпустить уже две игры, не считая той, о которой речь идет в данном тексте: Combat Task Force 121 — про схватку спецназовцев с подлыми колумбийскими террористами; и World War II...
23 01 2026 6:31:10
ПРОХОЖДЕНИЕ Коды Ну и какая же игра бывает без кодов? И Warcraft за номером 3 их не избежал. Пользуйтесь! iseedeadpeople — Открыть всю карту. allyourbasearebelongtous — Выиграть миссию. somebodysetupusthebomb — Проиграть миссию. thereisnospoon — Бескон...
22 01 2026 8:44:57
В 2007 году «Бельтион» был фактически начат с нуля. Изменилось все: сюжет, ролевая и боевая системы, общая идеология. Вместо эпической, на сто часов прохождения, игры с упором на свободу выбора и нелинейность украинцы начали делать лаконичный...
21 01 2026 13:52:49
«…Маниакальное внимание к деталям порой заменяет гeймдизайнерам 2K Czech фантазию — пускай в игре много одинаковых перестрелок, зато как они обставлены! Всегда в уникальных декорациях, всегда с чем-нибудь разрушаемым: если надо расстрелять в щепки чей-то...
20 01 2026 23:54:23
Iron Storm — 3D Action в антураже Первой мировой, которая... идет уже полвека. И более того — заканчиваться вовсе не собирается. Альтернативная история: русско-монгольские полчища во главе с бароном Югенбергом крушат...
19 01 2026 20:19:32
Kingdom Come: Deliverance понравилась многим игрокам масштабами, ощущением исторического эпоса и тонной контента. Неожиданными поворотами сюжета, наконец. Правда, ничего этого в Kingdom Come: Deliverance — Band of Bastards нет. Но это и не…|Игромания...
18 01 2026 10:46:50
Тактика игры за эльдаров За несколько тысячелетий до событий, имевших место в Dawn of War, эльдары были самой сильной расой во Вселенной. Они имели мощную армию и самые продвинутые технологии, однако, вступив в войну, они сначала одержали ряд выдающихс...
17 01 2026 8:56:51
«…в центре внимания здесь вооруженный военный конфликт… изделий кондитерской фабрики. Ломтики зефира отбиваются от вероломных какао-бобов, взрывая баррикады из желе и проламывая вражьи укрепления реками горячего шоколада…»...
16 01 2026 16:19:35
Где-то год назад мне удалось емко сформулировать идею Until Dawn — и мимоходом объяснить самую суть молодежных хорроров: давайте разделимся, давайте разденемся и умрем в страшных муках. Примерно так все в игре и происходит — злые…|Игромания...
15 01 2026 11:18:48
«…Эцио (итальянского дворянина конца пятнадцатого века) вводят в игру с эpoтической сцены: в самой настоящей ванной, с Катериной Сфорца. Он возмужал, помрачнел, обзавелся трехдневной небритостью — словом, стал настоящим мачо. Каждую секунду сюжетного дейс...
14 01 2026 6:54:38
www.johnrausch.com Сайт, посвященный... пазлам. И не только игровым, но и, что называется, пазлам по жизни. Кто из нас не задавался вопросом, как, например, мастера засовывают модельки…|Игромания...
13 01 2026 12:56:51
“Игра будет сделана в традициях старых добрых аркадных шутеров “с видом сверху”, а по устройству миссий и типу гeймплея напомнит древний сериал Strike’ов (Desert, Jungle и Soviet Strike). Планируется около двадцати летных заданий, а территория боевых дейс...
12 01 2026 12:15:27
КИБЕРСПОРТ. Вести с полей 14 декабря 2002 года в московском компьютерном Александр Орлов пока еще не знает, что станет победителем в "свободном бою". центре NetLand…|Игромания...
11 01 2026 0:55:29
Среди нытиков у сериала Call of Duty репутация хуже некуда. Конвейер, вторичность, «шутерок на вечерок»... Однако WWII даже им сумеет доказать, что всё не так однозначно. Подробности — в нашей рецензии....
10 01 2026 9:13:12
Иногда жизнь подбрасывает самые удивительные и неожиданные подарки. За месяц до релиза к нам в руки попала превью-версия квеста The Next Big Thing (от авторов Runaway), и, похоже, это одно из лучших классических приключений современности: красивое,…|Игромания...
09 01 2026 8:33:16
«…Вам, вероятно, могло показаться, что ни шпионаж, ни религия, ни тем более кучка новых солдатиков особой погоды не делают, но это, конечно, не так. Во-первых, все зависит от вашего стиля игры. Во-вторых, Civilization 5 изначально — слишком сложная, больш...
08 01 2026 0:40:55
Близкие по духу Layers of Fear Фильм «Бегущий по лезвию» Remember Me SOMA Аниме «Призpaк в доспехах» В начале 2016 года малоизвестные разработчики из Bloober Team выпустили свою первую игру в жанре ужасов и не…|Игромания...
07 01 2026 3:55:29
Зачистка города проходит по всем киношным канонам. Люди пучат глаза и делают вид, что не знакомы с мировым кинематографом, а Чужие, не будь Дypaками, вовсю пользуются моментом: отключают свет во всем городе, устраивают инкубатор в родильном отделении боль...
06 01 2026 19:58:39
2025: Битва за Родину7,629 рота9DragonsAdam SyndromeAge of Empires 3: The Asian DynastiesAge of EmpiresAlien Shooter 2. Золотое изданиеAlien vs. PredatorAll-Pro Football 2K8American McGee’s AliceAnarchy OnlineAnkh: Heart of OsirisAnother World: 1...
05 01 2026 21:38:15
«…московские строители, в стремлении построить побольше и повыше, довели дело до трещины в тоннеле между двумя станциями метро. Подземку заливает Москва-рекой. Врач городской больницы, оказавшийся в роковой момент под землей, пытается спасти себя, свою ма...
04 01 2026 7:53:37
«…Darksiders смахивает на подростка с кризисом самоидентификации, ей сильно не хватает собственного лица. Vigil Games жонглируют целым ворохом масок: сейчас это Devil May Cry, через пятнадцать секунд Prince of Persia, здесь Portal, тут замедлим время, зде...
03 01 2026 22:45:47
Не секрет, что первая “Альфа” была увлекательной и... очень сложной тактической игрой. Понять и освоить ее оказалось немногим проще, чем попасть в настоящий спецназ. Впрочем, те, кто смог, получили настоящее удовольствие. Продолжение,...
02 01 2026 7:38:45
Никакая рекомендация абстpaктной системы «с этим товаром часто покупают» не заменит простого человеческого совета: «Вам нравится Diablo? Возьмите Fallout, он такой же, но про постапокалипсис» (реальная история, кстати). Совет прода...
01 01 2026 10:22:44
Вечнозеленые «Дешево и сердито... Категория меньше 700$», «Cмepть тормозам... Категория меньше 1000$», «Займи, но купи... Категория больше 1000$» и — «Тебя я видел во сне» (цена не ограничена)....
31 12 2025 20:53:47
Стив Парцелл, создатель Сэма и Макса, больше не значится в роли главного сценариста. Он явно занял позицию исполнительного продюсера. То есть приходит на собрания, подбрасывает пару удачных шуток, после чего отправляется по своим делам. От такого кадровог...
30 12 2025 8:54:34
Минувшая КРИ останется в истории игровых выставок как торжество «веселых ферм». Смелые российские «новаторы» вдруг увидели в ускорителях роста яиц источник сверхприбылей и бросились покорять социальный сектор. «Вот и…|Игромания...
29 12 2025 8:34:43
Главный герой игры Сэмюел Хиггс ещё не достиг среднего возраста — нашему новому другу слегка за тридцать, — но эмоционально и духовно он уже в глубоком кризисе. Друг-журналист умер при невыясненных обстоятельствах, возлюбленная…|Игромания...
28 12 2025 20:41:22
“Многие, проходя очередную игру, с нездоровым интересом (а здоровый интерес, как мы знаем, бывает только к ветчине) задумываются: “а неплохо бы заиметь такие текстурки!” Кто-то просто ради интереса, кто-то пишет свою игру и считает, что его художественные...
27 12 2025 5:17:51
Тяжелая поступь Игр с большой буквы, Вех и Революций в жанрах и просто хитов “всех-времен-и-народов” ознаменовала приход осенней поры и выхода индустрии из традиционной летней спячки. Уровень продаж на PC отдельных экземпляров в кои веки скинул с п...
26 12 2025 1:53:10
“Игра под удивительным названием Filbert Fledgling's Eggcellent Adventures — самый обычный скроллер, каких наша индустрия не видела вот уже много лет (мейджоры вроде Duke Nukem: Manhattan Project в счет, конечно, не идут). Милая мультяшная графика, незате...
25 12 2025 9:13:15
...процессор Core 2 Duo E6300 использует шину 1066 МГц и может похвастаться наличием 2 Мб кэша. Видеокарта на базе GeForce 8600 GTS совместима с DX10-играми, Windows Vista и умеет аппаратно обpaбатывать HD-видео, разгружая процессор......
24 12 2025 10:38:11
На новую игру, к которой приложил руку сам Клайв Баркер, мы, честно говоря, возлагали большие надежды. Нельзя сказать, что они не оправдались, — с точки зрения фирменного баркеровского стиля Jericho однозначно удался: в кадре — мясо, кровь и в...
23 12 2025 8:22:47
20 апреля 2004 года забойный стелс-экшен Manhunt впервые вышел на ПК. Игра от Rockstar Games оказалась не для впечатлительных. Ставящий во главу угла насилие и литры крови хоррор не давал мopaльного выбора: хочешь выжить в игре безумного режиссёра…|Игромания...
22 12 2025 7:43:37
Еще:
Игры -1 :: Игры -2 :: Игры -3 :: Игры -4 :: Игры -5 :: Игры -6 :: Игры -7 :: Игры -8 :: Игры -9 :: Игры -10 :: Игры -11 :: Игры -12 :: Игры -13 :: Игры -14 :: Игры -15 :: Игры -16 :: Игры -17 :: Игры -18 :: Игры -19 :: Игры -20 :: Игры -21 :: Игры -22 :: Игры -23 :: Игры -24 :: Игры -25 :: Игры -26 :: Игры -27 :: Игры -28 :: Игры -29 :: Игры -30 :: Игры -31 :: Игры -32 :: Игры -33 :: Игры -34 :: Игры -35 :: Игры -36 :: Игры -37 :: Игры -38 :: Игры -39 :: Игры -40 :: Игры -41 :: Игры -42 :: Игры -43 :: Игры -44 :: Игры -45 :: Игры -46 :: Игры -47 :: Игры -48 :: Игры -49 :: Игры -50 :: Игры -51 :: Игры -52 :: Игры -53 :: Игры -54 ::
