- •Государственное образовательное учереждение среднего профессионального образования
- •Г. Красногорск
- •Г. Красногорск
- •Введение
- •Практическая работа №1 Составление имен каталогов и файлов, их шаблонов и маршрутов к заданным файлам.
- •Варианты к практической работе №1
- •1 Вариант
- •2 Вариант
- •3 Вариант
- •4 Вариант
- •5 Вариант
- •6 Вариант
- •7 Вариант
- •8 Вариант
- •9 Вариант
- •10 Вариант
- •11 Вариант
- •Практическая работа №2 «Работа в операционной системе ms-dos»
- •Литература
- •Практическая работа №3 «Создание и редактирование файла с помощью norton commander. Работа с файлами и каталогами: копирование, перемещение и удаление в norton commander.»
- •Варианты к практической работе №3
- •1 Вариант
- •Литература
- •Практическая работа №5 Архиватор winzip и winrar. Создание архива и помещение в него файлов, извлечение файлов из архива
- •2. Дважды щелкните по файлу Для упаковки;
- •3. Вызовите контекстное меню файла и выберите команду View.
- •Практическая работа №6 Форматирование usb Flash Drive, диска. Создание системного загрузочного пакета. Создание архива, закрытого паролем.
- •Практическая работа №7 Использование современных антивирусных программ. Тестирование диска на наличие компьютерного вируса, лечение зараженного диска.
- •1. Вирус в ос
- •2. Антивирусные программы
- •3. Макровирус в ms-Office
- •Практическая работа №8 Работа в «Microsoft Outlook 2003». Организация и управление данными. Планирование с помощью календаря. Передача и получение сообщений по электронной почте.
- •1. Знакомство с программой
- •2. Создание контактов
- •3. Планирование событий.
- •4. Перенос событий.
- •5. Планирование встреч.
- •6. Создание задач.
- •7. Управление задачами и контактами
- •8. Группирование элементов.
- •Практическая работа №9 Создание своей Web-страницы: форматирование текста, вставка рисунков.
- •Практическая работа №10 Создание Web – сайта : вставка таблиц, списков, вставка гиперссылок, форм и фреймов.
- •Практическое занятие №11 Ввод и редактирование текста. Определение режимов и масштаба документа. Форматирование текста. Вставка графических объектов. Печать документа.
- •Ход выполнения практической работы Ввод и редактирование текста, определение режимов и масштаба просмотра документа.
- •Форматирование текста.
- •Вставка графических объектов. Печать документа.
- •Практическое занятие №12 Создание, заполнение, оформление и редактирование электронной таблицы. Проведение расчетов и поиска информации в электронной таблице
- •Ход выполнения практической работы
- •Контрольные вопросы
- •Практическое занятие №13 Создание формы и заполнение базы данных. Сортировка записей.
- •Ход выполнения практической работы Создание базы данных
- •Практическое задание №14 Основные приёмы работы в графическом редакторе Photoshop
- •Ход выполнения практической работы
- •1. Создание объекта.
- •2. Создание анимации.
- •3. Немного о самой панели анимации.
- •Практическое задание №15
- •Литература
- •Средства обучения
Практическая работа №10 Создание Web – сайта : вставка таблиц, списков, вставка гиперссылок, форм и фреймов.
Цель работы: закрепить теоретические знания и приобрести практические навыки работы создания и раскрутки Web-сайта с помощью языка HTM.
Пояснения к работе
Таблицы:
<table>…</table> - представление информации в виде таблицы
Атрибуты:
Summary=[текст]- краткая информация для браузеров о назначении и структуре таблицы
Align=left | center | right – задает положение таблицы относительно документа
Width=[число] – определяет необходимую ширину всей таблицы
Border=[число] – задает ширину рамки вокруг таблицы в пикселях
Bgcolor=[цвет] – устанавливает цвет фона ячеек таблицы
<td>…</td> - представление данных в ячейке таблицы
<th>…</th> - представление заголовка столбца таблицы
<tr>…</tr> - представление строки таблицы
Вставка гиперссылок:
<a>…</a> - в документе создается гиперссылка
href = [are] – указывает имя документа к которому можно перейти по ссылке.
<ul> … </ul> - представление информации в виде списка без нумерации элементов
Списки:
<ul> … </ul> - представление информации в виде списка без нумерации элементов
<li> … </li> - представление элемента списка
Создание меню:
<select>…</select> создает меню в форме, предоставляющее пользователям варианты выбора. Пункты меню создаются элементами <option>…</option>
Пример:
<select name=”selection”>
<option value=”option1”>Вариант 1
<option value=”option2”>Вариант 2
<option value=”option3”>Вариант 3
</select>
Управляющий элемент:
<input> - создает управляющий элемент
Атрибуты:
Type=text | password | checkbox | radio | submit | reset | file | hidden | image | button
Однострочное для ввода создает создает создает создает создает создает создает
поле ввода паролей флажок переключатель кнопку кнопку управляющий невидимый графическую
отправки сброса элемент управляющий кнопку
Фреймы.
Фреймы разделяют экран на несколько окон., в каждом из которых отображается содержание отдельной страницы, т.е. используя технологию фреймов можно одновременно загрузить в одно окно браузера сразу несколько Web-страниц. Размер фрейма может изменяться пользователем прямо на экране с помощью мыши. Каждый фрейм имеет собственный адрес, что позволяет отображать его не зависимо от других фреймов. В одном фрейме можно размещать ту информацию, которую автор считает необходимым постоянно показывать пользователь: логотип фирмы, набор управляющих кнопок, меню и др.; окно запроса – в одном фрейме, в другом – результат).
Разбивка окон:
Если по горизонтали разбить браузера на два равных по размеру фрейма, то код HTML будет таким:
<frameset rows=”50%,50%”>
Если Вы хотите разделить окно браузера по вертикали на два фрейма шириной 200 и 600 пикселей, следует записать:
<frameset cols=”200,600”>
Ход выполнения практической работы
1. В папкe Web в файле My.html создать ссылку на документ spisok.html.
2. Сохранить полученный сайт под именем: geoton.html.
3. Просмотреть полученный сайт.
geoton.html
<html>
<head> <Title>Компания Геотон</Title></head>
<body bgcolor=blue text=yellow>
<br> <h1 align=center>Добро пожаловать на страничку компании Геотон</h1><br>
<center><img src=Priroda.gif border=1></A></center><br><br>
<p style="font-weigt:bold; font-style:italic; font-size:150%; text-align:center">Здесь вы узнаете<br> <a href=spisok1.html> о нашейеятельности ,<br> о програмных продуктах нашей компании <br> и об оборудовании, которое мы производим</p>
</body>
</html>
4. Создать страницу Tabl.html:
<html>
<head>
<Title>Меню</Title>
</head>
<body bgcolor=red>
<table border=1 width=140>
<tr><td> Главная страница </td></tr>
<tr><td> Чем мы занимаемся? </td></tr>
<tr><td> О нашей компании </td></tr>
<tr><td> Новости </td></tr>
<tr><td> Оборудование </td></tr>
<tr><td> Специальное предложение </td></tr>
<tr><td> Наши партнеры </td></tr>
<tr><td> Прайс-лист </td></tr>
<tr><td> Связь с компанией </td></tr>
</table>
</body>
</html>
5. Создать страницу с фреймами:
1.html
<html>
<head>
<Title>Компания Геотон</Title>
</head>
<frameset cols=160,*>
<frame src="Tabl.html">
<frame src="GPS.html" name="Frame">
</frameset>
</html>
6. Просмотреть полученный сайт.
7. Дополнить страницу Tabl.html ссылками на другие страницы.
Содержание отчёта:
Название практической работы
Фамилия и номер группы
Цель практической работы
Создание меню, ссылок, управляющих элементов.
Значения тегов, работающих с таблицами.
Значения фреймов.
Контрольные вопросы
Дайте определение языку HTML?
Какую структуру имеют Web-страницы?
Какие теги управляют цветом шрифта, фоном страницы?
Какие теги управляют положением элемента на Web-странице?
Перечислите теги, работающие с таблицами и их атрибуты.
Как создать ссылки в таблице на другие Web – страницы?
Перечислите теги, работающие со шрифтами.
Перечислите теги, работающие со списком.
Как создать меню и управляющий элемент на Web странице?
Назначение фреймов? Разбивка окон по вертикали и горизонтали.