Тізімдер мен кестелер

Описание презентации по отдельным слайдам:

• 

  1 слайд

  
  
  Тізімдер мен кестелер
  

• 

  2 слайд

  Тізімдер мен кестелер:
  WEB-парақта тізімнің көмегімен ақпаратты құрылымдау. Тізімдер типі
  Кесте және оның элементтері
  Кесте және оның ұяшықтарына арналған көлемін көрсету ережесі. Ұяшықтарды біріктіру. Кестемен жұмыс істеуде болатын қателіктер.
  web-парақты кесте көмегімен макеттеу.
  Кірістірілген кестені қолдану
  web-парақта кестені қолдану ерекшеліктері.
  

• 

  3 слайд

  Маркированный список
  (unordered list)
  <ul>
  <li>первый элемент</li>
  <li>второй элемент</li>
  ...
  <li>последний элемент</li>
  </ul>
  

• 

  4 слайд

  Тип маркеров
   
  

• 

  5 слайд

  Нумерованный список
  (ordered list)
   
  <ol>
  <li>первый элемент</li>
  <li>второй элемент</li>
  ...
  <li>последний элемент</li>
  </ol>
  

• 

  6 слайд

  Типы нумерации
  

• 

  7 слайд

  </table>
  <tr>
  </tr>
  <td>
  </td>
  С о д е р ж а н и е
  <table>
  </table>
  <tr>
  <tr>
  <tr>
  </tr>
  </tr>
  </tr>
  <th>
  <th>
  <td>
  <td>
  <td>
  <td>
  </td>
  </th>
  </td>
  </td>
  </th>
  </td>
  <table>
  

• 

  8 слайд

  <table>
  <tr> <!-- Первая строка -->
  <td>(1,1)</td> <!-- Первая ячейка -->
  <td>(1,2)</td> <!-- Вторая ячейка -->
  </tr>
  <tr> <!-- Вторая строка -->
  <td>(2,1)</td> <!-- Первая ячейка -->
  <td>(2,2)</td> <!-- Вторая ячейка -->
  </tr>
  <tr> <!-- Третья строка -->
  <td>(3,1)</td> <!-- Первая ячейка -->
  <td>(3,2)</td> <!-- Вторая ячейка -->
  </tr>
  </table>
  (Не) Простая таблица
  

• 

  9 слайд

  Атрибуты элемента TABLE
  

• 

  10 слайд

  Атрибуты элемента TR
  

• 

  11 слайд

  Атрибуты элемента TD (TH)
  

• 

  12 слайд

  Объединение ячеек
  <table border="1" width="100%">
  <tr>
  <td colspan="2">Столбцы объединены</td>
  </tr>
  <tr>
  <td rowspan="2">Строки объединены</td>
  <td>Обычная ячейка, строка 2</td>
  </tr>
  <tr><td>Обычная ячейка, строка 3</td> </tr>
  <tr>
  <td>Строка 4, левая ячейка</td>
  <td>Строка 4, правая ячейка</td>
  </tr>
  </table>
  

• 

  13 слайд

  Создаем заголовок таблицы
  <table>
  <caption align="top">Заголовок таблицы</caption>
  ...
  Атрибуты заголовка:
  
  align = top|bottom|left|right
  valign = top|bottom
  

• 

  14 слайд

  Схема отступов и объединения ячеек
  border
  cellspacing
  width
  cellpadding
  colspan
  rowspan
  <tr><td colspan="2">...</td></tr>
  <tr><td>...</td>
  <td rowspan="2"> ... </td></tr>
  <tr><td >...</td></tr>
  

• 

  15 слайд

  Лабораторная работа
  Использование colspan и rowspan
  
  
  Создайте файл tables.html
  Создайте четыре таблицы изображенные ниже.
  1
  

