bOntONweb » HTML http://www.bontonweb.com development Thu, 28 Oct 2010 18:45:06 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 День Загрузки 2008: Firefox 3 ставит рекорд http://www.bontonweb.com/texnologii/html/den-zagruzki-2008-firefox-3-stavit-rekord.html http://www.bontonweb.com/texnologii/html/den-zagruzki-2008-firefox-3-stavit-rekord.html#comments Thu, 12 Jun 2008 10:12:45 +0000 coder http://www.bontonweb.com/texnologii/html/den-zagruzki-2008-firefox-3-stavit-rekord.html firefox.png
17 июня 2008 года выходит официальный релиз Firefox 3. В этот день мы можем помочь горячо любимому браузеру установить рекорд как самой загружаемой программе за 24 часа.
Присоединиться к сообществу пользователей Firefox и внести посильный вклад в установление мирового рекорда можно здесь: http://www.spreadfirefox.com/ru/worldrecord/

]]> http://www.bontonweb.com/texnologii/html/den-zagruzki-2008-firefox-3-stavit-rekord.html/feed 1 Шрифты для WEB: правила использования http://www.bontonweb.com/texnologii/html/shrifty-dlya-web-pravila-ispolzovaniya.html http://www.bontonweb.com/texnologii/html/shrifty-dlya-web-pravila-ispolzovaniya.html#comments Fri, 16 May 2008 16:11:39 +0000 coder http://www.bontonweb.com/texnologii/html/shrifty-dlya-web-pravila-ispolzovaniya.html Занимаясь непосредственно версткой сайтов, часто сталкиваюсь с тем, что многие разработчики не знают основных правил использования шрифтов для html страниц. Это приводит к тому, что во-первых сайт по-разному отображается в разных браузерах и на разных платформах. Во-вторых, неуместное применение нестандартных шрифтов снижает семантичность верстки (например, заголовки приходиться делать не текстом, а картинками) и ведет к утяжелению кода (из-за использования дополнительных скриптов и технологий, например, sIFR и т.д.).

Поэтому при разработке дизайна страниц необходимо всегда помнить и неукоснительно соблюдать следующие правила:

  1. размер основного шрифта документа – не менее 10 px;
  2. запрещается применение сглаживания и эффектов для шрифтов размером менее 14 рх;
  3. запрещается применение сглаживания и эффектов в основном тексте и заголовках сайта;
  4. цвет указвыается явно в свойствах шрифта, а не через эффекты слоя;
  5. запрещается использовать эффекты прозрачности для основного текста сайта;
  6. не допускается растеризовывать текст;
  7. все шрифты, использованные в дизайне, должны быть приложены к макету в отдельной папке fonts;
  8. для основного текста сайта, заголовков и ссылок необходимо использовать безопасные шрифты (таблицу безопасных шрифтов смотрим  здесь).

