ria pc game
fle game engine - движок для создания игр
fle game engine - движок для создания игр


Balls and holes PC game / Balls and Holes PC игра
Вакансии
Игродельня
Сегодня
20 февраля 2019 18:50
Вход Регистрация Забыли пароль ?

megainformatic - Мастер-класс: Создание модели и текстуры Коммандного Центра (как в StarCraft 2)
        Мастер-класс: Создание моде
подробнее...

Теги создание сайтов, создание игр, дизайн, игры, информатика, уроки photshop, php, c++, музыка, delphi, cms, робосайт
Статьи сайта
megainformatic - Логика работы слайдера на javascript

megainformatic - Пишем свою соц. сеть - модуль предложений для webjob

megainformatic - Пишем свою соц. сеть - модуль предложений для webjob - часть реализации для личного кабинета

megainformatic - Пишем свою соц. сеть - Реализация файлового хранилища предложений в csv-файле

megainformatic - Тестирование подключения к платежной системе ЕДИНЫЙ КОШЕЛЕК (w1.ru) с использованием скрипта эмулятора

megainformatic - Пишем свою cms - шаг 1

megainformatic - Пишем свою cms - шаг 2

megainformatic - Пишем свою cms - шаг 3

megainformatic - бесплатная флеш игра freeway fury 2 - разработчик Serius Games

megainformatic - бесплатные флеш игры сторонних разработчиков

megainformatic - Как я осваивал Flash

megainformatic - Список уроков на тему создания flash приложений и игр

megainformatic - Как я осваивал Flash - шаг 2 - Основы создания простейших flash - игр

проект портала Идеи Комфорта

megainformatic - игра Веселый Буквоежка

megainformatic - игра Веселый Буквоежка

megainformatic - Использование cron, crontab и планировщика задач

megainformatic - Совместное использование jquery и mootools или других js-фреймворков

megainformatic - Модуль content php performer для megainformatic cms

megainformatic - Пишем компактный слайдер

megainformatic - Что нужно знать для создания сайта ?

megainformatic - Что нужно знать для создания сайта ? Глава 2 - Кодировки и DOCTYPE

megainformatic - Что нужно знать для создания сайта ? Глава 3 - Идём дальше - нанизываем новый код - где объявляются стили css и код javascript

megainformatic - Что нужно знать для создания сайта ? Содержание

megainformatic - Что нужно знать для создания сайта ? css - стили

megainformatic - preg_match или Использование регулярных выражений в php

megainformatic - статьи Тимонина Андрея - Flash. Содержание

megainformatic - статья Тимонина Андрея - Flash. Подготовка к работе.

megainformatic - статья Тимонина Андрея - Flash. Hello world.

megainformatic - статья Тимонина Андрея - Flash. Экспорт SWC библиотеки.

megainformatic - Тимонин Андрей - Несколько слов о себе

megainformatic - статьи Тимонина Андрея - уроки из области веб программирования, создания казуальных игр

megainformatic - статья Тимонина Андрея - Обеспечиваем доступ к объекту из любой точки программы. Singleton

megainformatic - статья Тимонина Андрея - Хронология работы программы. Создаем Лог

megainformatic - статья Тимонина Андрея - Поиск файлов. Получаем список файлов каталога.

megainformatic - статья Тимонина Андрея - Исключения. Создаем класс обработки исключений.

megainformatic - статья Тимонина Андрея - States. Создаем менеджер состояний игры.

megainformatic - статья Тимонина Андрея - Регистрация. Часть 1. Создаем страничку регистрации на сайте.

megainformatic - статья Тимонина Андрея - Регистрация. Часть 2. Создаем обработчик, и заносим информацию о пользователе в Б.Д.

megainformatic - статья Тимонина Андрея - Таймер. Выводим время игры.

megainformatic - статья Тимонина Андрея - DirectX9. Создаем основной класс обработки графики.

megainformatic - статья Тимонина Андрея - DirectX9. Создаем первое приложение.

megainformatic - Что нужно знать для создания сайта ? float - использование в css - стилях

megainformatic - Уроки Fruity Loops Studio (FL Studio) - урок 2 - пишем свою композицию COLD

megainformatic - Уроки Fruity Loops Studio (FL Studio) - урок 3 - экспериментируем с композицией COLD

megainformatic - Что нужно знать для создания сайта ? Стандартные шрифты для сайта

megainformatic - Что нужно знать для создания сайта ? ASC II Коды символов

megainformatic - Уроки Fruity Loops Studio (FL Studio) - урок 4 - пишем первый вариант композиции COLD

megainformatic - Популяризация Современных Научных Знаний и Размышления на околонаучные темы. СОДЕРЖАНИЕ

megainformatic - Популяризация Современных Научных Знаний и Размышления на околонаучные темы. Энергетический кокон

megainformatic - Модуль галерей для любой cms

megainformatic - Портфолио выполненных проектов сайтов и приложений

megainformatic - Мои Музыкальные Миры - страница 2

megainformatic - megainformatic cms rs

megainformatic - модуль Падающий снег

megainformatic - проект Open Shop

подробнее

Creating game on fle game engine - Simple game / Создание игры на fle game engine - Simple game

9 - Реализуем корректное попадание в ямы и около ям - определяем границы спрайтов ям и спрайта прыгаюшего шарика



read paper in english

Для того, чтобы фиксировать попадание шарика в яму или нет, нужно определить для неё границы.





Содержание

страница 1 - Спрайты

страница 2 - Объекты

страница 3 - Наложение объектов

страница 4 - Код - Настройка параметров Scene Editor fge и написание кода для вывода спрайта шарика в вашем первом игровом приложении

страница 5 - Отображаем прыгающий шарик

страница 6 - Загрузка игровой сцены

страница 7 - Перемещения игровой сцены

страница 8 - Закрываем часть сцены от пустот при помощи черной текстуры с прорезью, ограничиваем перемещение сцены

страница 9 - Реализуем корректное попадание в ямы и около ям - определяем границы спрайтов ям и спрайта прыгаюшего шарика

страница 10 - Проверка столкновений

страница 11 - Игровой счёт, звуки, музыка

урок #2 страница 1 - Создание новых сцен для игры simple game, расширенная версия simple game extended

13. Скроллинг больших локаций

14. использование переменных в игре на c++ directx 9c

15. Мульти анимация







Давайте подумаем, что нужно знать для определения факта попадания шарика в яму ?

Прыгающий шарик в яме или нет ?

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

Прыгающий шарик в яме или нет ?

Зная границы шарика и границы ямы мы можем определить - целиком ли попадают границы шарика в границы ямы или нет и в соответствии с этим принять решение: отобразить ли переднюю плашку ямы или нет.

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

Параллельно нам сразу же придется решить проблему -

4) Реализовать возникновение игровых ситуаций: чтобы шарик начал двигаться и уворачиваться от ям, а также проверку и вывод его попадания в яму и учёт игровых очков.

Мы уже знаем как двигать шарик, только теперь он должен двигаться не от перемещений мыши, а сам.

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

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



Для начала нужно реализовать проверку попадания для неподвижного шарика и всего 1 ямы.

Определено попадание шарика в яму

Если шарик попадает в яму - учитываем попадание. В дальнейшем при возникновении данного события будет учитываться игровой счёт и воспроизводиться звук.



Если шарик не попадает в яму - то не выводим плашку ямы.



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

Видим, что шарик свободно перемещается по сцене в отведенных ему границах.

При попадании шарика в яму генерируется звук попадания в яму. Когда шарик непредсказуемо меняет направление движения также создается соответствующий данному событию звук.

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

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

Помимо этого есть возможность делать паузу в воспроизведении музыки или переходить к воспроизведению следующего по списку трека.

Список треков также можно задавать произвольно через специальный файл.

Как реализовать все показанные особенности мы рассмотрим далее.

Указатель мыши можно скрывать или показывать по нажатию специальной клавиши.

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



Скачать готовую игру simple game версия 1.0.0 4.01.2017 (без исходного кода).

Исходный код и другие полезные материалы и инструменты Вы получаете при оформлении платной подписки !


Размер: 51,8 Mb



новый современный движок для создания игр на платформе Windows Directx 9c - которая поддерживается большинством ПК.

Подробнее об оформлении подписки на fle game engine





Скачать fle game engine (полный исходный код).

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


Размер: 482 Mb



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

CRC32: 9626C289
MD5: 7537172124F59B49431DA3CE0EE70B97
SHA-1: 951A654AFA932AAD706C090B5A37F37DD53E5920

Контрольные суммы можно проверить утилитой HashTab

После скачивания вы получите самораспаковывающийся архив. Запустите его, чтобы распаковать.

Система написана на c++ под directx 9.

Требования - наличие установленных MSVS 2005 (Microsoft Visual Studio) и DirectX SDK Aug 2008.

Для других версий MSVS и DirectX SDK могут потребоваться модификации кода !

Что включает дистрибутив ?

- Редактор сцен Scene Editor;

- пример игры simple game с полным исходным кодом;

- пошаговое описание создания примера игры simple_game - представляет набор html файлов пригодных для открытия и чтения из любого браузера;

- Coords 2D - утилиту отладки анимаций и подбора экранных координат содержит богатую библиотеку готовых примеров игровых спрайтов;

- полный исходный код fle game engine - позволит вам создать свою собственную игру, а также расширить движок необходимыми возможностями в дальнейшем, никаких ограничений на расширение нет;

- fgg_setup.exe Fly snow 3d - визуальные эффекты падающего снега/дождя и др. красивые эффекты с частицами в 2d/3d;

Скачав дистрибутив fle game engine вы можете приступить к созданию своей игры прямо сейчас !

Чтобы иметь возможность самостоятельно создать свою игру на базе примера simple_game с неограниченными возможностями дальнейшего расширения! - оформите подписку на fle game engine -


Стоимость: 600 руб.

Оформив подписку на fle game engine Вы получаете пример игры simple_game с исходным кодом, и сможете не просто прочитать всё, что описано, но и самостоятельно проделать в собственном приложении с возможностью неограниченного расширения. Также Вы получаете

Самую свежую версию Scene Editor fge 1.0.2 (на текущий момент) с поддержкой большего количества возможностей: сетка, настройки, скроллинг и другие. В бесплатной версии эти возможности не поддерживаются. подробнее о составе платной подписки.





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

Creating game on fle game engine - Simple game / Создание игры на fle game engine - Simple game - попадания шарика в ямки новым способом

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


Creating game on fle game engine - Simple game / Создание игры на fle game engine - Simple game - Предложенный ранее способ оказался не лишенным недостатка

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

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

Вообщем все это выглядит не очень естественно.

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

Creating game on fle game engine - Simple game / Создание игры на fle game engine - Simple game - попадания шарика в ямки новым способом

Поэтому сколько шариков бы не попадало в ямку одновременно они будут выводиться
визуально естественно.

В чем заключается принцип нового способа ?

Суть его предельно проста:

Каждый спрайт имеет такую характеристику как высота - Height.

Эту высоту мы можем изменить в любой момент. Что собственно и делается.

Sprite->Height = m_iBallSpriteHeight;

Как это происходит ?

Пока шарик не в ямке, его спрайт выводится с обычной высотой Height, на которую
рассчитан данный спрайт.

Но как только момент попадания в ямку зафиксирован, высота меняется на меньшее.
значение, чтобы шарик оказался как бы обрезан снизу, почти на 1/3 или даже
наполовнину.

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

Creating game on fle game engine - Simple game / Создание игры на fle game engine - Simple game - попадания шариков в ямки новым способом

[назад] [далее]



подробнее

     
 
Урок 9 Тестирование и отладка приложения
 
О том, что потребуется для данного урока читайте в основном разделе - уроки delphi directx 8.1
 
Далее у читателя подразумевается наличие базовых знаний языка Delphi.
 
[назад] [страница 1] [далее] [к содержанию]
 

Мы добрались до логического завершения уроков по созданию 2D-игры. В первых уроках Вам давались довольно детальные пояснения, в последующих упор был сделан на конкретных практических вопросах, а со всеми деталями Вы могли ознакомиться в исходном коде.

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

Ниже я попытаюсь дать Вам некоторые практические рекомендации. Надеюсь они помогут Вам создать более устойчивые к работе и отлаженные игры.

 

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

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

 

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

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

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

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

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

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

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

Создание Вашего игрового проекта может выглядеть так:

1) Написание шаблона стартового приложения;

2) Добавление в шаблон вывода титульной заставки;

3) Реализация экрана главного меню (пока без реализации возможностей отдельных его пунктов);

4) Последовательная реализация пунктов меню, начиная с простых;

5) Реализация загрузки ресурсов и начального экрана игры;

6) Постепенная реализация игровой логики и всех остальных возможностей;

 

