Подписаться на обновления блога?

Да

Нет

  • Способы создания сайта

    1. Какими способами разрабатываются сайты
    2. Как можно сравнить самописные сайты с основанными на CMS
    3. Быстродействие
    4. Безопасность
    5. Функциональность
    6. Простота создания
    7. Как выбрать способ создания сайта

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

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

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

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

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

  • Инструкция по загрузке исходных файлов сайта на локальный веб-сервер

    1. Подготовка локального веб-сервера
    2. Скачивание и распаковка исходных материалов
    3. Перенос файлов на локальный веб-сервер
    4. Импорт таблиц MySQL в базу данных текущего хоста

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

    Как ранее отмечалось, в представленных материалах Сборника в случае, если в ходе рассмотрения статей в программный код сайта или базу данных MySQL вносятся какие-либо изменения, то к ним прилагается последний вариант исходных материалов, включающий все файлы сайта в каталоге "www" и таблицы базы данных MySQL.

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

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

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

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

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

    Что же касается загрузки на хостинг файлов сайта, то по этому вопросу имеется отдельная статья Переносим сайт на хостинг, где показано, как это можно сделать с использованием FTP клиента FileZilla.

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

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

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

Описание которого сопровождается исходными файлами с таблицами 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 определим ее местоположение и сформируем внешний вид...