Форумы Студии ВебАвтор /
16 Февраля 2020, 23:01:07 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.

Войти
Новости:
 
  Студия ВебАвтор   Начало   Помощь Поиск Календарь Войти Регистрация Каталог Студии ВебАвтор  
Страниц: [1]   Вниз
  Печать  
Автор Тема: Блочная верстка - плюсы и минусы  (Прочитано 9927 раз)
0 Пользователей и 1 Гость смотрят эту тему.
m3black
Гость
« : 23 Ноября 2007, 23:18:18 »

Почему не используем?

Записан
Прохожий
блотные
Начлаб
*****

Карма: -4
Offline Offline

Сообщений: 126


Просмотр профиля WWW
« Ответ #1 : 02 Декабря 2007, 01:15:16 »

Просвети ...

Если эфект будет, то почему бы и нет?

Давай попробуем на каком-нибудь нейтральном проекте.
Записан
m3black
Гость
« Ответ #2 : 02 Декабря 2007, 22:39:09 »

CSS: блочная верстка
24 мая 2007 г.
Когда браузеры имели маленькие номера версий, а список всех сайтов влезал в тонкую жёлтую книжечку, возникли изначальные правила и методы разметки веб-страниц. Например, верстка сложных страниц с помощью таблиц и невидимых изображений.

Но с развитием браузеров и стабилизацией стандартов, этот метод окончательно устарел, так как имеет много существенных недостатков. Поэтому постепенно все перешли на так называемую “блочную верстку”, о возможности использования которой первый раз я услышал ещё в 2002 году. Многие даже считают, что использование таблиц сейчас глупо и неоптимально.

Суть блочной верстки - в использовании всех возможностей CSS (каскадных таблиц стилей) вместо таблиц и направляющих изображений.

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


1. Базовая структура
Для начала, создадим базовую структуру HTML-страницы:

<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>

После этого наполним секции некоторым содержимым для наглядности.

<div id="wrap">
<div id="header"><h1>Заголовок страницы</h1></div>
<div id="nav">
<ul>
<li><a href="#">Раздел 1</a></li>
<li><a href="#">Раздел 2</a></li>
</ul>
</div>
<div id="main">
<h2>Колонка 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id="sidebar">
<h3>Колонка 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</div>
<div id="footer">
<p>Подвал</p>
</div>
</div>

У нас получился XHTML-документ без стилей, со структурой, которая позволяет использовать CSS для любых изменений в его отображении.

2. Параметры тегов <body> и <html>
Этот приём некоторые называют “ластик” - сброс параметров отступов на странице. Ну и заодно зададим основной цвет фона и текста.

body, html {margin:0;padding:0;
background:#a7a09a;
color:#000;}

3. Расположение основного контейнера
Теперь нужно расположить всё содержимое страницы в центре и задать ему ширину. Для этого у нас есть контейнер #wrap. Тут же зададим ему цвет фона.

Метод, который мы используем, основан на том, что если левый и правый отступы элемента определены как auto, то он всегда будет находиться в центре окна браузера.
А чтобы предотвратить проблемы в некоторых браузерах, связанные с тем, что окно может быть меньше контейнера #wrap, установим минимальную ширину и его и всей страницы.

body,html {
margin:0;
padding:0;
background:#a7a09a;
color:#000;
}
body {
min-width:750px;
}
#wrap {
background:#99c;
margin:0 auto;
width:750px;
}

А для наглядности раскрасим фоны всех контейнеров в разные цвета.

#header {background:#ddd;}
#nav {background:#c99;}
#main {background:#9c9;}
#sidebar {background:#c9c;}
#footer {background:#cc9;}

4. Расположение колонок
Чтобы две колонки (#main и #sidebar) отображались рядом, определим для них фиксированную ширину.

#main {
background:#9c9;
float:left;
width:500px;}
#sidebar {
background:#99c;
float:right;
width:250px;
}

5. Расположение подвала
Чтобы опустить секцию подвала в низ страницы, используем свойство clear, определяющее невозможность нахождения элементов на одной строке с текущим.

#footer {
background:#cc9;
clear:both;
}

6. Делаем пнель навигации горизонтальной
Контейнер #nav содержит список ссылок. Расположим его более правильно.