Начав с простого и постепенно дополняя и расширяя возможности в конце концов достигнете своей цели создав законченный проект.

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

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

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

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

 

Попробуем выполнить наше приложение в режиме отладки. Откройте любой проект и нужный его модуль.

Путем щелчка левой кнопки мыши в левом поле напротив окна текста исходного кода установите в строке кода, которая является исполнимой, контрольную точку останова (Break Point)

 
 
запустите приложение в режиме отладки щелкнув по кнопке Run -
 
 
или выбрав пункт меню Run > Run
 

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

Весь код до точки останова будет выполнен сразу же, а в точке останова исполнение сделает паузу и отладчик будет ожидать Ваших дальнейших действий. Вы можете нажимать клавиши [F8], [F7] - пункты меню Run > Step Over и Run > Trace Into для пошагового исполнения каждой строки кода начиная с точки останова.

При этом в отдельных окнах Watch List и Local Variables, а также путем наведения указателя мыши на любую нужную переменную Вы можете увидеть значение, которое она принимает в данный момент.

 
 

Окно Call Stack позволяет увидеть последовательность вызовов различных функций в Вашей программе начиная снизу и вверх, в окне Event Log вы можете увидеть события которые происходят во время исполнения и отладочные сообщения, если таковые имеют место. Экстренно завершить выполнение приложения можно нажав комбинацию клавиш [Ctrl] + [F2].

Это вызовет закрытие приложения и переведет среду Delphi в обычный режим работы над исходным кодом.

 

В режиме отладки клавиша [F8] позволяет перейти к исполнению следующей строки кода, [F7] позволяет войти в код функции и проследить, что происходит внутри неё (если исполнимая строка кода является вызовом функции, процедуры или метода).

Контрольные точки останова нужно ставить только в тех строках кода, которые являются исполнимыми (напротив них при компиляции появляется синяя жирная точка), иначе это не приведет к останову в данной строке при запуске в режиме отладки. Комментарии не являются исполнимыми строками кода, т.к. не дают исполнимого кода при компиляции. Если Вы работаете в среде Delphi 7, то заметите, что операторы логических скобок begin и end также не являются исполнимыми и их нельзя использовать в качестве контрольных точек останова. В среде Delphi 2006 это делать можно.

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

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

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

Например, таким способом отображается FPS. В окончательном отлаженном проекте этот код позднее комментируется или удаляется, так что экран в конечном счете не будет засорен для пользователя посторонней информацией.

Можно также в рабочем приложении предусмотреть специальную клавишу, которая бы включала и отключала отображение проверяемых переменных.

 
С таким кодом Вы наверняка уже сталкивались в наших предыдущих уроках, и он для Вас уже не нов, поэтому я не вижу большого смысла его здесь приводить.
 
В заключение скажу лишь, что режим отладки не является чем-то особо сложным и недоступным пониманию, если Вы пока еще не совсем с ним хорошо знакомы. Вам достаточно лишь раз посмотреть как происходит работа в этом режиме и думаю, все вопросы разрешатся постепенно по мере Вашей работы.
 
Кроме того, в ходе практической реализации самостоятельного игрового проекта у Вас будут возникать новые вопросы и если Вы будете разрешать их самостоятельно, используя документацию по Delphi, DirectX и некоторые сведения почерпнутые из данных уроков, то у Вас всё получится.
 
Желаю Вам всяческих успехов.
 

свои вопросы Вы можете задавать

на creator@megainformatic.ru или оставьте сообщение на форуме (регистрация на форуме по вашей заявке)

 
 
[назад] [страница 1] [далее] [к содержанию]
 
     
     
     
     
подробнее

Уроки css - атрибут position

Сегодня Мы с Вами рассмотрим применение атрибута position

[к содержанию]

Приготовьтесь много экспериментировать, потому что настоящая верстка - это эксперименты, пробы и ошибки.

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

Сначала приведу пример использования -



Красный блок - это DIV, описанный таким кодом -

<div style="float: left; width: 400px; height: 180px; background: #cc0011;">
</div>


Т. е. float: left - привязывание блока к левому краю контейнера (блока, его содержащего) - в нашем примере таким контейнером является внешний DIV, в котором находится данная статья.

Далее думаю понятно: width: 400px - ширина блока 400 пикселей
height: 180px - высота - 180, сразу дам совет если ваш блок планируется "резиновым" по высоте, тогда не указывайте атрибут height.

