Курс Web-Дизайн, создание сайта на HTML и CSS - является фундаментальным для освоения любой специальности или профессии но направлению создания сайта. Предлагаем вашему вниманию подробную программу обучения по этому направлению.
Программа обучения по курсу Web-дизайн, создание сайта на HTML и CSS
Занятие 1. Основные принципы и технологические направления создания современных web-сайтов. Что такое HTML и CSS. Введение в разработку сайта. Создание первого проекта в Adobe Dreamweaver, настройка программы и знакомство с интерфейсом.
На 1 занятии мы определяем с учащимися что такое сайт в принципе. На примере любого проекта открытого в браузере – нажимаем комбинацию клавиш Ctrl+U и видим весь исходный код рассматриваемого проекта. На основании этого становится понятным что такое html модель сайта. Исходный код проекта так-же позволяет рассмотреть что такое тэговая модель языка разметки html, где каждый элемент заключенный в угловые скобки <…> ни что иное как тэг или дескриптор.
Создаем первую пустую веб-страницу, набрав в обычном блокноте следующий код:
<html>
<head>
<title>Первая страница сайта</title>
</head>
Привет мир
<body>
</body>
</html>
На основании этого формируем представление с чего начинается создание любого сайта – с создания первой пустой страницы, каждая из которых имеет логическую структуру состоящую из головы <head> и тела <body> документа, где голова содержит специальную информацию не видимую пользователю и служащая для правильного отображения сайта и успешного продвижения в сети интернет.То, что содержится в теле сайта – это и есть контент который может видеть пользователь.
Знакомимся с программой Adobe Dreamweaver в которой процесс создания сайта становится удобным, быстрым и эффективным. Настраиваем программу под себя и под компьютер, создаем первый проект и дальнейшее обучение проводим именно в программе Adobe Dreamweaver.
Создаем первую страницу учебного проекта и рассматриваем структуру и назначение тэгов, которые Adobe Dreamweaver создает автоматически при создании страницы. Вставляем необходимый контент в голову и тело сайта и учмся воздействовать на него с помощью атрибутов.
Занятие 2. Создание первой web-страницы. Теги форматирования текста - заголовки и абзацы. Понятие атрибута тега. Использование CSS для оформления веб-страницы.
В ходе второго занятия осваиваем оформление текстового содержания с использованием специальных тегов для создания заголовков <h1>-<h6>, параграфов <p> тегов ul, ol, li – для оформления маркированного и нумерованного списка, тегов специальных возможностей br, pre, strong, em, hr. C помощью данных дескрипторов создается отформатированный и осмысленный текст. В ходе создания данного текста объясняются основные моменты влияющие на поисковую привлекательность сайта сточки зрения контента.
Начинаем осваивать каскадные стилевые инструкции которые позволяют стилизовать содержимое всех страниц сайта. Осваиваем основные стили свойственные текстовому содержимому (выравнивание-text-align, цвет-color, гарнитура шрифта-font-family, внешние и внутренние отступы-margin и padding, границы текстовой области-border и фон-background). Рассматриваем принципы создания стилизованной web-страницы с текстовым содержанием. В результате второго урока получаем законченную стилизованную страницу с текстовым содержанием.
Занятие 3. Оптимизация изображений для web-сайтов и вставка на веб-страницу. Работа в программе Adobe Photoshop.
Изображение – основа любой страницы сайта. Прежде чем вставить изображение на страницу сайта необходимо его должным образом оптимизировать, во-первых, изменить размер до необходимого, этот размер зависит от структуры и тематики сайта и для каждого случая бывает разным. Во-вторых, необходимо изменить разрешение изображения до 72 пикселей на дюйм – это международный стандарт для изображений которые отображаются на электронных устройствах. Для достижения данных параметров мы используем программу Adobe Photoshop. Данная программа позволяет сохранять изображения с гибкостью параметров при использовании специального компонента программы – «Сохранить для веб и устройств». Подбираем два изображения и сохраняем с заданными параметрами, после чего вставляем данные изображения на страницу где у нас уже имеется текст. Вставка изображения на страницу происходит с использованием тега вставки изображений img, атрибутов специальных возможностей данного тега: ширины(width), высоты(height), альтернативного текста(alt), и описания изображения(title). Затем мы позиционируем изображения на странице и определенным образом стилизуем (заключаем в рамки, добавляем тень и т.д.), все это происходит с помощью стилей CSS для корректного отображения и позиционирования изображения на web-странице: обтекание(float), отступы(margin), границы(border), скругления(border-radius). Так -же рассматриваем использование изображения в качестве фона web-страницы. В результате этого мы получаем стилизованную страницу с текстом и изображениями в качестве контента. Данная страница отвечает всем современным требованиям сайтостроения для данного этапа обучения.
Занятие 4. Основы верстки web-страницы. Особенности верстки в HTML 4.01 и в HTML 5.
Верстка страница – основа сайтостроения, именно от этого зависит удобство сайта для пользователя, способность каждой страницы сайта быть отзывчивой в зависимости от устройства на котором она отображается. Рассматриваются различные виды верстки страницы – блочная, табличная, гибридная, преимущества и недостатки каждой из версток. Упор делается на блочную верстку, так как именно этот тип верстки на сегодняшний день является наиболее используемым и востребуемым. Создаем каркаса страницы с использованием тега div. Тег div как контейнер для удобного и эффективного позиционирования с присвоением имени каждому контейнеру div через идентификатор id – это то что делается для создания основного каркаса сайта. Рассматривается техника применения селектора идентификатора для тега div для удобного и адаптивного позиционирования элементов web-страницы. Изучаются основные свойства, сообщаемые через селекторы идентификаторов для тегов div непосредственно тегам div с соответствующими идентификаторами: ширина(width), высота(height), выравнивание(margin), фон(background), границы(border), обтекания(float), абсолютное(absolut) и относительное(relativ) позиционирование(position), понятие слойности(z-index) Рассматривается понятие очистки обтекания(clear) при блочной верстке. В результате получаем законченный каркас сайта в который мы можем вставлять необходимый контент для удобного отображения информации.
Занятие 5. Понятие гиперссылки. Типы и виды ссылок (абсолютные и относительные). Создание меню сайта.
На данном занятии изучаем ссылки – они основа интерактивности сайта. Ссылка создается с использованием тега ссылки a, атрибутов ссылки: href, titlt, target. С использованием ссылок и CSS мы создаем навигационные меню для блока навигации в горизонтальном блоке навигации, для левой колонки – там мы помещаем вертикальное меню и в подвале сайта – там мы помещаем вспомогательное меню которое повторяет верхнее горизонтальное, но в другом стилевом оформлении. Учимся создавать ссылку из изображения, а так-же формируем понимание что такое карта изображения, это позволяет использовать одно изображение как множество ссылок. Изучаем что такое ссылка на адрес электронной почты – это позволяет пользователю удобно написать владельцу сайта письмо или сообщение и рассматриваем ссылку на якорь – это позволяет создавать удобную навигацию внутри одной отдельно взятой страницы. После создания всех меню с помощью ссылок создаются остальные страницы сайта. Рассматриваются такие вопросы как – архитектура и строение сайта, как работает сайт в сети интернет, как устроен и работает сервер. В результате мы получаем готовый, многостраничный проект, но пока без контента.
Занятие 6. Тип контента для каждой из страниц сайта. Формы и таблицы HTML.
Рассматриваем виды контента, ведь каждая страница сайта содержит различный контент. Например – главная страница содержит в большинстве случаев текст, изображения и списки. Страница контактов – форму обратной связи а страница услуг содержит табличные данные. Рассматриваются различные типы сайтов и каким образом формируется контент в зависимости от тематики сайта. Для оформления и наполнения остальных страниц сайта мы изучаем теги таблиц table, tr, td и учимся создавать таблица и наполнять их данными с использованием атрибутов colspan и rowspan для объединения строк и рядов таблицы а так -же каскадных стилевых инструкций CSS.
Рассматриваем теги, которые создают форму обратной связи form, input, textarea, select и атрибуты этих тегов action, method, name, type. С помощью данных тегов мы создаем полноценную форму обратной связи на странице контактов, таким образом завершая создание проекта.
Записаться на курс Web-Дизайну, HTML и CSS