Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

О веб-дизайне - из личного опыта.


Спонсор Рассылки: Клуб Желающих Создать И Развивать Свой Сайт



Здравствуйте.

С Вами вновь "Веб дизайн из личного опыта". И сегодня вас ждёт очередная порция полезной информации. Встречайте.


CSS "От А до Я" - 2



Источник: http://dweb.ru/articles/index.php?idart=112

Никита Е. Сенченко
http://webmoney.kharkov.ua

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

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

Итак, продолжим. Все объекты html-страницы в применении к каскадным таблицам могут быть строковыми или блочными:

Элемент Строковый Блочный
Текст + +
Графика - +
Списки + +
Таблицы + +



В зависимости от того, в каком контексте (блочном или строковом) рассматривается элемент, к нему можно применить те или иные правила CSS.

К примеру, возьмем текстовую информацию в html-документе. Текст, заключенный в теги параграфа (<P>, </P>) - это блочный элемент разметки, а выделение курсивом (<I>, </I>) - строковый. Если необходимо строковый элемент "принудительно" сделать блочным, то нужно задать параметру display значение "block". Например: I {display: block}

Блочные элементы можно вкладывать друг в друга, но нельзя пересекать друг с другом. Строковые элементы можно и вкладывать, и пересекать.

По набору стилей, которые можно применять к элементам, блочные и строковые элементы отличаются. При этом, к блочным элементам можно применять "строковые" стили, но не наоборот.

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

Строковые элементы могут включаться в блочные: <P>Несколько <EM>подчеркнутых</EM> слов <STRONG>имеется</STRONG> в этой строке.</P>

Элемент 'P' - блочный, и содержит внутри себя строковые элементы 'EM' и 'STRONG'.

 

До сих пор мы оперировали HTML-тегами. Но настало время перейти непосредственно к применению каскадных таблиц. Для того, чтобы задать стили для строковых элементов, необходимо воспользоваться элементом разметки 'SPAN'. Он может заменять собой любые "строковые" теги: 'FONT', 'I', 'B', 'U', 'SUB', 'SUP' и т.д.: <div style="border-style:solid"<P>Начало абзаца. <SPAN style="color: red">Красный текст в середине абзаца.</SPAN> Конец абзаца.</P>

Вот резльтат:

Начало абзаца. Красный текст в середине абзаца. Конец абзаца.

"Ну и что тут такого? - спросите вы, - Ведь то же самое можно сделать и без CSS":

<P>Начало абзаца. <FONT color=red>Красный текст в середине абзаца.</FONT> Конец абзаца.</P>

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

К примеру, пусть в html-страничке присутствует 40 слов, которые определяют некие понятия или термины. Допустим, нам захотелось выделить их зеленым цветом, отобразить полужирным курсивом и к тому же шрифтом, бОльшим по размеру, чем шрифт родительского элемента. Если пользоваться только средствами HTML, то получим следующее: <P><FONT size=+1 color=green><I><B>Бригантина</B></I></FONT> - двухмачтовое морское судно.</P>

Очень просто, не правда ли? Но напомню: нам необходимо применить подобное форматирование в 40 местах, поэтому на деле получится гораздо труднее и утомительнее. А если потом нам захочется поменять, скажем, цвет с зеленого на синий? Представьте, сколько это займет времени! Куда проще было бы применить CSS. В заголовке документа (между тегами <HEAD> и </HEAD>) определим класс с необходимыми стилями: <STYLE type="text/css"> .terms {font-size: larger; color: green; font-weight: bold; font-style: italic} </STYLE>

а потом применим его в нужных местах: <P><SPAN class="terms">Бригантина</SPAN> - двухмачтовое морское судно.</P>

Получим следующее:

Бригантина - двухмачтовое морское судно.

