×
Закрытие
×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Создаем сайт для работы в Интернете

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

    Здравствуйте уважаемый посетитель!

    Наверное, многие задаются вопросом, как можно самому создать сайт для работы в Интернете или просто для реализации своих интеллектуальных способностей.

    Причем чтобы такой сайт был создан не в стандартном исполнении на основе какой-нибудь бесплатной СMS, а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

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

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

    Следует к этому добавить, что при желании, после получения необходимых знаний и навыков в вопросах сайтостроения, вполне возможно заняться и созданием сайтов на заказ. Тем более, что эта работа очень интересна и достаточно хорошо оплачиваемая. И что немаловажно, ее можно выполнять удалено, занимаясь в любое время не выходя из дома. Для этого нужно всего лишь одно условие - подключение к сети Интернет, что в наше время не является какой-либо проблемой.

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

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние самописного сайта, который создается для работы в Интернете в рамках цикла статей Как сделать сайт.

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Адаптация под мобильные устройства



Статья 1 сборника
2017-04-02

Подготавливаем сайт к адаптации под мобильные устройства

  • Как имитировать просмотр сайта с мобильного устройства на обычном компьютере
  • Составляем адаптивный макет (прототип)
  • Определяем контрольные точки в медиа-запросах
  • Определяем способ адаптация
  • Изменяем масштабирование веб-страниц
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

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

В связи с тем, что объем данного материала не позволяет рассмотреть его одной статье, эта тема разбита на 3 части:

  1. Подготовка сайта к адаптации под мобильные устройства.
  2. Формирование медиа-запросов для разных разрешений экранов.
  3. Создание выпадающего меню для работы с малым разрешением экранов (смартфоны).

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

А сегодня мы рассмотрим первую часть, в которой в основном будут включены вопросы по подготовке к непосредственному выполнению адаптации.


Статья 2 сборника
2017-04-08

Формируем медиа-запросы для разных разрешений экранов

  • Принцип описания медиа-запросов методом Cначала мобильные
  • Формируем медиа-запросы для минимального разрешения
  • Назначаем стилевые свойства для разных разрешений в установленном диапазоне
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

Сегодня сформируем медиа-запросы с помощью правил CSS и адаптируем наш сайт под мобильные устройства. При этом сделаем так, чтобы сайт хорошо отображался на всех устройствах в установленном диапазоне от 320 до 1920 пикселей.

Для определения параметров устройств применяются специальные медиа-запросы. С их помощью браузер узнает какое устройство используется при загрузке веб-страницы, и исходя из этого применяются те или иные стилевые свойства.

Таким образом можно подстраивать отображение страниц сайта под разрешение монитора персонального компьютера или дисплея мобильного устройства меняя при необходимости размер изображений и текста, ширину страниц и компоновку их элементов.

Все медиа-запросы обозначаются правилом "@media", после чего следуют условия, при выполнении которых используются назначенные свойства стилей CSS...


Статья 3 сборника
2017-04-12

Создаем выпадающее меню под мобильные устройства

  • Добавляем в разметку элементы дополнительной кнопки для вызова меню
  • Оформляем с помощью стилей CSS внешний вид выпадающего меню
  • Составляем скрипт для управления выпадающим меню
  • Создаем дополнительный элемент навигации Хлебные крошки
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

Сегодня для управления сайта при использовании мобильными устройствами рассмотрим весьма немаловажный вопрос о том, как создать выпадающее меню, необходимое для работы с небольшим разрешением экранов. Также дополним веб-страницы элементом навигации "Хлебные крошки", в котором будет отображаться информация о текущих страницах сайта.

В предыдущей статье, при адаптации сайта под мобильные устройства на экранах с небольшим разрешением от 320 до 600 пикселей с помощью свойств CSS мы скрыли Главное меню. Это необходимо было сделать, так как такой размер экрана не позволяет отображать меню на всю ширину страницы.

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

Сейчас мы добавим необходимые элементы кнопки в разметку HTML-страниц, а дальше с помощью стилей CSS определим ее местоположение и сформируем внешний вид...