Что такое 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
    • Количество просмотров: 91
    • Количество скачиваний: 0
    - Предыдущая Контракт международной купли-продажи
    Следующая - Этапы проектирования в электронике

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

    Архитектура и составные части систем искусственного интеллекта Архитектура и составные части систем искусственного интеллекта 178
    Бейсик Бейсик 152
    Викторина. Путешествие в страну компьютера Викторина. Путешествие в страну компьютера 121
    Презентация по информатике на тему Понятие об информации (5 класс) Презентация по информатике на тему Понятие об информации (5 класс) 151
    Презентация к плану-конспекту урока информатики (8 класс) по теме Поиск информации в Интернете. Электронная коммерция в Интернете Презентация к плану-конспекту урока информатики (8 класс) по теме Поиск информации в Интернете. Электронная коммерция в Интернете 139
    Безопасность в Интернете Безопасность в Интернете 159
    Програмування мовами низького рівня та системне програмування Програмування мовами низького рівня та системне програмування 111
    Основные понятия и определения информатики Основные понятия и определения информатики 125
    Электронная таблица MS EXCEL Электронная таблица MS EXCEL 135
    Кроссворды по информатике Кроссворды по информатике 157
    Элементный состав объекта Элементный состав объекта 105
    Microsoft Office Excel 2007 Microsoft Office Excel 2007 221
    Презентация по иформатике на тему Компьютерлік вирустар Презентация по иформатике на тему Компьютерлік вирустар 162
    Викторина по Информатике Викторина по Информатике 137
    Презентация по информатике на тему Анимация әсерлерін баптау. Презентацияларды көрсету Презентация по информатике на тему Анимация әсерлерін баптау. Презентацияларды көрсету 182
    Презентация к уроку Ссылки в электронных Презентация к уроку Ссылки в электронных 153
    Презентация по информатике структура ID Презентация по информатике структура ID 153
    Системная среда Windows Системная среда Windows 107
    Презентация по информатике Решение квадратных уравнений в среде программирования Visual Basic Презентация по информатике Решение квадратных уравнений в среде программирования Visual Basic 152
    Шрифтовый дизайн Шрифтовый дизайн 171
    Программное обеспечение Программное обеспечение 127
    Презентация к уроку по теме Измерение количества информации. Вероятностный подход. Презентация к уроку по теме Измерение количества информации. Вероятностный подход. 170
    Сравнение методологий разработки программ по степени формальности и отношению к каскадной или итеративной разработке Сравнение методологий разработки программ по степени формальности и отношению к каскадной или итеративной разработке 155
    Разработка модели и алгоритмов оценки эффективности резервирования ресурса передачи информации Разработка модели и алгоритмов оценки эффективности резервирования ресурса передачи информации 124
    Проецирование трехмерных объектов Проецирование трехмерных объектов 118
    Презентация к уроку Кодирование информации (2 класс) Презентация к уроку Кодирование информации (2 класс) 165
    Первое знакомство с компьютером Первое знакомство с компьютером 109
    Метод проектов. Изучение курса информатики с учетом возрастных особенностей Метод проектов. Изучение курса информатики с учетом возрастных особенностей 133
    Алгоритм (5 класс) Алгоритм (5 класс) 153
    Информатика. Компьютер в жизни общества Информатика. Компьютер в жизни общества 131