Веб-окна и 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-файлах. Но и на этом тема веб-дизайна не закрыта мы вернемся к ней в одном из ближайших выпусков «Игромании» и расскажем вам о том, как превратить свой сайт в полноценный игровой портал.
После долгого перерыва мы возвращаем «Разумный компьютер». Рубрику переосмыслили, но кардинально менять не стали. Вас по-прежнему ждут отличные конфигурации на любой вкус и кошелёк. Но теперь в них не будет колонок, мышек,…|Игромания...
11 05 2025 5:25:28
«…Мы часто говорим, что современные игры вроде Mass Effect, Heavy Rain или Uncharted все больше походят на кино. По зрелищности, постановке и проработке сюжета они могут поспорить с лучшими творениями голливудских режиссеров. Однако говорить о стирании гр...
10 05 2025 13:29:41
«…Колышущиеся листья неизвестных науке папоротников, закаты на фоне идеально круглых вершин инопланетных холмов, какие-то светящиеся шары в воздухе и чудовища, состоящие из зубастой пасти и десятка глаз — каждый мир в Saira стоит того, чтобы его увидеть…»...
09 05 2025 14:42:57
AGENT X v2.3 www.planetunreal.com/agentx/eastfrontiers/ Automat Kalashnikov в действии. Модификация Agent X напоминает некий вариант Strike Force или Tactical Ops в миниатюре. Все признак...
08 05 2025 20:49:49
Самое чёткое впечатление от первой половины Shadow of the Tomb Raider — «ух ты, какая красотища!». Джунгли регулярно одаривают очередным пейзажем для рабочего стола, вода эффектно преломляет свет (иногда даже радуга…|Игромания...
07 05 2025 20:19:59
No One Lives Forever Редактор: DEdit.exe. Редактор входит как компонент в состав SDK — No One Lives Forever Editing Tools v1.0, появился в январе 2001 года.…|Игромания...
06 05 2025 17:38:10
Новый Pentium 4 2,2 гигагерц 7 января 2002 года корпорация Intel официально представила Pentium 4 2,2 гигагерц. Одновременно с этим событием на полки магазинов по в...
05 05 2025 6:45:36
Вечнозеленые “Дешево и сердито... Категория меньше 500, “Cмepть тормозам... Категория меньше 1000, “Займи, но купи... Категория больше 1000 и — “Тебя я видел во сне” (цена не ограничена)....
04 05 2025 17:22:15
Ангел — Overwatch Косплеер Алёна Сысуева и фотограф 412ART представили образ Ангел из Overwatch во мрачной вселенной Cyberpunk 2077 — эту новую итерацию героини они окрестили «CYBERMERCY 2077». Крысавчик…|Игромания...
03 05 2025 20:20:16
Видеомания * Игровая зона /темы CD: Neverwinter Nights: Hordes of Underdark — Diablo Remake * Call of Duty — Fusion Pack * Warcraft III: The Frozen Throne: Nature’s Call — Return of The Dragons; темы DVD: Battlefield Vietnam &mdash...
02 05 2025 16:31:25
Рэйвен — DC Открывает первую подборку июля Кристина Черниговская aka Kristy CHE в образе Рэйвен из вселенной комиксов DC. Фотограф — Кира Митенкова Охотница — Monster Hunter World Инна Семёнова aka Aliza щеголяет…|Игромания...
01 05 2025 18:52:53
Обычная квартира. “Хрущевка” или высотка, облезлые стены или евроремонт. Для всех нас квартира — это что-то обыденное, домашнее и безобидное. Дом — крепость, дом — защита в ночи, дом — надежный друг. И вдвойне жутко становится, если внезапно в доме п...
30 04 2025 9:45:18
Двадцать лет назад фильм «Ведьма из Блэр» стал настоящим культурным феноменом. Любительский ужастик, стилизованный под видеодневник пропавших в проклятом лесу студентов, не на шутку напугал зрителей, восхитил критиков и стал одной…|Игромания...
29 04 2025 23:37:13
Гигантская пицца с накладными усами в рембо-очках ушатывает толпы скелетов — вот что творится в Pizza vs. Skeletons. Не обращайте внимания на Дypaцкое название и странные скриншоты — это на удивление разнообразная и…|Игромания...
28 04 2025 11:23:25
“К Haegemonia подойдет определение вроде “еще одна игра по мотивам Imperium Galactica”. Игрок принимает бразды правления межзвездным фрегатом в чине младшего лейтенанта, постепенно растет в званиях, открывает новые миры и строит колонии, покупает новые ко...
27 04 2025 0:59:58
Что ж, мы наконец прошли сюжетную кампанию. Как и обещали в первых впечатлениях, выкатываем полноценную рецензию на Divinity: Original Sin 2. Даже сейчас, после финальных титров, нам сложно поверить, что всё это было не сном. Планы Larian на сиквел…|Игромания...
26 04 2025 9:45:10
Сегодня — День космонавтики. Полет Юрия Гагарина в космос, состоявшийся 12 апреля 1961 года, изменил облик мира и предопределил его технологическое развитие. В современном мире мы ориентируемся с помощью GPS-приемников в смартфонах,…|Игромания...
25 04 2025 2:21:13
Вертолеты придумали трусы! Вести обстрел врага, сидя внутри теплой кабины, может, и безопасно, но все равно как-то не по-мужски. Самая популярная игра по мотивам второй мировой, самая популярная комaндная сетевая игра, лучшая игра года, лучший…|Игромания...
24 04 2025 22:13:51
герой встает на стену, камера меняет угол обзора — стена становится полом. Человек-паук больше не ползает — он может бегать по ней или даже ездить на врагах, как на скейте. В итоге можно запросто позабыть, где верх, а где низ: камера...
23 04 2025 1:36:25
Мы уже неоднократно писали о масштабнейшем обновлении отечественной ролевки «Аллоды Онлайн», зовущемся «Эпизод II: Игра богов». В конце октября его планируется накатить на боевые сервера, а сейчас многое из того, о чем…|Игромания...
22 04 2025 10:16:24
«…машины в аркадном Hot Pursuit в кой-то веки действительно сильно отличаются друг от друга — некоторые экземпляры упopно едут только по прямой, а некоторые, наоборот, любят двигаться «боком». Манера их езды не похожа ни на одну из частей NFS, ни даже на...
21 04 2025 21:48:27
«…Первый запуск Windows 8 повергает в шок: ничего общего с прошлыми версиями. Новый интерфейс Metro — однотонный фон, на котором растянуто разноцветное одеяло, сшитое из ярких прямоугольных и квадратных лоскутов. В местном лексиконе это называется «плитки...
20 04 2025 15:37:35
Спустя три месяца после релиза у Borderlands 3 всё более чем в порядке: игра регулярно получает бесплатные контентные обновления, а на днях вышло первое крупное дополнение — Moxxi’s Heist of Handsome Jackpot. Несмотря на…|Игромания...
19 04 2025 4:31:26
«…Battlefield Play4Free — своеобразный ремейк Battlefield 2, работающий без всяких клиентов, прямо через браузер. Помимо этого, игре сделали легкий макияж, наживили систему прокачки почти как в Bad Company 2, а игроков пытаются coблaзнить платным контенто...
18 04 2025 16:30:40
«…Мельтешение на экране порой пробирает до мурашек, возня человечков вокруг укатившегося в реку яблока достигает каких-то запредельных драматических высот. Тут очень хочется вспомнить Михаила Булгакова. В «Мастере и Маргарите» у него было «потрясающее по...
17 04 2025 8:58:24
Тьма... И тут же яркий свет. Странно, я не чувствую запахов. А уши оглушают звуки стройки. Какое здесь ужасное солнце, я просто ослеплен. Но вот постепенно мои глаза кое-как привыкают к такому "освещению", и я наконец могу осмотреться. Б...
16 04 2025 14:22:51
В конце ноября, по приглашению студии Paradox Interactive, «Игромания» посетила город Бат на юге Великобритании. Со времён античности эти места знамениты целебными источниками, и именно здесь древние римляне строили термы…|Игромания...
15 04 2025 20:40:24
...прикрутили поддержку шейдеров: теперь можно создавать сцены, максимально имитирующие реальный мир, без помощи сторонних программ. Но это все же косметические изменения, ничего кардинально нового в них нет. Последнюю надежду мы возлагали на рендеринг: р...
14 04 2025 1:26:24
Мало того, что внутри системного блока установлено очень мощное железо, так компания-производитель еще и потрудилась над тем, чтобы обеспечить компьютер всем необходимым (клавиатурой, мышью, нужным софтом и т.д.)...
13 04 2025 1:58:46
...в 1941-1942 годах в северной Африке. Аккурат в тот самый момент, когда немецкие войска под комaндованием Роммеля громят британцев (которые, в свою очередь, отступают, сверкая пятками, и между делом готовят сокрушительный контрудар). Этим событиям посвя...
12 04 2025 8:33:51
— Добрый сэр, от ваших слов мне стало тяжело на сердце. Так вы говорите, что наша конница уступает лучникам, алебардщикам и другим пешим солдатам? — Нет, Найджел, мы также прекрасно знаем, что без поддержки даже самые лучшие пехотинцы не устоят против...
11 04 2025 6:11:48
«Снайпер. Цена победы» — новая игра из серии Sniper. В этот раз City Interactive предлагают нам рысью проскакать Вторую мировую в шкуре безымянного советского снайпера.Стрельба ведется в основном из винтовки Мосина с оптическим прицелом или из доб...
10 04 2025 0:19:43
«…Jagged Alliance: Back in Action — это не пошаговая тактика. Здесь нет очков хода. Вся игра проходит в реальном времени, но в любой момент можно включить паузу и дать бойцу цепочку приказов…»...
09 04 2025 16:21:26
«…на месте главная особенность оригинала — бесконечные карты. Почти во всех режимах вы сами выбираете маршрут, но будьте осторожны: простые пути в Insane 2 на деле оказываются самыми опасными. За очередным поворотом вас может поджидать табун заглянувших н...
08 04 2025 13:53:51
...у «Акеллы» был большой выбор. Тщательно исправить все недостатки или переделать игру с нуля? В итоге получилось нечто среднее: есть и исправления, и изменения, и — местами — старые проблемы. Идеология игры не изменилась, все-так...
07 04 2025 10:42:39
примерно шесть часов непрерывного забега через фекалии, гной, цепи, внутренности, какие-то секреционные выделения и черт знает что еще. Тут в принципе нет ни одного персонажа, с которым можно было бы себя ассоциировать. Все, у кого кожа не содрана, либо о...
06 04 2025 6:38:17
«…Отличное охлаждение, качественная сборка, возможность управлять вентиляторами, симпатичный и в то же время неброский дизайн, ну и, конечно же, куча прострaнcтва для будущих апгрейдов. Мы уверены, этот full tower переживет не одно поколение видеокарт и п...
05 04 2025 7:34:28
В «Панде» DreamWorks развили лежащую на поверхности идею: сделали мультфильм, пародирующий все известные фильмы про кун-фу разом, а заодно привлекли внимание зрителя к вымирающим пандам. Здесь есть все: головокружительные бои с использованием н...
04 04 2025 12:45:32
Через месяц стукнет 35 лет одной из самых влиятельных серий в истории индустрии — Metroid. Она стала родоначальницей целого поджанра, названного в её честь, и наряду с The Legend of Zelda ввела моду на нелинейность, бэктрекинг и прокачку в…|Игромания...
03 04 2025 9:22:30
«…Американ Макги — одна из самых известных личностей в игровой индустрии (не в последнюю очередь потому, что рядом с названием игры стоит его необычное имя) и прекрасный пример того, как американская мечта перерастает в нечто иное: усердная работа в автом...
02 04 2025 20:30:30
Ну ж был денек! Сквозь дым летучий Французы двинулись как тучи, И все на наш редут. Уланы с пестрыми значками, Драгуны с конскими хвостами, Все промелькнули перед нами, Все побывали тут. М.Ю. Лермонтов, «Бородино»18 брюмера восьмого года республи...
01 04 2025 8:51:44
Doom Eternal — шутер крайне динамичный и довольно хардкорный, особенно на высоких уровнях сложности. И если в случае с рядовыми перестрелками совет один — беги и стреляй, то в битвах с боссами все не так просто. Не волнуйтесь…|Игромания...
31 03 2025 14:28:35
В оригинальном хорроре Doki Doki Literature Club! было несколько концовок. В силу авторской задумки, играть можно было только на PC. Ремастер же сделал триллер, маскирующийся под визуальную новеллу, доступным и для обладателей консолей, а заодно…|Игромания...
30 03 2025 8:20:30
Компания «Новый диск» уже второй раз за последние полгода дает путевку в жизнь симуляторам экзотических видов спорта. В прошлый раз это был «Дайвер. В поисках Атлантиды», а теперь вот симулятор экстремального вида спорта. Что такое бейс-джампинг?...
29 03 2025 5:48:35
"...Как аддон, Splinter Cell: Pandora Tomorrow себя полностью оправдывает. Ну а каких-либо более серьезных изменений и нововведений нам стоит ждать уже от второй части игры..."...
28 03 2025 3:22:36
«…Crytek неплохо отработали тематику, сделав ставку на реализм и жестокость, и придумали несколько впечатляющих эпизодов, равномерно раскидав их по игре. Но в промежутках между ними игровой процесс навевает тоску. Если в продолжении (а это, уверены, вопро...
27 03 2025 3:45:36
«…Заброшенная клиника для душевнобольных. Из живых людей никого нет, а вот призpaков достаточно. Главная героиня, пока что безымянная, приходит в чувство прямо в этом мрачном месте. Дeвyшка, вооружившись одним только смартфоном, пытается найти выход из ле...
26 03 2025 17:20:28
...как и обещалось — массивная сталинская архитектура, гигантские элеваторы, Большой театр, метро и ободранная надпись «СЛАВА КПСС» на крыше. Штатным левел-дизайнерам можно вот прямо сейчас собирать вещи и подаваться куда-нибудь к Левело...
25 03 2025 5:41:49
фактически будем играть во все тот же World in Conflict, но его короткая история на этот раз дополнится советскими миссиями.Главное опасение, которое моментально возникает в голове у каждого, — будет клюква. В оригинале водки-балалайки удалось...
24 03 2025 6:21:55
Как всегда в конце недели — свежая подборка хорошего косплея для наших читателей. Дренейка — World of Warcraft Для дeвyшки с необычным ником Механический Вампир косплей дренейки из WoW стал самым популярным образом за…|Игромания...
23 03 2025 16:38:27
Еще:
Игры -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 ::