Преимуществ у такого подхода много: во-первых, запутаться (как в случае с HTML-тегами) практически невозможно; во-вторых, удобство этого способа возрастает пропорционально увеличению элементов, к которым нужно применить одинаковое форматирование. Если они встречаются не на одной, а на нескольких страницах, то описание класса "terms" можно вынести в отдельный файл и подключить его ко всем документам - сэкономим еще больше времени. И, в-третьих, все описания содержаться в одном месте, поэтому если вы захотите, к примеру, изменить цвет, то вам придется править код только в одном месте и один раз - а цвет поменяется везде! Впрочем, о преимуществах CSS мы уже говорили в первой статье, и больше останавливаться на них не будем.

Прежде чем перейти к детальному описанию "строковых" стилей, приведу еще один, более сложный пример: <P>Изучаем <SPAN style="font-variant: small-caps; background-color: orange; letter-spacing: 4pt; text-decoration: line-through">каскадные таблицы</SPAN></P>

Что мы видим?

Изучаем каскадные таблицы

Средствами HTML сделать такое будет довольно сложно!

Ну а теперь - самое интересное. Какие же конкретно возможности предоставляет нам CSS для форматирования строчных элементов? Начнем со свойств шрифта.

Свойства шрифта.

Покажу все в одной таблице - так будет нагляднее.

