Создание адаптивного веб-сайта
Основные шаги
Работа с контрольными
точками
Объекты
Главная страница (Master
Pages)
Заполнитель контента
Вставка своего кода
|
Создание адаптивного веб-сайта
Основные шаги
"Адаптивный веб-сайт" - сайт, который "подстраивается под размер
экрана". Так как люди просматривают веб-сайты с различных устройств -
мобильных телефонов, планшетов, ПК, ноутбуков, то очень важно,
чтобы
сайт должен легко читаться при всех размерах экрана.
Адаптивный сайт автоматически работает хорошо на крошечном 320x600
экране небольшого смартфона, но и на полном экране (2048x1024) браузера
настольного ПК. Это делается, например, изменяя размер шрифта,
переставляя и скрывая элементы и др.
Создайте новый пустой сайт
Ззпустите программу RocketCake.
Щелкните по кнопке "Новый" для создания нового сайта.
Вы можете создать новый пустой сайт или сайт из шаблона.
Для создания пустого сайта в окне "Новый веб-сайт" выберите "Пустая
страница".
Редактор откроет пустую страницу для редактирования. Ее название по
умолчанию - "index.html".
На панели "Свойства" (слева внизу) - все настройки создаваемых страниц.
Здесь
вы можете быстро изменить
внешний вид страницы, ввести название для Вашей страницы (для первой
или главной страницы - оставляете название "index"), вберите цвета по
умолчанию для ваших ссылок, определите цвет фона (градиент или
изображение, если хотите), и другое.
При щелчке по кнопке "Настройки" откроется окно настроек сайта.
Например, Вы можете установить язык сайта (для поисковых систем),
указать папку для изображений и др.
Создайте панель навигации (меню)
На правой панели "Инструменты" выберите "Navigation Menu" - элемент
навигации, и нажмите на странице.
На страницу будет вставлено меню.
Введите свой текст меню (например, назовите страницу "Company").
Отредактируйте текст.
Для настройки меню выделите его (щелкните по меню), на левой панели
"Свойства" откроются все настройки меню.
Вы можете изменить цвет фона. По умолчанию
меню будет иметь ширину 100% (на всю ширину страницы). Это
очень полезно, потому что при этом меню будет автоматически
адаптироваться к
различным размерам экрана.
Посмотрите горизонтальный ползунок в нижней части страницы.
Переместите его влево и вправо: с его помощью вы можете просмотреть,
как страница будет выглядеть на устройствах с разной шириной экрана.
Передвинем ползунок вправо, и мы скорректируем макет меню немного:
а. во-первых, мы установим максимальную ширину меню в 800 пикселей.
Таким
образом, сайт будет выглядеть лучше на больших разрешениях.
На
панели "Свойства" найдите "maxwidth" (максимальная ширина) и установите
ее как "800", т.е. меню не будет шире, чем 800 пикселей.
 Кроме того, мы хотим, чтобы названия меню
было по центру в контейнере, нажимаем
на кнопку "текст по центру" (см. рисунок слева).
Если вы хотите изменить шрифт для нескольких пунктов меню сразу, просто
выберите меню, нажмите и удерживайте клавишу 'Shift' на клавиатуре и
выделите другие кнопки меню. Затем вы можете выбрать новый шрифт как
обычно.
Подробнее
о создании меню (англ. язык)
Вставка логотипа
Вставим изображение непосредственно под меню.
Мы могли бы использовать элемент "изображение", но потому, что мы хотим
добавить текст поверх изображения позже, мы используем элемент
"Container" - контейнер.
Выберите элемент "Container" на панели "Инструменты" (справа), и
нажмите на странице
где-то внизу меню, которое вы создали.
Перетащите белый маркер его нижней границы немного вниз, чтобы сделать
контейнер больше.
Затем, в окне свойств (слева) найдите свойство контейнера "Режим фона"
("BackgroundMode"), и
установите его как "Изображение".
Щелкните по "Фоновое изображение" и выберите файл изображения с диска.
Аналогично тому, как вы сделали с меню, найдите в свойствах
максимальную ширину изображения "maxwidth", и измените ее на
"800".
Кроме того, нажмите кнопку 'по центру', как и для меню
Результат может выглядеть так, как показано на рисунке ниже:
Основные шаги - см. далее:
|
