Легкий трехстраничный HTML шаблон сайта резюме-портфолио
- Главная >
- Шаблоны сайтов >
- Шаблоны web-студий
Всем привет. Я уже и не помню, когда я в последний раз выкладывал шаблон сайта не на фреймворке Twitter Bootstrap. Это конечно же, в первую очередь, связано с тем, ч то я почти все свои проекты делаю именно на этом фреймворке. И естественно я ищу шаблоны, фичи и прочие элементы для Twitter Bootstrap. Данный шаблон не исключение. От также сделан на базе знаменитого фреймворка.
Представляю Вашему вниманию легкий HTML сайт резюме web-дизайнера. В шаблоне всего три страницы и толком он ничем не примечателен. Но легкость и доступность информации на сайте делает этот макет сайта отличным подспорьем для создания собственного сайта-портфолио веб-дизайнера фрилансера.
Итак, пройдемся по страницам сайта. Их здесь три: Главная, About и Works. Я бы, конечно, еще добавил страницу «Контакты».
Главная страница
На ней мы видим приветственный блок с фоновым изображением, сеткой работ из портфолио, иконки социальных сетей и контакты веб-дизайнера.
Страница «About»
Естественно, эта страница предназначена для знакомства посетителей сайта с автором работ и самого сайта. Тут почти все тоже самое, что и на главной странице.
Страница «Работы»
Здесь довольно странным образом представлены работы фрилансера. Я бы, конечно, поместил сюда ту сетку с главной страницы и под каждую работу создал отдельную страницу, ну или поставил лайтбокс для детального просмотра работы. Этот шаблон не обязательно должен быть сайтом-резюме свободного веб-разработчика. Шаблон можно переделать и под сайт копирайтера, web-разработчика, seo оптимизатора. Это даже может быть промо-сайт веб-студии, который помогает продвижению главного сайта. Это делается очень просто.
Создается сайт (и ни один и ни два), там размещается информация о веб-студии, сайт наполняется уникальным контентом, размещаются работы и так далее. А с главной страницы ведут ссылка на головной сайт «Создание сайтов в Уфе». А уже с другой страницы на тот же сайт ведет другая ссылка с немного измененным анкором «Создание сайта Уфа». Таким образом можно сообщать поисковикам, что много сайтов схожей тематики ссылаются на сайт веб-студии по определенным запросам. Конечно, это нужно делать с умом. И делать действительно качественные сайты-саттелиты с хорошей, интересной и полезной информацией.
На этом у меня все, смотрите «демо», качайте шаблон. До скорых постов.
Если вы не видите кнопку «Скачать»
отключите блокировщик рекламы Скачать (1. 66 Mb) Demo
Отблагодарить
Вконтакте
Twitter
Похожие статьи
Не то, что искали? Воспользуйтесь поиском
Начало изучения языков веб-программирования. Пример стандартного шаблона сайта HTML5
В начале изучения языка программирования имеет право жить метод изучения HTML кода по старинке, набивая код целой страницы вручную.Конечно, это действенный способ для изучения, понимания и восприятия кода. Ведь набивая HTML теги своими руками, а не копируя готовый шаблон, вы развиваете мышечную память. Но это полезно лишь в начале изучения языка программирования.
По мере приобретения опыта это будет лишней тратой времени. К тому же никто не застрахован от машинальной ошибке при наборе кода вручную.Практически все программисты используют готовые шаблоны разметки — каркасы страниц, блоков, заготовки скриптов и т. д. Также в написании кода им помогают специализированные текстовые редакторы, которые автоматически добавляют необходимые символы кода и целые конструкции.
Современные документы, построенные на HTML5 и CSS3 с элементами div практически однообразны в своей структуре. Кардинально отличается лишь css файл, отвечающий за дизайн и расположение блоков в теле страницы. Прописывая стиль CSS для секций и блоков, заголовкам и тексту, картинкам и слайдерам — вы создаёте оригинальный по своему дизайну сайт. Один или несколько файлов с расширением .css отвечают за структуру страницы, дизайн всего сайта, портала, CMS.
Пример стандартного шаблона сайта, построенного на HTML5.
<!DOCTYPE HTML> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Название страницы сайта</title> <meta name="description" content="Описание" /> <link rel="stylesheet" type="text/css" href="../css/style.css" /> </head> <body> <header> Шапка сайта <nav> Меню сайта </nav> </header> <main> <section> <div> <h2>Название страницы</h2> Основная часть </div> </section> </main> <aside> <div> Правая колонка (sidebar) </div> </aside> <footer> Подвал </footer> <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script> </body> </html>
Стандартная структура HTML5 документа — страницы.
Картинка обновлена по стандартам фреймворка Bootstrap 4,5
Расшифровка обычного кода HTML страницы:
<!DOCTYPE HTML> – принадлежность документа к HTML5. <html lang=”ru”> – главный контейнер, язык. <head> – информационный контейнер + подключение стилей. <meta charset=”UTF-8″> – кодировка документа. <title> – название страницы или сайта. <meta name=”description” content=”” /> – описание страницы или сайта. <link rel="stylesheet" type="text/css" href="../css/style.css" /> – подключение CSS, путь к файлу. <body> – начало тела страницы. <header> – шапка сайта. <nav> – меню сайта. <main> – основная информация документа. <section> – одна из секций страницы. <h2> – заголовок страницы.<aside> – правая (левая) колонка. <footer> – подвал сайта. <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script> – подключение библиотеки JQuery версия 2019 года, путь к файлу
Как видите нет ничего сложного. Остаётся лишь заполнить блоки (секции) контентом и страницу можно публиковать в интернете, как полноценный HTML документ.
Сайт-визитка с Админкой
Галерея фото и видео, обратная связь
примеров | HTML Собака
Упрощенные примеры, демонстрирующие различные элементы HTML и свойства CSS.
Посмотрите на них в действии и поэкспериментируйте — поиграйте с кодом и посмотрите, что получится.
Текст
- Заголовки: от
h2
доh6
в стиле по умолчанию. - Размер не имеет значения: создавайте заголовки любого размера с помощью CSS.
- Полужирный, курсив, регистр и высота строки: с использованием
font-weight
,font-style
font-variant
,text-transform
иline-height
. - Семейства шрифтов: списки семейств шрифтов и общие резервные семейства шрифтов.
- Размеры шрифта: абсолютные и относительные единицы.
- Интервал текста:
text-align
,text-indent
,word-spacing
иletter-spacing
свойства. - Вертикальное выравнивание: свойство
вертикального выравнивания
. - Нижний и верхний индекс: использование позиционирования в качестве альтернативы свойству
. - Текстовые тени: Тени. По тексту.
- Простые буквицы: простой способ добиться общего эффекта.
- Причудливые буквицы: оживление этой первой буквы.
- Графические буквицы: Использование изображений.
- Буквица первого абзаца: ориентация на первую букву первого абзаца.
- Котировки по запросу 1: Простая структура котировок по запросу.
- Цитаты 2: Добавляем немного стиля.
- Pull quotes 3: Более сложный стиль.
Звенья
- Подчеркивание: различные способы подчеркивания (обычно ссылки), с использованием
,border-bottom
иbackground-image
. - Якоря и цели: ссылки на части страницы и их стиль с использованием псевдокласса
:target
. - Rollovers 1: графические ссылки, которые меняются при наведении на них курсора с помощью
: наведите курсор на
. - Rollovers 2: Дополнительные интерактивные эффекты с использованием псевдокласса
:active
. - Опрокидывание 3: Постепенное появление и исчезновение.
- Ролловер 4: Вращение с использованием
преобразования
. - Простые переходы CSS: тонкая анимация текстовых ссылок при наведении на них курсора.
- Дополнительные переходы CSS: использование
радиуса границы
и цветов RGBa. - Функции синхронизации перехода CSS: обработка ускорения и замедления анимированных переходов.
Цвета, изображения и фоны
- Цвета: цвета CSS с использованием свойств
color
иbackground-color
. - HTML-изображения: элемент
img
. - Фоновые изображения: свойство CSS
background-image
. - Позиционирование фона: использование свойства
background-position
- Повторяющиеся фоновые изображения: использование свойства
background-repeat
. - Фоновое вложение: как фон ведет себя при прокрутке содержимого.
- Размер фонового изображения: используется
background-size
. - Несколько фонов: Наслоение фонов внутри одного блока.
- Линейные градиенты: создание градиентных фонов с помощью CSS.
- Радиальные градиенты: круговые и эллиптические градиентные фоны.
- Непрозрачность: прозрачность коробки.
Макет
- Ширина и высота:
ширина
,высота
,максимальная ширина
,минимальная высота
и так далее. - Границы: толстые, тонкие, такого цвета, такого цвета, сплошные, пунктирные, пунктирные…
- Закругленные углы: использование свойства
border-radius
. - Box shadows: добавление всплывающих окон.
- Схлопывание полей: то, как вертикальные поля сливаются или «схлопываются» друг в друга.
- Очертания: «Границы», граничащие с границами.
- Переполнение: Управление частями содержимого, которые не помещаются в поле.
- Блочный и встроенный 1: изменение поведения блоков с помощью свойства
display
. - Блочный и встроенный 2: больше различий между блочными и встроенными блоками.
- Блочный и встроенный 3: Применение отображения
: встроенный блок
. - Позиционирование: статическое: соответствует нормальному потоку.
- Позиционирование: относительное: Смещение от исходного положения блока.
- Позиционирование: абсолютное 1: Позиционирование относительно контейнера коробки.
- Позиционирование: абсолютное 2: Внутри позиционированного блока.
- Позиционирование: фиксированное: относительно области просмотра.
- Z-индекс: штабелирование позиционированных ящиков.
- Плавающий 1: Простой плавающий ящик.
- Плавающий 2: два плавающих ящика.
- Плавающий 3: Очистка плавающих ящиков.
- Макет страницы 1: два столбца. Шаг 1: размещение столбца навигации.
- Макет страницы 2: Два столбца. Шаг 2: использование поля
- Макет страницы 3: использование рамки для создания фона для столбца.
- Макет страницы 4: три столбца.
- Макет страницы 5: Добавление заголовка.
- Макет страницы 6: нижние колонтитулы не всегда будут работать со столбцами с абсолютным позиционированием…
- Макет страницы 7: добавление нижнего колонтитула с использованием плавающих столбцов.
- Чарльз Дарвин: стилизованная версия основных принципов предыдущих примеров.
- 2D-преобразования: изменение размера, формы и положения блоков с помощью
преобразовать
свойство. - Начало преобразования: изменение точки, от которой отсчитываются преобразования.
Списки и навигация
- Основные списки:
ul
,ol
иli
элементы. - Вложенные списки: списки внутри списков.
- Списки описаний:
dl
,dt
иdd
. - Маркеры списка: изменение маркеров и нумерации с использованием
типа списка
. - Изображения в качестве маркеров элементов списка: Использование
list-style-image
. - Внутренние и внешние маркеры списка: Использование
list-style-position
. - Раскрывающиеся списки 1: основы раскрывающегося меню.
- Раскрывающиеся списки 2: Простое многоуровневое раскрывающееся меню.
- Раскрывающиеся списки 3: Многоуровневое раскрывающееся меню с более подробным дизайном.
- Встроенные вкладки: базовая навигация по вкладкам с использованием свойства
display
. - Плавающие вкладки: основные вкладки с использованием
float
свойство. - Больше вкладок: Делаем вкладки более похожими на вкладки.
- Еще больше вкладок: Альтернативный стиль вкладок.
- Узкие вкладки: использование простых подчеркиваний.
- Причудливые вкладки: сходите с ума с помощью CSS.
- Показать/скрыть навигацию (JavaScript): переключение отображения с помощью JavaScript.
- Показать/скрыть навигацию (цель): переключение отображения с помощью псевдокласса
:target
.
Столы
- Базовая таблица:
таблица
,tr
иtd
элементы. - ячеек заголовка:
th
элементов. - Объединение ячеек 1: атрибут
rowspan
. - Объединение ячеек 2: атрибут
colspan
. - Схлопывание границ 1: Свертывание границ ячеек таблицы.
- Свертывание границ 2: Свертывание границ ячеек таблицы и границ таблицы.
- Группы столбцов:
col
иcolgroup
элементов. - Пустые ячейки: Использование
empty-cells
свойство, чтобы указать, как должны отображаться пустые ячейки. - Автоматическая компоновка таблицы: Алгоритм компоновки по умолчанию, используемый таблицами.
- Фиксированная компоновка таблицы: устанавливается с помощью свойства
table-layout
.
Формы
- Текстовые поля: Текст и пароль типа
ввода
элементов. - Флажки и переключатели: больше
типов элементов ввода
. - Ввод файла: для загрузки.
- Текстовые области: элемент
textarea
. Поля выбора - : Основное использование элементов
select
иoption
. - Группы опций поля выбора: использование элемента
optgroup
. - Поля выбора множественного выбора: использование атрибута
множественного
.
Изучение HTML — Учебники по HTML для начинающих
КОДИРОВАНИЕ
PRO
СКИДКА 36%
Попробуйте кодирование с помощью Programiz PRO
Получите скидку сейчас
Указатель страниц
- Введение
- Основы HTML
- Встроенные элементы
- Головные элементы
- HTML-форма
- Семантический HTML
- HTML, CSS и JS
- Графика и мультимедиа
- О HTML
- Зачем изучать HTML?
- Как выучить HTML?
Введение в HTML
- Что такое HTML?
- Основы HTML
- Основы веб-дизайна
Основы HTML
- Абзацы HTML
- Заголовки HTML
- HTML-комментарии
- Таблица HTML
- Список HTML
- Ненумерованный список HTML
- Заказанный список HTML
- Список HTML-описаний
- Разрыв строки HTML
- Предварительный тег HTML
- Горизонтальная линия HTML
Встроенные элементы HTML
- Блочные и встроенные элементы HTML
- HTML-ссылки
- HTML-изображения
- HTML полужирный
- HTML Курсив
- Верхний и нижний индекс HTML
- Форматирование HTML
Заголовок HTML
- Заголовок HTML
- Заголовок HTML
- Стиль HTML
- Метаэлементы HTML
- HTML Фавикон
HTML-форма
- HTML-форма
- HTML-элементы формы
- Ввод HTML
- Действие HTML-формы
Семантический HTML
- HTML Семантический HTML
- Тег HTML div
- HTML-тег в стороне
- Тег раздела HTML
- Тег нижнего колонтитула HTML
- Основной тег HTML
- HTML рисунок и figcaption
- Доступность HTML
HTML, CSS и JavaScript
- Класс HTML
- Идентификатор HTML
- Макет HTML
- Адаптивный HTML-дизайн
- HTML и JavaScript
HTML-графика и мультимедиа
- HTML-видео
- HTML-аудио
- HTML SVG
- Холст HTML
HTML Разное
- HTML-фреймы
- HTML-сущности
- HTML-котировки
- Пути к файлам HTML
- HTML-эмоджи
- HTML-символы
- HTML NBSP
О HTML
- HTML — это стандартный язык разметки для создания структуры веб-страниц.
- Мы можем отображать содержимое веб-страницы, такое как абзацы, списки, изображения и ссылки, в структурированном виде, используя HTML.
- Мы можем определить структуру веб-сайта только с помощью HTML. Для внешнего вида (цвет, макет, дизайн) мы используем CSS. Точно так же JavaScript используется для добавления функциональности веб-странице.
- HTML5 — это последняя и основная версия HTML.
Зачем изучать HTML?
- HTML является основой всех веб-сайтов; мы можем использовать его для создания структуры и макета веб-страницы. Кроме того, HTML позволит вам создавать собственные веб-сайты и редактировать существующие.
- Это фундаментальный навык для веб-разработки и часто необходимый шаг перед изучением других языков, таких как CSS и JavaScript. Кроме того, это хорошо зарекомендовавший себя язык с множеством ресурсов, доступных для изучения и устранения неполадок.
- С помощью HTML вы можете лучше оптимизировать SEO своего веб-сайта и улучшить свой маркетинг.