Студопедия

Главная страница Случайная страница

КАТЕГОРИИ:

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






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=”ссылка”>

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

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

Тип документа не указан Не использование Doctype, похоже, одна из самых распространенных ошибок.
Когда элемент незакрыт Приводит к тому, что при проверке кода не только всплывают ошибки, но и может серьезно исказиться дизайн шаблона.
В самозакрывающихся элементах опущен символ / Как правило, в большинстве HTML-элементов имеются отдельные закрывающиеся теги (< /div>, например). Но такие элементы, как input, img, meta – самозакрывающиеся. Это значит, что перед закрывающей скобкой они должны иметь символ /.
Специальные символы не конвертированы Это ошибка, как правило, появляется из-за амперсанта или двойных кавычек, которые копируются из Word.
В URL – тоже не конвертированные символы Исходя из вышеописанного пункта, и в строках URL должны быть кодированы специальные символы, особенно это касается амперсант.
Когда внутри строчных находятся блочные элементы Одно из главных правил HTML гласит, что блочные никогда не должны быть расположены внутри строчных элементов.
Когда у изображения отсутствует alt-атрибут В HTML-документе каждое изображение должно иметь alt-атрибут, в котором – описание содержания картинки.

 

 

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

Давайте проверим, насколько вы усвоили материал урока. У вас на столах лежат кроссворды и вопросы к ним. Разгадайте кроссворд и тем самым еще раз повторите основные этапы верстки документов. На разгадывание кроссворда отводится 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. Документы письменного инструктирования

 


Поделиться с друзьями:

mylektsii.su - Мои Лекции - 2015-2024 год. (0.01 сек.)Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав Пожаловаться на материал