Работа с поисковыми системами и электронной почтой

Поиск информации в Интернете осуществляется с помощью специальных программ - браузеров, обрабатывающих запросы — информационно-поисковых систем (ИПС).

Поисковая система — программно-аппаратный комплекс с web-интерфейсом, предоставляющий возможность поиска информации в Интернете. Под поисковой системой обычно подразумевается сайт, на котором размещён интерфейс (фронт-энд) системы. Программной частью поисковой системы является поисковая машина (поисковый движок) — комплекс программ, обеспечивающий функциональность поисковой системы и обычно являющийся коммерческой тайной компании-разработчика поисковой системы.

В России наиболее крупными и популярными поисковыми системами являются:

- «Яndex» (www.yandex.ru)

- «Pамблер» (www.rambler.ru)

- «Google» (www.google.ru)

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

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

1. Запустилweb-браузер GoogleChrome.

Рисунок 160 – Окно GoogleChrome

2. Для начала поиска открыл поисковый сайт Yandex.ru.

Рисунок 161 – Поисковая строка

3. В строке поиска ввел необходимые данные.

Рисунок 162 – Данные для поиска

4. В начале списка вывелась необходимая информация по теме, поэтому ограничился простым поиском.

Рисунок 163 – Ссылка по моей теме

5. К найденному тексту выбрал изображения, для этого в поисковой системе выбрал раздел Картинки, в качестве дополнительных атрибутов поиска, вошел во вкладку еще, и задал параметры для поиска.

Рисунок 164 – Поиск картинок по моей теме

6. Из предложенных изображений выбралподходящие.

Рисунок 165 – Картинки по моей теме

7. Скачалвидеоматериалы подходящие по выбранной теме, для этого перешел на сайт YouTube, выбрал необходимый материал.

Рисунок 166 – Видео по моей теме

8. Завершил работу в поисковой системе.

Задание 23. Зарегистрируйтесь на www.yandex.ru, осуществите работу с файлами.

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

1. Для регистрации почтового ящика на сервере запустил программу GoogleChrome.

2. В адресной строке браузера ввел адрес сайта - www.yandex.ru.

Рисунок 167 – Яндекс Почта

3. Выбрал ссылку Почта – Зарегистрироваться или Завести почтовый ящик.

Рисунок 168 - Регистрация

4. Заполнил форму регистрации (обязательные поля для заполнения отмечены звездочками).

Рисунок 169 – Ввод данных для регистрации

5. Подтвердите данные, нажав кнопку Зарегистрировать.

6. После успешной регистрации появился мой личный адрес.

Рисунок 170 – Мой кабинет

7. Подтвердил согласие, нажав на кнопку Сохранить (записал адрес своей электронной почты и пароль в тетрадь!).

Рисунок 171 – Мой личный адрес

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

Рисунок 172 – Все настройки

9. Для создания письма:

- Нажал на кнопку Написать.

Рисунок 173 – Написать письмо

- Ввел адрес получателя, тему и текст письма.

Рисунок 174 – Текст письма

- Прикрепил реферат, который был реализован на первом занятии.

Рисунок 175 – Прикрепление реферата

- Отправил письмо, сохранив копию написанного письма.

Рисунок 176 – Отправление письма

Задание 24. Создайте Яндекс Диск, и поработайте с файлами на диске. Сохраните материал для будущего сайта в облаке, и через облако отправьте его на почту преподавателю.

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

1. Зашел на сайтhttp://disk.yandex.ru./

Рисунок 177 – Ссылка http://disk.yandex.ru./

2. Ввел адрес и пароль электронной почты, для получения приглашения, нажал кнопку Оставить заявку.

Рисунок 178–Вход на свою почту

3. Запустил ЯндексДиск.

Рисунок 179 – Яндекс Диск

4. На почтовый адрес пришло письмо с Приглашением наборт Яндекс Диска, в котором представлена ссылка на запуск Яндекс Диска.

Рисунок 180 - Письмо

5. Зарегистрировал на Яндекс Диске.

6.Отправил файлы в Яндекс Диск.

Рисунок 181 – Отправление файлов в Яндекс Диск

Ответы на контрольные вопросы:

1. Браузер – это прикладное программное обеспечение для просмотра веб-страниц.

2. Основные функции браузера: (Завести почтовый ящик → Ввести свое Имя и Фамилию → Придумать пароль → Подтвердить пароль → Задать контрольный вопрос → Ответить на контрольный вопрос → Подтвердить регистрацию).

3. Правильный запрос – это максимально правильно сформулированное предложения для поиска необходимой информации.

4. Чтобы создать почтовый ящик необходимо: Регистрация.

5. Один пользователь может иметь неограниченное число почтовых ящиков.

