Веб-окна и 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-файлах. Но и на этом тема веб-дизайна не закрыта мы вернемся к ней в одном из ближайших выпусков «Игромании» и расскажем вам о том, как превратить свой сайт в полноценный игровой портал.
В рубрике «Прямым текстом» авторы выражают исключительно собственное мнение, которое может не совпадать с мнением редакции (а может и совпадать). Они вольны делать это как угодно и в любом удобном для себя формате. Здесь можно…|Игромания...
24 04 2024 13:12:52
В умах разработчиков уже давно бродила мысль о создании синглплеерного варианта Counter-Strike. Мысль, на первый взгляд, странная. Для чего запихивать курицу обратно в яйцо, делая из самой массовой мультиплеерной игры — игру для одного человека?...
23 04 2024 9:51:31
...через десять минут вы гарантированно будете скакать по комнате на манер гитариста AC/DC, через двадцать — увлеченно показывать «козу», а через тридцать — отрастите метафорический, простите, хаер и убедительно начнете им трясти....
22 04 2024 15:54:37
Два месяца прошло с момента, как мы опубликовали предыдущий выпуск рубрики «Разумный компьютер», а значит, настало время обновить информацию. Что же, посмотрим, как изменилась ситуация на рынке за это время, что нового появилось и…|Игромания...
21 04 2024 21:39:34
Эдмунд Макмиллен — талантливый гeймдизайнер, давно сделавший себе имя в мире инди-игр. Он известен по хитам Super Meat Boy, The Binding of Isaac, Fingered и другим, менее именитым, но не менее странным проектам. И вот в июле внезапно, без…|Игромания...
20 04 2024 21:18:36
«…Действие Wargame: European Escalation разворачивается во времена холодной войны, периода, когда угроза ядерного удара была как никогда реальна. Французы предлагают взглянуть на возможные варианты развития событий посредством четырех кампаний, каждая из...
19 04 2024 1:11:24
Образцовая стратегия и киберспортивная дисциплина, образец для подражания на многие годы. Картину немного портит только изобилие сюжетных бaнaльностей в кампании и переигранные интонации актеров....
18 04 2024 17:47:13
Вы ждали продолжение Planescape: Torment почти восемнадцать лет. Теряли и обретали надежду, не верили, временами забывали... Но в какой-то момент ожидания обрели конкретную форму (не продолжение, а духовную наследницу) и имя — Tides of…|Игромания...
17 04 2024 11:40:53
«...Самым тяжелым из трех игровых тестов, разумеется, стал Crysis Warhead, на полную катушку использующий мощности современных видеоадаптеров. В рамках этого теста N260GTX Lightning вышла на уровень мощности базового GTX275, а в рамках дополнительного тес...
16 04 2024 14:26:42
Благодаря компании Maxis миллионы людей по всему миру наконец-то получили возможность прожить другую жизнь. Избавиться от проблем реального мира и с головой погрузиться в мир виртуальный — что может быть лучше? В The Sims 2 можно было пpaктически все —...
15 04 2024 17:44:47
“Слава тебе, великий бог гeймеров! Творцы из EA Sports услышали наши молитвы и предоставили возможность переназначать управление. Нужно ли еще что-то говорить? Все любители виртуального футбола рыдают от счастья и шлют в Канаду деньги и ценные подарки. Но...
14 04 2024 20:52:31
...В 2004 году на прилавках магазинов можно было найти десяток вариантов видеокарт на основе чипов серии R300. Много шума тогда наделали смелые эксперименты российских оверклокеров: путем несложных манипуляций паяльником они превращали Radeon 9500 с 128 м...
13 04 2024 7:58:32
«…Почти все время вы проведете в пустыне, но эта пустыня условная. Словами передать очень сложно, но на самом деле пустыня — это океан. Бескрайний океан с песчаными водопадами, водорослями, китами и медузами. Пустыня ведет себя по законам моря: по ней про...
12 04 2024 9:30:19
В романе Терри Пратчетта «Безумная звезда» есть замечательный персонаж Коэн-варвар. В молодости он совершил массу подвигов и еще при жизни стал настоящей легендой. Где-то на пике карьеры ему следовало бы погибнуть в бою, но…|Игромания...
11 04 2024 21:21:55
О номинации По-английски этот жанр называется очень просто — adventure. Емко и точно. А вот по-русски — сплошное мучение. Какая-нибудь «адвенчура» смотрится на письме еще хуже, чем звучит. А скажешь…|Игромания...
10 04 2024 9:44:45
Некогда великий и могучий Mortal Kombat уже много лет переваривается в собственном соку, безуспешно пытаясь напомнить миру о своем существовании. Даже те, кто когда-то часами просиживал штаны за «Сегой», пытаясь открутить рога Мотаро и…|Игромания...
09 04 2024 10:45:33
Разумеется, Е3 не обошлась без шикарных гоночных игр. Но на сей раз произошло нечто удивительное — почти во все из них можно было поиграть самому, а не просто посмотреть на презентации, как тот же Driver. Need for Speed: Hot Pursuit Конечно,…|Игромания...
08 04 2024 4:26:35
24 часа в сутки вопросы по созданию, модифицированию и вскрытию игр принимаются на адрес gamedev@igromania.ru и по SMS на короткий номер 1121 с префиксом #dev (в начале сообщения печатаете слово #dev, а затем, через пробел, сам вопрос). Стоимость…|Игромания...
07 04 2024 23:58:26
Уже больше двадцати лет сериалы переживают настоящий ренессанс: растёт их популярность, растут масштабы, а значит, растут и бюджеты. Сегодня мы вспомним десятку самых дорогостоящих проектов в новейшей истории телевидения. Будут здесь и проверенные…|Игромания...
06 04 2024 12:14:57
«…Главная особенность Combat Arms, отличающая игру от множества других клонов, — детально проработанные уровни. Местные локации изобилуют проходами, переходами и еле заметными потайными тропинками. Впервые оказавшись на уровне, вы можете даже не понять, к...
05 04 2024 16:32:36
«…Идея реализована на уровне «звуков ртом», а над дизайном поработали хорошо, даже перестарались. Иногда на глубины мерцающего города можно засмотреться. Он действительно впечатляет, но скорее как город будущего, а не место обитания программ. Уровень, в к...
04 04 2024 19:48:49
Эх, ну и ночка сегодня. Льет как из ведра. Хороший хозяин не то что собаку – курицу на двор не выгонит. Ну да вы не беспокойтесь, уважаемый, проходите поближе к огню, садитесь за стол. Сейчас дочка похлебки принесет. И эля. Жаркое у нас н...
03 04 2024 13:38:48
Весь 2007 год мы внимательно следили за тем, как русские снова становились главными злодеями в играх, как медленно умирали рельсовые шутеры, и теперь публикуем собственный дневник наблюдений....
02 04 2024 11:17:14
Если вы читали прошлый выпуск нашей орденоносной рубрики "В центре внимания", то уже знакомы с Soldier of Fortune 2: Double Helix. В июньском номере мы проводили экспресс-анализ беты SoF 2. И вот наконец случился релиз. Те, у кого свеж в памяти июньский н...
01 04 2024 15:40:13
Electronic Arts осталась верна себе. Need for Speed: Carbon — классическое продолжение серии NFS для фанатов и любителей гонок.Вопрос: Каковы минимальные системные требования к NFS Carbon?Ответ: Для запуска игры NFS Carbon понадобится примерно...
31 03 2024 9:38:39
есть еще один забавный факт — если раньше считалось, что PC являет собой образец инновационности и технологичности, то в последние годы (а с выходом новых консолей тенденция будет лишь усиливаться) эти лавры уверенно перемещаются в сторону приставок. Танц...
30 03 2024 11:43:28
Что? Два часа со Street Fighter 5 Где? Презентация в Лондоне В Capcom возрождению Street Fighter не пророчили оглушительный успех. Казалось, что жанр как таковой медленно, но уверенно загнивает, отказываясь адаптироваться к новым условиям. Для…|Игромания...
29 03 2024 1:36:13
24 часа в сутки любые ваши вопросы по играм принимаются по адресу games@igromania.ru или по телефону +7 (909) 981-30-47 (только SMS!). Если вы шлете письмо обычной почтой, сделайте на конверте пометку «Горячая линия: игры». Присылайте…|Игромания...
28 03 2024 0:12:36
«…звучат колонки прилично. Нет ни противного цыканья, так часто встречающегося на системах этого уровня, ни сильного смещения частот в нижнюю область. А если какие проблемы и обнаруживаются, их можно замаскировать при помощи доступных тут настроек баса, с...
27 03 2024 9:56:26
Одна из главных проблем Alias заключается в том, что она поставлена по одноименному сериалу и отчаянно надеется, что мы с вами этот самый сериал видели....
26 03 2024 17:47:53
...влечение к противоположному (и не только к противоположному) полу — обязательный элемент игры, без него — никуда. Прочие же скиллы уже отражают индивидуальность персонажа, а заодно и его владельца. Maзoхизм, садизм, садо-мaзoхизм, эксбицион...
25 03 2024 8:48:39
Spaceland стала первой игрой от российских разработчиков в подписке Apple Arcade. Пошаговая стратегия в научно-фантастическом сеттинге доступна за 199 рублей в месяц вместе с другими играми. Предыдущая игра Tortuga Team Braveland зацепила красивой…|Игромания...
24 03 2024 16:39:10
игра сосредоточена на сюжете, на персонажах и диалогах. Румата и антитоталитарный смысл уступили место аборигену, плутающему в сетях детективной интриги: кто же эти боги, которые все видят, но сделать ничего не хотят, откуда пришли и где их технологии? За...
23 03 2024 8:52:24
Wargame, по обыкновению, — это игра для спокойных и богатых временем людей. За ними никто не гонится, и есть возможность тщательно обдумать каждый ход. Здесь игрока встречает море статистики и тонны хаpaктеристик, а ведь за всем этим нужно след...
22 03 2024 4:11:14
Серия «18 стальных колес» — это совершенно аномальный (и в последние годы, к сожалению, единственный) полуфабрикат в жанре «симулятор дальнобойщиков». Берем груз, перевозим из одной точки в другую, строим бизнес, покупаем грузовики, боремся с наг...
21 03 2024 12:45:46
Серия Spellforce — пример того, как надо правильно скрещивать жанры. Тут и RTS в достатке, и RPG-элементы есть, и гoлyбиный хвост из куриного бедра не торчит. Успешная, в общем, игра, к которой обязательно стоит сделать продолжение. Так...
20 03 2024 3:29:56
Вижу странный шестиугольный знак. Он светится. Сейчас по нему проедусь... Ничего не происходит... Меня подбросило вверх... Когда же я приземлюсь? Да, загадка... Светится и подбрасывает... Бред...»...
19 03 2024 3:23:45
«...«Антихрист» — аллегорическая история о том, как семейная пара едет в лес для того, чтобы справиться с потерей своего сына, первый час прикидывается драмой про психоанализ, после чего врубает настоящую шокотерапию: отрезанные ножницами пoлoвые органы,...
18 03 2024 17:51:41
TeleFrag Gun www.planetunreal.com/luggage/code.html Впервые услышав о TeleFrag Gun, я с отвращением подумал: "еще одна недоделка". Подобные мутаторы появляются постоянно: авторы берут понравившуюся пушку UT, немножко изменяют ее хаpaктеристики и гор...
17 03 2024 11:55:42
Представляем вашему вниманию обновленный сводный список отечественных локализаций и проектов. Данная таблица состоит из двух разделов, которые, в свою очередь, разделяются на подразделы: 1) ПОСТУПИЛИ В ПРОДАЖУ. Сюда помещаются все те игры, кото...
16 03 2024 1:28:17
пароль может добыть даже человек, мало знакомый с хакингом. Страшно подумать, но, задав в YouTube поиск по связке слов «wow+account+hack», вы найдете более 300 видеороликов о том, как украсть чужой пароль. Разумеется, находится множество желаю...
15 03 2024 14:34:13
Полгода назад вышел фанатский ролик, собранный из фрагментов первых трех частей Assassin’s Creed. Сделан он был настолько качественно, что Ubisoft разместили ссылку на него в своей официальной новостной ленте. Страшно представить, сколько сил…|Игромания...
14 03 2024 21:50:20
вели обычную в общем-то супергеройскую жизнь: по пять раз в день спасали мир, вели со злодеями восхитительно идиотские диалоги, а в перерывах ковырялись в зубах фонарными столбами...
13 03 2024 22:58:47
Во что играли 5 лет назад Half-Life 2 Дата выхода: 2004 Жанр: Бесконечный полураспад Издатель/разработчик: Valve Software Пять лет назад Half-Life 2 стала единственной игрой, объединившей столь непохожих в игровых вкусах людей, как редакторы…|Игромания...
12 03 2024 9:23:31
 Ввиду того, что неутомимая Blizzard выпустила глобальный патч под номером 1.10, мы не могли обойти вниманием это событие и предлагаем вам статью, из которой вы узнаете о новом патче все — ну, или почти все. Патч 1.10: Бесплатный The…|Игромания...
11 03 2024 7:22:22
«…игра никак не пользуется тем, что ее главные герои — cмepтоносные куски металла. Авторы ориентировались на Gears of War минус укрытия — именно это у них и получилось. Роботы умеют стрелять, прыгать… кажется, все. Убитые враги распадаются на щепки и, роб...
10 03 2024 6:16:17
Jaws Unleashed должна была стать чертовски оригинальным и увлекательным проектом. Судите сами — чуть ли не впервые за всю историю создания «игр по фильмам» нам предлагают не дежурный шутер «по мотивам», а единственный в своем роде симулятор акулы! Если...
09 03 2024 0:42:52
как будто в самый разгар работ к разработчикам заявился продюсер и сказал: “Баста, выпускаем как есть”. Как есть — это когда главный злодей не может объяснить причины своей ненависти к главным героям, а последняя планета, Коррибан, целиком и полностью поз...
08 03 2024 15:20:37
Порадовало Огорчило запыленный инвентарь и излишняя акробатика пошли под нож; минимум изобразительных средств дает максимум выразительности картинке игры; у звукового дизайнера определенно прекрасный вкус; подлинные фотографии и документы…|Игромания...
07 03 2024 18:11:19
Купить игру|Всё о For Honor Зачем люди играют в соревновательные игры? Разумеется, чтобы побеждать! Но в случае с For Honor это не так-то просто — игра знаменита многообразной боевой системой, осваивать которую придется долго. Порог…|Игромания...
06 03 2024 2:21:31
Еще:
Игры -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 ::
