веб-дизайн | htmlbook.ru
На сайтах треугольники применяются сплошь и рядом как часть дизайна элементов, например, они служат указателем на какой-то объект, направляя внимание читателя в нужное место. Также треугольники выполняют декоративные функции, делая блоки, где они применяются, более изящными и современными. На рис. 1 показан пример использования треугольника в дизайне.
Рис. 1. Треугольники в веб-дизайне
Напрямую сделать треугольник средствами CSS нельзя, поэтому доступны два метода, позволяющих его добавить — через border и transform.
Кодировка UTF-8 позволяет не только одновременно вставлять текст на нескольких языках, но и добавлять разные символы, которые с успехом могут применяться как элементы дизайна, а также вместо некоторых изображений. Вот какие плюсы это сулит:
- меньше пересылаемый объём данных по сравнению с изображениями;
- к текстовому символу можно легко применить любое стилевое оформление;
- опять же легко изменить стиль символа при наведении на него курсора мыши;
- допустимо увеличивать размер без потери качества.
В моей прошлой статье Как сделать словесный пузырь на CSS3 без картинок мы видели, как псевдоэлементы :before и :after используются для создания различных эффектов. В этой статье мы воспользуемся подобными техниками для создания разнообразных лент.
Эффект ленты в моде. Большинство дизайнеров используют позиционированные изображения, но мы сделаем это с помощью свойств border и единственного тега <h3>.
Чтобы правильно проводить цветокоррекцию изображений, подбирать гармоничные цвета для сайта и понимать принципы работы с цветом, необходимо иметь представление о цветовом круге. Он широко используется в дизайне и программах для работы с графикой.
Основные понятия
Всем известно, что спектр состоит из семи цветов, названия которых глубоко
запали в голову еще со школы благодаря мнемоническому заклинанию «Каждый Охотник
Желает Знать, Где Сидит Фазан». На рис. 1 показана полоса, полученная путем
разложения луча белого света на составляющие цвета с помощью стеклянной призмы.
Рис. 1. Спектральные цвета
Золотым сечением называется принцип деления отрезка на две части, при этом бóльшая часть отрезка относится к меньшей части так же, как длина всего отрезка к большей его части. Наглядно это показано на рис. 1.
Рис. 1. Пропорции золотого сечения
Сайт автора: finest.ru
Я часто встречаю рассуждения, что дизайн — это оформление информации. Говорят о нём как элементе, существующем отдельно от текста, имеющем свои правила и законы. Не забывают упомянуть о его важности общими фразами.
Стоп! А разве графика, цвет, текст, заголовки и вся композиция не составляет информационное содержание страницы? Основной процент получаемой человеком информации приходится на зрение. По статистике 83% информации воспринимается зрительно. И 40% из неё запоминается человеком (против 20% от услышанного!). А изображение может нести в себе ничуть не меньше (а иногда и больше) информации, чем текст. Но как связать воедино изображение и текст? Как заставить дизайн нести тему страницы? Вот это уже вопрос психологии.
На веб-странице достаточно часто возникает задача визуально отделить одну информацию от другой, например, выделить текстовый блок и акцентировать на нем внимание. Подобный вопрос возникал еще до эпохи Интернета и нашел свое отражение в трудах по гештальт-психологии. Применяя подобный опыт в дизайне веб-страниц, можно быть уверенным, что мы действуем с учетом человеческого восприятия, что подтверждается трудами классиков, опытом и экспериментами.
Фиксированный дизайн. Основы | htmlbook.ru
Термин «фиксированный дизайн» используется для обозначения макета страницы, который создается на основе слоев заданной ширины. Выбор ширины зависит от ориентации на определенное разрешение монитора пользователей. Так, для разрешения 1024х768 пикселей размер таблицы следует брать не более 1000 пикселей. Такая ширина получается за счет вычитания из значения 1024 ширины вертикальной полосы прокрутки и границ окна браузера. Для всех пользователей, сайт, построенный на таком макете, будет отображаться корректно, но при больших разрешениях оказывается слишком много пустого места.
Поскольку наиболее популярным среди пользователей
Интернета является разрешение 1024×768, разработчики сайтов ориентируются именно
на него и используют общую ширину слоев 900–1000 пикселей.При фиксированном дизайне блок с материалом размещается обычно у левого края или по центру экрана. Последний вариант предпочтительнее, тогда не так заметны широкие поля вокруг при больших разрешениях монитора (рис. 1).
Рис. 1. Типичная модульная сетка при фиксированном дизайне
Числовые обозначения, используемые в данном рисунке: 1 — заголовок сайта; 2 — левый слой, обычно содержит элементы навигации; 3 — правый слой, содержит информационное наполнение страницы; 4 — «подвал», самый низ веб-страницы, в нем, как правило, размещают контактную информацию и различные кнопки.
Для создания макета показанного на рис. 1, следует продумать некоторые
предварительные моменты — какова будет общая ширина всех элементов; где
будет размещаться макет — по центру страницы или у левого края; какие
цвета и шрифты будут использоваться и т.
д. Шаги, которые предстоит сделать
перед написанием кода, описаны далее.
Ширина слоев
Вначале следует определить общую ширину изобразительных элементов веб-страницы. Как упоминалось выше, это значение определяет сам дизайнер на основе предварительного сбора данных о будущих пользователях сайта. Хотя большинство дизайнеров устанавливают ширину, что называется «от фонаря», исходя из собственного удобства. Вот и в примере 1, используя этот же принцип, ширина всех слоев выбрана 750 пикселов.
Итак, вся ширина известна, теперь надо поделить ее на две части. Слой, обозначенный цифрой 2 (рис. 1), отводится под меню, ширина его должна быть минимальна, но достаточна для комфортного чтения текста. Сделаем ее круглым числом, например, 200 пикселов. Все остальное будет занимать контент.
Высота слоев
Высота слоя меняется динамически в зависимости от его содержимого. Если хочется
установить высоту слоя самостоятельно, можно воспользоваться свойством height и задать высоту в пикселах, процентах или других единицах CSS.
Учтите, что
при таком подходе выравнивание содержимого слоя происходит всегда по его верхнему
краю, поэтому слишком большую высоту задавать не стоит (пример 1).
Пример 1. Задание высоты слоя
<style type="text/css">
#top {
text-align: left; /* Выравнивание по левому краю */
width: 750px; /* Ширина слоя */
background: #800000; /* Цвет фона */
height: 50px; /* Высота слоя */
}
</style>Аналогично, высоту слоя можно менять и отступами, изменяя значение padding-top и padding-bottom (пример 2). Но этот способ менее универсальный.
Пример 2. Задание высоты слоя с помощью отступов
<style type="text/css">
#top {
padding-top: 15px; /* Отступ сверху */
padding-bottom: 15px; /* Отступ снизу */
}
</style>В этом случае высота слоя складывается из верхнего и нижнего отступов и высоты содержимого, которое будет располагаться по центру вертикали.
Если высота содержимого слоя превышает его высоту, заданную с помощью свойства
height, то браузер оставляет размеры слоя неизменными, а содержимое
накладывает поверх него.
Выравнивание по центру
Если есть необходимость оставить макет выровненным по левому краю окна, делать ничего не надо, данный эффект произойдет сам собой. А вот чтобы макет оказался по центру окна браузера поможет еще один дополнительный слой, который будет служить каркасом и включать в себя все остальные слои. Назовем его container и пропишем для него следующий стиль (пример 3).
Пример 3. Выравнивание по центру
<style type="text/css">
#container {
width: 750px; /* Ширина слоя */
margin-right: auto; /* Отступ справа */
margin-left: auto; /* Отступ слева */
}
</style>Свойства margin-right и margin-left со значением auto задают выравнивание слоя по центру веб-страницы. В этом же селекторе указываем и общую ширину всех слоев.
Отступы на веб-странице
Горизонтальные и вертикальные отступы от края браузера до содержимого веб-страницы
встроены в браузер по умолчанию.
Тем не менее, можно изменить значение этих
свойств, делая отступы по желанию больше или меньше. Например, можно
установить отступ от верхнего края окна до заголовка страницы, или вообще убрать
его.
Отступы задаются свойствами CSS margin и padding для селектора BODY. Наличия двух свойств вместо одного, опять же требуют интересы разных браузеров, margin — Internet Explorer, а padding — Opera и Firefox. Совмещение разных свойств гарантирует, что показываться веб-страница в разных браузерах будет одинаково.
Управлять отдельными отступами от разных краев экрана можно с помощью свойств margin-top, margin-bottom, margin-right и margin-left, которые соответственно изменяют расстояние от верхнего, нижнего, правого и левого краев окна браузера. Прежде чем их использовать, следует задать нулевое значение свойства margin (пример 4).
Пример 4. Изменение верхнего отступа от края браузера
<style type="text/css">
BODY {
margin: 0; /* Убираем отступы */
margin-top: 10px /* Устанавливаем отступ сверху */
}
</style>Цвета
CSS имеет несколько опций для определения цвета текста и фона слоя.
Свойство
color указывает цвет текста в слое, а background —
цвет фона (пример 5).
Пример 5. Изменение цвета
<style type="text/css">
#menu {
color: white; /* Цвет текста */
background: #008080 /* Цвет фона */
}
</style>Цвет фона для слоя menu в примере указан темно-зеленым, а текста — белым.
Что такое HTML и CSS и как они работают в веб-дизайне?
Для многих из нас, кто не в курсе, или для тех, кто плохо знаком с разработкой или дизайном веб-сайтов, мы будем просматривать и использовать веб-сайт, не обращая внимания на то, как он сделан. Однако за поверхностью скрываются два элемента, которые чаще всего используются при создании веб-сайта — HTML и CSS. Они влияют на то, как структурирована веб-страница и как она выглядит для пользователя, а также предоставляют пользователям визуально привлекательный и простой в использовании веб-сайт.
Чтобы понять, как все взаимосвязано, мы объяснили все, что вам нужно знать об основах HTML и CSS и их роли в создании веб-сайтов.
Что такое HTML?
HTML, или язык гипертекстовой разметки, чтобы дать ему полное название, обеспечивает структуру страницы. Чаще всего эти страницы связаны между собой, чтобы сформировать веб-сайт, каким мы его знаем сегодня. Чтобы разобрать HTML, гипертекст обозначает то, как пользователь перемещается по сети, щелкая гиперссылки для перехода со страницы на страницу. В то время как разметка — это то, как каждый «тег», как его часто называют, должен отображаться на веб-странице. Эта структура — то, как создается веб-сайт, информационный бюллетень или другая онлайн-страница.
Первая версия HTML была создана в 1989 г., и до 1995 г. не было номеров версий, связанных с этим процессом. Инженерная рабочая группа Интернета впервые ввела нумерацию HTML в 1995 году, а Консорциум Worldwide Web последовал ее примеру в 1997 году. С тех пор постоянно ведется работа над новыми версиями HTML, последней утвержденной версией является HTML 5.2. Существует также другая версия, называемая XHTML, которая по языку похожа на HTML, но также включает XML, что позволяет пользователям использовать с ним некоторые связанные с последним инструменты.
HTML представил стандартизированный способ чтения документов компьютерами, так как до этого обычные документы были наиболее распространенным форматом. Однако это ограничивало документы в отношении носителей и стилей, которые они могли содержать, поскольку оно также не имело семантической структуры и не могло определить другие ключевые области документа.
Добавление тегов HTML к текущему текстовому документу позволяет превратить его в файл, который можно создать и заказать для создания веб-страницы. Фактически, для создания HTML-документа требуется не более чем текстовый редактор, однако вам необходимо убедиться, что файлы сохраняются как «.html», а не «.txt».
HTML-теги должны быть написаны парами, так как для правильной структуры страницы необходимо наличие начального и конечного тегов. Первый тег сообщает документу, как следует отображать следующий текст или медиа, а закрывающий тег сообщает документу, что это больше не нужно показывать таким образом. Например, означает, что последующий текст должен быть выделен жирным шрифтом, а обозначает конец полужирного текста.
А затем более сложные теги, такие как
После создания HTML-документа, включающего в себя то, как должна быть структурирована веб-страница, включая заголовки, контент, ссылки, держатели изображений и т. д., он эффективно «общается» с программным обеспечением браузера, которое вы используете для перевода HTML в удобочитаемый вид. контент для пользователя.
Что такое CSS?
Каскадные таблицы стилей, или сокращенно CSS, тесно связаны с HTML и определяют, как веб-сайт должен выглядеть визуально. Впервые он был разработан в 1997 году, так как до этого разработчики не могли отделить структуру веб-сайта от того, как она отображается пользователю. Это позволило HTML сосредоточиться на создании руководства по структуре документа и веб-сайта, в то время как CSS определял его внешний вид.
Чтобы лучше понять CSS, таблица стилей — это имя, данное документу, который содержит технические подробности о том, как должна быть построена страница, а также о том, как эта страница должна отображаться при отображении пользователю.
Каскад более сложен, но относится к тому, как таблица стилей перетекает из одной таблицы в другую, поскольку на каждую таблицу часто влияет другая, независимо от того, был ли установлен стиль. Например, гиперссылки в документах часто подчеркнуты и окрашены в синий цвет, однако это можно изменить с помощью файла CSS. У большинства браузеров есть стиль, который они используют по умолчанию, если только им не велят отображать его по-другому.
И свойства, и значения являются ключевыми для CSS. Свойства позволяют дизайнеру определить, какие функции необходимо изменить на веб-странице, например. шрифт. В то время как значение — это то, на что это следует изменить, например. Times New Roman в Calibri.
CSS — один из самых универсальных элементов веб-сайта, поскольку он позволяет дизайнеру изменить внешний вид веб-сайта, а не разметку, чтобы изменить способ его отображения.
Существует три широко используемых способа добавления CSS в документ HTML: внешняя таблица стилей, внутренняя таблица стилей и встроенные стили.
Внешняя таблица стилей включает CSS в отдельном файле для HTML и ссылается на HTML через <ссылку>. Это обеспечивает большую гибкость при редактировании нескольких HTML-документов, поскольку CSS можно обновлять в одном мастер-файле.
Внутренние таблицы стилей включают CSS внутри тега