• 

  16 слайд

  Таблицы, вложенные друг в друга
  <table border="1" width="100%" cellpadding="2">
  <tr> <th colspan="2">Вложенные таблицы</th> </tr>
  <tr><td rowspan="2" valign="top" width="120">Строки объединены</td>
  <td>
  <table border="1" width="100%" bgcolor="#EEEEEE">
  <tr> <td>Строка I, Ячейка A</td> <td>Строка I, Ячейка B</td> </tr>
  <tr> <td>Строка II, Ячейка A</td> <td>Строка II, Ячейка B</td> </tr>
  <tr> <td>Строка III, Ячейка A</td> <td>Строка III, Ячейка B</td> </tr>
  </table>
  </td>
  </tr>
  <tr> <td>Обычная ячейка, строка 3</td> </tr>
  <tr><td>
  <table border="1" width="100%" bgcolor="#EEFFEE">
  <tr> <td>Вложенная таблица</td> </tr>
  <tr> <td>Всего 2 строки</td> </tr>
  </table>
  </td>
  <td>Строка 4, правая ячейка</td>
  </tr>
  </table>
  

• 

  17 слайд

  Группируем таблицу по блокам (HTML 4.0)
  <table width="600">
  
  <thead align="center" bgcolor="#ffcc00">
  <tr><td> ... </td><td> ... </td></tr>
  <!– Верхний заголовок, сколько угодно строк -->
  </thead>
  
  <tfoot align="center" bgcolor="red">
  <tr><td> ... </td><td> ... </td></tr>
  <!– Нижний заголовок, сколько угодно строк --> </tfoot>
  
  <tbody align="right" bgcolor="silver">
  <tr><td> ... </td><td> ... </td></tr>
  </tbody>
  
  Может быть много tbody блоков. Но все разделы должны содержать одинаковое количество столбцов
  
  </table>
  
  

• 

  18 слайд

  Группируем таблицу по колонкам
  <table>
  <colgroup width="50" span="5">
  <tr> ...
  </table>
  
  Атрибуты colgroup:
  align = center|left|right
  valign = bottom|middle|top
  width = число|процент
  span = число
  
  <colgroup width="20">
  <col span="10">
  <col width="100">
  </colgroup>
  

• 

  19 слайд

  Группируем таблицу по колонкам
  
  
  

• 

  20 слайд

  Домашняя работа
  Объединение ячеек и вложенные таблицы
  

• 

  21 слайд

  Форма
  <form>
  </form>
  </form>
  <form>
  

• 

  22 слайд

  Атрибуты элемента FORM
   
  
  

• 

  23 слайд

  Элементы формы
   
  
  <input type="text" name="login" size="20" maxlength="25" value="Логин">
  <input type="password" name="pass" size="20" maxlength="25" value="Пароль">
  <input type="submit" value=" Послать форму ">
  <input type="reset" value=" Очистить форму ">
  name или(и) id?
  Логин <input type="text" name="login" size="20" maxlength="25">
  Логин
  

• 

  24 слайд

  Элементы формы
   
  
  <input type="checkbox" name="asp" value="yes">ASP
  
  <input type="checkbox" name="js" value="yes" checked>JavaScript
  
  <input type="checkbox" name="php" value="yes">PHP
  
  <input type="checkbox" name="html" value="yes" checked>HTML
  
  <input type="radio" name="subject" value="asp">ASP
  
  <input type="radio" name="subject" value="js">JavaScript
  
  <input type="radio" name="subject" value="php">PHP
  
  <input type="radio" name="subject" value="html" checked>HTML
  
  

• 

  25 слайд

  Элементы формы
   
  
  <select name="book" size="1">
  <option value="asp">ASP</option>
  <option value="js">JavaScript</option>
  <option value="php">PHP</option>
  <option value="html" selected>HTML</option>
  ...
  </select>
  size="5"
  size="8"
  закрыт
  открыт
  

• 

  26 слайд

  Элементы формы
   
  
  <select name="book" size="1">
  <option value="asp">ASP</option>
  <option value="js">JavaScript</option>
  <option value="php">PHP</option>
  <option value="html" selected>HTML</option>
  ...
  </select>
  size="5"
  size="8"
  закрыт
  открыт
  

• 

  27 слайд

  Элементы формы
   
  
  <fieldset>
  <legend>Книги</legend>
  <input type="checkbox" id="asp">ASP
  
  <input type="checkbox" id="js">JavaScript
  
  <input type="checkbox" id="php">PHP
  
  <input type="checkbox" id="html">HTML
  
  </fieldset>
  <элемент tabindex="1">
  <элемент accesskey="q">
  

• 

  28 слайд

  Атрибут type
   
  
  

• 

  29 слайд

  Атрибут type html 5
   
  
  