Соответственно цвет фона для блока - красный - background: #cc0011

Внутри красного блока DIV как видим расположен грязно-желтого цвета блок DIV.

Чтобы он остоял от левого края своего контейнера на 140 пикселей и от верхнего края на 50 пикселей зададим такой код -

<div style="position: relative; top: 50px; left: 140px; z-index: 1000; width: 200px; height: 80px; background: #aacc00;">
</div>


С шириной и высотой, а также цветом фона думаю Вам всё понятно, а вот новые атрибуты требуют пояснения

position: relative - задает расположение блока DIV "относительным" - т. е. смещения указанные у left и top задают относительное смещение внутри "родительского" контейнера - т. е. контейнера в котором расположен наш желый блок - по отношению в внешнему - красному блоку.

И вот тут таится главная ошибка всех НАЧИНАЮЩИХ ВЕРСТАЛЬЩИКОВ -

ИСПОЛЬЗОВАНИЕ position ТАМ, ГДЕ ЭТО СОВСЕМ НЕ НУЖНО.

!!! ПРАВИЛЬНО РЕШЕНИЕ ТАКОВО - используйте position там, где можно обойтись обычным float + margin. !!!

Т. е. блоки нужно выравнивать друг относительно друга с помощью атрибута margin - тот же самый пример более правильно записать так -



<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="float: left; margin: 50px 0 0 140px; width: 200px; height: 80px; background: #aacc00;">
</div>

</div>


Внешне как видите никакой разницы. Но если использовать несколько блоков DIV внутри одного и того же контейнера, то разница будет ОЧЕНЬ ОЩУТИМА.

Посмотрим пример -



<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="float: left; margin: 50px 0 0 40px; width: 60px; height: 60px; background: #22cc00;">
</div>

<div style="float: right; margin: 50px 0 0 40px; width: 60px; height: 120px; background: #220000;">
</div>

</div>


Пока всё просто :))))

А что если бы было вот так ?









<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="float: left; margin: 50px 0 0 40px; width: 260px; height: 60px; background: #22cc00;">
</div>

<div style="float: left; margin: 50px 0 0 40px; width: 60px; height: 120px; background: #220000;">
</div>

<div style="float: left; margin: 50px 0 0 40px; width: 50px; height: 30px; background: #774100;">
</div>

</div>


Как видим маленькому коричневому прямоугольничку не хватило места в контейнере и он буквально "выпал" из него.

Использование position позволяет избежать такого поведения -









<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="position: relative; top: 50px; left: 40px; z-index: 1000; width: 260px; height: 60px; background: #22cc00;">
</div>

<div style="position: relative; top: 50px; left: 40px; z-index: 1000; width: 60px; height: 120px; background: #220000;">
</div>

<div style="position: relative; top: 50px; left: 40px; z-index: 1000; width: 50px; height: 30px; background: #774100;">
</div>

</div>


Но как видите приводит к тому, что места теперь уже хватило лишь 1 блоку.

Остальные блоки оказались совсем не там, где ожидалось.

Это самый большой камень преткновения в верстке - добиться с одной стороны универсальности, а с другой - правильного расположения блоков в любых ситуациях.

МЫ ПОДОШЛИ К ГЛАВНОМУ - вы наверное уже заметили использование нового атрибута - z-index





<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="position: relative; top: 0; left: 0; z-index: 1000; width: 260px; height: 60px; background: #22cc00;">
</div>

<div style="position: relative; top: -20px; left: 10px; z-index: 1001; width: 60px; height: 120px; background: #220000;">
</div>

<div style="position: relative; top: -40px; left: 10px; z-index: 1002; width: 50px; height: 30px; background: #774100;">
</div>

</div>






<div style="float: left; width: 400px; height: 180px; background: #cc0011; position: relative; top: 0; left: 0; z-index: 900;">

<div style="position: absolute; top: 0; left: 0; z-index: 1000; width: 260px; height: 60px; background: #22cc00;">
</div>

<div style="position: absolute; top: -20px; left: 10px; z-index: 1001; width: 60px; height: 120px; background: #220000;">
</div>

<div style="position: absolute; top: -40px; left: 10px; z-index: 1002; width: 50px; height: 30px; background: #774100;">
</div>

</div>


z-index всегда применяется совместно с position, поскольку без него просто не работает,
а используется он для позиционирования блоков по оси z - т. е. блоки с меньшими z располагаются на заднем плане, а блоки с большим z - поверх них.

