Влад мержевич верстка веб страниц. Интервью с владом мержевичем. Продвинутые уроки по HTML и CSS

Очевидно, собственный эксперимент разработчики id Software тоже признали не слишком удачным. И теперь мы видим весьма знакомую игру как в 90-х, с поправкой на другие технологии.

Готовность Альфа, готовность Бета

Лично я не смог поймать волну восторгов от Doom в те годы: мне как-то больше по душе были стратегии, данный жанр казался более богатым на возможности и интересные игровые ситуации. Однако, по присущей человеку любознательности, нравится вникать в исторический контекст каких-либо явлений в актуальное время их расцвета, да и для академического интереса с чем-то познакомиться тоже занимательно.

Попробовать бету было решено в основном, чтобы прочувствовать, хотя бы приблизительно, готовящуюся игру, оценить её техническую базу (как-никак очередной новый движок id tech от Кармака): справится ли нынешний ПК всё это дело тянуть?.. Отмечу, что пока нет доступа к широкому списку настроек графики, так что полноценно оценить технологии игры не дали. Не пингует, не лагает - сетевой код работает хорошо. Графика - симпатичная, но мне не понравился эффект размытия при повороте камерой, для себя решил его отключить вовсе. В остальном игра шла неплохо, но думаю пока рано судить о технических возможностях нового DooM "а и потенциальной нагрузке на систему, придётся ждать уже полноценного релиза именно одиночной игры.

Дальнейшее погружение в опции беты открывает кучу всего: настройку внешнего вида аватара, настройку внешнего вида оружия, настройку наборов оружия (в переводе назвали "выкладкой") для дальнейшего выбора перед боем, подбор своей триумфальной анимации (или насмешки), систему заработка всяких достижений, опыта и роста в уровне, с открытием при этом новых элементов украшения аватара и оружия и новых пушек. Словом, разработчики попытались всячески удержать игрока в сетях игры посредством тяги многих геймеров холить и лелеять своё виртуальное альтер-эго. И неважно, как будет каждый матч проходить - ведь всё равно всегда стабильно свою порцию очков получишь (сотней больше, сотней меньше - это исключительно дело времени).

DooM - впечатления по бета-версии

DooM - впечатления по бета-версии

Итак, навели лоску или глянца своим доспехам и оружию, включаемся в поиск игры. Сейчас не будем дотошно разбирать вопрос концепции мультиплеера DooM - бета есть бета: для ознакомления доступны две карты и два режима игры. Захват движущейся точки и привычный всем deathmatch. Фишкой является возможность превращения в демона - в данном случае ревенанта. Этакий режим берсерка - игрок, ставший демоном, быстро убивает противников, но длится превращение не слишком долго. Демона можно и завалить, тогда им станет противник. При слаженных действиях команды демон может успеть несколько раз перейти из рук в руки.

DooM - впечатления по бета-версии

DooM - впечатления по бета-версии

Как бы там ни было, подключение к карте состоялось и игра началась. Первое, что удивляет - эффект дежавю, так как больше всего мультиплеер DooM похож на реинкарнацию Quake III: Arena. Довольно мелкие и тесные карты, много бонусов, которые после сбора со временем восстанавливаются. Правда изменили поведение персонажа: нету возможности сделать знаменитую "распрыжку" или "рокетджамп". Знающие люди ещё отмечают чувство влияния на игру Halo - это накладывает отпечаток на игровую камеру и на то, что у играющих появлялось желание отбросить мышку и взять геймпад - не будем забывать, что DooM не на одном ПК выходит в этот раз, вот и получается, что игра гибридная. Тяготеет то ли к любителям мыши-клавиатуры, то ли к игрокам с геймпадами.

DooM - впечатления по бета-версии

DooM - впечатления по бета-версии

Отображение числового урона по противнику можно отключить в опциях

При этом сами матчи воспринимаются несколько пресно. Правда я не такой уж знаток и ценитель мультиплеера, может играет роль и то, что интереса к сетевым режимам игр обычно и не проявлял (в приоритете сюжетная часть игр)... Другое дело проекты изначально сделанные сетевыми: с сокурсниками со смаком поигрывали в Unreal Tournament 1999 года - азарт и драйв были. Для себя открыл Team Fortress 2 - понравились стиль и игровая механика. В обоих случаях у игр была какая-то своя искра и продуманный баланс. Здесь же чего-то не хватает, отчего получаем хрестоматийный эффект "фальшивых ёлочных игрушек". Вроде на поле боя всё бабахает, кружится и крутится колесо войны, да что-то не заводит. Скорей всего дело в совокупности не проработки ряда разных деталей. Например, хромает передача ощущения от оружия (сложно сформулировать - скажем слабо воспринимаются отдача, эффекты ударной волны), да и сам баланс перестрелок хромает, впрочем это ещё поправимо. Кроме того кажется, что угол обзора камеры узковат - в сравнении с другими экшенами было сложнее сориентироваться на поле боя. Комментатор - ску-учный, без артистического запала (как в озвучке UT 1999 от Фаргуса, например) просто сообщает что-либо связанное с ходом игры. На английском не шибко лучше.

