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


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

Описание продукта megainformatic cms social
megainformatic cms social
подробнее...

Теги создание сайтов, создание игр, дизайн, игры, информатика, уроки photshop, php, c++, музыка, delphi, cms, робосайт
Статьи сайта
megainformatic - Мастер-класс: Создание модели и текстуры Коммандного Центра (как в StarCraft 2)

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

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

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

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

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

Система управления сайтом - megainformatic cms e-shop

Система управления сайтом - megainformatic cms e-shop

Система управления сайтом - megainformatic cms e-shop

megainformatic - Уроки 3ds max - Введение в 3ds max

megainformatic - ГАЛЕРЕЯ 3D-моделей

megainformatic - СОЗДАНИЕ МАКЕТА ПОМЕЩЕНИЯ

megainformatic - Создание макета помещения - этап 2

megainformatic - МОДЕЛИРОВАНИЕ НА УРОВНЕ МНОГОУГОЛЬНИКОВ

megainformatic - СОЗДАНИЕ ПРЕДМЕТОВ ОБСТАНОВКИ ПОМЕЩЕНИЯ

megainformatic - Моделирование обстановки помещения

megainformatic - Создание модели автомобиля

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

megainformatic - Создание анимации вращающихся колес автомобиля

megainformatic - игра Нечто: Необъяснимое и в плену желаний

megainformatic - Основы 3D-анимации, экспорт скелетной анимации

megainformatic - Подготовка модели к использованию скелетной анимации

megainformatic - Продолжаем Создание скелета для данной модели

megainformatic - Построение ирерархических связей между объектами и основы 3d анимирования

megainformatic - Особенности экспорта моделей и анимации экспортером kWXPort080719 из 3ds max 2009 

megainformatic - Создание модели броневика (Хэд)

megainformatic cms e-mailer

megainformatic cms e-mailer

megainformatic cms e-mailer

Бесплатная Система Управления Вашим Сайтом - megainformatic cms free

megainformatic - Путешествие в мир 3d

megainformatic - Путешествие в мир 3d - страница 2

megainformatic - Путешествие в мир 3d - страница 3

megainformatic - Путешествие в мир 3d - страница 4

megainformatic - Путешествие в мир 3d - страница 5

megainformatic - Путешествие в мир 3d - страница 6

megainformatic - Создание модели броневика (Хэд) - Анимация вращения колес

megainformatic cms express files

megainformatic cms express files

megainformatic cms express files

megainformatic - Уроки Photoshop - Чудеса

megainformatic cms express files - Развертывание сайта на Вашем хостинге

megainformatic - Настольная игра "Веселый Буквоежка"

megainformatic - Уроки delphi directx 8.1

megainformatic - Уроки delphi directx 8.1 - Урок 1 - Введение в Delphi DirectX 8.1. Создание шаблона стартового приложения.

megainformatic - Уроки delphi directx 8.1 - Урок 1 - Введение в Delphi DirectX 8.1. Создание шаблона стартового приложения. Страница 2

megainformatic - Урок 2 Создаем и обрабатываем команды меню.

megainformatic - Урок 2 Создаем и обрабатываем команды меню. Страница 2

megainformatic - Урок 3 Оконный и полноэкранный режимы работы D3D-приложения. Управление игрой средствами DirectInput8

megainformatic - Урок 3 Оконный и полноэкранный режимы работы D3D-приложения. Управление игрой средствами DirectInput8 - Страница 2

megainformatic - Урок 3 Оконный и полноэкранный режимы работы D3D-приложения. Управление игрой средствами DirectInput8 - Страница 3

megainformatic - Урок 4 Построение класса приложения

megainformatic - Урок 4 Построение класса приложения - Страница 2

megainformatic - Урок 5 Построение классов игровых объектов и других необходимых классов

megainformatic - Урок 5 Построение классов игровых объектов и других необходимых классов - Страница 2

megainformatic - Урок 6 Игровая логика

подробнее

     
  Уроки php  
     
  [другие статьи]  
     
 

В данной серии статей Вы узнаете об основах создания сайтов на языке php.

Вы можете создавать скрипты на языке php и выполнять их на своём ПК, либо на хостинге с поддержкой языка php и баз данных my sql.

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

- megainformatic cms free;

- megainformatic cms express;

- megainformatic cms express files;

 
     
  Рассмотрим следующие вопросы:  
     
  1) Введение в язык php;  
     
  2) Работа с базами данных MySQL Описано как создать простейший счётчик посещаемости.  
     
  3) Выводим дату и время в формате RU  
     
  4) Добавляем созданный счетчик на все страницы Вашего Сайта  
     
  5) Что нужно для создания собственного сайта ?  
     
  6) Шаги, которые потребуются для создания простого и функционального сайта  
     
  [другие статьи]  
     
