Привет, друзья!

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

Но все это время я не пропадал зря, в профессиональном плане. В период с 22 января по 12 февраля я посещал курсы под названием “HTML и CSS. Уровень 2. Кроссбраузерная верстка сайтов“. Курс проходил в центре компьютерного обучения “Специалист“. К сожалению, тот формат курсов, на который я записался, а именно 4 субботы по 7 часов каждое занятие с несколькими короткими перерывами и часовым перерывом на обед, не совсем позволяли полностью впитать все знания, которые нам предлагал препод.

Для себя я почерпнул очень многое, а главное, на что обратили внимания курсы, так это “кроссбраузерность”. Я понимал, что это такое, но, насколько это важно, и также сложно (по крайней мере для меня) я понял именно на курсах. Придя после очередного занятия на работу, я решил проверить, как отображается мой рабочий сайт в IE, а именно в его младших версиях. Оказалось, что в IE6, сайт почти никак не отображается: выскакивала какая-то ошибка по поводу Javascript, да и сами элементы сайта как-то коряво отображались. Стоит еще заметить, что про такую полезную программу, как IETester и DebugBar для IE, я вообще не слышал до курсов, а только там понял, насколько она важна для разработчиков (только вот жалко тех, кто работает на Маках и Линуксах… там особо не постестируешь браузеры людей, которые совсем не могут или не хотят обновляться).

Несмотря на то, что я думал, что CSS и HTML – это самое простое в веб-строительстве (скорее всего, это так и есть), но оказалось, что это такая же режиссура, как и программирование: нужно знать свойства, правила, особенности элементов, особенности их взаимодействия друг с другими элементами и особенности их поведения при использовании тех или иных свойств CSS. Также немаловажно помнить о совместимости тех или иных свойств CSS с различными версиями IE. Например, мы на курсах пытались делать различные элементы наиболее совместимыми со всеми популярными браузерами, а именно Firefox, Safari, Opera, Chrome (насколько я понял, так как Chrome и Safari построены на одном обработчике -webkit, они работают с сайтами примерно одинаково.. кстати, свойства с приставкой -webkit предназначены именно для них) и, конечно же (барабанная дробь..) Internet Explorer с различными его версиями, начиная от 5.5.

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

Но, зато, после курсов у меня появились силы начать верстать еще один сайт для нашей компании. Некое подобие дизайна я накидал в фотошопе еще в конце прошлого года, вроде просто и со вкусом, вроде все получается, потихоньку, да и вроде кроссбраузерно (исключая IE5.5 – не буду его поддерживать, ну их!), но всё равно не получается:

1. сделать высоту столбцов в основном блоке одинаковой и
2. убрать футер в самый низ страницы

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

Поздравляю всех женщин с прошедшим праздником! Желаю им удачи, здоровья, успехов и любви! Не пейте много!

Всем удачи в начинаниях! Не забрасывайте свои планы!

Основы

Функция .setStyle();

Эта функция позволяет установить свойства стиля элемента. Все что нужно сделать, это добавить .setStyle() через сивмол точки («.») в конец строки с селектором (или к соответствующей переменной), и она изменит свойства стилей одного элемента или целого массива элементов.

//определяем селектор
//добавляем функцию .setStyle
//задаем необходимое свойство стиля и его значение
$('body_wrap').setStyle('background-color', '#eeeeee');

$$('.class_name').setStyle('background-color', '#eeeeee');

<div id="body_wrap">

    <div class="class_name"></div>
    <div class="class_name"></div>

    <div class="class_name"></div>
    <div class="class_name"></div>

</div>

.getStyle();

Если понимаешь хоть как-то по английски, тут все понятно: функция получает значение свойства стиля элемента (как-то много родительного падежа ).

//вначале объявляем переменную, в которой будет содержаться значение параметра стиля
var styleValue = $'body_wrap').getStyle('background-color');

Если бы мы прогнали этот код по предыдушим HTML строкам, переменная styleValue получила бы значение ‘#eeeeee’.

Получение и установка нескольких значений стиля

setStyles();

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

//начинаем мы с того, что создаем селектор, к которому добавляем, как всегда через точку, функцию
//в данном случае .setStyles();
$('body_wrap').setStyles({
    //шаблон, которого нужно придерживаться: 'свойство': 'значение',

    'width': '1000px',
    'height': '1000px',
    //ВАЖНО: после последнего значения запятую ставить НЕ НУЖНО!

    //это важно для кроссбраузерности приложения
    'background-color': '#eeeeee'
});

