Отправляет email-рассылки с помощью сервиса Sendsay

Статьи по web-дизайну и web-программированию

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июль 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

487 подписчиков
0 за неделю
←   Все выпуски   →

Web-технологии для новичков


Web-технологии для новичков
Выпуск №11 - 03.07.07
Рассылку представляет сайт BooksPRO - графика и программирование.

BooksPRO - это сайт для дизайнеров и программистов (как начинающих, так и для профессиональных)! Здесь Вы найдете огромное количество самоучителей, статей, исходников, узнаете, что такое easter eggs и сможете весело отдохнуть от работы, читая анекдоты и увлекательные истории! А главное, все бесплатно!
www.bookspro.net.ru

От себя:

Привет! Это опять я и моя рассылка, сказать мне нечего, по-этому сразу к делу!

Таблицы vs. Блоки

Табличная верстка

Большая часть web-страниц, которые вы, являясь пользователем Интернета, ежедневно (еженедельно, ежемесячно) посещаете имеют в основе своей структуры таблицы. Табличная верстка очень популярна и используется большинством web-мастеров, как начинающих, так и профессионалов. Способ довольно прост: макет страницы создается в графическом редакторе в формате изображения. На этом этапе происходит разработка дизайна. Полученное изображение верстальщик делит на определенные области (скажем, хед-лайн, лого и прочее), каждая из которых сохраняется отдельно и помещается на странице как изображение или фон (background) некоторого элемента в ячейке таблицы. В одной ячейке - логотип, в другой - панель навигации, в третьей - блок основного контента страницы, и так далее. Сама таблица при этом остается не видимой невооруженному глазу. Искусство верстальщика заключается в умении наиболее рационально разделить исходное изображение (например, считается, что несколько маленьких изображений загрузятся быстрее, чем одно большое) и максимально оптимизировать "кусочки", чтобы страница не получилась слишком тяжелой. При верстке сложных по своей разметке страниц широко используется возможность создавать вложенные таблицы.

Пример кода страницы, сверстанной при помощи таблиц:

<html>
<head>
  <title></title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
     <td height="20" colspan="2" background="head_line.jpg">
       <!-- здесь у нас хед-лайн -->
     </td>
  </tr>
  <tr>
     <td width="150" height="80">
       <!-- здесь будет лого -->
       <img src="logo.gif" width="150" height="80" alt="логотип сайта" />
     </td>
     <td height="80" align="center" valign="middle">
       <!-- справа от лого можно поместить баннер -->
        <img src="banner.jpg" width="468" height="60" alt="баннер" />
     </td>
  </tr>
  <tr>
     <!--
        здесь - горизонтальная панель навигации (меню);
        ячейке задаем фон с некоторым поворяющимся 
        изображением (скажем, градиентом), наполняем ячейку
        ссылками, разделенными, например, символом bullet
     --> 
     <td height="20" colspan="2" background="menu_backgr.jpg">
       <a href="#">главная</a>&nbsp;&bull;&nbsp;
       <a href="#">о компании</a>&nbsp;&bull;&nbsp;
       <a href="#">услуги</a>&nbsp;&bull;&nbsp;
       <a href="#">контакты</a>
     </td>
  </tr>
  <tr>
     <td>
        <!-- вложенная таблица! -->
        <table width="100%" cellspacing="0" cellpadding="10" border="0">
          <tr>
            <td width="30%" bgcolor="#F7F7F7">
              <!-- это левый узкий столбец -->
            </td>
            <td width="60%">
              <!-- это основной контент блок -->
            </td>
          </tr>
        </table>
     </td>
  </tr>
</table>
</body>
</html>

В этом листинге я привел пример кода простейшего макета web-страницы с минимальным количеством структурных элементов. Код занял 53 строки и пять минут моего времени. Созданная страница будет иметь формат .html и полную автономность. Web-сайт, созданный на основе этого примера, будет состоять из набора страниц, идентичных данной во всем, кроме, к примеру, содержания основного контент блока. К чему я все это говорю? Читайте дальше, и поймете.

Блочная верстка

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

Блочная верстка - это создание структуры страницы при помощи боксов CSS.

Модель бокса CSS описывает прямоугольный бокс, который генерируется для элементов дерева документа и располагается в соответствии с моделью визуального форматирования.
Спецификация CSS 2, http://www.w3.org/TR/1998/REC-CSS2-19980512


Элементы уровня блока это элементы документа-источника, визуально отформатированные как блоки (например, параграфы). Различные значения свойства 'display' создают элемент уровня блока: 'block', 'list-item', 'compact', 'table'.
Спецификация CSS 2, http://www.w3.org/TR/1998/REC-CSS2-19980512


Инлайн-элементы это те элементы документа-источника, которые не образуют новых блоков содержимого; содержимое определяется в строке (на месте) (например, выделенные участки текста внутри параграфа, инлайн-изображения и т.п.). Различные значения свойства 'display' делают элемент инлайн: 'inline', 'inline-table', 'compact' и 'run-in' (не всегда; см. компактные и втягивающиеся боксы).
Спецификация CSS 2, http://www.w3.org/TR/1998/REC-CSS2-19980512

Для начала мы создадим структуру документа, его XHTML-каркас. Приступим-с.

<html>
<head>
  <title></title>
</head>
<body>
<!-- это хед-лайн -->
<div id="head_line"></div>

