Давно в Дизайн Мании не было статей по тематике верстки, которая весьма и весьма актуальна для многих вебмастеров. Сегодняшний пост можно назвать в какой-то степени “обучающим” и полезным не только для начинающих верстальщиков, но и бывалых работников, которые не застрахованы от таких простых, но ненужных ошибок при HTML верстке. Вообще правильнее сказать даже не ошибки, а типичные вредные привычки и, то что называется, «плохая школа». Веб-дизайн — такая штука где до сих пор не существует 100% стандартов. Уже одно это является благодатной почвой для того чтобы каждый писал код так как заблагорассудится. Но, исправляться никогда не поздно! Давайте избавимся хотя бы от десяти распространенных пороков. Для каждой из вредных привычек HTML верстки вы также найдете небольшое пояснение, которое поможет понять почему нужно использовать тот или иной вариант.

Размещение блочного элемента внутри строчного

В HTML каждый элемент может быть представлен как строчный или блочный. Каждый тег по своей природе может быть блочным или строчным. Блочные элементы составляют структуру документа, например DIV. Строчный элемент может размещаться внутри блочного, но не наоборот. Собственно, достаточно распространенная ошибка для некоторых начинающих оптимизаторов, которые добавляют ссылки в элементы H1, H2 и т.п. Хорошо, что многие wordpress шаблоны используют правильную HTML верстку.

Отсутствие атрибута ALT для картинок

Атрибут ALT является необходимым элементном для каждого изображения размещаемого на веб-странице. Благодаря ему пользователь может получить представление о изображение, даже если он это изображение не видит (в браузере отключено отображение картинок или устройство не позволяет загружать/отображать изображения).

