ЦЕНТР ИНТЕНСИВНОГО ОБУЧЕНИЯ

+7 (963) 972-82-58

WEB-дизайн. HTML и CSS. Создание сайта с нуля.

УЧЕБНАЯ  ПРОГРАММА–

WEB-ДИЗАЙН. ОСНОВЫ СОЗДАНИЯ И ПУБЛИКАЦИИ

САЙТА В СЕТИ ИНТЕРНЕТ.

ОБЪЕМ 32  АКАДЕМИЧЕСКИХ  ЧАСА

Категория обучающихся:

Лица имеющие уверенные навыки работы на компьютере.

 

 

Цель обучения:

 

- обучение всех желающих современным технологиям по созданию web-страниц или многостраничных сайтов с использованием    языка разметки гипертекста HTML и каскадных стилевых инструкций CSS

- подготовка специалистов в сфере дизайна и создания web-страниц и многостраничных сайтов

Создание сайта с нуля

 

Лица, прошедшие обучение по настоящей дополнительной профессиональной  программе, обретают знания:

- основные принципы функционирования интернет сетей и взаимодействие пользователей с интернет ресурсами

- основы синтаксиса и использования языка разметки гипер текста HTML и его использование при создании web-страниц и сайтов

- основы синтаксиса и использования языка каскадных стилевых инструкций CSS и его использование при оформлении и верстке web-страниц и сайтов

- порядок, механизмы, этапы и технологические процессы создания web-страниц и сайтов, а так-же публикация готовых проектов в сети интернет с регистрацией в поисковых системах и на тематических площадках

- взаимодействие с реальным сервером, настройка хостинга и домена под конкретные задачи web-сайта

- основные принципы работы с программным обеспечением: Adobe Dreamweaver и Adobe Photoshop

- основы взаимодействия с заказчиком на создание сайта.

Уроки по созданию сайта

Лица, прошедшие обучение по программе «WEB-ДИЗАЙН. ОСНОВЫ СОЗДАНИЯ И ПУБЛИКАЦИИ САЙТА В СЕТИ ИНТЕРНЕТ», должны уметь:

- создавать отдельные web-страницы и сайты целиком используя язык разметки гипертекста HTML и каскадные стилевые инструкции CSS

- понимать, что такое техническое задание, правильно его интерпретировать и составлять

- разбираться в различных видах web-страниц, сайтов, в методах и стилях верстки, оптимизации страниц и графических изображений

 

- взаимодействовать с реальным сервером, публиковать отдельные web-страницы и сайты целиком в интернете посредством приобретения хостинга и домена с последующей настройкой необходимых служб и сервисов

- регистрировать сайты в поисковых системах и проводить первичную оптимизацию сайта в сети интернет.

 

Объем программы: 32  академических часа (академический  час – 45  минут, режим  занятий – от 4 до 6 академических  часа  в  день).

 

Форма обучения:  Индивидуальные, групповые занятия с преподавателем

Содержание  образовательной  (учебной) программы

 

Тема 1. Основы сайтостроения. Методы и технологии создания современных сайтов. Основы HTML. Этапы создания сайта целиком и стартовой (главной страницы). Использование программ Adobe Dreamweaver и Adobe Photoshop при создании сайта.

Основы создания сайта

Перечень основных вопросов, подлежащих изучению:

- общие сведения о технологии создания сайтов

- язык разметки HTML как основа создания любого сайта

- теговая модель языка HTML

- основные теги языка HTML

- базовые теги для создания пустой web-страницы

- определение будущего проекта web-сайта в программе Adobe Dreamweaver и знакомство с интерфейсом программы

- настройка программе Adobe Dreamweaver под текущий проект

- создание первой web-страницы в программе Adobe Dreamweaver и сохранение ее в проекте

- создание описательных meta-тегов страницы, описание и назначение данных тегов

- понятие DOCTYPE

- структура HTML – основные теги html, head, title, body, синтаксис языка

- основные теги для создания теста на web-странице h1-h6(теги заголовков),

p(абзац), создание страницы с текстовым содержанием.

Курсы по созданию сайта

 