Примечание: Вообще не обязательно всегда заключать название свойства стиля в единичные кавычки. Они нужны только тогда, когда в названии свойства есть дефис (-), как, например, в свойстве font-size. Но для того, чтобы исключить возникновение проблем по причине не поставленной кавычки, лучше приучить себя к кавычкам. Потом искать долго, если что .

Еще одно примечание: эта функция предоставляет большую гибкость при определении значений свойств (таких как ‘200px’ или ‘#ffffff’). Помимо возможности передачи обычных текстовых строк, можно также передавать числа без кавычек (которые будут интепретированы как пиксели – px – в большинстве случаев) и переменные:

//эта строчка передает переменной firstBackgroundColor значение в формате ТЕКСТ '#eeeeee'
var firstBackgroundColor = '#eeeeee';
//можно задавать в качестве значения переменной другую переменную
//в данном случае переменная backgroundColor получает значение друго переменной - '#eeeeee'

var backgroundColor = firstBackgroundColor;
//эта строчка передает переменной divWidth значение в формате ЧИСЛО 500
var divWidth = 500;

$('body_wrap').setStyles({
    //в данном случае, переменные - это слова без кавычек
    'width': divWidth,

    //числа - это.... это числа без кавычек
    'height': 1000,
    //другая перменная
    'background-color': backgroundColor,

    //строки - это ряд символов, заключенных в 'единичные кавычки'
    'color': 'black'
});

.getStyles;

Эта функция позволяет получать несколько значений свойств стилей за один раз. Она работает немного иначе, чем мы виделли немного выше, а отличается этот метод тем, что он работает с несколькими наборами данных в формате ключа (свойство стиля) и его значения (значение свойства). Такой набор данных называется ОБЪЕКТОМ, а метод .getStyles(); позволяет легко формировать такие объекты, чтобы потом их также легко использовать.

//вначале нужно объявить переменную для нашего объекта
//потом создать селектор
//добавляем метод .getStykes к селектору
//после чего создаем список названий свойств стиля, разделенных через запятую
//все названия нужно заключать в 'единичные кавычки'
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color'); 

//вначале создаем новую переменную, которая будет содержать значение свойства
//передаем в переменную определенное свойство; 
//ключ объекта/массива и будет названием свойства
//название свойства заключаем в [квадратные скобки]
//не забываем про 'единичные кавычки' для ключа объекта/массива
var bgStyle = bodyStyles['background-color'];

Пример

В этом примере мы потренируемся использовать некоторые методы, рассмотренные в этом уроке, чтобы получать информацию о стилях (.getStyles();) и устанавливать свои стили (.setStyles();). Обращайте больше внимания не на манипуляции со свойствами стилей, а на структуру кода. Для того, чтобы отделить наши функции от события domready, мы передаем им несколько переменных, которые установленны в самом событии domready. А делается это примерно так: как видно вначале идет объявление переменных с функциями, но при этом видно, что функциям передаются переменные, которые объявляются позже, уже в событии domready, где функции, собственно и вызываются, но уже после объявленных переменных. Что-то вроде того…

Обратите внимания, что собятия click используют анонимные функции. Это дает нам возможность передавать переменные изнутри domready функциям за его пределами. Это может показаться полным бредом на первый взгляд, но пробежав глазами по коду немного ниже, думаю, должно все проясниться.

//обратите внимание, что эта функция имеет параметр "bgColor"
//эта функция будет использоваться уже внутри собятия domready

var seeBgColor = function(bgColor) {
	alert(bgColor);

}
var seeBorderColor = function(borderColor) {
	alert(borderColor);

}
 
//тут мы используем еще не объявленную переменную playDiv
//но, так как мы объявим переменную уже в событии domready и
//и это произойдет до того, как мы вызовим эту функцию, ошибки не будет
//плюс ко всему, теперь не нужно использовать селектор несколько раз
//очень полезно когда имеешь дело со сложными селекторами
var seeDivWidth = function(playDiv) {

        //снова получаем стиль
        //но в отличии от метода .getStyles();, который используем позже в domready,
        //тут мы получаем текущее значение параметра стиля
        //это обеспечивает точные значение ширины элемента, передаваемые в оповещение alert 
        //даже когда значения изменяются по ходу работы
		//или после того, как событие domready уже имело место

 
	var currentDivWidth = playDiv.getStyle('width');
	alert(currentDivWidth);

}
 
 
var seeDivHeight = function(playDiv) {
	var currentDivHeight = playDiv.getStyle('height');

	alert(currentDivHeight);
}
 
 
var setDivWidth = function(playDiv) {

	playDiv.setStyle('width', '50px');
}
 
var setBgColor = function(playDiv) {

	playDiv.setStyle('background-color', '#fdd1aa');
}
 
var setDivHeight = function(playDiv) {

	playDiv.setStyle('height', '50px');
}
 
//обратите внимание, что этот параметр на этом этапе может называться как угодно
//он примет любое значение (буть то элемент или еще что-либо) 

//при ее запуске из события domready
 
var resetSIZE = function (foo) {
	foo.setStyles({

		'height': 200,
		'width': 200,
        'background-color': '#fdd1aa'

 
	});
}
 
window.addEvent('domready', function() {

        //в этом примере мы часто используем этот селектор, поэтому проще и экономнее сразу
        //присвоить его переменной
	var playDiv = $('playstyles');

 
        //тут мы создаем объект с несколькими свойствами стиля
 
	var bodyStyles = playDiv.getStyles('background-color', 'border-bottom-color'); 

 
        //еще значение стиля можно получить обратившись в объекту со свойствами
        //с соответствующим ключем и назначив результат переменной
	var bgColor = bodyStyles['background-color']; 

 
        //тут используется анонимная функция чтобы иметь возможность передать параметр вне события domready
 
	$('bgcolor').addEvent('click', function(){

		seeBgColor(bgColor);
	});
 
 
	$('border_color').addEvent('click', function(){

                //вместо того, чтобы передавать параметр в доступную переменную,
                //его можно вызвать прямо сюда в алерт
		seeBorderColor(bodyStyles['border-bottom-color']);
	});

 
 
	$('div_width').addEvent('click', function(){

		seeDivWidth(playDiv);
	});
 
 
	$('div_height').addEvent('click', function(){

		seeDivHeight(playDiv);
	});
 
 
	$('set_width').addEvent('click', function(){

		setDivWidth(playDiv);
	});
 
 
	$('set_height').addEvent('click', function(){

		setDivHeight(playDiv);
	});
 
   	$('set_BgColor').addEvent('click', function(){

		setBgColor(playDiv);
	});
 
 
	$('reset').addEvent('click', function(){

		resetSIZE(playDiv);
	});
});

А теперь HTML код:

<div id="playstyles"> </div>
    <br />

    <button id="bgcolor">Получить background-color</button><br />
    <button id="border_color">Получить border-bottom-color</button><br />

    <button id="div_width">Получить width</button><br />
    <button id="div_height">Получить height</button><br />

    <button id="set_width">Установить width на 50px</button><br />
    <button id="set_height">Установить height на 50px</button><br />

    <button id="set_BgColor">Поменять background-color</button><br />
    <button id="reset">Сбросить</button>

И небольшой отрезок нужного нам CSS-кода:

#playstyles {
	width: 200px;
	height: 200px;

	background-color: #eeeeee;
	border: 3px solid #dd97a1

}

Получить background-color – смотрим цвет фона
Получить border-bottom-color – смотрим цвет границы нижней

Получить width – смотрим ширину
Получить height – смотрим высоту
Установить width на 50px – устанавливаем ширину на 50 пикселей
Установить height на 50px – устанавливаем высоту на 50 пикселей

Поменять цвет фона – меняем цвет фона на ‘#fdd1aa’
* Замечу, что несмотря на то, что после смены габаритов нашего объекта, кнопки, полчающие эти габариты, получают правильные значения (ширина = длина = 50px), кнопка получения цвета фона не прокатывает. По каким-то причинам (по каким, я не разобрался), код возвращает изначально установленный цвет фона объекта. Потому, будьте осторожны, если придется что-то подбное использоваться в ваших проектах!
Сбросить

А что же дальше?…

В 8-м уроке я планирую рассказать о том, как работать с числами, а именно о большинстве методов и функций в Mootools 1.2, предназначенных для работы с числами. Не забудьте подписаться на RSS, чтобы первыми прочитать следующий урок!