• 

  30 слайд

  Атрибут type html 5 поддержка
   
  
  

• 

  31 слайд

  Лабораторная работа
  
  
  Создайте файле form.html создайте с помощью таблицы форму регистрации.
  1
  

• 

  32 слайд

  Методы определения
  CSS — Cascading Style Sheets (каскадные таблицы стилей) — это средство, позволяющее задавать различные визуальные свойства HTML-элементам.
  
  http://www.w3.org/TR/CSS21/cover.html
  
  Методы определения таблицы стилей в документе HTML:
  Связывание(linking)- Внешние таблицы стилей
  Вложение(embeding) - Информация о стиле в заголовке: элемент STYLE
  Встраивание(inline)- Атрибут style
  color:red; background:#cccccc
  свойство
  property
  значение
  value
  декларация
  declaration
  

• 

  33 слайд

  Встроенная информация о стиле (inline)
  style="color:red; background:#cccccc"
  Атрибут style определяет информацию о стиле одного элемента
  <p>Обычный текст
  <p style="color:red; background:#cccccc">К этому абзацу применен стиль. Встроенная информация о стиле.
  атрибут тега
  декларация
  декларация
  

• 

  34 слайд

  Информация о стиле в заголовке: элемент STYLE - Метод вложения (embeding)
  <style type="text/css">
  p {
  color:red;
  background:#cccccc
  }
  </style>
  <p>Здесь применен стиль методом вложения.
  <p>Другой абзац.
  селектор
  selector
  правило
  rule
  

• 

  35 слайд

  Метод связывания (linking) - Внешние таблицы стилей
  <link rel="stylesheet" type="text/css" href="style.css">
  p {
  color:red;
  background:#cccccc
  }
  ...
  style.css
  index.html
  <link ... href="style.css">
  <link ... href="style.css">
  second.html
  

• 

  36 слайд

  Каскадирование
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>
  div{color:green}
  </style>
  ...
  <p>Применен связанный стиль
  <div>Применен вложенный стиль</div>
  <p style="color:blue">Применен встроенный стиль
  p{color:red}
  div{color:red}
  

• 

  37 слайд

  Каскадирование
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>
  div{color:green}
  </style>
  ...
  <p>Применен связанный стиль
  <div>Применен вложенный стиль</div>
  <p style="color:blue">Применен встроенный стиль
  p{color:red}
  div{color:red}
  

• 

  38 слайд

  Единицы измерения размеров
  em - ems, высота используемого элементом шрифта
  
  ex - x-height, ширина буквы "х" испольуемого элементом шрифта
  
  px - pixels, пикселы
  
  in - inches, дюймы
  
  cm - centimeters, сантиметры
  
  mm - millimeters, миллиметры
  
  pt - points, пункты(1pt = 1/72in = 0,35mm)
  
  pc - picas, пики(1pc = 12pt)
  
  % - относительные значения(например +20%)
  

• 

  39 слайд

  Цвет
  название цвета (red, green, white...)
  
  #00cc00 - шестнадцатиричное представление
  
  #0c0 - сокращенное шестнадцатиричное представление
  
  rgb(0,240,125) - в формате RGB
  
  rgb(0%,80%,25%) - в формате RGB, относительное
  
  
  
  
  url("название файла")
  Пример: {background: url("file.gif")}
  

• 

  40 слайд

  Селекторы типа элемента и класса
  div{color:red}
  div.green{color:green}
  .blue{color:blue}
  <div>Обычный div</div>
  <div class="green">Div с классом green</div>
  <p class="green">Aбзац с классом green</p>
  <p class="blue">Абзац с классом blue</p>
  <div class="blue">Div с классом blue</div>
  <h3 class="blue">H3 с классом blue</h3>
  элемент
  элемент + класс
  класс
  Обычный div
  Div с классом green
  Aбзац с классом green
  Абзац с классом blue
  Div с классом blue
  H3 с классом blue
  

• 

  41 слайд

  Другие селекторы
  #back{color:red}
  div#back{color:black}
  div b{color:green}
  td td td{color:blue}
  <div id="back">Div с id = back</div>
  <div>Div с <b>контекстным</b> селектором</div>
  <table><tr><td><table><tr><td><table><tr><td>
  Третий уровень вложенности
  </td></tr></table></td></tr></table></td></tr>
  </table>
  id
  контекстные
  селекторы
  элемент + id
  