подробнее

     
 
Урок 4 Построение класса приложения
 
О том, что потребуется для данного урока читайте в основном разделе - уроки delphi directx 8.1
 
Далее у читателя подразумевается наличие базовых знаний языка Delphi.
 
[назад] [страница 2] [далее] [к содержанию]
 
Познакомившись с кодом класса CD3DApplication описанным в модуле D3DApp.pas библиотеки delphi directx 8.1 мы переходим к рассмотрению класса TD3DGameApp являющегося базовым классом D3D-приложения, используемым в игре "Ну, Погоди!". По большому счету ничего нового о функционировании D3D-приложения Вы здесь не узнаете, однако в качестве примера того, как строится конкретный базовый класс на примере конкретной законченной игры дальнейшее повествование будет Вам все же небезынтиресно.
 

Начнём с того, что модуль D3DApp.pas и CD3DApplication в игре "Ну, Погоди!" не применяется вообще. Вместо этого был создан самостоятельный базовый класс ориентированный именно на потребности конкретной игры, а не на те особенности, которые необходимо было рассмотреть в качестве примера во всех приложениях из DirectX SDK. Иными словами назначение класса CD3DApplication именно демонстративное.

Класс TD3DGameApp, который мы рассмотрим ниже, ориентирован на определенную конкретику, связанную с особенностями проекта игры "Ну, Погоди!"

 
Функционирование приложения строится на тех же принципах, которые мы рассматривали начиная с 1 урока.
 

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

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

 

Что потребуется при написании собственной игры?

Сначала я перечислю то, что потребуется обязательно при реализации абсолютно любой игры -

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

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

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

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

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

 
Теперь рассмотрим конкретные примеры того, что имеет место в коде игры "Ну, Погоди!". Замечу, что всё описанное ни в коем случае не является и не должно являться для Вас догмой. Поработав с примером и над созданием собственной игры Вы обязательно уясните для себя что-то свое и будете делать то, что Вам потребуется по-своему, а не так как описано здесь один в один. Другими словами по мере приобретения Вами опыта Вы сами решите что и как должно происходить в Вашем коде.
 

Опустим описание реализации кода методов TD3DGameApp.Create, Create_ и Destroy, так как оно за небольшими исключениями полностью похоже на то, что мы рассматривали на протяжении предыдущих 3х уроков.

Рассмотрим метод TD3DGameApp.OneTimeSceneInit

Внутри данного метода я обычно создаю объекты DirectInput и DirectSound, выполняю первоначальную инициализацию D3D-приложения, вызываю функцию рандомизации рандомизатора и перевожу приложение в состояние начальной инициализации ресурсов.

 

Далее действие происходит уже внутри FrameMove и Render. В зависимости от состояния приложения происходит загрузка необходимого минимума ресурсов, начинается опрос действий со стороны пользователя посредством DirectInput. Реакция на события выбора меню TMainMenu реализована вызовом обработчиков пунктов данных меню.

Наконец, когда пользователь запустил игру приложение переходит в состояние игры и выполняется игровой процесс.

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

Приложение построено таким образом, что после выполнения OneTimeSceneInit запускается непрерывный процесс выполнения метода TMainForm.ApplicationEventsIdle. Этот метод вызывается всегда, когда приложение находится в состоянии бездействия, а поскольку кроме данного метода приложение больше не выполняет никакую работу (помимо отрисовки и рассчетов игровой логики, выполняемых именно внутри данного метода), то всё процессорное время выделенное приложению уходит именно на выполнение данного метода.

Внутри данного метода исполняется g_d3dApp.Render3DEnvironment; в котором и реализовано выполнение упомянутых выше методов FrameMove и Render.

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

asBeginInit - в этом состоянии которое приложение принимает после успешного старта, происходит загрузка текстур и восстановление зависимых от устройства параметов ресурсов (в данном случае моделей полигонов, на поверхности которых происходит отображение нужных текстур);

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

В состоянии asInit происходит лишь смена состояния на новое asEndInit, которое сразу же переключит приложение в состояние готовности - asReady

Такие сложности связаны именно с периодической природой Render3DEnvironment, поэтому ОБЯЗАТЕЛЬНО! учитывайте этот момент, иначе будете получать всевозможные ошибки времени выполнения.

