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

Содержание

• 
  Слайд 1

  CSS и оформление веб-страниц

• 
  Слайд 2

  CSS

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

• 
  Слайд 3

  HTML vs. CSS

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

• 
  Слайд 4

  Преимущества CSS

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

• 
  Слайд 5

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

• 
  Слайд 6

  Применение CSS к HTML-документу

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

• 
  Слайд 7

  Атрибут style

  This is a red page

• 
  Слайд 8

  Тэг style

  body {background-color: #FF0000;}

  This is a red page

• 
  Слайд 9

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

  ...

• 
  Слайд 10

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

  h1 { color: #ff0000; }

• 
  Слайд 11

  Свойство 'background-color'

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

• 
  Слайд 12

  Фоновые изображения [background-image]

  body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; }

• 
  Слайд 13

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

• 
  Слайд 14

  Другие свойства фона

  body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }

• 
  Слайд 15

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

• 
  Слайд 16

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

• 
  Слайд 17

  Другие свойства шрифтов

  p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }

• 
  Слайд 18

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

• 
  Слайд 19

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

  Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. Интервал между буквами текста можно специфицировать свойством letter-spacing. Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase 

• 
  Слайд 20

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

• 
  Слайд 21

  Типы стилей

• 
  Слайд 22
  

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

• 
  Слайд 23

  Псевдоклассы тэга

  a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { background-color: yellow; text-decoration:none; } a:hover { color:red; text-decoration:none; }

• 
  Слайд 24

  Создание нового псевдокласса в 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-страниц

• 
  Слайд 30

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

• 
  Слайд 31

   Обтекание элементов

  Для обтекания одних элементов другими в CSS применяется свойство float, которое может иметь значения left (обтекание слева направо), right (обтекание справа налево) или none. Чтобы остановить действие обтекания применяется свойство clear, которое может принимать значения left, right, both или none. 

• 
  Слайд 32

  Табличная верстка и верстка по слоям

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

• 
  Слайд 33

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

• 
  Слайд 34

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

• 
  Слайд 35

  «Резиновый» макет

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

• 
  Слайд 36

  «Склейка» изображений

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

• 
  Слайд 37

  Группирование элементов  (span и div)

  Элементы и

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

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

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

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

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

   

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

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

     

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

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

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

• 
  Слайд 39

  Задание 2. Исправить ошибки

  Glossary of Terms  

  Algorithmic Oriented Language.

   

   

  Creates new project

• 
  Слайд 40

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

  Галион

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

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

   

• 
  Слайд 41

  Задание 4. Исправить ошибки

  Utaliquip ex ea commodo. Loremipsum dolor sit amet, consectetueradipiscingelit.Lobortisnisl. Loremipsum dolor sit amet, consectetueradipiscingelit.