• 

  42 слайд

  И еще о селекторах
  Соседние селекторы
  b + i { color:red }
  
  Дочерние селекторы
  div > p { color:red }
  
  Селектор атрибута
  p[align="right"] { color:green }
  
  Универсальный селектор
  *{color:black}
  

• 

  43 слайд

  Группировка селекторов
  h1{
  color:red;
  background:yellow
  }
  h2{
  color:blue;
  background:yellow
  }
  h3{
  color:green;
  background:yellow
  }
  h1,h2,h3{
  background:yellow
  }
  h1{
  color:red;
  }
  h2{
  color:blue;
  }
  h3{
  color:green;
  }
  

• 

  44 слайд

  Псевдоклассы и псевдоэлементы
  :link
  :visited
  :active
  :hover
  :focus
  :first-child
  a:link{color:blue}
  a:visited{color:blue}
  a:active{color:red}
  a:hover{color:green}
  input:focus{color:red}
  p:first-child{color:blue}
  :first-line
  :first-letter
  :after
  :before
  p:first-line{color:red}
  p:first-letter{color:green}
  p:after{content:”new”}
  p:before{content:”Att. ”}
  li::before {
  content: "¶ "; /* Добавляем желаемый символ перед элементом списка */
  }
  li {
  list-style: none; /* Убираем исходные маркеры */
  }
  

• 

  45 слайд

  Оформление текстовых элементов
  font-family: семейства шрифта|тип шрифта
  
  font-family:Arial,Geneva,Helvetica,sans-serif;
  font-size: величина|%
  абсолютная величина: xx-small, x-small, small, medium, large, x-large, xx-large.
  относительная величина:larger, smaller
  
  font-size:10px;
  font-weight: normal|bold|bolder|lighter|число от 100 до 900
  400 = normal, 700 = bold
  
  font-weight: bold;
  общее-семейство
  Существуют следующие общедоступные гарнитуры шрифтов: антиква ('serif'), гротески ('sans-serif'), курсивы ('cursive'), аллегорические ('fantasy') и моноширнные ('monospace') шрифты
  

• 

  46 слайд

  Оформление текстовых элементов
  font-style: normal|italic
  
  font-style:italic;
  font-variant: normal|small-caps
  
  font-variant:small-caps;
  font: font-style font-variant font-weigth font-size font-family
  
  Порядок важен. Можно все опустить, кроме font-size и font-family.
  
  font:bold 10px Arial !important;
  

• 

  47 слайд

  Оформление текстовых элементов
  text-align: left|right|center|justify
  
  text-align:right;
  text-decoration: none|overline(|)underline(|)line-through
  
  text-decoration:underline;
  text-indent: величина|%
  
  text-indent:10px;
  text-transform: none|capitalize|uppercase|lowercase
  
  text-transform:uppercase;
  

• 

  48 слайд

  Оформление списков
  list-style-type: none|circle|disc|square|decimal|lower-alpha|upper-alpha|lower-roman|upper-roman
  
  list-style-type:square;
  list-style-position: outside|inside
  
  list-style-position:inside;
  list-style: list-style-type list-style-position list-style-image
  
  list-style:decimal inside;
  list-style-image: none|url
  
  list-style-image:url("ball.gif");
  

• 

  49 слайд

  Отступы и рамки
  Содержимое
  элемента
  top
  bottom
  left
  right
  margin
  border
  padding
  

• 

  50 слайд

  Отступы снаружи
  margin-top: auto|величина|%
  margin-right: auto|величина|%
  margin-bottom: auto|величина|%
  margin-left: auto|величина|%
  
  margin: margin-top margin-right margin-bottom margin-left
  
  margin:10px 20px 20px 30px;
  margin:15px;
  margin-left: 10px; margin-right: 5px;
  
  

• 

  51 слайд

  Отступы изнутри
  padding-top: величина|%
  padding-right: величина|%
  padding-bottom: величина|%
  padding-left: величина|%
  
  padding: padding-top padding-right padding-bottom padding-left
  
  padding:10px 20px 20px 30px;
  padding:15px;
  
  

