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

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


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

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

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

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

Презентация на тему Css и оформление веб-странÐ&c

Содержание

CSSCSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам.
CSS и оформление веб-страниц CSSCSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка HTML vs. CSSHTML используется для структурирования содержимого страницы. CSS используется для форматирования Преимущества CSSуправление отображением множества документов с помощью одной таблицы стилей;более точный контроль Фундаментальная модель CSS Применение CSS к HTML-документуМетод 1: Инлайн/In-line (атрибут style)Метод 2: Внутренний (тэг style)Метод Атрибут style 	Example  This is a red page Тэг style  	Example 	 		body {background-color: #FF0000;}   This is a red page Ссылка на таблицу стилей  	My document 	  ... Цвет переднего плана : свойство 'color'h1 { color: #ff0000; } Свойство 'background-color'body { 	background-color: #FFCC66; } h1 { 	color: #990000; 	background-color: #FC9804; } Фоновые изображения  [background-image]body { 	background-color: #FFCC66; 	background-image: url( Повторение фонового изображения [background-repeat] Другие свойства фонаbody { background-color: #FFCC66; background-image: url( Свойства фона в Dreamweaver Семейство шрифта [font-family] Другие свойства шрифтовp { 	font-style: italic; 	font-weight: bold; 	font-size: 30px; 	font-family: arial, sans-serif; } Настройка шрифта в Dreamweaver Форматирование текстаСвойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки.Интервал Форматирование текста в Dreamweaver Типы стилей Типы стилейГруппирование элементов с помощью class С помощью него можно применить любой стиль Псевдоклассы тэга a:link { 	color: blue; 	text-decoration:none; } a:visited { 	color: purple; Создание нового псевдокласса в Dreamweaver Селектор потомкаКлючевой момент — этот селектор выбирает всех потомков не зависимо от Селектор дочернего элементаОсновное отличие — тот факт, что если селектор потомка выбирает все Селектор сестринского элементаСестринские элементы — это теги, имеющие общего родителя и следующие Селектор обобщенных родственных элементовОсновная задача селектора обобщённых родственных элементов — выбор элемента Верстка HTML-страниц Боксовая модель.  Обтекание элементовДля обтекания одних элементов другими в CSS применяется свойство float, которое может Табличная верстка и  верстка по слоямБлагодаря наличию большого числа параметров, особенно Пример табличной верстки Пример div-верстки «Резиновый» макетТаблицы удачно подходят для «резинового» макета, ширина которого привязана к ширине «Склейка» изображенийРисунки часто разрезают на отдельные фрагменты, а затем собирают их вновь Группирование элементов  (span и div)Элементы и используются для структурирования документа, часто совместно Задание 1. Исправить ошибки   Опрос общественного мнения показал Диего Веласкес Задание 2. Исправить ошибки Glossary  Glossary of Terms Algorithmic Oriented Language. Задание 3. Исправить ошибки   Галион Галион - большое трехмачтовое судно Задание 4. Исправить ошибки    Ut aliquip ex ea commodo.
Слайды презентации

Слайд 2 CSS
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида

CSSCSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с

документа, написанного с использованием языка разметки.
Преимущественно используется как средство описания,

оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам.


Слайд 3 HTML vs. CSS
HTML используется для структурирования содержимого страницы.

HTML vs. CSSHTML используется для структурирования содержимого страницы. CSS используется для


CSS используется для форматирования этого структурированного содержимого.
CSS был создан

для предоставления web-дизайнерам возможностей создания точного дизайна, поддерживаемого всеми браузерами. Одновременно произошло разделение представления и содержимого документа, что значительно упростило работу.

Слайд 4 Преимущества CSS
управление отображением множества документов с помощью одной

Преимущества CSSуправление отображением множества документов с помощью одной таблицы стилей;более точный

таблицы стилей;
более точный контроль над внешним видом страниц;
различные представления

для разных носителей информации (экран, печать, и т. д.);
сложная и проработанная техника дизайна.


Слайд 5 Фундаментальная модель CSS

Фундаментальная модель CSS

Слайд 6 Применение CSS к HTML-документу
Метод 1: Инлайн/In-line (атрибут style)
Метод

Применение CSS к HTML-документуМетод 1: Инлайн/In-line (атрибут style)Метод 2: Внутренний (тэг

2: Внутренний (тэг style)
Метод 3: Внешний (ссылка на таблицу

стилей)


Слайд 7 Атрибут style


Example

Атрибут style 	Example  This is a red page

#FF0000;"> This is a red page



Слайд 8 Тэг style


Example

body

Тэг style  	Example 	 		body {background-color: #FF0000;}   This is a red page

{background-color: #FF0000;}


This is a

red page





Слайд 9 Ссылка на таблицу стилей


My document

Ссылка на таблицу стилей  	My document 	  ...




...


Слайд 10 Цвет переднего плана : свойство 'color'
h1 { color:

Цвет переднего плана : свойство 'color'h1 { color: #ff0000; }

#ff0000; }


Слайд 11 Свойство 'background-color'
body {
background-color: #FFCC66;
}
h1 {

Свойство 'background-color'body { 	background-color: #FFCC66; } h1 { 	color: #990000; 	background-color: #FC9804; }


color: #990000;
background-color: #FC9804;
}


Слайд 12 Фоновые изображения [background-image]
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");

Фоновые изображения [background-image]body { 	background-color: #FFCC66; 	background-image: url(


}
h1 {
color: #990000;
background-color: #FC9804;
}


Слайд 13 Повторение фонового изображения [background-repeat]

Повторение фонового изображения [background-repeat]

Слайд 14 Другие свойства фона
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");

Другие свойства фонаbody { background-color: #FFCC66; background-image: url(


background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1

{
color: #990000;
background-color: #FC9804;
}

Слайд 15 Свойства фона в Dreamweaver

Свойства фона в Dreamweaver

Слайд 16 Семейство шрифта [font-family]

Семейство шрифта [font-family]

Слайд 17 Другие свойства шрифтов
p {
font-style: italic;
font-weight: bold;

Другие свойства шрифтовp { 	font-style: italic; 	font-weight: bold; 	font-size: 30px; 	font-family: arial, sans-serif; }


font-size: 30px;
font-family: arial, sans-serif;
}


Слайд 18 Настройка шрифта в Dreamweaver

Настройка шрифта в Dreamweaver

Слайд 19 Форматирование текста
Свойство text-indent позволяет выделить параграф с помощью установки отступа

Форматирование текстаСвойство text-indent позволяет выделить параграф с помощью установки отступа для его первой

для его первой строки.
Интервал между буквами текста можно специфицировать

свойством letter-spacing.
Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase 


Слайд 20 Форматирование текста в Dreamweaver

Форматирование текста в Dreamweaver

Слайд 21 Типы стилей

Типы стилей

Слайд 22 Типы стилей
Группирование элементов с помощью class
 С помощью него

Типы стилейГруппирование элементов с помощью class С помощью него можно применить любой

можно применить любой стиль к определённому элементу или группе

элементов.
Идентификация элемента с помощью id
Особенность id в том, что в документе не может быть более одного элемента с данным конкретным id. Каждый id должен быть уникальным. 
Переопределение тэгов
Псевдоклассы и составные стили
позволяют выбирать элементы на основании их размещения в дереве документа. То есть при выборе можно, например, манипулировать такими понятиями как «является потомком», «следует за», «лежит непосредственно внутри»



Слайд 23 Псевдоклассы тэга
a:link {
color: blue;
text-decoration:none;
}

Псевдоклассы тэга a:link { 	color: blue; 	text-decoration:none; } a:visited { 	color:

a:visited {
color: purple;
text-decoration:none;
} a:active {
background-color:

yellow;
text-decoration:none;
} a:hover {
color:red;
text-decoration:none;
}

Слайд 24 Создание нового псевдокласса в Dreamweaver

Создание нового псевдокласса в Dreamweaver

Слайд 25 Селектор потомка
Ключевой момент — этот селектор выбирает всех

Селектор потомкаКлючевой момент — этот селектор выбирает всех потомков не зависимо

потомков не зависимо от их уровня вложенности. 
p span {
color:

#333;
}
div a span {
color: #333;
}


Слайд 26 Селектор дочернего элемента
Основное отличие — тот факт, что если

Селектор дочернего элементаОсновное отличие — тот факт, что если селектор потомка выбирает

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

то селектор дочернего элемента выбирает потомков только первого уровня — то есть непосредственно вложенные элементы.
.content > ul {
margin-left: 20px;
}


Слайд 27 Селектор сестринского элемента
Сестринские элементы — это теги, имеющие

Селектор сестринского элементаСестринские элементы — это теги, имеющие общего родителя и

общего родителя и следующие один за другим в структуре

HTML.
h2+p  { font-style:  italic; background-color:  #DFE8FF; }

Слайд 28 Селектор обобщенных родственных элементов
Основная задача селектора обобщённых родственных

Селектор обобщенных родственных элементовОсновная задача селектора обобщённых родственных элементов — выбор

элементов — выбор элемента (-ов), идущего после заданного элемента,

и имеющего с ним общего родителя.
HTML:

Заголовок

Подзаголовок 1

Это абзац с текстом

Подзаголовок 2

Это текст, обрамлённый в span

CSS: h1~h2 { color:red; }

Слайд 29 Верстка HTML-страниц

Верстка HTML-страниц

Слайд 30 Боксовая модель.

Боксовая модель.

Слайд 31  Обтекание элементов
Для обтекания одних элементов другими в CSS

 Обтекание элементовДля обтекания одних элементов другими в CSS применяется свойство float, которое

применяется свойство float, которое может иметь значения left (обтекание слева направо), right (обтекание

справа налево) или none.
Чтобы остановить действие обтекания применяется свойство clear, которое может принимать значения left, right, both или none. 

Слайд 32 Табличная верстка и верстка по слоям
Благодаря наличию большого

Табличная верстка и верстка по слоямБлагодаря наличию большого числа параметров, особенно

числа параметров, особенно границе нулевой толщины, таблица выступает в

роли невидимой модульной сетки, относительно которой добавляется текст, изображения и другие элементы. Удобство и широкие возможности верстки — вот основной реверанс в пользу таблиц.

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


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

Пример табличной верстки

Слайд 34 Пример div-верстки

Пример div-верстки

Слайд 35 «Резиновый» макет
Таблицы удачно подходят для «резинового» макета, ширина

«Резиновый» макетТаблицы удачно подходят для «резинового» макета, ширина которого привязана к

которого привязана к ширине окна браузера. Благодаря тому, что

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

Слайд 36 «Склейка» изображений
Рисунки часто разрезают на отдельные фрагменты, а

«Склейка» изображенийРисунки часто разрезают на отдельные фрагменты, а затем собирают их

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

фрагменты или заменяя их другими изображениями. Это требуется для различных дизайнерских изысков вроде создания эффекта перекатывания, анимации или уменьшения объема файлов. Таблицы позволяют легко обеспечить «склейку» нескольких рисунков в одно изображение. Каждая картинка помещается в определенную ячейку, параметры таблицы при этом устанавливаются такими, чтобы не возникло стыков между отдельными ячейками.


Слайд 37 Группирование элементов  (span и div)
Элементы и

Группирование элементов  (span и div)Элементы и используются для структурирования документа, часто

используются для структурирования документа, часто совместно с атрибутами class

и id.
Элемент  можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS,  может использоваться для визуальных эффектов применимо к отдельным блокам текста.
 применяется для группирования одного или более блок-элементов.

Слайд 38 Задание 1. Исправить ошибки

Задание 1. Исправить ошибки   Опрос общественного мнения показал Диего

4.01//EN">


Опрос общественного мнения показал


Диего Веласкес писал свои полотна в стиле: империализма, кубизма и империосионизма;

конфуцианство возникло в: Италии, Корее и Франции;


богами торговли и воровства в Древней Греции были: Марс, Меркурий и Дионис;


  • богами загробного мира в Египте были: Аид, Анубис и Ассирис;


    столица Золотой Орды - Монголия;


    главные противники Александра Македонского: татаро-монголы, Дедал и Цезарь;


    в Древней Греции морями повелевали боги: Плутон, Нептун и Тритон.




  • Слайд 39 Задание 2. Исправить ошибки

    Задание 2. Исправить ошибки Glossary  Glossary of Terms Algorithmic Oriented

    4.01 Transitional//EN">
    Glossary



    Glossary of Terms



    Algorithmic Oriented Language.


    Creates new project




    Слайд 40 Задание 3. Исправить ошибки

    Задание 3. Исправить ошибки   Галион Галион - большое трехмачтовое

    4.01//EN">

    align="justify">Галион

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



    Флагманский корабль был мощным галионом, вооруженным сорока восьмью большими пушками и восьмью малыми.



    • Имя файла: css-ethcedil-ethfrac34ntilde132ethfrac34ntilde128ethfrac14ethraquoethmicroethfrac12ethcedilethmicro-ethsup2ethmicroethplusmn-ntilde129ntilde130ntilde128ethdegethfrac12ethc.pptx
    • Количество просмотров: 73
    • Количество скачиваний: 0