Что такое 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
  • Количество просмотров: 111
  • Количество скачиваний: 0
- Предыдущая Искусство первобытного времени
Следующая - Corupția in Medicină

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

Пояснения к практической работе №3.3 к учебнику 7 класса ФГОС Угринович Н.Д. Пояснения к практической работе №3.3 к учебнику 7 класса ФГОС Угринович Н.Д. 108
Графики и диаграммы Графики и диаграммы 123
Компьютер - универсальная машина для работы с информацией Компьютер - универсальная машина для работы с информацией 111
Презентация 10сынып тақырыбы: Модификатор Презентация 10сынып тақырыбы: Модификатор 119
Выставка в библиотеке Выставка в библиотеке 123
Графическое изображение объектов на языке программирования QBasic Графическое изображение объектов на языке программирования QBasic 100
Безопасный интернет Безопасный интернет 103
Презентация по информатике на тему Создание и обработка аудио файлов Презентация по информатике на тему Создание и обработка аудио файлов 207
Работа с ярлыками Работа с ярлыками 86
Перспективы развития компьютерной сети МГУЛ Перспективы развития компьютерной сети МГУЛ 126
Логические условия выбора данных Логические условия выбора данных 101
Презентация по информатике: Информация и информационные процессы 10 кл 1 урок Презентация по информатике: Информация и информационные процессы 10 кл 1 урок 102
Как образуются понятия Как образуются понятия 119
Типовая корпоративная сеть, понятие уязвимости и атаки - 4 Типовая корпоративная сеть, понятие уязвимости и атаки - 4 134
Формирование проектировочной культуры студентов СПО с использованием информационных технологий Формирование проектировочной культуры студентов СПО с использованием информационных технологий 93
Построение точечной, линейной и полигонной тем Построение точечной, линейной и полигонной тем 118
Основы образования поверхностей. Сети. Команды построения 3D объектов. (Лекция 7) Основы образования поверхностей. Сети. Команды построения 3D объектов. (Лекция 7) 154
Всемирная паутина Всемирная паутина 84
Олимпиада Олимпиада 109
Цифровые технологии при съемках фильма Аватар Цифровые технологии при съемках фильма Аватар 101
Компьютернеые вирусы Компьютернеые вирусы 114
Ввод и редактирование данных в БД Ввод и редактирование данных в БД 125
Учебно-методический комплект по информатике Графы, деревья. Графический редактор Paint – инструмент надпись 2 класс.(конспект + презентация) план-конспект урока по информатике (2 класс) по теме Учебно-методический комплект по информатике Графы, деревья. Графический редактор Paint – инструмент надпись 2 класс.(конспект + презентация) план-конспект урока по информатике (2 класс) по теме 114
Методическая разработка электронной дидактической игры Я и другие компьютерная программа по информатике (подготовительная группа) Методическая разработка электронной дидактической игры Я и другие компьютерная программа по информатике (подготовительная группа) 91
исполнители алгоритмов исполнители алгоритмов 123
Ветвящаяся алгоритмическая конструкция Ветвящаяся алгоритмическая конструкция 125
Презентация доклада: Критериальное оценивание учебных достижений учащихся на уроках информатики в условиях обновленного содержания образования Презентация доклада: Критериальное оценивание учебных достижений учащихся на уроках информатики в условиях обновленного содержания образования 135
Назначение и состав операционной системы Назначение и состав операционной системы 101
Понятие информационной системы. Основные задачи администрирования Понятие информационной системы. Основные задачи администрирования 109
Школьный сайт Школьный сайт 164