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

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

Для правообладателей

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

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему HTML and CSS. Site layout. Best practices

Содержание

AgendaKnowledge baseHTML / CSS basicsHTML tags, their attributesCSS specification and possibilitiesrules for tags, classes, pseudoclassesrule dependencies‘elephant vs. whale’Best practicesWrapping elementsSetting classesUsing namesClasses tricks
HTML and CSS. Site layout. Best practices.Roman Melnyk AgendaKnowledge baseHTML / CSS basicsHTML tags, their attributesCSS specification and possibilitiesrules for Knowledge base TextTextTextTextTextTextTextTextTextTextTextTextTextTextText Text Text Text TextText TextText Knowledge baseDifference between:.style1 .style2 {color: red;}.style1, .style2 {color: green;}.style1.style2 {color: blue;} Knowledge baseWhat does it mean:.style1 {background: url(gfx/logo.png) -20px 0px;} HTML / CSS basics – HTML tags, their attributes Content, , ,…, , ,…, HTML / CSS basics – CSS specification and possibilitiesspan {color: red;}.classname {color: blue;}a:hover {color: orange;}#id {color: yellow;}http://www.w3schools.com/css/css_id_class.asp HTML / CSS basics – CSS rule dependenciesdiv span {color: red;} div .c1 #c2 HTML / CSS basics – CSS rules weight!important; .class {color: #454545 !important;}Inline style; Best practicesUse clean and clear HTML with CSS:avoid inline styling;try to avoid Best practicesSet classes, nevertheless it looks unnecessaryBrowser specific content; using classes instead Best practicesUse multiple classes for one elements:Abstract classes {float: left;}, {position: relative;}, Referenceshttp://www.w3schools.comhttp://google.com Thank you!
Слайды презентации

Слайд 2 Agenda
Knowledge base
HTML / CSS basics
HTML tags, their attributes
CSS

AgendaKnowledge baseHTML / CSS basicsHTML tags, their attributesCSS specification and possibilitiesrules

specification and possibilities
rules for tags, classes, pseudoclasses
rule dependencies
‘elephant vs.

whale’
Best practices
Wrapping elements
Setting classes
Using names
Classes tricks

Слайд 3 Knowledge base
TextTextTextTextTextTextTextTextTextTextText
TextText
TextText
Text
Text



Text
TextText

TextText

Knowledge base TextTextTextTextTextTextTextTextTextTextTextTextTextTextText Text Text Text TextText TextText

Слайд 4 Knowledge base
Difference between:
.style1 .style2 {color: red;}
.style1, .style2 {color:

Knowledge baseDifference between:.style1 .style2 {color: red;}.style1, .style2 {color: green;}.style1.style2 {color: blue;}

green;}
.style1.style2 {color: blue;}

Слайд 5 Knowledge base
What does it mean:
.style1 {background: url(gfx/logo.png) -20px

Knowledge baseWhat does it mean:.style1 {background: url(gfx/logo.png) -20px 0px;}

0px;}

Слайд 6 HTML / CSS basics – HTML tags, their attributes

HTML / CSS basics – HTML tags, their attributes Content, , ,…, ,

class=“classname”>
Content

, , ,…
, , ,…
,


Block elements and inline

elements

http://www.w3schools.com/html/html_elements.asp
http://www.w3schools.com/html/html_attributes.asp

Слайд 7 HTML / CSS basics – CSS specification and possibilities
span {color:

HTML / CSS basics – CSS specification and possibilitiesspan {color: red;}.classname {color: blue;}a:hover {color: orange;}#id {color: yellow;}http://www.w3schools.com/css/css_id_class.asp

red;}
.classname {color: blue;}
a:hover {color: orange;}
#id {color: yellow;}

http://www.w3schools.com/css/css_id_class.asp

Слайд 8 HTML / CSS basics – CSS rule dependencies
div span {color:

HTML / CSS basics – CSS rule dependenciesdiv span {color: red;} div .c1

red;}
div .c1 #c2 {color: blue;}
div>span {color: yellow;}
#id1, #id2 {color:

yellow;}
.c1.c2 {color: yellow;}
.c1.c2 a:hover {color: yellow;}

http://www.w3schools.com/css/css_grouping_nesting.asp