В состоянии asReady начинается ожидание действий со стороны пользователя (UpdateInput).

Назначение клавиш каждому из действий происходит в процедуре DefineDefaultKeys.

Обработка этих действий происходит в режимах готовности (asReady) и игры (asGame).

Режим паузы в ответ на действие GamePause переключает индикатор паузы m_bPaused на противоположное значение. В коде формирования игровой ситуации FrameMoveGameSituation учитывается состояние данного индикатора.

Также проверяется нажатие клавишы выхода из игры - действие GameExit.

Нажатие нарисованных на игровой панели клавиш при помощи мыши обрабатывается здесь следующим образом. Если выполняется действие PressButton, то определяются в каком месте находится при этом указатель мыши. Попадание его в определенную область вызывает срабатывание нужной кнопки на игровой панели. GameButtonDownUp применяется для корректной отработки нажатий/отпусканий клавиш игровой панели. В момент отпускания клавиши игровой панели срабатывает привязанное к ней действие. Кроме того, красным клавишам управления волком сопоставлены действия от клавиатуры LeftUpCatch, LeftDownCatch, RightUpCatch, RightDownCatch, т. к. по мере нарастания скорости игры требуется более высокая реакция игрока.

 

 

В состоянии asGame выполняется метод FrameMoveGameScene. Заглянув в его код Вы увидите несколько различных режимов, в которых может находиться игра:

gmRestart, gmGameA, gmGameB, gmTimer, gmSetAlarm, gmEndSetAlarm, gmStartGameOver, gmGameOver, gmStartLoadWinMultic, gmShowWinText, gmWinMultic, gmShowGameAMaxScore,
gmShowGameBMaxScore

 

Перечислим их назначение.

gmRestart - этот режим выполняет перезапуск игры независимо от текущего режима и переход в состояние готовности. Этот режим эмулирует поведение электронной игры "Ну, Погоди!" сразу же после ее включения.

gmGameA - запускает игру А, при этом яйца скатываются одновременно только с 3х лотков, прервать игру можно путем рестарта, паузы или закрытия приложения

gmGameB - аналогично, но яйца катятся с 4х лотков

gmTimer - эмуляция поведения электронной игры "Ну, Погоди!" в режиме отсчета времени. Отображается реальное время системных часов аналогичное тому, что имеется в правом нижнем углу экрана Windwows (в трее).

gmSetAlarm, gmEndSetAlarm - эмуляция режима установки времени подачи сигнала будильника, при этом если игра запущена, то в режимах "игра А", "игра Б" или отсчет времени в заданное время будет подан сигнал будильника

gmStartGameOver, gmGameOver - проигрыш, игра находится в состоянии ожидания дальнейших действий пользователя

gmStartLoadWinMultic, gmShowWinText, gmWinMultic - победа! игрок набрал трижды 999 очков. при этом будет показан поздравительный текст, а затем небольшой анимированный мультфильм с участием волка, зайца и других персонажей

gmShowGameAMaxScore, gmShowGameBMaxScore - режим показа максимального набранного в данном режиме количества очков - срабатывает в момент нажатия и удержания клавиш "игра А" или "игра Б" на игровой панели

 

Вам наверное интересно как осуществляется отображение графики в игре?

Начнём с того, что заглянем внутрь методов LoadGameTextures, RestoreGameTextures, InvalidateGameTextures, FreeGameTextures. В этих методах показано, как имена текстур из текстового файла загружаются сначала в список имен, а затем по этому списку производится загрузка и построение списка текстур (объектов класса TD3DImage2D). Из списка имен также считываются параметры размещения и масштабирования изображений.

В режиме игры А или Б сначала происходит вызов FrameMoveGameSituation;

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

1) Если индикатор паузы переключен в True, то DXTimer сбрасывается, а метод завершает работу;

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

3) Определяется текущее положение волка

4) Генерируются новые яйца на лотках, анимируется их качение по лоткам, анимируется выглядывание зайца из окошка, постепенно наращивается темп игры

5) Проверяется и анимируется разбивание яиц

6) Осуществляется мерцание и сброс (если требуется) штрафных очков

Вывод графики происходит внутри метода Render также в зависимости от состояния приложения.

DrawGameView > DrawGameScene осуществляет собственно рисование в зависимости от режима игры.

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

В реализации метода DrawGameElement нет ничего сложного. В зависимости от индекса вызывается нужный объект TD3DImage2D с вызовом его метода Draw2. Параметры вывода (координаты и масштабные коэффициенты извлекаются из параметров объекта PGamePanelElement).

 