ALT должен описывать картинку, поэтому, использовать его в виде alt=”image” – неправильно. Если ваша картинка используется чисто в декоративных целях, можно оставить атрибут пустым (alt=”"), но присутствовать он должен в любом случае. Следует также заметить, что атрибут alt используется для поиска по картинкам, поэтому при оптимизации сайта данному аспекту нужно уделять отдельное внимание.

Неиспользование списков

Некоторые веб-мастера почему-то избегают использование маркированных списков <ul> (и <ol>) даже там где они нужны. Это не является большой ошибкой, но от оптимального правильного решения тоже далеко. Незачем громоздить нелепые конструкции когда есть специально предназначенные для этого теги.

Использование тегов <b> и <i>

Теги <b> и <i> превращают текст соответственно в написанный жирным (полужирным) и курсивным начертанием. По современным представлениям лучше для этих целей использовать <strong> или <em>. Кстати, говорят, что для продвижение сайтов лучше использовать именно последние обозначения, так как они имеют бОльший вес.

Многократный обрыв строки <br />

Тег <br /> который используется для обрыва строки должен использовать только однократно. Для всего прочего есть абзацы, параграфы и прочее, стиль которых должен быть задан в CSS.

Неправильное перечеркивание

В былые времена использование тегов <s> и <strike> считалось нормой, сегодня они тоже устарели. Поэтому советуем вам взять на вооружение <del> и <ins>.

«Стилизация» строчных элементов в HTML

Все веб-мастера 1000 раз слышали что «оформлять на месте» строчные элементы неправильно. Таким образом теряется смысл семантического веб-дизайна. Если вы не можете задать стили всем элементам в CSS, значит вы не способны на грамотный дизайн.

Добавление или удаление границ в HTML

Тоже самое касается тега <border> для элементов. Эти вопросы должны определяться исключительно таблицей стилей.

Игнорирование заголовков

Нам даны заголовки разных калибров – от <h1> до <h6>. Нужно это использовать! Грамотно разбитый на заголовки текст принесет свои дивиденды — и читателям удобно и поисковым системам нравится (то есть будет полезно при seo оптимизации). Неправильно использовать в качестве заголовков полужирное или жирное начертание.

Мерцающий текст

Помимо того что теги <blink> и <marquee> не является официально одобренными W3, они просто уродуют текст. Есть масса других способов как обратить внимание читателя на тот или иной момент.

За вдохновении для статьи про советы по HTML верстке хочется выразить благодарность автору этой статьи. Казалось бы ничего сложного в указанных выше пунктах нету, более того, многие хороши их знают, но продолжают совершать и использовать эти плохие привычки. Надеюсь, статья поможет немножечко заострить на этом внимание и сделает ваш HTML код верстки более грамотным.

P.S. Постовой. Обратите внимание на дизайн услуги в интернете по созданию шаблонов, логотипов и других элементов дизайна.
Вы можете скачать бесплатно фильмы на ViMaxFilms.
Вы можете забронировать авиабилеты через агентство «Элит Турс» на украинские и международные рейсы.

© Дизайн Мания, 2010. | Комментариев - 8 | Категория Верстка.

Интересные статьи по теме

• Уроки верстки – CSS подмена текста картинкой (6)
• Кликабельный логотип или ссылка поверх изображения (27)
• 9 советов по типографике сайта (8)
• Якоб Нильсен – известный специалист по юзабилити (0)
• Экшены (actions) для Photoshop – экономия времени (6)

Продолжаем уроки верстки. Захотелось мне как-то для своего литературного блога сделать красивый, оригинальный заголовок. Понятно, что реализовать такое было реально только с использованием красивых шрифтов, я взял подборку, опубликованную когда-то на Дизайн Мании – красивые русские шрифты. Разместил на сайте без проблем.

Но меня слегка смутило отсутствие текстового заголовка, в частности с точки зрения поисковых систем. Да, я не использую h1 для заголовка блога на всех страницах, там у меня в этот тег попадают лишь тайтлы постов. Но на главной было бы неплохо его иметь, да и просто текст в шапке, который будет прочтен ПС первым, неплохо чтобы сообщал им название всего проекта. На 100% не уверен насчет привередливости и мнения поисковиков, но мне лично такое оформление кажется правильным.

В общем, перед нами поставлена задача CSS подмены текста через картинку, то есть заголовок располагается на заднем плане, а над ним изображение. Таким образом, текстовая информация видна ПС, а люди наслаждаются красивым логотипом для проекта.

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

Вариант подмены изображения номер 1 (самый простой)

<h1 class="technique-eight">
 <span></span>Заголовок проекта
</h1>

h1.technique-eight {
	width: 350px; height: 75px;
	/* Размеры нужного нам блока */
	position: relative;
	}
 
h1.technique-eight span {
		background: url("images/header-image.jpg");
		/* Наша картинка */
		position: absolute;
		width: 100%;
		height: 100%;
	}

Для литературного блога я использовал именно этот вариант. Спасибо за описание реализации автору данной статьи.

В комментариях к этой реализации посоветовали добавить опцию overflow:hidden чтобы «при увеличении шрифта снизу ничо не полезло». Нечто подобное можно наблюдать у варианта номер 2 под названием правильная замена на картинки.

<h1><a href="#">Вау! Я логотип!<span></span></a></h1>

h1 a{
 width:250px;height:50px;
 overflow:hidden;
 display:block;
  position:relative;
}
 
h1 a span{
 position:absolute;
 width:250px;height:50px;
 top:0;
 left:0;
 background:transparent url(../img/kartinka.png) no-repeat 0 0;
}

HTML код остался практически таким же, а вот в CSS добавилось немного больше строк. В том числе и overflow:hidden.

Есть еще способ (вариант 3), которые прячет текст из поля видимости страницы на мониторе.

<h1 class="main-logo">Название логотипа или компании </h1>

h1.logo {
width: 300px; height: 50px;
background: url(images/logo.jpg);
text-indent: -9999px;
}

Но мне лично он не очень нравится, не люблю решения, где применяются большие «отступы в никуда». Кстати, там же в статьей есть немного рассуждений относительно реакции поисковых систем на такие хитрости CSS. Вроде как они не против, если это используется в благих целях – добавить красоты проекту.

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

P.S. MakeUp интернет магазин косметики доставка по Украине.
Возможно вам пригодятся powerpoint backgrounds – скачать можно у нас.
Предлагаем брендинг для вашей компании или бизнеса.
Для девушек – косметика mary kay – будь красивой.

© Дизайн Мания, 2009. | Комментариев - 6 | Категория Верстка.

Интересные статьи по теме

• Кликабельный логотип или ссылка поверх изображения (27)
• Как сделать большой фон для сайта через CSS (35)
• Фон для сайта (свойство CSS background) (27)
• Создаем обои Windows 7 для рабочего стола (2)
• Отрисовка изображения в фотошопе с нуля с помощью Pen Tool (2)

Могу поспорить, что Internet Explorer – самый любимый браузер всех веб-разработчиков и верстальщиков на земле! Именно поэтому мы так часто проверяем как в нем отображается тот или иной дизайн. Ведь знаем – любимый браузер может интерпретировать написанный код так хорошо, что мы уже привыкли видеть самые неожиданные результаты:)

Ок, шутки в сторону, вернемся к теме статьи. Предлагаю ознакомиться с наиболее часто используемыми инструментами (программами), которые помогут вам лучше понять и отладить код под Internet Explorer.

IETester

IETester – бесплатный веб-браузер, который позволяет вам получить интерпретацию (отображение) кода и javascript движок для версий IE8 beta 2, IE7 IE 6 и IE5.5 на Vista или XP.

DebugBar

DebugBar – плагин для Internet Explorer, который предоставляет полный контроль над веб страницей. В него входит HTTP, DOM, Javascript инспектор и HTML валидатор.

