Инфоурок Информатика Другие методич. материалыПрактическая работа: " Средства создания и сопровождения сайта"

Практическая работа: " Средства создания и сопровождения сайта"

Скачать материал

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

Средства создания и сопровождения сайта

Цель работы:

1.      сформировать навыки создания шаблона web- страницы;

2.      научиться создавать заголовки разного уровня;

3.      овладеть технологией форматирования линий;

4.      получить представление, как оформляется текст на  web- странице;

5.      научиться создавать маркированные, нумерованные и многоуровневые списки на web- странице.

План работы:

1.      создание шаблона web- страницы.

2.      создание заголовков разных уровней.

3.      форматирование линий.

4.      задание фона web- страницы.

5.      оформление текста на web- странице.

6.      использование маркированного, нумерованного и многоуровневого списков на web- странице.

7.      выполнение зачетного задания.

Все представленные в работе файлы представлены в электронном приложении.

 

Теоретические сведения

Технология создания сайта предусматривает:

1.      выбор темы сайта;

2.      планирование сайта в целом;

3.      планирование отдельных страниц сайта;

4.      создание web- страниц и сайта с использованием программного средства;

5.      тестирование сайта ( удобство навигации, целостность данных, корректность ссылок, орфография, просмотр сайта в целом);

6.      публикацию сайта.

Инструментарий для создания сайта включает в себя: обычные текстовые редакторы,  HTML- и  WYSIWYG- редакторы.

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

 

Ход выполнения работы

1.                  Создание шаблона web- страницы. HTML- документ ( простой текстовый файл, содержащий текст и текстовые HTML – теги) всегда должен начинаться с открывающего тега <HTML> и заканчиваться закрывающим тегом  </HTML>. Внутри документа выделяют два раздела: раздел заголовков и тело документа. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <HEAD> и  </ HEAD>. Этот раздел должен включать в себя контейнер общего документа < TITLE> … </TITLE>. Содержимое   web- страницы размещается в теле документа, которое ограничивается тегами <BODY>  и </ BODY>.

Создайте шаблон web- страницы. Для этого выполните следующие действия:

·         создайте папку Страница на Рабочем столе. Все последующие файлы сохраняйте в данной папке;

·         откройте текстовый редактор Блокнот;

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

<html>

        <head>

              <title> Заголовок  web - документа  </title>

         </ head>

        <body> содержимое web- страницы ( тело документа)

                      <!—Комментарии, которые не отображаются на  web- странице -- > 

         </ body>

</ html>

·         сохраните готовый шаблон под именем шаблон. html в папку Страница на своем компьютере;

·         закройте текстовый редактор;

·         просмотрите файл шаблон.html;

·         откройте файл шаблон.html с помощью редактора Блокнот;

·         внесите изменения : заголовок « Дизайн отделка» и в тело документа введите текст « Первая web- страница будет посвящена стилям оформления квартир”;

·         сохраните получившийся файл под именем index.html в папке Страница (index.htmlэто стандартное имя головного документа, с которого начинается загрузка сайта);

·         просмотрите результат работы в браузере.

2.      Создание заголовков разных уровней. В HTML предусмотрено шесть уровней заголовков, которые задаются с помощью парных тегов <H1> …<H6> ( первый заголовок самый крупный, а остальные мельче). По умолчанию заголовки выравниваются по левому краю ( Left), также возможно выравнивание по центру ( Center) и правому краю  ( Align).

·         откройте файл index.html;

·         сохраните его под именем  уровни. html в папку Страница;

·         в файле уровни. html оформите текст в виде заголовков различных уровней:

- заголовок первого уровня ( выравнивание по центру)

< H1 Align =Center> Первая web- страница будет посвящена стилям оформления квартир ! < /H1>

- заголовок второго уровня ( выравнивание по левому краю)

< H2 Align = Left > Заголовок второго уровня < /H2>

- заголовок третьего  уровня ( выравнивание по правому краю)

< H3 Align = Right > Заголовок третьего уровня < /H3>

- заголовок четвертого   уровня ( выравнивание по центру)

< H4 Align =Center> Заголовок четвертого уровня < /H4>

- заголовок пятого   уровня ( выравнивание по левому краю)

< H5 Align = Left > Заголовок пятого уровня < /H5>

- заголовок шестого  уровня ( выравнивание по центру)

< H6 Align = Right > Заголовок шестого уровня < /H6>.

·         сохраните изменения;

·         просмотрите результат работы в браузере

3.      Формирование линий. Длину, ширину, цвет и расположение горизонтальных линий ( тег <HR>) можно задавать с помощью дополнительных атрибутов.

