Создание сайта-заглушки


Урок #11: cоздание шапки сайта. Работа с навигацией

Шаг #1. На главной странице перейдите в раздел «Хедер/Футер» → задайте название для футера (Шапка сайта) → выберите тип «Шапка (Header)» → нажмите кнопку «Создать» → зайдите в созданную шапку.  



Шаг #2. В разделе «Блоки» на панели инструментов выберите «Адаптивный блок» → перетащите элемент в среду визуальной верстки.

 

 

Шаг #3. Нажмите на блок в любом свободном месте → в нижнем или в верхнем углу блока появится иконка «Настройки» → нажмите на иконку.

 


Шаг #4. В «Настройках» укажите высоту блока - 100 px.



Шаг #5. Правой клавишей мышки нажмите на блок → в появившейся панели выберите «Добавить колонку».  

 

 

Шаг #6. Задайте ширину колонки 370 px → задайте расположение колонки слева → нажмите «Добавить». 



Шаг #7.  Повторите действия → правой клавишей мышки нажмите на блок → в появившейся панели выберите «Добавить колонку №2».   

  


Шаг #8. В разделе «Медиа» на панели инструментов выберите «Фото» → перетащите элемент в среду визуальной верстки, в колонку №1.  

 


Шаг #9. Загрузите изображение с компьютера или из интернета.      



Шаг #10. В появившейся панели «Информация» установите ширину и высоту изображения (ширина: 253 px, высота: 55 px) → в этой же панели переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (слева, по середине) → укажите отступы от базовой точки (по оси x: 5.4 %, по оси y: 0 px) → нажмите «Сохранить» 


 

Шаг #11. Перейдите в раздел «Навигация». 



Шаг #12. Задайте название для навигации (Навигация) → нажмите кнопку «Создать».


 

Шаг #13. Дайте название первому пункту навигации (О САЛОНЕ) → выберите тип пункта "Якорь" → в поле «Ссылка» пока укажите (#) → нажмите кнопку «Добавить».



Шаг #14. Дайте название первому пункту навигации (УСЛУГИ) → выберите тип пункта "Якорь" → в поле «Ссылка» пока укажите (#) → нажмите кнопку «Добавить».  


 

Шаг #15. Дайте название первому пункту навигации (ЗАПИСАТЬСЯ) → выберите тип пункта "Якорь" → в поле «Ссылка» пока укажите (#) → нажмите кнопку «Добавить». 



Шаг #16. Дайте название первому пункту навигации (КОНТАКТЫ) → выберите тип пункта "Якорь" → в поле «Ссылка» пока укажите (#) → нажмите кнопку «Добавить». 



Шаг #17. Вернитесь к шапке сайта. 



Шаг #18. В разделе «Меню» на панели инструментов выберите «Меню» → перетащите элемент в среду визуальной верстки, в колонку №2.



Шаг #19. В появившемся окне  выберите созданную навигацию навигацию.



Шаг #20. Над текстом (в верхнем левом углу) появятся иконки с возможными действиями → настройте цвет основной навигации (во всех полях укажите прозрачность цвета: 0 ).



Шаг #21. Перейдите в раздел «Текст» → укажите базовые параметры «Основной навигации» → установите «Основной стиль» (Верхняя навигация) → установите «Стиль активного пункта» (Верхняя навигация) → установите «Ориентацию текста» (По центру).



Шаг #22. Задайте размеры горизонтальных отступов «Основной навигации» (Слева/Справа: 2 px) → задайте размеры вертикальных отступов «Основной навигации» (по оси x: 2 px; по оси y: 2 px).



Шаг #23. Пункт «Оформление» оставляем без изменений.



Шаг #24. В панели «Информация» установите размеры элемента (ширина: 100%, высота: 50 px) → в этой же панели переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (по середине, по центру) → укажите отступы от базовой точки (по оси x: 0 px, по оси y: 0 px). 



Шаг #25. В разделе «Наполнение» на панели инструментов выберите «Текст» → перетащите элемент в среду визуальной верстки.  



Шаг #26. Над текстом (в верхнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → выберите стиль текста (Телефон в шапке (черный)).



Шаг #27. Над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (8 800 600 20 48, +7 499 959 03 37) → выделите данный текст → в текстовом редакторе выберите ориентацию текста по правой стороне.



Шаг #28. Выделите  номер (+7 800 600 20 48)→ в текстовом редакторе нажмите на иконку «Ссылка» → выберите тип ссылки «Телефон» → укажите телефон через +7, без пробелов → нажмите «Сохранить». 



Шаг #29. Выделите  номер (+7 499 959 03 37)→ в текстовом редакторе нажмите на иконку «Ссылка» → выберите тип ссылки «Телефон» → укажите телефон через +7, без пробелов → нажмите «Сохранить».



Шаг #30. Нажмите на созданный текст → в появившейся панели «Информация» укажите ширину текстового элемента (ширина: 300 px) → переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (по центру, справа) → укажите отступы от базовой точки (по оси x: 5.4 %, по оси y:  12 px).   



Шаг #31. В разделе «Наполнение» на панели инструментов выберите «Текст» → перетащите элемент в среду визуальной верстки.



Шаг #32. Над текстом (в верхнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → выберите стиль текста (Текст голубой (16 px)).



Шаг #33. Над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (г. Москва, Пресненская наб., 2) → выделите данный текст → в текстовом редакторе выберите ориентацию текста по правой стороне.



Шаг #33. Нажмите на созданный текст → в появившейся панели «Информация» укажите ширину текстового элемента (ширина: 300 px) → переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (по центру, справа) → укажите отступы от базовой точки (по оси x: 5.4 %, по оси y:  12 px).   



Шаг #34. Перейдите к шаблону «Главной страницы».



Шаг #35. В настройках шаблона включите отображение «Шапки» и «Подвала сайта» → так же подключте настройку «Шапка поверх страницы» и «Фиксированная шапка».



Шаг #36. В разделе «Меню» на панели инструментов выберите «Якорь» → перетащите элемент в среду визуальной верстки, в блок №2.



Шаг #37. Над элементом (в верхнем левом углу) нажмите на иконку «Ссылка» → дайте название «Якорю» → название якорей важно прописывать латинскими буквами, указывая пробелы через нижнее подчеркивание (o_salone) → нажмите «Сохранить». 



Шаг #38. В появившейся панели «Ориентация» укажите расположение объекта (сверху, слева) → укажите отступы от базовой точки (по оси x: 0 px, по оси y: 0 px).



Шаг #39. В разделе «Меню» на панели инструментов выберите «Якорь» → перетащите элемент в среду визуальной верстки, в блок №3.



Шаг #40. Над элементом (в верхнем левом углу) нажмите на иконку «Ссылка» → дайте название «Якорю» → название якорей важно прописывать латинскими буквами, указывая пробелы через нижнее подчеркивание (uslugi) → нажмите «Сохранить». 


Шаг #41. В появившейся панели «Ориентация» укажите расположение объекта (сверху, слева) → укажите отступы от базовой точки (по оси x: 0 px, по оси y: 0 px).



Шаг #42. В разделе «Меню» на панели инструментов выберите «Якорь» → перетащите элемент в среду визуальной верстки, в блок №8.



Шаг #43. Над элементом (в верхнем левом углу) нажмите на иконку «Ссылка» → дайте название «Якорю» → название якорей важно прописывать латинскими буквами, указывая пробелы через нижнее подчеркивание (zapisatsya) → нажмите «Сохранить». 



Шаг #44. В появившейся панели «Ориентация» укажите расположение объекта (сверху, слева) → укажите отступы от базовой точки (по оси x: 0 px, по оси y: 0 px).



Шаг #45. В разделе «Меню» на панели инструментов выберите «Якорь» → перетащите элемент в среду визуальной верстки, в блок №9.



Шаг #46. Над элементом (в верхнем левом углу) нажмите на иконку «Ссылка» → дайте название «Якорю» → название якорей важно прописывать латинскими буквами, указывая пробелы через нижнее подчеркивание (kontakty) → нажмите «Сохранить». 



Шаг #47. В появившейся панели «Ориентация» укажите расположение объекта (сверху, слева) → укажите отступы от базовой точки (по оси x: 0 px, по оси y: 0 px).



Шаг #48. Сохраните шаблон.



Шаг #49.Скопируйте название «Якоря» из блока №2 (o_salone) → перейдите в раздел «Навигация» → откройте созданную вами навигацию → перейдите к настройкам первого пункта навигации (О САЛОНЕ) → в поле «Ссылка» вставьте название якоря после знака # (#o_salone) .



Шаг #50.Скопируйте название «Якоря» из блока №3 (uslugi) → перейдите в раздел «Навигация» → откройте созданную вами навигацию → перейдите к настройкам первого пункта навигации (УСЛУГИ) → в поле «Ссылка» вставьте название якоря после знака # (#uslugi).



Шаг #51.Скопируйте название «Якоря» из блока №8 (zapisatsya) → перейдите в раздел «Навигация» → откройте созданную вами навигацию → перейдите к настройкам первого пункта навигации (ЗАПИСАТЬСЯ) → в поле «Ссылка» вставьте название якоря после знака # (#zapisatsya).



Шаг #52.Скопируйте название «Якоря» из блока №9 (kontakty) → перейдите в раздел «Навигация» → откройте созданную вами навигацию → перейдите к настройкам первого пункта навигации (КОНТАКТЫ) → в поле «Ссылка» вставьте название якоря после знака # (#kontakty).



В следующем уроке вы узнаете, как cоздать подвал сайта