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

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

Теги

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

Статьи сайта

Yie Ar Kung-Fu 2 | ZX Spectrum | fighting game | Imagine Software Ltd, 1986

Highlander | ZX Spectrum | fighting game | Ocean Software Ltd, 1986

Uchi Mata | ZX Spectrum | fighting game | Martech Games Ltd, 1987

Mortal Kombat II | ZX Spectrum | fighting game | Perspective Group, 2004

Freddy Hardest | ZX Spectrum | arcade game | Dinamic Software, 1987

Mot | ZX Spectrum | arcade game | Opera Soft S.A., 1989

Hyperaction | ZX Spectrum | arcade game | Silversoft Ltd, 1984

Future Looter | ZX Spectrum | arcade game | Timmy, 2011

Saboteur! | ZX Spectrum | arcade game | Durell Software Ltd, 1985

Psycho Pigs U.X.B. | ZX Spectrum | arcade game | US Gold Ltd, 1988

Panzadrome | ZX Spectrum | arcade game | Ariolasoft UK Ltd, 1985

Paperboy | ZX Spectrum | arcade game | Elite Systems Ltd, 1986

Trantor: The Last Stormtrooper | ZX Spectrum | arcade game | Go!, 1987

Scuba Dive | ZX Spectrum | arcade game | Durell Software Ltd, 1983

Aquaplane | ZX Spectrum | arcade game | Quicksilva Ltd, 1983

Spy vs Spy | ZX Spectrum | arcade game | Beyond Software, 1985

Raster Runner | ZX Spectrum | arcade game | Mastertronic Plus, 1990

1kdj | ZX Spectrum | music editor | Ate Bit, 2009

Music Synth | ZX Spectrum | music editor | Your Sinclair, 1993

Chip Tracker | ZX Spectrum | music editor | Alone Coder, 2004

Prodigi Editor | ZX Spectrum | music editor | ,

A.Y. Tracker | ZX Spectrum | music editor | Jonathan Cauldwell, 1992

| ZX Spectrum | music editor | Alone Coder, 2006

X-Tracker | ZX Spectrum | music editor | Scorpion Software [2], 2004

Extreme's Tracker | ZX Spectrum | music editor | Red Limited Drunkards Group, 1999

Soundtracker | ZX Spectrum | music editor | Ultrasoft, 1993

Fast Tracker | ZX Spectrum | music editor | ,

Star Control | ZX Spectrum | strategy game | Accolade Inc, 1991

Stonkers | ZX Spectrum | strategy game | Imagine Software Ltd, 1983

Vikings | ZX Spectrum | strategy game | Challenge Software, 1989

Napoleon at War | ZX Spectrum | strategy game | CCS, 1986

Armageddon Man, The | ZX Spectrum | strategy game | Martech Games Ltd, 1987

Nebula | ZX Spectrum | strategy game | Red Shift Ltd, 1984

King's Bounty | ZX Spectrum | strategy game | Energo, 1993

General, The | ZX Spectrum | strategy game | CCS, 1989

Sea War | ZX Spectrum | strategy game | Panda Software, 1982

Battle of Britain | ZX Spectrum | strategy game | PSS, 1986

War in Middle Earth | ZX Spectrum | strategy game | Melbourne House, 1989

игры онлайн | games online | play online | zx-spectrum games

Tobruk | ZX Spectrum | strategy game | PSS, 1987

Genghis Khan | ZX Spectrum | strategy game | Positive, 1991

Gallipoli | ZX Spectrum | strategy game | CCS, 1986

Mapsnatch | ZX Spectrum | strategy game | Dinamic Software, 1984

Mad Mix Game | ZX Spectrum | maze game | Topo Soft, 1988

Equinox | ZX Spectrum | maze game | Mikro-Gen Ltd, 1986

Nanako Descends to Hell | ZX Spectrum | maze game | Ubhres Productions, 2009

Maritrini, Freelance Monster Slayer | ZX Spectrum | maze game | Ubhres Productions, 2012

Mad Mix 2 | ZX Spectrum | maze game | Topo Soft, 1990

Fat Worm Blows a Sparky | ZX Spectrum | maze game | Durell Software Ltd, 1986

Ant Attack | ZX Spectrum | maze game | Quicksilva Ltd, 1983

Dingo | ZX Spectrum | maze game | Tardis Remakes, 2011

Cheril of the Bosque | ZX Spectrum | maze game | Ubhres Productions, 2010

Pac-Mania | ZX Spectrum | maze game | Grandslam Entertainments Ltd, 1988

Boulder Dash | ZX Spectrum | maze game | Front Runner, 1984

Ms. Pac-Man | ZX Spectrum | maze game | Atarisoft, 1984

Pi-In'Ere | ZX Spectrum | maze game | Automata UK Ltd, 1984

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

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

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

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

 

 

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



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