DooM - впечатления по бета-версии

Момент становления ревенантом не успеваешь как следует просмаковать, главное бить, бить!, Пока можно много фрагов забрать

DooM - впечатления по бета-версии

Анимации добиваний эффектны, однако в пылу схватки как-то надёжнее стрелять, чем ударить прикладом. Дело привычки

Помогает ли игре прокачка? Вряд ли мешает - у неё явно декоративная роль. За новые уровни и достижения вы получите больше возможностей для изменения внешнего вида вашего виртуального воплощения и оружия. Настройки подробные и включают отдельные части брони - ноги, руки, шлем. Их можно не только раскрасить, но отрегулировать эффекты потёртости, заляпанности грязью и прочую мишуру. Правда любоваться будет почти некогда в пылу-то перестрелок - не всё ли равно, как воон тот солдат вырядился?.. Но открыть новые виды оружия конечно захочется. Так, изначально доступна осколочная граната, которая прилипает к месту куда попала (лучше, конечно, попасть в противника - подрыв гарантированно рвёт цель в клочья), а на 3 уровне дадут гранату-вампир (красноречивое название). Ещё полезны своего рода перки, так называемые устройства взлома. Они обладают небольшими полезными эффектами, например есть указатели местоположения усилений, или придающие игроку дополнительную броню. Устройства действуют небольшое время (одну-две минуты), выдаются в награду по итогу каждого матча. В общем, кое-какой смысл в здешней прокачке имеется.

DooM - впечатления по бета-версии

DooM - впечатления по бета-версии

В данном обзоре будет проведено сводное тестирование видеокарт и процессоров в игре DOOM. Напомним, что сама игра увидит свет 13 мая этого года на PC и приставках текущего поколения.

Знакомство c бета-версией DOOM (2016) и планы разработчиков на ближайшее будущее

В начале апреля издательство Bethesda провело закрытый бета-тест среди ограниченного количества игроков. Благодаря компании Nvidia, на это мероприятие попал и я.

Целью ЗБТ была проверка мультиплеерной составляющей игры на ограниченном количестве карт. Все доступные локации отличились множеством укрытий и разветвлений, благодаря чему подходили для применения разных тактик командной игры. На полях сражений разбросаны аптечки, броня, а также разные типы оружия. Помимо них, в случайной локации появляется руна демона, позволяющая превратиться в огромное чудовище со спаренным ракетометом и реактивным ранцем. Несмотря на то, что данный противник довольно мощный, убить его не составляет никакого труда. Иными словами, дисбаланса в игру он не вносит.

В игре были доступны несколько типов оружия, в том числе плазменная винтовка, дробовик и ракетница. Есть и пара видов снаряжения: телепорт и осколочные гранаты. В распоряжение игроков поступает два типа оружия и одно снаряжение. Важно, что независимо от выбранного сочетания оружия и снаряжения темп игры не изменялся. Кроме основного режима стрельбы есть модификатор, который способен дистанционно управлять зарядом ракетницы или улучшает прицеливание для шотгана, убивая всех врагов с одного выстрела.

С выходом игры ей, скорее всего, присвоят рейтинг 16+, поскольку каждое попадание во врагов сопровождается кровью и отлетающими конечностями. В ближнем бою, если у соперника осталось немного здоровья, можно совершить зрелищное добивание, сопровождающееся большим количеством крови. Несмотря на то, что локации обширные, а игроков на них не так уж и много, в DOOM всегда кипят активные бои. Даже если кто-то пытается спрятаться в укромном местечке, его быстро находят. А за счет хорошо оптимизированной и продуманной структуры карт битва не затихает весь раунд.

В целом геймплей в игре довольно динамичный: персонажи быстро бегают и прыгают, а оружие разит скоро и неотвратимо. DOOM доставляет кучу удовольствия и драйва, а каждый раунд не похож на предыдущий. При этом нынешний проект сильно отличается от своего предшественника и далеко не факт, что понравится поклонникам «старой школы». По механике PvP он не похож на Call of Duty, Battlefield и Titanfall. Здесь нужно помнить, что здоровье не восстанавливается, а соперник может буквально свалиться на голову.

Отметим, что графическая составляющая игры не хватает звезд с неба, но при этом ее нельзя назвать устаревшей. Все современные технологии на месте, текстуры не замылены – этого более чем достаточно. Впрочем, главную роль будет играть отнюдь не графика. Будем надеяться, что у разработчиков получится сделать не только мультиплеер, но и интересную одиночную компанию.

Пробежимся немного по планам разработчиков. Они обещают, что DOOM будет держаться на трех основных китах, которые сделают из игры шедевр, а не очередной проходной шутер.

• Первый кит – масса злых демонов, которые будут то и дело появляться на каждом шагу.
• Второй кит – наличие внушительного арсенала вооружения, которое позволит размазывать этих монстров по стенам на мельчайшие атомы.
• Последним китом является темп игры и активные действия.

Новый DOOM перенесет игрока на Марс – единственную планету, на которой ученые надеются найти жизнь. Подразделения Объединенной аэрокосмической корпорации (ОАК) нашли на планете неизвестные странные знаки. В итоге именно они открыли дверь в ад.

