Презентация HTML and CSS. Site layout. Best practices онлайн

На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему HTML and CSS. Site layout. Best practices абсолютно бесплатно. Урок-презентация на эту тему содержит всего 14 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.

Презентации » Устройства и комплектующие » HTML and CSS. Site layout. Best practices

Просмотр ВСЕЙ презентации! ЖМИТЕ

Оцените презентацию от 1 до 5 баллов!

Смотреть онлайн
Скачать

Тип файла:

ppt / pptx (powerpoint)
Всего слайдов:

14 слайдов
Для класса:

1,2,3,4,5,6,7,8,9,10,11
Размер файла:

456.89 kB
Просмотров:

86
Скачиваний:

0
Автор:

неизвестен

Слайды и текст к этой презентации:

№1 слайд

Содержание слайда: HTML and CSS. Site layout. Best practices.

№2 слайд

Содержание слайда: Agenda Knowledge base HTML / CSS basics HTML tags, their attributes CSS 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

№4 слайд

Содержание слайда: Knowledge base Difference between: .style1 .style2 {color: red;} .style1, .style2 {color: green;} .style1.style2 {color: blue;}

№5 слайд

Содержание слайда: Knowledge base What does it mean: .style1 {background: url(gfx/logo.png) -20px 0px;}

№6 слайд

Содержание слайда: HTML / CSS basics – HTML tags, their attributes <span id=“name” class=“classname”> Content </span> <div>, <p>, <a>,… <ul>, <ol>, <li>,… <img/>, <br/> <table> 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: 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: 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 !important;} Inline style; script set style <span style=“font-size: 18px;”> 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 inline styling; try to avoid <table> tag; use clear names for id’s and classes; Wrap elements and functional parts in <div> for simple and clear styling: Divide et impera! Progressive JPEG method

№11 слайд

Содержание слайда: Best practices Set classes, nevertheless it looks unnecessary Browser specific 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: 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 слайд