Companion.JS

Companion.JS (или CJS) – Javascript дебагер для IE. Это почти Firebug под Explorer.

Internet Explorer Developer Toolbar

Internet Explorer Developer Toolbar (IE Developer Toolbar или IE DevBar) – аддон для Internet Explorer 6 и 7, который предназначен в разработке и отладке веб-страниц.

Firebug Lite

Firebug Lite – это JavaScript файл, который вы можете вставить в ваши веб-страницы, дабы имитировать некоторые функции Firebug под IE.

IE Tab

Позволяет использовать Internet Explorer в качестве вкладки (Tab) в браузере Firefox.

Данные пост является переводом статьи Do some IE homework. Приятной вам и безпроблемной верстки под Internet Explorer

P.S. Интересная книга для блоггеров о том как установить и настроить блог Wordpress.

© Дизайн Мания, 2008. | Комментариев - 3 | Категория Верстка.

Интересные статьи по теме

• Фон для сайта (свойство CSS background) (27)
• Уроки верстки – CSS подмена текста картинкой (6)
• Менеджер шрифтов FontExpert (1)
• Кликабельный логотип или ссылка поверх изображения (27)
• Как сделать большой фон для сайта через CSS (35)

В последнее время большие фоновые изображения в блогах или сайтах стали достаточно популярными. Оно и не удивительно – классно подобранный фон может послужить основным источником восприятия того или иного проекта, ведь давно известно, что посетитель составляет свое впечатление о сайте в первые 10 секунд. Предлагаю ознакомиться с несколькими CSS техниками для создания большого фонового изображения с использованием одного или двух изображений.

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

Если у вас есть большое фоновое изображение, которое отлично выглядит при разрешении монитора 1280 пикселей, то для бОльших экранов эффект от сайта может быть слегка испорчен из-за «обрезанного фона» (см. рис. выше).

Пример 1.

Самый простой способ избежать этой ошибки – сделать так, чтобы края изображения были такого же цвета, как и фон сайта (BODY background color). Хорошо данный пример иллюстрирует картинка ниже:

Мы видим, что по краям макета используется сплошной цвет для фона. Реализация данного варианта на CSS достаточно проста – вы «прижимаете» изображение фона к верху и центрируете его по центру.

Кстати, в одном из постов я уже рассказывал о свойстве CSS background и его возможностях. Код для примера выглядит так:

body {
  padding: 0;
  margin: 0;
  background: #f8f7e5 url(изображение.jpg) no-repeat center top;
 
  width: 100%;
  display: table;
}

Последние 2 строки кода предотвращают уменьшение фонового изображения при изменении размеров окна браузера (в частности в Firefox).

Пример 2. Двойные изображения

В качестве примера используется сайт Design Jobs on the Wall. Здесь для фона задано повторяющееся изображение, а большая картинка помещена в слой DIV, обрамляющий весь код. Реализацию можете глянуть на «живом примере» по ссылке выше, ничего сложного вроде нет.

В качестве большого изображения для фона используется картинка (в формате GIF) с прозрачным фоном, цвет которой максимально приближен к цвету BODY.

Пример 3. Небесный фон.

Для данного варианта используется градиентное изображение в 1 пиксель, которое повторяется горизонтально (задается в теге BODY). Облака центрируются с помощью дополнительного слоя DIV – демо верстки можно глянуть здесь.

Кстати, данный пример можно реализовать и без DIV – смотрите код на демо странице2.

Внимание! Скачать все примеры можно здесь (зеркало).

Данный пост является переводом статьи – How to: CSS Large Background с потрясающего дизайнерского блога webdesignerwall. Кстати там же есть красивая подборка сайтов с большими изображениями для фона.

P.S. Создаем лого Web 2.0 в GIMP – для любителей альтернативного софта.

© Дизайн Мания, 2008. | Комментариев - 35 | Категория Верстка.

Интересные статьи по теме

• Уроки верстки – CSS подмена текста картинкой (6)
• Кликабельный логотип или ссылка поверх изображения (27)
• Фон для сайта (свойство CSS background) (27)
• Создание полосатого фона для сайта (7)
• Оригинальные генераторы бэкграунд (background) (3)

Сегодня расскажу немного о верстке, HTML и CSS. Товарищи, верстальщики просьба не судить строго, поскольку я сам таковым не являюсь, а лишь немного знакомлюсь с теми или иными нюансами этого нелегкого дела по мере необходимости.

Задача следующая. В шапке сайта имеется цельное изображение, на котором располагается логотип. Требуется сделать его кликабельным, чтобы при клике мы переходили на главную страницу. Хочу заметить, что следующие действия пригодятся, если вы не верстали шаблон с нуля, а просто хотите внести некоторые правки уже в чью-либо верстку – тему для wordpress, например.

