Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

Обратная связь

Презентация на тему Введение в CSS

Содержание

2. До появления CSSДо появления CSS, дизайнеры и
3. Способы подключения стилей к странице (1)1. Подключение
4. Способы подключения стилей к странице (2,3) 2. Встраивание
5. Преимущества использования CSSОчищение html-кода от стилейУскорение загрузки
6. Оформление заголовковЗаголовок - один из важнейших аспектов
7. 1. Задание цвета. Создадим html файл и
8. 2.ВыравниваниеТеперь поставим заголовок 1-го уровня по центру
9. 3. НачертаниеТеперь изменим начертание шрифта для заголовка
10. 4. Фон и границаДля примера, выделим заголовок
11. Задание стилей основного блока (пример 1)/* Задание
12. Пример 2 использования файла CSS
13. для html-файлаСтраницатекст текст текст 0 текст текст
14. Вставка swf-файла
15. УрокСоздание простого блока
16. Создание простого блока (css-файл)/* Задание стилей всего
17. Задание стилей основного блока/* Задание стилей основного
19. УрокПрижимаем footer к низу страницы
20. Прижимаем footer к низу страницы (css)html, body
21. /* элемент ниже позволяет не наезжать подвалу
22.
23. УрокПример безтабличной верстки
24. Простой шаблонhttp://www.css-school.ru/css_verst/44-urok-css-vjorstki-4.-prostojj-shablon.html
25. Часть 2CSS-навигация
26. Правила оформления списковВ html различается 2 вида
27. Для нумерованных (ol)Оформление (стиль) задаётся одним атрибутом:
28. Для маркированных (ul)Для маркированных (ul): disk –
29. Mаркер-рисунокТакже, можно задать рисунок как маркер списка. Делается это так: list-style-image: url(Адрес рисунка)
30. Положение маркераС помощью стилей можно задать и
31. Меню с помощью списка (1)Создадим вертикальное меню
32. Меню с помощью списка (2)Дальше работаем только
33. Меню с помощью списка (3)Теперь добавим эффектов
34. Атрибут CSS 2.0 «z-index» (1) Атрибут z-index
35. Атрибут CSS 2.0 «z-index» (2)По умолчанию значение
36. Применение атрибута z-indexАтрибут применяется чаще всего для
37. z-index. Пример. index.htmlСделаем эффект лёгкой тени для
38. z-index. Пример. style.cssВ style.css запишем: #text {
39. Сравнение двух типов верстки (блочного и табличного)Рассмотрим
40. Достоинства и недостатки табличного позиционированияУ таблиц множество
41. Достоинства и недостатки блочной версткиБлочной вёрсткой, называется
42. Что выбрать?Очень многие веб-разработчики, которые считают себя
43. Что такое спрайт?Спрайт – одно изображение, в
44. Пример. Спрайт-меню. index.htmlСоздадим вертикальное меню, состоящее из
45. Пример. Спрайт-меню. style.css (1)Перейдём к оформлению. Сначала
46. Пример. Спрайт-меню. style.css (2)Теперь зададим стили для
47. Бестабличная верстка – обтекания, или CSS Float
48. Сферы использования CSS Float Обтекание фиксированного объекта
49. Основные особенности работы с floatОбъект со стилем
50. Основные проблемы работы с floatОсновная проблема при
51. Шаблон персонального сайта – основа дизайна
52. Шаблон персонального сайта – основа дизайна
53. 2 вариант. index.htmlПопытаемся сделать простую структуру из
54. 2 вариант. style.css html,body { width:1000px;
55. В Опере и подобных браузерах это будет выглядеть так
56. А в IE6 будет так На рисунке ясно
57. Скачать презентацию
58. Похожие презентации

До появления CSSДо появления CSS, дизайнеры и верстальщики прописывали стили внутри html тегов. Это довольно неудобно, так как при желании изменить какой-либо стиль, необходимо делать изменения во многих местах, да и кроссбраузерность никто гарантировать не мог.

Введение в CSS CSS (каскадные таблицы стилей)

Способы подключения стилей к странице (1)1. Подключение CSS отдельным внешним файлом с

Способы подключения стилей к странице (2,3) 2. Встраивание блока стилей в саму страницу.

Преимущества использования CSSОчищение html-кода от стилейУскорение загрузки страниц сайтаМаксимальная кроссбраузерностьРасширенные возможности работы

Оформление заголовковЗаголовок - один из важнейших аспектов преставления текста. Он даёт читателю

1. Задание цвета. Создадим html файл и запишем туда такой код:

2.ВыравниваниеТеперь поставим заголовок 1-го уровня по центру страницы. Для этого в списке

3. НачертаниеТеперь изменим начертание шрифта для заголовка 2-го уровня. Для примера возьмём

4. Фон и границаДля примера, выделим заголовок 3-го уровня фоновым цветом. и

Задание стилей основного блока (пример 1)/* Задание стилей основного блока */ .body

