Легкий трехстраничный HTML шаблон сайта резюме-портфолио
- Главная >
- Шаблоны сайтов >
- Шаблоны web-студий
Всем привет. Я уже и не помню, когда я в последний раз выкладывал шаблон сайта не на фреймворке Twitter Bootstrap. Это конечно же, в первую очередь, связано с тем, ч то я почти все свои проекты делаю именно на этом фреймворке. И естественно я ищу шаблоны, фичи и прочие элементы для Twitter Bootstrap. Данный шаблон не исключение. От также сделан на базе знаменитого фреймворка.
Представляю Вашему вниманию легкий HTML сайт резюме web-дизайнера. В шаблоне всего три страницы и толком он ничем не примечателен. Но легкость и доступность информации на сайте делает этот макет сайта отличным подспорьем для создания собственного сайта-портфолио веб-дизайнера фрилансера.
Итак, пройдемся по страницам сайта. Их здесь три: Главная, About и Works. Я бы, конечно, еще добавил страницу «Контакты».
Главная страница
На ней мы видим приветственный блок с фоновым изображением, сеткой работ из портфолио, иконки социальных сетей и контакты веб-дизайнера.
Страница «About»
Естественно, эта страница предназначена для знакомства посетителей сайта с автором работ и самого сайта. Тут почти все тоже самое, что и на главной странице.
Страница «Работы»
Здесь довольно странным образом представлены работы фрилансера. Я бы, конечно, поместил сюда ту сетку с главной страницы и под каждую работу создал отдельную страницу, ну или поставил лайтбокс для детального просмотра работы. Этот шаблон не обязательно должен быть сайтом-резюме свободного веб-разработчика. Шаблон можно переделать и под сайт копирайтера, web-разработчика, seo оптимизатора. Это даже может быть промо-сайт веб-студии, который помогает продвижению главного сайта. Это делается очень просто.
Создается сайт (и ни один и ни два), там размещается информация о веб-студии, сайт наполняется уникальным контентом, размещаются работы и так далее. А с главной страницы ведут ссылка на головной сайт «Создание сайтов в Уфе». А уже с другой страницы на тот же сайт ведет другая ссылка с немного измененным анкором «Создание сайта Уфа». Таким образом можно сообщать поисковикам, что много сайтов схожей тематики ссылаются на сайт веб-студии по определенным запросам. Конечно, это нужно делать с умом. И делать действительно качественные сайты-саттелиты с хорошей, интересной и полезной информацией.
На этом у меня все, смотрите «демо», качайте шаблон. До скорых постов.
Если вы не видите кнопку «Скачать»
отключите блокировщик рекламы Скачать (1.
![](/800/600/https/rusinfo.info/wp-content/uploads/0/3/7/03779693b53568dc3f109f45c6398bc1.jpg)
Отблагодарить
Вконтакте
Twitter
Похожие статьи
Не то, что искали? Воспользуйтесь поиском
Начало изучения языков веб-программирования. Пример стандартного шаблона сайта HTML5
В начале изучения языка программирования имеет право жить метод изучения HTML кода по старинке, набивая код целой страницы вручную.Конечно, это действенный способ для изучения, понимания и восприятия кода. Ведь набивая HTML теги своими руками, а не копируя готовый шаблон, вы развиваете мышечную память. Но это полезно лишь в начале изучения языка программирования.
По мере приобретения опыта это будет лишней тратой времени. К тому же никто не застрахован от машинальной ошибке при наборе кода вручную.Практически все программисты используют готовые шаблоны разметки — каркасы страниц, блоков, заготовки скриптов и т.
![](/800/600/https/cf2.ppt-online.org/files2/slide/r/RJu0Ml31xFysP4BdSEnHGZLzKO6pbQh2wtkcNrovm/slide-49.jpg)
Современные документы, построенные на 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 своего веб-сайта и улучшить свой маркетинг.