Здравствуйте. В данном уроке мы создадим небольшой сайт, который прокручивается вниз до каждой секции, когда в меню нажимают соответствующий навигационный элемент. Нарезка изображений из подготовленного PSD файла. Прежде чем начать, создайте новую папку под названием "template". В папке "template" создайте еще две папки под названиеми "img" и "files". Затем распакуйте из архива подготовленный PSD файл и откройте его в Photoshop. PSD должен выглядет так: Подготовленный PSD файл Подготовленный PSD файл Нам нужно нарезать 3 изображения из PSD файла, которые будут использоваться для подготовки демонстрации. Все остальные операции будут сделаны с помощью CSS. З изображения - это фон, заголовок и графический разделитель секций. С помощью инструмента прямоугольного выделения выделите каждый элемент и сохраните его в папке "img". Каждому изображению надо задать прозрачный фон и назвать их соответственно "bg.gif", "title.png" и "top.png". Нарезка изображений Нарезка изображений Создание HTML разметки В вашей папке "template" создайте пустой HTML файл, а в папке "files" - пустой CSS файл. Затем откройте их в своем любимом редакторе. В HTML файле начните делать разметку, которая выглядит так: <DIV id=&qout;top&qout;> <DIV id=&qout;homepage&qout;> </DIV><!--homepage--> <DIV id=&qout;about&qout;> </DIV><!--about--> <DIV class=&qout;top&qout;> </DIV><!--top--> <DIV id=&qout;gallery&qout;> </DIV><!--gallery--> <DIV class=&qout;top&qout;> </DIV><!--top--> <DIV id=&qout;portfolio&qout;> </DIV><!--portfolio--> <DIV class=&qout;top&qout;> </DIV><!--top--> <DIV id=&qout;contact&qout;> </DIV><!--contact--> <DIV class=&qout;top&qout;> </DIV><!--top--> </DIV><!--container--> Рассмотрим разметку подробно. DIV Top - контейнер, который содержит все элементы шаблона. Когда происходит нажатие на надпись "Вернуться на главную", которая расположена под каждой секцией, анимация прокручивает страницу вверх до начала этого контейнера. DIV Title - это просто тэг div, который содержит изображение заглавия страницы. DIV Navigation - в этом тэге div размещена вся навигация по странице. DIV Homepage, About, Gallery, Portfolio и Contact - эти тэги div представляют все секции, до которых анимация прокручивает страницу при нажатии соответствующего элемента навигаци. Class Top - класс логически отделяет секции друг от друга и содержит графический разделитель и ссылку "Вернуться на главную". HTML разметка HTML разметка Добавляем наши элементы. Вставьте ваше изображение title.png в тэг div "Title". <DIV id="title"> <IMG src="./img/title.png" alt="Анимированная jQuery прокрутка"> </DIV><!--title--> В тэге "Navigation" создайте ненумерованный список для элементов навигации. Каждая ссылка долджна содержать класс "Scroll", который необходим для работы анимации прокрутки. Также обратите внимание на ссылки каждого элемента навигации. Ссылки должны указывать на тэги div, которые используются в коде HTML страницы. <DIV id="navigation"> <UL> <LI><A href="./index.html#about" class="scroll">Обо мне</A></LI> <LI><A href="./index.html#gallery" class="scroll">Галерея</A></LI> <LI><A href="./index.html#portfolio" class="scroll">Портфолио</A></LI> <LI><A href="./index.html#contact" class="scroll">Связаться со мной</A></LI> </UL> </DIV><!--navigation--> В каждой секции "Homepage, About, Gallery, Portfolio и Contact" вставьте тэг Н1, который содержит заголовок секции. Также в каждый тэг Н1 добавьте описание секции, которое размещено в классе span. В классах "Top" добавьте тэги P, которые содержат фразу "Вернуться в главный раздел", и добавьте ссылку на верх страницы. Обязательно добавьте класс "Scroll" к ссылке, без него jQuery не работает. <DIV id="homepage"> <H1>Главная <BR> <SPAN class="description">Это главный раздел</SPAN></H1> </DIV><!--homepage--> <DIV id="about"> <H1>Обо мне <BR> <SPAN class="description">Это страница обо мне</SPAN></H1> </DIV><!--about--> <DIV class="top"> <P><A href="./index.html#top" class="scroll">Вернуться в главный раздел</A></P> </DIV><!--top--> <DIV id="gallery"> <H1>Галерея <BR> <SPAN class="description">Это страница галереи</SPAN></H1> </DIV><!--gallery--> <DIV class="top"> <P><A href="./index.html#top" class="scroll">Вернуться в главный раздел</A></P> </DIV><!--top--> <DIV id="portfolio"> <H1>Портфолио <BR> <SPAN class="description">Это страница с портфолио</SPAN></H1> </DIV><!--portfolio--> <DIV class="top"> <P><A href="./index.html#top" class="scroll">Вернуться в главный раздел</A></P> </DIV><!--top--> <DIV id="contact"> <H1>Контакты <BR> <SPAN class="description">Это страница с контактами</SPAN></H1> </DIV><!--contact--> <DIV class="top"> <P><A href="./index.html#top" class="scroll">Вернуться в главный раздел</A></P> </DIV><!--top--> Добавляем CSS CSS файл style.css для всех наших элементов выглядит так: body { background-image: url(../img/bg.gif); background-repeat: repeat-x; background-color: #FFFFFF; margin: 0px; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; } #top { width: 950px; margin-top: 50px; margin-right: auto; margin-bottom: auto; margin-left: auto; } #title { margin: auto; width: 608px; clear: both; } #navigation { float:left; width:100%; overflow:hidden; position:relative; margin-top: 20px; margin-bottom: 20px; } #navigation ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } #navigation ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } #navigation ul li a { display:block; margin:0 0 0 1px; padding:3px 10px; color:#666666; text-decoration:none; line-height:1.3em; } #navigation ul li a:hover { color:#000000; } #navigation ul li a.active, #navigation ul li a.active:hover { color:#000000; font-weight:bold; } #homepage { float: left; width: 950px; height: 800px; } #about, #gallery, #portfolio, #contact { float: left; width: 950px; height: 650px; } h1 { color: #5a5a5a; font-size: 24px; font-weight: normal; margin: 0px; padding: 0px; } span.description { color: #9f9f9f; font-size: 12px; } .top { background-image: url(../img/top.png); background-repeat: no-repeat; float: left; height: 48px; width: 950px; padding-bottom: 35px; background-position: bottom; margin-bottom: 20px; } .top p { text-align: center; color: #999999; font-size: 10px; } a:link { color: #666666; } a:visited { color: #666666; } a:hover { color: #000000; } a:active { color: #666666; } Добавляем jQuery Загружаем последнюю версию бибилиотеки jQuery с сайта jQuery, сохраняем ее в папку "files". Затем нужно создать текстовый файл в папке "files" и назвать его "Scroll.JS". В файл "Scroll.JS" нужно записать следующий код: $(document).ready(function(){ $(".scroll").click(function(event){ //Перехватываем обработку по умолчанию события нажатия мыши event.preventDefault(); //Получаем полный url - например, mysitecom/index.htm#home var full_url = this.href; //Разделяем url по символу # и получаем имя целевой секции - home в адресе mysitecom/index.htm#home var parts = full_url.split("#"); var trgt = parts[1]; //Получаем смещение сверху для целевой секции var target_offset = $("#"+trgt).offset(); var target_top = target_offset.top; //Переходим в целевую секцию установкой позиции прокрутки страницы в позицию целевой секции $('html, body').animate({scrollTop:target_top}, 500); }); }); Затем открывайте свой HTML файл в браузере и проверяйте, как все работает. Надеюсь, что урок Вам понравился.