HTML и CSS. Список уроков.


Урок 01. Создание первой страницы.

Урок 02. Форматирование текста.

Урок 03. Макет страницы.

Урок 04. Добавление изображений.

Урок 05. Ссылки и меню.

Урок 06. Компоновка элементов.

Урок 07.

HTML и CSS. Урок 5. Создание панели навигации по сайту, или Меню сайта. 

Элементы навигации по сайту это группа ссылок или список разделов сайта. Желательно сделать его максимально удобным для пользователя, чтобы любую информацию можно было отыскать каждому, кто впервые попал на сайт. Будем считать, что у каждого есть эскиз того проекта, над которым он работает и в нем указано точное расположение панели навигации. Давайте вспомним  структуру нашего учебного сайта megaportal. На данный момент он состоит из четырех фрагментов (прямоугольников). Три блока расположены друг над другом, а четвертый блок logo (надпись MEGA) находится внутри первого блока с названием нашего учебного сайта. Разместим горизонтальное меню в нашем примере под блоком один. Для этого в редакторе кода перейдем на вкладку index.html и добавим новый элемент:

Мы разместили в новый элемент div с именем класса menu1 маркированный список ul с классом nav. Для примера добавили три ссылки, одну на нашу главную страницу, а две других - произвольные, для понимания как все это работает. Откроем наш мегапортал и посмотрим, что же мы наваяли.

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

Уже лучше, но не совсем то, что мы хотим увидеть. Займемся форматированием ссылок, добавим отступы, фон и т.п. Сначала присвоим свойству display значение inline-block, чтобы правильно отражались задаваемые нами отступы. Далее укажем на рамку с толщиной границ 1рх и зададим вид и цвет. Затем идут значения внутренних отступов и отмена подчеркивания наших ссылок. Свойство border-radius позволяет сделать границы наших кнопок закругленными. Ну  размер шрифта и его цвет - эти свойства нам уже хорошо знакомы.

Применим еще очень красивый визуальный эффект - изменение цвета ссылки при наведении на нее указателя мыши

.nav a:hover { color: antiquewhite ; }  

Если требуется разместить меню по центру то нужно прописать для элемента ul свойство text-align:

ul { text-align: center;}

 Освоение первых пяти уроков нам  позволяет самостоятельно создать свой первый сайт и разместить его в интернет. Также у нас уже есть представление о структуре HTML и CSS и мы сможем без посторонней помощи разобраться в основных элементах шаблона любого сайта и отредактировать его под наши задачи.

Наш учебный сайт, который мы сможем создать, освоив все имеющиеся на данный момент уроки, расположен на megaportal.cloudshell.ru


Продолжение: HTML и CSS. Урок 6.

 

 

Параметы