Создание новой пустой Web - страницы

Дата: 2025-06-14; Просмотры: 1

Оценка:

0.00 из 5.00 — оценок

Скачиваний: 0

ПЛАН ЗАНЯТИЯ

Дисциплина: ОП.13 Основы Веб-технологий

Преподаватель: Машарова Р.В.

Курс: 2

Группа: 1 ПКС-20

Специальность: Программирование в компьютерных системах

Дата: 12.05.2022

Время проведения: 08.10-09.30, 1 пара

Тема: Создание Web-страницы в визуальном редакторе.

Цель занятия:

Дидактическая: знакомство с интерфейсом и возможностями Microsoft FrontPage по созданию веб-страниц.

Развивающая: развивать логическое и критическое мышление, умение обобщать и синтезировать знания

Вид занятия лабораторная работа

Литература:

1. Гаврилов М.В., Информатика и информационные технологии. Учебник для прикладного бакалавриата /М.В.Гаврилов, В.А.Климов. -4-е изд., пер. и доп. – М.: Юрайт, 2014. – 383с.

2. Новожилов О.П. Информатика. Учебник для прикладного бакалавриата /О.П.Новожилов. -3-е изд., пер. и доп. – М.: Юрайт, 2014. – 619с.

3. Симонович С.В. «Основы Информатики. Базовый курс» СПб: Питер 2008 год – 640 с.

4. Храмцов П.Б., Брик С.А.,. Русак А.М., Сурин А.И., Основы web-технологий. Курс лекций. -2- е изд., пер. и доп. – Интернет-Университет Информационных Технологий, 2003. – 512 с.

Лабораторная работа №14

Тема: Создание Web-страницы в визуальном редакторе.

Цель: знакомство с интерфейсом и возможностями Microsoft FrontPage по созданию веб-страниц.

Оборудование: ПК, инструкция.

Ход работы

1. Правила ТБ.

2. Методические указания.

В приложении FrontPage можно создать веб-страницы на основе:

• пустой страницы (страницы содержания);

• текстового файла (текстового файла аналогичного файла созданном в редакторе Блокнот);

• имеющейся страницы (с любой веб-страницы, имеющейся на данном ПК);

• других шаблонов страниц (встроенных шаблонов страниц, которые можно выбрать в окне диалога "Шаблоны страниц»).

Создание новой пустой Web - страницы

Если при открытии окна программы FrontPage в нем отображены пустая страница, то разработку веб - страницы можно осуществлять на базе этой страницы. Если при открытии редактора, отображается пустое главное окно, то для создания новой пустой страницы необходимо выполнить команду Файл / Создать и выбрать в области задач "Пустая страница".

В окне программы появится новая пустая страница. Сохраняем страницу, но перед тем, как сохранить страницу в окне «Сохранить» создаем папку, например EN101, в которой создаем вложенную папку images для рисунков, а затем сохраняем страницу в папке EN101. Название страницы назначаем - index, что означает домашний или главная страница. Редактор сохраняет страницу с расширением. Htm. Таким образом, в папке EN101, будет находиться вложена папка images и файл index.htm.

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

Далее необходимо осуществить разработку страницы. Разработка страницы начинается с ее разметки. Для разметки страницы используются таблицы, можно применить Макеты страницы, которые расположены на панели задач "Макеты таблицы и ячейки" в области задач. Установим в области задач "Макетные таблицы и ячейки"

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

1. Устанавливаем ширину (в точках или процентах) страницы равное 900 точек (ширина первого столбца - 213 точек, ширина второго столбца - 687 точек). Для этого подводим курсор мыши к верхней границе и когда от примет вид наклоненной влево стрелки щелкаем левой кнопкой мыши, появятся раскрывающиеся списки, раскрыв которые можно изменить ширину полосы.

2. Выравниваем страничку по центру. Устанавливаем размер границы, цвет. Для этого щелкаем на раскрывается тег таблицы <table> (на панели быстрый вызов тега) и выбираем команду «Свойства тега», затем в окне диалога "Свойства таблицы» устанавливаем: Выравнивание по центру, Границы: размер - 1 и цвет - темно синий (код: 000080).

3. В ячейках таблицы я установил цифры: 1, 2, 3, 4 (эти цифры будут заменены содержанием ячеек), чтобы можно было легко ориентироваться. Итак, в первую ячейку можно установить рисунок ("Вставка / Рисунок / Из файла", выбираем рисунок из папки images). Вставим, например, логотип компании EN101, которая ведет курсы дистанционного обучения иностранным языкам в Интернет.

4. Устанавливаем фон ячейки 1 и 2 аналогичный фонда логотипа (существуют программы для подбора цвета, например, «Цветик ver. 5.1") код цвета - dee7ef. Для заливки ячейки цветом необходимо щелкнуть на раскрывающемся тег ячейки <td> (на панели быстрый вызов тега) и выбрать команду «Свойства тега», затем в окне диалога "Свойства ячейки» устанавливаем: цвет фона - (код: dee7ef).

5. Во вторую клетку помещаем заголовок сайта, например «Английский язык в Интернете». В режиме конструктора вводим текст. Выбираем шрифт Verdana (наиболее распространенный шрифт для веб - страниц), размер 24 пт, цвет темно-синий (код цвета: 000080), выравнивание по центру.

6. В очаге 3 размещаем навигацию, для перехода на другие (будущие) странички. Вводим текст НАВИГАЦИЯ шрифтом Verdana, размер шрифта 12 пт, выравнивание по центру. Далее вводим текст (шрифтом Verdana, размер шрифта 8 пт): Главная, О компании En101, Бизнес-обзор проекта, Способы оплаты, выделяем эти строки и щелкаем на кнопке маркеры на панели инструментов форматирования. Таким образом, создали маркированный список для навигации.

7. Устанавливаем гиперссылки для строки Главная. Выделяем строку Главная, щелкаем правой кнопкой мыши и из контекстного меню выбираем команду Гиперссылка. Откроется окно диалога, в котором нужно в папке EN101 выделить файл index и нажать ОК.

8. Создаем ссылки на партнерские сайты. Устанавливаем курсор ниже списка и выбираем команду "Таблица / Вставить / Таблица", в окне диалога устанавливаем: Срок - 1, Столбцов - 1; Выравнивание - по центру; Задать ширину 98%; Задать высоту 30 в точках; Границы: размер - 1, цвет - темно-синий (код: 000080); Фон: цвет- темно синий (код: 000080). Далее щелкаем Применить и ОК. Затем в созданную таблицу вводим текст «партнерский сайт», шрифтом Verdana, размер шрифта 10 пт, выравнивание по центру, цвет белый.

Ниже, в таблице ПАРТНЕРСКИЕ САЙТЫ вводим адреса необходимых сайтов:

http://lessons-tva.info/

http://vladant.inmarket.biz/

и создаем гиперссылки. Например, выделяем адрес http://lessons-tva.info и вызываем контекстное меню, в котором выбираем команду Гиперссылка. В окне диалога, в строке Текст выделяем http://lessons-tva.info и копируем (Ctrl + C), затем установить курсор в строку Адрес и вставить из буфера обмена (Ctrl + V), щелкнуть ОК.

Содержание третьего отделения представлено на рисунке

9. В ячейке 4 размещаем текст и рисунки. Текст можно вводить с клавиатуры или вставлять скопированный текст из буфера обмена. Текст вводится, редактируется и форматируется как в любом текстовом редакторе. Рисунки можно вставлять только в папке images, которую предварительно создаем при сохранении веб - страницы.

10. Добавляем таблицу для записи: Copyright © Английский язык в Интернет, 2007. All Rights Reserved, которая предназначена для защиты Вашей интеллектуальной собственности на эту веб-страницу. Кроме того, в этой таблице располагаются счетчики. Для этого устанавливаем курсор ниже страницы (вне поля страницы, то есть ниже третьей и четвертой ячеек) и в области задач в разделе «Новые таблицы и ячейки» выбираем команду «Вставить макетную таблицу». Размеры этой таблицы подгоняем под размеры страницы, например, устанавливаем 900х57 точек, размер границы - 1, цвет - темно-синий (код: 000080), цвет фона - белый. В созданную таблицу вводим текст Copyright © Английский язык в Интернет, 2007. All Rights Reserved

11. Добавляем цвет фона вокруг страницы. Выбираем команду Формат / Фон, в окне диалога на вкладке форматирования устанавливаем цвет фона - темно синий (код: 000080)

12. Добавляем и заполняем цель теги (между тегами <head> и </ head>) в режиме Код:

<Title> Английский язык в Интернет </ title>

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

Для разработки собственной веб-страницы необходимо:

- Образец созданной веб-страницы

-Приложение для подбора цвета - "Color"

- Книга Book-html. азы HTML

3. Задания для выполнения.

Создать веб-страницу на основе пустой страницы, используя приложение Microsoft FrontPage

Выполнение работы:

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

Рис.1. Окно приложения FrontPage

2. Далее необходимо выполнить команду Файл / Создать и выбрать в области задач Пустая страница. В окне программы появится новая пустая страница нов_стр_1.htm.

3. Сохраните, но перед тем, как сохранить страницу в окне «Сохранить» создайте папку, например EN101, в которой создайте вложенную папку images или logo для рисунков, а затем сохраните в папке EN101. Название страницы назначьте - index, что означает домашняя или главная страница. Редактор сохраняет страницу с расширением. Htm. Таким образом, в папке EN101, будет находиться вложена папка images и файл index.htm.

4. В папку images скопируйте подготовленные рисунки для веб-страницы.

5. Далее необходимо осуществить разработку страницы. Разработка страницы начинается с ее разметки. Для разметки страницы используются таблицы (Таблица / Вставить / Таблица), но можно применить Макеты страницы, которые расположены на панели задач "Макеты таблицы и ячейки" в области задач. Установите в области задач "Макетные таблицы и ячейки"

6. Далее щелкните мышью на необходимом макете таблицы, представленном на рис.2, в результате чего получим размеченную страницу. Цифры в ячейки таблицы введены только для объяснения технологии заполнения ячеек.

1	2
3	4

7. Установите ширину таблицы (в точках или процентах) странички равную 900 точек (ширина первого столбца - 213 точек, ширина второго столбца - 687 точек). Для этого подведите указатель мыши к верхней границе и когда от примет вид наклоненной влево стрелки щелкните левой кнопкой мыши, появятся раскрывающиеся списки, раскрыв которые можно изменить ширину полосы. Можно установить ширину таблицы с помощью раскрывающегося тега таблицы <table> на панели «Быстрый вызов тега». Для этого щелкните на раскрывается тег таблицы <table> (на панели быстрый вызов тега) и выберите команду «Свойства тега», затем в окне диалога "Свойства таблицы»: задайте ширину, высоту не устанавливайте. Кроме того, установите: Выравнивание по центру, Границы: размер - 1, цвет границы - темно синий (код: 000080) или любой другой цвет.

8. Установите в первую ячейку любой рисунок ("Вставка / Рисунок / Из файла", выберите рисунок из папки images). Вставьте, например, логотип компании EN101, которая ведет курсы дистанционного обучения иностранным языкам в Интернет.

9. Установите фон ячеек 1 и 2 аналогичный фона логотипа или любой фон (существуют программы для подбора цвета, например, «Цветик ver. 5.1»). Для заливки ячейки цветом необходимо щелкнуть на раскрывающемся тег ячейки <td> (на панели быстрый вызов тега) и выбрать команду «Свойства тега», затем в окне диалога "Свойства ячейки» устанавливаем: цвет фона.

10. Во вторую клетку поместите заголовок сайта, например «Обучение английскому языку». Текст вводите в режиме конструктора. Выберите шрифт Verdana (наиболее распространенный шрифт для веб - страниц), размер 24 пт, цвет темно-синий (код цвета: 000080) или любой другой цвет, выравнивание по центру.

11. Добавьте в ячейке 3 навигацию, для перехода на другие (будущие) странички. Введите текст НАВИГАЦИЯ шрифтом Verdana, размер шрифта 12 пт, выравнивание по центру. Далее введите текст (шрифт - Verdana, размер шрифта - 8 пт): Главная, О компании En101, Способы оплаты, выделите эти строки и нажмите кнопку маркеры на панели инструментов форматирования. Таким образом, Вы создадите маркированный список для навигации.

12. Установите гиперссылки для строки Главная. Выделите строку Главная, щелкните правой кнопкой мыши и из контекстного меню выберите команду Гиперссылка. Откроется окно диалога, в котором нужно в папке EN101 выделить файл index и нажать ОК.

13. Создайте ссылки на партнерские сайты. Установите курсор ниже пунктов навигации и выберите команду "Таблица / Вставить / Таблица", в окне диалога установите: Срок - 1, Столбцов - 1; Выравнивание - по центру; Задать ширину 98%; Задать высоту 30 в точках; Границы: размер - 1, цвет - темно-синий (код: 000080); Фон: цвет - темно синий (код: 000080). Далее щелкните Применить и ОК. Затем в созданную таблицу введите текст «партнерский сайт», шрифтом Verdana, размер шрифта 10 пт, выравнивание по центру, цвет белый.

14. Ниже таблице ПАРТНЕРСКИЕ САЙТЫ введите адреса необходимых сайтов, например: http://lessons-tva.info/, http://tva.jino.ru/

15. Создайте гиперссылки для партнерских сайтов. Например, выделите адрес http://lessons-tva.info и вызовите контекстное меню, в котором выберите команду Гиперссылка. В окне диалога, в строке Текст выделите http://lessons-tva.info и скопируйте (Ctrl + C), затем установите курсор в строку адрес, вставьте в нее из буфера обмена (Ctrl + V) http: // lessons-tva . info и щелкнуть ОК.

16. В ячейке 4 поместите текст и рисунки. Текст можно вводить с клавиатуры или вставлять скопированный текст из буфера обмена. Текст вводится, редактируется и форматируется как в любом текстовом редакторе. Рисунки можно вставлять только в папке images (logo), которую Вы предварительно создали при сохранении веб - страницы и наполнили ее рисунками.

17. Добавьте таблицу для записи: Copyright © Английский язык в Интернет, 2007. All Rights Reserved, которая предназначена для защиты Вашей интеллектуальной собственности на этой веб-странице. Кроме того, в этой таблице располагаются счетчики. Для этого установите курсор ниже страницы (вне поля страницы, то есть ниже третьей и четвертой ячеек) и в области задач в разделе «Новые таблицы и ячейки» выберите команду «Вставить макетную таблицу». Размеры этой таблицы подберите под размеры страницы, например, установите 900х57 точек, размер границы - 1, цвет - темно-синий (код: 000080), цвет фона - белый. В созданную таблицу введите текст Copyright © Английский язык в Интернет, 2007. All Rights Reserved

18. Добавьте цвет фона вокруг страницы. Выберите команду Формат / Фон, в окне диалога на вкладке форматирования установите цвет фона - темно синий (код: 000080) или любой другой цвет фона.

19. В режиме Код добавьте на страницу отсутствуют на ней метатеги и заполните ниже указаны метатеги (между тегами <head> и </ head>):

Образец заполнения:

<Title> Английский язык в Интернет </ title>

20. Сохраните созданную веб-страницу, с целью использования ее при создании веб-сайта.

5. Оформление отчета.

6. Контрольные вопросы:

1. Дать определение. Web-страница. Web-узел. Web-сервер.

2. Средства для создания Web-страниц

3. Программа Front Page. Назначение. Преимущества.

4. Назначение мастеров в программе Front Page.

5. Интерфейс программы Front Page.

6. Режимы просмотра в программе Front Page. Назначение.

7. Меню программы Front Page.

8. Способы создания Web-страниц в программе Front Page.

9. Создание пустой страницы.

10. Создание макета таблицы. Редактирования.

11. Добавление фона и рисунков для ячеек и на страницу.

12. Создание меню страницы и гиперссылки в программе Front Page.