для html-файлаСтраницатекст текст текст 0 текст текст текст текст текст текст текст

Создание простого блока (css-файл)/* Задание стилей всего блока */ #block{ width:

Задание стилей основного блока/* Задание стилей основного блока */ .body {

Прижимаем footer к низу страницы (css)html, body { margin: 0; padding: 0; height: 100%; /*

/* элемент ниже позволяет не наезжать подвалу на контент, он должен быть

Простой шаблонhttp://www.css-school.ru/css_verst/44-urok-css-vjorstki-4.-prostojj-shablon.html

Правила оформления списковВ html различается 2 вида списков: нумерованный и ненумерованный (маркированный).

Для нумерованных (ol)Оформление (стиль) задаётся одним атрибутом: list-style-type. Значения этого атрибута

Для маркированных (ul)Для маркированных (ul): disk – простой круг (по умолчанию); circle

Mаркер-рисунокТакже, можно задать рисунок как маркер списка. Делается это так: list-style-image: url(Адрес рисунка)

Положение маркераС помощью стилей можно задать и положение маркера относительно текста. Это

Меню с помощью списка (1)Создадим вертикальное меню с помощью списка. Начнем

Меню с помощью списка (2)Дальше работаем только с css файлом. Запишем в

Меню с помощью списка (3)Теперь добавим эффектов при наведении мыши на кнопку:

Атрибут CSS 2.0 «z-index» (1) Атрибут z-index допустимо применять только к свободно

Атрибут CSS 2.0 «z-index» (2)По умолчанию значение атрибута z-index – auto. При

Применение атрибута z-indexАтрибут применяется чаще всего для позиционирования сложных и/или активных блоков.

z-index. Пример. index.htmlСделаем эффект лёгкой тени для текста без использования картинок, зато

z-index. Пример. style.cssВ style.css запишем: #text { font:30px Tahoma; position: relative;

Сравнение двух типов верстки (блочного и табличного)Рассмотрим их достоинства и недостатки, попробуем

Достоинства и недостатки табличного позиционированияУ таблиц множество положительных сторон, многие из которых

Достоинства и недостатки блочной версткиБлочной вёрсткой, называется вёрстка, выполненная без использования таблиц.

Что выбрать?Очень многие веб-разработчики, которые считают себя «продвинутыми» призывают к полному отказу

Что такое спрайт?Спрайт – одно изображение, в состав которого включено некоторое количество

Пример. Спрайт-меню. index.htmlСоздадим вертикальное меню, состоящее из 5 элементов. Сделаем его, используя

Пример. Спрайт-меню. style.css (1)Перейдём к оформлению. Сначала в style.css отменим оформление для

Пример. Спрайт-меню. style.css (2)Теперь зададим стили для меню при наведении на него

Бестабличная верстка – обтекания, или CSS Float Обтекание картинки текстом использовалось с

Сферы использования CSS Float Обтекание фиксированного объекта другими объектамиФормирование колонок, заключенных в

Основные особенности работы с floatОбъект со стилем float позиционируется по левому/правому краю,

Основные проблемы работы с floatОсновная проблема при реальной верстке с помощью обтеканий

Шаблон персонального сайта – основа дизайна float. index.html Мои

Шаблон персонального сайта – основа дизайна float. style.css#leftcolumn { background:#e7e7e7;

2 вариант. index.htmlПопытаемся сделать простую структуру из двух колонок, но вместо float:

2 вариант. style.css html,body { width:1000px; margin:0 auto; padding-top:10px; }

В Опере и подобных браузерах это будет выглядеть так

А в IE6 будет так На рисунке ясно видно, что браузер добавил три

Проблема решенаИтак, простой манипуляцией со стилями исправить проблему не удалось. Зато, исправить

Слайды презентации

Слайд 2 До появления CSS
До появления CSS, дизайнеры и верстальщики

До появления CSSДо появления CSS, дизайнеры и верстальщики прописывали стили внутри

прописывали стили внутри html тегов. Это довольно неудобно, так

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

Слайд 3 Способы подключения стилей к странице (1)
1. Подключение CSS

Способы подключения стилей к странице (1)1. Подключение CSS отдельным внешним файлом

отдельным внешним файлом с расширением .css. Самый удобный способ.

Он гарантирует максимально лёгкое и удобное редактирование стилей и не нагружает ими страницу. К самой странице подключается так: Между тегами

вставляется код:

Соответственно, файл стилей должен называться style.css и находиться в одной папке с самим файлом html.

Слайд 4 Способы подключения стилей к странице (2,3)
2. Встраивание блока

Способы подключения стилей к странице (2,3) 2. Встраивание блока стилей в саму

стилей в саму страницу. Удобство этого метода состоит в

том, что не надо создавать дополнительных файл, а главный недостаток - нагрузка стилями html кода. Подключается так:

3. Встраивание стилей в сами теги. Самый неудобный способ, так как затрудняет последующее редактирование и нагружает страницу. Подключается так: внутри кода пишется
style=”стили”

Слайд 5 Преимущества использования CSS
Очищение html-кода от стилей
Ускорение загрузки страниц

сайта
Максимальная кроссбраузерность
Расширенные возможности работы со стилями
Возможность достижения интересных графических

эффектов

Слайд 6 Оформление заголовков
Заголовок - один из важнейших аспектов преставления

Оформление заголовковЗаголовок - один из важнейших аспектов преставления текста. Он даёт

текста. Он даёт читателю понятие об основной теме текста,

его направлении и т.д.
В языке html, заголовки задаются тегом

,

....
Цифра после буквы h называется уровнем заголовка и определяет высоту и ширину символов. (h1 - самый большой).
Оформлять заголовок можно непосредственно в коде, но это оказывается крайне неудобным и громоздким.
Посмотрим, как это можно сделать оптимальным образом - с помощью CSS.
Существует довольно много стилей, которые могут быть применены к заголовку. Мы можем изменить размер шрифта, его положение на странице, цвет, начертание и т.д. Попробуем сделать это в несколько этапов.

Слайд 7 1. Задание цвета. Создадим html файл и запишем

туда такой код:

h1 {color:#003366;} h2 {color:#e2b500;} h3 {color:#9d0000;}

Основной заголовок

Заголовок 2-го уровня

Заголовок 3-го уровня

Все стили прописываются в фигурных скобках через ;

Слайд 8 2.Выравнивание
Теперь поставим заголовок 1-го уровня по центру страницы.

2.ВыравниваниеТеперь поставим заголовок 1-го уровня по центру страницы. Для этого в

Для этого в списке стилей h1, после color:#......; добавим

такой стиль: text-align:center;

Слайд 9 3. Начертание
Теперь изменим начертание шрифта для заголовка 2-го

3. НачертаниеТеперь изменим начертание шрифта для заголовка 2-го уровня. Для примера

уровня. Для примера возьмём шрифт Verdana. Добавим только для

h2 такой стиль: font-family: Verdana;

Слайд 10 4. Фон и граница
Для примера, выделим заголовок 3-го

4. Фон и границаДля примера, выделим заголовок 3-го уровня фоновым цветом.

уровня фоновым цветом. и границей (сделаем вид блока). Добавим

для него такие стили: background: #d4e6ff; border: solid 1px #006cff; width: 200px;

Слайд 11 Задание стилей основного блока (пример 1)
/* Задание стилей

Задание стилей основного блока (пример 1)/* Задание стилей основного блока */

основного блока / .body { color:#333; / Задание цвета текста

*/ background-color: #d2efff; /* Задание цвета фона */ border: 2px solid #ffba00; /* Задание сплошной границы блока шириной в 2 пикселя и её цвета */ border-top-style: none; /* Удаление верхней границы блока */ font-size: 12px; /* Задание размера шрифта */ padding: 5px; /* Задание отступа в 5 пикселей со всех сторон */ }

Слайд 12 Пример 2 использования файла CSS

Слайд 13 для html-файла

Страница

для html-файлаСтраницатекст текст текст 0 текст текст текст текст текст текст

href="css/222.css">

текст текст текст 0 текст текст текст

текст текст текст текст текст текст текст текст0 текст текст текст текст текст текст текст текст текст 2 текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст 3 текст текст текст текст текст текст текст текст 8 текст текст текст текст текст текст текст текст текст текст текст

lkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk j lkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk j

Слайд 14 Вставка swf-файла

name="movie" value="intro_gal_2008.swf" >

value="opaque"/>

Слайд 15 Урок
Создание простого блока

Слайд 16 Создание простого блока (css-файл)
/* Задание стилей всего блока

Создание простого блока (css-файл)/* Задание стилей всего блока */ #block{

/ #block{ width: 250px; / Задание ширины блока / } / Задание

стилей заголовка */ .head { text-align:center; /* Выравнивание заголовка по центру блока */ color: #fff; /* Задание цвета заголовка (тут - белый) */ background-color: #0274b0; /* Задание цвета фона (тут - синий) */ border: 2px solid #ffba00; /* Задание сплошной границы блока шириной в 2 пикселя и её цвета */ font-size: 15px; /* Задание размера шрифта заголовка */ font-weight:bold; /* Задание полужирного начертания шрифта */ padding: 7px 0 7px 0; */ Задание верхнего и нижнего отступов текста заголовка от границ блока */ }

Слайд 17 Задание стилей основного блока
/* Задание стилей основного блока

/ .body { color:#333; / Задание цвета текста */ background-color:

#d2efff; /* Задание цвета фона */ border: 2px solid #ffba00; /* Задание сплошной границы блока шириной в 2 пикселя и её цвета */ border-top-style: none; /* Удаление верхней границы блока */ font-size: 12px; /* Задание размера шрифта */ padding: 5px; /* Задание отступа в 5 пикселей со всех сторон */ }

Слайд 18 ПРОСТОЙ БЛОК

class="body"> Уроки CSSвёрстки.
Начнем с простого, и рассмотрим один из

способов создания стандартного блока, состоящего из "шапки" и основной части...

Слайд 19 Урок
Прижимаем footer к низу страницы

Слайд 20 Прижимаем footer к низу страницы (css)
html, body { margin:

0; padding: 0; height: 100%; /* не забываем это свойство для

html и body */ } #conteiner { position: relative; min-height: 100%; /* минимальная высота контейнера, ее понимают все браузеры за исключением IE6 */ } /* ниже фильтр * html так называемый CSS хак, через который можно задать любое свойство предназначенное для IE6 */ * html #conteiner { height: 100%;} #header {position: relative; height: 2.5em;}

Слайд 21
/* элемент ниже позволяет не наезжать подвалу на

/* элемент ниже позволяет не наезжать подвалу на контент, он должен

контент, он должен быть не меньше подвала по высоте

*/ .end_content { position: relative; height: 2.6em;} #footer { background-color:#1C7FFF; color:#FFF; position: relative; margin-top: -2.5em; /* свойство должно быть равным высоте элемента, не забываем про отрицательное значение */ height: 2.5em; }

Слайд 22

Ваше внимание на то что Header (шапка) внутри контейнера

--> content

Слайд 23 Урок
Пример безтабличной верстки

Слайд 24 Простой шаблон
http://www.css-school.ru/css_verst/44-urok-css-vjorstki-4.-prostojj-shablon.html

Слайд 25 Часть 2
CSS-навигация

Слайд 26 Правила оформления списков
В html различается 2 вида списков:

Правила оформления списковВ html различается 2 вида списков: нумерованный и ненумерованный

нумерованный и ненумерованный (маркированный). Они задаются тегами "ol" и

"ul" соответственно. Элементы обоих видов списков задаются тегом "li".
Для примера, составим простой маркированный список (именно с ними чаще всего приходится работать в CSS):

Пункт 1
Пункт 2
Пункт 3

Слайд 27 Для нумерованных (ol)
Оформление (стиль) задаётся одним атрибутом: list-style-type.

Значения этого атрибута – фиксированы и различны для нумерованных

и маркированных списков. Для нумерованных (ol): decimal – арабские цифры (по умолчанию); lower-roman – малые римские цифры; upper-roman – большие римские цифры; lower-alpha – малые (строчные) латинские буквы; upper-alpha – большие (прописные) латинские буквы

Слайд 28 Для маркированных (ul)
Для маркированных (ul): disk – простой круг

Для маркированных (ul)Для маркированных (ul): disk – простой круг (по умолчанию);

(по умолчанию); circle – кольцо; square – квадрат; lower-alpha –

малые (строчные) латинские буквы; none – отмена оформление (благодаря этому значению атрибута маркированные списки удобно использовать как меню и т.д.).

Слайд 29 Mаркер-рисунок
Также, можно задать рисунок как маркер списка.
Делается

это так:
list-style-image: url(Адрес рисунка)

Слайд 30 Положение маркера
С помощью стилей можно задать и положение

Положение маркераС помощью стилей можно задать и положение маркера относительно текста.

маркера относительно текста. Это задаётся атрибутом list-style-position. Он имеет

следующие значения: outside – вне текста (по умолчанию); inside – внутри текста; Все стили могут быть заданы в одном атрибуте list-style. Например: list-style: inside

Слайд 31 Меню с помощью списка (1)
Создадим вертикальное меню с

помощью списка. Начнем с создания файла стилей style.css и

файла index.html с таким начальным кодом (содержанием):

Слайд 32 Меню с помощью списка (2)
Дальше работаем только с

Меню с помощью списка (2)Дальше работаем только с css файлом. Запишем

css файлом. Запишем в css файл такой код:
ul {list-style:none;} li

a {color:#fff; text-decoration:none; padding: 4px 7px; width:120px; background:#0076ba; display:block; border:1px solid #fff; font-weight:bold;}
Мы задали сразу стили для всего списка и его элементов в случае, если они – ссылки. Должно получиться так:

Слайд 33 Меню с помощью списка (3)
Теперь добавим эффектов при

Меню с помощью списка (3)Теперь добавим эффектов при наведении мыши на

наведении мыши на кнопку:
li a:hover { background:#d36800; } Вот, и всё. Наше

меню готово.

Слайд 34 Атрибут CSS 2.0 «z-index» (1)
Атрибут z-index допустимо

Атрибут CSS 2.0 «z-index» (1) Атрибут z-index допустимо применять только к

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

всех слоёв должен стоять атрибут
position:relative.
Как можно догадаться из вида атрибута z-index, он определяет положение объектов по оси Z и создает, таким образом, иллюзию трёхмерности страницы. Любой элемент может быть выше или ниже другого.

Слайд 35 Атрибут CSS 2.0 «z-index» (2)
По умолчанию значение атрибута

Атрибут CSS 2.0 «z-index» (2)По умолчанию значение атрибута z-index – auto.

z-index – auto. При этом значении элементы идут один

за другим по порядку написания в коде. Атрибут может быть задан положительным, отрицательным числом, или нулём. Например:
z-index:5;
Объект с большим значением атрибута z-index будет перекрывать атрибут с меньшим его значением. То есть объект с z-index равным 5 перекроет объект с z-index равным 3. Атрибут поддерживается Internet Explorer начиная с версии 4.0. Для тегов frame и iframe поддерживается Internet Explorer начиная с версии 5.5.

Слайд 36 Применение атрибута z-index
Атрибут применяется чаще всего для позиционирования

Применение атрибута z-indexАтрибут применяется чаще всего для позиционирования сложных и/или активных

сложных и/или активных блоков. В остальных случаях, когда код

более-менее прост, стараются обходиться без этого атрибута, ведь ничего не мешает расположить, в коде, объект, находящийся выше над объектом, находящимся ниже. Ещё есть некоторые проблемы при использовании атрибута z-index к активным блокам, да и есть множество более простых способов оформления. Итак, не смотря на то, что без атрибута z-index можно легко прожить, он остаётся достаточно востребованным в современной вёрстке.

Слайд 37 z-index. Пример. index.html
Сделаем эффект лёгкой тени для текста

z-index. Пример. index.htmlСделаем эффект лёгкой тени для текста без использования картинок,

без использования картинок, зато с использованием слоёв и атрибута

z-index.
Как обычно, создадим файлы index.html и style.css. Запишем в веб-страницу стандартный начальный код:

//сам слой

Любой текст

//слой тени

Любой текст

Слайд 38 z-index. Пример. style.css
В style.css запишем:
#text { font:30px Tahoma;

z-index. Пример. style.cssВ style.css запишем: #text { font:30px Tahoma; position:

position: relative; color:#002f5f; z-index:2;}
#shadow {font:30px Tahoma; position: relative; color:#ccc;

top:-35px; left:2px; z-index:1;}
Заметим, что z-index тени меньше, чем у самого текста. Это значит, что тень будет именно там, где и должна быть – под текстом. Если сделали всё правильно должно получиться так:

Слайд 39 Сравнение двух типов верстки (блочного и табличного)
Рассмотрим их

Сравнение двух типов верстки (блочного и табличного)Рассмотрим их достоинства и недостатки,

достоинства и недостатки, попробуем найти оптимальный и максимально эффективный

тип верстки… Итак, начнём с описания старейшего типа верстки – табличного. Он основан на теге “table” и имеет примерно такую структуру:

Содержание первого столбца

Содержание второго столбца

Таким образом, мы задали таблицу, состоящую из 1 строки и 2 столбцов. Для ясности: “tr” обозначает строку, а “td” – столбец. - По умолчанию, для таблиц применены следующие стили: - Граница (border): 0 пикселей (нет) - Поля ячеек (cellpadding): 1 пиксель - Интервал ячеек (cellspacing): 2 пикселя

Слайд 40 Достоинства и недостатки табличного позиционирования
У таблиц множество положительных

Достоинства и недостатки табличного позиционированияУ таблиц множество положительных сторон, многие из

сторон, многие из которых субъективны. Однако, есть и бесспорные: -

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

Слайд 41 Достоинства и недостатки блочной верстки
Блочной вёрсткой, называется вёрстка,

Достоинства и недостатки блочной версткиБлочной вёрсткой, называется вёрстка, выполненная без использования

выполненная без использования таблиц.
В HTML-коде используются такие теги

как div, span и многие другие. Сама же форма страницы формируется с помощью стилей (CSS).
Положительные стороны блоков: - Малый размер кода - Основа дизайна – CSS - Широкие возможности позиционирования элементов - Быстрая загрузка страниц
Отрицательные стороны блоков: - Практически никогда не удаётся достигнуть полной кроссбраузерности - Метод сложен для понимания новичками - Большой файл стилей

Слайд 42 Что выбрать?
Очень многие веб-разработчики, которые считают себя «продвинутыми»

Что выбрать?Очень многие веб-разработчики, которые считают себя «продвинутыми» призывают к полному

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

устаревшего способа. Но эти люди частенько забывают одну очень важную деталь – многие посетители их сайтов будут пользоваться устаревшими браузерами, которые могут поддерживать CSS только на базовом уровне (Internet Explorer 6, например). В некоторых типах браузеров и ОС могут происходить неприятные искажения. Вот тогда и начинаются различные скрипты, исправляющие эти изъяны и практически сводящие на нет все преимущества CSS. В практике были случаи, когда идеальные с точки зрения HTML и CSS блоки вели себя неадекватно от некоторых типов активного содержимого. Есть ещё, конечно, проблема свободно позиционированных объектов, а точнее проблема не в них, а в понимании таких объектов браузерами Internet Explorer. Итак, понятно, что чистая блочная вёрстка не эффективна.
Как на счёт табличной? Действительно, многие браузеры загружают таблицу как единое целое, замедляя таким образом работу сайта. Действительно, таблицы делают код излишне объемным. Действительно, табличная вёрстка в какой-то степени ограничивает фантазию дизайнера.
Вот и закончен наш анализ. Он показал, что мы, без сомнения, можем создать шаблон только на блоках, или только на таблицах. Однако, нужно заметить, что и тот, и другой шаблоны не будут совершенными (есть исключения, разумеется).
Самым логичным типом вёрстки – будет грамотный «симбиоз» таблиц и блоков, их дополнение друг друга. Именно такой подход позволит создавать действительно качественные сайты.

Слайд 43 Что такое спрайт?

Спрайт – одно изображение, в состав

Что такое спрайт?Спрайт – одно изображение, в состав которого включено некоторое

которого включено некоторое количество более мелких изображений.
По структуре,

спрайт можно сравнить с мозаикой или пазлом. С помощью специального атрибута, для каждого объекта выбирается часть этой картинки, которая и показывается. Конечно, Вы имеете полное право спросить: «Зачем создавать спрайт, если можно просто воспользоваться несколькими картинками, как это делается обычно?».
Ответ будет довольно простым: спрайт подгружается один раз и при наведении курсора на элемент изменения происходят мгновенно, без подгрузки другой картинки. Это существенно улучшает его восприятие и уменьшает количество HTTP запросов, что в свою очередь ускоряет загрузку страницы. Само собой, у спрайтов есть ограничения. Наш объект должен быть фиксирован по ширине и /или высоте. Спрайты очень часто используются в меню, или других элементах, изменяющихся при наведении мыши. В практическом примере, мы будем делать именно меню для сайта.

Слайд 44 Пример. Спрайт-меню. index.html
Создадим вертикальное меню, состоящее из 5

Пример. Спрайт-меню. index.htmlСоздадим вертикальное меню, состоящее из 5 элементов. Сделаем его,

элементов. Сделаем его, используя маркированный список. Создадим файлы index.html

и style.css. В код веб-страницы запишем стандартное начало:

Спрайт-меню

Слайд 45 Пример. Спрайт-меню. style.css (1)
Перейдём к оформлению.
Сначала в

Пример. Спрайт-меню. style.css (1)Перейдём к оформлению. Сначала в style.css отменим оформление

style.css отменим оформление для всего списка:
ul {list-style:none;}

Потом зададим вид

пункта меню, без наведения на него мыши:
#menu li a { padding:7px 10px; color:#666; text-decoration: none; display: block; font:13px Arial; font-weight:bold; background: url(menu.png); width:200px; margin:3px;}

Здесь – мы использовали изображение menu.png.
Это – и есть спрайт. Он выглядит следующим образом:

Слайд 46 Пример. Спрайт-меню. style.css (2)
Теперь зададим стили для меню

Пример. Спрайт-меню. style.css (2)Теперь зададим стили для меню при наведении на

при наведении на него мыши и при клике на

него:
#menu li a:hover { color: #fff; background: url(menu.png) 0 -30px; } #menu li a:active { color: #fff; background: url(menu.png) 0 -60px; }

Заметим, что -30px и -60 px – указание, на сколько пикселей надо сместиться по спрайту. Если всё сделано правильно, то получится такое меню:

Слайд 47 Бестабличная верстка – обтекания, или CSS Float
Обтекание

Бестабличная верстка – обтекания, или CSS Float Обтекание картинки текстом использовалось

картинки текстом использовалось с самого начала формирования стандартов верстки.

Позже – в CSS появился атрибут float, призванный обеспечить такую возможность. Всё казалось бы логичным, но это – не так, в чем Вы и убедитесь в этом примере. Сам атрибут выглядит так:

float:left – обтекание по левому краю
float:right – обтекание по правому краю
float:none – нет обтекания (по умолчанию)
С использованием обтекания связано очень много искажений и проблем. Это, в первую очередь, связано с неинуитивностью самой концепции float в CSS. Тем не менее, атрибут помогает реализовать различные идеи, многие из которых, просто не имеют другого исполнения.

Слайд 48 Сферы использования CSS Float
Обтекание фиксированного объекта другими

Сферы использования CSS Float Обтекание фиксированного объекта другими объектамиФормирование колонок, заключенных

объектами
Формирование колонок, заключенных в блоки
Принудительное выравнивание объекта по левому

или правому краю родителя
Выделение блока (объекта) из основного потока (содержания)
Создание частей сложных конструкций

Слайд 49 Основные особенности работы с float
Объект со стилем float

Основные особенности работы с floatОбъект со стилем float позиционируется по левому/правому

позиционируется по левому/правому краю, вне общего потока и игнорируя

другие установки
Блоки с float игнорируются основным потоком. Например: при создании фона – их содержание не учитывается
Для обтекаемых объектов необходимо задавать ширину (любым способом). Крайне желательно задавать высоту (см. предыдущий пункт)
Разные браузеры по разному понимают простейшие операции с такими блоками. Особые проблемы возникают с устаревшими версиями IE
Блоки с атрибутом Float выравниваются по верхней границе элемента - родителя
Возможны проблемы с отображением ссылок внутри Float блоков.

Слайд 50 Основные проблемы работы с float
Основная проблема при реальной

Основные проблемы работы с floatОсновная проблема при реальной верстке с помощью

верстке с помощью обтеканий – то, что блок с

таким стилем как бы сжимается, не обращая никакого внимания на содержание. Решить эту проблему можно задав высоту блока, или задав фон с помощью самой страницы (стиль для html,body). Для предотвращения наезда нижних элементов основного потока на блок с float, используют специальный атрибут – clear. Он имеет следующие варианты:
clear:none – нет контроля обтекания
clear:left – контроль обтекания по левому краю
clear:right – контроль обтекания по правому краю
clear:both – контроль обтекания по обоим краям
Атрибут clear чаще всего используется для создания «подвала».

Слайд 51 Шаблон персонального сайта – основа дизайна float. index.html

Мои друзья Российсая школа

CSS

GZweb.ru

Wallpapers Day

Интересные события

Мой дневник появился

Рад ссобщить Вам, что сегодня начал работать мой собственыый дневник!!! ;)

Я опубликовал этот материал 12 октября 2008 года. Категория - Новости дневника.

Что такое findslide.org?

Обратная связь

Презентация на тему Введение в CSS

Содержание

Слайд 2 До появления CSSДо появления CSS, дизайнеры и верстальщики

прописывали стили внутри html тегов. Это довольно неудобно, так

Слайд 3 Способы подключения стилей к странице (1)1. Подключение CSS

отдельным внешним файлом с расширением .css. Самый удобный способ.

Слайд 4 Способы подключения стилей к странице (2,3) 2. Встраивание блока

стилей в саму страницу. Удобство этого метода состоит в

Слайд 5 Преимущества использования CSSОчищение html-кода от стилейУскорение загрузки страниц

сайтаМаксимальная кроссбраузерностьРасширенные возможности работы со стилямиВозможность достижения интересных графических

Слайд 6 Оформление заголовковЗаголовок - один из важнейших аспектов преставления

текста. Он даёт читателю понятие об основной теме текста,

,

,

Слайд 7 1. Задание цвета. Создадим html файл и запишем

туда такой код: h1 {color:#003366;} h2 {color:#e2b500;} h3 {color:#9d0000;}

Основной заголовок

Заголовок 2-го уровня

Заголовок 3-го уровня

Слайд 8 2.ВыравниваниеТеперь поставим заголовок 1-го уровня по центру страницы.

Для этого в списке стилей h1, после color:#......; добавим

Слайд 9 3. НачертаниеТеперь изменим начертание шрифта для заголовка 2-го

уровня. Для примера возьмём шрифт Verdana. Добавим только для

Слайд 10 4. Фон и границаДля примера, выделим заголовок 3-го

уровня фоновым цветом. и границей (сделаем вид блока). Добавим

Слайд 11 Задание стилей основного блока (пример 1)/* Задание стилей

основного блока */ .body { color:#333; /* Задание цвета текста

Слайд 12 Пример 2 использования файла CSS

Слайд 13 для html-файлаСтраница

href="css/222.css">текст текст текст 0 текст текст текст

Слайд 14 Вставка swf-файла

name="movie" value="intro_gal_2008.swf" >

Слайд 15 УрокСоздание простого блока

Слайд 16 Создание простого блока (css-файл)/* Задание стилей всего блока

*/ #block{ width: 250px; /* Задание ширины блока */ } /* Задание

Слайд 17 Задание стилей основного блока/* Задание стилей основного блока

*/ .body { color:#333; /* Задание цвета текста */ background-color:

Слайд 18 ПРОСТОЙ БЛОК

class="body"> Уроки CSSвёрстки. Начнем с простого, и рассмотрим один из

Слайд 19 УрокПрижимаем footer к низу страницы

Слайд 20 Прижимаем footer к низу страницы (css)html, body { margin: