Урок 7. Создание прототипа сайта. (Часть 3)

Автор Maksim Inshakov
Урок 7. Создание прототипа сайта. (Часть 3)

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

Давайте начнём создание внутренних страниц для этого. Давайте сначала удалим всех ненужных страничке навигаторе про дублируем главную страницу мы будем создавать на основе главный наш внутренний зовём её about — это у нас будет страница о компании переходим на неё теперь удаляем все ненужные объекты которые не должны быть на внутренней выделяем все элементы слайдера далее из блока. Кто мы удаляем всё помимо заголовка также блок последних проектов блок наши клиенты и блок отзывов.

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

Верхняя панель навигации также переместить im&p блок с основным компонентом оставим отступ примерно где-то 23 пикселей отличное также уменьшим он здесь примерно так сгруппируй наш Footer выделяемые комбинации клавиш Control + 1 все объекты находящиеся в области выделения и перетаскиваем наверх всё отлично допустим то, что на странице о компании у нас будет какой-то изображение и произвольный текст переименовываем заголовок для обозначения и изображения выбираем инструмент placeholder Image растением на ширину 780 пикселя в высоту. Давайте обозначен в 300 пикселей укажем то, что здесь должно быть изображение либо фотографии под ним будет у нас текст текст мы обозначаем с помощью инструмента параграф выбираем его на панели инструментов перетаскиваем также растягивал на ширина 880 пикселей увеличить высоту объекта дополнительных материалов скопируйте текст к этому блоку произвольный текст либо можете вставить в любой произвольный текст. Перов где-нибудь в интернете отлично для данного текста устанавливаем размер шрифта 14 пунктов обычно и. Кирилл avito.ru корректируем высоту элементов на основе страница о компании давайте создадим дубликаты и для оставшихся страниц этой услуги портфолио контакты дублируются страницу in the Mirror Service то есть услуги дублируем дали зовём портфолио. Последняя страница — это на странице контакты отлично далее переходим на страницу. Теперь давайте создадим ссылки для наших страниц для этого выбираем нужный нам пункт допустим о компании у меня отключен и виды его скорее всего они присутствуют я включу нужные виджеты в Paint. И убирай Widget interaction in nottz выделяя помпа компании иду в меню Create Link и выбирай страницу на которую необходимо разместить гиперссылку в данном случае у нас — это страница эбаут отлично для страницы услуг создаем ссылку на страницу сервис для портфолио соответственно портфолио и для контактов убираем страницу контакты отлично ссылки у нас обозначены. А чтобы — это выглядело как ссылки. Давайте подчеркнем точнее добавим подчёркивание для наших текстовых — это делать с помощью инструмента подчеркнутый текст обычной, тогда отлично теперь более похоже на ссылки далее нам нужно добавить ссылку для логотипа чтобы при клике на неё мы возвращались на главную страницу ссылку можно добавить с помощью элемента Hotspot. Выбирай Mio устанавливаем ширину такой же как и логотип линия добавим действие с помощью элемента creating и выберем то, что данная ссылка должна вести на главную страницу ссылки для основных элементов, но ещё нужно создать ссылку для нашей кнопки чтобы при клике на неё открывалась модальное окно с формой обратной связи перед этим я предлагаю вывести нашу верхнюю панель вот так называемый мастер блок выделяемся элементы находящиеся внутри верхней панели и нажимаем правой кнопкой мыши и выбираем convert to Master. Давайте дадим название топ навигейшн то есть верхний навигация отлично наша мастер панель отобразилось вот в этом блоке вообще, что такое мастер панель мастер панель позволяет создав какой-то один элемент про тиражировать её на другие страницы допустим чтобы нам не приходилось вносить правки на каждой странице допустим вот рыболов-сервис портфолио и так далее мы вносим 1 изменение мастер панель итог навигейшн сохраняем её и при этом у нас изменения отображается на всех страницах. Теперь давайте создадим нашу всплывающую форму обратной связи. Для этого выберем инструмент прямоугольник размести меня здесь ширина у неё будет примерно давайте сделаем 460 пикселей, а высота примерно 430 дали нам необходим следующий виджет которые помогают нам редактировать свойства объекта идём viewpoint играем Widget properties and Style. Давайте сразу. Включи мне 3 виджет виджет менеджер чтобы наша форма обратной связи выглядела более симпатично. Давайте придадим закругление углам формы — это можно сделать виджете properties in style и тут есть такой пункт Corner radius устанавливаемое значение 5 то есть радиус закругления 5 пикселей отлично заголовок формы будет направить заявку выравниванием по центру примерно так далее. Нам необходимо добавить поля ввода данных для имени email и сообщение, а также расположить на нашей форме две кнопки для этого убираем текст Field размести меня примерно здесь растением примерно такой ширины, а высота давайте сделаем примерно 40.000.

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

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