<!-- это верхняя часть, содержащая лого и баннер -->
<div id="logo_line">
  <img src="logo.gif" id="logo" alt="логотип сайта" />
  <img src="banner.jpg" id="banner" alt="баннер" />
</div>

<!-- это панель горизонтальной навигации -->
<div id="menu">
  <a href="#">главная</a>&nbsp;&bull;&nbsp;
  <a href="#">о компании</a>&nbsp;&bull;&nbsp;
  <a href="#">услуги</a>&nbsp;&bull;&nbsp;
  <a href="#">контакты</a>
</div>

<!-- это левый узкий левый столбец -->
<div id="left_col"></div>

<!-- это основной контент-блок -->
<div id="content_block"></div>

</body>
</html>

Часто можно заметить, что приверженцев блочной верстки называют также "дивниками". Все потому, что в основе блочной модели страницы лежат контейнеры div, в которые помещаются структурные элементы. Каждому контейнеру мы присвоили уникальный id - они нам очень пригодятся при создании для каждого div'a правил CSS, которые будут определять их взаимоположение и визуальное форматирование.

/* по умолчанию элемент body имеет отступы; они нам не нужны, убираем */
body {
   padding: 0px;
   margin: 0px;
}

/* это наш хед-лайн */
div#head_line {
   display: block;        /* блок; */
   width: 100%;         /* ширина 100%; */
   height: 20px;          /* высота 20px; */

  /* задали фону повторение по горизонтали, выравнивание влево кверху */
   background: url(head_line.jpg) top left repeat-x;     
}

/* это линия с лого и баннером */
div#logo_line {
   display: block;        /* блок; */
   width: 100%;         /* ширина 100%; */
   height: 80px;          /* высота 80px; */
}

/* лого */
div#logo_line img#logo {
   float: left;              /* всплывание - слева */
   width: 150px;
   height: 80px;
}

/* баннер */
div#logo_line img#banner {
   float: left;              /* всплывание - слева */
   width: 468px;
   height: 60px;
   margin: 10px 0px 10px 150px; /* выровняли по вертикали и отдвинули от лого */ 
}

/* это линия меню */
div#menu {
   display: block;        /* блок; */
   width: 100%;         /* ширина 100%; */
   height: 20px;          /* высота 20px; */
   padding: 5px;         /*внутренний отступ - ВНИМАНИЕ! - не входит в ширину */
 
  /* задали фону повторение по горизонтали, выравнивание влево кверху */
   background: url(menu_backgr.jpg) top left repeat-x;     
}

/* левый узкий столбец */
div#left_col {
   display: block;        /* блок */
   float: left;              /* всплывание - слева */
   width: 30%;
   padding: 10px;       /*внутренний отступ - ВНИМАНИЕ! - не входит в ширину */ 

   background: #F7F7F7;
}

/* основной контент блок */
div#content_block {
   display: block;
   float: right;
   width: 65%;          /* несколько процентов ширины "сьели" paddings */
   padding: 10px;     
}

Код CSS мы поместим в отдельный файл style.css, а в элементе head страницы вставим ссылку на него:

<link rel="stylesheet" type="text/css" href="style.css" media="all"  />

Зачем? Все просто. Помните, я, рассказывая о табличной верстке, говорил про сайт, набранный из n-количества таких страниц? Теперь представьте, что вам приспичило поменять у левой колонки цвет фона со светло-серого на белый. В первом случае вы будете корректировать атрибут background у ячейки каждой страницы. А во втором будет достаточно сменить правило для блока left_col в одном-единственном файле - style.css!

Мы по минимуму использовали возможности CSS в области визуального форматирования, однако, поработав, можно и из этого примитивного макета сделать "конфетку".

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

Источник: www.sun4es.metroland.ru
Анекдоты:

Три дня и три ночи целовал Иван Царевич спящую принцессу, а потом подумал: "Может, она действительно мертвая?"

***

Дункан Маклауд любил ходить по лесу и издеваться над кукушками.

***

"Что-то здесь не так.." - задyмчиво пpоизнес Колобок, медленно пеpежевывая остатки лисицы.
Полезные ссылки:

www.modding.ru - тут вы узнаете, что такое моддинг и все о нем!

Я уже не знаю хороших сайтов, поэтому буду просто давать ссылки:
www.rynet.ru - юмор, фильмы и другая дребедень)
www.yandex.ru - очень мощный, но не извесный поисковик. ГЫ )))

Присылайте ссылки на интересные сайты и они будут здесь!
Ответы на вопросы:

Пока вопросов не поступало. Пишите. Также можно (нужно) общаться на форуме BooksPRO! Кстати, там не нужна регистрация!!!
Работаю за еду =)

Что ж, на вакансию мало кто идет, поэтому, теперь наоборот я предлагаю свои услуги.
Чем могу помочь: постараюсь выполнить любую удаленную работу (установка и настройка CMS, дизайн сайта, создание логотипа, набор текста и т.д.) пишите, если не смогу, откажусь.
Что взамен: деньги (беру не много) или ваш вариант (если очень выгодный).
Все выпуски рассылки можно найти по адресу http://subscribe.ru/catalog/inet.webbuild.programming.

E-mail: bookspro@yandex.ru
Web: www.bookspro.net.ru
ICQ: 275389496
На этом все. Всем удачи и пока!
С уважением, Kenny.
В избранное