Сегодня
8 октября 2024
21:21
Вход Sign In Регистрация Sign Up Забыли пароль ? Forgot password ?
VARVE - Приключения Кости Коробкина - Как я провел лето - интерактивный комикс
Приключения Кости Коробкина - Как я провел лето - интерактивный комикс (akk hiss)
подробнее...

Теги

сайты, игры, дизайн, продвижение, php, html, css, my sql, c++, delphi, photoshop, 3ds max, fl studio, трекерская музыка, уроки

Статьи сайта

Глубины программирования на C++

VARVE: Музыкальная страничка трэкера

Создание музыки и звука

VARVE: Создание музыки и звука: урок 2

Создание музыки и звука: урок 3 - настройка Impulse Tracker для работы в WinXP

Создание музыки и звука: урок 4 - Введение в Mod Plug Tracker

Создание музыки и звука: урок 5 - Первая композиция в Mod Plug Tracker

Создание музыки в Impulse Tracker 2.14 - урок 6 - Ввод Нот

Создание музыки в Impulse Tracker 2.14 Первая мелодия

Создание музыки в Impulse Tracker 2.14 Настройка параметров сэмплов

Создание музыки и звука: теория и практика создания трэкерской музыки

Что такое VARVE ?

Основы работы в Microsoft Visual Studio 2008 и DirectX 9 (DX SDK Aug 2008)

Введение в программирование игр на С++ для платформы DirectX 9 - Первый старт

Введение в программирование игр на С++ для платформы DirectX 9 - Меняем иконку приложения

Введение в программирование игр на С++ для платформы DirectX 9 Добавляем другую модель

Введение в программирование игр на С++ для платформы DirectX 9 Программирование игр в directx. Hello, World!

Введение в программирование игр на С++ для платформы DirectX 9 Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008

Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008 - Урок 1 Основные операторы языка C++

Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008 - Урок 1 Основные операторы языка C++ (часть 2)

Урок 2 Написание Win32-приложений. Обзор стартового кода Win32-приложения. Добавление ресурса текстовая строка

Урок 3 Создание Win32-приложений. Создание меню и простых диалоговых окон.

Урок 4 Создание Win32-приложений. Стандартные диалоги. Изучение сопутствующих конструкций языка. Консольные Win32-приложения. Указатели. Ссылочный тип. Массивы.

Урок 4 часть 2 Win32. Диалог выбора цвета, смена цвета фона окна приложения

Написание приложения DirectX9c + MFC в среде MSVS 2005

Создание компьютерных игр на основе DirectX в среде Delphi 6, 7

Создание компьютерных игр на основе DirectX в среде Delphi 6, 7 - Почему избраны DX8 и Delphi ?

Основы IDirectMusic8 в среде Delphi6-7

Основы DirectInput8 в среде Delphi 7

Основы DirectSound8 в среде Delphi6-7

Плагин для 3DS MAX из DX9 SDK

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

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

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

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

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

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

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

Моделируем девушку в 3ds max - Женская грудь

Моделируем девушку в 3ds max - Тело

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

megainformatic cms e-mailer

Моделируем девушку в 3ds max - Моделируем руку

Моделируем девушку в 3ds max - Кисть руки

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

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

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

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

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

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

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

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

megainformatic cms express files

Моделируем девушку в 3ds max - Моделируем голову

Моделируем девушку в 3ds max - Моделируем голову страница 2

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

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

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

Уроки delphi directx 8.1

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

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

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

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

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

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

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

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

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

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

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

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

Заметки по joomla - JFolder::create: Path not in open_basedir paths. Что это?

megainformatic cms express files - Добавление статей на сайт под управлением megainfromatic cms express files

Урок 7 2D-анимация

Урок 8 Загрузка/Сохранение текущей игры, режим паузы, режимы часов/будильника, запуск браузера Internet Explorer для показа сайта разработчика и других интернет-ресурсов

Урок 9 Тестирование и отладка приложения

Мои Музыкальные Миры

уроки Photoshop free

Создание фотореалистичной текстуры травы

megainformatic cms express

Моделируем девушку в 3ds max - Соединяем все части тела в единую модель

Моделируем девушку в 3ds max - Соединяем все части тела в единую модель страница 2

Моделируем девушку в 3ds max - Соединяем все части тела в единую модель страница 3

Методы создания растровых изображений в Adobe Photoshop

Рабочее пространство Adobe Photoshop

Бесшовные (тайловые) текстуры

Создание изображений огня, воды, неба

Создание текстур горных пород и суши (урок 5)

Рисование персонажей (урок 6)

Рисование фона (урок 6 часть 2)

Рельефные изображения

Добавление статей на сайт под управлением megainformatic cms express

Воспроизведение файлов в форматах it, xm, s3m, mod

Воспроизведение файлов в форматах it, xm, s3m, mod - страница 2

Воспроизведение в игре музыки в формате XM

Воспроизведение файлов в формате OGG Vorbis

игра "Веселый Буквоежка" - инструменты разработки

Игра "Веселый Буквоежка" - история создания проекта

Как анимировать паука ?

Моделируем девушку в 3ds max - Текстурируем модель

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

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

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

Верстка 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.

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

 

 

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



Рейтинг@Mail.ru
Время загрузки: 0,0321