X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Свободный доступ Премиум

Доступ всей нашей библиотеке Премиум Статьи концентратор, файлы проекта и первые 10% от каждого Учебник-Video из Интернет библиотека Учебник .

Создайте свой бесплатный аккаунт!

Dreamweaver CS5: Строительство навигации по меню из списка
Перевод Google Translate

При построении лучшей практики сайте, Вы должны построить свой навигации меню, используя списки, если это возможно. 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

Iain Anderson

Iain Anderson | Articles by this author

Iain Anderson is an editor, animator, designer, developer and Apple Certified Trainer based in Brisbane, Australia. He has taught privately and in tertiary institutions, and has freelanced for Microsoft and the Queensland Government. Comfortable with anything from Quartz Composer to Second Life and Final Cut Pro to Adobe Creative Suite, he has laid out books, booklets, brochures and business cards; retouched magazine covers and product packaging, shot and edited short films and animated for HD broadcast TV, film festivals and for the web.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link