Веб-окна и 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-файлах. Но и на этом тема веб-дизайна не закрыта мы вернемся к ней в одном из ближайших выпусков «Игромании» и расскажем вам о том, как превратить свой сайт в полноценный игровой портал.
Основы и управление Залечь? Присесть? Да чего прятаться - враги-то уже кончились! Это стратегия в реальном времени. Комaнда здесь состоит более чем из 3-4 человек и подчас имеет техники больше, чем водителей...
25 04 2024 3:39:16
Слухи о новом крупном проекте от 1C Entertainment ходили уже около года. Несколько дней вряд ли что-то изменили бы, но компания почему-то не дотерпела до gamescom 2019 и анонсировала King’s Bounty II отдельно. То ли боялись потеряться на…|Игромания...
24 04 2024 23:14:45
Отношения ААА-издателей с рынком мобильных игр часто не клеятся (взгляните на анонс Diablo: Immortal), но у Bethesda в этом плане всё отлично. Fallout Shelter стала хитом, а на последней Е3 Тодд Говард представил новую мобильную игру студии…|Игромания...
23 04 2024 17:38:12
«…The Whispered World — это прежде всего волшебное сказочное приключение, уже потом — квест. Приключение, которому трудно найти современные аналоги. Тут нужно вспоминать старые адвенчуры от Sierra — серию King's Quest, Torin's Passage, Quest for Glory. А...
22 04 2024 22:47:48
Благодаря компании Maxis миллионы людей по всему миру наконец-то получили возможность прожить другую жизнь. Избавиться от проблем реального мира и с головой погрузиться в мир виртуальный — что может быть лучше? В The Sims 2 можно было пpaктически все —...
21 04 2024 20:34:29
Морриган и Лилит — Darkstalkers В прошлом году мы уже делились с вами отличным парным фотосетом по серии Darkstalker. И теперь мы снова видим эффектную пару Морриган и Лилит, но на этот раз в исполнении Алисы Арефьевой и…|Игромания...
20 04 2024 15:14:32
Условно-бесплатная FIFA World изначально создавалась с прицелом на Россию и Бразилию — две страны, где очень популярны компьютеры и футбол, а консоли с их дорогими играми — не особо. Конечно, можно возразить, что большая FIFA…|Игромания...
19 04 2024 6:32:52
"...Одни зовут их "псами войны". Другие - "дикими гусями". Третьи используют такие слова, которые цензура никогда не пропустит на журнальные страницы. В их истории навсегда запечатлен героический дедушка Боб Денар, который с помощью небольшого отряда мог...
18 04 2024 4:58:34
«…под стереотипной внешностью скрывается нечто абсолютно неожиданное. Если оперировать терминами того же аниме, то To the Moon по отношению к обычным jRPG — то же самое, что «Пять сантиметров в секунду» Макото Синкая по отношению к детсадовскому мылу типа...
17 04 2024 15:21:40
В середине февраля «СофтКлаб» и Bethesda провели закрытую презентацию фантастического экшена Prey. На ней нам показали самое начало игры и позволили познакомиться с основными механиками. Но дальше первых уровней так и не пустили.…|Игромания...
16 04 2024 11:36:14
Если вы из тех, кому понравилась Spelunky образца 2012 года, то рецензия на Spelunky 2 вам, в принципе, не нужна. Дерек Ю и студия Mossmouth не подвели — игра хороша. Так же хороша, как и предшественница. Только больше, глубже и сложнее…|Игромания...
15 04 2024 2:14:23
Задать нам вопрос можно письмом на games@igromania.ru или смской на номер 1121. Сначала вводите слово #games и только потом — текст самого сообщения. Стоимость одного сообщения — около трех рублей. Wrestle Jam '88, в…|Игромания...
14 04 2024 22:44:19
Серия Borderlands известна не только огромным арсеналом оружия, юмором и богатой вселенной, но и битвами с боссами. Для третьей части разработчики даже создали отдельную комaнду внутри студии, которая занималась исключительно дизайном крутейших…|Игромания...
13 04 2024 23:50:47
Говорят, экстремальный туризм опасен. Но что делать, если в обществе нашего старого знакомого Брайана экстремальным становится любой туризм? Смириться и выпрыгнуть из самолета с парашютом за плечами, чтобы всякие нехорошие люди использовали тебя как м...
12 04 2024 11:51:19
В последнее время в России, да и во всем мире, наблюдается мода на японскую культуру. Игровая индустрия — не исключение. Вдохновленные разработчики быстренько наклепали игр про всяких покемонов и прочее аниме. Про исконную культуру этой страны забыл...
11 04 2024 2:34:49
«…Ли Петти, арт-директор компании, увидев, как его дочь играет с матрешками, решил, что русские деревянные бабки идеально подходят для современного квеста (с тремя измерениями и гeймпадом). Так и вышла Stacking — игра, в которой добрые матрешки сражаются...
10 04 2024 12:54:41
мы перезапускаем рубрику «В центре внимания» в новом формате. Теперь она посвящена не игре, а важному индустриальному явлению, которое объединяет между собой сразу несколько проектов. Темы могут быть самые разные: «пять пристойных игр по...
09 04 2024 12:51:32
«…Главный интерес в игре, безусловно, представляет наличие множества вариантов для взаимодействия с окружением и создания предметов. Ключевой инструмент на корабле героя — специальный 3D-принтер, при помощи которого можно воссоздавать те найденные предмет...
08 04 2024 8:41:20
...обязательно попадется крепкий орешек — вымышленный теннисист, болтающийся в двенадцатой-пятнадцатой десятке мирового рейтинга. На первых минутах даже не думаешь об умопомрачительных ударах в дальний угол впритирку с линией, лишь бы во время своей...
07 04 2024 12:11:23
Wargaming подошли к празднованию предстоящего юбилейного Дня Победы с размахом. Под крышей спорткомплекса «Олимпийский» компания устроила грандиозное мероприятие, ориентированное не только на поклонников игр, но и на посетителей,…|Игромания...
06 04 2024 11:27:25
«…Killzone: Mercenary как нельзя лучше иллюстрирует трудовые будни наемников. Частникам поручают самую тяжелую работу и пpaктически в одиночку отправляют в горячие точки, где многие задания выглядят чистым самоубийством. Но Даннер и его товарищи не жалуют...
05 04 2024 11:13:40
единственный современный 3D-файтинг на PC, единственный PC-файтинг с поддержкой онлайновой игры и единственная надежда человека, который хочет бесплатно подраться в онлайне. Чтобы поиграть в Dead or Alive 4, нужен Xbox 360, лицензионная версия игры и плат...
04 04 2024 1:50:48
а есть ли такая онлайновая игра, которая способна составить конкуренцию лидирующей троице (Ultima Online, EverQuest, Asheron’s Call), при этом соблюдая три условия: при красивой графике показывать достаточное количество FPS, не тормозить даже при 14000 би...
03 04 2024 21:36:35
Чего стоит ждать от симулятора пляжного волейбола? Собственно, волейбола, говорите? Ха, как бы не так! Прежде всего — красивого женского тела в больших количествах. И это с успехом доказала игра Dead or Alive Xtreme Beach Volleyball, кот...
02 04 2024 18:45:41
Почти за месяц до E3 компания Bethesda пригласила нас в Швецию на анонс тогда ещё неведомого AAA-шутера. Но уже через пару дней после этого анонс за них сделал канадский Walmart. Оказалось, что речь о сиквеле Rage — игры id Software 2011…|Игромания...
01 04 2024 6:41:14
Купить игру|Всё о Total War: WARHAMMER 2 Вселенная Молота Войны (не та, где Бог-Император, а где Сигмар) славится суровой мрачностью. Героев здесь почти не бывает, а обычный человек живёт изо дня в день с пониманием, что в любой момент из канализации…|Игромания...
31 03 2024 16:46:36
Как первые, так и вторые "Демиурги" — стратегия карточного типа. Бои там реализованы так: у обоих участников схватки есть колода карт. Карты можно превращать в существ или заклинания. Для этого нужен эфирный ресурс, который не накапливается (неизрас...
30 03 2024 9:45:15
В своей новой игре The Creative Assembly попытались средствами компьютерной игры рассказать историю одного из самых амбициозных диктаторов в истории Европы....
29 03 2024 14:19:58
На этой неделе игровая индустрия предлагает нам построить карьеру в Mount & Blade 2: Bannerlord; покушать клюквы в ремастере Modern Warfare 2; оказаться в полной изоляции с шутером Total Lockdown, поиграть в салочки с Немезисом в ремейке…|Игромания...
28 03 2024 22:25:25
«…из обычной GTA-истории про приключения прекраснодушного бандита игра превращается в циничную криминальную комедию наподобие фильма Snatch Гая Ричи: в центре повествования отнюдь не Нико Белич, а маленький, но очень ценный мешочек с бриллиантами, за кото...
27 03 2024 10:32:41
О номинации 2016 год преподал нам немало ценных уроков, и один из них: нельзя верить шумихе. Все мы за последние двенадцать месяцев набили достаточно шишек, чтобы не совершать эту ошибку вновь. И, чтобы в новом году не бежать сломя голову…|Игромания...
26 03 2024 13:21:29
24 часа в сутки вопросы по созданию, модифицированию и вскрытию игр принимаются на адрес gamedev@igromania.ru• • • Я несколько раз встречал странное название “ragdoll”. Я так понимаю, оно как-то связано с…|Игромания...
25 03 2024 0:14:22
«…Двадцать второго марта, холодным бостонским утром, на улицы города вышли десятки тысяч людей и целенаправленно устремились в сторону порта — туда, где между небоскребами и кранами белела крыша громадного выставочного центра. Из-за сотен такси центр вста...
24 03 2024 22:24:53
Статьи "Управление во время битвы", "Битва"...
23 03 2024 10:18:10
В редакцию «Игромании» прислали несколько пресс-релизов, посвященных новым дополнениям для популярных игр. Судя по всему, игроков вскоре ждет кое-что исключительное!...
22 03 2024 21:26:12
СМАРТФОН || слайдер || 106,5x55x20 мм || 140 г || Li-Ion 1200 мА*ч || 220 ч / 3,7 чСОТОВАЯ СВЯЗЬ: 2G: GSM 900/1800, 3G: UMTS/HSDPA 900/2100ДИСПЛЕЙ: 2,8’’ TFT, 262K , 320x240ПРОЦЕССОР: OMAP 2430ПАМЯТЬ: 16/8 Гб встроенной памяти, 128 Мб...
21 03 2024 14:57:35
В апреле студия Cold Symmetry представила Mortal Shell: на удивление стильный (по крайней мере, по трейлерам) soulslike-экшен. Всё и так выглядело занятно, но масла в огонь подливал ещё и состав студии: сотрудники коллектива приложили руку к…|Игромания...
20 03 2024 8:11:42
Игр для детей сейчас такое огромное количество, что и не знаешь, за что хвататься. Большинство из них, особенно если говорить о мобильных проектах, — бессмысленные тайм-киллеры, которые в лучшем случае отвлекут ребёнка на несколько часов, а…|Игромания...
19 03 2024 11:41:14
ФОРМУЛА ИГРЫ ZombiU 40% превращений в зомби 30% Лондона 29% фишек Wii U 1% Dead Island В последнее время cмepть в видеоиграх сопряжена с загрузкой сохранения или контрольной точки, после чего вашему персонажу дают второй (третий,…|Игромания...
18 03 2024 22:58:28
Day of the Tentacle, Sam and Max Hit the Road — золотое наследие LucasArts, мало знакомое нынешнему поколению игроков. Таких квестов больше не делают. А если и делают, то малоизвестные комaнды, вроде итальянской ProGraph Research....
17 03 2024 15:59:10
...недавно в Сети появилась бета-версия официального «чернобыльского» инструментария для создания мультиплеерных карт. Конечно, модмейкеры тут же принялись за сборку уровней и дополнений. По ходу дела выявились различные баги и недочеты, но на...
16 03 2024 2:50:32
В первую очередь обыгрываются самые привычные для компьютерных игр свойства. Враги стоят у оголенного провода — слегка затопим помещение, и их ударит током. Мощное течение направлено в сторону мальтусианцев — разольем бензин, кинем спичку, и о...
15 03 2024 11:19:25
Десятого апреля выйдет первая часть ремейка Final Fantasy VII. Для простого гeймера это наверняка будет одна из самых красивых и зрелищных игр года, но для давних поклонников серии это что-то гораздо большее. Это возможность вернуться в знакомый с…|Игромания...
14 03 2024 3:42:28
"...Есть все основания полагать, что обратная тактильная связь вскоре повторит успех звуковых карт для персональных компьютеров — ибо одно время даже простенький Sound Blaster считался непозволительной роскошью и нерациональной тратой денег..."...
13 03 2024 9:44:22
Появление RX Vega 64 и RX Vega 56 вряд ли напугало NVIDIA, но компания должна была подготовить ответ. Им стала GeForce GTX 1070 Ti. Давайте посмотрим на неё и решим, стоит ли карта своих денег и нашего с вами внимания. Внешне К нам на тесты попала…|Игромания...
12 03 2024 21:42:48
«...уникальным туннельным гeймплеем. Если враг припер к стенке, можно оперативно просверлить в ней дыру и скрыться. Если вы преследуете большую группу противников, можно приглушить двигатели и самым тихим буром выдолбить небольшое дупло, чтобы устроить за...
11 03 2024 5:14:12
"...в этот раз мы рассмотрим программы, помогающие ускорить работу системы и повысить ее стабильность, а также открывающие доступ к скрытым возможностям Windows. Начнем мы, пожалуй, с программ для автоматической оптимизации..."...
10 03 2024 17:53:22
«…Проблема Absolute Power в том, что она очень похожа на типовые контент-паки для любой из частей The Sims: «ничего нового мы, извините, не добавили, но смотрите-ка — у нас есть пять новых гобеленов!». Разборки с радиоведущим и партия лоялистов — это, кон...
09 03 2024 19:13:56
Очередное творение от Electronic Arts на тему военных действий нашего века, на сей раз это война американцев во Вьетнаме. Боевые действия происходят на территории Вьетнама во времена 60-х и начала 70-х годов. К слову, soundtrack к игре выде...
08 03 2024 1:42:36
САМОЕ СВЕЖЕЕ ЖЕЛЕЗО: Prestigio DataRacer III («Феррари» на проводе) * GeIL DDR3 Black Dragon Triple Channel (игровой интеллект) * Scythe Grand Kama Cross (V-образный кулер на тепловых трубках) * Mad Catz Cyborg R.A.T. 7 (игровая мышь — и Гулливеру, и лили...
07 03 2024 9:49:49
Еще:
Игры -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 ::