К слову, несмотря на наличие кооператива, пройти игру можно будет лишь самостоятельно. Это подтвердил и исполнительный продюсер Марти Стэттон. Однако с друзьями можно будет проходить пользовательские карты, созданные с помощью нового редактора SnapMap. Тем не менее, ходят слухи о возможном появлении в игре кооперативного режима прохождения. Так что не будем сбрасывать их со счетов.

Разработчики очень хотят сохранить атмосферу серии. И новый DOOM будет базироваться на описанных выше трех китах, благодаря чему станет кровавым хардкорным шутером. Изначально создание игры свелось к тому, что она напоминала современные хиты Call of Duty и Battlefield. Однако при этом полностью уничтожалась неповторимая атмосфера DOOM. В итоге создатели решили отказаться от такого направления, ведь никому не интересна очередная копия. Разработка свернула в сторону DOOM – той самой игры, которую ожидают поклонники. И теперь атмосфера все больше напоминает Quake или Painkiller – более близкие по духу проекты.

Будем надеяться, что в момент релиза игры мы увидим тот самый старый добрый DOOM, приправленный парой новых фишек.

Системные требования

Минимальные системные требования:

• Процессор: Intel Core i5-4690 @ 3300 МГц или AMD FX-8320 ВЕ @ 3500 МГц.
• Оперативная память: 8 Гбайт.
• Видеокарта: Nvidia GeForce GTX 660 2048 Мбайт или ATI Radeon HD 7870 2048 Мбайт.

• Операционная система: Windows 7 (SP1), Windows 8/8.1 и Windows 10 (только 64-разрядные системы).
• Процессор: Intel Core i7-6700 @ 3400 МГц или AMD FX-8350 ВЕ @ 4000 МГц.
• Оперативная память: 8 Гбайт.
• Свободное место на HDD: 6 Гбайт.
• Видеокарта: Nvidia GeForce GTX 780 3072 Мбайт или ATI Radeon R9 290 4096 Мбайт.

Сводное тестирование видеокарт

Тестовая конфигурация

Тесты проводились на следующем стенде:

