СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ

Благодаря готовым учебным материалам для работы в классе и дистанционно

Скидки до 50 % на комплекты
только до

Готовые ключевые этапы урока всегда будут у вас под рукой

Организационный момент

Проверка знаний

Объяснение материала

Закрепление изученного

Итоги урока

Календарно-тематическое планирование по Веб-дизайну

Категория: Информатика

Нажмите, чтобы узнать подробности

календарное планирование по web-дизайну

Просмотр содержимого документа
«Календарно-тематическое планирование по Веб-дизайну»

АНО ПО «Ипатовский академический многопрофильный колледж»







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





Радченко Александра Валерьевича



По дисциплине

«Создание сайтов и web-дизайн»

















Руководитель цикловой комиссии естественно-математических дисциплин


Кузнецов В.Н.

Подпись Ф.И.О



Календарное планирование по дисциплине «Создание сайтов и web-дизайн»

наименование разделов и тем

количество часов

вид контроля

Дата проведения занятия

планируемое

фактическое

раздел 1. Основы гипертекстовой технологии

1. история Интернета

1

тест



2. front-end и back-end разработка

1

тест



3. Общий вид web-страницы

1

тест



Раздел 2. Структура Web-страницы

1. Раздел «head» web-страницы

1

практическая работа



1.1. Метатеги html

1

практическая работа



2.Раздел «body» web-страницы

1

практическая работа



2.1. шрифты в html. Текстовые эффекты

1

практическая работа



2.2. Медиаобъекты на web-cтранице

3

практическая работа



2.3. Формы в html

1

практическая работа



3. Оформление web-страницы средствами CSS

3.1. Что такое CSS

1

практическая работа



3.2. селекторы и свойства CSS

1

практическая работа



4. Элементы SEO

4.1. Что такое SEO

1

тестирование



4.2. сервисы подбора ключевых слов

1

практическая работа



4.3. Составление описания web-страницы

1

практическая работа





Темы практических занятий

Практическая работа №1. Тема «Структура HTML-документа. Создание web-страницы».

Цель: научиться создавать простейшие HTML-документы, разбивать текст на абзацы, выполнять выравнивание различными способами, просматривать содержимое web-страниц с помощью Web-браузера.

Теги – определенные последовательности символов, заключенные между знаками

HTML-документ – все, что заключено между тегами html и html.

Структура html-документа

Заголовок находится между тегами title и title и появляется в верхней рамке окна программы просмотра.

Тело web-страницы находится между тегами body и body

Задание 1.

1. Откройте текстовый редактор Блокнот.

2. Введите в окно программы следующий текст:

Моя web-страница.

pПривет! Это моя web-страничкаp

body

html.

Сохраните текст в формате html.

Задание 2. Форматирование текста.

1.Для форматирования текста используются следующие группы тегов:

h1…h5 - задают размеры текста

, , , , , , , ,

code, kbd, samp, var, pre - задают внешний вид текста

Оберните слово «привет» тегами em, а слово страничка – тегами strong.

2. Для изменения цвета шрифта используется тег font-color. Цвет шрифта задается либо английскими названиями, либо шестнадцатеричными кодами. Например, font-color=#ADFF2F позволяет сделать текст салатовым, а font-color=#FF0000 - ярко красным. Шестнадцатеричную таблицу цветов можно посмотреть, например, здесь - https://basicweb.ru/html/html_colors.php

Введите в web-страницу текст «Каждый охотник желает знать, где сидит фазан». Слово «Красный» сделайте красным, «охотник» - оранжевым, «желает» - желтым, «знать» - зеленым, «где» - голубым, «сидит – синим и «фазан» - фиолетовым.

Практическая работа №3. Таблицы в html.

Тег создания таблиц в html - table. Cоздание строк таблицы - tr. Ячейки создаются тегом .

Давайте создадим новую страницу в html. Представим, что мы должны создать телефонную книгу для сайта. Для красоты оформим ее в виде таблицы. Итак, в нашей телефонной книге будут следующие записи:

Мама +79605870400

Папа +79886581402

Сестра +79185542201

Тетя +78652348200.

Открываем «Блокнот» и вводим следующий код (пояснения в скобках не вводим!):

телефонная книга

body

table (этим тегом мы сообщаем браузеру, что дальше данные представляются в форме таблицы)

(от англ. “table row” – ряд таблицы)

(от англ. “table data” – данные таблицы, создают ячейку) мамаtd

td папаtd

tdсестраtd

tdтетяtd

tr

Второй ряд создаем самостоятельно!

Форматируем текст (см предыдущую работу) следующим образом: Имена выделяем жирным шрифтом, телефоны курсивом.



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

К интерактивным элементам пользовательского интерфейса сайта относят выпадающие списки, кнопки, радиокнопки, текстовые поля.

Подобные элементы создаются с помощью тега input. Например, input type=”submit” создает кнопку отправки на сайт введенной пользователем информации. Ввод текста организуется атрибутом “text”. Выпадающий список организуется атрибутом «select», опции списка атрибутом option, a радиокнопка, которая позволяет пользователю выбрать один из нескольких предопределенных вариантов – тегом “radio”. Для создания многострочного поля ввода используется тег text area

Давайте сделаем страницу интерактивной, то есть взаимодействующей с пользователем.

