Главная » Языки программирования

Foundation css на русском

Содержание
  1. Использование CSS-фреймворка Foundation #
  2. Задача #
  3. Логическая структура сайта #
  4. Требования к реализации #
  5. Подход к реализации #
  6. Использование CSS-фреймворка Foundation #
  7. Задача #
  8. Логическая структура сайта #
  9. Требования к реализации #
  10. Подход к реализации #
  11. Урок 1. Знакомство с CSS-фреймворком Foundation для верстки Битрикс магазина
  12. Выбор шаблона (CSS Foundation )
  13. Наша верстка на CSS Foundation

Использование CSS-фреймворка Foundation #

Данная лекция включает в себя описание по настройке и запуску HTTP-сервера. Эту часть записанного видео можно игнорировать.

Задача #

Вам необходимо разработать набор HTML-документов, которые описывают языки программирования, которые были упомянуты в данном курсе.

Логическая структура сайта #

flowchart LR index(«index.html\nСтартовая страница») prog-langs(«languages.html\nЯзыки программирования») html-lang(«html-lang.html\nЯзык разметки HTML») css-lang(«langs/css-lang.html\nЯзык стилизации CSS») kotlin-lang(«langs/kotlin-lang.html\nЯзык Kotlin») index — prog-langs prog-langs — html-lang prog-langs — css-lang prog-langs — kotlin-lang

  • На стартовой странице, index.html , находится краткое описание задачи.
  • На странице со списком языков программирования, languages.html , находится список языков программирования. В каждом из списков должно находится название языка и ссылка к соответствующей странице.Список необходимо оформить несколько раз:
    • С помощью ненумерованного списка: https://get.foundation/sites/docs/typography-base.html#unordered-lists.
    • С помощью таблиц: https://get.foundation/sites/docs/table.html.
    • С помощью карточек: https://get.foundation/sites/docs/card.html.
    • Название языка программирования, в рамках заголовка h1 .
    • Ссылка для возвращения к странице списка языка программирования. Ссылка должна быть оформлена:
      • Как обыкновенная ссылка с текстом: https://get.foundation/sites/docs/typography-base.html#unordered-lists.
      • Как кнопка: https://get.foundation/sites/docs/button.html.

      Требования к реализации #

      • На всех страницах должно присутствовать навигационное меню, https://get.foundation/sites/docs/top-bar.html, в рамках которого должны находиться ссылки на стартовую страницу и на страницу со списком языков программирования.
      • В рамках работы запрещается модифицировать CSS-стили напрямую. Вместо этого необходимо использовать CSS-классы, предоставляемыми Foundation.

      Подход к реализации #

      1. Создайте каталог, в котором будут размещены файлы сайта. Можете использовать шаблон проекта Web в рамках JetBrains IDEA.
      2. Скачайте шаблон CSS-проекта Foundation с главной страницы, https://get.foundation/.
      3. Распакуйте содержимое шаблона в каталог практической работы. После распаковки у вас в каталоге должны быть следующие файлы:
      ./ ├── css │ ├── app.css │ ├── foundation.css │ └── foundation.min.css ├── index.html └── js  ├── app.js  └── vendor  ├── foundation.js  ├── foundation.min.js  ├── jquery.js  └── what-input.js
      1. Общее название для сайта.
      2. Общая навигационная панель сайта.
      3. Название языка в мета-информации сайта.
      4. Указание на кодировку сайта.
      5. Общую базовую сетку для размещения содержимого страниц.
      1. Добавьте заголовок h1 , включающий название «Языки программирования курса»
      2. После заголовка должны следовать параграфы с текстом задачи.
      1. Добавьте заголовок h1 , включающий текст «Языки программирования».
      2. Добавьте заголовок h2 , включающий текст «Навигация в форме списка».
      3. Далее расположите ненумерованный список ul , внутри элементов которого, li , расположены ссылки на соответствующие страницы. Текст ссылки — название языка программирования. Лучше всего использовать относительные ссылки.
      4. Добавьте заголовок h2 , включающий текст «Навигация в формате таблицы».
      5. После заголовка разместите таблицу с двумя колонками: «Название языка», «Ссылка на страницу с описанием». В первом столбце должно находиться название языка, а во втором столбце — ссылка с текстом «Ссылка».
      6. Добавьте заголовок h2 , включающий текст «Навигация в формате карточек».
      7. После заголовка разместите три карточки, в заглавии которых находится название языка программирования. В качестве текста описания разместите текст «Информацию о языке можно прочитать по ссылке», где текст «по ссылке» является ссылкой на соответствующую страницу.
      1. Исправьте пути к общим ресурсам, CSS и JavaScript-файлам, предоставленными вместе с
      2. Добавьте заголовок h1 с текстом «Язык программирования HTML».
      3. Добавьте блоковый элемент div , внутри которого расположите ссылки на страницу со списком языка программирования languages.html .
      4. Первая ссылка должна использовать только обычный элемент с содержимым «Назад к списку».
      5. Вторая ссылка должна быть оформлена в виде кнопки и содержать текст «Назад».
      6. Добавьте заголовок h2 с текстом «Краткое описание».
      7. Добавьте несколько параграфов и ненумерованных перечислений, описывающий данный язык программирования.
      8. Добавьте заголовок h2 с текстом «Пример исходного кода».
      9. Добавьте пример кода на данном языке программирования. Используйте элементы pre и code .
      10. Удостоверьтесь, что все элементы интерфейса выглядят корректно и переход между всеми тремя страницами работает корректно.

      Источник

      Использование CSS-фреймворка Foundation #

      Данная лекция включает в себя описание по настройке и запуску HTTP-сервера. Эту часть записанного видео можно игнорировать.

      Задача #

      Вам необходимо разработать набор HTML-документов, которые описывают языки программирования, которые были упомянуты в данном курсе.

      Логическая структура сайта #

      flowchart LR index(«index.html\nСтартовая страница») prog-langs(«languages.html\nЯзыки программирования») html-lang(«html-lang.html\nЯзык разметки HTML») css-lang(«langs/css-lang.html\nЯзык стилизации CSS») kotlin-lang(«langs/kotlin-lang.html\nЯзык Kotlin») index — prog-langs prog-langs — html-lang prog-langs — css-lang prog-langs — kotlin-lang

      • На стартовой странице, index.html , находится краткое описание задачи.
      • На странице со списком языков программирования, languages.html , находится список языков программирования. В каждом из списков должно находится название языка и ссылка к соответствующей странице.Список необходимо оформить несколько раз:
        • С помощью ненумерованного списка: https://get.foundation/sites/docs/typography-base.html#unordered-lists.
        • С помощью таблиц: https://get.foundation/sites/docs/table.html.
        • С помощью карточек: https://get.foundation/sites/docs/card.html.
        • Название языка программирования, в рамках заголовка h1 .
        • Ссылка для возвращения к странице списка языка программирования. Ссылка должна быть оформлена:
          • Как обыкновенная ссылка с текстом: https://get.foundation/sites/docs/typography-base.html#unordered-lists.
          • Как кнопка: https://get.foundation/sites/docs/button.html.

          Требования к реализации #

          • На всех страницах должно присутствовать навигационное меню, https://get.foundation/sites/docs/top-bar.html, в рамках которого должны находиться ссылки на стартовую страницу и на страницу со списком языков программирования.
          • В рамках работы запрещается модифицировать CSS-стили напрямую. Вместо этого необходимо использовать CSS-классы, предоставляемыми Foundation.

          Подход к реализации #

          1. Создайте каталог, в котором будут размещены файлы сайта. Можете использовать шаблон проекта Web в рамках JetBrains IDEA.
          2. Скачайте шаблон CSS-проекта Foundation с главной страницы, https://get.foundation/.
          3. Распакуйте содержимое шаблона в каталог практической работы. После распаковки у вас в каталоге должны быть следующие файлы:
          ./ ├── css │ ├── app.css │ ├── foundation.css │ └── foundation.min.css ├── index.html └── js  ├── app.js  └── vendor  ├── foundation.js  ├── foundation.min.js  ├── jquery.js  └── what-input.js
          1. Общее название для сайта.
          2. Общая навигационная панель сайта.
          3. Название языка в мета-информации сайта.
          4. Указание на кодировку сайта.
          5. Общую базовую сетку для размещения содержимого страниц.
          1. Добавьте заголовок h1 , включающий название «Языки программирования курса»
          2. После заголовка должны следовать параграфы с текстом задачи.
          1. Добавьте заголовок h1 , включающий текст «Языки программирования».
          2. Добавьте заголовок h2 , включающий текст «Навигация в форме списка».
          3. Далее расположите ненумерованный список ul , внутри элементов которого, li , расположены ссылки на соответствующие страницы. Текст ссылки — название языка программирования. Лучше всего использовать относительные ссылки.
          4. Добавьте заголовок h2 , включающий текст «Навигация в формате таблицы».
          5. После заголовка разместите таблицу с двумя колонками: «Название языка», «Ссылка на страницу с описанием». В первом столбце должно находиться название языка, а во втором столбце — ссылка с текстом «Ссылка».
          6. Добавьте заголовок h2 , включающий текст «Навигация в формате карточек».
          7. После заголовка разместите три карточки, в заглавии которых находится название языка программирования. В качестве текста описания разместите текст «Информацию о языке можно прочитать по ссылке», где текст «по ссылке» является ссылкой на соответствующую страницу.
          1. Исправьте пути к общим ресурсам, CSS и JavaScript-файлам, предоставленными вместе с
          2. Добавьте заголовок h1 с текстом «Язык программирования HTML».
          3. Добавьте блоковый элемент div , внутри которого расположите ссылки на страницу со списком языка программирования languages.html .
          4. Первая ссылка должна использовать только обычный элемент с содержимым «Назад к списку».
          5. Вторая ссылка должна быть оформлена в виде кнопки и содержать текст «Назад».
          6. Добавьте заголовок h2 с текстом «Краткое описание».
          7. Добавьте несколько параграфов и ненумерованных перечислений, описывающий данный язык программирования.
          8. Добавьте заголовок h2 с текстом «Пример исходного кода».
          9. Добавьте пример кода на данном языке программирования. Используйте элементы pre и code .
          10. Удостоверьтесь, что все элементы интерфейса выглядят корректно и переход между всеми тремя страницами работает корректно.

          Источник

          Урок 1. Знакомство с CSS-фреймворком Foundation для верстки Битрикс магазина

          Приветствую читателей моих статей. Мы начинаем первый урок изучения разработки под Битрикс. Мои уроки будут касаться больше именно программирования на API CMS Bitrix. Напомню, что в течении серии уроков мы создадим интернет-магазин на Битрикс с нуля, который я назвал StartShop . И начнем мы с выбора шаблона для нашего магазина. Шаблон нужен обязательно адаптивный и на коком-нибудь модном CSS-фреймворке.

          Выбор шаблона (CSS Foundation )

          А начнем мы с выбора шаблона верстки которую будем внедрять в шаблон Битрикса. Основное требование современного сайта — это адаптивный дизайн. И конечно шаблон мы будем сразу брать адаптивный. И еще современная тенденция сайтостроения — это использование всевозможных CSS-фреймворков. И мы тоже не будем отставать.
          В качестве CSS-фреймворка мы возьмем ZURB Foundation. Почему его, а не более популярный Bootstrap, просто Foundation мне больше нравится. Мне кажется там более понятная сетка, отличная документация и примеры, есть набор готовых версток различных меню. И даже примеры шаблонов для разных сайтов.

          Foundation_smal

          И не нужно переживать с каким фремворком вы начинаете знакомится. Я например сначала освоил bootstrap. Верстка моего сайта сделана на bootstrap. Но потом мне захотелось посмотреть какие ещё есть css-фремворки, а их достаточно много. В итоге мне очень понравился Foundation по этому я и буду создавать магазин именно на нем. А главное у него есть набор готовых шаблонов, которые можно взять, как основу своей верстки. Для обучения это то, что нужно.

          foundation tamplates

          Вот они готовые шаблоны. По клику на изображение вы перейдете на сайт, где можно скачать шаблон. Вас попросят заполнить email и вышлют шаблон на почту. Точнее архив со всеми шаблонами сразу. Никакой рекламы мне от них не приходило.
          Я выделил, какие шаблоны мы будем использовать. Это Ecommerce Homepage, как основной шаблон и Product Page, как шаблон детальной страницы товара.
          Единственная беда в том, что шаблоны сделаны на предыдущей версии Foundation. Раньше использовался для верстки адаптивной сетки такой же подход как в бутсрап, теперь же в 6-ой версии фундейшен используется более современный подход сетка XY Grid.

          XY Grid

          Но суть верстки не изменилась. Главное понять основы и тогда вам уже будет без разницы какой фреймворк использовать, просто будите смотреть в документации названия css классов, примеры их использования и применять в своих проектах.
          Я же для своего курса переведу данные шаблоны на новый формат (для это достаточно сделать групповую замены классов .row и .column на .grid-x и .cell соответственно ). И делов. Ещё в отличие от оригинальных шаблонов я удалю лишние элементы, чтобы сделать шаблон более простым. Да и главное я внедрю вместо простого меню навигационную панель, очень современно и удобно будет.

          Наша верстка на CSS Foundation

          Вот так будет выглядеть наша верстка, каркас нашего интернет магазина.

          Шаблон eshop foundation

          Подвал не вошел поэтому его видно на детальной странице товара. Шаблон адаптивный при уменьшении размера экрана количество колонок будет сокращаться и меню в итоге свернётся в одну кнопку выпадающего меню.

          Шаблон product foundation

          1. Главная страница, на которой будет выведен слайдер и лучшие товары магазина, через специальный фильтр.
          2. Страница каталога, со списком всех товаров.
          3. Карточка товара.

          От автора:
          Ну что, начало положено! Не пропустите продолжения подписывайтесь. Свои вопросы не стесняйтесь пишите в комментариях, буду стараться отвечать.
          И можно уже сразу переходить к следующему уроку Установка Битрикс.

          Источник

          Читайте также:  Object get method python
Оцените статью
© 2024 Программирование