# п/п Свойство Значение Описание
1 font-family список шрифтов Задание гарнитуры (наименования) шрифта
2 font-style normal
italic
Задание начертания (курсив
3 font-variant normal
small-caps
Задание капители
4 font-weight normal
bold
bolder
lighter
Задание жирности
5 font-size px, pt, em, %
xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger
Задание кегля (размера)



Рассмотри каждое свойство отдельно.

  1. 'font-family'

    Определяет гарнитуру (наименование) шрифта. Можно (и даже нужно) указать не один, а несколько шрифтов через запятую. В этом случае шрифты будут рассматриваться браузером в порядке приоритетности слева направо: <H2 style="font-family: a_Bragga, Arial, sans-serif">К этому заголовку применено форматирование гарнитуры шрифта</H2>

    Посмотрим на результат:

    К этому заголовку применено форматирование гарнитуры шрифта



    На 99% ваш браузер выведет эту надпись шрифтом Arial. Почему?

    Никакой веб-дизайнер не может знать на 100%, какой набор шрифтов установлен на компьютере пользователя. Если задавать шрифт явно с помощью <FONT face=название_шрифта>, то есть большая вероятность того, что заданный шрифт на компьютере пользователя не поддерживает русские кодировки или вообще не установлен. Браузер автоматически подставит шрифт по умолчанию, но тогда могут произойти нежелательные изменения на странице или, как минимум, задумка автора останется не реализованной.

    Проблема решается приведенным выше способом, т.е. с помощью CSS. Браузер проверяет весь список шрифтов слева направо и применяет первый же шрифт из этого списка, который оказывается установленным на компьютере пользователя. И если у вас не установлен шрифт a_Bragga (что очень и очень вероятно), то вы увидите надпись в приведенном примере в шрифте Arial.

    Это очень удобно. К примеру, на вашем сайте используется в качестве основного шрифт Verdana. А определенную надпись вы непременно хотите вывести каким-нибудь экзотическим шрифтом Х. Но при этом вы понимаете: этот шрифт Х окажется установленным только у небольшого числа пользователей. У остальных он будет автоматически заменен шрифтом по умолчанию (чаще всего это Times). Шрифт Times никак не впишется в общий дизайн странички, на которой использована Verdana, поэтому было бы неплохо обеспечить "запасной" вариант: в случае, если шрифта Х у пользователя все-таки не окажется, выводить надпись, как и весь остальной текст, шрифтом Verdana. Тогда пишем так: <SPAN style="font-family: Х, Verdana, sans-serif>Надпись</SPAN>

    В конце списка советую указывать предпочтительную группу шрифтов: serif, sans-serif или monospace. Делается это вот для чего: если браузер не обнаружит в системе ни одного из перечисленных шрифтов, то он применит любой доступный шрифт из указанной группы. Вот перечень наиболее употребляемых семейств шрифтов с примерами:
    Группа Шрифты Описание
    serif Times Шрифт с засечками
    sans-serif Arial, Verdana, Helvetica Шрифт без засечек
    monospac Courier Моноширинный шрифт
  2. 'font-style'

    Тут вроде бы все ясно. Этот стиль - замена тега <I>
  3. 'font-variant'

    Если этому свойству присвоено значение "small-caps", то текст будет отображаться малыми прописными буквами. Сравните: <SPAN>ЭКСПЕРИМЕНТИРУЕМ С FONT-VARIANT</SPAN><BR> <SPAN style="font-variant: small-caps">Экспериментируем с font-variant</SPAN>

    Вот, что получилось:

    ЭКСПЕРИМЕНТИРУЕМ С FONT-VARIANT
    Экспериментируем с font-variant
  4. 'font-weight'

    Задает жирность шрифта (bold). Значения "bolder" и "lighter" определяют жирность шрифта по отношению к тексту родительского элемента: <P style="font-weight: bold; font-size: 20px; color: #191970"><SPAN style="font-weight: lighter">Обычный текст</SPAN> внутри жирного</P>

    Обычный текст внутри жирного

    Вообще говоря, существует специальная "шкала жирности", определяющая жирность текста в интервале от 100 до 900 с интервалом в 100. Например, normal (обычный текст) соответствует по этой шкале 400, а bold - 700. Но, по-моему, нет ни одного браузера, который поддерживал бы эту шкалу хотя бы наполовину.

  5. 'font-size'

    С помощью этого правила можно задавать размер (кегль) шрифта. Размер может задаваться в пикселях (px), пунктах (pt), условных единицах (em) или процентах (%). Также существует специальная таблица размеров, содержащая следующие индексы (перечислены в порядке возрастания размера шрифта): "xx-small", "x-small", "small, medium", "large", "x-large", "xx-large". Для указания размера шрифта можно также воспользоваться и этими индексами. По умолчанию принято "medium".

    При этом, как и в случае с font-weight, существует возможность задания относительного размера с помощью "smaller" и "larger".

    Но, как говорится, лучше один раз увидеть, чем сто раз услышать. Вот пример: <SPAN>Размер по умолчанию, <SPAN style="font-size: large">больше<SPAN style="font-size: larger"> и еще больше</SPAN></SPAN></SPAN>

    А что получилось смотрите ниже. Размер по умолчанию, больше и еще больше

    Что касается единиц измерения, то тут CSS (в отличие от обычного HTML) предоставляет довольно большой выбор. Есть абсолютные единицы, которые ни от чего не зависят и выглядят одинаково независимо от экранного разрешения, параметров родительского элемента и т.д. Есть и относительные единицы, на которые влияют какие-нибудь "внешние" факторы. С помощью таких единиц (абсолютных и относительных) можно задавать значение многих свойств каскадных таблиц, и 'font-size' - одно из них.

    К абсолютным единицам относятся пиксели (px) и пункты (pt). К относительным - условные единицы (em) и проценты (%). Свойства, размер которых определен с помощью относительных единиц, зависят от соответствующего размера родительского элемента. Например: <P style="font-size: 12pt">Родительский элемент<SPAN style="font-size: 3em">Внутренний элемент</SPAN></P>

    эквивалентно <P style="font-size: 12pt">Родительский элемент<SPAN style="font-size: 36pt">Внутренний элемент</SPAN></P>

    Напоследок хотелось бы сказать, что абсолютно все примеры, которые я привел выше, корректно отрабатывают и в Опере 5.02, и в шестом Нетскейпе. Кое с чем справляется даже Netscape 4. На сегодня все. Удачи вам!

    webmasterpro.com.ua



Нужны навыки Веб-Дизайна?Профессионалы с Радостью Вам ПОМОГУТ!



Веб-дизайн

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

Получить в своё распоряжение


Веб-дизайн: книга Якоба Нильсена

Книга, которую вы держите в руках, - самая известная на сегодняшний день книга по веб-дизайну. Ее автор, доктор физических наук Якоб Нильсен - признанный во всем мире специалист в области интерфейсов и удобства эксплуатации, - делится с читателем своими знаниями и опытом. Им был разработан ряд методик, направленных на быстрое и экономичное усовершенствование пользовательского интерфейса, включая эвристическую оценку. Он является обладателем 38 патентов США на разработки, ориентированные, главным образом, на повышение удобства работы пользователей с Интернетом. Книга содержит исчерпывающее руководство по построению эффективного взаимодействия с любым пользователем в любой ситуации: от подготовки информационного наполнения и оформления страниц до упрощения структуры навигации и создания профессиональных сайтов. В книге вы не найдете описаний каких-то конкретных программ и кодов на HTML. Она отвечает на самый главный вопрос дизайна: «Что именно нужно сделать, чтобы посетителям сайта было удобно с ним работать? »

Получить в своё распоряжение


Веб-дизайн: книга Дмитрия Кирсанова

Книга автора бестселлера «Факс-модем: от покупки и подключения до выхода в Интернет» - Дмитрия Кирсанова (www.kirsanov.com) - первый полный курс веб-дизайна на русском языке, написанный профессиональным дизайнером. От теоретических основ визуального дизайна до интернетовских технологий и приемов практической работы над сайтом - все это есть в книге, написанной понятно, подробно и увлекательно. Издание будет полезно не только начинающим создателям сайтов, но и дизайнерам, работающим в более традиционных областях, специалистам по рекламе и маркетингу, художникам, программистам, - и, конечно же, всем творческим и любознательным людям.

Получить в своё распоряжение


Веб-дизайн: книга Джесса Гарретта. Элементы опыта взаимодействия

По-настоящему эффективный сайт должен служить вашим стратегическим целям, одновременно удовлетворяя потребности ваших пользователей. Даже самый интересный контент и самые передовые технологии не помогут вам сбалансировать эти две задачи без поддержки последовательного и непротиворечивого опыта взаимодействия. Однако создание опыта взаимодействия кажется невообразимо сложным делом, ведь приходится учитывать массу вопросов - юзабилити, идентичность бренда, информационную архитектуру, дизайн взаимодействия. Книга Джесса Гарретта раскрывает сложную тему веб-дизайна, ориентированного на пользователя, при помощи понятных объяснений и четких иллюстраций, сосредоточиваясь на общих идеях, а не на инструментах и технических приемах. Автор рисует перед читателем полную картину разработки опыта взаимодействия на веб-сайте - от стратегии и требований к контенту до информационной архитектуры и визуального дизайна. Эта вводная информация позволит любой команде веб-разработчиков, независимо от ее размеров, спроектировать успешный опыт взаимодействия.

Получить в своё распоряжение


CD-ROM (MP3). Бизнес-путь: AMAZON.COM: секреты самого успешного в мире веб-дизайна

Какое название первым приходит на ум при словах “Интернет-магазин”? Правильно, «Amazon.com» - один из пионеров в этой области, до сих пор удерживающий в ней лидирующие позиции. Однако оптимистично ли будущее этого патриарха сетевой торговли? Несомненно. Ведь какие бы кризисы и «коррекции рынка» ни потрясали электронный бизнес, Джеф Безос не позволит своей компании остаться без прибыли. Гигантский магазин по продаже книг онлайн дополнят сетевые аукционы, продажа медикаментов и мультимедиа и многое другое - так Amazon ищет свое место в изменившейся реальности электронного бизнеса. Новая бизнес-модель для предпринимателей, множество ранее не известных тайн, сделок, альянсов и планов суперзвезды электронного бизнеса - в книге, которая станет для вас настольной, если вы захотите повторить успех создателя «Amazon.com».

Получить в своё распоряжение


По ту сторону веб-страницы

От замысла до запуска: весь процесс разработки сайта. Проблемы современного веб-дизайна и нестандартные пути их решения. Что модно и что можно: осмысленный подход к дизайну. Станьте профи: избавьтесь от признаков "вечного начинающего". Почему 95% дизайнеров рисуют похожие сайты? Потому что не хватает фантазии или знаний? Или потому что так предписывает Нильсен? Но существуют типы верстки, совершенно не похожие на привычные, но не менее удобные. Что такое "мода в веб-дизайне"? Так ли необходимо ей следовать? И всегда ли нужно использовать инструменты, которые используют все? Не всегда для хранения информации удобны базы данных, и не для всех типов графики идеально подходит Adobe Photoshop. А знаете ли вы, что языки серверного программирования - это пластилин, из которого можно лепить любые фигуры, были бы умения и фантазия. Создатели этих языков сами не догадывались, какие возможности заложены в их детища. В книге рассказывается о небольшой части этих возможностей. Знания языков HTML, XHTML, CSS, JavaScript, PHP и технологий SSI и RSS (их описания есть в книге) недостаточно: в первую очередь нужно понимать, что вы собираетесь сделать, а инструмент найти - дело второе. Книга - по большому счету - об одном. Прежде чем сделать сайт, нужно подумать, зачем он нужен и как его задачи соотносятся с его внешним видом и его работоспособностью.

Получить в своё распоряжение


Веб-редизайн: книга Келли Гото и Эмили Котлер

Основной постулат этой книги - веб-дизайн находится в постоянном движении - со временем подтверждается все убедительнее. В первом издании говорилось, что цикл дизайна занимает 12 месяцев, а во втором он сократился до полугода и даже трех месяцев. Именно поэтому сейчас как никогда остро ощущается потребность в толковом и практичном руководстве, которое помогло бы составить план и бюджет, организовать процесс веб-редизайна (или создания сайта с нуля) и управлять им. Это руководство перед вами! Веб-дизайнер экстра-класса Келли Гото и ее соавтор Эмили Котлер делятся своим опытом, предлагая эффективный подход к процессу веб-редизайна, учитывающий как приоритеты бизнеса, так и интересы хорошего дизайна. Келли и Эмили сосредотачивают внимание на пересечении этих сфер, попадая прямо в «яблочко». Каждая глава содержит наглядный пример, иллюстрирующий ключевые стадии процесса. В книге много форм, контрольных списков и рабочих листов, которые помогут извлечь практическую пользу из полученных знаний.

Получить в своё распоряжение


Современный дизайн

Современный дизайн

Получить в своё распоряжение


Цифровой дизайн

Если у вас есть персональный компьютер, вы можете с его помощью создавать самые разные проекты графического дизайна: от собственных фирменных бланков, логотипов и визитных карточек до пригласительных билетов, флаеров, а также обложек CD- и DVD-дисков, портфолио, веб-сайтов, газет и брошюр. Эта книга подведет вас к самым основам профессионального дизайна: от использования цветов и шрифтов до выбора бумаги, создания полиграфической сетки и ее наполнения фотографиями и графикой. Авторы на ваших глазах создадут ряд простых проектов в самых различных стилях. Приведенные подробнейшие проекты вдохновят вас начать творить самим. Так что, ведете ли вы бизнес, семейный бизнес или просто развлекаетесь, эта книга станет вашим помощником в мире цифрового дизайна. Она откроет для вас целый мир дизайна, который вы будете чувствовать кончиками пальцев, создавая вслед за авторами различные творческие проекты.

Получить в своё распоряжение


Web-дизайн: справочник

Книга «Web-дизайн: справочник» - уже третье издание, выпущенное в США издательством O'Reilly. В нынешнем своем виде она полностью переработана в соответствии с Web-стандартами, особое место среди которых занимают стандарты CSS 2.1 и XHTML 1.0. Автор Д.Н. Роббинс поделилась с читателем многолетним опытом, вобравшим в себя современные реалии интенсивно развивающейся области Web-технологий. Справочник содержит ценную информацию по созданию Web-страниц, обеспечению доступности сайта для устройств и пользователей, использованию JavaScript и скриптов DOM, созданию изображений GIF, JPEG, PNG, подходящих для размещения в Web-окружении, а также охватывает новые подходы к печати материалов из Web-пространства.

Получить в своё распоряжение


Философия CSS-дизайна

В этой книге на примере широко известного сайта CSS Zen Garden рассматривается применение каскадных таблиц стилей. Здесь нашли отражение такие вопросы, как подготовка HTML-разметки для последующего применения стилей, синтаксис языка CSS, принципы верстки, методы работы с графикой, особенности использования цвета, типографские эффекты и многое другое. Не осталась без внимания проблема неодинакового уровня поддержки CSS разными браузерами; авторы рассказывают о приемах, с помощью которых можно добиться межбраузерной совместимости. Эта книга не является учебником по CSS, но представляет несомненный интерес для различных категорий пользователей: от новичков до маститых профессионалов. Издание состоит из 7 глав, предметного указателя и приложения.

Получить в своё распоряжение


Моя жизнь в дизайне

Книга воспоминаний Юрия Соловьева уникальна. О своей жизни рассказывает человек, создавший в Советском Союзе собственную империю промышленного дизайна. Блестящий менеджер и авантюрист, художник и свидетель кремлевских интриг, баловень судьбы и человек, большинство проектов которого осталось известно лишь партийным бонзам и ведущим дизайнерам мира. Конструктор, который пытался сделать фасад социализма человеческим. Друг Василия и Светланы Сталиных, входивший в узкий круг советской «золотой молодежи» конца 30-40-х гг. и чудом уцелевший в годы массовых репрессий рассказывает о совершенно другой, параллельной стране, которую он во многом создал для себя сам. Людям, знакомым с книгами Солженицына и Шаламова, воспоминания Соловьева покажутся «Алисой в стране чудес». Насколько невероятной была его жизнь, настолько невероятными были и его проекты, как реализованные, так и те, что остались на бумаге. Это одновременно книга мемуаров и единственный в своем роде альбом по истории советского дизайна. Здесь и послевоенные пассажирские вагоны, на которых до сих пор ездит полстраны; и дизайн-проект первого атомного ледокола «Ленин» и первой атомной подводной лодки; и закрытый конкурс на лучшую яхту для Эйзенхауэра... И др.

Получить в своё распоряжение


CD-ROM. Web-дизайн для гуманитариев

Всеобщая компьютеризация коснулась не только фирм и банков, но и редакций, библиотек и научных институтов. Современному гуманитарию необходимо уметь обращаться с компьютером, ведь работать над электронным документом гораздо удобнее. Люди гуманитарного склада ума подчас теряются, читая объемные учебники, перенасыщенные техническими терминами и схемами. Именно в расчете на таких людей создан курс "Web-дизайн для гуманитариев". Все необходимые знания можно почерпнуть в пошаговых инструкциях с наглядными примерами и приятным звуковым сопровождением. Несколько коротких уроков - и вы станете уверенным пользователем! Ведь компьютер уже давно не роскошь, а замечательный помощник в работе и учебе.

Получить в своё распоряжение


Мультимедиа-дизайн во Flash 8

Данная книга является полным и подробным руководством по использованию Flash 8. Пошаговая программа обучения позволяет, не теряя времени, приступить к созданию Flash-роликов. Изучив главы, посвященные созданию анимации, читатель без труда сможет в считанные минуты создать свою первую Flash-анимацию. В книге раскрыты все аспекты работы с Flash: работа с панелью инструментов, монтажной линейкой и панелью Library, создание динамического текста и полей ввода, импорт графических элементов, работа с видео и звуком, все аспекты создания анимации движения и анимации форм, анимированных movie-клипов и кнопок. В книге объясняются основы создания расширенной интерактивности в ActionScript, также дан краткий курс по этому современному языку программирования. Книга является важным источником знаний в области создания современных мультимедиа-презентаций, игр и Web-дизайна с использованием Flash.

Получить в своё распоряжение



В избранное