Атрибут выравнивания (Align )

 Align=Left- выравнивание по левому краю;

 Align=Center – выравнивание по центру;

Align= Right –выравнивание по правому краю.

Атрибут размера ( Size )

·         Size = число высоту линии в пикселах ( [ 1;100], целые числа);

·         Size = число – задает длину линии в пикселях;

·         Size = число % - задает длину линии в процентах от ширины окна браузера.

Атрибут цвета ( Color ): = цвет, где в качестве значения после знака равенства пишется название цвета английскими буквами и задается числовой код оттенка ( табл.)

                                                Палитра цветов

 

Название

Русское название

Код

Aqua

 

#00FFFF

Black

 

#000000

Blue

 

#0000FF

Fuchsia

 

#FF00FF

Gray

 

#808080

Green

 

#008000

Lime

 

#00FF00

Maroon

 

#900000

Navy

 

#000080

Olive

 

#808000

Purple

 

#800080

Red

 

#FF0000

Silver

 

#C0C0C0

Teal

 

#008080

White

 

#FFFFFF

Yellow

 

#FFFF00

 

3.1              Откройте файл уровни. html и сохраните его под именем линии. html в папке Страница.

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

·         после заголовка первого уровня добавьте горизонтальную линию  и расположите ее по центру ( высота линии – 7 пикселов, длина – 650 пикселов,  цвет – желтый ) с помощью команд.

< HR Align = Center   Size =7  Width = 650  Color = yellow>

·         после заголовка второго уровня добавьте горизонтальную линию и расположите ее по левому краю ( высота линии – 15 пикселов, длина – 400 пикселов, цвет – малиновый) с помощью команд

< HR Align = Left   Size =15  Width = 400  Color = maroon>

 

·         после заголовка третьего уровня добавьте горизонтальную линию и расположите ее по правому краю ( высота линии – 10 пикселов, длина – 300 пикселов, цвет – лиловый) с помощью команд

< HR Align =Right   Size =10  Width = 300  Color = fuchsia>

 

·         после заголовка четвертого  уровня добавьте горизонтальную линию и расположите ее по центру ( высота линии – 200 пикселов, длина – 700 пикселов, цвет – по своему выбору) ;

·         после заголовка пятого уровня добавьте горизонтальную линию и расположите ее по левому краю ( высота линии – 250 пикселов, длина – 500 пикселов, цвет –по своему выбору) ;

·         после заголовка шестого уровня добавьте горизонтальную линию и расположите ее по правому краю ( высота линии – 200 пикселов, длина – 500 пикселов, цвет –по своему выбору) ;

·         Сохраните данные;

4.      Задание фона web- страницы задается с помощью параметра Bgcolor тега < Body> в виде  шестнадцатеричного числа или словесного названия оттенка, но на большинстве сайтов используются белый фон и черный текст.

4.1. Задайте для web- страницы оливковый фон с помощью команды

<Body  Bgcolor=#808000> </Body>.

4.2 Измените фон сайта на серебристый.

4.3 Результат выполненной работы сохраните в файле фон. html и покажите преподавателю.

5. Оформление текста на web- странице. Обособленный абзац текста в html- документе нужно заключать в контейнер <P>….</P>.

В этом случае абзацы разделяются небольшим промежутком. Если нужно начать какой – либо текст с новой строки, то необходимо использовать в требуемом месте разрыва строки одиночный тег < BR>.

 Выравнивание абзацев задается с помощью атрибута ALIGN, записываемого в  составе открывающего тега абзаца <P> ( тал.2)

Теги форматирования абзацев

Тег

Описание

<P> текст абзаца </P>

Перед новым абзацем автоматически добавляется небольшой отступ

< P Align = Left  > текст  </P>

Выравнивание абзаца по левому краю

<  P  Align =Right> текст    </P>

Выравнивание абзаца по правому краю

<  P  Align =Center> текст    </P>

Выравнивание абзаца по центру

<  P  Align =Justify> текст    </P>

Выравнивание абзаца по ширине

Текст 1 <BR> Текст 2

Тег разрыва строки

< Nobr> Текст </Nobr>

Запрет разрывов и переносов слов

Текст 1 <WBR> Текст 2