Для начала вырезаем с помощью photoshop изображение логотипа, который должен быть кликабельным:

Далее требуется добавить в HTML код новый слой. Находим в шаблоне место, где выводится изображение в шапке и размещаем там еще один элемент DIV. Получим что-то вроде следующей конструкции:

<div id="header">
 <div class="logo1">
  <a href="ссылка_на_главную">
   <img src="images/logo1.jpg" width="327" height="38" />
  </a>
 </div>
</div>

В файле стилей CSS пишем:

.logo1 {
 position: absolute;
 margin: 65px 0 0 282px;
 z-index: 100;
}

Здесь свойство position: absolute означает, что позиционирование будет происходить от левого верхнего угла страницы, а в данном примере – элемента <div id=”header”>. В принципе, для слоя доступны свойства горизонтального и вертикального позиционирования – left и top, которые задают отступы от левого и верхнего краев соответственно. Тем не менее, я встречал также использование обычного отступа margin.

Свойство z-index задает порядок перекрытия слоями друг друга при наложении. Блок DIV с более высоким индексом будет располагаться выше чем тот, у кого значение ниже.

Часто в шаблонах wordpress или любых других определяются отступы или рамки для всех изображений на сайте, поэтому может понадобиться обнуление этих значений:

.logo1 img {
	border: none;		
	margin: 0px;		
}
 
.logo1 a img {
	border: none;		
	margin: 0px;			
}

Если есть какие-то замечания или советы – с радостью выслушаю в комментариях.

P.S. Если вы собрались организовать конкурс с большим бюждетом, рекомендую почитать статью о проведении подобных мероприятий.
Кстати, для подсветки кода в блоге можно использовать специальный плагин для wordpress.

© Дизайн Мания, 2008. | Комментариев - 27 | Категория Верстка.

Интересные статьи по теме

• Фон для сайта (свойство CSS background) (27)
• Уроки верстки – CSS подмена текста картинкой (6)
• Как сделать большой фон для сайта через CSS (35)
• Тренды веб-дизайна в 2009 году. Часть1 (13)
• Тренды веб-дизайна 2009. Часть3 (7)

Если вы заметили, слегка приукрасил Дизайн Манию, добавил текстуры в фон. Сразу же появилась идея рассказать вам как именно мне удалось это сделать. Открываю данным постом рубрику «Верстка» раздела «Веб-дизайн». В данной категории планирую публиковать статьи, заметки, рекомендации и уроки по HTML, CSS, а также, возможно, JavaScript. Материал постараюсь размещать простой и с пояснениями, чтобы понятно было всем читателям. Думаю, подобная информация пригодится многим блоггерам, которые хотят, но не могут подправить собственные дизайны из-за отсутствия навыков верстки.

Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость фона как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже:

background-color – задает цвет фона. Можно применять к отдельным элементам <h1>, <p> или ко всему сайту через через тэг <body>:

/* черный фон сайта */
body {
 background-color: #000;
}
 
/* черный фон заголовка, белый цвет шрифта */
h1 {
 color: #fff; 
 background-color: #000;
}

background-image – используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:

body {
 background-color: #000;
 background-image: url ("my-image.jpg");
}

Обратите внимание как указан путь к изображению – это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать правильный путь к изображению.

background-repeat – используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:

• background-repeat: repeat-x – изображение повторяется только по горизонтали
• background-repeat: repeat-y – изображение повторяется только по вертикали
• background-repeat: repeat – изображение повторяется по горизонтали и вертикали
• background-repeat: no-repeat – изображение не повторяется

background-attachment – данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:

• background-attachment: scroll – прокручивается вместе со страницей
• background-attachment: fixed – при прокрутке фон остается неподвижным

background-position – задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:

• в фиксированных единицах (пикселы, сантиметры)
• в процентах
• словесно: – top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).

Рассмотрим примеры:

• background-position: 20px 50px – изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
• background-position: 50% 25% – расположено по центру по горизонтали и отступает на 25% сверху.
• background-position: right bottom – рисунок располагается снизу справа.

Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Например:

background: #000 url("my-image.jpg") no-repeat fixed left bottom;

Если какое-то свойство пропускается, то его значение установлено по умолчанию.

Надеюсь, данный урок вам пригодился, подписываемся на обновления блоге через RSS, дальше вас ожидает еще много интересных секретов!

© Дизайн Мания, 2008. | Комментариев - 27 | Категория Верстка.

Интересные статьи по теме

• Кликабельный логотип или ссылка поверх изображения (27)
• Уроки верстки – CSS подмена текста картинкой (6)
• Как сделать большой фон для сайта через CSS (35)
• Создание красивой RSS иконки для блога (42)
• Программы для верстки и отладки под Internet Explorer (3)