Тема 2.  Основы поэтапного создания web-страницы. Правила форматирования текста с использованием текстовых тегов. Оформление текста с использованием атрибутов тегов. Введение в CSS (каскадные стилевые инструкции.

 

Перечень основных вопросов, подлежащих изучению:

 

- использование тегов h1-h6 для создания заголовков текстового содержания

- использование тегов p для создания абзацев текста

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

- оформление текста с помощью атрибутов тегов и тега font, понятие выравнивания текста, цвета текста и гарнитуры шрифтов

- определение технологии CSS как основного инструмента при стилизации и разметки страницы, принцип работы и взаимодействия CSS и HTML документов

- создание первого CSS  документа и соединение его c HTML страницей, понятие селектора тега, создание селекторов тегов для стилевого оформления текстового содержимого web-страницы

-  основные стили свойственные текстовому содержимому (выравнивание-text-align, цвет-color, гарнитура шрифта-font-family, внешние и внутренние отступы-margin и padding, границы текстовой области-border и фон-background)

- принципы создания стилизованной web-стриницы с текстовым содержанием

- теги ul, ol, li – для оформления маркированого и нумерованного списка

-теги специальных возможностей br, pre, strong, em, hr

-тег span, его назначение и возможности в стилевом оформлении текста

 

 

50+

Точное выполнение технческих заданий

100+

Заказчиков сайтов

40+

Реализованных web-проектов

1237+

Выпитых чашек кофе

10+

Положительных отзывов

 

Тема 3. Вставка изображений в web-страницу. Типы графический файлов подлежащих вставке в web-страницу. Оптимизация изображений для web-страницы с использованием программы Adobe Photoshop.

Web оптимизация изображений

 

Перечень основных вопросов, подлежащих изучению:

 

- типы графических файлов подлежащих вставке на web-страницу (jpg, png, gif) понятие размера и разрешения фотографии

- основные принципы оптимизации изображения для web в программе Adobe Photoshop, обрезка изображения, установка необходимого разрешения и установка размера в зависимости от ширины web-страницы

- сохранение изображения с использованием специальной функции программы Adobe Photoshop – сохранить для web и устройств непосредственно в папке проекта

- вставка изображения на страницу с использованием тега вставки изображений img, атрибуты специальных возможностей данного тега: ширина(width), высота(height), альтернативный текст(alt), описание изображения(title)

- стили CSS для корректного отображения и позиционирования изображения на web-странице: обтекание(float), отступы(margin), границы(border), скругления(border-radius)

- использование изображения в качестве фона web-страницы

- создание страницы с текстовым содержанием и вставкой изображений с обтеканием текста справа и слева

Уроки по блочной верстке сайта

 

Тема 4.  Верстка страницы. Создание каркаса страницы с использованием тега DIV

Перечень основных вопросов, подлежащих изучению:

- виды верстки страницы – блочная, табличная, гибридная, преимущества и недостатки каждой из версток

- создание каркаса страницы с использованием тега div

 

- тег div как контейнер для удобного и эффективного позиционирования с присвоением имени каждому контейнеру div через идентификатор id

- техника применения селектора идентификатора для тега div для удобного и адаптивного позиционирования элементов web-страницы

- основные свойства, сообщаемые через селекторы идентификаторов для тегов div непосредственно тегам div с соответствующими идентификаторами:

ширина(width), высота(height), выравнивание(margin), фон(background), границы(border), обтекания(float), абсолютное(absolut) и относительное(relativ) позиционирование(position), понятие слойности(z-index)

- понятие очистки обтекания(clear) при блочной верстке

Верстка сайта

 

Практическое  занятие № 1.

 

Содержание  занятия:

- создание схемы(эскиза) каркаса web-страницы: двухколончатая фиксированной ширины

- реализация данного эскиза в реальную web-страницу

 

1) Создаем HTML страницу, создаем CSS документ и соединяем его с HTML документом с использованием технологичных возможностей программы Adobe Dreamweaver.

2) Определяем основные контейнеры DIV для элементов web-страницы:

шапка сайта, навигационное меню, левая колонка сайта, контентная часть сайта и подвал(футер) сайта

3) Определяем в стилевом документе основные позиционные и стилевые свойства web-страницы: ширина(width), высота(height), выравнивание(margin), фон(background), границы(border), обтекания(float), абсолютное(absolut) и относительное(relativ) позиционирование(position), понятие слойности(z-index) понятие очистки обтекания(clear) при блочной верстке