• Процессор: Intel Core i7-4790K (Devil"s Canyon, L3 8 Мбайт), Turbo Boost / Hyper Threading - off - 4000 @ 4700 МГц;
• Материнская плата: GigaByte GA-Z97X-UD5H, LGA 1150, BIOS F8;
• Система охлаждения CPU: Corsair Hydro Series H105 (~1300 об/мин);
• Оперативная память: 2 x 4096 Мбайт DDR3 Geil Black Dragon GB38GB2133C10ADC (Spec: 2133 МГц / 10-11-11-30-1t / 1.5 В), X.M.P. - off;
• Дисковая подсистема №1: 64 Гбайт, SSD ADATA SX900;
• Дисковая подсистема №2: 1 Тбайт, HDD Western Digital Caviar Green (WD10EZRX);
• Блок питания: Corsair HX850 850 Ватт (штатный вентилятор: 140 мм на вдув);
• Корпус: открытый тестовый стенд;
• Монитор: 27" ASUS PB278Q BK (Wide LCD, 2560x1440 / 60 Гц).

Видеокарты:

• Radeon R9 Fury X 4096 Мбайт - 1050/500 @ 1150/500 МГц (Sapphire);
• Radeon R9 Fury 4096 Мбайт - 1000/500 @ 1100/500 МГц (Sapphire);
• Radeon R9 Nano 4096 Мбайт - 1000/500 @ 1025/500 МГц (PowerColor);
• Radeon R9 390X 8192 Мбайт - 1050/6000 @ 1160/6500 МГц (Sapphire);
• Radeon R9 390 8192 Мбайт - 1000/6000 @ 1140/6500 МГц (ASUS);
• Radeon R9 380X 4096 Мбайт - 970/5700 @ 1150/6500 МГц (Gigabyte);
• Radeon R9 380 2048 Мбайт - 970/5500 @ 1100/6500 МГц (Sapphire);
• Radeon R7 370 2048 Мбайт - 975/5600 @ 1180/6800 МГц (PowerColor);
• Radeon R7 360 2048 Мбайт - 1050/6500 @ 1200/6800 МГц (Gigabyte);


• GeForce GTX Titan X 12288 Mбайт - 1076/7012 @ 1390/8100 МГц (MSI);
• GeForce GTX 980 Ti 6144 Mбайт - 1076/7012 @ 1420/8100 МГц (Zotac);
• GeForce GTX 980 4096 Mбайт - 1216/7012 @ 1440/8000 МГц (Palit);
• GeForce GTX 970 4096 Mбайт - 1178/7012 @ 1430/8000 МГц (Zotac);
• GeForce GTX 960 2098 Mбайт - 1178/7012 @ 1450/8000 МГц (Gigabyte);
• GeForce GTX 950 2098 Mбайт - 1188/6600 @ 1480/8000 МГц (Palit);


• GeForce GTX 750 Ti 2048 Mбайт - 1085/5400 @ 1220/6600 МГц (GigaByte);
• GeForce GTX 750 2048 Mбайт - 1085/5000 @ 1210/6200 МГц (Palit).

Программное обеспечение:

• Операционная система: Windows 7 x64 SP1;
• Драйверы видеокарты: Nvidia GeForce 364.72 WHQL и AMD Radeon Software Crimson 16.3.2 WHQL.
• Утилиты: Fraps 3.5.9 Build 15586, AutoHotkey v1.0.48.05, MSI Afterburner 4.2.0.

Инструментарий и методика тестирования

Для более наглядного сравнения видеокарт и процессоров игра, используемая в качестве тестового приложения, запускалась в разрешениях 1920 х 1080 и 2560 х 1440.

В качестве средств измерения быстродействия применялись утилиты Fraps 3.5.9 Build 15586 и AutoHotkey v1.0.48.05. В игре замерялись минимальные и средние значения FPS. VSync при проведении тестов был отключен.

Мониторинг использования оперативной и видеопамяти

Комплектующие тестировались при следующих настройках графики:

• Сглаживание - TSSAA.
• Размытие в движении - высокое.
• Хроматическая аберрация - включена.

Прежде чем приступить к тестам видеокарт и процессоров, проведем мониторинг использования оперативной и видеопамяти в данной игре.

Использование видеопамяти и оперативной памяти

Видеопамять (стандартные настройки)

Оперативная память

Включите JavaScript, чтобы видеть графики
Мбайт

Результаты тестов: сравнение производительности

Теперь перейдем непосредственно к тестам графических ускорителей.

Сводные диаграммы результатов тестов одиночных видеокарт

1920х1080

2560х1440

Влад Мержевич

Приемы верстки

веб-страниц

Влад Мержевич. Приемы верстки веб-страниц

Вступление

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

Верстка веб-страниц – не просто знание приемов и хитростей создания различных эффектов. Это умение предугадывать результат действий с элементами веб-страниц и понимание особенностей различных браузеров, которые могут по-разному показывать сайт. Работа верстальщика сродни работе шеф-повара, который точно знает, какие ингредиенты и в каком количестве нужно добавить, чтобы улучшить вкус конечного блюда. Вооружившись простыми, но действенными рецептами верстки, которые даются в этой книге, вы сможете создавать впечатляющие сайты. Добро пожаловать на кухню верстки веб-страниц!

Благодарности

Выражаю признательность своему учителю и наставнику Петру Никифоровичу Сильченко за его неоценимые советы по написанию научных работ. Благодаря ему, стиль и удобочитаемость текстов улучшились.

Также хочу сказать спасибо Егору Москвичеву за множество полезных рекомендаций по содержанию сайта, которые он мне дал.

Поддержка

Ваши замечания, предложения и вопросы по книге направляйте автору по адресу электронной почты [email protected] .

Все описанные в книге материалы и примеры можно посмотреть в Интернете на сайте автора по адресу:

http://www.htmlbook.ru/layout

Исправления и дополнения по книге, а также новые версии доступны по адресу: http://www.htmlbook.ru/book

Влад Мержевич. Приемы верстки веб-страниц

1. ОСОБЕННОСТИ ВЕРСТКИ ВЕБ-СТРАНИЦ

При верстке веб-сайта, несмотря на некоторую аналогию его с печатными изданиями, следует все же помнить, что мы имеем дело с компьютерным текстом, который зависит от ряда факторов. Учет этих особенностей необходим для создания удобных для восприятия и пользования материалов, которые будут выглядеть одинаково в различных браузерах.

Ширина страницы зависит от размера и разрешения монитора

Данная особенность породила метод верстки веб-страниц, основанный на использовании таблиц с невидимой границей. Идеология HTML рекомендует использовать таблицы только по их прямому назначению, т.е. для создания именно таблиц. Но что делать, располагая столь слабыми средствами верстки, приходится использовать разные ухищрения.

Все многообразие дизайна можно свести к двум типам: «фиксированный» и «резиновый» дизайн.

При «фиксированном» дизайне макет страницы создается на основе таблиц или слоев определенной ширины. Выбор ширины зависит от ориентации на определенное разрешение монитора пользователей. Так, для разрешения 640Ч 480 пикселей размер таблицы следует брать не более 619 пикселей. Для всех пользователей сайт, построенный на таком макете, будет отображаться корректно, но при больших разрешениях оказывается слишком много пустого места. Поскольку наиболее популярным среди пользователей Интернета является разрешение 800Ч 600, разработчики сайтов ориентируются именно на него и делают таблицы шириной 700-770 пикселей.

Для «резинового дизайна» характерно использование таблиц с шириной, заданной в процентном отношении от ширины браузера. Достоинства – используется все доступное пространство веб-страницы, недостаток – при большом разрешении монитора текст сложно читать. Попробуйте, почитайте страницу со строчками длиной символов 200, глаза устанут по ней бегать.

Хотя и «резиновый» и «фиксированный» дизайн можно увидеть на различных сайтах повсеместно, в последнее время предпочтение все больше отдается гибкой структуре.

Размер шрифта зависит от настроек операционной системы и браузера

Не любят разработчики сайтов, когда их пользователи изменяют размер шрифта. Потому что в этот момент могут проявляться всякие разные недочеты верстки. И чтобы пользователь не мог менять размер шрифта, эта величина жестко прописывается в стилях. Даже если текст мелкий-мелкий, изменить его простыми средствами не представляется возможным. Поэтому лучше задавать размер шрифта в процентах, например: font-size: 150% . Тогда в опциях браузера размер шрифта можно делать большим или меньшим, что невозможно при абсолютном задании размера шрифта в пунктах. Это позволит установить размер шрифта подходящим для комфортного чтения. Только надо проверить вначале, что все на сайте корректно работает при любом размере шрифта.

Влад Мержевич. Приемы верстки веб-страниц

Несколько идущих подряд пробелов показываются как один

Сколько бы пробелов не стояло между словами, все равно на веб-странице мы увидим лишь один. В общем, правильное решение, чего лишний раз пробелы плодить. Но как же тогда быть с красными строками и другими отступами, которые так иногда необходимо использовать. Вот тут и полюбился многим символ неразрывного пробела () за то, что позволяет делать столько подряд идущих пробелов, сколько хочется.

Нет переносов слов в тексте

К сожалению, HTML не поддерживает перенос слов, так как это делают текстовые редакторы. Это условие совершенно несущественно, пока не используется выравнивание текста по ширине. В этом случае, блок текста выравнивается по левому и правому краю. Короткие строки при этом растягиваются за счет автоматического добавления пробелов между словами. Иногда пустые блоки между словами настолько велики, что портят внешний вид страницы и ухудшают читабельность текста.

Количество используемых для текста шрифтов ограничено

Разумеется, можно указать любой шрифт, установленный у вас в операционной системе и он будет корректно показываться на данном компьютере. Но никто при этом не гарантирует, что точно такой же шрифт будет находиться на удаленном компьютере пользователя. Поэтому для совместимости используется всего несколько шрифтов, которые встречаются повсеместно: Arial, Times, Verdana, Courier, Comic Sans MS. В случае если хочется воспользоваться понравившимся шрифтом, следует создать картинку в графическом редакторе, содержащую надпись.

Использование изображений вместо текста

Особенность непосредственно связана с предыдущим пунктом. Количество шрифтов, которые можно применять на веб-странице ограничено, а стили неудобно или невозможно применять для управления некоторыми параметрами текста, как это позволяют делать текстовые или графические редакторы. Поэтому некоторые блоки текста, например, заголовки и меню вставляют в виде изображения.

Высота содержимого страницы не ограничена рамками окна браузера

Несмотря на очевидность данного воззрения, из него следуют некоторые выводы:

поскольку высота текста на страницы не ограничена определенными рамками, как на листе бумаги и напрямую зависит от разрешения монитора, размера и типа шрифта и еще от кучи других параметров, вычислить ее не представляется возможным;

вертикальные линии привязанные к высоте текста можно строить только с использованием таблиц.

Использование распорок

Распоркой называется прозрачный рисунок, как правило, размером 1 на 1 пиксел, предназначенный для контроля пустого пространства. Распорки

Влад Мержевич. Приемы верстки веб-страниц

вставляются в ячейки таблиц, чтобы они не меняли свой размер при изменении окна браузера или разрешения монитора.

Написание программных скриптов вместо кода HTML

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

2. ИСПОЛЬЗОВАНИЕ ФОНОВОГО РИСУНКА

Используя фоновый рисунок веб-страницы или таблицы можно создавать различные графические эффекты на сайте, например, вертикальные и горизонтальные линии, тени, полоски и многое другое.

Ôîí веб-страницы

Чтобы на веб-странице с левого края шла вертикальная фоновая полоса, используется следующий прием. Создаем рисунок шириной примерно 2000 пикселов. Такая большая ширина нужна для того, чтобы на всех мониторах независимо от их разрешения страница выглядела бы одинаково (рис. 2.1). С левой части рисунок зарисовывается нужным цветом желаемой ширины. Можно создавать не только прямоугольник, но и любые декоративные изображения, главное, чтобы они состыковывались по вертикали. Полученный рисунок вставляем на веб-страницу как обычный фон параметромbackground тега BODY. Поскольку рисунок широк и не помещается на всю ширину экрана монитора, на странице он будет повторяться только вниз.

Рис. 2.1. Фоновый рисунок для различных разрешений монитора

В итоге получим страницу, у которой по левому краю идет декоративная полоса (рис. 2.2).

Влад Мержевич. Приемы верстки веб-страниц

Рис. 2.2. Результат использования широкого фона

Приведенный прием можно использовать для создания и горизонтальных полос. В этом случае, фоновое изображение должно располагаться вертикально.

Для размещения содержимого страницы строго в определенных областях, можно использовать таблицу с нулевой границей как каркас (рис. 2.3). Самой таблицы видно не будет, но она позволяет отделить одну часть веб-страницы от другой, например, ссылки от содержания.

Рис. 2.3. Использования таблицы для разделения материала

Аналогичный подход можно использовать и с таблицами. Только вначале создается таблица, а уже в одной из ее ячеек размещается фоновый рисунок. Ширина ячеек задается фиксированной и зависит от фонового рисунка, а чтобы она не менялась, внутри ячейки рекомендуется поместить распорку – прозрачный рисунок заданных размеров (рис. 2.4).

Рис. 2.4. Фоновый рисунок для ячейки таблицы

Код для данного использования таблицы с фоном приведен в Примере 2.1.

Пример 2.1. Создание фона с помощью таблицы

Меню

Текст

Влад Мержевич. Приемы верстки веб-страниц

Рисунок bg.gif является фоном, аspacer.gif служит распоркой. В правой ячейке фон залит серым цветом, что можно делать по желанию.

Создание вертикальной линии

Очень удобно и просто делать вертикальные линии с помощью таблицы и фонового рисунка. Вначале готовим изображение в графическом редакторе, это может быть сплошная, пунктирная или любая декоративная линия (рис. 2.5).

Почему рисунок именно такого размера и формы описано чуть ниже.

Рис. 2.5. Заготовка для создания линии

Следующий этап – создание таблицы. Ширина одной из ячеек должна совпадать с толщиной линии, обычно это 1-2 пиксела. Внутри нее и размещаем фоном изображение.

Пример 2.2. Создание вертикальной линии

При истечении возможности понимания вышеизложенной информации вы имеете объективную возможность подать официальный запрос главному субординатору локальной виртуальной вселенной. Если ширина таблицы фиксирована, лучше задавать точные размеры всех ячеек. При ширине заданной в процентах, возможны небольшие изменения размеров ячеек. Вот для такого случая и делается изображение линии (рис. 2.5) с пустым полем справа. Если этого не сделать, линия может получиться несколько толще, чем ожидалось. А так, если ширина ячейки и будет увеличиваться, несмотря на прописанные размеры, вид линии останется неизменным. Вдобавок, такой «запас» позволяет изменять значение параметра cellpadding , который управляет отступом от края таблицы до ее содержимого, без отрицательных последствий. Рисунок достаточно делать шириной 20-30 пикселов, а цвет фона рисунка должен быть таким же, как у веб-страницы. Влад Мержевич. Приемы верстки веб-страниц 3. СОЗДАНИЕ РАМОК Информация обведенная рамкой позволяет отделить один материал на вебстранице от другого и привлечь внимание читателя. Кроме того, рамка вносит элегантность в оформление сайта. Для создания рамок применяется несколько способов, их которых большая часть использует свойства таблиц. Стили дополняют возможности таблиц и позволяют сделать рамки разных видов простыми средствами. Ниже приводятся распространенные приемы получения рамок, которые можно встретить повсеместно на разных сайтах. Использование параметра таблицы border Самый простой способ создания рамки заключается в использовании параметров таблицы border, определяющего толщину рамки и bordercolor, который задает ее цвет. Рамки созданные таким образом отличаются по своему виду в разных браузерах (рис. 3.1). Internet Explorer Рис. 3.1. Рамка полученная с помощью параметра border Netscape имитирует трехмерность рамки, браузер Opera вообще оставляет ее цвет без изменения, а Internet Explorer делает рамку сплошной. Пример 3.1. Использование параметра border Параметр border определяет толщину рамки,bordercolor – åå öâåò,cellpadding задает расстояние от рамки до содержимого таблицы. Вложенные таблицы Еще один простой и универсальный способ построения рамки, работающий одинаково в разных браузерах, основан на наложении двух таблиц друг на друга. Если мы возьмем прямоугольник из, например, красной бумаги и сверху на него Содержимое Влад Мержевич. Приемы верстки веб-страниц наложим еще один прямоугольник белого цвета, чуть меньшего размера, то увидим красную рамку. Только вместо листа бумаги используем тег TABLE, а цвет таблицы задаем параметром bgcolor . Пример 3.2. Использование вложенных таблиц Содержимое В верхней таблице устанавливаем ширину и высоту таблицы по желанию, параметром bgcolor задаем цвет рамки,cellspacing присваиваем нулю, аcellpadding управляет толщиной границы. Чем этот параметр больше, тем толще будет и рамка. Для внутренней таблицы надо обязательно задать ее цвет, отличный от цвета внешней, совпадающий с цветом фона веб-страницы, в примере, например, задан белый. Параметрcellspacing èëècellpading (в данном случае без разницы какой использовать) определяет расстояние от границы рамки до содержимого таблицы. Ширина и высота внутренней таблицы обязательно должны совпадать с шириной и высотой внешней таблицы. Замечание: Перенос строки в тексте кода HTML автоматически добавляет пробел. Если рамка в некоторых местах получается толще, чем задумано, следует убрать лишние пробелы между тегами и тем самым сократить количество строк. Заливка ячеек таблицы цветом Использование цвета фона ячеек таблицы – один из универсальных и распространенных способов создания рамки. Создаем таблицу (рис. 3.2) и заливаем крайние ячейки нужным цветом (рис. 3.3). Что это такое, для чего, как влияет на элементы, как использовать на практике для вёрстки разных элементов. Как обычно, теория подкрепляется интерактивными заданиями для закрепления материала и самостоятельными работами. С ответами, если что. Ещё в качестве эксперимента добавил к свойству float песочницу . Красивого названия для этой фичи не придумал, пока песочница называется. Короче, щёлкаешь по значениям свойства и тут же видишь результат применения. Как вам? Продвинутые уроки по HTML и CSS Влад Мержевич Продолжаем переводить вторую книгу Шэя Хоу, посвящённую разным веб-технологиям. Уже выложено три урока , в том числе о позиционировании и адаптивной вёрстке. Остальные главы будут добавляться по мере перевода и как обычно будут анонсированы здесь. Как верстать на HTML5 и CSS3 Влад Мержевич Компоненты Bootstrap Влад Мержевич Bootstrap Влад Мержевич Если вас всегда интересовало, что такое Bootstrap и что он даёт для веб-разработки, то вот вам небольшое руководство по этому фреймворку. После написания, кстати, пришло несколько идей, как сделать это руководство лучше и интереснее. Но улучшать можно до бесконечности, поэтому в определённый момент надо представить публике результат, а затем уже отталкиваться от него. Тем более, на сайте всегда можно дополнить и дописать. Это не бумага, откуда слово не вырубить. Электронный сомелье Сверстайте форму из PSD-файла для ввода коктейля. Пошаговая форма Форма для коктейлей Внутренняя страница Влад Мержевич Внутренними будем называть все веб-страницы сайта кроме главной. Они основаны на двухколоночном фиксированном макете, где в правой колонке располагается навигация (ссылки по сайту) и блок с интересной информацией, а в левой текст статьи. Позиционирование элементов Влад Мержевич Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное. В зависимости от типа, который устанавливается через свойство position , изменяется и система координат. Благодаря комбинации свойств position , left , top , right и bottom элемент можно накладывать один на другой, выводить в точке с определёнными координатами, фиксировать в указанном месте, определить положение одного элемента относительно другого и др. Подобно другим свойствам CSS управление позиционированием доступно через скрипты. Таким образом, можно динамически изменять положение элементов без перезагрузки страницы, создавая анимацию и различные эффекты. Поток документа Влад Мержевич В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Слой, размещенный в самом верху кода, отобразится раньше слоя, который расположен в коде ниже. Такая логика позволяет легко прогнозировать результат вывода элементов и управлять им. Порядок вывода объектов на странице и называется «потоком». При этом существует несколько возможностей «вырвать» элемент из потока и придать ему почти мифические свойства. Раз он не существует в потоке, то в коде его можно описать где угодно, а также выводить в заданное место окна. Блочная модель Влад Мержевич Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задается свойством width , а высота через height ; вокруг контента идут поля (padding ), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы (border ) и завершают блок отступы (margin ), невидимое пустое пространство от внешнего края границ. Порядок влияния этих свойств на блок четко определён и не может быть нарушен. На рис. 3.1 показан блок в виде набора этих свойств. Рис. 3.1. Свойства, формирующие блочный элемент Блочная вёрстка Влад Мержевич Несмотря на то, что термин «слой» достаточно устойчиво используется при разработке сайта, расшифровке этого понятия в литературе по сайтостроению практически не уделяется внимание. В дальнейшем я буду активно использовать термин «слой», поэтому вначале необходимо определить, что же под ним подразумевается. Первоначально слои ввела компания Netscape, включив в свой браузер поддержку тега . Этот тег позволял прятать/показывать текущее содержимое, устанавливать положение относительно окна браузера, накладывать один слой поверх других и загружать данные в содержимое слоя из файла. Все эти параметры легко менялись с помощью JavaScript и это расширяло возможности по созданию действительно динамического контента на странице. Несмотря на столь впечатляющий набор возможностей, тег не был включён в спецификацию HTML и остался лишь расширением браузера Netscape. 6 июня 2008 в 00:48 Чулан Наверняка многие из вас, кто верстает, активно использует htmlbook.ru в качестве онлайн справочника, к примеру, по стилям. Кто-то, возможно, является постоянным посетителем форума htmlbook.ru. Я уверен, что среди читателей есть те, кто читал книги «Ускорение работы сайта» и «HTML и CSS на примерах», а возможно и учились по ним. Кто объединяет всё это? Влад Мержевич, встречаем аплодисментами:) Привет, Влад! Привет, Дмитрий. Расскажи, пожалуйста, когда ты заинтересовался Вебом? Наверное, мне в некотором роде повезло, что первым редактором для создания веб-страниц, с которым я столкнулся, был WebEdit. Это не визуальный редактор и, хотя все можно было делать через кнопки меню, невольно приходилось учить HTML. Так и научился самостоятельно создавать веб-страницы. Потом, как и у многих начинающих было увлечение фреймами, но быстро с ними распрощался, когда понял, что это вещь недостаточно гибкая. Как пример, из-за небольшой ошибки фреймовая структура открывалась сама в себе несколько раз. Это, конечно, говорит не о недостатках фреймов, а о неправильном их использовании, тем не менее, после этого перешёл на другую систему вёрстки, а именно на таблицы. Было ещё увлечение программой Microsoft FrontPage, именно тогда понял в чем её основной недостаток. Нет, дело совершенно не в том, что она создана Microsoft, это ребячество. FrontPage много берет на себя, считая, что сам сделает гораздо правильней, чем человек. Как итог - приходится постоянно контролировать эту программу, «держать её в узде», при этом требуется знать и HTML и особенности вёрстки во FrontPage, а у новичков этих знаний как раз пока и нет. А когда и как родилась идея издать первую книгу? В свое время написал несколько статей, посвящённых сокращению объёма данных на сайте и ускорению его работе. Но оказалось, что статей хватает на небольшую книжку, так что решил связаться с различными издательствами, чтобы ее опубликовать. И в этот момент ко мне обратился Евгений Рыбаков из BHV и предложил написать книгу. Вот такое удивительное совпадение желаний и возможностей. После обсуждения концепции и содержания книги она вышла под названием «Ускорение работы сайта». Какой общий тираж? Кстати, сколько книг всего? Две книги - «Ускорение работы сайта» и «HTML и CSS на примерах». Тираж для тематики стандартный - по 5 тысяч экземпляров. Расскажи, как ты создавал htmlbook.ru? Какие были трудности? Как и многие, пытался придумать, какую информацию можно поместить на свой будущий сайт. Домашнюю страницу намеренно не хотелось делать из-за узости темы. Вот пришла идея размещать небольшие советы по верстке веб-страниц. Оказалось, что данную область почему-то обходят, хотя убеждать в ее актуальность никого не нужно. Так началось с десятка небольших статей, постепенно объем информации вырос до пары сотен статей, при этом и тематика расширилась. Уже не только советы по верстке, а HTML, CSS и многое другое. Какая сейчас посещаемость сайта? А форума? Сайт в среднем посещают 9к уников в день, а форум около тысячи. Но вот что интересно, темы форума просматривают раза в четыре чаще, чем материалы сайта. Понятно, что используют как тематическую базу знаний. Я наслышан о проблемах с доступностью форума, когда планируешь их решить? Эх, это больная тема, связанная с популярностью ресурса и соответственно, возросшим количеством посетителей. Совместно с хостером ищем способы снизить нагрузку за счёт технических средств или перехода на выделенный сервер. Не раскроешь секрет, готовятся ли новые проекты? Какие? Расскажи подробней. В этом году планирую запустить «долгострой» WebReference.Ru, в начале 2008 на htmlbook.ru проводился конкурс на дизайн этого сайта. Сейчас пока отрабатываю технологии и принципы работы этого ресурса на примере сайта «Графика для Web» (webimg.ru), который в каком-то смысле выступает экспериментальной площадкой. Также есть одна интересная идея, связанная с Красноярском, городу в этом году исполняется 380 лет. По этому поводу хочу сделать сайт с панорамными фотографиями города с применением технологии QuickTime VR. То есть это не просто плоские изображения, их можно крутить по горизонтали на 360°. Эффект присутствия обеспечен. Какие блоги и сайты читаешь? Поделись подборкой от «шеф-повара». Утро, как и у многих пользователей Интернета, начинается с башорга. Также обязательно хожу на сайты о кино, люблю это дело. Тематические ресурсы о веб-технологиях посещаю по мере необходимости, ежедневно обращаться не приходится. А пишешь статьи куда-нибудь кроме своих проектов? Нет, и так заимствуют мои статьи разные сайты. Такую практику даже поощряю, но с обязательной ссылкой на первоисточник. Так рейтинг проектов и растёт потихоньку. Если я напишу очень интересную статью, опубликуешь её, к примеру, на htmlbook.ru? Конечно, тем более обращения уже были и статьи сторонних авторов публиковались. А кем ты сейчас работаешь? Где? Недавно работал начальником IT-отдела в одной красноярской компании, но вскоре осознал, что работа уже не радует и на неё уходит слишком много времени. Так что теперь работаю на себя, занимаюсь консалтинговыми услугами по веб-технологиям. Покажешь своё фото? Жуть любопытно. Спасибо за то, что уделил время! Посоветуешь что-нибудь начинающим веб-мастерам? В веб-дизайне нет абсолютных законов и прописных истин. Знать азы конечно необходимо, но все остальное зависит только от вас. Надо учиться и превращать свои знания в предмет, которым стоит гордиться! Кросс-пост из моего Популярное в рубрике: Перенос контактов на новый телефон android читать Самсунг Галакси перезагружается сам по себе — Решения Galaxy note... читать Основные возможности Kaspersky Rescue Disk читать Макбук не подключается к wifi Макбук не видит вай фай читать  Последние Статьи Как заработать на WebMoney читать "Супра", планшет: отзывы покупателей читать Местонахождения судов в реальном времени читать Лучшие программы для Android Запись звонков от... читать Удаляем не читателей в Твиттере читать Подключаем интернет на ноутбуке: все возможные... читать Samsung Galaxy S IV – новый флагман... читать Как происходит управление скоростью вращения... читать innovakon.ru Мобильные телефоны и связь Редакция проекта Реклама на сайте Контакты Карта сайта © 2024 Мобильные телефоны и связь Top