Posts Tagged ‘вёрстка’

CSS3: Многоколоночная вёрстка

Воскресенье, Май 6th, 2012 Нет комментариев

Under : , , , ,

Последняя статья из цикла, посвящённого новым возможностям CSS3, которые будут поддерживаться Internet Explorer 10 и поддерживаются в данный момент Internet Explorer  10 Platform Preview 1, расскажет о многоколоночной вёрстке текста.

1. Введение

При многоколоночной вёрстке текст выводится в несколько колонок. Это обычная практика при вёрстке «бумажных» газет, журналов и некоторых книг. Но в мире Web-дизайна многоколоночная вёрстка до сих пор встречается крайне редко, в основном, из-за того, что до последнего времени не поддерживалась стандартами HTML и CSS. Однако сейчас она набирает популярность, в том числе и у оптимизаторов при грамотной раскрутке сайтов.
(далее…)

Создание сайтов — модель качественной верстки

Вторник, Апрель 17th, 2012 Нет комментариев

Under : , , , ,

Создание сайтов — модель качественной верстки
Начнем с того, что суть моей статьи в первую очередь заключается в создании удобной модели верстки наших проектов. Иногда гуляя по сети, я натыкаюсь на очень хорошо сделанные веб – сайты, но когда, начинаю разглядывать внутреннюю структуру сайта я ужасаюсь. Дело в том, что при создание сайтов разной сложности и структуры, я наработал немалый опыт и могу уверенно вам сказать, что через несколько дней, когда заказчик просит поменять в каком-то разделе цветовую схему, шрифты или еще что либо. Не очень легко это сделать, а если еще эту верстку делал другой человек то это проблематично. Но если изначально спроектировать модель, то можно очень даже легко редактировать сайт. И так наша задача состоит в том, чтобы создать модель качественной верстки, в которой с легкостью бы ориентировались другие редакторы. (далее…)

Твой сайт. Часть 1. Обзор Макса Трусцова

Понедельник, Апрель 16th, 2012 Нет комментариев

Under : , , , , ,

Изготовление сайта — штука тяжёлая и занимает кучу времени. Так что длительность прогулок под Луной с любимой девушкой, а для кого и с любимым бойфрендом, придется свести к минимуму. Напишу несколько этапов изготовления сайтов, пренебрегать которыми не стоит, хотя бы потому, что без них у тебя не получится ничего дельного.
1. Обдумывание тематики и примерного дизайна сайта. (далее…)

Верстка с помощью слоев

Понедельник, Апрель 16th, 2012 Нет комментариев

Under : , , , ,

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

Особенности верстки веб-страниц

Понедельник, Апрель 16th, 2012 Нет комментариев

Under : , , , , ,

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

Ширина страницы зависит от размера и разрешения монитора

Данная особенность породила метод верстки веб-страниц, основанный на использовании таблиц с невидимой границей. Идеология HTML рекомендует использовать таблицы только по их прямому назначению, т.е. для создания именно таблиц. Но что делать, располагая столь слабыми средствами верстки, приходится использовать разные ухищрения.
(далее…)

Особенности верстки веб-страниц

Понедельник, Апрель 16th, 2012 Нет комментариев

Under : , , , , ,

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

Ширина страницы зависит от размера и разрешения монитора

Данная особенность породила метод верстки веб-страниц, основанный на использовании таблиц с невидимой границей. Идеология HTML рекомендует использовать таблицы только по их прямому назначению, т.е. для создания именно таблиц. Но что делать, располагая столь слабыми средствами верстки, приходится использовать разные ухищрения.
(далее…)

Особенности верстки

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , , , ,

Хотя прародителем верстки веб-страниц является верстка полиграфических материалов, между ними есть одно важное различие. Любая полиграфия вроде буклета, листовки или брошюры печатается на листах установленного размера и в пределах одного тиража имеет лишь незначительные или даже незаметные глазу различия. Веб-страница же запускается на компьютере под управлением клиентской программы называемой браузером. Понятно, что операционная система, ее настройки и собственно сам браузер отличается от компьютера к компьютеру. Из чего следует банальный вывод, что один и тот же документ сайта по-разному отображается у каждого пользователя.

Напрашивается вопрос, можно ли сделать так, чтобы веб-страница отображалась одинаково? Учитывая, сколько придется принять во внимание разных неоднозначных факторов, следует сказать, что нет, нельзя. Поэтому задача верстки веб-страниц формулируется так: сформировать документ, который бы корректно отображался с небольшими различиями на основных платформах и в браузерах. Корректно означает, что соблюден исходный замысел автора, воплощен требуемый дизайн документа, и он показывается в браузере без ошибок. (далее…)

Модульная сетка

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

Веб-страница фактически рассматривается как набор прямоугольных блоков, которые выкладываются в определенном порядке. При этом, как правило, данные располагаются по колонкам, поэтому при верстке применяют термин одно-, двух-, трехколонный макет и т.д. Для примера рассмотрим главную страницу сайта deviantart.com (рис. 1). (далее…)

Изображение на всю ширину макета

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , , ,

Известно, что ширина окна браузера варьируется в довольно широких пределах, поэтому подгадать под нее не представляется возможным. Установить рисунок на всю ширину можно лишь в том случае, когда применяется фиксированный макет. Ширина при этом четко задана, и сделать рисунок требуемого размера достаточно просто. Следует уточнить, что речь здесь идет не о ширине веб-страницы как таковой, а лишь о ширине макета, в который вписывается вся информация. Например, на сайте boeing.com применяется именно такой подход (рис. 1) и суммарная ширина изображений не превышает заданную величину.

Рис. 1. Главная страница сайта boeing.com

Рис. 1. Главная страница сайта boeing.com (далее…)

Фоновые рисунки

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , ,

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

Фон на веб-странице

Установка фонового рисунка на веб-страницу традиционно происходит через атрибут background тега <body>. Такой рисунок повторяется по горизонтали и вертикали, заполняя таким способом все окно браузера. Понятно, что особых вариантов для творчества здесь нет, поэтому обратимся к стилям и посмотрим, что же можно делать с помощью CSS.

В CSS имеется пять атрибутов, которые управляют фоновой картинкой: ее добавлением, положением и повторением. Однако все эти параметры заменяет одно универсальное свойство background, его и будем использовать в дальнейшем. (далее…)