Программа курса блочной верстки сайтов на технологиях HTML и CSS
Курс по верстке, предлагаемый учебным центром «Интеллект» рассчитан на разработчиков и дизайнов для интернет страниц, который предусматривает изучение этого процесса из самых азов, закрепляя знания исключительно на практических примерах. И после данного курса Вы сможете с легкостью представлять и реализовывать все поставленные перед Вами задачи, которые хочет видеть заказчик.
HTML теги - это базовые понятия, которые просто необходимо знать каждому верстальщику, но далеко не единственные, которые применяются для успешной и функциональной верстки. По этому, для оптимизации, а соответственно и улучшения качества и скорости вашей работы, в курс верстки включена программа по работе с каскадными таблицами стилей CSS, освоив которую вам удастся в несколько раз увеличить производительность и качество своего верстального труда.
Существует два основных типа верстки: таблицная и блочная, названия которых говорят сами за себя. При табличной верстке верстальщик создает сайт на основе таблицы, разбивая его на функциональные части, такие как левая, правая и центральная колонки. А также, путем объединения нескольких колонок в одну, реализовывает такие блоки как хэдер, футер, контент и прочие. При блочной верстке сайт разбивается на функциональные части с помощью блоков, зачастую это теги <div>, с помощью которых создают все выше перечисленные функциональные блоки и колонки, поэтому такую верстку часто называют "дивной". На сегодняшний день табличная верстка считается устаревшей, которая не удавлетворяет стандарту web 2.0. Поэтому все современные сайты верстаются с помощью блочной верстки, при использовании которой открывается намного больше возможностей самой технологии верстки. Но такая верстка подразумевает обязательное использование каскадных таблиц стилей CSS, поэтому хороший и практический курс по верстке невозможно представить без таких технологий как HTML и CSS.
В основе этого курса лежит работа с HTML тегами и CSS селекторамми, которые разбиваю картинку дизайна на различные функциональные части, и представляют эти элементы в виде блоков, которые в дальнейшем, имеют возможность изменятся, не зависимо друг от друга. То есть, разверстав статическую картинку с дизайном, вы можете получить множество вариаций этой картинки, преобразовав ее тем самым в так называемое динамическое изображение.
Вы научитесь не только тому, каким образом разверстать вашу картинку, а также, как правильно включать в нее дополнительные элементы, такие как текст, другие картинки, ссылки и многое другое. Освоите технологии создания специальных форм, например, для отправки почты или заполнения анкеты, и проанализируете их основные преимущества и недостатки.
HTML теги - это базовые понятия, которые просто необходимо знать каждому верстальщику, но далеко не единственные, которые применяются для верстки. По этому, для оптимизации, а соответственно и улучшения качества и скорости вашей работы, в курс верстки включена программа по работе с каскадными таблицами стилей CSS, освоив которую вам удастся в разы увеличить производительность и качество своего верстального труда.
Что нужно знать, чтобы начать заниматься по этому курсу?
- Этот курс является основой для создания любого сайта, неважно каким языком программирования он будет написан, поэтому Вы правильно делаете, что хотите начать обучение именно с него. Мы можем Вам посоветовать разве что пройти курсы Photoshop перед изучением данного курса, чтобы Вам было легче оперировать с макетом, и Вы уверено пользовались фотошопом во время верстки и сосредотачивались только на верстке. В таком случае Вы получите максимальный эффект от данного курса.
Также, в ходе курса будет рассмотрен ряд практичных моментов, о том каким образом применять те или иные возможности, изученные в вышеуказанном курсе, в реальных условиях. Вы получите информацию о том, какие ошибки чаще всего допускаются в ходе верстки макетов, научитесь их не допускать, а в случае если допустили, то быстро находить и исправлять. Узнаете каким образом можно выложить сайт в Интернет, что такое хостинг и домен, какие трудности могут вас подстерегать при выполнении этого процесса.
Уметь верстать дизайн, это очень важное качество для любого дизайнера. Ведь чаще всего пользователь видит ваш дизайн не в исходном, а именно в разверстанном виде. А значит не обладая мастерством верстки, Вам придется доверять ваше детище для доработки другому специалисту, что может резко ухудшить его качества и индивидуальность. Поэтому, если хотите, чтобы ваш дизайн видели именно в том виде в котором Вы его и задумали, то научитесь самостоятельно его верстать.
На наших курсах Вы легко сможете освоить эти навыки, в рекордно быстрые строки, по очень доступным и конкурентным ценам. Записывайтесь на курс верстки, и Вы не пожалеете.
Всего 8 занятий в нашем учебном центре и Вы сможете:
- Использовать самый современный редактор для верстальщиков Adobe Dreamweaver, а также использовать Adobe Photoshop при верстке макетов, нарисованных в этой программе и сохраненных в формате PSD
- Верстать сверхсложные проекты сайтов, даже для таких движков как Joomla! и прочие, используя современную блочную верстку на тегах <div>
- Использовать такие технологии как язык разметки HTML и каскадные таблицы стилей CSS
- и многое, многое другое!
Чего вы ждете? Узнайте цену на курсы HTML верстки сайтов Сейчас!
Программа курса*:
* Помните, что это лишь базовый вариант программы. При желании Вы можете откорректировать ее под свои задачи.
1-й урок: Основы терминологии и общая информация о создании сайтов
- Знакомство со средой разработки Adobe DreamWeaver
- Знакомство с HTML. Что такое тег
- Рассмотрение основных тегов для работы с текстом, приведенных в панели Вставка/Текст (теги strong, em, p, h1, h2, h3 и прочие)
- Тег переноса строки br. Разница между блочными и линейными тегами
- Тег для вставки цитаты blockquote
- Тег для вставки форматированного текста pre
- Упорядоченный и неупорядоченный списки ol и ul, и элементы списка li
- Атрибуты тегов (align, title и прочие)
- Вставка спец. символов, которых нет на клавиатуре
2-й урок: Работа с ссылками и мультимедиа
- Рассмотрение тегов для вставки основных элементов html, приведенных в панели Вставка/Общий
- Вставка комментария
- Вставка ссылок тегом a
- Вставка ссылки на электронную почту
- Вставка якоря (именованной привязки)
- Разделитель hr
- Вставка картинок тегом img
- Вставка таблиц
- Вставка описания и ключевых слов страницы
- Блочный тег div и линейный тег span
3-й урок: Работа с формами и их элементами
- Рассмотрение тегов для вставки основных элементов форм, приведенных в панели Вставка/Формы
- Тег form для добавления формы на сайт
- Создание формы авторизации или формы обратной связи с использованием таких элементов формы как текстовое поле, поле для ввода пароля, область текста, флажок, переключатель, кнопка отправить и сбросить форму
- Создание подписей к полям с помощью тега label
- Объединение нескольких полей с помощью тега набора полей fieldset
4-й урок: Работа с каскадными таблицами стилей CSS
- Знакомство с каскадной таблицей стилей CSS
- Подключение внешней таблицы стилей к html странице с помощью тега link
- Обращение к тегу, идентификатору и классу
- Существенная разница между идентификатором и классом
- Обращение к элементу по родительскому тегу, идентификатору или классу
- Свойства color и background-color
- Свойство для выравнивания текста по горизонтали text-align
- Свойство line-height для изменения междустрочного интервала (высоты строки)
- Свойство text-indent для смещения текста (Отступ для красной строки)
5-й урок: Работа с основными свойствами CSS
- Создание красивого кнопочного меню на неупорядоченном списке ul
- Скрытие маркеров свойством list-style-type:none
- Свойство background-image
- Указание размеров с помощью свойств width и height
- Отображение линейного элемента блочным с помощью свойства display:block
- Псевдокласс :hover, отвечающий за наведение на элемент
- Псевдокласс :active, отвечающий за нажатие на элемент
- Внутренний отступ элементов padding
- Внешний отступ элементов margin
- Граница элементов border
6-й урок: Основы блочной верстки сайта с макета
- Основы верстки сайта
- Табличная и блочная (div-ная) верстка
- Основы работы с макетом сайта, нарисованным в программе photoshop в psd-формате
- Основные подходы для заливки блока градиентом (используется изображение в 1px)
7-й урок: Создание колонок и основной разметки сайта
- Разметка html-страницы на колонки с помощью свойства float:left
- Использование внешнего отступа колонок слева и справа чтобы последняя колонка не съезжала в Internet Explorer
- Использование свойства очистки clear:both после последней колонки чтобы растянуть родительский блок
8-й урок: Оформление внешнего вида сайта по макету
- Оформление красивого меню на неупорядоченном списке ul
- Создание определенного вида для выбранного пункта меню, на котором находится пользователь
- Преобразование вертикального меню в горизонтальное
- Доработка остальных блоков на сайте
- Вывод контента сайта с помощью таблиц и его форматирование