Именно для такого позиционирования и правильно применять атрибут position, а во всех остальных ситуациях старайтесь обходиться простыми float + margin как было показано выше или вообще сверстать нужную часть страницы не блоками DIV, а при помощи TABLE (таблицы).

Считать, что "ДИВНАЯ" верстка более современна, а "ТАБЛИЧНАЯ" якобы устарела - в корне неправильно !

Почему ?

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

Простой пример - красивое оформление форм - с позиционированием элементов по левому, правому краю. (см. например ФОРМУ ВХОДА нашего сайта или ФОРМУ для отправки комментариев).

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

На сегодня наш урок закончен, материала вам думаю будет достаточно и для экспериментов и для осмысления.

Удачи !

[к содержанию]

подробнее

Костя Коробкин - Компания Зергов (kk kz) - онлайн комикс - страница 4

Онлайн-комикс Костя Коробкин - Компания Зергов - интерактивный комикс (kk kz).

...

Костя Коробкин - Компания Зергов (kk kz) - онлайн комикс - страница 4

если кликать картинку она будет последовательно меняться в размерах от 620 до 2048 пиксель.

[страница 1] [страница 2] [страница 3] [страница 4] 

     
 
megainformatic cms free

Быстрая и Компактная Система Управления Вашим Сайтом - megainformatic cms express files

megainformatic cms express files - это простое, быстрое и очень компактное решение для создания первого вашего сайта. НЕ ИСПОЛЬЗУЕТ базы данных mysql. Вместо этого используются файловые базы данных. Поэтому Вы можете использовать систему даже на хостинге с поддержкой php, но без поддержки баз данных my sql.

Очень проста в установке - достаточно вам скопировать все файлы на ваш хостинг и сайт готов к работе !!!

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

Подробнее...
 
     
  Развертывание сайта на Вашем хостинге  
     
 

После того, как Вы получили в своё распоряжение архив с системой megainformatic cms express files или её аналогами (megainformatic cms free, e-shop, e-pro, e-mailer) Вам остается распаковать архив и содержимое полученной папки скопировать на Ваш хостинг.

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

 
     
 

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

http://имя_вашего_домена/

Например, если я выложил бы содержимое в корневую папку (public_html или что-то похожее) на домене http://megainformatic.ru

То я бы сразу же получил готовый работающий сайт, под управлением megainformatic cms express files.

 
     
 

У Вас могут возникнуть такие вопросы:

Где и как купить домен ?

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

Какие программы используются для доступа по FTP ?

 
     
 

На эти вопросы отвечу по порядку:

Где и как купить домен ?

Домен Вы можете купить у регистратора доменных имен, например, http://www.nic.ru

Достаточно вам в любой поисковой системе набрать запрос: "Регистраторы доменов"

А там уж выбирайте сами :))))))

 
     
 

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

Многие хостинги уже предлагают вам сразу же помимо услуг хостинга покупку домена. Так что можно смело начать с решения сразу же этого вопроса и одновременно решить и первый - покупку домена.

Тут тоже нет никаких строгих правил - Вы выбираете сами, то что Вам подойдёт по качеству и стоимости.

О том, как пользоваться выбранным хостингом Вы найдёте массу щедрых инструкций и описаний у Вашего выбранного хостера.

 
     
 

Какие программы используются для доступа по FTP ?

Не буду мудроствовать лукаво -

Зайдите в любой поисковик и наберите запрос - программы для FTP

И Вы опять получите кучу ссылок и найдёте массу нужных программ. Советую остановить своё внимание на FileZilla так как она совершенно бесплатна.

 
     
 

Ну, надеюсь я ответил на ваши вопросы.

В следующей статье Мы рассмотрим

Как добавлять статьи на ваш сайт с помощью megainformatic cms express files.

Желаю Вам удачи!!!

 
     
  [далее]  
     
megainformatic live chat
Начать беседу
X
 

Оставленные комментарии



fle game engine - движок для создания игр
fle game engine - движок для создания игр


Something: Unexplained 2 captive of desires / Нечто: Необъяснимое 2 в плену желаний
Костя Коробкин Комикс Коллекционное издание - 6 комиксов, 81 страница, 220 mp3 треков
megainformatic Размещение баннерной рекламы у нас
Время загрузки: 0,9238