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

Все о сайтостроительстве! Хотите сделать сайт? Легко!!!

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

При закрытии подписчики были переданы в рассылку "БЛОГика: жизнь и заработок в Сети" на которую и рекомендуем вам подписаться.

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

  Июнь 2010   →
 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
Автор
phppro2010@yandex.ru

Статистика

220 подписчиков
-1 за неделю
←   Все выпуски   →

Все о сайтостроительстве! Хотите сделать сайт? Легко!!! Вёрстка.


Вёрстка

 

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

  1. Резиновая;
  2. Фиксированная;
  3. Гибридная.

Кроме того по стилю вёрстки есть такие варианты каждого из видов:

  • Блочная;
  • Табличная.

Рассмотрим всё это по-порядку:

Резиновая вёрстка

Сайты с таким видом вёрстки растягиваются  на всю ширину экрана, тоесть в css пишут такие строки:

body { 

width:100%;

}

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

 

div { 

width:25%;

}

Плюсы этого вида вёрстки:

  • На больших экранах клиенты смогу смотреть сайт во весь экран;
  • При грамотной вёрстке можно достичь огромной универсальности сайта.

Минусы:

  • Могут быть проблемы с просмотром сайта на маленьких экранах;
  • Текст расплывается по всей ширине блока, в следствии чего страдает удобство чтения текста.

Решение отрицательных моментов резиновой вёрстки

Для решения проблемы №1 делаем минимальную ширину:

body { 

width:100%;

min-width:1024px;

}

Тогда если ширина экрана пользователя меньше 1024px, то сайт увеличится до этого размера, что и спасет ситуацию.

Для решения проблемы №1 делаем максимальную ширину:

 

body { 

width:100%;

min-width:1024px;

min-width:2048px;

}

Тогда если ширина экрана больше 2048px, то сайт сузится, что и решит проблему.

Совет: Старайтесь сделать так, чтобы в строке на вашем сайте было не более 55 символов, иначе читать будет затруднительно.

Фиксированная вёрстка

Сайты с таким видом вёрстки растягиваются  не на всю ширину экрана, тоесть в css пишут такие строки:

body { 

width:1024px; //В этом случае ширина сайта будет 1024px на всех экранах. Можно поставить любое значение ширины

}

А другие блоки позиционируются относительно размера экрана, например если DIV блок должен занимать 500px экрана то пишут:

 

div { 

width:500px;

}

Плюсы этого вида вёрстки:

  • Не требуется выставлять максимальную и минимальную ширину сайта;
  • Этот макет намного проще резинового.

Минусы такого вида:

  • Сайт будет смотреться неприглядно на больших мониторах;
  • У мониторов с меньшей шириной экрана возникнет полоса прокрутки.

Гибридная вёрстка

Когда в сайте присутствуют элементы и резиновой, и фиксированной вёрстки, такая вёрстка называется гибридной. Пример гибридной вёрстки, в котором вы можете увидеть реализацию максимальной и минимальной ширины - мой сайт: http://wkyborgw.co.cc/

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

Блочная вёрстка: вёрстка в которой в качестве составных элементов страницы используются элементы DIV.

Табличная вёрстка: вёрстка в которой в качестве составных элементов страницы используются таблицы (<table>).

Блочная вёрстка считается семантически более правильной.

Примеры сайта с резиновой вёрсткой:

http://w3.org

http://artlebedev.ru

Примеры сайта с фиксированной вёрсткой:

http://shop.botteganova.ru

http://elgora.com

И самое главное: Выбирайте вёрстку, в зависимости от требований ПРОЕКТА!

Желаю удачи, в таком важном деле, как вёрстка сайтов.





В избранное