Вход / Регистрация
Вход
Урок 4: Графика в вебе, img, background-image, CSS-спрайты
План:
- Пиксели как минимальная единица измерения
- Разница между растровой и векторной графикой
- img и background-image
- CSS-Спрайты для сайтов
Домашка:
Создайте страничку и разместите на ней:
1) Блок, в котором выставите картинку
2) Блок, в котором будет текст, а нижним слоем используете фоновое изображение (background-image)
3) Создайте CSS-спрайт из 3-х изображений (получится 1 картинка, в которой будет располагаться 3 картинки).
4) Блок, в котором разместите 3 изображения из ранее созданного спрайта.
1) Блок, в котором выставите картинку
2) Блок, в котором будет текст, а нижним слоем используете фоновое изображение (background-image)
3) Создайте CSS-спрайт из 3-х изображений (получится 1 картинка, в которой будет располагаться 3 картинки).
4) Блок, в котором разместите 3 изображения из ранее созданного спрайта.
Дополнение к уроку:
Не забывайте важное правило: в вебе запрещено использовать в именах файлов и URL:
1) Пробелы (используем дефис вместо пробела)
2) Нижнее подчёркивание, так же используем дефис, так как в вебе принято нижним подчёркиванием указывать ссылки и нижнее подчёркивание ссылки (декоративным) сливается с нижним подчёркиванием (в имени файла), что создаёт трудности понять, находится ли перед нами пробел или нижнее подчеркивание.
3) Кириллицу (Русские буквы) а так же другие за исключением латиницы (Английские буквы). Связано с особенностью работы некоторых веб-серверов.
4) Спецсимволы запрещённые файловой системой.
Для генерации спрайтов подойдет любой онлайн сервис, который можно найти в гугле по запросу: "sprites generator online", вот дам пару ссылок для самых ленивых :) Генераторы создают имена классам равные именам файлов, так что перед загрузкой переименуйте файлы в нужные названия.
Генератор позволяющий настраивать имена для CSS классов, очень удобно
Ещё один генератор, на этот раз только позволяет дописывать префиксы.
Раз мы дошли до префиксов, хотелось бы акцентировать внимание когда они используются. Бывает так, что над проектом работают несколько человек, или же проект на столько большой, что схожий материал встречается на разных страницах. Допустим у нас есть форма авторизации .form-auth , которая на одной странице должна быть с зеленым фоном, а на второй с желтым. При этом одну форму может разрабатывать один верстальщик, а вторую - второй. Чтобы стили не перебивали друг друга можно применить 2 подхода:
1) Подключать на одной странице один css файл, тогда как на второй - второй, и стили не пересекутся.
2) Указывать префикс, выглядит это так: .reg-form-auth , обычное ключевое слово разделённое любым спец.символом, в данном случае дефисом, и говорящее само за себя, что данная форма находится в разделе регистрации. Или же .inpost-form-auth - говорит, что разработчиком данной формы был inpost, мой личный никнейм (он же псевдоним). Префикс избавит нас от возможной проблемы, когда некоторые стили присутствуют на всех страницах и подключены в общем css файле (базовом), а так же, когда мы используем иные свойства на внутренних (не на главной) страницах. Или же когда над одной версткой могут работать несколько верстальщиков. Вторая причина когда мы подключаем сторонние библиотеки (код написанный другими программистами), допустим для слайдеров, галерей, и чтобы их библиотеки можно было бы без труда встроить в любой сайт, то они используют в обязательном порядке префиксы. Пример префикса "fa" для вставки на сайте особых иконок от font-awesome, удобная, кстати, вещь, я использую в своих сайтах :) .
1) Пробелы (используем дефис вместо пробела)
2) Нижнее подчёркивание, так же используем дефис, так как в вебе принято нижним подчёркиванием указывать ссылки и нижнее подчёркивание ссылки (декоративным) сливается с нижним подчёркиванием (в имени файла), что создаёт трудности понять, находится ли перед нами пробел или нижнее подчеркивание.
3) Кириллицу (Русские буквы) а так же другие за исключением латиницы (Английские буквы). Связано с особенностью работы некоторых веб-серверов.
4) Спецсимволы запрещённые файловой системой.
Для генерации спрайтов подойдет любой онлайн сервис, который можно найти в гугле по запросу: "sprites generator online", вот дам пару ссылок для самых ленивых :) Генераторы создают имена классам равные именам файлов, так что перед загрузкой переименуйте файлы в нужные названия.
Генератор позволяющий настраивать имена для CSS классов, очень удобно
Ещё один генератор, на этот раз только позволяет дописывать префиксы.
Раз мы дошли до префиксов, хотелось бы акцентировать внимание когда они используются. Бывает так, что над проектом работают несколько человек, или же проект на столько большой, что схожий материал встречается на разных страницах. Допустим у нас есть форма авторизации .form-auth , которая на одной странице должна быть с зеленым фоном, а на второй с желтым. При этом одну форму может разрабатывать один верстальщик, а вторую - второй. Чтобы стили не перебивали друг друга можно применить 2 подхода:
1) Подключать на одной странице один css файл, тогда как на второй - второй, и стили не пересекутся.
2) Указывать префикс, выглядит это так: .reg-form-auth , обычное ключевое слово разделённое любым спец.символом, в данном случае дефисом, и говорящее само за себя, что данная форма находится в разделе регистрации. Или же .inpost-form-auth - говорит, что разработчиком данной формы был inpost, мой личный никнейм (он же псевдоним). Префикс избавит нас от возможной проблемы, когда некоторые стили присутствуют на всех страницах и подключены в общем css файле (базовом), а так же, когда мы используем иные свойства на внутренних (не на главной) страницах. Или же когда над одной версткой могут работать несколько верстальщиков. Вторая причина когда мы подключаем сторонние библиотеки (код написанный другими программистами), допустим для слайдеров, галерей, и чтобы их библиотеки можно было бы без труда встроить в любой сайт, то они используют в обязательном порядке префиксы. Пример префикса "fa" для вставки на сайте особых иконок от font-awesome, удобная, кстати, вещь, я использую в своих сайтах :) .
|
|