Return to Video

Познакомьтесь с Amara

  • 0:03 - 0:08
    Здравствуйте!Сегодня мы продолжим заниматься версткой нашего учебного макета , напомню , это А+.
  • 0:08 - 0:10
    Вот так он выглядит.
  • 0:10 - 0:12
    Мы уже открыли его в Гимпе.
  • 0:12 - 0:13
    С гимпом мы уже тоже познакомились
  • 0:14 - 0:17
    и на предыдущем шаге мы создали разметку нашего проекта,
  • 0:17 - 0:25
    то есть в HTML коде , с помощью HTML тегов описали содержимое и все сущности , которые мы видим на этой странице.
  • 0:25 - 0:29
    Напомню , как выглядела верстка на нашем предыдущем шаге.
  • 0:29 - 0:30
    Вот у нас есть HTML код.
  • 0:31 - 0:36
    Для него никаких стилей не задано и это просто разметка со стилями по умолчанию.
  • 0:38 - 0:42
    Вот тут весь контент , который на макете есть , он в разметке тоже присутствует.
  • 0:43 - 0:46
    Сегодняшняя наша задача - это подготовить так называемую "сетку".
  • 0:46 - 0:47
    О "сетке" мы тоже уже говорили.
  • 0:47 - 0:50
    Это расположение крупных букв на странице ,
  • 0:50 - 0:53
    и поэтому "сетку" мы будем делать в следующей части интерфейса.
  • 0:53 - 0:56
    В следующей интерактивной демонстрации
  • 0:57 - 1:00
    и,чтобы "сетку" было сделать удобнее, мы подготовили специальную подложечку.
  • 1:00 - 1:04
    То есть вот это фон внутри страницы , внутри минибраузера.
  • 1:05 - 1:09
    Это на самом деле картинка - подложка с изображением нашей страницы.Мы можем её отдалять ,
  • 1:09 - 1:16
    можем приближать , и поверх этого фона мы будем создавать наши сеточные блоки.
  • 1:16 - 1:19
    Разметку мы подготовили следующим образом : из разметки мы убрали весь контент,
  • 1:20 - 1:23
    мы оставили только основные такие крупные контейнеры.
  • 1:24 - 1:25
    Вот они все перечислены , вы все их видите
  • 1:27 - 1:29
    и постепенно мы будем эти контейнеры разверствывать.
  • 1:30 - 1:33
    Добавлять им размеры , высоту и использовать для этого будем специальные
  • 1:35 - 1:38
    вспомогательные CSS-свойства и вспомогательные классы , о которых чуть позже.
  • 1:39 - 1:41
    И начинать мы будем всё сверху вниз.Первым делом мы
  • 1:43 - 1:45
    будем размечать так называемую "шапку" или их еще называют "headerами".
  • 1:46 - 1:48
    Добавим контейнер main-header.
  • 1:50 - 1:53
    Кстати обратите внимание , здесь , если прокрутить в самый низ CSS-редактора , то вы увидите
  • 1:54 - 1:56
    эти вспомогательные классы . Они нужны исключительно для того , чтобы делать
  • 1:58 - 2:01
    аккуратненькие красивые обводки , подписи у блоков и полупрозрачный фон.
  • 2:02 - 2:06
    Постепенно , в дальнейшем , на следующих шагах вёрстки,мы от этих вспомогательных классов будем избавляться.
  • 2:07 - 2:13
    Итак , начнём мы с header'a . Мы добавили вот такой класс gl0. Он обрел синюю рамку , полупрозрачный фон ,
  • 2:14 - 2:15
    а также подпись main-header.
  • 2:16 - 2:22
    И дальше наша задача измерить и прописать все отступы : вертикальные , все отступы горизонтальные
  • 2:23 - 2:26
    и иногда мы будем прописывать , но только временно минимальную высоту.
  • 2:27 - 2:29
    Первым делом у headera мы прописываем padding-top и padding-bottom
  • 2:30 - 2:33
    и больше ничего не прописываем. Зачем это сделано ? Почему это так сделано ?
  • 2:34 - 2:37
    Потому что header - это контейнер , который тянется на всю ширину нашего макета .
  • 2:38 - 2:42
    И , если мы посмотрим на наш header в нашем графическом редакторе(в гимпе) , то мы увидим ,
  • 2:43 - 2:47
    что этот блок , который тянется от самого верха макета до следующего блока с преимуществами.
  • 2:49 - 2:49
    Вот и он тянется по всей ширине.
  • 2:51 - 2:57
    Поэтому если мы отдалим макет то увидим ,что синий блок тянется на всю ширину мини-браузера.
  • 2:58 - 3:00
    Как мы измерили расстояние ? Ну , для этого мы использовали вспомогательные направляющие ,
  • 3:02 - 3:06
    чтобы было немного попроще . Давайте я включу ctrl+shift+T на windows это.
  • 3:07 - 3:15
    И использую я инструмент - измеритель . Зажимаем ctrl и измеряем расстояние от одной направляющей
  • 3:16 - 3:21
    Это верхний отступ мы измеряем , он получается 67 пикселей , но что касается
  • 3:22 - 3:27
    вертикальных расстояний их достаточно часто в верстке округляют до круглых цифр до 5, до 10 и т.д.
  • 3:28 - 3:32
    То есть в данном случае я себе позволяю 67 округлять до более красивой цифры 65.
  • 3:34 - 3:39
    Что касается нижнего отступа , то в нижний отступ включается всё от нижнего края headera до
  • 3:40 - 3:47
    нижней границы кнопки подать заявку . Здесь получилась высота порядка 151 . Ну у нас 155 , да .
  • 3:48 - 3:53
    Примерно так же померили . Просто где-то оказалось плюс 3 пикселя больше и округлили в итоге до 155
  • 3:54 - 4:01
    То есть вот эти отступы . Они в header'e есть , в шапке и они отталкивают все остальное содержание внутреннее.
  • 4:02 - 4:03
    Давайте теперь перейдем к следующим элементам.
  • 4:04 - 4:05
    И следующим элементом у нас будет контейнер .
  • 4:07 - 4:10
    Вот он . Появилась такая зелененькая полосочка - это тот самый центровщик , который будет
  • 4:11 - 4:14
    во всех блоках макета . Вот . Посмотрите . Он будет центровать его содержимое.
  • 4:16 - 4:21
    Контейнер мы померим по тем направляющим , которые подготовил для нас дизайнер.
  • 4:22 - 4:29
    Вот эти 2 направляющие . Вот они . Опять же с ctrl'ом . И получили мы ширину 980 пикселей.
  • 4:30 - 4:33
    Такова ширина контейнера , под него цинтруется весь контент . Обратите внимание . Вообще во всех местах .
  • 4:35 - 4:37
    И наща задача , во-первых , прописать ширину по направляющим ,
  • 4:38 - 4:41
    задать margin:0 auto; чтобы контейнер центровался и прописать padding'и ,
  • 4:42 - 4:46
    чтобы на очень маленьких ширинах у нас содержимое не прилипало к браузеру.
  • 4:48 - 4:52
    Давайте в контейнер вставим следующий элемент . Это будет верхняя часть header'а.

    65
    00:04:53,614 --> 00:04:57,311
    И в этот элемент добавим еще парочку div'ов . Подкрасим их .
  • 4:58 - 5:00
    И вот как раз на этом этапе мы начинаем задавать для
  • Niezsynchronizowane
Tytuł:
Познакомьтесь с Amara
Opis:

Посетите http://amara.org

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

more » « less
Video Language:
English
Team:
Volunteer
Duration:
0:56
Pasha edited rosyjski subtitles for Meet Amara
Pasha edited rosyjski subtitles for Meet Amara
Batman222 edited rosyjski subtitles for Meet Amara
Pasha edited rosyjski subtitles for Meet Amara
Pasha edited rosyjski subtitles for Meet Amara
Pasha edited rosyjski subtitles for Meet Amara
tak.to.che edited rosyjski subtitles for Meet Amara

Russian subtitles

Revisions Compare revisions