II. Вводный инструктаж.

Мотивация учебной деятельности и сообщение темы урока:

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

Запишите тему урока: «Работа с онлайн-сервисами. Знакомство с языком HTML». Мы должны научиться переводить тексты с разных языков, вставлять изображения, связывать страницы гиперссылками.

Актуализация:

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

Ø Для чего предназначены онлайн сервисы?

Для облегчения работы с ПК

Ø Что такое онлайн сервис?

Ряд web служб и приложений оказываемые Интернетом, такие как почта, хранение документов, закладок, файлов. Ими можно пользоваться независимо от места доступа в Интернет, браузера, и компьютера.

Ø Как создать новый документ в Adobe DreamViewer?

Файл -> Создать –> Пустой шаблон -> HTML

Ø Какие еще типы документов можно создать?

Пустой шаблон, пустая страница, страница из шаблона, страница из образца, другой.

Ø Что такое HTML?

HTML — стандартный язык разметки документов в интернете

Ø Как вставлять комментарии в HTML?

с помощью знаков <! - - и - - >

Ø В чем отличия < b> и < strong>, < i> и < em>?

< b> и < i> - тэги физического выделения, то есть вы принудительно заставляете выделять текст каким-то видом шрифта. < strong> и < em> - тэги логического выделения.

Ø Как поместить текст, картинку или табличку в центре экрана?

Нужно использовать атрибут align = “center”

Ø В каком регистре лучше писать HTML-код?

Раньше считалось, что это безразлично. Но с приходом XHTML на этот вопрос появился однозначный ответ - все теги, атрибуты и предопределенные значения пишем в нижнем регистре.

Ø Обязательно ли использовать кавычки в значениях атрибутов?

Кавычки можно опускать, если значение атрибута:

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

- начинается с буквы

Теперь возьмите карточки задания и ответьте на поставленные вопросы. На выполнение данного задания дается 5 минут. За правильно выполненные задания карточек к вашей общей оценке за вводный инструктаж будет добавлен 1 балл.

Проверка правил техники безопасности:

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

1. При создании ссылки-изображения, почему то появляется синяя рамка. Вопрос: Как убрать рамку?

Ответ: Точно так же, как убирают любую другую рамку вокруг любой другой картинки: < img border=" 0"... />

2. Страничка сверстана по всем правилам верстки, но в Internet Explorer, почему то отображается не так как нужно.

Вопрос: Что нужно сделать что бы во всех браузерах отображалось нормально?

Ответ: Нужно обеспечить кросс-браузерность

Инструктирование учащихся по выполнению работ:

(показ в быстром темпе, в замедленном, рабочем темпе, учащиеся повторяют приемы за своими компьютерами)

Обратите внимание на экран мультимедийного проектора, я покажу вам новые приемы, с которыми вы столкнетесь при верстке:

Ø Перевод текста с Английского на русский

Скопировать текст в поле, выбрать языки, перевести

Ø Обратный перевод

Поменять языки в выпадающем списке

Ø Вставка таблицы

Выбрать таблицу на ПИ, выбрать количество строк и столбцов, и выбрать где будет находится загаловок

Ø Вставка картинки

Использовать тег < img src=”ссылка на картинку”/>

Ø Редактирование ширины и высоты картинки

К тегу добавить два атрибута width и height

Ø Позиционирование картинки

К тегу добавить атрибут align=”[justyfi, left, right, top, bottom, center]”

Ø Привязка страницы

Вставить тег < a href=”ссылка”>

Ø Разбор типичных ошибок

Рассмотрим типичные ошибки при верстке:

Закрепление материала вводного инструктажа:

Давайте проверим, насколько вы усвоили материал урока. У вас на столах лежат кроссворды и вопросы к ним. Разгадайте кроссворд и тем самым еще раз повторите основные этапы верстки документов. На разгадывание кроссворда отводится 5 минут. За правильное выполнение данного задания вам будет добавлен 1 балл к общей оценке за урок.

Вопросы кроссворда:

По горизонтали:

1) Инструменты, используемые при создании web-страниц?

теги

3) Тег для перехода с одной страницы на другую?

ссылка

5) Для чего предназначен тег < div>?

блок

7) С помощью тега ul создаётся...

список

9) Что содержится между тегами title

заголовок

11) Какое форматирование осуществляет тег u

подчеркивание

13) Тег br осуществляет … строки

перевод

15) Списки бывают … и вложенные

одноуровневые

По вертикали:

2) Какую информацию можно записать в тегах?

атрибут

4) Для чего предназначен тег < img>?

картинка

6) Средство просмотра web-страниц.

браузер

8) Тип маркера при использовании атрибута square

квадрат

10) Многоуровневые списки

вложенные

12) Какое форматирование осуществляет тег i

курсив

14) Какое форматирование осуществляет тег center

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

Итак, цель нашего урока достигнута, сегодня мы научились верстать web-документы.

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

По ходу проведения вводного инструктажа вы заработали следующие оценки…

На следующем занятии будет тематическая аттестация.

7. Документы письменного инструктирования