Под текстом из лабораторной работы №1 введите: «Выберите цвет». Под текстом введите

select

red

orange

yellow

green

blue

purple

Выбор одного из нескольких вариантов используем радиокнопку (см. рис)

Радиокнопка создается тегом input type=”radio”

А таким тегом создадим кнопку «Отправить»

Если Вы бывали на web-сайтах серьезных компаний, Вы наверняка обращали внимание и на такие формы:

Такие формы помимо кнопок и радиокнопок обязательно содержат поля для ввода произвольного текста. В html одно- и многострочные поля ввода создаются различными тегами. Для создания однострочного поля ввода используется тег input type=”text”. То, что он создает, представлено на рис. Ниже:

Задание.

Проверьте, что получится при вводе тега input type=”password

А при вводе тега input type=”reset”?

А если ввести тег

Многострочная форма ввода текста создается с помощью тегов textarea и textarea. На рисунке «Анкета» многострочная форма ввода представлена полем «Комментарий».

Тег textarea может иметь следующие атрибуты:

accesskey - Переход к полю с помощью сочетания клавиш.

- Автоматическое получение фокуса

cols - ширина поля в символах

disabled - блокирует изменения элемента

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

maxlenghth - максимальное число введенных символов

name имя поля. Служит для идентификации формы

- замещающий текст

- блокирует изменение поля пользователем

required - обязательное для заполнения поле

rows - высота поля в строках

tabindex -порядок перехода между элементами при нажатии на клавишу tab

- параметры переноса строк

Задание

Создать форму для обратной связи, включающую в себя комбинацию одно- и многострочных полей ввода, кнопок и радиокнопок. Сохранить работу в html формате. Показать работу преподавателю.



Практическая работа №5 Элементы CSS

Аббревиатура CSS расшифровывается как Cascade Style Spreadsheets – Каскадные Таблицы Стилей. То есть, будучи указанным в одном месте, элемент сохранит свое форматирование на протяжении всей страницы.

Каскадные таблицы стилей выглядят примерно следующим образом:

Они состоят из названия тега, к которому применяется данная таблица и набора селекторов, определяющих поведение тега.

Font – теги, указывающие свойства текста:

Family – определяет начертание текста

Size – определяет размер текста

Сolor – цвет текста.

Задание. Измените CSS-свойства в прошлой работе

Практическая работа №6. Элементы поисковой оптимизации в Web-дизайне.

Большинство пользователей ищут в сети конкретную информацию, например, «купить красивые тапочки». Такой человек заходит в сеть и открывает первые пять-десять сайтов из поисковой выдачи. Следовательно, сайт, продающий красивые тапочки, должен выдаваться на самом верху поисковой выдачи. Этим занимается поисковая оптимизация. Поисковая оптимизация (англ. SEOSearch Engine Optimization – оптимизация для поисковых систем) – это комплекс мер по внутренней и внешней оптимизации для поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам пользователей с целью увеличения сетевого трафика и последующей монетизации этого трафика).

На SEO сайта влияют следующие факторы:

1. Использование ключевых слов в теге title

2. Качество и релевантность внешних ссылок.

3. Общая ссылочная популярность сайта – количество и качество входящих ссылок

4. Релевантность текста сайта ключевым словам

5. Уникальность контента сайта

6. Взвешенный и тематический индекс цитирования сайта Яндекс. Тематический индекс цитирования (ТИЦ) – определение авторитетности сайта с учетом ссылок на него с других ресурсов. Взвешенный индекс цитирования определяется для каждой из страниц сайта.

7. Участие в ссылкообменных схемах

8. Слишком большая плотность ключевых слов («тошнота» страницы)

9. Тематическая релевантность входящих ссылок

10. Слишком большое время ответа сервера

11. ключевые слова в заголовках.

Для подбора ключевых слов используются специализированные web-сервисы. Одним из наиболее популярных в России является wordstat от Яндекс. Сервис позволяет подбирать наиболее популярные ключевые слова, в том числе, по регионам поиска.

Практическое задание

В сервисе Яндекс wordstat проверьте популярность запроса с названием колледжа. Выпишите отдельно статистику по всем видам устройств, с которых производились запросы.



Тестовые задания на сайте https://testua.ru/informatika/1179-testy-po-html-s-otvetami.html


1. О чем говорит тэг

?

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

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

+ Текст, заключенный в тэг, будет расположен по центру страницы

2. Какие единицы измерения могут использоваться для атрибута ширины?

+ Пиксели и %

- Миллиметры и сантиметры

- Пиксели и миллиметры

3. Использование тэга … позволяет добавлять одну строку текста без начала нового абзаца.

-

+

-

4. Объясните смысл кода, представленного ниже:

+ Будет создана таблица, состоящая из 1 ряда и 3 колонок

- Будет создана таблица, состоящая из 3 рядов и 1 колонки

5. Напишите код HTML, который бы создавал кнопку отправки заполненной формы. Имя кнопки – ОК.

-

-

input type="submit" value="OK"

+

6. Какой тэг при создании страницы добавляет имя страницы, которое будет отображаться в строке заголовка в браузере пользователя?

+ …

- …

- …


Скачать

Рекомендуем курсы ПК и ППК для учителей

Вебинар для учителей

Свидетельство об участии БЕСПЛАТНО!