Презентация на тему "Редакторы HTML+CSS"

Содержание

• 
  Слайд 1

  HTML+CSS (верстка)

  Лекция 1

• 
  Слайд 2

  Короткое введение

  Последний стандарт HTML – версия 4.01

  XHML – переработанный HTML в соответствии со стандартом XML

  Стандарты неоднозначны, не все моменты регламентированы

  Придерживайтесь стандартов, осторожнее с нестандартными решениями

• 
  Слайд 3
  

  Элементы и теги

  <название_тега>

  <название_тега>содержание тега

  Текст абзаца

  HTML – это прежде всего содержание, данные.HTML, как правило, только лишь советует как отображать документы.

• 
  Слайд 4

  Редакторы

  WYSIWYG или текстовые процессоры

• 
  Слайд 5

  Eclipse

  Свободный фреймворк для разработки модульных кроссплатформенных приложений

  ПлагиныEclipse (Plug-in Development Environment)

  Aptana – отличные редакторы HTML и CSS

  Eclipse (JAVA)

  PDT (PHP, HTML, CSS, …)

  Aptana (HTML, CSS, …)

  Pydev (Python)

  ESFTP

  …

• 
  Слайд 6

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

  Бесплатный продукт с поддержкой

  Работа с проектами

  Расширяемость и тонкая настройка

  Кроссплатформенность

  Отличные редакторы

  (автокомплит, шаблоны, навигация по коду…)

  Работа с разными языками программирования

• 
  Слайд 7

  Браузеры

  Internet Explorer

  Firefox

  Opera

  Safari

  Chrome

  Популярность браузеров по Liveinternet в рунете

• 
  Слайд 8

  Другие инструменты

  Firebug – не заменим для разработки и отладки HTML, CSS, Javascript

  Pixel Perfect – плагин для подложки рисункадизайна при верстке

  IE Developer Toolbar,

  IETester,

  DebugBar for IETester

• 
  Слайд 9

  Теги, атрибуты. Блочные и строковые элементы

  , ,

• 
  Слайд 10

  Обработка ошибок, DTD

  Отсутствующие теги – плохая практика

  Первый абзац

  Второй абзац

  Заголовок Игнорирование лишних тегов

  Первый абзац

  Второй абзац XHTML – намного строже - не правильно, - правильно Регистр символов в названии тегов тексттексттекст - не правильно Обязательные теги, например Инструменты проверки кода на ошибки: HTML – валидатор error.html, error2.html

• 
  Слайд 11

  Текст

  Текст, абзацы, перевод строки

  Лишние пробельные символы не учитываются

  Заголовки, значение заголовков

  и —все браузеры поддерживают, но…

  —блок предварительно форматированного текста (все пробелы, переводы строк, и т.д., монош. шрифт) Физическая и логическая разметка text.html
• 
  Слайд 12

  Шрифт

  Немного терминов

  Название шрифта, семейство (serif, sans-serif, monospace…)

  Размер

  Цвет

  Межсимвольное расстояние

  Курсив, жирность

  Буква

• 
  Слайд 13

  Теги логической разметки текста

  Не гарантируется именно такое отображение

• 
  Слайд 14

  Основные теги физической разметки

  Не гарантируется именно такое отображение

  Содержимое вышеупомянутых тегов – любые элементы допустимые в тексте.

  Употребляться могут везде, где применяются элементы, относящиеся к тексту.

• 
  Слайд 15

  Цитаты, адреса

  и —цитаты (длинная и короткая)Длииинная цитата Адрес

  - адрес

• 
  Слайд 16

  Линейки

   

  Использование атрибутов не рекомендуется

  Часто используется для логического отделения информационных блоков

  line.html

• 
  Слайд 17

  Изображения в документе HTML

  Формат? Все зависит от браузеров, в HTML нет спецификаций

  Формат GIF

  сжатие "без потерь"

  256 цветов максимум

  чересстрочный (всплывающий) и нормальный формат

  прозрачность

  анимация