Слайд 9 HTML / CSS basics – CSS rules weight
!important; .class {color: #454545

HTML / CSS basics – CSS rules weight!important; .class {color: #454545 !important;}Inline

!important;}
Inline style; script set style
CSS definitions comlination:
tagname =

1
classname = 10
id = 100
#id.class a span.i {font-style: italic;}
Browser/OS defaults

Слайд 10 Best practices
Use clean and clear HTML with CSS:
avoid

Best practicesUse clean and clear HTML with CSS:avoid inline styling;try to

inline styling;
try to avoid tag;
use clear names for

id’s and classes;
Wrap elements and functional parts in
for simple and clear styling:
Divide et impera!
Progressive JPEG method

Слайд 11 Best practices
Set classes, nevertheless it looks unnecessary
Browser specific

Best practicesSet classes, nevertheless it looks unnecessaryBrowser specific content; using classes

content; using classes instead of hacks
Use JS for Browser

determination
for ie.css
Easy restyling/rebranding
Easy access to abstractions and enhance styling possibilities

Слайд 12 Best practices
Use multiple classes for one elements:
Abstract classes {float:

Best practicesUse multiple classes for one elements:Abstract classes {float: left;}, {position:

left;}, {position: relative;}, {display: none;}
Similar elements styling
TextTextTextTextTextTextTextText example
form elements

event-depended styling
Hover styling (a img {behavoir_1} / a:hover img {behavoir_2})
Menus, events, notifications, etc. – it’s web 2.0, man!

Слайд 13 References
http://www.w3schools.com
http://google.com

Referenceshttp://www.w3schools.comhttp://google.com
  • Имя файла: html-and-css-site-layout-best-practices.pptx
  • Количество просмотров: 133
  • Количество скачиваний: 0
- Предыдущая Искусство первобытного времени
Следующая - Corupția in Medicină

Похожие презентации

Вирусы Вирусы 137
Работа с офисными программами. (Лекция 2) Работа с офисными программами. (Лекция 2) 113
Использование ресурсов Использование ресурсов 119
Зависимость от Интернета Зависимость от Интернета 96
Модуль GraphABC в Pascal Модуль GraphABC в Pascal 143
Диссеминация опыта по дистанционному обучению детей с ограниченными возможностями здоровья опыты и эксперименты по информатике Диссеминация опыта по дистанционному обучению детей с ограниченными возможностями здоровья опыты и эксперименты по информатике 125
Алгоритм Алгоритм 132
Правила и требования информационной безопасности Правила и требования информационной безопасности 129
Как пройти нормоконтроль Как пройти нормоконтроль 143
Разработка программного средства защиты данных от несанкционированного доступа к носителю Разработка программного средства защиты данных от несанкционированного доступа к носителю 127
Язык разметки гипертекста HTML Язык разметки гипертекста HTML 113
Кодирование текстовой информации Кодирование текстовой информации 119
Коммуникационные технологии Коммуникационные технологии 109
Понятие и виды публикации Понятие и виды публикации 125
Кодирование информации. Двоичный код Кодирование информации. Двоичный код 102
Технология Internet Технология Internet 110
Перевод чисел из одной системы счисления в другую (10 класс) Перевод чисел из одной системы счисления в другую (10 класс) 173
Игра для подготовительных групп компьютерная программа по информатике (подготовительная группа) Игра для подготовительных групп компьютерная программа по информатике (подготовительная группа) 145
Вирусы и Антивирусные программы Вирусы и Антивирусные программы 124
Жестовый и мимический интерфейс Жестовый и мимический интерфейс 170
Чек-лист : 5 ошибок в Яндекс Директ! Чек-лист : 5 ошибок в Яндекс Директ! 125
Магистрально - модульный принцип построения компьютера Магистрально - модульный принцип построения компьютера 118
Платформа IT bridge Платформа IT bridge 144
Создание формы для базы данных Создание формы для базы данных 121
World wide web - всемирная паутина World wide web - всемирная паутина 110
Рекомендации по оформлению презентации для защиты письменной экзаменационной работы Рекомендации по оформлению презентации для защиты письменной экзаменационной работы 139
Компьютерная зависимость у подростков Компьютерная зависимость у подростков 225
Презентация Правила техники безопасности в компьютерном классе Презентация Правила техники безопасности в компьютерном классе 119
НОВЫЕ ПОДХОДЫ К ОФОРМЛЕНИЮ И СОДЕРЖАНИЮ НАГЛЯДНОЙ ИНФОРМАЦИИ ДЛЯ РОДИТЕЛЕЙ В ДОШКОЛЬНЫХ УЧРЕЖДЕНИЯХ материал по теме НОВЫЕ ПОДХОДЫ К ОФОРМЛЕНИЮ И СОДЕРЖАНИЮ НАГЛЯДНОЙ ИНФОРМАЦИИ ДЛЯ РОДИТЕЛЕЙ В ДОШКОЛЬНЫХ УЧРЕЖДЕНИЯХ материал по теме 148
Презентация по Энергосбережению Политика и Законодательство РФ. Характеристика энергетических ресурсов Презентация по Энергосбережению Политика и Законодательство РФ. Характеристика энергетических ресурсов 208