All Articles Dreamweaver
Dreamweaver CS5: Строительство навигации по меню из списка
Iain Anderson on Sat, January 7th 0 comments
When it comes down to it a Nav Menu is basically a list. Iain Anderson takes us through the basics of building one such menu from a list in Dreamweaver CS5.

При построении лучшей практики сайте, Вы должны построить свой навигации меню, используя списки, если это возможно. Theyre семантически точно (меню представляет собой список, в конце концов) и CSS делает их легко укладывать. Давайте посмотрим, как список навигация работает под капотом. Жестокое использовать Dreamweaver в Просмотреть код, но вы можете следить вместе с прямой текстовый редактор, если хотите.

Шаг 1 - Создание списка

Эта часть очень просто: Создайте новый HTML-файл, не шаблон, а просто типа элементов в вашем меню. Заключите каждый элемент списка с

У вас должно получиться что-то вроде этого: <ul>
  <li>Home</li>
  <li>Products</li>
  <li>Support</li>
  <li>Team</li>
  <li>Contact Us</li>
</ul>

Тем не менее, вы хотите, чтобы убедиться, что каждый элемент ссылки на что-то она станет важным, как мы строим CSS. Таким образом, добавить ссылки на символ #, чтобы создать что-то вроде этого:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Team</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

Шаг 2 - Ссылка на внешний файл CSS

В панели CSS, нажмите Создать правило CSS кнопки в нижней части панели (документ с символом плюс). Создать ID стиль с именем navlist и выбрать создание нового файла таблицы стилей. В появившемся диалоговом окне имя файла style.css . Его всегда лучше использовать внешнюю таблицу стилей, даже если экспериментировать.

Мы не должны определить что-либо с помощью диалогового окна, которое появится, так что просто нажмите кнопку ОК. Вы будете создали стилей с основной, пустое определение стиля. Посмотреть его, нажав на style.css чуть выше вашего документа, рядом с выделенным исходного кода слова.

Шаг 3 - Добавьте несколько основных правил CSS

Мы должны указать, что список ID navlist, чтобы мы могли его цель. В HTML, добавить id=navlist к

Теперь мы сможем приступить к работе по CSS. Вы будете вероятно, захотите изменить цвет фона, ширину, границы и отступы, чтобы начать, и вы будете хотеть думать о том, как вы строите CSS селекторы. Если вы используете #navlist li , вы будете получить доступ к элементу списка в списке навигации. Более того, целевая #navlist li a целевому ссылки в вашем списке. Добавление прокладкой для них делает большую цель, при добавлении прокладкой для элемента списка не будет. Попробуйте:

# {Navlist

Список стиле типа: нет;

маржа: 0;

обивка: 0;

Ширина: 200px;

}

# {Navlist ли

поле: 5px;

}

# Navlist ли {

фонового цвета: # 222;

цвет: # еее;

обивка: 10px;

текст-отделка: нет;

Дисплей: блок;

}


#navlist li

Наконец,

Шаг 4 - Добавьте немного парят CSS правила

Чтобы сделать список более реактивной, добавить правило наведении:

# Navlist ли: наведите {

фонового цвета: # 444;

цвет: # EE2;

}

Шаг 5 - Маркировка активную страницу

Его обычным явлением в этих видах страниц, чтобы отметить активную страницу с подвижными стиль класса, например, класс = активный, который помещается на текущей странице. Тем не менее, это означает, что блок меню отличается на каждой странице. Его удобнее теги каждое звено в HTML с другого класса, а затем добавить страницу конкретного класса тело тега, и поймать их всех одно правило CSS. Что-то вроде этого:

<body id="bodypage1">

  <li class="page1"><a href="#">Home</a></li>

  <li class="page2"><a href="#">Products</a></li>

Соответствующий CSS:

# Bodypage1. Стр.1, # bodypage2. Стр. 2, # bodypage3. Страница3, # bodypage4. Page4, # bodypage5. Page5 {

фонового цвета: # 555;

цвет: # EE2;

}

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

Есть многие, многие другие трюки, но вот и все пока. Как вы, возможно, видели в изучение видео-учебник CSS, чтобы сделать список горизонтальным, все что вам нужно это display: inline применительно к li элемент, поэтому исследовать это, если хотите. В следующий раз, ну посмотрите на некоторые более экзотические варианты.

готовой product.png

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: