Записи с тегом: Верстка

Верстка, Дизайн — Комментарии (0)
17
02.2010

Модульные сетки в Веб-Дизайне

Модульная сетка — представляет собой набор невидимых направляющих, вдоль которых располагаются элементы веб-страницы. Это облегчает размещение данных в документе, обеспечивает визуальную связь между отдельными блоками и сохраняет преемственность дизайна при переходе от одной страницы к другой.

Модульная система вёрстки — система вёрстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом (модулем), одинаковым или разным по горизонтали и вертикали.
Модульная система упрощает и убыстряет художественное конструирование и создаёт благоприятные условия для автоматизации вёрстки при использовании компьютерных настольно-издательских систем.

Не буду сильно расписывать, что это такое, просто дам пару ссылочек на эту тему:
— Модульные сетки, часть первая. «38 попугаев»
— Часть вторая. Алгоритм построения модульной сетки. Оптика и геометрия

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

Ну и напоследок, мой набор из 2-х шаблонов для Photoshop с модульной сеткой на 12 и 16 колонок.

Дизайн — Комментарии (6)
19
07.2009

Создание вертикального меню для сайта

css-menu
В прошлом посте я уже показывал, как с помощью изменения фона можно создавать красивые кнопки. Изменение фона отлично подходит для простых кнопок, для более сложных лучше измененить фоновое изображение. Особенно, если кнопки будут расположены в меню.

Основная проблема заключается в задержке вывода кнопки, когда браузер загружает изображение кнопки. Из-за этого создается мерцание. Есть несколько способов для того, чтобы избежать этого. Одним из них является метод pixy. Вместо нескольких фоновых изображений в нем используется одно, и это изображение будет выравниваться влево для обычного состояния и вправо, при наведении курсора на кнопку.
Читать далее →

Kohana, SEO, Yii, Верстка, Дизайн — Комментарии (12)
28
04.2009

Верстаем дизайн для блога. Часть 2

В прошлом уроке мы сверстали макет нашей страницы, сделали фон и добавили тени отбрасываемые контент областью. Сегодня мы займемся шапкой нашего шаблона.

Первое чем мы займемся – это разметим шапку под основные элементы:

1) Логотип сайта

2) Поиск

3) Горизонтальное меню.

Для этого в файл index.html в теге:

Читать далее →

Верстка, Дизайн — Комментарии (7)
11
04.2009

Верстаем дизайн для блога. Часть 1

В прошлых статьях мы нарисовали дизайн нашего блога. Сегодня мы займемся версткой. Это первая статья из серии. В ней мы сделаем разметку нашей будущей страницы.

В чем верстать выбор лично ваш, я предпочитаю NetBeans.

Для начала создадим 2 файла «index.html» и «style.css», а также папку «images» в ней мы будем хранить картинки для шаблона.

В файл «index.html» добавим следующий код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Дизайн блога</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="title" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

</body>
</html>

Читать далее →