Урок №17. Валидация темы – проверка и подтверждение.

Перед тем, как начать работать с CSS и файлом style.css, вам необходимо произвести валидацию вашего XHTML кода или, проще говоря, проверить его соответствие стандартам консорциума W3C. Другими словами это значит удостовериться, что вы не сделали ошибок :) В начале курса я дал вам две ссылки на закладки — XHTML Validator и CSS Validator. На этом уроке мы воспользуемся XHTML валидатором.

Этот урок будет очень коротким и простым, потому что вам необходимо время, чтобы разобраться во всем, что вы узнали о XHTML и PHP. Не гонитесь за моими уроками. Дайте себе время на обдумывание и восприятие всего кода, до появления четкой картинки в вашей голове. Как открыть невидимый блок? Какая разница между id и классом? Какую РНР функцию нужно использовать, чтобы вызвать заголовок блога? Описание блога? Чем больше вы понимаете и четче представляете себе все процессы, тем легче запоминаете их.

Подготовьтесь хорошенько. Когда мы начнем CSS, я буду достаточно глубоко погружаться в эту тему, потому что это то, чему вы будете посвящать 75% времени работы над своим будущим шаблоном.

Для сегодняшнего урока вам нужно открыть только Apache и браузер (http://wordpress/).

В браузере зайдите на View > Page Source или Source. Выделите все. Скопируйте весь исходный код. Откройте новую вкладку или окно браузера, зайдите на XHTML Validator.

Опуститесь в низ страницы, вставьте исходный код в область Validate by Direct Input.

После нажатия на кнопку Check, валидатор проверит весь код, и откроет страницу результатов. Если сообщение зеленого цвета — это значит что ошибок нет и вы всё сделали правильно до этого момента.

Поздравляю и думаю вы готовы приступисть к работе над CSS, чем мы и займемся в следующем уроке.

Урок №18 Style.css и вступление к CSS

Лучший способ выучить CSS — как и многое другое – это сразу приступить к практическим занятиям. В отличие от XHTML и PHP, вам не надо работать с центральными файлами шаблона. Также нет никакой базовой концепции, в которой нужно разобраться. Просто пробуйте! Здесь также работает любимый метод проб и ошибок.

Перед тем, как начать, в вашем файле style.css уже должна быть некоторая информация. Давайте прямо сейчас выясним, что она означает.

?

1 2 3 4 5 6 7 8

/* Theme Name: Тестовая тема Theme URI: http://wp-config.ru/ Description: Тестовая тема учебного курса. Version: 1.0 Author: wp-admin Author URI: http://wp-config.ru/ */

• Первая строчка – это имя темы, она говорит сама за себя.

• Вторая строка – это место расположения страницы вашей темы или место где она всегда доступна. Если вы создаете тему для себя, не для публичного использования, забудьте об этом.

• Третья строка – описание темы.

• Четвертая – номер версии, что важно, особенно, когда вы выпускаете обновленные версии вашей темы для общественного пользования.

• Пятая и шестая строки – это соответственно имя автора и его домашняя страница.

• Знаки /* и */ ставятся, чтобы информация  о вашей теме не влияла на остальную часть страницы. Это комментирование CSS. Когда вы будете вводить код CSS для стилизации своей веб-страницы, вам может понадобиться добавить комментарии в том или ином месте, чтобы не запутаться. Но вы же не хотите, чтобы эти комментарии влияли на код? Для этого необходимо использовать знаки /* и */, чтобы сделать комментарии невидимыми браузеру.

Вот обработанная информация о теме:

Шаг 1:

На этом этапе вам необходимы все браузеры, под какими вы хотите чтобы правильно отображалась ваша тема: Mozilla Firefox, Internet Explorer(в идеале версий 6, 7 и 8), Opera, Google Chrome и Safari — всё для тестирования темы под ними. Разные браузеры порой по разному воспринимают CSS. Лучше всего тестировать тему в как можно большем количестве операционных систем и браузеров. Если вы так же ленивы как и я — тестируйте тему только в Firefox :-)

Шаг 2:

Откройте файл style.css в редакторе и вставьте туда следующий код:

?

1 2 3 4 5 6 7 8 9