#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav li{
display:inline;
margin:0;
padding:0;
}

7. Настроим отступы
Почти готово. Небольшой тюнинг отступов элементов для лучшего отображения.

#header h1 {
padding:5px;
margin:0;
}
#nav {
background:#c99;
padding:5px;
}
#main h2, #main h3, #main p {
padding:0 10px;
}
#sidebar {
background:#99c;
float:right;
width:240px;
}
#sidebar ul {
margin-bottom:0;
}
#sidebar h3, #sidebar p {
padding:0 10px 0 0;
}
#footer p {
padding:5px;
margin:0;
}

Ну вот и готово. Полученный код можно использовать как основу для серьёзного дизайна, который можно будет изменить простой правкой CSS-файла.

http://zhilinsky.ru/2007/05/24/css-blochnaya-verstka/

« Последнее редактирование: 02 Декабря 2007, 22:43:12 от m3black » Записан
Прохожий
блотные
Начлаб
*****

Карма: -4
Offline Offline

Сообщений: 126


Просмотр профиля WWW
« Ответ #3 : 03 Декабря 2007, 00:56:32 »

Данный метод CSS был использован нами ещё при создании раздела "Пищевые добавки Vanhees" сайта tcvympel.ru в 2005 г.
 
Разработка - Паша, наполнение - Вадим.

См. http://www.tcvympel.ru/vanhees/vanhees.shtm
Правда сейчас зашел, работает с ошибкой.

Плюсы:
- наполнять проще,
- код стр. меньше
МИНУС:
- поисковики учитывают максимум 1-у стр. и не учитывают все остальные с расширением *.shtm, т.к. воспринимают все стр. в контейнере как 1-у стр.

По-этому мы отказались от CSS еще в 2005 г.!
Записан
MaksHram
блотные
Начлаб
*****

Карма: 3
Offline Offline

Пол: Мужской
Сообщений: 171


Ухххххх - Ты!!!!

229676888
Просмотр профиля
« Ответ #4 : 03 Декабря 2007, 12:19:42 »

Так ведь при использовании блочной верстки расширение html. как поисковики влияют на такие страницы. Это ведь по суди разные страницы но используют они одну таблицу стилей. Это ведь не подягивание шаблонов. но даже если расценить так, что говорить о cms?
Записан

Жить, как говорится, ХОРОШО!!
Страниц: [1]   Вверх
  Печать  
 
Перейти в:  

 
Rambler's Top100 Студия ВебАвтор: создание сайта, оптимизация, сопровождение, продвижение, раскрутка. Реклама в Интернет. Все о хостинге. Платный хостинг бесплатный. Сайт бесплатно. Финансовые консультации: бухгалтерский учет, управленческий, налоги, юридическое оформление бизнеса, делопроизводство организации. Юридические услуги: регистрация ОАО, ООО, ЗАО. Лицензирование, сертификация. Туры в Китай, Францию, Италию, Хорватию. Пляжный отдых. Билеты и туры на гонки Формула-1. Интернет-магазин F1: заказ, доставка. Туры на чемпионат Ф1. Женская обувь оптом от производителя. Сапоги женские туфли, ботинки. Напольные покрытия: паркетная доска массивна, художественный паркет, ламинат, плинтус. Продажа женской одежды оптом от производителя. Адвокат Нужная Нелли Борисовна.
Авиационные услуги: чартерные рейсы, деловая авиация бизнес, заказать самолет, заправки авиатопливом. Сила разума: семинары, консультирование, тренинги. Практические психологи, Москва. ТМВТ-Транс. Транспортные услуги: сопровождение грузов, страхование грузов, экспедирование, транспортная логистика. Паркетная доска, художественный паркет, фальшпол. Бальные танцы. Мастерская права. Услуги адвоката, представительство в суде. Отправка посылок. Оперативная полиграфия, экспресс доставка, отправка писем. Все для мясопереработки. ТЦ Вымпел предлагает все для мясопереработки: оболочки, пищевые добавки, белки, специи, красители. ТМВТ. Строительные материалы: кирпич, ЖБИ, бетон, щебень, цемент, сухая смесь.
Powered by MySQL Powered by PHP Powered by SMF 1.1.1 | SMF © 2006, Simple Machines LLC Valid XHTML 1.0! Valid CSS!