Как сделать портфолио в html css

Обновлено: 05.07.2024

Кодирование портфолио 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%;
>
>

Совет: Кроме того, проверить Галерея портфолио с фильтрацией

Читайте также: