Студопедия

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

Разделы сайта

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






  • Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта

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


    ⇐ ПредыдущаяСтр 2 из 4Следующая ⇒




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

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

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

     

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

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

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

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

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

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

     

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

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

     

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

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

     

    Ø Что такое HTML?

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

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

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

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

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

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

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

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

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

    Забиваем Сайты В ТОП КУВАЛДОЙ - Уникальные возможности от SeoHammer
    Каждая ссылка анализируется по трем пакетам оценки: SEO, Трафик и SMM. SeoHammer делает продвижение сайта прозрачным и простым занятием. Ссылки, вечные ссылки, статьи, упоминания, пресс-релизы - используйте по максимуму потенциал SeoHammer для продвижения вашего сайта.
    Что умеет делать SeoHammer
    — Продвижение в один клик, интеллектуальный подбор запросов, покупка самых лучших ссылок с высокой степенью качества у лучших бирж ссылок.
    — Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
    — Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
    — SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.
    SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней.
    Зарегистрироваться и Начать продвижение

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

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

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

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

    Теперь возьмите карточки задания и ответьте на поставленные вопросы. На выполнение данного задания дается 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 балл к общей оценке за урок.

    Сервис онлайн-записи на собственном Telegram-боте
    Попробуйте сервис онлайн-записи VisitTime на основе вашего собственного Telegram-бота:
    — Разгрузит мастера, специалиста или компанию;
    — Позволит гибко управлять расписанием и загрузкой;
    — Разошлет оповещения о новых услугах или акциях;
    — Позволит принять оплату на карту/кошелек/счет;
    — Позволит записываться на групповые и персональные посещения;
    — Поможет получить от клиента отзывы о визите к вам;
    — Включает в себя сервис чаевых.

    Для новых пользователей первый месяц бесплатно.
    Зарегистрироваться в сервисе

     

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

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

    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. Документы письменного инструктирования

     


    ⇐ Предыдущая1234Следующая ⇒




    © 2023 :: MyLektsii.ru :: Мои Лекции
    Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
    Копирование текстов разрешено только с указанием индексируемой ссылки на источник.