Создание адаптивного веб-сайта для разных экранов - Lynda.com [RUS]

Тема в разделе "Сайтостроение / Программирование", создана пользователем seoxa, 22 мар 2014.



  1. Пост от администрации
    seoxa
    ТопикCтартер

    seoxa

    Сообщ:
    1.503
    Лайк:
    8.168
    Баллов:
    197
    1 дек 2013

    Создание адаптивного веб-сайта для разных экранов
    (Creating an Adaptive Web Site for Multiple Screens)
    Lynda.com [RUS]



    В этом курсе показано, как построить веб-сайт, который автоматически адаптирует свой макет под различные размеры экранов, ориентации, и разрешения. Рэй Виллалобос показывает, как дизайнеры и разработчики могут создать один документ HTML и изменить его отображение в десктопных браузерах и мобильных устройствах, наподобие iPhone, смартфонов Android, и планшетов. Курс охватывает создание базовой структуры HTML5, использование шаблонов сброса (reset), и стилизацию сайта с помощью CSS.

    Темы:
    • Настройка тестового сервера и эмуляторов
    • Создание и настройка шаблона сайта
    • Использование бесплатных шрифтов Google
    • Подготовка графики
    • Создание файлов стилей
    • Загрузка внешних страниц при помощи AJAX
    • Создание мобильных вкладок
    • Определение мобильных устройств
    • Использование JavaScript для решения проблем скроллинга и изменения ориентации
    • Тестирование и отладка кода сайта

    • 0. Вступление 3m 33s
      • Приветствие 53s
      • Использование файлов упражнений 2m 11s
      • Использование файла с заготовками кода 29s
    • 1. Подготовка 27m 50s
      • Установка локального сервера на Mac 3m 24s
      • Установка локального сервера на Windows 5m 44s
      • Установка симулятора iPhone 2m 21s
      • Установка эмулятора Android на Mac 3m 45s
      • Установка эмулятора Android на Windows 5m 48s
      • Работа с удалённым сервером 2m 26s
      • Тестирование на настоящих устройствах 1m 28s
      • Тур по завершённому проекту 2m 54s
    • 2. Подходы к созданию дизайна для разных экранов 8m 34s
      • Понимание подходов к созданию дизайна 3m 1s
      • Создание дизайна для мобильных устройств 2m 22s
      • Работа с адаптивным дизайном 3m 11s
    • 3. Создание и настройка шаблонов сайта 13m 44s
      • Шаблон сброса HTML5 2m 39s
      • Настройка шаблона HTML 4m 32s
      • Использование бесплатных веб-шрифтов Google 2m 10s
      • Модифицирование оставшейся части шаблона 2m 28s
      • Подготовка графики для веб-сайта 1m 55s
    • 4. Создание адаптивного сайта 13m 57s
      • Создание шаблона страницы 3m 23s
      • Создание страницы меню ресторана 5m 8s
      • Разработка страницы "about us" 1m 14s
      • Отображение карты Google на странице 4m 12s
    • 5. Создание стилей для настольных компьютеров 32m 54s
      • Создание файла стилей 3m 22s
      • Построение стилей для секции body и хедера 5m 37s
      • Настройка стилей футера 2m 24s
      • Составление меню 10m 21s
      • Стилизация страницы "about us" 3m 5s
      • Стилизация страницы с картой 1m 24s
      • Настройка дополнительных элементов 6m 41s
    • 6. Добавление интерактивности для десктопных мониторов 25m 29s
      • Загрузка внешних страниц с помощью AJAX 12m 40s
      • Отображение слоя с фото высокого разрешения 12m 49s
    • 7. Стилизация страниц для экранов смартфонов 23m 58s
      • Сброс и скрытие элементов 4m 56s
      • Создание кнопок меню в футере для смартфонов 6m 14s
      • Модифицирование списка меню 3m 33s
      • Создание мобильных вкладок 5m 17s
      • Модифицирование остальных страниц для мобильного макета 3m 58s
    • 8. Добавление интерактивности JavaScript для мобильных устройств 23m 43s
      • Работоспособность вкладок 4m 2s
      • Определение мобильного устройства клиента 6m 58s
      • Правильное отображение элементов с фиксированным позиционированием в мобильных браузерах 8m 6s
      • Центрирование изображений 2m 2s
      • Возможность изменения ориентации 2m 35s
    • 9. Стилизация страниц для планшетов 7m 3s
      • Изменение кода CSS страницы меню на планшетах 5m 22s
      • Изменение CSS для правильного отображения остальных страниц на планшете 1m 41s
    • 10. Исправление проблем 6m 25s
      • Тестирование и отладка 6m 25s
    • 11. Заключение 2m 20s
      • Следующие шаги 2m 20s

     
    feress, Anastasia Shagaeva, alpha и 18 другим нравится это.
  2. Zver98

    Zver98

    Сообщ:
    12
    Лайк:
    0
    Баллов:
    1
    26 мар 2014
    Спасибо
     
  3. panda

    panda

    Сообщ:
    26
    Лайк:
    110
    Баллов:
    28
    4 апр 2014
    Спасибо! Полезный материал.
     
    mar1k90 нравится это.
  4. marina_shvedun

    marina_shvedun

    Сообщ:
    45
    Лайк:
    23
    Баллов:
    8
    30 апр 2014
    Линда рулит
     
  5. AlexKross

    AlexKross

    Сообщ:
    313
    Лайк:
    230
    Баллов:
    58
    19 апр 2014
    Спасибо, классный материал!
     
  6. Cotein

    Cotein

    Сообщ:
    17
    Лайк:
    1
    Баллов:
    3
    16 май 2014
    Спасибо! Давно искал линду на русском :)
     
  7. Bosss

    Bosss

    Сообщ:
    14
    Лайк:
    0
    Баллов:
    1
    27 мар 2014
    Линда лучшие и перевод отличный
     
  8. tornadomoskva

    tornadomoskva

    Сообщ:
    24
    Лайк:
    4
    Баллов:
    8
    12 мар 2014
    Интересный Материал
     
  9. artbrds

    artbrds

    Сообщ:
    46
    Лайк:
    50
    Баллов:
    18
    17 июл 2014
    Lynda.comCSS: Макеты страниц (CSS: Page Layouts) [RUS] James Williamson, может есть у кого то, выложите пожалуйста.
     
  10. Novak

    Novak

    Сообщ:
    98
    Лайк:
    52
    Баллов:
    18
    9 авг 2014
    Пароль не подходит, можно обновить?
     
  11. artbrds

    artbrds

    Сообщ:
    46
    Лайк:
    50
    Баллов:
    18
    17 июл 2014
    правильно скопируй, у меня подошел
     
  12. DmitryChe

    DmitryChe

    Сообщ:
    20
    Лайк:
    1
    Баллов:
    3
    18 авг 2014
    Спасибо.
     
  13. makswebpay

    makswebpay

    Сообщ:
    8
    Лайк:
    2
    Баллов:
    3
    19 авг 2014
    Пароль правильный. Спасибо за курс!
     
  14. rollmaker

    rollmaker

    Сообщ:
    8
    Лайк:
    0
    Баллов:
    1
    19 авг 2014
    Спасибо большое за курс) Редко найдешь что-то стоящее. ТС респект)
     
  15. bruce008

    bruce008

    Сообщ:
    13
    Лайк:
    2
    Баллов:
    3
    23 июл 2014
    Все отлично скачал! Спасибо за материал!
     
  16. aln77

    aln77

    Сообщ:
    7
    Лайк:
    1
    Баллов:
    3
    30 май 2014
    очень полезный материал
     
  17. lagudal

    lagudal

    Сообщ:
    48
    Лайк:
    12
    Баллов:
    8
    31 авг 2014
    Lynda как всегда на высоте....
    Спасибо всем, кто поддерживает данный сайт и делится не ммотясь ))))
    Я вот решил привести свои знания в строгий порядок, и только нашел данный ресурс, а тут столько вкусного...
     
  18. natac2010

    natac2010

    Сообщ:
    28
    Лайк:
    8
    Баллов:
    3
    2 июл 2014
    то, что надо - спасибо!
     
  19. tehnoblog

    tehnoblog

    Сообщ:
    65
    Лайк:
    50
    Баллов:
    18
    17 мар 2014
    Cпасибо,посмотрим.
     
  20. Skynter

    Skynter

    Сообщ:
    32
    Лайк:
    19
    Баллов:
    8
    23 окт 2014
    Актуальный курс
     
  21. slim

    slim

    Сообщ:
    168
    Лайк:
    315
    Баллов:
    63
    29 июл 2014
    Спасибо, друзья, за возможность узнать как делать адаптивные сайты. Очень интересно.
     
  22. dadonik

    dadonik

    Сообщ:
    2
    Лайк:
    0
    Баллов:
    1
    16 июл 2014
    Ценные материалы от Линды в свободном доступе -это просто кайф.Огромнейшее спасибо за этот подарок.
     
  23. segei_c

    segei_c

    Сообщ:
    22
    Лайк:
    2
    Баллов:
    3
    30 окт 2014
    Хороший курс. Спасибо.
     
  24. snct

    snct

    Сообщ:
    42
    Лайк:
    6
    Баллов:
    8
    6 ноя 2014
    Спасибо.
     
  25. vladimir-sw

    vladimir-sw

    Сообщ:
    40
    Лайк:
    27
    Баллов:
    18
    16 фев 2014
    Отличный курс. В свое время помог решить пару адаптивных вопросов по верстке.
    Начинающим - однозначно must have
     

Поделиться этой страницей