Вот собственно и весь вывод графики.

Вывод звука осуществляется еще проще. Достаточно Вам посмотреть методы

function CreateSoundObjects(h_Wnd: HWND): HRESULT;
procedure DestroySoundObjects;
function LoadSoundList: HResult;
procedure FreeSoundList;
procedure PlaySound(Index: Integer);
procedure PlayEggRun;

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

 
Конечно простота реализации данной игры обусловлена в большой степени ее особенностями. Большинство объектов статичны, анимация сводится лишь к скрытию одних и показу других картинок. Логика игры также достаточно проста.
 
Возможно чуть более сложным Вам покажется использование 2D-анимации, которая применяется в призовом мультфильме. Этот процесс также основан на использовании класса TD3DImage2D. Более подробно о нём мы поговорим в 7 уроке.
 
Вот кажется и всё вкратце, о создании базового класса игрового приложения, который применялся в игре "Ну, Погоди!". Если есть вопросы - милости просим на форум или пишите на мой e-mail.
 
Но думаю, что особых трудностей не будет. Нужно лишь поэкспериментировать над созданием собственного, пусть пока небольшого, но уже полноценного игрового проекта. Удачи Вам!!!
 
[назад] [страница 2] [далее] [к содержанию]
 
     
     
     
     
подробнее

cj megainformatic - Я пишу музыку для души и для продажи

Зачем я пишу музыку ? Когда я это делаю я преследую 2 цели:

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

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

Что лучше писать свою музыку или слушать чужую ?

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

Я веду речь про крупные сайты музыкальных стоков (audio stock) где можно найти музыку самого разного качества и направленности.

Когда музыки очень много, возникает вопрос: а зачем писать еще ? Ведь итак уже её целое море, океан, лавина.

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

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

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

И если Вы хотите чего-то достичь, то как минимум нужно пытаться, а опускать руки - не стоит.

Самое интересное тут вот что - всё о чём мы говорим на самом деле уже может не быть таким актуальным, а вот когда приходит момент когда мы делаем очередной шаг, а не просто думаем или говорим про это, вот тогда уже наступает настоящий МОМЕНТ ИСТИНЫ - например, с течением времени может оказаться, что мелкие сайты, где мало музыки, но она приемлемого качества и является авторской, станут более актуальными нежели сайты крупных аудио стоков.

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

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

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

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

Кстати напоследок ссылка на мои свежие треки - Лето-осень 2014 cj megainformatic - native reactions - Естественные реакции

Спасибо вам, читающим данную статью и слушающим музыку.

подробнее

ПЕРСОНАЛЬНОЕ МЕСТО В ИГРЕ



show in english

Все пользователи со статусом БРОНЗОВЫЙ ЮЗЕР и выше получают ПЕРСОНАЛЬНОЕ
МЕСТО В ИГРЕ !

Что это такое ?

ПЕРСОНАЛЬНОЕ МЕСТО В ИГРЕ - это область в одной из игровых сцен
при наведении на которую указателя мыши Вы увидите особое окно.

В этом окне можно отобразить любой ваш текст.

Текст хранится как внешний файл. Что касается расположения
места - в какой сцене и в каком положении - это закодировано
в коде игры и изменить это могу лишь я, megainformatic.

Скриншот и описание места также будут приложены в релизе
в котором будет создано это место. Т. е. в следующем
ближайшем релизе который будет создан после того как
Вы поддержали проект.

ТАКИМ ОБРАЗОМ, ПОДДЕРЖАВ ПРОЕКТ ВЫ УВИДИТЕ СВОЕ ЛИЧНОЕ МЕСТО
В следующем ближайшем релизе. Что именно написать в этом тексте
также можно решить самому. По-умолчанию я добавлю туда текст
вашего комментария который Вы приложили к вашему платежу в
поддержку проекта. Но Вы можете сообщить и что-то другое.
Кроме того, скачав игру Вы сможете сами изменять этот текст.
Разница только в том, что в общем релизе который ВСЕ
скачают с сайта ваш текст увидят ВСЕ ИГРОКИ ! А в вашей
личной копии релиза - только те, кому Вы дадите её.



УЖЕ СОЗДАННЫЕ ПЕРСОНАЛЬНЫЕ МЕСТА В ИГРЕ

Харуки Судзумия доступно в версии 25.01.2018

Харуки Судзумия уже доступно в версии 25.01.2018



Ваше место в игре может быть таким

Ваше место в игре может быть таким в версии >25.01.2018



Александр Сычев доступно в версии >01.06.2018

Александр Сычев доступно в версии >01.06.2018