6. Облачные технологии - это способ увеличения пропускной способности сетей или предоставление ИТ-ресурсов в виде сервиса.

7. Облачные технологии позволяет человеку не имеющий на данный момент доступ к своему ПК с необходимыми ему файлами скачать их на любое устройство и начать работать с ними.

8. Существуют такие облачные сервисы как: (GoogleDrive, Mega, Яндекс Диск, Dropbox, Bitcasa).

9. Чтобы зарегистрироваться на «Яндекс Диск» необходимо: Войти в свой почтовый ящик → Скачать программу на свой ПК «YandexDiskSetupRu» → Авторизоваться в скаченной программе.

Использование визуального редактора Dream Weaver в качестве среды проектирования профессионального сайта

WYSIWYG (произносится [‘wiziwig], является аббревиатурой от англ. What You See Is What You Get, «что видишь, то и получишь») — свойство прикладных программ или веб-интерфейсов, в которых содержание отображается в процессе редактирования и выглядит максимально близко похожим на конечную продукцию, которая может быть печатным документом, веб-страницей или презентацией. В настоящее время для подобных программ также широко используется понятие «визуальный редактор».

Требования, предъявляемые визуальным редакторам

- Полная поддержка кодировок русского языка

- Возможность создания электронных документов не только любительского, но и профессионального уровня.

- Визуальный режим работы – возможность верстать электронные документы в режиме «что вижу, то и получаю».

HTML-редактора DreamWeaver MX 2004. DreamWeaver от компании Macromedia, считающейся лидером по производству программ для создания web-сайтов, а также законодателем моды в этой области. HTML-редактора этой компании - DreamWeaver MX 2004 относится к категории WYSIWYG-редакторов, и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и ShockWave технологий, возможность закачки файлов через FTP, поддержка SSI и многое другое.DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код.

Задание 25. Создайте простейшийHTML-документ с использованием тегов по форматированию текста, созданию списков и таблиц, изменению цвета фона, а также вставки объектов.

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

1. Создал HTML-документ с расширением*.html.

2. Вставилзаголовокweb-страницыпообразцуразмером<h1>.

Рисунок 182 – Основа web-страницы

3. Набрал и отформатировалтекст.

Рисунок 183 – Основной текст web-страницы

4. Нарисовалкартинку, и вставил ее в HTML-документ. Разместилпо левому краю, при помощи следующего кода: <IMG src="123.jpg" width=150 height=100>.

Рисунок 184 – Картинка наweb-странице

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

Рисунок 185–Фон web-страницы

6. Сохранил документ в своейпапке.

Рисунок 186–Код web-страницыв блокноте

Рисунок 187 – Web-страница в браузере

7. Результат о проделанной работе можно посмотреть в Приложении.

Задание 26. Создайте web-страницу с использованием слоев, а также закрепите практические навыки работы с основными элементами страницы (текст, графика, таблицы и т.д.).

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

1. Открыл HTML-документ под названиемindex.html.

Рисунок 188 – Новый документ

2. Визуально разбилweb-страницу на несколько слоев,например, (Слой 1, Слой 2, Слой 3 и т.д.).

Рисунок 189 – Разбиения на слоя

3. Создал Слой 1: Insert –LayoteObject - Layer, вставилзаголовок страницы, предложенный по образцу размером <h2>, изменил его стиль, фон.

4. В Слое 2 набрал и отформатировалтекст по образцу индивидуального задания. Вставил изображение.

Рисунок 190 – Заполненные слои

5. Аналогичным образом, создал остальныеслои.

Рисунок 191 – Готовая работа в Dreamweaver

6. Посмотрел работу в дизайне.

Рисунок 192 – Итоговая работа

7. Сохранил документ в своейпапке.

8. Результат о проделанной работе можно посмотреть в Приложении.

Задание 27. Создать сайт по загруженному материалупредыдущем занятии с использованием разметки фреймовой структуры, а так же освоите основные этапы и методы их проектирования

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

1. Определил тему для будущего web-ресурса (темы не должны совпадать средиоднокурсников).

2. Нашел необходимый материал по выбраннойтеме.

3. Создал фреймовую структуру по одному изобразцов.

Рисунок 193 – Фреймовая структура

4. Создал страницу Оглавление, на которой должна присутствовать навигация с гиперссылками на пунктыменю.

Рисунок 194 – Оглавление с гиперссылками

5. Создалнеобходимое количество web-страниц, связал их гиперссылками со страницей Оглавление.

Рисунок 195 - Web-страницаПрограммирование

Рисунок 196 - Web-страницаТекстовый редактор среды программирования

Рисунок 197 - Web-страницаИстория

Рисунок 198 - Web-страницаЯзыки программирования

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

Рисунок 199 – Текстовая графическая информация

7. Отформатировалтекст в контенте сайта с помощью основныхтегов.

