<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как верстать сайт без макета

Как  верстать сайт без макета

Один наш ученик спрашивает: На фриланс-биржах, каждый десятый заказчик, кидает ссылку на какой-нибудь сайт, чаще всего лендинг и просит сделать, точно такой же. Как можно выполнить такой заказ, когда нет дизайн-макета?

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

С чего начать?

Нужно открыть исходный код сайта и вытащить оттуда изображения. Картинка, не будет отображаться в браузере, если её не пересохранить в каком-нибудь графическом редакторе.

Как верстать сайт без макета.

Кнопка Сохранить как (целиком сайт), в этом случае не поможет – не сомневайтесь, что хитрые сервисы-конструкторы и об этом позаботились.

Установить все необходимые расширения для Google Chrome. Ловлю себя на мысли: "Что опять без гугла не обойтись?"

Список расширений для Google Chrome

  • CSSViewer – покажет значения свойств у элементов
  • Page Ruler – линейка для замера отступов и размеров
  • Bootstrap Grid for any Website – наложить полупрозрачную сетку на сайт
Как верстать сайт без макета.

Если собираетесь делать верстку не по Bootstrap сетке, то не ставьте это расширение. Но, я рекомендую этот способ, поскольку большинство конструкторов, работают с модулями, сверстанными по Bootstrap сетке.

HTML разметка

Подключаем библиотеку Bootstrap, смотрим на сайт, считаем колонки, прописываем классы и теги – делаем так же, как по макету.

  <header class="header">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6">
          <h1 class="header__logo">Кухни C2O interior</h1>
        </div>
        <div class="col-md-6">
          <p class="header__phone">+380636037502<br>
          <span class="header__call">Перезвоните мне</span>
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 text-center">
          <h2 class="header__h2">Сделаем вам кухню с уникальным дизайном<br></h2>
          <p class="header__call">Своё производство, работаем от идеи до результата!</p>
        </div>
      </div>
    </div>
  </header>

CSS код


Включаем расширение CSSViewer, двигаем к элементу и считываем CSS стили. Линейкой Page Ruler, замеряем расстояние между элементами.


Как верстать сайт без макета.

.header {     background:
    linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../img/bg_header.jpg") center no-repeat;
    background-size: cover;
    width: 100vv;
    height: 100vh;
}

Заключение

Давайте посмотрим, что же вынуждает заказчика, копировать чужой сайт? А чужой ли? Явление это отнюдь не новое и название ему - конструкторы. Многие люди повелись на иллюзорную дешевизну и простоту, создали на конструкторе себе сайты. Но конструкторы так устроены, что оттуда нельзя забрать сайт. Они зарабатывают на размещении вашего сайта на хостинге, который на самом деле, вам не принадлежит. Вот и предлагают "владельцы своих сайтов", верстать не по макету, а по браузерной интерпретации.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.