Разработка интернет-магазина на Joomla. Урок №4. Размечаем главную страницу

Автор Vera Abramova
Разработка интернет-магазина на Joomla. Урок №4. Размечаем главную страницу

Добрый день в данном уроке мы переходим непосредственно к сборке нашего сайта по макету макета представляю в формате JPEG и будто главная страничка выглядит следующим образом.

А эту страничку нас будет адаптивная то есть из-за этого нам придется использовать модульную сетку модульную сетку использовать bootstrap. Скоро будем различать её следующим образом первый блок который занимается 12 человек 2 3 4 5 6 7 остальные блоки будут идти страничку на одну 3/32 Black Footer. Будет ли спрос на четыре части то есть вот по такому принципу мой будем собирать эту страничку и так для того чтобы у нас работал работал фреймворк bootstrap, а нужно его подключить скачать его можно с официального сайта bootstrap 3 bootstrap — это русскоязычная — это не официальный сайт доля.

А я уже его скачал его нужно подключить к нашему шаблон давайте — это сделаем для начала вот на шаблон.

Папочка CSS мы помещаем bootstrap.min.css папочку фонд шаблоны которые мы уже заранее сделали потому, что значит, что нам потребуется мы перемещаемся шрифты иконки и дали нам. Остаётся только в папочку добавить. Файлик bootstrap.min.css. Всё теперь нам остается только подключить нашу нашу фреймворка bootstrap и всё будет работать для этого открываем index.php. Толик и делаем подключение JS файла следующим образом добавляем вот такой строчку сначала мой прописываем путь к нашему jesolo. Удали указываем сам этот файл вот эти все элементы элементы PHP кода дают нам возможность обратиться к полному пути в нашем файла и. Дали устраняем конфликта bootstrap в котором установлен уже в чему дали нам необходимо подключить файл bootstrap.min.css у нас раньше было строчка подключение файла стилей с которым еще не создали но. Уже подключили. Давайте сначала его создадим. Заходим в папочку CSS и создаем новый документ стиль CSS готова и нам необходимо ещё подключить вот этот. Файлик То есть к 1 строчку и добавляем ей мусор принцесса готова bootstrap подключён теперь нам необходимо создать необходимые блоки для нашего будущего сайта так сказать сделать каркас у нас будет один блок который будет оформлять все остальные. Давайте задать ему. Класс раб make a внутреннего будет содержаться по все остальные блоки? я сразу делаю табуляцию отступление от своего чтобы кот был более. Чита так контейнер и сдаём ещё один div с классом Road внутреннего создаем первый наш блог, а доставка дали ему нужно прописать необходимое класса классу этого блока будут браться из фреймворка bootstrap то есть мы знаем, что модульная сетка состоит из 12 ячеек убраться из этого так как наш блог занимает 100% мы должны все значения. Выставить по максимуму то есть 2 12 ячеек он занимает на всех устройств включай портативная 13 20 и последней значение 12. Давайте посмотрим, что у нас получилось вот как выглядел наш сойду этого вот, что получилось проинспектировали у вас с помощью fargo мы будем то есть вот блок у нас сразу уже центрированный как нам нужна вот наш Block wrap Main которые обрамляют всё остальное не за, что мы пока вывод элементов из админки оставили ниже вообще можешь моих показать комментировать пока стоим и они нам не помешают создавать каркас высшее потом перенесем вот эти вещи в нужное нам место — это первый блок. Мы создали то есть. Мы создали сейчас бесплатно доставку блок дали следующий блок вот этот с логотипом дали блок телефон и меню и режим работы то есть вот эти блоки на широкоформат никах на мониторах у нас занимают 100% все вместе. Давайте размечать. Так — это у нас уже новая строка у неё все блоки 1 нас Logo 2 меню и режим работы много меню Time. Давайте выставляй значение. А вот эти значения пока трогать не будем поставим пока значит 12 мы сейчас верстаем для широкоформатного 3 если по пропорциям посмотреть этот блок больше чем вот этот то есть получается у нас здесь скорее всего 4 ячейки даже вот история здесь страна так 4 3 так значит пять скорее всего пропорциях мы ошиблись. Ну давайте посмотрим, что получилось, а лучше всего сейчас даже закрасить эти блоки. Давайте сразу на период сделаем класса и такого слова будет иметь доставка выпускать также там готова. Давайте оформляться. Ну доставку как оформлять. Смысла не было бы, но ладно так открываем наш файл стилей открываем его в отдельном окне так будет проще. А все элементы видны доставка есть долга есть. Зато Дима сразу свет блок меню и режим работы вот так смотрим. Что у нас получилось и насколько соответствует макет так ошиблись мы в следующих блоках вот этот блок должен быть три. Вот — это два если смотреть в пропорция давать исправим здесь значение 3 где значение 2 здесь значение 7 проверяем теперь похоже на правду. Итак переходим к следующему блоком у нас здесь три блока по сути они имеются все такие же размеры. Давайте с копируем эти блоки как есть и просто изменим классы содержание социальные сети доля дали у нас блог ведет войско и последний блок корзина здесь у нас так всё и выглядит. Как дошла так далее. У нас идёт блок обратить внимание водить можно заметить некий. Градиент вот он первый. Градиент вот он 2. Градиент из этого нам нужно эти блоки ещё раз обрамить то есть вот — это сделаем blockhead вот — это сделаем Block wrap Content чтобы было всё — это также заметно. Так у нас есть первый блок который обрамляет верхушку теперь рохер закрывает солнце вот здесь не забываем табуляция и дальше делаем обрамление следующем блоком концерт есть и он.

0 комментариев
0

Читайте также