Рисунок 200 – Форматирование текста с помощью основных тегов

8. Сохранил документ в своейпапке.

Рисунок 201 – Созданный сайт

9. Результат о проделанной работе можно посмотреть в Приложении.

Задание 28. Реализуйте базу данных MSAccess из предыдущих практических работ по индивидуальным заданиям в базу, с использованием в работе форм, таблиц и фреймовой структуры, а также основных возможностей работы с элементами в DreamWeaver.

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

1. Нашел необходимую информацию для контента будущего сайта базы данных.

2. Далее создал фреймовую структуру: файл с расширением “.html”, открываю его через блокнот и вписываю код фреймовой структуры

Рисунок 202 – Код фреймовой структуры

3. Создал страницу Оглавление: файл с расширением “.html”, открыл его с помощью программы MacromediaDreamweaver меняю цвет, вид, оформление текста.

Рисунок 203 – Оглавление

Рисунок 204 – Код оглавления

4. Разработал три web-страниц заполненных информацией из базы данных. Для ввода и редактирования объектов использовал основные команды для работы по созданию сайта.

5. Добавил текстовые окна и кнопки:

Кодтекстовогоокна: <input type="text" name="textfield">

Кодкнопки: <input type="submit" name="Submit" value="Найти">

6. Распределил всю информацию в виде таблиц. Для этого прописалкод:

Рисунок 205- Код таблицы

Рисунок 206 – Таблица «Страны Европы»

7. Аналогичным образом сделал остальные таблицы.

Рисунок 207 – Таблица «Экономика»

Рисунок 208 – Таблица «Официальное название и язык»

8. Сохранил работу в свою папку.

Задание 29. Создайте web-сайт с использованием графических шаблонов и основных возможностей визуальногоweb-редактора DreamWeaver. Контент сайта не должен совпадать среди одногруппников.

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

1. Определил тему для будущего web-ресурса (темы не должны совпадать средиоднокурсников). «Рок-группа Rammstein».

2. Определился с видом вашегоweb-ресурса (существуют: информационные сайты операционные сайты, веб-сайты сообществ, развлекательные сайты, персональныесайты).

3. Подобрал материал по выбраннойтеме.

4. Загрузил из Интернета приглянувшийся шаблон для сайта,который соответствует тематике будущего сайта.

5. Открыл файл index.html в среде программы MacromediaDreamWeaver: Пуск страницы.– Программы - MacromediaDreamWeaver.Отредактировалисходную информацию файла index.html в нужной форме.

6. Создал главную страницу сайта.

Рисунок 209 – Главная страница сайта

Рисунок 210 - Код главной страницы сайта

7. Сделаланалогично остальные страницы сайта. Картинки добавил с помощью кода: <IMG src="4.JPG" width=300 height=300>.

Рисунок 211 – Вторая страница сайта

Рисунок 212 – Код второй страницы сайта

Рисунок 213 – Третья и четвертая страницы сайта

8. Добавил музыку с помощью кода: <A href="777.MP3"><FONT size=7>Слушать музыку</FONT></A>.

Рисунок 214 – Добавление музыки

9. Ссылки на страницы сделал с помощью кода: <A href="meinherz brennt.html">Meinherzbrennt</A>.

10. Сохранил работу в свою папку.

Задание 30. На основе приведенной таблицы определите соответствие /несоответствие ЭОР своих коллег во время итогового занятия - демонстрации проектов.

Ответы на контрольные вопросы

1. Визуальный редактор — свойство прикладных программ или веб-интерфейсов, в которых содержание отображается в процессе редактирования и выглядит максимально близко похожим на конечную продукцию, которая может быть печатным документом, веб-страницей или презентацией. Примеры визуальных редакторов: Adobe (Macromedia) Dreamweaver, MicrosoftFrontPage, MozillaComposer.

2. Создание и редактирование html-кода, графическое представление полученной страницы, подстветка кода для более удобной работы с ним.

3. Как правило главная страница сайта имеет имя index.html.

4. Рисунок можно добавить с помощью гиперссылки, тега <img>, или переноса с панели рабочего стола.

5. Создать таблицу можно вручную с помощью тега <table>, или автоматически с помощью вставки: Вставить→Таблица.

6. Для того чтобы добавить редактируемую область в шаблон необходимо нажать: Вставка→Шаблон→Редактируемая область.

7. Для того чтобы применить шаблон к странице необходимо нажать: Вставка→Шаблон→Создать вложенный шаблон.

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

Стандартизация в оформлении учебной документации

Основные требования к оформлению учебной документации

Работа с отчетом

Редактирование отчета в соответствии с нормативными документами

Оформление отчета. Общие положения. Заголовки. Таблицы. Иллюстрации. Ссылки