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

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

Электронная почта Электронная почта 147
Универсальные микропроцессоры. Вычислительные системы класса SIMD, MIMD Универсальные микропроцессоры. Вычислительные системы класса SIMD, MIMD 179
Кодирование информации Кодирование информации 298
Текст как форма представления информации Текст как форма представления информации 102
Протоколирование и аудит Протоколирование и аудит 189
Принтеры-2 Принтеры-2 253
Занимательная информатика: Игровые стратегии Занимательная информатика: Игровые стратегии 176
Сеть из компьютеров Сеть из компьютеров 124
ЗАЩИТА ФАЙЛОВ И УПРАВЛЕНИЕ ДОСТУПОМ К НИМ ЗАЩИТА ФАЙЛОВ И УПРАВЛЕНИЕ ДОСТУПОМ К НИМ 173
Возможности Microsoft Office Возможности Microsoft Office 107
Задачи информатизации образования Задачи информатизации образования 115
Сетевые сообщества Сетевые сообщества 145
Информатика и вычислительная техника Информатика и вычислительная техника 121
Персональный компьютер Персональный компьютер 159
Файлы и файловые структуры (8 класс) Файлы и файловые структуры (8 класс) 158
ГРАФИЧЕСКИЙ ИНТЕРФЕЙС ОПЕРАЦИОННОЙ СИСТЕМЫ ГРАФИЧЕСКИЙ ИНТЕРФЕЙС ОПЕРАЦИОННОЙ СИСТЕМЫ 132
Исполнители алгоритмов Исполнители алгоритмов 117
Клонирование объектов Клонирование объектов 99
Построение диаграмм в текстовом процессоре Мicrosoft Word Построение диаграмм в текстовом процессоре Мicrosoft Word 142
Операторы языка Turbo Pascal Операторы языка Turbo Pascal 131
Введение в Visual Basic Введение в Visual Basic 139
Адресация в Интернет. Адресация в Интернет. 129
Презентация подготовлена для конкурса Интернешка Презентация подготовлена для конкурса Интернешка 139
Конкурс анаграмм Конкурс анаграмм 132
Циклические алгоритмы Циклические алгоритмы 143
Понятие Понятие 128
Вещественно-энергетическая картина мира Вещественно-энергетическая картина мира 170
Тапқыр информатиктер білім сайысы Тапқыр информатиктер білім сайысы 219
Цвет в компьютерной графике Цвет в компьютерной графике 107
Что такое электронная коммерция? Что такое электронная коммерция? 128