• 
  Слайд 18
  

  Формат JPEG

  24 битная палитра (16 млн цветов)

  потеря качества рисунка

  Формат PNG

  цветовые схемы:

  truecolor

  grayscale

  индексированная палитра (GIF-подобная) – PNG-8

  альфа канал на 254 уровня

  улучшенное сжатие без потерь

  двухмерное чередование

  гамма-коррекция

  Формат MNG

• 
  Слайд 19
  
• 
  Слайд 20
  
• 
  Слайд 21
  
• 
  Слайд 22
  
• 
  Слайд 23

  Итог

  JPEG – для фотографий, изображений с большим количеством градиентов и цветов

  GIF – для маленьких рисунков, иконок, пиктограмм, полезен, когда края – четкие

  PNG8 – когда не много цветов, четкие края, например скриншотыwindows - окон

  PNG24 – полупрозрачности, изображение без потери качества, большое количество цветов

• 
  Слайд 24

  Применение изображений в HTML

   

  align="bottom | left | middle | right | top"

  Заливка с помощью widthили height

  Бывает, что изображения отключены…

  ismap, usemap

  onAbort – только ie, onError, onLoad

  Фоновые изображения

  images.html

• 
  Слайд 25

  Карты на изображениях

  Серверные карты

  Клиентские карты

  usemap.html

• 
  Слайд 26

  Применим карту?

  usemap.html

• 
  Слайд 27

  Гиперссылки

  Основа гипертекста

  URL scheme:scheme_specific_part<схема>://<логин>:<пароль>@<хост>:<порт>

  Только US-ACSII – символы

• 
  Слайд 28

  Отношения. Мета-теги.

  Мы имеем дело не с документом, а с проектом, набором документов

• 
  Слайд 29

  Списки

  • Страны
  • Англия
  • Швейцария
  • Города
  • КрокодилГена

  Чебурашка

• 
  Слайд 30

  Спискиопределений

  Термин 1 Определение первого термина Термин 2 Определение второго термина
• 
  Слайд 31

  Формы

  Процесс заполнения, отправки

   

  События

  (controls)

  type=text, password, file

  size="30" maxlength="20" value="my name"

  accept="image/*"

  forms.html

• 
  Слайд 32

  Поля форм

   

   

   

   

   

   

   

  forms.html

• 
  Слайд 33

  Поля форм 2

  текстtexxxt

  accesskey, disabled, readonly

  Введите имя:

• 
  Слайд 34

  Таблицы

   

  Название таблицы 111  

  background, bgcolor, bordercolor, cols, height, title, nowrap

  colspan,rowspan

  ,

  ,

  tables.html

• 
  Слайд 35

  Фреймы

• 
  Слайд 36

  Объекты и апплеты

  Вложенные object

• 
  Слайд 37

  div и span

  Div – блочный

  Span – строчный

  title, dir, lang, style, class

• 
  Слайд 38

  CSS 2

  Стиль – это правило отображения тега

  Встроенные стили, стили документа, внешние таблицы

  или @import

  @media – правило

  /* комментарий к стилям */

  css.html, css.css, css1.css

• 
  Слайд 39

  Синтаксис

  seceltor {property:value; property1:value1;}

  p {color: red; text-decoration: underline;}

  p {font-family: Georgia, 'Times New Roman', Times, serif;}

  p {border: 1px solid red;}

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

• 
  Слайд 40

  Селекторы

  p {}/* типовой, по тегу */

  #id1 {} /* идентификатор */

  .class1 {} /* по имени класса */

  * {}/* универсальный */

  *[align="right"] {}/* по атрибутам */

  p#id1.class1.class2 {}

  p:first-line {}/* псевдоэлементы */

  div, table, .class1 {} /*групповой*/

  ulul{}/*контекст, наследующие*/

  ol > li {}/*дочерний*/

  li + li {} /*соседние*/

  css2.html

• 
  Слайд 41

  Приоритеты стилей

  Стили

  !important

  Порядок каскадирования:

  По источнику ("ближе" к тегу)

  Специфичность, более узкое, точное определение

  Порядок следования

  Как правило стили приоритетнее атрибутов

  агент, браузер

  пользователь

  разработчик

  агент, браузер

  разработчик

  пользователь

  css.html, css.css, css1.css