4) Проверяем свойства и качества готового каркаса web-страница по адаптивным характеристикам к разнообразным электронным устройствам и мониторам различного разрешения а так-же в различных браузерах

5) Создание графического элемента – шапки сайта с использованием программы Adobe Photoshop. Вставка шапки сайта в каркас подготовленной web-страницы.

Создание контента для сайта

 

Тема 6.  Виды контента для остальных страниц сайта (статический, в виде вывода табличных данных, интерактивные формы)

Перечень основных вопросов, подлежащих изучению:

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

 

- теги для создания таблиц table, tr, td

- создание таблицы для вывода табличных данных на web-странице

- оформление таблицы с помощью соответствующих атрибутов тегов и с помощью каскадных стилевых инструкций CSS

- атрибуты colspan и rowspan для объединения строк и рядов таблицы

- варианты стилевого оформления страниц

- использование таблиц для создания каркаса web-страницы (табличная верстка)

- оформление страницы «Контакты» с использованием форм и полей для создания формы обратной связи, теги form, input, textarea, select и атрибуты action, method, name, type

- принцип работы формы обратной связи и полей

- создание простой и защищенной формы обратной связи с использованием технологии spry средствами программы Adobe Dreamweaver.

WEB-ДИЗАЙН. ОСНОВЫ СОЗДАНИЯ И ПУБЛИКАЦИИ

САЙТА В СЕТИ ИНТЕРНЕТ.

ОБЪЕМ 32  АКАДЕМИЧЕСКИХ  ЧАСА

 

Тема 5. Гиперссылки. Создание навигационного меню.

Перечень основных вопросов, подлежащих изучению:

- понятие гиперссылки, абсолютная и относительная гиперссылка

- тег ссалки a, атрибуты ссылки: href, titlt, target

- создание ссылки на web-странице, создание ссылки навигационного меню, создание всех ссылок навигационного меню с использованием технологичных возможностей программы Adobe Dreamweaver

Создание меню для сайта

 

- оформление ссылок горизонтального навигационного меню с помощью каскадных стилевых инструкций CSS

- оформление ссылок вкртикального навигационного меню с помощью каскадных стилевых инструкций CSS

- создание дублирующего меню для подвала(футера) сайта

- изображение как ссылка, создание интерактивных графических элементов (кнопок) на web-станице

- карты-изображения позволяющие привязывать ссылки к разным областям одного изображения

- ссылка на адрес электронной почты

- ссылка на якорь

- создание остальных страниц сайта согласно подготовленному навигационному меню – как завершающий этап создания каркаса сайта полностью для заполнения его контентом.

 

Практическое  занятие № 2.

Содержание  занятия:

 - окончательное оформление многостраничного сайта и подготовка его к публикации в сети интернет

- публикация сайта в сети интернет

 

 

Создать многостраничный сайт

 

1) визуальный и синтаксический анализ сайта, проверка всех страниц и функционирования навигационных меню сайта, соответствие каждой из страниц сайта наименованию пункта меню и тематике содержания

2) выбираем хостинг и находим свободное доменное имя, регистрация на хостинге, выбор тарифного плана

3) настройка хостинга – проверка серверных служб, создание связки домен-каталог сайта

4) рассматриваем различные протоколы связи с сервером – http(HyperText Transfer Protocol — «протокол передачи гипертекста») и ftp(File Transfer Protocol — протокол передачи файлов)

5) Создание соединения по  ftp протоколу с сервером хостинга с использованием программы Total Commander

6) Копирование файлов сайта на сервер с помощью программы Total Commander

7) Проверка работоспособности сайта в режиме реального размещения на сервере

8) Регистрация сайта в поисковой системе Яндекс, первичные настройки индексирования

9) Создание карты сайта, ее загрузка на сервер и указание карты сайта поисковой машине

 

 

Записаться на данный учебный курс

Идет отправка сообщения

Сообщение не отправлено. Повторите попытку позже.

Спасибо за Ваше сообщение

ЦЕНТР ИНТЕНСИВНОГО ОБУЧЕНИЯ

Copyright © Sansans. Designed and Developed by Sansans.

Dorus.ru