У Вас наверное возник вопрос – что такое безопасные шрифты?  Это шрифты которые одинаково (или практически одинаково) выглядят в разных браузерах и на разных платформах. Использование этих шрифтов обеспечивает корректное отображение сайта у любого посетителя.

    ]]>     http://www.bontonweb.com/texnologii/html/shrifty-dlya-web-pravila-ispolzovaniya.html/feed 3     jQuery API расширение для Dreamweaver http://www.bontonweb.com/texnologii/html/jquery-api-rasshirenie-dlya-dreamweaver.html http://www.bontonweb.com/texnologii/html/jquery-api-rasshirenie-dlya-dreamweaver.html#comments Mon, 21 Apr 2008 12:17:59 +0000 coder http://www.bontonweb.com/texnologii/html/jquery-api-rasshirenie-dlya-dreamweaver.html Постовой: рецепты народной медицины
    частное фото

    Задача: максимально упростить использование JavaScript-библиотеки jQuery при верстке сайтов в Dreamweaver.
    Решение: для этого удобно установить специальное расширение для Dreamweaver, которое значительно упрощает и ускоряет процесс разработки скриптов на базе библиотеки jQuery

    Скачать расширение

    ]]>     http://www.bontonweb.com/texnologii/html/jquery-api-rasshirenie-dlya-dreamweaver.html/feed 1     Conditional Comments http://www.bontonweb.com/texnologii/html/conditional-comments.html http://www.bontonweb.com/texnologii/html/conditional-comments.html#comments Tue, 08 Jan 2008 17:38:21 +0000 coder http://www.bontonweb.com/texnologii/html/conditional-comments.html Проблема: подключать разные таблицы стилей в зависимости от браузера (версии браузера).
    Решение: используем условные коментарии (conditional comments)

    PLAIN TEXT
    HTML:
    1. <!--[if IE]>
    2. Код для IE 5+
    3. <![endif]-->
    4.  
    5. <![if !IE]>
    6. Код для всех браузеров, кроме IE
    7. <![endif]>
    8.  
    9. <!--[if IE 5.5000]>
    10. Код для IE версии 5.5
    11. <![endif]-->
    12.  
    13. <!--[if IE 6]>
    14. Код для IE версии 6
    15. <![endif]-->

    Операторы:
    ! - оператор логического отрицания "НЕ"
    lt - оператор "младше чем"
    lte - оператор "младше чем или равен"
    gt - оператор "старше чем"
    gte - оператор "старше чем или равен"

    ]]>     http://www.bontonweb.com/texnologii/html/conditional-comments.html/feed 0     Применить стиль только в Opera http://www.bontonweb.com/texnologii/html/primenit-stil-tolko-v-opera.html http://www.bontonweb.com/texnologii/html/primenit-stil-tolko-v-opera.html#comments Tue, 18 Dec 2007 23:35:46 +0000 coder http://www.bontonweb.com/texnologii/html/primenit-stil-tolko-v-opera.html Проблема: необходимо применить стиль style_01 только в браузере Opera.
    Решение: для этого используем CSS хак следующего вида:

    PLAIN TEXT
    CSS:
    1. html:first-child .style_01{
    2.     margin: 0px 0px 0px 288px;
    3.         }

    ]]>     http://www.bontonweb.com/texnologii/html/primenit-stil-tolko-v-opera.html/feed 0     Layout #1. Резина. Три колонки (ширина в %) http://www.bontonweb.com/texnologii/html/layouts/layout-1-rezina-tri-kolonki-shirina-v.html http://www.bontonweb.com/texnologii/html/layouts/layout-1-rezina-tri-kolonki-shirina-v.html#comments Thu, 13 Dec 2007 07:47:01 +0000 coder http://www.bontonweb.com/texnologii/html/layouts/33.html Layout #1
    Резина 100%. Ширина всех колонок в %.

    PLAIN TEXT
    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    4. <title>Layout 1</title>
    5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    6. <style type="text/css">
    7. html, body {
    8.     margin:0;
    9.     padding:0
    10. }
    11. div#wrapper {
    12.     float:left;
    13.     width:100%
    14. }
    15. div#content {
    16.     margin: 0 25%
    17. }
    18. div#navigation {
    19.     float:left;
    20.     width:25%;
    21.     margin-left:-100%
    22. }
    23. div#extra {
    24.     float:left;
    25.     width:25%;
    26.     margin-left:-25%
    27. }
    28. div#footer {
    29.     clear:left;
    30.     width:100%
    31. }
    32. </style>
    33. </head>
    35. <div id="container">
    36.   <div id="header">
    37.     <h1>Header</h1>
    38.   </div>
    39.   <div id="wrapper">
    40.     <div id="content">
    41.     </div>
    42.   </div>
    43.   <div id="navigation">
    44.   </div>
    45.   <div id="extra">
    46.   </div>
    47.   <div id="footer">
    48.   </div>
    49. </div>
    50. </body>
    51. </html>

    ]]>     http://www.bontonweb.com/texnologii/html/layouts/layout-1-rezina-tri-kolonki-shirina-v.html/feed 0     Шаблоны разметки страниц. Вступление. http://www.bontonweb.com/texnologii/html/layouts/shablony-razmetki-stranic-vstuplenie-2.html http://www.bontonweb.com/texnologii/html/layouts/shablony-razmetki-stranic-vstuplenie-2.html#comments Tue, 11 Dec 2007 13:57:46 +0000 coder http://www.bontonweb.com/layouts/shablony-razmetki-stranic-vstuplenie-2.html На этапе верстки сайта возникает проблема создания разметки которая должна соответствовать следующим требованиям:

    1. Валидность HTML
    2. Валидность CSS
    3. Кроссбраузерность.
    4. Отсутствие CSS-хаков.


    В сети есть множество библиотек с шаблонами лейаутов. Наиболее оптимальным на мой взгляд решением является галерея лейаутов http://blog.html.it/layoutgala/ .Эти лейауты выполнены с использованием отрицательный отступов и обеспечивают:

    1. Валидный HTML и CSS
    2. Совместимость с браузерами Internet Explorer/win 5.0, 5.5, 6, 7; Opera 8.5+, Firefox 1.5+, Safari 2.
    3. Семантический код.

    В общем виде разметка страницы имеет вид:

    PLAIN TEXT
    HTML:
    1. <div id="container">
    2.   <div id="header">Header</div>
    3.   <div id="wrapper">
    4.     <div id="content">Content</div>
    5.   </div>
    6.   <div id="navigation">Navigation</div>
    7.   <div id="extra">Extra stuff</div>
    8.   <div id="footer">Footer</div>
    9. </div>

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

    ]]>     http://www.bontonweb.com/texnologii/html/layouts/shablony-razmetki-stranic-vstuplenie-2.html/feed 0     Выпадающее меню. Качественная реализация. http://www.bontonweb.com/texnologii/html/vypadayushhee-menyu-kachestvennaya-realizaciya.html http://www.bontonweb.com/texnologii/html/vypadayushhee-menyu-kachestvennaya-realizaciya.html#comments Wed, 21 Nov 2007 22:51:44 +0000 coder http://www.bontonweb.com/texnologii/html/vypadayushhee-menyu-kachestvennaya-realizaciya.html При работе над проектами часто возникает необходимость создания выпадающего меню. Существует большое количество скриптов, реализующих этот функционал. Но при их практическом применении необходимо чтобы скрипт соответствовал следующим требованиям:

    1. Кроссбраузерность - корректная работа скрипта в необходимых браузерах.
    2. Правильное позиционирование меню при изменении разрешения экрана (особенно актуально при резиновой верстке).
    3. Стабильное поведение меню при наведении курсора.
    4. Простая смена оформления через редактирование CSS.
    5. Легкость добавления новых пунктов.
    6. Семантика (это сейчас модно).
    7. Простая настройка дополнительных параметров (временных задержек, дополнительных эффектов и т.д.)


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

    PLAIN TEXT
    HTML:
    1. <p class="chromestyle" id="chromemenu">
    3.     <li><a href="http://www.dynamicdrive.com">Home</a></li>
    4.     <li><a href="#" rel="dropmenu1">Resources</a></li>
    5.     <li><a href="#" rel="dropmenu2">News</a></li>
    6. </ul>
    7. <!--1st drop down menu -->
    8.  
    9. <p id="dropmenu1" class="dropmenudiv"> <a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
    10. <a href="http://www.cssdrive.com">CSS Drive</a>
    11. <a href="http://www.javascriptkit.com">JavaScript Kit</a>
    12.  
    13. <!--2nd drop down menu -->
    14.  
    15. <p id="dropmenu2" class="dropmenudiv" style="width: 150px"> <a href="http://www.cnn.com/">CNN</a>
    16. <a href="http://www.msnbc.com">MSNBC</a>
    17. <a href="http://news.bbc.co.uk">BBC News</a>
    18.  
    19. <script type="text/javascript">
    20. cssdropdown.startchrome("chromemenu")
    21. </script>

    Содержимое выпадающего меню находится в дивах div id="dropmenu1",id="dropmenu2". К конкретному пункту меню привязывается строкой rel="dropmenu1" (показывает div id="dropmenu1"). Настройку оформления производим в css файле. Также возможно настроить задержку сворачивания меню, подключить эффекты и анимацию.
    Этот скрипт использовал при верстке сайта http://mntk.rosenergoatom.ru/ и других проектах.

     

    ]]>     http://www.bontonweb.com/texnologii/html/vypadayushhee-menyu-kachestvennaya-realizaciya.html/feed 3     Центрирование контента по горизонтали и вертикали http://www.bontonweb.com/texnologii/html/centrirovanie-kontenta-po-gorizontali-i-vertikali.html http://www.bontonweb.com/texnologii/html/centrirovanie-kontenta-po-gorizontali-i-vertikali.html#comments Thu, 15 Nov 2007 11:10:06 +0000 coder http://www.bontonweb.com/texnologii/html/centrirovanie-kontenta-po-gorizontali-i-vertikali.html Проблема: необходимо отцетрировать бокс с контентом по горизонтали и вертикали.
    Решение:

    1. присваиваем боксу, который необходимо поместить в центр экрана class="centered".
    2. в css прописываем:
      PLAIN TEXT
      CSS:
      1. .centered {
      2. position: absolute;
      3. top: 50%;
      4. left: 50%; }


      Сейчас мы установили верхний левый угол бокса в центр страницы. На экране видим примерно следующее:

    3. Смещаем бокс на половину его ширины влево и на половину высоты вверх при помощи отрицательного margin:
      PLAIN TEXT
      CSS:
      1. .centered {
      2. position: absolute;
      3. top: 50%;
      4. left: 50%;
      5. margin-top: -50px;
      6. margin-left: -100px; }

      В итоге получаем результат:

    ]]>     http://www.bontonweb.com/texnologii/html/centrirovanie-kontenta-po-gorizontali-i-vertikali.html/feed 0     Рамка вокруг флеша в IE7. http://www.bontonweb.com/texnologii/html/ramka-vokrug-flesha-v-ie7.html http://www.bontonweb.com/texnologii/html/ramka-vokrug-flesha-v-ie7.html#comments Mon, 12 Nov 2007 21:49:06 +0000 coder http://www.bontonweb.com/texnologii/html/ramka-vokrug-flesha-v-ie7.html
    Проблема: в IE7 флеш отображается с рамкой.
    Решение:

    1. Скачиваем последнюю версию скрипта SWFObject (http://blog.deconcept.com/swfobject/swfobject.zip).
    2. Распаковываем архив.
    3. Копируем файл swfobject.js в корень сайта или в папку со скриптами.
    4. Подключаем скрипт swfobject.js:
      5. PLAIN TEXT
      HTML:
      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      5. <title>SWFObject embed by Geoff Stearns (basic) @ deconcept</title>
      6. <!-- SWFObject embed -->
      7. <script type="text/javascript" src="swfobject.js"></script>
      8. </head>

    5. Добавляем div в который будет грузиться флеш. Присваеваем этому div id="flashcontent".
    6. После него прописываем вызов скрипта:
      7. PLAIN TEXT
      HTML:
      2. <div id="flashcontent">
      3.     <strong>You need to upgrade your Flash Player</strong>
      4. </div>
      5. <script type="text/javascript">
      6.         // <![CDATA[
      7.        
      8.         var so = new SWFObject("so_tester.swf", "sotester", "300", "300", "9", "#FF6600");
      9.         so.addVariable("flashVarText", "this is passed in via FlashVars for example only"); // this line is optional, but this example uses the variable and displays this text inside the flash movie
      10.         so.write("flashcontent");
      11.        
      12.         // ]]>
      13.     </script>
      14. </body>
      15. </html>

    7. В итоге получаем конструкцию типа:
      8. PLAIN TEXT
      HTML:
      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      5. <title>SWFObject embed by Geoff Stearns (basic) @ deconcept</title>
      6. <!-- SWFObject embed -->
      7. <script type="text/javascript" src="swfobject.js"></script>
      8. </head>
      10. <div id="flashcontent">
      11.     <strong>You need to upgrade your Flash Player</strong>
      12. </div>
      13. <script type="text/javascript">
      14.         // <![CDATA[
      15.        
      16.         var so = new SWFObject("so_tester.swf", "sotester", "300", "300", "9", "#FF6600");
      17.         so.addVariable("flashVarText", "this is passed in via FlashVars for example only"); // this line is optional, but this example uses the variable and displays this text inside the flash movie
      18.         so.write("flashcontent");
      19.        
      20.         // ]]>
      21.     </script>
      22. </body>
      23. </html>

    8. Производим настройку основных параметров:

      9. var so = new SWFObject("so_tester.swf", "sotester", "300", "300", "9", "#FF6600");

      В общем виде:
      var so = new SWFObject(swfName, idFlashBox, widthSwf, heightSwf, playerVersion, swfBgColor);
      swfName - имя swf файла;
      idFlashBox - id контейнера в который грузим флеш;
      widthSwf - ширина флеша;
      heightSwf - высота флеша;
      playerVersion - версия флеш-плеера;
      swfBgColor - цвет бекграунда.

    9. Дополнительные параметры:

      10. quality - качество воспроизведения. Принимает значения: low, high, autolow, autohigh, best. По умолчанию high;
      wmode - устанавливает свойство Window Mode ролика. Значения: Window - ролик проигрывается в рамке, Opaque - флеш скрывает все, что находится под ним на странице, Transparent - сквозь прозрачные части ролика виден фон страницы;
      menu - определяет как будет показываться контекстное меню ролика.true показывает меню, false - отображаются только пункты Settings и About Flash.

    Код с настройкой дополнительных параметров:

    PLAIN TEXT
    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>SWFObject embed by Geoff Stearns (basic) @ deconcept</title>
    6. <!-- SWFObject embed -->
    7. <script type="text/javascript" src="swfobject.js"></script>
    8. </head>
    10. <div id="flashcontent">
    11.     <strong>You need to upgrade your Flash Player</strong>
    12. </div>
    13. <script type="text/javascript">
    14.         // <![CDATA[
    15.        
    16.         var so = new SWFObject("so_tester.swf", "sotester", "300", "300", "9", "#FF6600");
    17.         so.addVariable("flashVarText", "this is passed in via FlashVars for example only"); // this line is optional, but this example uses the variable and displays this text inside the flash movie
    18.         so.addParam("quality", "low");
    19.         so.addParam("wmode", "transparent");
    20.         so.addParam("menu", "false");
    21.         so.write("flashcontent");
    22.        
    23.         // ]]>
    24.     </script>
    25. </body>
    26. </html>


    Примеры использования SWFObject:

    http://www.projects.bontonweb.com/029/news.html

    http://www.projects.bontonweb.com/023/index.html

    ]]>     http://www.bontonweb.com/texnologii/html/ramka-vokrug-flesha-v-ie7.html/feed 6