Download
1 / 41
410 likes | 658 Views
Разработчик может определять стили следующими способами:. внутри единственного элемента HTML; внутри элемента < head > страницы HTML; во внешнем файле CSS. Приоритет использования стилей. стили , используемые по умолчанию браузером; стили, хранящиеся во внешней таблице;
E N D
Разработчик может определять стили следующими способами: • внутри единственного элемента HTML; • внутри элемента <head> страницы HTML; • во внешнем файле CSS.
Приоритет использования стилей • стили, используемые по умолчанию браузером; • стили, хранящиеся во внешней таблице; • стили, хранящиеся во внутренней таблице стилей (внутри тега <head> ); • встроенный стиль (внутри элемента HTML).
СинтаксисCSS состоит из трех частей:селектора, свойства и значения: селектор {свойство: значение} • Свойство и значение разделяются двоеточием и помещаются внутри фигурных скобок:p {font-size: 75%} • Если значение состоит из нескольких слов, то необходимо поместить значение в кавычки:h1 {font-family: "lucidacalligraphy"} • Если требуется определить более одного свойства, то необходимо разделить свойства точкой с запятой:table { font-family: arial, "sansserif"; border-style: dotted} • Чтобы определения стилей было удобно читать, можно каждое свойство писать на отдельной строке:h2 { font-family: arial; margin-right: 20pt; color:#ffffff } • При определении правил допускается группировка селекторов, при этом в качестве разделителя селекторов используется запятая. В следующем примере в группу были объединены все элементы абзацев, таблиц и списков. Все эти элементы будут выведены шрифтом sansserif:p,table,li { font-family: "sansserif"; }
Селектор класса (class) - задание различных стилей для одного и того же типа элемента HTML • Селектор идентификатора (id) - стили элементов HTML, определяется символом #
Внешний файл (style.css):ol {margin-left: 10pt} ul{margin-right: 20pt}li {font-family: arial} <html> <head> <link rel="stylesheet" type="text/css" href="http://www.intuit.ru/image/style.css"> </head> <body> <ol><!—Список имеет внешний отступ в 10 пунктов --> <li>для этого элемента списка будет задан шрифт "arial"</li> <li>для этого элемента списка будет задан шрифт "arial"</li> </ol> <ul><!—Список имеет внешний отступ в 20 пунктов --> <li>для этого элемента списка будет задан шрифт "arial"</li> <li>для этого элемента списка будет задан шрифт "arial"</li> </ul> </body> </html>
как задать фоновый цвет элемента. <html> <head> <style type="text/css"> ul{background-color: rgb(200,10,200)} ol{background-color: #00FFFF} li {background-color: transparent} p {background-color: blue} </style> </head> <body> <ul> <li>this is ul</li> </ul> <ol> <li>this is ol</li> </ol> <p>This is a paragraph</p> </body> </html>
Параметры текста в CSS • HTML тег pre определяет предварительно отформатированный фрагмент текста • h1 { color: green } • p { direction: rtl} • h1 { text-align: right } • H1 • p { font-size: small } pre { font-size: 5pt } i { font-size: 3em } p { font-size: 120% } { text-decoration: overline }
Распределение вакансий по типам платформ
Математический подход к созданию сайтов
Дизайн Фибоначчи0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144
Страница разделена на три колонки. Каждый столбец соответствует числу Фибоначчи. Ширина базы - 90 пикселов. База умножается на число Фибоначчи, чтобы получить общую ширину столбца. Первая колонка имеет ширину 180 пикселей (90 х 2), вторая колонка имеет ширину 270 пикселей (90 х 3) и третья колонка имеет ширину 720 пикселей (90 х 8). Размер шрифта также соответствует числу Фибоначчи. Заголовок страницы имеет размер 55px; заголовок статьи 34px; а основной текст 21px.
Другие методы • Правило третей • Музыкальная логика Макеты страниц представлены на http://habrahabr.ru/post/154087/
анекдот: Встречает мастер своего преподавателя по вышке лет через восемь после окончания вуза, разговорились, вспомнили время былое. Профессор спрашивает:— Вот я вам читал три года высшую математику, скажи, в жизни тебе мои знания когда-нибудь пригодились?Студент, подумав:— А ведь был один случай.— Очень интересно, расскажите, я его буду на лекциях рассказывать, что высшая математика не такая абстрактная наука и в жизни бывает нужна.— Шел я как-то по улице, и мне шляпу ветром в лужу сдуло. Так я взял кусок проволоки, загнул его в форме интеграла и шляпу достал!
Принципы дизайна сайта • 1. Юзабилити сайта • 2. Психология пользователя • 3. Психология цвета
5 основных факторов юзабилити сайта • Интуитивность, или доходчивость. Насколько понятен ваш сайт для нового пользователя. Вы и ваши постоянные пользователи знают сайт, но для нового пользователя ваш сайт должен быть интуитивно понятен. Человек должен охватить и переосмыслить всю концепцию (цель) сайта за доли секунды. По поводу структурных элементов: ссылки должны выглядеть как ссылки, кнопки как кнопки, заглавие покрывать текст, к которому относится. Дайте понять, где можно нажать, а где нет. • Эффективность. Насколько легко пользователю найти нужную информацию или пользоваться сервисами. Не заставляйте думать своих пользователей. Эффективный дизайн сайта тот, который понятен моей бабушке. Вы скажете это не солидно? Не солидно напрягать посетителей, а простота – это верх совершенства. Выберите 3-5 наиболее важных блоков, которые будут полезны (эффективны) для посетителя. • Запоминаемость. Вот фактор, который привлекает внимание креативщиков. У каждого сайта должна быть «изюминка», и это не только название и слоган. Ваш сайт должен вызывать желание возвращаться вновь и вновь. • Предотвращение ошибок. Сколько ошибок совершают пользователи и насколько они критичны. Например: на каталоге сайтов есть рубрики Медицина и Домашние животные. Где искать сайты о ветеринарии? Нажав на раздел «медицина», вы не находите нужные сайты, нажав на «домашние животные» тоже. Оказывается, ветеринария относится к разделу «Наука и образование». Подобных дилемм, не должно возникать у пользователей. Также это касается форм. Например:лучше выводить сообщение о занятости логина до нажатия кнопки зарегистрировать. • Удовлетворенность. Это то ощущение, которое должно оставаться у пользователя после посещения вашего сайта. Это равнозначно, как прокатиться на «ВАЗ» или на дорогом «BMW».
Психология пользователя • Выраженность Мы понимаем, чтобы выразить один предмет, достаточно затемнить другой. Также можно выразить что-то с помощью искажения природных пропорций (это более касается фотографий). Если что-то имеет не естественное пространственное положение, мы сразу устремляем свой взор на тот предмет. Важно выражать искомые элементы (контент). Если с контентом будут конкурировать другие элементы, это вызывает дискомфорт. Мы понимаем, что нужно сделать то зачем пришли, а отвлекаемся на другое. Это будет бесить пользователей. Иллюстративность Человек на 83% воспринимает зрительно. При зрительном восприятии 40% информации запоминается, что в 2 раза больше от слушания (20% запоминаемость). Иллюстративность – это не только картинки, фото и видео. Цифры, также дают неплохой воображаемый эффект. Цифры дают понять физическую величину определенного понятия. Но не стоит использовать слишком много цифр. Если нужно показать много цифр, лучше нарисовать график. График дает возможность увидеть, а значит на 40% запомнить цифры, что не возможно было бы при помощи простого текста. Разрабатывая дизайн сайта для фирмы, советую особенно обратить внимание на иллюстративность ваших материалов. • Символика Символиканачинается с элементарных знаков препинания и заканчивая иконками. Не следует злоупотреблять иконками. Используйте только наиболее известные и простые иконки. В противном случае – это рисунок. Пресыщенность страницы иконками также сбивает и не дает сконцентрироваться. Задача символики, дать мгновенное понятие о назначении элемента, не читая текст. • Какие иконки следует использовать в дизайне? Наиболее встречаемые для данной группы пользователей. (Например: Для молодежи будет понятна иконка смартфона или планшета, но никак не приемлема старого радиоприемника). Необходимо учитывать: возраст, регион, менталитет. Чем проще иконка, тем легче ее воспринять. В иконке не должно быть лишних деталей, как и в машине.
Психология цвета • цвет – это не основа. Это вспомогательный инструмент в создании дизайна для сайта. • Красный • Европа: лидерство, уверенность, выраженность Христианство: жертва, страсть, любовь • Голубой • Европа: успокоение Христианство: цвет Христа В мире: цвет безопасности • Желтый • Европа: счастье, надежда, радость, трусость в опасностях, слабость Япония: мужество • Оранжевый • Европа: осень, урожай, творчество Ирландия: протестанты (религиозные) • Коричневый • Колумбия: препятствие продажам Европа: промышленность, земля, престиж (оттенки) • Зеленый • Европа / США: весна, новое рождение, День Святого Патрика, Рождество (с красным) • Фиолетовый • Европа: стиль, грусть, озабоченность • Белый • Европа: брак, ангелы, врачи, больница, мир • Черный • Европа: траур, похороны, смерть, бунт, спокойствие • Цвет – это средство, с помощью оттенков вы можете добиться компромиссных вариантов. Например, тот самый черный траур, при использовании в качестве фона дает эффект глубины и большей выраженности страницы.
Баланс и контраст • Эффективная формула пропорций цветов выглядит так: • 60% площади – основной, наименее насыщенный оттенок; • 40% площади – вторичный, более насыщенный цвет; • 10% площади – акцентирующий, самый яркий цвет. • Последний – должен содержать наиболее важную информацию о продукте (надписи, заголовки).
SEO-оптимизацияОптимизация в Google • Googleиспользует софистический алгоритм ранжирования сайтов, более ста разных критериев. Чтобы позиции ресурса не опускались, нужно дополнительно оптимизировать сайт. Необходимо всегда пытаться использовать новые методы. • Поисковой системой google индексируется следующий текст: в теге <title>, в теге <noframes>, ссылки <а href=»filehtml»>ключевое слово</а>, между тегом <body> , если он не внутри других тегов, между <html>-тeгoм, тега <imgalt = «ключевое слово «>, в теге <option>. • Не индексируется: тега <! — Comments —>, между тегом <style>, в названии файлов <а href=»keyword.html»>text</a>, мета описания и между тегом <metahttp-equiv>. • На выдачу результата в поисковике оказывает влияние количество страниц с других сайтов, которые ссылаются на ваши странички, ключевые слова в Anchor-тексте, близость ключевых слов друг к другу. • Google всегда проверяет качество проиндексированных ресурсов, и когда не соблюдаются определенные правила, то они исключаются из базы. • Не применяйте скрытые ссылки и переадресацию. Слова, которые не относятся к теме и автоматические запросы. Так же страницы портала, которые предназначены лишь для поисковиков (партнерские программы, где отсутствует оригинальное содержание).
Оптимизация • Оптимизация в Aport • Aport— это полнотекстовой поисковик. Одним словом он индексирует абсолютно все слова, которые пользователь увидел на дисплее, при просмотре определенной странички. Для документов HTML индексируется и заголовок документа title, описания страничек <metadescription>. Работа этой поисковой системы мало напоминает другие поисковики. • Вот некоторые характерные черты Aport: к его роботу можно обратиться с помощью файла robots.txt, Aport видит разницу между www.server.ru/~yoursayt/ и www.server.ru. Наверное, это единственная его положительная черта. Сайты с маленькими тиц почти вообще не индексируются. А теперь немного об оптимизации для WebAlta. • Разработка новой поисковой системы Рунета, которая называется Webalta.ru, проводилась давно. Теперь она тестируется. Для улучшенного поиска здесь учитывают русскую морфологию, так же усовершенствованная процедура отбора и сортировки найденного. Очень высокая частота обновления поисковика. • Теперь можно искать, допустим, украинские странички на русском. После регистрации в Каталоге сайт добавляется в очередь на индексацию. Релевантность к поисковому запросу WebAlta повышается, когда есть большое количество ссылок содержащие ключевые слова, когда маленькое расстояние между частями поискового запроса и другие.
Оптимизация на Rambler • Ramblerможет обрабатывать все так называемые динамические страницы *.asp*, *.php*, *.pl* и тому подобное, для часто посещаемых сайтов. • Когда работаешь с MacromediaFlash, индексируются все гипертекстовые ссылки, находящиеся внутри объекта, но вот текст – нет. Рекомендуютьсоставить html-версию Flash-сайта. Крупные документы будет лучше разбивать на пару частей. • Специальный робот постоянно добавляет в базу поисковой машины все новые страницы всех сайтов. После модифицирования информации, в рейтинге Тор 100, обновление совершается приблизительно в течение двух дней. • Актуальность к поисковому запросу увеличивается, когда есть большое число ссылок с ключевыми словами или фразами, когда запрос расположен в названии (тег < title >) и, когда есть высокая популярность ресурса и другое. • Эта поисковая система индексирует сайты Интернета по своим правилам. • Робот этой системы называется StackRambler. • Робот игнорирует мета-теги. Ключевые слова нужно включать в теги: <title>; <b>, <strong>, <u> и <h4>. • Положение в итогах поиска определяется актуальностью всего вашего сайта запросу. • Rambler правильно обрабатывает динамические сайты, но есть и ограничения.