body { margin: 0; font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 12px; text-align: left; vertical-align: top; background: #ffffff; color: #000000; }

Как и при работе с XHTML или PHP, добавляйте отступы для организации кода:

Сохраните файл style.css, обновите браузеры, чтобы увидеть изменения (помните что вы работаете с несколькими браузерами).

Считайте, что body{ } – это тэг, а все, что между фигурными скобками – это атрибуты и значения, как и в  XHTML. { — это открыть. } – это закрыть. Внутри фигурных скобок { и } двоеточие означает начало значения, а точка с запятой — конец (я использую термины из XHTML и PHP «тэг», «атрибут», «значение» для СSS, чтобы вам было проще; на самом деле, РНР и CSS используют разные термины, например: параметры, селектор и свойство).

Перед тем как продолжить, объясню, почему вы использовали CSS селектор body{ } — потому, что вы работаете над стилизацией базовой части веб-страницы – тэгом <body>. Вы не стилизируете тэг <header>, потому что нечего стилизировать. Все, что отображается на веб-странице находится в структуре тэгов <body> и </body>.

Позже вы будете работать над стилем DIV блока с ID «header» и каждый блок, для которого потребуется указать свой стиль, оличный от общего.

Давайте подробнее разберемся в нашем коде:

margin: 0; — отмена созданных по умолчанию отступов внутри боди тэга. Если вы хотите, чтобы отступы присутствовали, или вообще сделать их больше, измените 0 на большее значение: 10рх, 13рх, 20px и т.д. РХ сокращенно пиксель (pixel). Когда поле равно «0″, вам не обязательно ставить рх после нуля.

На изображении ниже красным обозначен используемый по умолчанию отступ, примененный к боди тэгу:

После изменения отступа на margin: 0; отступы исчезнут.

font-family: Verdana, Helvetica, Georgia, Sans-serif; — указывает, какой шрифт использовать для отображения элемента. Шрифты, которые следуют после первого, в данном случае это Verdana, являются альтернативными. Если у посетителей вашей страницы в системе не установлен шрифт  Verdana, браузер будет искать шрифт Helvetica, потом Georgia, затем Sans-serif. Вы можете найти список установленных шрифтов в системной папке Fonts вашей операционной системы;

font-size: 12px; — размер шрифта, здесь все говорит само за себя. Увеличте или уменьшите показатель, чтобы увидеть изменения;

text-align: left; — выравнивает ваш текст по левому краю, измените его на выравнивание на «right» или «justify», чтобы увидеть изменения;

vertical-align: top; — проверяет, все ли начинается с верха страницы. Если вы измените данный пункт на выравнивание по середине или по нижнему краю, содержимое опустится вниз;

background: #ffffff; означает белый фон. Кадый цвет имеет свой код в HTML Например #ffffff – это код белого цвета. #000000 – код черного.

color: #000000; означает, что текст будет черного цвета.

В нашем курсе мы изучим азы CSS на достаточном уровне для того, чтобы вы смогли создать несложную тему для WordPress. Если вы хотите двигаться дальше и глубже изучить CSS — вы можете сделать это самостоятельно, вне рамок нашего курса, освоить его вам поможет этот самоучитель или этот учебник.

Урок №19 HEX коды и стили ссылок

Продолжая знакомиться с CSS, сегодня мы узнаем больше о HEX кодах. Свойство цвета с присвоенным шестнадцатиричным HEX кодом (hexadecimal (hex) code) предназначено для окрашивания текста. Например, body { color: #000000;} означает, что весь текст внутри тега <body> вашей страницы будет черным. Свойство фона с присвоенным HEX кодом существует для придания цвета всему, что не является текстом. Например, body {background: #ffffff; } означает, что фон будет белый.

Hexadecimal Codes:

• с предшествующим знаком #, каждый цветовой HEX код имеет шесть цифр. Эти цифры варьируются от #ffffff (белый) до #000000 (черный).

• #ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, #999999, #888888, #777777, #666666, #555555, #444444, #333333, #222222, #111111, #000000.

• первые две цифры представляют красный цвет, третья и четвертая – зеленый, последние две – синий. #ff0000 это красный. #550000 это темно красный. #220000 это бордовый. #00ff00 это зеленый. #0000ff это синий. Стоп, а разве желтый не основной цвет? Какой код соответствует желтому? #ffff00 это желтый. #ff00ff — фиолетовый.

Шаг 1

Вставьте следующий код под селектором body{ }:

?

1 2 3 4

a, a:visited{ text-decoration: underline; color: #336699; }

Вы сделали так, что все ссылки были подчеркнуты (text-decoration: underline;) и выделены синим цветом (color: #336699;). Это другой оттенок синего, но это синий, потому что последние две цифры, характеризующие степень синего, наиболее большие.

• a – а это для стилизации ссылок. Когда вы хотите слово превратить в ссылку, что вы используете? Тэги <a> и </a>, следовательно, A — это a в вашем CSS.

• a:visited — для стилизации ссылок, которые вы уже посещали ранее.

• вместо того, чтобы вставлять:

?

1 2 3 4

a { text-decoration: underline; color: #336699; }

и

?

1 2 3 4

a:visited { text-decoration: underline; color: #336699; }

мы перечислили аттрибуты через запятую, чтобы применить одинаковые параметры сразу к обоим селекторам.

Шаг 2

Вставьте следующий код под a, a:visited{ }

?

1 2 3

a:hover{ text-decoration: none; }

Что это делает? Вы удостоверились, что подчеркивание ссылки исчезает, когда вы наводите на нее курсор, отсюда a:hover. Если вы не хотите подчеркивания по умолчанию, а чтобы оно появлялось только во время наведения курсора,тогда поменяйте значение параметра text-decoration: для a и a:hover наоборот. Если вы хотите, чтобы ссылка меняла цвет во время наведения курсора, добавьте color: и любой цветовой код. Например:

?

1 2 3 4

a:hover { text-decoration: none; color: #ff0000; }

Пока всё, пробуйте и не бойтесь делать ошибок и спрашивать совета!