17. Создание сайта с помощью фреймворков. Структурирование страниц для фреймворков

Автор Lyubov Stishevskaya
17. Создание сайта с помощью фреймворков. Структурирование страниц для фреймворков

когда я впервые начал экспериментировать с фреймворками я был под наивным впечатлением, что всё, что мне нужно сделать — это написать чистый семантический HTML выбрать Framework применить стили и наслаждаться дизайнерское нирваной, но к сожалению фреймворки так не работают поскольку фреймворках.

Можно контролировать так много переменных много стилизации и функционала не только к атрибутам класс, но очень часто их структуре самого кода HTML. Это означает, что очень часто вам необходимо будет структурировать ваш контент в зависимости от требований они ваших собственных стандартов кодирования чтобы проиллюстрировать — это мы будем работать над панелью навигации нашего сайта Simple поймать. Давайте посмотрим на это.

Верхнее меню вот здесь в наш.

Вы видите, что — это очень простой элемент навигации в нём содержится неупорядоченный список которые все ссылки меню и сразу после него идёт поисковая форма всё очень просто я хочу чтобы — это было стилизовано как вот здесь меню навигации должно быть вверху при наведении ссылки должны и справа должен быть поиск и также. Меню должно быть отзывчивым если я изменю размер навигация должна исчезнуть и пользователь должен сам разворачивать и сворачивать её на маленьких экранах Foundation есть такая возможность если зайти на сайт его документации то вы увидите там очень похожие меню. То есть я не должен проектировать — это с самого начала я просто сделаю что-то похожее на, что во фреймворке Foundation уже есть и я могу этим воспользоваться тем не менее если взять страницу которую я вам показывал с хорошим чистым меню которые я создавал уже сотни раз. Прими страница стилизацию фреймворка и посмотреть на неё то вот, что я получу у меня не будет симпатичный навигация. В верху уже на этом этапе. Вы можете развести руками расстроится и начать стилизовать всё сами или вы можете более глубоко заглянуть в фреймворк и посмотреть, что требуется чтобы сделать так тип навигационной панели чтобы сделать — это я зашёл на сайт документации Foundation 3 работая над этим курсом я много времени провел на этом сайте поэтому. Когда вы выбираете фреймворк вам нужно подумать как много документации есть у этого фреймворка она подробная или вам потребуется потратить много времени чтобы разобраться с самим ходом фреймворка определяя, что в нём происходит или же у вас будет документации подобное этой если я рассмотрю документацию по навигации — это увижу, что здесь есть отдельный раздел для верхней панели в дополнение к описанию этой панели здесь есть пример самого кода. Так, что не хотите создавать его с нуля можно просто копировать и вставить их кот и начать работать со своим контентом. А это, а если вы хотите построить эту панель сами они копировать их код. Вам нужно будет прочитать эту документацию вот здесь есть информация об основном необходимом о позиционировании панели из, что — это панель создано с помощью одного элемента на с классом табор. Верхняя панель. Это довольно просто сделать поэтому я перееду обратно к моему году перейду к моей навигации. Сотри ролл навигация и добавлю здесь атрибут класс зададим класс табор котором говорилось сохраняем — это возвращаемся в браузер и обновляем и видим, что лишь одно — это и очень сильно преобразила моё навигацию теперь она больше похоже на то, что я хотел все мои ссылки вот здесь сверху они отформатированной как нужно правда не очень хорошо работает поле поиска и вали находится вот здесь, а затем сама поле поиска и кнопка ввода находится как бы под ним так, что с этим нам ещё разобраться и если я уменьшил страницу чтобы посмотреть на отзывчивость меню то и я сейчас нет у меня здесь есть только одна ссылка кнопка выпадающего. Меню которое нужно нету. Так, что давайте вернем документации и посмотрим. Откуда она берётся. Обратите внимание, что здесь есть элемент списка с классом. Тагил табор он будет разворачивать меню в отзывчивым макете и можно убрать элемент с классом name если я использую элемент того чтобы чётче понять картину того о чём здесь говорится. Я хочу посмотреть код здесь у нас есть на с классом табор внутреннего неупорядоченный список который не является частью нашей навигации в нём содержится ссылка и также название title название — это то, что отображается вот здесь слева в самой навигационные панели. Внимание В моей завершенный версии названия нет так, что по существу она мне не нужна, но мне теперь нужно модифицировать чтобы она работала так хочу я поэтому я вернусь к моему году и создам ещё один неупорядоченный список. Над нашим теперь внутреннего я добавлю два элемента списка в первом элементе у меня будет просто текст меню меню, а во втором элементе списка у меня будет ссылка которая на самом деле никуда не ведет. Я просто добавлю знак решетка качестве самой ссылке и функционал разворачивание будет добавлено с помощью скриптов — это очень простой неупорядоченный список, но он даст мне необходимый функционал для сворачивания и разворачивания в отзывчивых макетах когда самой меню будет сворачиваться то будет отображаться только слова манию чтобы пользователи со смартфонами и планшетами поняли, что — это и есть самой меню для этого вот здесь я добавлю класс Show for Small показывать для маленьких.

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

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