Дмитрий Долгов доступно в версии >01.06.2018

Дмитрий Долгов доступно в версии >01.06.2018





  Уроки Верстки  
     
  Что такое верстка сайтов ?  
     
 

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

в полиграфии и издательском деле - это процесс формирования страниц издания путём компоновки текстовых и графических элементов;

Верстка web-страниц - это то же самое с тем лишь отличием, что для представления внешнего вида страницы используется стандарт языка HTML.

 
     
 

Таким образом верстка Web-страниц или сайтов подразумевает создание внешнего вида этих страниц на языке HTML. Сверстанные страницы как правило не содержат функционал или содержат его минимум. Основная задача верстки - внешнее оформление и представление страницы.

Внутренние особенности работы - такие как обработка web-форм, обращение к базам данных, обработка и сохранение информации реализуются на других языках и к верстке не относятся.

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

 
     
  Способность страницы одинаково или максимально одинаково отображаться в распространенных браузерах - IE, FireFox, Chrome, Opera и Safari именуют кроссбраузерностью.  
     
  А вот корректность кода HTML на соответствие стандарту и в связи с этим также стремление к максимально правильному отображению в любых браузерах (естественно поддерживающих этот стандарт) именуют валидностью.  
     
 

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

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

 
     
  Ну что ж, случай первый: отображение дивов наложенных друг на друга поверх анимации flash  
     
 

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

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

 
     
                    <ДИВ КЛАСС="f_top_title">
                        <ДИВ КЛАСС="f_qs_container">                        
                            <ДИВ КЛАСС="f_quick_search">
                            ЗАКР ДИВ
                        ЗАКР ДИВ
                    ЗАКР ДИВ
 
     
 

русскоязычные написания вам нужно в собственном коде переписать как англоязычные, т.е. ДИВ = div, а КЛАСС = class, ЗАКР ДИВ = </div>

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

 
     
  Далее в css для этих классов был задан такой код -  
     
  .f_top_title {position: relative; top: 0; z-index: 1; height: 332px; background: #ffffff;}
.f_qs_container { position: absolute; top: 0; left: 0; z-index: 999; width: 100%; height: 340px;}
.f_quick_search { position: relative; top: 45px; left: 308px; z-index: 1000;  height: 285px; width: 313px; text-align: left;}
 
     
  В итоге во всех браузерах (IE, Firefox, Chrome, Safari) форма поиска отображалась где и положено, и только в Opera она была почему-то не на месте, а слева по краю контента страницы.  
     
  Однако решение как ни странно оказалось простым -  
     
  .f_qs_container { position: absolute; top: 0; left: 0; z-index: 999; width: 60%; height: 340px;}
.f_quick_search { position: relative; top: 45px; left: 308px; z-index: 1000;  height: 285px; width: 313px; text-align: left; float: right;}
 
     
  На этом маленьком примере видно, что задачей верстальщика на самом деле стало не столько оформление страниц сайта html и css кодом, сколько "борьба" с браузерами и выявление их скрытого поведения на одни и те же взаимозаменяемые html конструкции кода.  
     
  Вложенность ДИВов друг в друга  
     
 

Много раз я сталкивался с задачей позиционирования элементов на странице друг относительно друга. Заметим, что ситуация как раз напоминает решение предыдущего примера. Смысл задачи бывает следующий: даны несколько элементов или блоков, которые нужно разместить в некоторой части страницы в определенных её местах.

Первое что приходит в голову - это объявление их обычным тегом DIV и размещение один за другим с заданными при помощи position, либо при помощи margin или padding отступов. Однако в результате в разных браузерах блоки начинают вести себя не совсем так, как нужно. Они встают не на свои места, а иногда даже на взаимоисключающие друг друга позиции. Я, например, сталкивался с ситуацией когда в ИЕ блоки вставали прямо противоположно тому, как они были отображены в Firefox.

 
     
  Однако стоит вам выделить для нужных блоков отдельный большой блок, а сами эти блоки поместить в него, как задача сразу же решается словно бы сама собой. Т. е. если Вам никак не удается выровнять блоки в разных браузерах одинаково - попробуйте для всех этих блоков выделить отдельную область, создать её в виде большого блока, а более мелкие блоки размещать внутри большого. Тоже самое можно проделывать на уровне более мелких блоков - их можно размещать по принципу более мелкие в своём более крупном и так далее.  
     
  Несколько начальных уроков верстки - http://forum.megainformatic.ru/viewtopic.php?f=9&t=18  
     
     

 

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

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



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


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