• 

  52 слайд

  Рамки
  border-width: величина|%|(thin|medium|thick)
  border-color: цвет
  border-style: none|dotted|dashed|solid|double|groove|ridge|inset|
  outset
  
  border-top-(width|color|style)
  border-right-(width|color|style)
  border-bottom-(width|color|style)
  border-left-(width|color|style)
  
  border: border-width border-style border-color
  
  border: 1px solid black;
  border-left: 3px solid black;
  Border-right: 1px dotted #ccc;
  

• 

  53 слайд

  Визуальные свойства
  visibility: hidden|visible|inherit
  
  visibility:hidden;
  display: none|block|inline|list-item
  
  display:block;
  overflow: auto|scroll|visible|hidden
  
  overflow:auto;
  clip: auto|rect(top right bottom left)
  
  clip:rect(10px 20px 30px 10px);
  

• 

  54 слайд

  Параметры блока
  width: величина|%
  
  width: 100px;
  
  height: величина|%
  
  height: 100px;
  
  float: none|left|right
  
  float: left;
  
  
  clear: none|left|right|both
  
  clear: both;
  
  

• 

  55 слайд

  Параметры слоя
  top: auto|величина|%
  top: 100px;
  
  left: auto|величина|%
  left: 100px;
  position: static|absolute|relative
  position: absolute;
  <div style="position:absolute; top:100px; left:50px">
  Этот слой позиционирован абсолютно.
  <div style="position:relative; top:10px; left:10px">
  Этот слой позиционирован относительно.
  </div>
  </div>
  Здесь должен
  быть слой
  Фактическое
  расположение
  слоя
  z-index: auto|величина|inherit
  z-index:3;
  

• 

  56 слайд

  Свойства курсора
  cursor: auto
  crosshair
  default
  pointer
  move
  text
  wait
  e-resize, ne-resize, nw-resize,
  n-resize, se-resize, sw-resize,
  s-resize, w-resize
  url("изображение")
  

• 

  57 слайд

  Импорт CSS (IE)
  В глобальную таблицу стилей:
  <style type="text/css">
  @import url("/style/header.css");
  H1 { font-size: 120%;}
  </style>
  
  В таблицу связанных стилей:
  @import "/style/print.css" print;
  @import "/style/palm.css" handheld;
  H1 { font-size: 120%;}
  @import url("имя файла") типы носителей;
  @import "имя файла" типы носителей;
  

• 

  58 слайд

  Типы носителей
  Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции
  
  

• 

  59 слайд

  Media screen and print в коде
  Пример. Стиль для всех цветных устройств
  @media all and (color) { ... }
  Стиль для всех устройств кроме смартфонов
  @media all and (not handheld) { ... }
  @media not all and (color) { ... }
  Стиль для новых браузеров
  @media only all and (not handheld) { ... }
  Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселов.
  @media all and (orientation: landscape), all and (min-width: 480px) { ... }
  

• 

  60 слайд

  Media screen and print в коде
  @media screen { 
  BODY {color: navy}
  H1 {
  border: 2px dashed maroon;
  color: sienna;
  padding: 7px }
  }
  @media print { 
  BODY, H1 {color: black}
  }
  

• 

  61 слайд

  Media screen and print в браузере
  

• 

  62 слайд

  Медиа-функции
  
  Медиа-функции задают технические характеристики устройства, на котором отображается документ. Стиль выполняется в том случае, если запрос возвращает истину
  aspect-ratio (min-aspect-ratio, max-aspect-ratio)-Определяет соотношение ширины и высоты отображаемой области устройства.
  color (min-color, max-color) -Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 23
  device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)
  Определяет соотношение сторон экрана устройства
  device-height (min-device-height, max-device-height)
  Определяет всю доступную высоту экрана устройства или печатной страницы.
  device-width (min-device-width, max-device-width)
  Определяет всю доступную ширину экрана устройства или печатной страницы.
  @media screen and (orientation: landscape) {} @media screen and (orientation: portrait) {}
  
  
  

• 

  63 слайд

  Практика: как выровнять колонку по центру?
  

• 

  64 слайд

  Практика: верстаем стилями
  
  Баннеры
  (130px)
  
  Содержание
  
  Меню
  (140px)
  
  Заголовок(640px)
  Логотип