Создание сайта на HTML5

---

Урок 1. Начало работы с Visual Studio Code. Создание дизайна страниц

Введение

В процессе выполнения всех уроков, вами будет создан полноценный веб-сайт юридической конторы.

Структура веб-страниц представлена на рисунке 1.

1 - Структура итогового веб-сайта

Цель: ознакомиться с Visual Studio Code, а так же создать страницу с дизайном для всего сайта.

Задачи:

– Исследовать рабочую область.
– Научиться создавать новую страницу, используя содержимое HTML5, CSS.
– Научиться сохранять документ.
– Научиться изменять название страницы и текстовые заголовки.
– Научиться добавлять изображения на передний план и в качестве фоновых изображений.

В результате выполнения данного урока у вас должна получиться такая веб-страница (рисунок 1.1):

Рисунок 1.1 - Предварительный просмотр веб-страницы

Подготовка к созданию проекта, изучение редактора Visual Studio Code. (Установка Visual Studio Code)

Для создания проекта "Юридическая контора "Советник"" нам понадобится рабочая папка под проект.
Создайте папку на локальном диске посредствам проводника или другого файлового менеджера. 

Для реализации проекта в качестве редактора вы будете использовать современный инструмент - Visual Studio Code.
Visual Studio предлагает общедоступные инструменты и гибкость, необходимые для создания и развертывания современных веб-приложений.

– HTML5, CSS3, LESS/SASS, JavaScript
– ASP.NET, Node.js, Python, JavaScript
– NuGet, Grunt, Gulp, Bower, npm.
– Платформа и среда выполнения с открытым кодом.
– Развертывание в Windows, Azure, Mac или Linux.
– Бесплатно для небольших групп и разработчиков открытого кода.

– Запустите Visual Studio Code. В боковой панели навигации кликните по иконке страниц.(рисунок 1.2).

 

1.2 - Боковая панель

– В появившемся меню, кликните на кнопку Открыть папку и в открывшемся окне выберите созданную заранее папку Sovetnik. Кликните кнопку Выбор папки.

1.3 - Боковая панель. Выбранная папка

– Для создания первой страницы сайта design.html наведите мышку на область названия папки(проекта) SOVETNIK и кликните значок . В появившейся форме введите design.html

1.4 - Создан файл design.html

Наполнение папки Sovetnik

Для создания проекта, нам понадобятся дополнительные файлы: CSS, JS, мультимедиа.

– Для этого скачайте в созданную вами папку, папки и файлы из папки work_files.

1.5 - Папка Sovetnik

– Откройте редактор. Папки появились в навигационном меню проекта. Они будут задействованы позже.

1.6 - Название страницы

Создание дизайна сайта.

Для создания дизайна сайта нами будет подключен файл CSS, в котором указаны свойства для элементов HTML5. Изучение CSS в данном электронном учебном пособии не предусмотрен.

– Заполните файл design.html согласно стандартной структуре HTML5 документа, как на рисунке 1.7:

1.7 - Стандартная структура

– Между тегами title введите название страницы ЮК Советник (рисунок 1.8).

1.8 - Название страницы

– Следующим шагом будут meta и link данные. Между тегами head добавьте следующие строки (рисунок 1.9):

1.9 - Добавлены meta и link данные

Данным кодом вы к файлу design.html подключили css файл со свойствами для элементов HTML5, а так же meta name="viewport" для того ,что бы сообщить браузеру, что ваша страница предназначена для правильного поведения области просмотра как на персональных компьютерах ,так и на мобильных устройствах.

– Для отображения страницы как на примере, нужно прописать id для тэгов и разделительную полосу при помощи тега hr.

1.10 - Выделеные области нужно добавить на свою страницу.

– Добавим логотип на страницу. Логотип у вас используется в формате SVG, если же у пользователя поддерка SVG не предусмотрена браузером выводиться будет альтернативное изображения в формате PNG.
Вся область логотипа и подпись снизу будет обернута DIV с именем center для того, что бы все объекты внутри распологались по центру. Клик по картинке будет переводить вас на главную страницу сайта (рисунок 1.11).

1.11 - Код добавления логотипа на страницу.

1.12 - Логотип технологии SVG и формата PNG.

– Следующим шагом будет создание навигации на сайте. Стиль навигации уже прописан в CSS файле. Вам осталось добавить ссылки между тегоми nav. В конце добавим div clearfix. Clearfix - метод отмены действия float без изменения структуры HTML-документа (рисунок 1.13).

1.13 - Код ссылок для вставки навигации

– Добавьте копирайт в подвал сайта между тегами footer (рисунок 1.14).

1.14 - Добавлены meta и link данные

– Дизайн готов. Добавим обзац с текстом Контент, для визуального восприятия области для контента.

1.15 - Выделеные области нужно добавить на свою страницу.

Поздравляем! Вы создали свою первую веб-страницу на HTML5 (рисунок 1.16): добавили текст и цвета, добавили изображения и подключили CSS, а также быстро создали профессиональную веб-страницу. Вы выполнили предварительный просмотр страницы в браузере (рисунок 1.16).

1.16 - Предварительный просмотр веб-страницы

Контрольные вопросы

1. Какой редактор используется в уроках для редактирования страниц HTML5?
2. Между какими тегами размещается пара тегов ?
3. Какой метатег сообщает браузеру, что сайт предназначен для просмотра как на персональных компьютерах, так и на мобильных устройствах?
4. При добавлении логотипа была использована технология SVG, что будет отображаться браузером, если браузер не поддерживает SVG?
5. Между какими тегами распологаются ссылки навигационного меню сайта?