Перенос строки в указанном месте

   С помощью контейнера < Font> …. </Font> можно менять такие параметры шрифта, как гарнитура ( Face, рис.6.15), размер ( size) и ( Color).

  Параметр size задает размер шрифта в условных единицах ( от 1 до 7).

   Атрибут Color определяет цвет текста, который можно задавать с помощью названий цветов или в шестнадцатеричном формате.

   Контейнеры увеличения ( < BIG>…</BIG>) и уменьшения  (<SMALL>…</SMALL>) размера шрифта могут быть многократно вложенными друг друга, чтобы увеличить или уменьшить текст до нужных размеров.

   Контейнеры для шрифтового выделения представлены в табл.6.3

                                                                                                                    Таблица 6.3

Тег

Описание

<B> Текст </B>

Полужирный

<STRONG> Текст </STRONG>

<I> Текст  </I>

                             Курсив

<EM> Текст  </EM>

 

Arial, Arial Black, Arial Narrow, Book Antiqua, Bookman Old Style, Century Gothic, Gooper Black, Courier New, Elephant, Impact, Mangal, Monotype Corsiva, Times New Roman, Tahoma, Verdana

Рис. 6.15. Примеры гарнитур шрифта

                                                                                                                 Окончание табл. 6.3

Тег

Описание

<U> Текст </U>

Подчеркнутый текст

E=mc < SUP> 2 </SUP>

Верхний индекс

H < SUP> 2 </SUP>0

Нижний индекс

<STRIKE> Текст </STRIKE>

Зачёркнутый текст

<PRE>  Текст </PRE>

Обычный текст

 

5.1.Откройте в Блокноте файл шаблон. html.

5.2.Сохраните файл в папке Страница под именем текст. html.

5.3.В файле текст. Html введите следующий текст: Вводим любой текст

5.4.Просмотрите результат ввода текста в браузере.

5.5.Заключите каждый абзац в контейнер абзаца, например <P> Стили в интерьере.</P>.

5.6.Заголовку « Стили в интерьере» назначьте вид заголовка первого уровня, расположенного по центру. Оформите заголовок с использованием полужирного, подчеркнутого текста и размером шрифта, равным 6, т.е.   

    <  P  Align =Center> <B>  <U><Font size=6> Стили в интерьере. </Font></U></B></P>

5.7 Оформите названия стилей в интерьере полужирным шрифтом Arial и размером, равном 4.

5.8 Результат проделанной работы сравните с рис. 6.16  и покажите преподавателю.

5.9 Выполните задание № 1 и покажите преподавателю результат работы.

Задание 1.

В конце всего текста задайте размеры шрифта от 1 до 7 и примените теги шрифтового выделения.

6.      Использование маркированного, нумерованного и многоуровневого списков на web- странице. Набор элементов ( абзацев) со специально выбранным символом -  маркером ( круг по умолчанию, окружность, квадрат) – представляет собой маркированный список. Данный список задается с помощью контейнера   

 

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Практическая работа: " Средства создания и сопровождения сайта""

Методические разработки к Вашему уроку:

Получите новую специальность за 2 месяца

Специалист по экологии

Получите профессию

HR-менеджер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 610 310 материалов в базе

Скачать материал

Другие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 17.05.2016 12041
    • DOCX 32.3 кбайт
    • 309 скачиваний
    • Рейтинг: 2 из 5
    • Оцените материал:
  • Настоящий материал опубликован пользователем Гайнутдинова Рамзия Сагитовна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Гайнутдинова Рамзия Сагитовна
    Гайнутдинова Рамзия Сагитовна
    • На сайте: 8 лет и 8 месяцев
    • Подписчики: 0
    • Всего просмотров: 16803
    • Всего материалов: 6

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Копирайтер

Копирайтер

500/1000 ч.

Подать заявку О курсе

Курс повышения квалификации

Компьютерная грамотность для пенсионеров

36 ч. — 180 ч.

от 1580 руб. от 940 руб.
Подать заявку О курсе

Курс повышения квалификации

Организация преподавания информационных систем и технологий в профессиональном образовании

36 ч. — 180 ч.

от 1700 руб. от 850 руб.
Подать заявку О курсе
  • Сейчас обучается 29 человек из 16 регионов

Курс повышения квалификации

Использование компьютерных технологий в процессе обучения информатике в условиях реализации ФГОС

36 ч. — 144 ч.

от 1700 руб. от 850 руб.
Подать заявку О курсе
  • Сейчас обучается 141 человек из 44 регионов

Мини-курс

Психология общения: эффективное общение и решение конфликтов

6 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 224 человека из 55 регионов

Мини-курс

Практика гештальт-терапии: техники и инструменты

5 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 68 человек из 39 регионов

Мини-курс

Современное инвестирование: углубленное изучение инвестиций и финансовых рынков

8 ч.

1180 руб. 590 руб.
Подать заявку О курсе