Как сделать портфолио в html css
Кодирование портфолио Bootstrap с использованием Twitter Bootstrap, HTML5 и CSS3
Ресурсы
Вот ресурсы, которые мы будем использовать для создания сайта:
Вам также понадобится редактор кода, чтобы написать код для сайта. Я недавно начал использовать Sublime Text, и я до сих пор очень доволен этим. Вы можете получить его для любой операционной системы, и сообщество разработало множество плагинов, расширяющих его функциональность.
Часть 1 – Нарезка изображений
Шаг 1: Настройка структуры папок
Шаг 2: Нарезка логотипа
Используйте технику, описанную выше, чтобы нарезать следующие изображения:
Шаг 3: Нарезка основного фона
Для нарезки фоновых изображений мы будем использовать немного другую технику, которую я продемонстрирую на основном фоне. Выберите инструмент Rectangular Marquee Tool (M), удерживайте нажатой клавишу Shift и создайте выделение квадрата на сером текстурированном фоне области свидетельства.
Откройте новый документ в Photoshop (Ctrl / Cmd + N) и вставьте изображение (Ctrl / Cmd + V).
Примечание. Когда вы копируете изображение в буфер обмена и открываете новый документ, Photoshop будет использовать размеры этого изображения для ширины и высоты нового документа.
Шаг 4: Нарезка всех остальных фоновых изображений
Используйте технику, которую я продемонстрировал на предыдущем шаге, чтобы нарезать следующие изображения:
фон заголовка (включая темную полосу вверху);
синий фон области портфолио (это будет наше вторичное фоновое изображение);
фон области авторских прав;
Вот краткое описание техники нарезки из предыдущего шага:
Ниже Вы можете увидеть скриншот всех моих изображений.
Часть 2 – HTML разметка
Теперь, когда мы сохранили все нужные нам изображения, пришло время написать разметку для нашего сайта.
Шаг 5: Настройка HTML-документа
Шаг 6: Разметка заголовка
Шаг 7: Лучший отзыв
Мы добавим файл Bootstrap CSS в третьей части этого урока. Однако нам нужно использовать соглашения об именах Bootstrap для разметки HTML, чтобы обеспечить правильную работу CSS.
HTML-структура Bootstrap для столбцов выглядит следующим образом:
Шаг 8: Портфельная навигация
Напишите основную структуру HTML для области портфолио. Давайте рассмотрим, для чего будет использоваться каждый из этих тегов:
Шаг 9: Миниатюры портфолио
Шаг 10: Детали проекта
На предыдущем этапе мы добавили 8 миниатюр портфолио. Это означает, что нам нужно 8 новых div с подробным содержанием для каждого эскиза портфолио.
Это все, что нам нужно сделать сейчас. Когда мы добавим сценарии Bootstrap позже, область портфолио будет работать как положено.
Шаг 11: Отзывы
Шаг 12: Нижний колонтитул
Создайте новый тег
Шаг 13: Область авторского права
Шаг 14: Проверка
Прежде чем двигаться дальше, мы должны убедиться, что разметка соответствует HTML5.
Часть 3. Добавление таблиц стилей и скриптов
Шаг 15: Загрузите и создайте необходимые файлы
Затем вам нужно скачать последнюю версию jQuery, чтобы плагины Bootstrap работали.
Теперь, когда у вас есть все необходимые файлы, на следующем шаге мы свяжем их с HTML-документом.
Шаг 16. Связывание таблиц стилей и скриптов с файлом HTML
Поместите следующие строки кода в вашего документа. Давайте рассмотрим, что делают эти строки:
В этом уроке мы сделаем красивое HTML5 портфолио, с помощью jQuery плагина Quicksand plugin.
Перед тем как приступить к html разметке, необходимо подключить наш css в теге head, jQuery и Quicksand plugin мы подключим перед тегом закрытия body.
В нащей разметке мы использовали несколько новых HTML5 элементов. header — содержит заголовок страницы, section — неупорядоченный список работ нашего портфолио, в элементе nav будет располагаться меню.
Вы можете поместить в элементы li что вам будет необходимо.
jQuery
Quicksand plugin сравнивает два ul списка, находит в них одинаковые элементы и перемещает на новую позицию. Наш jQuery скрипт пройдется по всем работам портфолио и создаст новый (спрятанный) список.
Каждый тег добавлен в объект itemsByTags как массив. Это значит, что itemsByTags[‘Web Design’] будет содержать элементы с тегом Web Design. Мы будем использовать этот объект для создания скрытого списка. Напишем функцию, которая будет это делать:
Данная функция принимает название группы и массив элементов li, затем копирует их в новый список и добавляет ссылку в наше меню.
Теперь нам необходимо пробежать по всем группам и вызвать эту функцию, также надо следить за нажатиями на меню.
Вы можете использовать данный шаблон для представления ваших работ. Преимущество заключается в простоте использования — вам необходимо просто изменить содержание элементов li. Также, если JavaScript отключен все работы будут видны.
Мы пошли вам навстречу и подготовили стартовый шаблон сайта-портфолио. Начиная с этой домашней работы, будем потихоньку его усовершенствовать и наполнять контентом. На этом шаге мы познакомимся с шаблоном сайта-портфолио и его структурой.
Для начала скачайте архив с сайтом отсюда и распакуйте.
Вот что находится в распакованном архиве сайта
Вот что шаблон включает в себя:
- главную страницу-лендинг index.html с информацией о вас, ваших навыках и проектах;
- стили для этой страницы style.css (файл пока что пустой, мы будем наполнять его в следующем разделе);
- папку img с интерфейсными картинками для портфолио: фоном, иконками и декоративными элементами;
- папку files с контентными картинками для портфолио: фотографией и скриншотами проектов;
- папку source с примерами выполненных вами проектов.
На этом этапе мы включили в файлы сайта ещё и стили для прототипирования страницы outlines.css , они помогают наглядно видеть структуру страницы (на их содержимое можете пока что не обращать внимание).
Узнать, как создать адаптивную сетку галереи портфолио с помощью CSS.
Галерея портфолио
Узнайте, как создать адаптивную галерею портфолио, которая варьируется от 4 столбцов, 2 столбцов и столбцов полной ширины в зависимости от ширины экрана:
Создать галерею портфолио
Шаг 1) Добавить HTML:
Пример
ПОРТФОЛИО
Измените размер окна браузера, чтобы увидеть отзывчивый эффект.
Моя работа
Моя работа
Моя работа
Моя работа
Некоторые другие работы
Шаг 2) Добавить CSS:
Пример
/* Сайт по центру */
.main max-width: 1000px;
margin: auto;
>
h1 font-size: 50px;
word-break: break-all;
>
/* Добавить отступы между каждым столбцом (если вы хотите) */
.row,
.row > .column padding: 8px;
>
/* Создайте четыре одинаковых столбца, которые плавают рядом друг с другом */
.column
width: 25%;
>
/* Очистить поплавки после строк */
.row:after content: "";
display: table;
clear: both;
>
/* Содержание */
.content background-color: white;
padding: 10px;
>
/* Адаптивный макет - делает два столбца-макет вместо четырех столбцов */
@media screen and (max-width: 900px) .column width: 50%;
>
>
/* Адаптивный макет - делает два столбца стека друг на друга, а не рядом друг с другом */
@media screen and (max-width: 600px) .column width: 100%;
>
>
Совет: Кроме того, проверить Галерея портфолио с фильтрацией
Читайте также: