Кодирование портфолио Bootstrap с использованием Twitter Bootstrap, HTML5 и CSS3
Здравствуйте, уважаемые друзья и гости блога atready.ru! В первой части этого урока мы с Вами разработали веб-сайт (портфолио) в Photoshop. Теперь мы собираемся закодировать его с помощью Twitter Bootstrap, отличного инструмента веб-дизайна, который помогает ускорить процесс разработки веб-сайта. В этом уроке я покажу вам, как нарезать изображения для Интернета в Photoshop, как использовать сетку Bootstrap 960 для структурирования макета и как настроить вкладки Bootstrap Togglable, чтобы сделать область портфолио функциональной. Мы также рассмотрим некоторые новые свойства CSS3, такие как переход и поворот. Давайте начнем? Поехали …
Ресурсы
Вот ресурсы, которые мы будем использовать для создания сайта:
- Twitter Bootstrap
- JQuery
- Приложение Gradient (платное Mac-приложение для создания градиентов CSS3; также существует бесплатная онлайн-альтернатива под названием Gradient Generator)
- Практический Курс по HTML и CSS3. Тренажер, поддержка, учебный макет.
Вам также понадобится редактор кода, чтобы написать код для сайта. Я недавно начал использовать Sublime Text, и я до сих пор очень доволен этим. Вы можете получить его для любой операционной системы, и сообщество разработало множество плагинов, расширяющих его функциональность.
Часть 1 – Нарезка изображений
Шаг 1: Настройка структуры папок
Прежде чем начать нарезку изображений, создайте новую папку для сайта. Затем добавьте 3 подпапки: «css», «images» и «js».
Шаг 2: Нарезка логотипа
Откройте документ Photoshop по дизайну веб-сайта и найдите группу «логотип». Щелкните правой кнопкой мыши по нему и выберите «Дублировать группу». Из всплывающего окна установите целевой документ на «Новый». Фотошоп откроет новый документ с прозрачным фоном и дублированной группой «логотип».
Теперь нам нужно обрезать логотип до его точных размеров. Мы могли бы использовать Crop Tool для достижения этой цели. Однако в Photoshop есть функция «Trim», которая автоматически подрезает нам изображение. Перейдите в Image> Trim, убедитесь, что выбран «Transparent Pixels» и нажмите OK.
Чтобы сохранить изображение, выберите «Файл»> «Сохранить для Web и устройств», выберите формат PNG-24 и сохраните изображение как «logo.png» в папке «images» вашего сайта.
Используйте технику, описанную выше, чтобы нарезать следующие изображения:
верхнее изображение отзыва (без белой рамки; мы создадим его с помощью CSS);
портфолио изображений (скрыть все стили перед сохранением изображений; мы создадим обводку и внешние эффекты свечения в CSS); Я сохранил все изображения портфолио в новой папке с названием «портфолио» внутри папки «изображения»;
фотография «о» (опять же, сохраните это изображение без границ).
Вот краткие шаги техники, которую мы использовали для нарезки логотипа:
Щелкните правой кнопкой мыши слой / группу, которую вы хотите нарезать, и выберите «Дублировать слой»;
Из всплывающего окна установите конечный документ на «Новый» и нажмите «ОК»;
Обрежьте изображение, выбрав Image> Trim;
Сохраните изображение, выбрав «Файл»> «Сохранить для Web и устройств».
Шаг 3: Нарезка основного фона
Для нарезки фоновых изображений мы будем использовать немного другую технику, которую я продемонстрирую на основном фоне. Выберите инструмент Rectangular Marquee Tool (M), удерживайте нажатой клавишу Shift и создайте выделение квадрата на сером текстурированном фоне области свидетельства.
Чтобы скопировать изображение без выбора фонового слоя, с которого мы копируем, мы будем использовать функцию «Копировать слитно». Перейдите в «Правка»> «Копировать объединенный» или используйте сочетание клавиш Ctrl / Cmd + Shift + C. Используя эту функцию, Photoshop временно сделает вид, что все слои объединены, и скопирует выбранную область.
Откройте новый документ в Photoshop (Ctrl / Cmd + N) и вставьте изображение (Ctrl / Cmd + V).
Примечание. Когда вы копируете изображение в буфер обмена и открываете новый документ, Photoshop будет использовать размеры этого изображения для ширины и высоты нового документа.
Выберите «Файл»> «Сохранить для Web и устройств» и сохраните изображение в формате JPEG.
Шаг 4: Нарезка всех остальных фоновых изображений
Используйте технику, которую я продемонстрировал на предыдущем шаге, чтобы нарезать следующие изображения:
фон заголовка (включая темную полосу вверху);
синий фон области портфолио (это будет наше вторичное фоновое изображение);
фон области авторских прав;
Вот краткое описание техники нарезки из предыдущего шага:
Используйте Rectangular Marquee Tool (M), чтобы создать выделение области, которую вы хотите сохранить;
Перейдите в «Правка»> «Копировать объединенный» (Ctrl / Cmd + Shift + N);
Создайте новый документ и вставьте выделенную область (Ctrl / Cmd + V);
Сохраните изображение, выбрав «Файл»> «Сохранить для Web и устройств».
Ниже Вы можете увидеть скриншот всех моих изображений.
Часть 2 – HTML разметка
Теперь, когда мы сохранили все нужные нам изображения, пришло время написать разметку для нашего сайта.
Шаг 5: Настройка HTML-документа
Откройте ваш любимый редактор кода (я использую Sublime Text ) и создайте новый файл HTML. Сохраните его как «index.html» в корне папки вашего сайта. Затем скопируйте и вставьте базовую структуру документа HTML5.
<!DOCTYPE html> <html> <head> <title>Bootstrap Folio</title> </head> <body> </body> </html>
Шаг 6: Разметка заголовка
Давайте начнем писать HTML-разметку для заголовка. Создайте новый div с идентификатором «header». Мы будем использовать этот div для добавления фонового изображения в CSS.
Создайте новый div с классом «контейнер». Таблица стилей Bootstrap, которую мы будем использовать, включает в себя стили для класса «контейнер», который устанавливает ширину содержимого в 940 пикселей и центрирует его.
Добавьте тег H1 с идентификатором «логотип». Затем поместите в него тег привязки с названием вашего сайта. Позже мы заменим текст на изображение логотипа с помощью CSS. Тем не менее, нам все еще нужно написать имя веб-сайта внутри тега <h1>, чтобы его могли прочитать роботы.
Затем создайте неупорядоченный список с классом «навигация» и 4 элементами списка, по одному для каждого элемента навигации. Затем поместите тег привязки внутри каждого тега списка с названием ваших элементов навигации. Также добавьте класс «активный» в первый элемент списка. Мы будем использовать CSS, чтобы добавить границу под этим элементом.
Обратите внимание, что я добавил комментарий перед div «header», чтобы указать начало этой области, а также комментарий для каждого заключительного div. Это помогает сохранить код организованным и легко читаемым для людей.
<!-- HEADER -->
<div id="header">
<div class="container">
<h1 id="logo"><a href="index.html">Bootstrap Folio</a></h1>
<ul class="navigation">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul><!--end navigation-->
</div><!-- end container -->
</div><!--end header--> Шаг 7: Лучший отзыв
Область «верхнего отзыва» имеет две колонки: одну для фотографии и другую для фактического отзыва. Для структурирования столбцов мы будем использовать Bootstrap, который основан на сетке из 12 столбцов 960, которую мы использовали для разработки веб-сайта в Photoshop.
Мы добавим файл Bootstrap CSS в третьей части этого урока. Однако нам нужно использовать соглашения об именах Bootstrap для разметки HTML, чтобы обеспечить правильную работу CSS.
HTML-структура Bootstrap для столбцов выглядит следующим образом:
<div class="row"> <div class="span2">...</div> <div class="span10">...</div> </div>
Класс «span2» представляет 2 столбца, а класс «span10» представляет 10 столбцов. Очень просто, не правда ли? Следует помнить одну вещь: общее количество столбцов, которые находятся внутри div «row», всегда должно быть 12 (количество столбцов сетки 960).
Теперь давайте добавим верхний отзыв. Создайте новый div с идентификатором «top-testimonial» и классом «container».
Примечание. Если вам интересно, почему мы добавили класс «контейнера» в тот же div, что и идентификатор «top-testimonial» (не внутри него, как мы это делали для раздела заголовка), то это потому, что область отзывов будет использовать фон тела (который растягивается по всей странице), в отличие от области заголовка, которая будет иметь другой фон, который должен растягиваться по всей ширине браузера. Если бы мы добавили класс «контейнера» к тому же элементу div, что и идентификатор «заголовка», фон был бы обрезан по ширине «контейнера». Если в данный момент это не имеет никакого смысла, не волнуйтесь, вы поймете, когда мы перейдем к части CSS.
Создайте div с классом «row». Затем создайте еще два элемента div для столбцов: один с классом «span2» для изображения, а другой с классом «span10» для отзыва.
<!--TOP TESTIMONIAL-->
<div id="top-testimonial" class="container">
<div class="row">
<div class="span2">
</div>
<div class="span10">
</div><!--end span10-->
</div><!--end row-->
</div><!-- end top-testimonial --> Добавьте тег изображения внутри класса «span2» вместе с источником к вашей фотографии. Не забудьте добавить атрибут «alt», чтобы описать изображение для слабовидящих людей, которые просматривают Интернет с помощью программы чтения с экрана.
Также добавьте класс «content-box» рядом с классом «span2». Мы будем использовать этот класс для стилизации фона фотографии и отзыва.
<div class="span2 content-box"> <img class="testimonial-photo" src="images/testimonial-photo.png" alt="Client photo" /> </div>
Добавьте новый div с классами «testimonial» и «content-box» внутри div «span10». Затем добавьте абзац текста для содержания отзыва.
Создайте новый div с классом «testimonial-info» с абзацем и тегом привязки для имени клиента и веб-сайта. Мы будем использовать этот div для всплытия текста справа.
Создайте новый тег привязки для кнопки «Больше отзывов» за пределами раздела «Рекомендации» с помощью классов «кнопка» и «маленький». Класс «button» будет содержать информацию о цвете и шрифте, а класс «small» будет содержать размер шрифта и информацию о заполнении кнопки. Таким образом, мы можем создавать классы для кнопок разных размеров (например, small, large, x-large), но использовать один и тот же класс «button» для каждого из них.
<div id="top-testimonial" class="container">
<div class="row">
<div class="span2 content-box">
<img class="testimonial-photo" src="images/testimonial-photo.png" alt="Client photo" />
</div>
<div class="span10">
<div class="testimonial content-box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque risus ante, mollis et suscipit ultricies, ultricies vel justo. Duis varius erat nibh, in imperdiet nibh.</p>
<div class="testimonial-info">
<p>Client Name</p>
<a href="#">www.webmaster-deals.com</a>
</div><!--end testimonialInfo-->
</div><!--end testimonial-->
<a href="#" class="button small">More Testimonials</a>
</div><!--end span10-->
</div><!--end row-->
</div><!-- end top-testimonial --> Шаг 8: Портфельная навигация
Напишите основную структуру HTML для области портфолио. Давайте рассмотрим, для чего будет использоваться каждый из этих тегов:
ID «портфолио»: этот div будет содержать фоновое изображение;
Класс «контейнер» будет держать контент в центре;
Класс «портфолио»: мы добавим миниатюры портфолио в этом разделе;
Класс «tab-content»: будет содержать детали для каждого проекта; этот класс необходим для скрипта Bootstrap Tab, который мы будем использовать позже, чтобы сделать область портфеля функциональной (когда вы щелкнете по миниатюре, содержимое внизу будет обновлено, чтобы представить больше информации о выбранном проекте).
<div id="portfolio">
<div class="container">
<!-- PORTFOLIO IMAGES -->
<div class="portfolio-box">
<!-- SINGLE PROJECT DETAILS -->
<div class="tab-content">
</div><!-- end tab-content -->
</div><!-- end portfolio-box -->
</div><!--end container-->
</div><!--end portfolio--> Добавьте заголовок для области портфолио внутри «контейнера» div.
Теперь нам нужно добавить портфолио навигации. Создайте новый неупорядоченный список с классом «навигация». Добавьте несколько тегов списка, каждый с вложенным тегом привязки. Затем добавьте класс «активный» в первый элемент списка. Мы будем использовать CSS, чтобы добавить нижнюю границу для этого элемента навигации.
<div id="portfolio">
<div class="container">
<h2>Portfolio</h2>
<ul class="navigation">
<li class="active"><a href=#>All</a></li>
<li><a href=#>Web Design</a></li>
<li><a href=#>Logo Design</a></li>
<li><a href=#>CMS</a></li>
</ul><!-- end portfolio-nav -->
<!-- PORTFOLIO IMAGES -->
<div class="portfolio-box">
<!-- SINGLE PROJECT DETAILS -->
<div class="tab-content">
</div><!-- end tab-content -->
</div><!-- end portfolio-box -->
</div><!--end container-->
</div><!--end portfolio--> Шаг 9: Миниатюры портфолио
Теперь мы добавим миниатюры для элементов портфолио. Создайте новый неупорядоченный список с классом «row» внутри div «portfolio-box». Добавьте 8 тегов списка, каждый с тегом привязки внутри. Затем поместите каждое из изображений вашего портфолио в теги <img> внутри тегов привязки. Добавьте класс «row3» к каждому элементу списка. Затем добавьте второй класс «активный» к первому элементу списка. Это будет выбранный по умолчанию проект при загрузке сайта.
На предыдущем этапе я упомянул, что мы будем использовать миниатюры портфолио, чтобы активировать подробный контент каждого проекта. Мы собираемся сделать это с помощью скрипта Bootstrap Tab. Чтобы скрипт работал (мы добавим его позже), нам нужно добавить атрибут «data-toggle» со значением «pill» для каждого тега привязки.
Теперь нам нужно связать теги привязки с divами контента, которые они активируют. Для этого мы используем атрибут href со значениями # project1, # project2 и т. Д. Когда мы добавим содержимое для каждого эскиза портфолио, мы применим эти идентификаторы к элементам содержимого.
Примечание. Сценарий Bootstrap Tab поддерживает два типа вкладок: таблетки (то, что мы используем) и вкладки (чтобы использовать вкладки, просто замените значение «pill» атрибута «data-toggle» на «tab»). Функция этих двух значений одинакова. Единственное отличие заключается в стиле (таблетки отображаются в виде кнопок, а вкладки отображаются в виде, ну … вкладок). Мы собираемся переписать стиль Bootstrap для таблеток, потому что мы хотим использовать изображения, а не кнопки.
<div id="portfolio">
<div class="container">
...
<!-- PORTFOLIO IMAGES -->
<div class="portfolio-box">
<ul class="row">
<li class="active span3">
<a href="#project1" data-toggle="pill"><img src="images/portfolio/project1.jpg" alt="Portfolio Image" /></a>
</li>
<li class="span3">
<a href="#project2" data-toggle="pill"><img src="images/portfolio/project2.jpg" alt="Portfolio Image" /></a>
</li>
<li class="span3">
<a href="#project3" data-toggle="pill"><img src="images/portfolio/project3.jpg" alt="Portfolio Image" /></a>
</li>
<li class="span3">
<a href="#project4" data-toggle="pill"><img src="images/portfolio/project4.jpg" alt="Portfolio Image" /></a>
</li>
<li class="span3">
<a href="#project5" data-toggle="pill"><img src="images/portfolio/project5.jpg" alt="Portfolio Image" /></a>
</li>
<li class="span3">
<a href="#project6" data-toggle="pill"><img src="images/portfolio/project6.jpg" alt="Portfolio Image" /></a>
</li>
<li class="span3">
<a href="#project7" data-toggle="pill"><img src="images/portfolio/project7.jpg" alt="Portfolio Image" /></a>
</li>
<li class="span3">
<a href="#project8" data-toggle="pill"><img src="images/portfolio/project8.jpg" alt="Portfolio Image" /></a>
</li>
</ul>
<!-- SINGLE PROJECT DETAILS -->
<div class="tab-content">
</div><!-- end tab-content -->
</div><!-- end portfolio-box -->
</div><!--end container-->
</div><!--end portfolio--> Шаг 10: Детали проекта
На предыдущем этапе мы добавили 8 миниатюр портфолио. Это означает, что нам нужно 8 новых div с подробным содержанием для каждого эскиза портфолио.
Создайте новый div внутри div «tab-content» с классами «tab-pane fade» и идентификатором «project1». Класс «затухания» добавит эффект затухания при переключении с одного элемента портфеля на другой с помощью сценария Bootstrap Transitions. Идентификатор – это связь между триггером (миниатюрой) и контентом. Мы должны использовать упомянутые классы, иначе скрипты Bootstrap не будут работать.
Создайте два столбца внутри div «tab-pane»: один с классом «span5», а другой с классом «span7».
Добавьте заголовок, пару абзацев текста и метку привязки с классами «большая кнопка» внутри левого столбца (span5). Затем поместите увеличенное изображение элемента портфолио в правом столбце.
Дублируйте всю «панель-вкладку» div 7 раз. Убедитесь, что вы обновили идентификатор «# project1» для каждого элемента, а также для содержимого и изображения. Ниже я поместил только 3 деления в качестве примера, чтобы не повторять слишком много кода в руководстве.
Для первого div «tab-pane» нам нужно добавить еще два класса: «active» и «in» (опять же, это соглашения об именах, которые использует Bootstrap). Это гарантирует, что первый контентный div будет активным и видимым при загрузке сайта.
Это все, что нам нужно сделать сейчас. Когда мы добавим сценарии Bootstrap позже, область портфолио будет работать как положено.
<div id="portfolio">
<div class="container">
...
<!-- PORTFOLIO IMAGES -->
<div class="portfolio-box">
<ul class="container">
...
</ul>
<!-- SINGLE PROJECT DETAILS -->
<div class="tab-content">
<div class="tab-pane active fade in" id="project1">
<div class="row">
<div class="span5">
<h3>Projects Touch App</h3>
<p>Projects Touch is an iOS application that helps freelancers manage their projects. I created the user interface for the application and a short video to demonstrate its interactivity.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit vulputate arcu a pharetra. Nullam eget erat purus. Duis magna dolor, rhoncus mollis ut, lacinia eu nisi. Ut facilisis dictum diam.</p>
<a href="#" class="large button">Visit Website</a>
</div><!-- end span5 -->
<div class="span7">
<img src="images/portfolio/project1-large.png" alt="Projects Touch App UI" />
</div><!-- end span7 -->
</div><!-- end row -->
</div><!-- end project -->
<div class="tab-pane fade" id="project2">
<div class="row">
<div class="span5">
<h3>Leather Textured Web Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum tellus mi. Etiam ut nunc sed leo mattis feugiat eu sed dolor. Maecenas nec ullamcorper turpis. Mauris pretium porttitor risus ornare. <p>
<p>Morbi purus turpis, porttitor et convallis sit amet, tristique at eros. Ut a nunc et eros posuere aliquet nec vitae lacus. Nulla et lectus non elit consequat imperdiet. Ut fringilla sodales nisl ac eleifend. Morbi mattis porta nisi at hendrerit.</p>
<a href="#" class="large button">Visit Website</a>
</div><!-- end span5 -->
<div class="span7">
<img src="images/portfolio/project2-large.png" alt="Leather Textured Web Design" />
</div><!-- end span7 -->
</div><!-- end row -->
</div><!-- end project -->
<div class="tab-pane fade" id="project3">
<div class="row">
<div class="span5">
<h3>Projects Touch App Timer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum tellus mi. Etiam ut nunc sed leo mattis feugiat eu sed dolor. Maecenas nec ullamcorper turpis. Mauris pretium porttitor risus ornare. <p>
<p>Morbi purus turpis, porttitor et convallis sit amet, tristique at eros. Ut a nunc et eros posuere aliquet nec vitae lacus. Nulla et lectus non elit consequat imperdiet. Ut fringilla sodales nisl ac eleifend. Morbi mattis porta nisi at hendrerit.</p>
<a href="#" class="large button">Visit Website</a>
</div><!-- end span5 -->
<div class="span7">
<img src="images/portfolio/project3-large.png" alt="Projects Touch App UI" />
</div><!-- end span7 -->
</div><!-- end row -->
</div><!-- end project -->
...
</div><!-- end tab-content -->
</div><!-- end portfolio-box -->
</div><!--end container-->
</div><!--end portfolio--> Шаг 11: Отзывы
Добавьте базовую структуру HTML для столбцов «о» и «отзывы». Я уже объяснил, что представляют собой все эти классы, поэтому я не буду их повторять.
<div id="about" class="container">
<div class="row">
<div class="span4">
</div><!-- end span4 -->
<div class="span8">
</div><!-- end span8 -->
</div><!-- end row -->
</div><!-- end about --> Добавьте заголовок для области «About» внутри класса «span4».
Создайте новый div с классами «content-box» и «rotate». Внутри этого div создайте новый с классами «content-box» и «about-image». Затем добавьте изображение для области. Мы добавили все эти div и классы, чтобы создать эффект сложенных фотографий из дизайна, используя только CSS3. Я объясню это подробно, когда мы приступим к написанию CSS.
Добавьте абзац текста с содержанием для области «о». Мы обернем этот абзац вокруг изображения с помощью CSS.
<div class="span4">
<h2>About</h2>
<div class="content-box rotate">
<div class="content-box about-image">
<img src="images/about-photo.jpg" alt="About photo" />
</div>
</div>
<p>Hello. My name is Ionut Ciursa. I am a freelance web designer currently living and studying in Coventry, United Kingdom. Pulvinar congue elit, male suada consequat lorem dignissim id. Vestibulum lacinia facilisis massa, vitae blandit odio sollicitudin ac. Curabitur sit amet tortor dolor dictum.</p>
</div><!-- end span4 --> Добавьте заголовок для области «отзывы» внутри div «span8». Создайте новый div с классами «testimonial» и «content-box». Затем добавьте те же теги, которые вы использовали для верхнего отзыва (один абзац текста, div с классом «testimonial-info», еще один абзац для имени клиента и тег привязки для их веб-сайта).
Создайте еще один отзыв, продублировав «отзыв» div.
<div class="span8">
<h2>Testimonials</h2>
<div class="testimonial content-box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque risus ante, mollis et suscipit ultricies, ultricies vel justo. Duis varius erat nibh, in imperdiet nibh.</p>
<div class="testimonial-info">
<p>Client Name</p>
<a href="#">www.webmaster-deals.com</a>
</div><!--end testimonial-info-->
</div><!--end testimonial-->
<div class="testimonial content-box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque risus ante, mollis et suscipit ultricies, ultricies vel justo. Duis varius erat nibh, in imperdiet nibh.</p>
<div class="testimonial-info">
<p>Client Name</p>
<a href="#">www.webmaster-deals.com</a>
</div><!--end testimonial-info-->
</div><!--end testimonial-->
</div><!-- end span8 --> Шаг 12: Нижний колонтитул
Напишите HTML-разметку для столбцов нижнего колонтитула. Опять же, мы поместили div «container» внутри div «footer», потому что div «footer» будет содержать фон, который должен растягиваться по всей ширине, а div «container» будет держать содержимое в центре.
<!-- FOOTER -->
<div id="footer">
<div class="container">
<div class="row">
<div class="span5" id="twitter-feed">
</div><!--end span5-->
<div class="span7" id="contact">
</div><!--end span7-->
</div><!-- end row -->
</div><!--end container-->
</div><!--end footer--> Добавьте идентификатор «twitter-feed» к тому же div, к которому применяется класс «span5». Это поможет нам нацелить и стилизовать только элементы, которые находятся внутри этого div.
Добавьте заголовок для области канала Twitter и метку привязки с текстом «Follow me & raquo;» (примечание: «& raquo;» – это HTML-код для правильных двойных угловых кавычек; вы можете найти все HTML-символы и символы на сайт ascii.cl ).
Создайте новый div с классом «твиты» и поместите в него три абзаца текста.
<div class="span5" id="twitter-feed">
<h2>Twitter Feed</h2>
<a href="http://twitter.com/ionutciursa">Follow me »</a>
<div class="tweets">
<p>Photoshop CS6 is amazing. Now I can create dashed lines and change the color of multiple shape layers at the same time. Huge time savers.</p>
<p>Photoshop CS6 Beta is available for free download. Get your copy from Adobe Labs.</p>
<p>Wunderkit, a beautiful new productivity tool is about to launch. Visit their landing page. It is just gorgeous.</p>
</div><!--end tweets-->
</div><!--end span5--> Добавьте идентификатор «контакт» в div с классом «span7». Затем добавьте заголовок для области контакта.
Создайте новый тег <form> с методом «post». Добавьте два тега <input> с классом «content-box», типом «text», а также атрибутами name и placeholder. Атрибут placeholder является новым в HTML5 и избавляет нас от необходимости создавать тот же эффект с помощью JavaScript, как мы привыкли.
Добавьте тег <textarea> с классом «content-box», именем «message» и атрибутом-заполнителем. Тег <textarea> не является самозакрывающимся (как и теги <input>), поэтому нам нужно добавить </ textarea>, чтобы закрыть его.
Теперь мы добавим кнопку отправки для формы. Создайте новый тег <input> с типом, установленным на «submit» и именем. Затем добавьте атрибут «значение» к этому тегу. Независимо от того, какую строку вы передадите атрибуту «value», она будет отображена на кнопке отправки.
<div class="span7" id="contact">
<h2>Contact</h2>
<form method="post" action="#">
<input class="content-box" type="text" name="name" placeholder="Name" />
<input class="content-box" type="text" name="email" placeholder="Email" />
<textarea class="content-box" name="message" placeholder="Message"></textarea>
<input type="submit" name="send" value="Send" />
</form>
</div><!--end span7--> Шаг 13: Область авторского права
Область авторских прав довольно проста, содержит только один абзац текста. Создайте новый div с идентификатором «copyright». Мы применим фоновое изображение к этому div. Создайте еще один div с классом «container» и добавьте в него абзац текста.
Примечание. HTML-код «& copy;» представляет собой символ авторского права.
<!-- COPYRIGHT -->
<div id="copyright">
<div class="container">
<p>Copyright © Webmaster Deals 2012.</p>
</div><!--end container-->
</div><!-- end copyright --> Шаг 14: Проверка
Прежде чем двигаться дальше, мы должны убедиться, что разметка соответствует HTML5.
Скопируйте весь HTML-код, перейдите на веб-сайт W3C Validator , щелкните вкладку «Проверка по прямому вводу», вставьте разметку и нажмите «Проверить». Если это не подтверждает, проверьте ошибки и исправьте их в своем коде.
Часть 3. Добавление таблиц стилей и скриптов
Шаг 15: Загрузите и создайте необходимые файлы
Перейдите на сайт Twitter Bootstrap и загрузите последнюю версию Bootstrap. Разархивируйте файл и скопируйте файл «bootstrap.min.css» из папки «css» в ту же папку на своем веб-сайте.
Теперь перейдите на страницу плагинов JavaScript в Bootstrap и загрузите плагины «Переключаемые вкладки» и «Переходы». Сохраните эти файлы в папку «js».
Затем вам нужно скачать последнюю версию jQuery, чтобы плагины Bootstrap работали.
Откройте новый документ в редакторе кода и сохраните его как «style.css» в папке CSS.
Теперь, когда у вас есть все необходимые файлы, на следующем шаге мы свяжем их с HTML-документом.
Шаг 16. Связывание таблиц стилей и скриптов с файлом HTML
Поместите следующие строки кода в <head> вашего документа. Давайте рассмотрим, что делают эти строки:
первые две ссылки предназначены для таблицы стилей Bootstrap и файла CSS, созданного на предыдущем шаге; обратите внимание, что нам больше не нужно добавлять атрибут type = ”text / css” в тег <link>, потому что мы используем тип документа HTML5;
третий тег ссылки предназначен для веб-шрифта Lato от Google, который мы использовали для разработки веб-сайта в Photoshop; Я выбрал шрифт весом 400 и 700, потому что это единственные, которые нам нужны;
первый тег <script> ссылается на файл jQuery, размещенный в Google; в настоящее время это обычная практика, и это делается из соображений производительности; Если вы заинтересованы узнать больше об этом, вы можете прочитать более полную статью .
второй тег <script> ссылается на локальный файл jQuery;
последние два тега <script> ссылаются на скрипты Bootstrap, которые вы скачали на предыдущем шаге.
<!--Stylesheets and Google Fonts--> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" /> <!--jQuery and Bootstrap scripts--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script> <script src="js/jquery-1.7.2.js" type="text/javascript"></script> <script src="js/bootstrap-tab.js"></script> <script src="js/bootstrap-transition.js"></script>
Положение этих тегов <link> и <script> имеет значение. Например, нам нужно будет перезаписать некоторые стили Bootstrap, например цвет ссылок, и разместив нашу таблицу стилей после таблицы стилей Bootstrap, мы воспользуемся преимуществом порядка CSS спецификации (т. Е. Когда два правила имеют одинаковый вес / важность, последний будет применяться). Кроме того, сценарии Bootstrap будут работать только с jQuery, а это значит, что его нужно размещать и загружать перед файлами JavaScript.
Откройте веб-сайт в вашем браузере и посмотрите, как он выглядит. Это не очень впечатляет, но у нас уже все столбцы правильно выровнены, потому что мы использовали классы Bootstrap для определения структуры макета. И нам не пришлось писать никаких стилей CSS, чтобы достичь этого.
Кроме того, должна быть только одна видимая область содержимого для портфолио, которая изменяется, если вы нажимаете на другие эскизы сверху. Если это не так, убедитесь, что все файлы на месте и все ссылки указывают на правильный файл.
Примечание. Если на вашем веб-сайте что-то не работает, воспользуйтесь функцией Google Chrome Inspect для изучения проблем (или найдите аналогичный инструмент, если вы используете другой браузер). Во-первых, вы должны проверить консоль, чтобы увидеть, если браузер не может загрузить файл. Если это так, убедитесь, что файл находится в нужной папке, а HTML-ссылка содержит правильный путь. Если у вас нет ошибок в консоли, следующая вкладка, которую вы должны проверить, это Элементы. Проверьте области вашего сайта, которые не работают должным образом, и посмотрите, как CSS применяется к этим областям. Используя функцию Google Chrome Inspect, вы не только отладите намного быстрее, чем просмотр исходного кода в редакторе кода, но и поймете, как ваши CSS-правила применяются к элементам сайта.
Часть 4 – CSS
Здесь начинается самое интересное: стилизация сайта в CSS. Я уверен, что это та часть, которая нравится большинству из вас. Однако важно не упускать из виду основу HTML. Когда вы разрабатываете веб-сайт, придавайте одинаковое значение как HTML, так и CSS.
Откройте файл «style.css» и начнем.
Шаг 17: Размер коробки
CSS вычисляет общую ширину блока, добавляя границу и отступ блока к его ширине. Пример:
.box {
width: 200px;
padding: 10px;
border: 1px solid black;
} Общая ширина класса «box» выше составит 222 пикселя (200 пикселей ширины + 10 пикселей слева, 10 пикселей справа + 1 пиксель левой границы + 1 пиксель правой границы). Эта модель размеров блоков называется «content-box», и CSS применяет ее по умолчанию.
В CSS3 у нас есть возможность установить размер рамки в «border-box». Это означает, что отступы и границы будут применены внутри поля. В приведенном выше примере общая ширина класса «box» была бы 200px, если бы мы изменили размеры блока на «border-box».
Итак, как мы можем изменить размер коробки? Просто с помощью свойства «box-sizing» с селекторами поставщиков для браузеров Mozilla и Webkit (Chrome и Safari). Скопируйте следующее правило в свой документ CSS. Звездочка, которую мы использовали в качестве селектора, называется универсальным селектором, и она применяет указанные стили ко всем элементам.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} Шаг 18: общие стили
Добавьте следующие свойства CSS в селектор тела. Свойство background имеет цвет (который я выбрал в Photoshop с помощью инструмента «Пипетка») и изображение. Это гарантирует, что по крайней мере цвет будет отображаться, если браузер не может получить доступ к фоновому изображению или если пользователь отключил изображения в своем браузере.
Затем мы устанавливаем основной шрифт веб-сайта: Lato с резервным вариантом на Helvetica, затем Arial, а затем любой шрифт без засечек в браузере пользователя по умолчанию. Это означает, что если браузер не может получить доступ к первому шрифту, он попытается использовать следующий и так далее.
Затем мы устанавливаем основной цвет текста, который является цветом заголовков и абзацев.
body {
background: #e3e7e9 url('../images/main-bg.jpg');
font-family: 'Lato', Helvetica, Arial, sans-serif;
color: #4e5559;
} Теперь давайте добавим несколько основных стилей для заголовков. Сначала сгруппируйте все теги заголовков в одно правило, разделив их запятыми, и установите те же семейство шрифтов и цвет, которые вы использовали для основного текста. Затем
выберите каждый заголовок и установите его размер. Основными заголовками для каждого раздела являются теги <h2>, и мы хотим, чтобы они отображались заглавными буквами. Для этого мы будем использовать свойство text-transform.
h1, h2, h3, h4, h5, h6 {
font-family: 'Lato', Helvetica, Arial, sans-serif;
color: #4e5559;
}
h1 {font-size: 32px;}
h2 {font-size: 28px; text-transform: uppercase;}
h3 {font-size: 24px;}
h4 {font-size: 20px;}
h5 {font-size: 18px;}
h6 {font-size: 16px;} Выберите тег абзаца и установите семейство шрифтов, размер шрифта и высоту строки. Затем примените белую текстовую тень с непрозрачностью 90%.
В свойстве text shadow первое значение – это горизонтальное смещение, второе – вертикальное смещение, а третье – радиус размытия (установив последнее значение в 0, мы получим резкую тень). Для цвета я использовал rgba (красный, зеленый, синий, альфа), потому что я хотел установить непрозрачность тени. Вы также можете ввести только цвет RGB или значение HEX.
Выберите теги привязки и установите их цвет и размер шрифта 16 пикселей. Затем воспользуйтесь селектором наведения, чтобы установить цвет наведения для тегов привязки.
p {
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9);
}
a {
color: #27a3c4;
font-size: 16px;
}
a:hover {color: #2492af;} Шаг 19: стилизация класса поля содержимого
Когда мы писали HTML, мы использовали класс «content-box» для отзывов и полей ввода контактной формы.
Мы будем использовать фон свидетельства из дизайна Photoshop в качестве справочного материала для создания того же фона в CSS3. Сначала мы создадим линейный градиент сверху вниз. Выберите инструмент «Пипетка» (I) и выберите верхний цвет и нижний цвет из фона отзыва. Для создания градиента CSS3 я использовал приложение под названием Gradient, которое я рекомендую вам, если вы работаете на Mac.
Если вы используете другую ОС или не хотите покупать приложение, есть бесплатное онлайн-приложение под названием Gradient Generator, которое вы можете использовать для достижения градиента CSS3. Просто создайте линейный градиент, используя цвета, которые вы выбрали в Photoshop, а затем скопируйте указанный код. Вернитесь в редактор кода, выберите класс «content-box» и вставьте код для градиента.
Далее нам нужно создать закругленные углы, используя свойство border-radius и селекторы поставщиков для Webkit и Mozilla. Всякий раз, когда мне нужно создать закругленные углы в CSS3, я открываю веб-сайт border-radius.com , вводю значение радиуса в верхнем левом углу и копирую код в мой файл CSS.
Теперь добавьте сплошную границу размером 1 пиксель в класс «content-box», используя цвет # c9cbd1.
Фон с изображением от Photoshop имеет белый эффект Bevel & Emboss сверху, а также эффект тени. Чтобы создать их в CSS, мы будем использовать свойство box-shadow. В коде ниже я разделил две тени запятыми.
Во-первых, у нас есть тень для эффекта Bevel & Emboss. Для этой вставки я ввел три значения:
горизонтальное смещение
вертикальное смещение
цвет
Добавьте запятую после вставной тени и определите эффект тени, используя четыре значения:
горизонтальное смещение
вертикальное смещение
радиус размытия
цвет (я использовал rgba, чтобы установить альфа-прозрачность тени)
.content-box {
background-color: #f9fafa;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f9fafa), to(#f0f1f3));
background-image: -webkit-linear-gradient(top, #f9fafa, #f0f1f3);
background-image: -moz-linear-gradient(top, #f9fafa, #f0f1f3);
background-image: -o-linear-gradient(top, #f9fafa, #f0f1f3);
background-image: -ms-linear-gradient(top, #f9fafa, #f0f1f3);
background-image: linear-gradient(top, #f9fafa, #f0f1f3);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9fafa', EndColorStr='#f0f1f3')
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #c9cbd1;
-moz-box-shadow: inset 0 1px #fff, 0 4px 6px rgba(13, 28, 36, 0.08);
-webkit-box-shadow: inset 0 1px #fff, 0 4px 6px rgba(13, 28, 36, 0.08);
box-shadow: inset 0 1px #fff, 0 4px 6px rgba(13, 28, 36, 0.08);
} Шаг 20: Создание кнопок
В HTML мы добавили класс «кнопка» для кнопки отзывов (со вторым классом «маленький») и для кнопки «Посетить сайт» (со вторым классом «большой»). Теперь давайте стилизуем эти классы в CSS, используя следующие свойства:
display: установите для этого свойства значение inline-block; это означает, что кнопка будет размещена как встроенный элемент, но будет вести себя как блочный элемент;
border: добавить сплошную границу 1px для кнопки;
text-transform: установить текст заглавными буквами;
font-weight: установите вес шрифта на 700;
цвет: установить цвет текста кнопки;
text-shadow: добавить белую резкую тень к тексту;
курсор: установите его на указатель;
Далее у нас есть свойство border-radius, box-shadow (с двумя типами теней, разделенных запятой) и градиент фона (который совпадает с градиентом класса «content-box»).
.button {
display: inline-block;
border: 1px solid #c9cbd1;
text-transform: uppercase;
font-weight: bold;
color: #717b80;
text-shadow: 1px 1px 0 #fff;
cursor: pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 1px 0 #fff, 0 2px 5px 0 rgba(13, 28, 36, 0.1);
-webkit-box-shadow: inset 0 1px 0 #fff, 0 2px 5px 0 rgba(13, 28, 36, 0.1);
box-shadow: inset 0 1px 0 #fff, 0 2px 5px 0 rgba(13, 28, 36, 0.1);
background: #f6f7f8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f9fafa), to(#f0f1f3));
background-image: -webkit-linear-gradient(top, #f9fafa, #f0f1f3);
background-image: -moz-linear-gradient(top, #f9fafa, #f0f1f3);
background-image: -o-linear-gradient(top, #f9fafa, #f0f1f3);
background-image: -ms-linear-gradient(top, #f9fafa, #f0f1f3);
background-image: linear-gradient(top, #f9fafa, #f0f1f3);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9fafa', EndColorStr='#f0f1f3');
} Теперь мы добавим стили для наведения и активного состояния кнопки. Вы должны быть знакомы со свойствами CSS2 ниже, так как они не требуют пояснений. Давайте проанализируем переход CSS3. Это свойство в настоящее время поддерживается браузерами Wekbit (Chrome и Safari), Mozilla и Opera, поэтому нам нужно добавить префиксы поставщиков. Оба состояния наведения и активного состояния кнопки имеют два перехода, разделенных запятой. Давайте посмотрим, что представляют собой эти значения:
первое значение: мы указываем, какие свойства мы хотим перейти; в нашем случае мы хотим, чтобы фон и цвет текста имели тонкий эффект затухания; обратите внимание, что мы определили новые значения для этих свойств выше;
второе значение представляет длительность перехода;
третье значение представляет значение времени перехода; «Легкость» означает, что эффект перехода начинается медленно, продолжается быстро, а затем медленно заканчивается;
.button:hover {
background: #fff;
color: #5aacd5;
text-decoration: none;
transition: background .3s ease, color .3s ease;
-moz-transition: background .3s ease, color .3s ease;
-o-transition: background .3s ease, color .3s ease;
-webkit-transition: background .3s ease, color .3s ease;
}
.button:active {
background: #f6f7f8;
-webkit-box-shadow: inset 0 1px 3px #d7d9df;
-moz-box-shadow: inset 0 1px 3px #d7d9df;
box-shadow: inset 0 1px 3px #d7d9df;
border: 1px solid #bec0c5;
color: #4b96bc;
transition: background .1s ease, color .1s ease;
-moz-transition: background .1s ease, color .1s ease;
-o-transition: background .1s ease, color .1s ease;
-webkit-transition: background .1s ease, color .1s ease;
} Если вы посмотрите на сайт сейчас, вы заметите, что кнопки имеют тот же размер, что и текст, который они содержат. Мы хотим добавить к ним отступы и нацелимся на «маленький» и «большой» классы, которые мы использовали в HTML. Также для маленькой кнопки установите размер шрифта 12px.
.large {
padding: 10px 14px;
}
.small {
padding: 6px 14px;
font-size: 12px;
} Обратите внимание на значения отступов: при настройке отступов или полей в CSS вы можете ввести 1, 2, 3 или 4 значения.
Значение 1 означает, что одинаковое заполнение будет применено к верхнему, правому, левому и нижнему элементам;
2 значения (что мы использовали для заполнения кнопок): первое представляет верхний и нижний отступы / поля; второй представляет левый и правый отступы / отступы;
3 значения: первое представляет верхний отступ / поле, второе представляет правый и левый отступ / поле, а третье представляет нижнее заполнение / поле;
4 значения: установите отступ / поле для верха, справа, снизу и слева (в этом точном порядке);
Ваш сайт должен выглядеть как на скриншоте ниже.
Шаг 21: стилизация заголовка
Теперь, когда мы добавили некоторые общие стили для веб-сайта, давайте начнем стилизацию каждого раздела, от верхнего до нижнего колонтитула.
Добавьте следующие стили к идентификатору заголовка. Так как div «container» находится внутри div «header», фоновое изображение, которое мы применили, может растягиваться по всей ширине браузера.
Мы знаем, что заголовок имеет фиксированную высоту, поэтому мы можем указать его в CSS. Для других блоков дизайна (например, контейнера отзывов) мы не можем использовать фиксированную высоту, потому что это зависит от того, сколько контента содержит блок.
Если вы посмотрите на дизайн Photoshop, то заметите, что разделы сайта разделены двумя тонкими линиями: одна темно-синяя, а другая почти белая. Мы добавим эти разделители, используя свойства border-bottom и border-top в CSS. Например, заголовок должен иметь нижнюю границу размером 1 пиксель с темно-синим цветом разделителя. Верхняя область свидетельства будет иметь верхнюю границу 1px с ярким цветом разделителя. Таким образом, мы получим 2px разделитель, используя только CSS.
/********************
HEADER
- Logo
- Navigation
********************/
#header {
background-image: url("../images/header-bg.jpg");
height: 150px;
border-bottom: 1px solid #428ca1;
} Шаг 22: Разработка логотипа
Мы заменим текст тега <h1> изображением логотипа, которое мы сохранили в первой части этого урока. Выберите тег привязки внутри идентификатора «логотип» и добавьте следующие стили.
Сначала мы плаваем логотип влево и устанавливаем его ширину и высоту, которые должны соответствовать размерам вашего логотипа. Затем установите фоновое изображение и добавьте верхнее поле в 50 пикселей. Сделайте отступ в тексте, чтобы убрать его с пути, чтобы мы могли видеть только изображение логотипа.
#logo a {
float: left;
width: 380px;
height: 67px;
background-image: url("../images/logo.png");
margin-top: 50px;
text-indent: -9999px;
} Шаг 23: стилизация навигации
Мы использовали класс «навигация» как для заголовка, так и для панели навигации портфолио. Сейчас мы сосредоточимся на том, чтобы навигация заголовка выглядела хорошо, а затем мы внесем небольшие изменения в навигацию портфолио.
Выберите класс «navigation», поместите его вправо, установите для стиля списка значение none, чтобы исключить маркеры и добавить верхнее поле.
Примечание: я придумал значение margin-top 78px после того, как закончил стилизацию всей навигации. Я хотел, чтобы нижняя строка активного элемента была выровнена с логотипом, как мы разработали его в Photoshop. Я установил начальное значение для верхнего поля навигации в 50 пикселей, я сделал скриншот веб-сайта, вставил его в Photoshop и измерил оставшееся расстояние между нижней строкой активного элемента и нижним краем логотипа (которое составляло 28 пикселей). , Затем я добавил это значение к начальному размеру в 50px.
Теперь выберите элементы списка из класса «навигация», поместите их влево и добавьте правое поле в 50 пикселей. Я также установил высоту строки в 1em.
.navigation {
float: right;
list-style: none;
margin-top: 78px;
}
.navigation li {
float: left;
margin-right: 50px;
line-height: 1em;
} В настоящее время навигация не выровнена по правому краю контейнера, поскольку последний элемент списка имеет правое поле 50 пикселей. Мы будем использовать псевдокласс для выбора последнего элемента списка и сброса поля до нуля:
ul.navigation li:last-child {
margin-right: 0;
} Выберите теги привязки внутри элементов списка навигации и добавьте стили ниже.
.navigation li a {
color: #f5f7f8;
font-size: 15px;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); /* black shadow with the opacity 30% */
line-height: 1em;
} Когда вы наводите курсор мыши на элемент навигации, браузер подчеркнет его. Мы не хотим этого, поэтому мы установим text-художественное оформление на none для состояния hover.
.navigation li a {
color: #f5f7f8;
font-size: 15px;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); /* black shadow with the opacity 30% */
line-height: 1em;
} Теперь мы добавим стили для активного элемента навигации. Вставьте в свой файл CSS следующие правила. В дизайне Photoshop активный элемент навигации имеет светлую нижнюю границу 2 пикселя, а затем темную нижнюю границу 1 пикселя. Чтобы добиться эффекта двойной границы, мы поместим границу 2px на элемент списка с классом «active» и границу 1px на тег привязки внутри элемента списка. Добавьте расстояние между текстом и границей, используя свойство padding-bottom.
.navigation li.active {
border-bottom: 2px solid #deeef2;
padding-bottom: 9px;
}
.navigation li.active a {
border-bottom: 1px solid #428ca1;
padding-bottom: 9px;
} 
Шаг 24: стилизация верхней области свидетельства
Установите верхнюю и нижнюю границы области отзывов, используя яркий цвет разделителя. Затем добавьте верхний и нижний отступ 40px.
/********************
TOP TESTIMONIAL
********************/
#top-testimonial {
border-top: 1px solid #f2f4f5;
border-bottom: 1px solid #f2f4f5;
padding: 40px 0;
} Последнее замечание по классу «container»: когда мы писали разметку для веб-сайта, мы помещали класс «container» в тот же div, что и идентификатор «top-testimonial» (в отличие от заголовка, в котором мы поместили div «container»). внутри «заголовка» div). Это связано с тем, что в верхней области отзывов есть фон тела, которое уже растягивается по всему веб-сайту, поэтому класс контейнера не обрезает фон (как это было бы в случае с заголовком div, если бы мы добавили класс «контейнера»). в тот же div, что и класс «header»). Не стесняйтесь менять разметку и смотрите, как положение класса «контейнера» влияет на фоновое изображение заголовка.
Выберите класс «testimonial-photo» и установите для его отступа 5 пикселей, чтобы поместить изображение в центр контейнера фона.
.testimonial-photo {
padding: 5px;
} Выберите класс «testimonial» и установите вертикальное заполнение на 16px, а горизонтальное заполнение на 20px. Затем добавьте нижнее поле, чтобы нажать кнопку «больше отзывов» на 20 пикселей.
.testimonial {
padding: 16px 20px;
margin-bottom: 20px;
} Если вы посмотрите на HTML-код, у нас есть два абзаца внутри div «testimonial»: один для фактического отзыва и один для имени клиента (который находится внутри класса «testimonial-info»). Чтобы выделить первый абзац, мы будем использовать дочерний селектор CSS «>». Это означает, что будет затронут только абзац, являющийся детьми класса «свидетельства». Установите стиль шрифта этого абзаца курсивом, размер шрифта 20 пикселей и цвет # 677075.
.testimonial > p {
font-style: italic;
font-size: 20px;
color: #677075;
} Выберите класс «testimonial-info» и выровняйте текст вправо, установите вес шрифта 700 и цвет # 677075.
Затем выберите абзац и тег привязки внутри класса «testimonial-info» и установите для их размера шрифта значение 17px, а для нижнего поля – 0.
Примечание: Чтобы применить одинаковые стили к нескольким селекторам, разделите их запятыми.
.testimonial-info {
text-align: right;
font-weight: 700;
color: #677075;
}
.testimonial-info p,
.testimonial-info a {
font-size: 17px;
margin-bottom: 0;
} Выберите класс «button» из идентификатора «top testimonial» и разместите его справа.
#top-testimonial .button {
float: right;
} 
Шаг 25: стилизация заголовка портфолио и навигации
Давайте добавим фоновое изображение для области портфолио, верхней и нижней границ и некоторого отступа. Скопируйте и вставьте следующие строки кода в ваш файл CSS.
/********************
PORTFOLIO
********************/
#portfolio {
padding: 20px 0 50px 0;
background: #80bcca url("../images/secondary-bg.jpg");
border-top: 1px solid #428ca1;
border-bottom: 1px solid #428ca1;
} Выберите заголовок уровня 2 из раздела «портфолио», установите его цвет, добавьте черную тень с непрозрачностью 30%, добавьте нижнее поле в 12 пикселей и поместите его влево.
#portfolio h2 {
color: #f5f7f8;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
margin-bottom: 12px;
float: left;
} Мы использовали класс «навигация» как для навигации по заголовку, так и для портфолио. Теперь мы перезапишем некоторые стили для навигации по портфолио. Сначала выберите класс «навигация» из раздела «портфолио» и установите верхнее поле равным 10 пикселям.
#portfolio .navigation {
margin-top: 10px;
} Мы хотим, чтобы элементы навигации по портфелю отображались строчными буквами. Выберите теги привязки внутри элементов списка классов «навигация» и установите для «text-transform» значение none.
#portfolio .navigation li a {
text-transform: none;
} Разрыв между активным элементом навигации и нижней границей слишком велик. Выберите активный элемент списка и тег привязки внутри него и установите для его нижнего отступа 5 пикселей.
#portfolio .navigation li.active,
#portfolio .navigation li.active a {
padding-bottom: 5px;
} Шаг 26: стилизация контейнера портфеля
Выберите класс «портфолио» и добавьте к нему основное фоновое изображение. Затем добавьте сплошную границу 1px к контейнеру. Установите отступ в 30 пикселей и ширину в 1002 пикселей.
Почему 1002px вы спрашиваете? Миниатюры портфолио имеют ширину 220px с тремя промежутками по 20px между ними (что в сумме составляет 940px; все, что меньше этого значения, и изображения будут перемещаться некорректно). Класс «портфолио-бокса» имеет границу 1px и отступ 30px, которые применяются внутри блока (из-за используемой нами модели рамки). Поэтому, чтобы сохранить изображения в контейнере 940 пикселей, мы должны добавить отступ и границу к ширине поля.
.portfolio-box {
background: #e3e7e9 url('../images/main-bg.jpg');
border: 1px solid #428ca1;
padding: 30px;
width: 1002px; /* +2px to compensate for the border */
} Теперь, если вы посмотрите на дизайн, вы заметите, что есть несколько проблем с контейнером портфолио. Прежде всего, это отображается под заголовком и навигацией, и мы этого не хотим. Во-вторых, позиции портфеля отображаются неправильно. Кроме того, класс «портфолио» не центрируется. Мы решим первые две проблемы, используя одну строку CSS, которая называется «переполнение: скрыто;». Если вы обновите страницу, вы заметите, что контейнер портфолио теперь отображается правильно.
Что случилось, спросите вы? Итак, div «portfolio-box» содержит плавающие элементы (все столбцы span3). В подобных ситуациях, когда родительский объект содержит плавающие дочерние элементы, высота контейнера вычисляется неправильно. Вот почему мы добавили фиксированную ширину к заголовку. Однако мы не можем сделать то же самое для этой области, потому что содержимое может измениться, и контейнер должен адаптироваться к нему. Итак, мы использовали свойство overflow.
.portfolio-box {
background: #e3e7e9 url('../images/main-bg.jpg');
border: 1px solid #428ca1;
padding: 30px;
width: 1002px; /* +2px to compensate for the border */
overflow: hidden;
} Чтобы завершить стилизацию контейнера портфолио, установите левое поле равным -31px и добавьте закругленные углы, используя свойство border-radius.
Вы спросили, почему мы установили левое поле на -31px? Это связано с тем, что контейнер портфолио имеет отступы 30px и границу 1px, что в сумме составляет 62px (левый и правый отступы и border). Контейнер в настоящее время выровнен по левому краю веб-сайта, что означает, что все дополнительные 62 пикселя добавляются справа. Поэтому нам нужно добавить отрицательное поле 31px слева, чтобы центрировать прямоугольник.
.portfolio-box {
background: #e3e7e9 url('../images/main-bg.jpg');
border: 1px solid #428ca1;
padding: 30px;
width: 1002px; /* +2px to compensate for the border */
overflow: hidden;
margin-left: -31px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
} Шаг 27: стилизация миниатюр портфолио
Во-первых, давайте избавимся от этих уродливых маркеров перед изображениями. Выберите неупорядоченный список из div «портфолио» и задайте для стиля списка значение «Нет».
Затем выберите элементы списка и добавьте к ним сплошную границу размером 1 пиксель, используя цвет # e8ebef. Добавьте черную тень с радиусом размытия 5px и непрозрачностью до 30%. Затем установите нижнее поле элементов списка на 20 пикселей.
.portfolio-box ul {
list-style: none;
}
.portfolio-box ul li {
border: 1px solid #e8ebef;
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
} Теперь мы будем стилизовать активный элемент, чтобы указать, какой эскиз портфолио выбран. Добавьте синюю границу 1px к элементу списка с классом «active» и устраните тень блока, установив все значения в ноль. Проверьте веб-сайт в вашем браузере и нажмите на различные элементы портфолио. Те, на которые вы нажимаете, должны иметь синюю рамку и не иметь тени.
.portfolio-box ul li.active {
border: 1px solid #56c3dc;
-moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
} Выберите заголовок уровня 3 из идентификатора «портфолио» и установите его нижнее поле равным 12 пикселей, чтобы сдвинуть абзацы текста.
#portfolio h3 {margin-bottom: 12px;} Шаг 28: стилизация области «Отзывы»
Выберите идентификатор «about» и добавьте в него следующие стили.
/********************
ABOUT & TESTIMONIALS
********************/
#about {
padding: 30px 0;
border-top: 1px solid #f2f4f5;
border-bottom: 1px solid #f2f4f5;
} Выберите заголовки уровня 2 внутри идентификатора «about» и добавьте нижнее поле в 12 пикселей.
#about h2 {margin-bottom: 12px;} Теперь мы будем работать над созданием эффекта стопки фотографий для изображения. HTML-иерархия изображения:
div с классами «content-box» и «rotate»
div с классами «content-box» и «about-image»
фактическое изображение
Выберите класс «rotate» и добавьте следующие стили. Первые 4 стиля не нуждаются в объяснениях, поэтому мы сосредоточимся только на свойстве transform.
Все браузеры поддерживают 2D-преобразования, но только Safari и Chrome (Webkit) на данный момент поддерживают 3D-преобразования. Мы будем использовать значение «rotate», которое является 2D.
Сначала мы поворачиваем следующий класс на -6 градусов, что будет вращать всех его потомков.
.rotate {
display: inline-block;
padding: 0;
float: left;
margin: 0 20px 10px 0;
transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-webkit-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
} Теперь выберите класс about-image и поверните его на 6 градусов. Это компенсирует значение -6 градусов основного класса «вращения».
.about-image {
transform: rotate(6deg);
-ms-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
-o-transform: rotate(6deg);
} Чтобы отобразить границу «поля содержимого» изображения, добавьте следующие стили.
.about-image img {
padding: 5px;
max-width: none;
} Теперь давайте добавим эффект наведения. Мы хотим, чтобы нижняя рамка для фотографий (класс «rotate») имела значение поворота 0 градусов при наведении курсора мыши. Добавьте следующие стили в класс «rotate».
.rotate:hover {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
} Если вы протестируете эффект наведения, вы заметите, что изображение также вращается, что и должно работать. Однако мы не хотим, чтобы изображение вращалось, поэтому мы добавим к нему следующие стили.
.rotate:hover .about-image {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
} Теперь мы установим новый размер шрифта для текста отзывов. Выберите класс «testimonial» из идентификатора «about» и добавьте стили ниже.
#about .testimonial p {
font-size: 16px;
}
#about .testimonial-info p,
#about .testimonial-info a {
font-size: 15px;
} Шаг 29: стилизация нижнего колонтитула
Выберите идентификатор нижнего колонтитула и добавьте в него следующие стили.
/********************
FOOTER
********************/
#footer {
padding: 30px 0 40px 0;
background: #80bcca url('../images/secondary-bg.jpg');
color: #f5f7f8;
border-top: 1px solid #428ca1;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
} Выберите заголовки уровня 2 внутри div «нижнего колонтитула» и добавьте нижнее поле 12px.
#footer h2 {margin-bottom: 12px;} Выберите заголовок div «twitter-feed» и установите его цвет на # f5f7f8 и поместите его влево.
#twitter-feed h2 {
color: #f5f7f8;
float: left;
} Поместите тег привязки внутри div «twitter-feed» (ссылка «Follow me») справа, установите его цвет и добавьте высоту строки 2.2em.
#twitter-feed a {
color: #f5f7f8;
float: right;
line-height: 2.2em;
} Выберите абзацы внутри класса «твиты» и добавьте стили ниже. Обратите внимание, что мы использовали свойство border-top для создания разделителя пунктирной линии между твитами. Используя свойство «clear: both;», мы сообщаем CSS, что нельзя использовать плавающие элементы слева или справа. Если мы не установим это свойство, первый твит будет плавать рядом с заголовком уровня 2 этой области.
.tweets p {
clear: both;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
padding: 8px 0 10px 0;
border-top: 1px dashed #afd5de;
font-style: italic;
} Шаг 30: стилизация контактной формы
Выберите идентификатор контакта и добавьте в него следующие стили, чтобы создать контейнер с серым фоном, как мы делали для поля портфолио.
#contact {
background: #e9edf0 url('../images/main-bg.jpg');
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 20px 30px;
overflow: hidden;
border: 1px solid #428ca1;
text-shadow: 1px 1px 0 #fff;
} Теперь мы будем стилизовать атрибуты заполнителей. Браузеры Wekbit используют селектор «:: – webkit-input-placeholder», а Mozilla использует «: -moz-placeholder». Добавьте следующие правила в свой CSS-файл для стилизации текста-заполнителя.
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: 400;
font-style: italic;
color: #717b80;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: 400;
font-style: italic;
color: #717b80;
} Теперь давайте стилизовать теги input и textarea, задав ширину, отступы и информацию о шрифте.
input,
textarea {
width: 480px;
padding: 18px 12px;
margin-bottom: 10px;
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: 400;
font-style: normal;
color: #565d60;
} Для тега textarea установите минимальную высоту 140px и максимальную ширину 480px. Кроме того, установите верхний и нижний отступы на 10 пикселей, а левый и правый отступы на 12 пикселей.
textarea {
min-height: 140px;
max-width: 480px;
padding: 10px 12px;
} Теперь мы будем стилизовать кнопку отправки. Вы должны быть знакомы со всеми нижеприведенными свойствами, поскольку мы рассмотрели их при создании класса «button».
input[type=submit] {
color: #f5f7f8;
display: block;
border: 1px solid #218fae;
text-transform: uppercase;
font-weight: 400;
text-shadow: 1px 1px 0 #3f9cb8;
cursor: pointer;
width: 100px;
float: right;
padding: 8px 14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 1px 0 #80d3e8, 0 2px 5px 0 rgba(13, 28, 36, 0.1);
-webkit-box-shadow: inset 0 1px 0 #80d3e8, 0 2px 5px 0 rgba(13, 28, 36, 0.1);
box-shadow: inset 0 1px 0 #80d3e8, 0 2px 5px 0 rgba(13, 28, 36, 0.1);
background-color: #56bfdd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#56bfdd), to(#45b3d5));
background-image: -webkit-linear-gradient(top, #56bfdd, #45b3d5);
background-image: -moz-linear-gradient(top, #56bfdd, #45b3d5);
background-image: -o-linear-gradient(top, #56bfdd, #45b3d5);
background-image: -ms-linear-gradient(top, #56bfdd, #45b3d5);
background-image: linear-gradient(top, #56bfdd, #45b3d5);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#56bfdd', EndColorStr='#45b3d5');
} Шаг 31: Стилизация области авторских прав
Выберите идентификатор «copyright» и добавьте следующие стили.
/********************
COPYRIGHT
********************/
#copyright {
background: #81baca url('../images/copyright-bg.jpg') repeat-x;
overflow: hidden;
height: 60px;
color: #cbe2ea;
} Теперь мы будем стилизовать абзац внутри div «copyright». Выберите его и добавьте следующие стили. Если установить высоту строки в 60 пикселей, то есть высоту div «авторского права», текст будет выровнен по вертикали.
#copyright p {
text-align: center;
line-height: 60px;
font-size: 15px;
text-shadow: 1px 1px 0 #264f5d;
} Конечный результат
Это все! Мы закончили создание нашего портфолио с помощью Bootstrap. Проверьте демо, чтобы увидеть живую версию сайта. Надеюсь, Вам понравился этот урок, и Вы узнали некоторые новые методы веб-дизайна.
Скачать все исходные файлы для создания своего собственного портфолио, Вы сможете по ссылке ниже:
Если у Вас есть какие-либо вопросы или проблемы, опубликуйте их в разделе комментариев ниже, и я свяжусь с Вами. Всем удачи и благополучия! До новых встреч!