• 
  Слайд 42

  Специфичность

  a – id; b – класс, псевдокласс, аттрибут; c – имя тега.

  * {} /* a=0 b=0 c=0 -> специфичность = 0 */

  li {} /* a=0 b=0 c=1 -> специфичность = 1 */

  ulli {} /* a=0 b=0 c=2 -> специфичность = 2 */

  ulol+li {} /* a=0 b=0 c=3 -> специфичность = 3 */

  ulolli.red {} /* a=0 b=1 c=3 -> специфичность = 13 */

  li.red.level {} /* a=0 b=2 c=1 -> специфичность = 21 */

  #x34y {} /* a=1 b=0 c=0 -> специфичность = 100 */

  /* style="" -> специфичность = 1000 */

  css1.html

• 
  Слайд 43

  Размеры, цвета, URL в CSS

  Ключевые слова, inherit

  url(http://localhost/1.jpg)

  red, #7788AA, rgb(12,11,34)

  Размеры:

  em—ширина буквы m в настоящем шрифте. Например, p {text-indent: 3em} задаст красную строку абзаца шириной в три буквы m.

  px — пикселы

  pt — пункты. Один пункт = 1/72 дюйма.

  % — проценты

  ex — ширина буквы x

  in — дюймы

  cm — сантиметры

  mm — миллиметры

  pc —размер в пиках. (12 пунктов).

  keywords.html

• 
  Слайд 44

  Шрифты

  font-family: Georgia, 'Times New Roman', Times, serif; (с засечками, без, рукописные..)

  font-size: larger;

  font-style: italic;

  font-variant: small-caps;

  font-weight: bold; (400)

  font: [font-style || font-variant || font-weight] font-size [/line-height] font-family

  Загрузка шрифтов, @font-face

  font_css.html

• 
  Слайд 45

  Свойства текста

  letter-spacing: 2px;

  line-height: 120%; (наслед. вычисл. от родителя)

  text-align: right;

  text-decoration: blink | line-through | overline | underline | none

  text-ident: -5em;

  text-transform: capitalize | lowercase | uppercase | none

  vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | значение | проценты(только строк. и замещ. элементы)

  word-spacing: 10em;

  white-space: normal | nowrap | pre (pre в ie6 работает )

  Другие языки…

  text_css.html

• 
  Слайд 46

  Контейнер строки

• 
  Слайд 47

  Свойства контейнеров

  Блочная модель CSS, горизонтальное и вертикальное форматирование (по 7 свойств)

  top, right, bottom, left

  margin

  border

  padding

  [width] x [height]

• 
  Слайд 48

  Горизонтальное форматирование

  Значение auto – заполняет всю оставшуюся ширину контейнера (margin, width)

  Отрицательные поля

  Сумма 7 размеров дочернего элемента = width родительского

  Для замещающих элементов размеры auto равны реальным размерам

  Размеры замещающих элементов изменяются пропорционально, если задавать одно из них

  autowidth.html

• 
  Слайд 49

  height=auto

  контейнер

  margin

  border

  padding

  [width] x [height]

  контейнер

  margin

  border

  padding

  [width] x [height]

  horis1.html

• 
  Слайд 50

  Вертикальное форматирование

  Высота по содержимому (auto)

  Или через height. Если содержимого больше чем height – прокрутка

  margin-top или bottom равное auto = 0

  Высота в процентах – от блока контейнера, но…

  Центрирование по вертикали через процентные margin и высоту блока-контейнера

  Сворачивание полей

  Отрицательные margin

  vert1.html, vert2.html,

  negative_margins.html

• 
  Слайд 51

  Сворачивание вертикальных полей

  margin

  border

  padding

  [width] x [height]

  margin

  border

  padding

  [width] x [height]

  margins.html

• 
  Слайд 52

  Форматирование строчных элементов

  Многострочный строковый элемент, рамки, фон

  Строковый блок и контейнер строки

  Отступы, рамки и поля незамещаемых элементов не оказывают влияния на высоту строкового блока в отличии от замещаемых

  Вспомним line-height

  Если в строке есть замещаемый элемент, то его реальная высота, padding и margin, border влияют на высоту строкового блока

  str_format.htm

• 
  Слайд 53

  Изменение представления элемента

  display: block | inline | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group| inline-block

  Пример употребления display:block

  Пример употребления display:inline

  display определяет только лишь представление элемента, но не его тип, не его суть

  display: inline-block

  Иногда значение display вычисляется в зависимости от значения свойств float или position (абс. – или table или block)

  display1.html

  display_inline_block.html

• 
  Слайд 54

  Поля

  По умолчанию margin=0

  У некоторых элементов есть поля по умолч.

  img {margin: 1em;}

  img {margin: 1em 2em 3em 4em;}

  img {margin: 1em 2em;}

  img {margin: 1em 2em 3em;}

  Процентные значения от ширины родительского элемента

  margin-left, margin-right, margin-top, margin-bottom

  Поля строковых элементов (левое и правое)

  top

  bottom

  right

  left

  margin-percent.html

• 
  Слайд 55

  Рамки

  Рамки внутри полей, они ограничивают фон

  Ширина, стиль, цвет

  Ширина по умолч.=medium или none

  Цвет по умолч.=цвет элемента

  border-style: стиль (TRBL)или отдельно

  border-width: thin | medium | thick | значение (TRBL)или отдельно, % - запрещены

  Если border-style=none, то border-width=0

  border-color: color (TRBL)или отдельно

  Цвет рамки может = transparent

• 
  Слайд 56

  Рамки, стили рамок

  border-top, border-right, border-bottom, border-left: border-width || border-style || color

  border: border-width || border-style || color

  У строковых элементов тоже могут быть

• 
  Слайд 57

  Отступы

  padding: значение (любые меры, проценты) (TRBL)

  Залиты фоном

  Отступы не сворачиваются

  % относительно ширины родителя (причем и верхние и нижние поля)

  padding-top, padding-right, padding-bottom, padding-left

  Можно применять к строковым элементам

  paddings.html

• 
  Слайд 58

  Цвета, фон

  color: <цвет>| inherit

  Свойство color для элементов форм

  background-color: цвет | transparent (умолч.)

  background-image: url(путь к файлу) | none

  background-color + background-image

  background-repeat: no-repeat | repeat | repeat-x | repeat-y

  colors-css.html,

  background_css.html

• 
  Слайд 59

  Фон

  background-position: [проценты | значение] | [left | center | right] || [top | center | bottom](если одно задано, второе – center)

  background-attachment: fixed | scroll(http://www.meyerweb.com/eric/css/edge/complexspiral/glassy.html)

  background: background-attachment || background-color || background-image || background-position || background-repeat

  background_css.html,

  background2_css.html

• 
  Слайд 60

  Перемещение, плавающая модель

  Рисунки, параграф с float

  Задание ширины обязательно

  Поля не сворачиваются

  Перемещаемый элемент генерирует блочный элемент

  Правила перемещаемых элементов (стр.327)

  Перемещаемый элемент увеличивается, чтобы вместить всех перемещаемых потомков

  Отрицательные поля

  Если ширина больше – перемещаемый элемент окажется за боковым краем родителя

  clear: both | left | none | right

  float1.html, float2.html

  float3.html, float_problem.html

• 
  Слайд 61

  Позиционирование

  position: absolute | fixed | relative | static

  static – нормальный поток

  relative – смещение элемента с теми же размерами и начальными координатами

  absolute – удаление из нормального потока.Генерация структурного блока.

  fixed – абсолютно позиционированный элемент, но блок-контейнер – окно просмотра.

• 
  Слайд 62

  Позиционирование 2

  Блок-контейнер для элементов с position = relative | static – родитель

  Блок-контейнер для элементов с position = absolute – ближайший предок с position != static. Если ближайший предок – строковый, то контейнер – предок. Если таких элементов нет – начальный блок-контейнер

• 
  Слайд 63

  Свойства смещения

  top, right, bottom, left: <длина> | <процентное значение> | auto | inherit

  Ширина и высота

  min-width, min-height: <длина> | <процентное значение> | inherit

  max-width, max-height: <длина> | <процентное значение> | none | inherit

  position.html

• 
  Слайд 64

  Переполнение и отсечение содержимого

  overflow: visible | hidden | scroll | auto | inherit

  overflow-x и overflow-y

  clip: rect(top, right, bottom, left) | rect(Y1, X1, Y2, X2) | auto | inherit

  overflow.html

• 
  Слайд 65

  Видимость элементов

  visibility: visible | hidden | collapse | inherit

  visibility.html

• 
  Слайд 66

  Абсолютное позиционирование

  Абсолютное позиционирование относительно…

  Перекрытие элементов

  Размеры и размещение

  left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = ширина блока-контейнера

  Значение auto

  right или bottom компенсируют, если все свойства заданы

  position_abs.html

• 
  Слайд 67

  Размещение по оси z

  z-index: число | auto

  Может быть отрицательным

  Локальный контекст занесения в стек

  окно

  А

  Б

  z-index.html

• 
  Слайд 68

  Фиксированное позиционирование

  Относительно окна браузера

  Удобно, например, для баннеров или для меню

  position_fixed.html

• 
  Слайд 69

  Относительное позиционирование

  Смещение относительно текущего положения

  position_relative.html

• 
  Слайд 70

  Верстка таблиц

  Объединять ячейки через CSS нельзя

  У ячеек нет полей

  Свойство display

  tables2.html

• 
  Слайд 71

  Таблицы. Продолжение

  display: inline-table – таблица строкового уровня (типа inline-block)

  Значения можно присвоить любым элементам и сделать на основе них таблицу

  Анонимные объекты таблицы

  Name:

  tables2.html

• 
  Слайд 72
  

  Слои таблицы

  caption-side: top |bottom

  border-collapse:collapse | separate | inherit

  border-spacing: <длинагор.> <длина верт.>? | inherit

  empty-cells: show | hide | inherit

  tables3.html

• 
  Слайд 73

  Сливающиеся рамки ячеек

  Если display: table | inline-tableу элемента не может быть отступов, только поля

  Рамки могут применяться к таблице, ячейкам, строкам, группам строк, столбцам и группам столбцов

  Между рамками ячеек не может быть никаких промежутков; рамки сливаются и центрируются

  tables3.html

• 
  Слайд 74

  Размеры таблиц

  Ширина

  table-layout: auto | fixed | inherit

  Скорость рендера с фиксированной шириной больше

  Если сумма ширин столбцов больше ширины таблицы, то берется первое

  Высота: или заданная или как сумма высот строк

  Вертикальное выравнивание – не то же самое что и для строковых элементов

  tables4.html

• 
  Слайд 75

  Элементы списка

  Управлять размещением сложно

  list-style-position: inside | outside – вне содержимого или как строковый маркер в начале содержимого

  list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

  list-style-image: none | url('путь к файлу')

  list-style: list-style-type || list-style-position || list-style-image

  lists_css.html

• 
  Слайд 76

  Генерируемое содержимое

  Например маркеры списка…

  a[href]:before {content: "(link)";}

  Ограничения на display

  content: строка | attr(атрибут) | open-quote | close-quote | no-open-quote | no-close-quote | url }

  Теги недопустимы

  Генерируемые кавычки

  Счетчики

  counter-reset и counter-increment

  css_gen_content.html

  css_gen_content2.html

• 
  Слайд 77

  Курсоры

  cursor: [[,]* [auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | seresize | sw-resize | s-resize | w-resize| text | wait | help | progress ]] | inherit

  a[href] {cursor: pointer;}

  cursors.html

• 
  Слайд 78
  
• 
  Слайд 79

  Контуры

  Ну участвуют в потоке документа

  Могут употребляться вместе с рамками

  outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit(TRBL – нет)

  outline-width: thin | medium | thick | <длина> | inherit

  outline-color: <цвет> | invert | inherit

  outline: [ || || ] | inherit

  outline.html

• 
  Слайд 80