КАк  СТАТЬ СЕТЯНИНОМ

 Учебный  курс

Виртуальная   школа  компьютерных   технологий

КОМПЬЮТЕР - БАЗОВЫЙ КУРС   |  ШКОЛА  РАЗРАБОТЧИКА | РАЗРАБОТКА ИТ-ПРИЛОЖЕНИЙ

Оглавление

Введение

Занятие 1

Занятие 2

Занятие 3

Занятие 4

Занятие 5

Занятие 6

Контроль

Заключение

Глоссарий

Разработка  Интернет-проекта собственными силами.

Занятие 2  \   Создаем  сайт - первый подход.  \\\   В активной разработке!

Языки разметки текста, форматы и редакторы. Последовательность создания сайта.  Меню программы MS Front Page. Типовые методы и решения пакета MS Front Page. |  Практическая  работа и  Домашнее задание

На прошлом занятии мы познакомились с принципами построения и возможностями мировой паутины WWW.

Как обеспечить свое присутствие в Сети? - Необходимо иметь "Гражданство" - сетевое представительство = сайт!

"Вообще говоря, главное - придумать, что на этой странице должно содержаться!"

Цель занятия:  Дать представление о принципах HTML кодировки, как универсального способа отражения информации в сети. Во-вторых, познакомить Ученика с последовательностью,  инструментами и методами создания сайта. Представить типовые решения и изучить приемы работы в редакторе HTML форматов Front Page из состава пакета MS Office.

ВВЕДЕНИЕ

 ЗАН-1.  Глобальная компьютерная сеть Интернет.  Возможности и опасности.  Программы просмотра и поиска информации.  Структура Web-страницы и сайта. 

ЗАНЯТИЕ-2 \ Текущее
Языки разметки текста, форматы и редакторы.  Обзор возможностей  и меню программы MS Front Page. Типовые  методы и решения.

ЗАН-3. Форматирование текста и размещение графики.  Гиперссылки и навигация на Web-страницах. Компоновка элементов страницы с помощью таблицы. Списки и формы.

ЗАН-4.  Публикация Web-сайта на НАРОД.РУ.  Яndex–Мастерская. Тестирование и раскрутка. Счетчики. Индексация  в поисковых системах. Ключевые слова и метаописание. Оптимизация.

ЗАН-5.  Скрипты и серверные технологии. PHPпрограммирование.

ЗАН-6. Интернет-проекты  на основе систем управления контентом.


Литература

1. Н. Угринович. Информатика и информационные технологии.  М.: Лаборатория Базовых Знаний, 2000. - 440 с.

2.  Сазанов В.М., Фомина М.В.  «Компьютер – Базовый Курс», Учебное пособие. М.: «Виртуальная школа компьютерных технологий» - 2004.

3.  Основы Web-технологий. П.Б. Храмцов и др. - М.: "Интернет-Университет Информационных технологий . 2001- 512 с.

4. Виртуальный компьютерный музей -www.computer-museum.ru

5. Рендел Н., Джонс Д. Microsoft Front Page в подлиннике: пер. с англ. СПб,: BhV Санкт-Петербург, 1997. - 432 с. 

6. Каймин В.А. Информатика. Учебное пособие. М.: Изд-во РИОР,   2005. - 81 с.

 Языки разметки текста

 Создание Web-сайта реализуется на основе языка разметки гипертекстовых документов  HTML, cуть которого состоит в том, что в текстовый документ с графическими и звуковыми объектами (мультимедийный образ сайта) вставляются управляющие символы, понимаемые всеми программами отображения Web-информации.

Интерпретаторы языка встроены в программы просмотра и отображения информации на компьютере  - броузеры.

Язык HTML был предложен в 1969 году швейцарским программистом Тимом Бернерсом-Ли, которого считают одним из авторов Сети.

 

Управляющие символы - тэги  содержатся угловых скобках < > и передаются от компьютера к компьютеру.  

Первый тэг всякого HTML документа - <HTML>, а последний </HTML>, что говорит программе-интерпретатору о завершении гипертекстового документа в HTML кодировке.

Большинство тэгов - парные, например <HTML> и </HTML>. Парные тэги выделяют фрагменты гипертекстов - заголовок, тело кода, название Web-страницы и т.д.

 Назначение полезных тегов

 Пример HTML-кода 

<HTML>  Код страницы  </HTML>  
<HEAD> Заголовок  </HEAD>   
<TITLE> Название Web - страницы </TITLE>  <TITLE>Открытый образовательный ресурс "Виртуальная школа компьютерных технологий"</TITLE>
   
   

Структуризация текстовой части сайта - разделы, абзацы, строки, форматирование обеспечиваются соответствующими тэгами.  Например, абзацы начинаются с тэга <p>, а переход на новую строку обозначается <br>.

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

<IMG height=45 src="../index.files/vschl.jpg" width=41 border=0 style="position: relative">

Отдельное обозначение в языке HTML предусмотрено  для описания гиперссылки. Тот же графический образ школы, используемый для перехода к главной странице сайта, имеет на языке HTML следующее описание:

<p style="margin-left: 2; margin-right: 2; margin-top: 2; margin-bottom: 1" align="center"><FONT

face=Arial size=4><a href="http://v-school.narod.ru"><IMG height=45 src="../index.files/vschl.jpg"

width=41 border=0 style="position: relative"><br>

</a></FONT><FONT face=Arial color=#808080 size=2><IMG src=http://www.narod.ru/counter.xhtml></FONT></center>

 

Для языка HTML приняты международные стандарты, в соответствии с которыми гипертексты должны иметь "заголовок" и "тело". В заголовке гипертекста должно содержаться название, которое отображается браузерами на верхней строке экрана. Список ключевых слов заголовка просматривается поисковыми системами и хранится на сервере, что позволяет  легко находить нужную информацию.

 Для придания сайту авторских прав в гипертекст следует ввести сведения об авторах и владельцах авторских прав.


Вы увидели, как составляется описание Web-документа на языке разметки страницы. 

Создавать Web-страницы можно с помощью обычного текстового редактора, например MS Pad или Word, вставляя тэги разметки в текст документа. 

Данную возможность следует понимать, однако в практической жизни использовать тяжело. 

Для облегчения жизни обычным пользователям, имеющим твердое желание завести в Сети свой сайт, предлагаются редакторы HTML-разметки, освоение которых и использование не сложнее обычного офисного пакета типа MS Word или Excel. 

Существует множество HTML-редакторов, позволяющих достаточно легко создавать Web-страницы: CorelWebDesinger, FrontPage, HomeSite, HotDog Webmaster, HotMetal.

Мы будем учиться работать в среде редактора Microsoft Front Page из состава офисного пакета MS Office. 

Однако, прежде чем бросаться нажимать кнопочки и иконки меню - дело нехитрое, вернемся к алгоритму (последовательности) создания своего сайта.

Давайте перейдем к дистанционным активностям дистанционного процесса обучения - ответим на 3 вопроса!

1. Концепция  Интернет базируется на следующих ключевых понятиях и принципах: 
  понятии гипертекста  
стандарте протокола передачи гипертекстов (HTTP) 
языке форматирования гипертекстов (HTML)
всем вышеперечисленном

Спокойно прочитайте вопрос!

2.  Какие способы выхода в Интернет   обеспечат быстрое и безопасное соединение?
  модемное соединение,   
выделенный канал,
локальная сеть фирмы с сетевым фильтром, шлюзом, квалифицированной службой поддержки,
домашняя сеть и канал "Стрим".

Поставьте "точечку"  против ответа, который Вы считаете правильным!   Пока все!

3.   Какая схема организации дистанционного обучения представляется наиболее эффективной?
  Самообучение  
Классическая, когда преподаватель ведет занятие с помощью обучающей системы со своего места
Смешанная
Кейс-технология

Вернемся к изучению основного материала.


Последовательность создания сайта

Продолжим, для примера, создание Web-сайта "Партии нашего родного Катманду". По-прежнему, сайт, кроме главной титульной страницы, содержит тематические страницы партий "Слоны", "Ослы" и "Моськи" (последняя с подстраницами "Московские" и "Лондонские").

        Алгоритм 100% успеха в создании сайта!

1. В первую очередь - определите структуру сайта - нарисуйте ее блоками на бумаге! Возможно - раскрасьте!

2. Назовите все страницы!

3. Укажите все связи и составьте таблицу гиперссылок!

4. Составьте карту сайта!

И только после этого имеет смысл загружать программу FRONT PAGE.


Возможности и ограничения пакета MS Front Page

Что позволяет пакет FP в целом? -  Позволяет разрабатывать и управлять Web документами.

Чего не делает? - Не создает динамических приложений, анимаций и т.п.. 

 Однако возможности пакета FP достаточны для начала работы и понимания, что и как делать дальше!

Редактор Web-страниц  MS Front Page - он же - редактор разметки гипертекста - позволяет:


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

                  Меню программы - типовое оконное стандарта MS. 

 

Microsoft  FrontPage                Заголовок 

  File Edit Insert Format Tools Frames Window Help 

Меню 

Панель инструментов Панель
Рабочее поле П
р
о
к
р
у
т
к
а
Normal

HTML

Preview Полоса гориз. прокрутки
Информационная . строка

Верхняя строка любого Windows-окна - Заголовок программы с управляющими кнопками <Свернуть - Полное окно - Закрыть>. 

Две следующие строки - Типовое меню и "быстрые" кнопки панели инструментов.

Рабочее поле - свойство любого окна - может просматриваться с помощью полос вертикальной и горизонтальной прокрутки.

Меню предназначено для выполнения типовых операций управления Файлом (File), Редактирования  текста (Edit), Вставки объектов (Insert), применения Инструментов (Tools), работы с таблицами (Table) и Фраймами (Frames).  Типовые окна - Окно (Window) управления просмотром нескольких окон и окно справочной службы  - Помощь (Help). 

В нижней информационной строке следует обратить внимание на кнопки управления представлением документа, а именно, в обычном виде (Normal), HTML-кодировке и предварительного просмотра в браузере.

Обзор меню.

Типовая кнопка меню File позволяет выполнять открытие-закрытие файла, сохранение его в папке компьютера и перенос на другой носитель (при правильном указании места хранения в появляющемся окошке-файлере), предварительный просмотр и печать файла, увидеть свойства (дата создания, место хранения, дату последнего редактирования), а также последние файлы, с которыми выполнялась работа, что облегчает вызов.

Пункт File\New\Page позволяет увидеть предлагаемые разработчиками программы Front Page типовые решения, что я предлагаю в данном месте занятия и сделать. 

Выполняем "Практическое задание 2.1" 


Возвращаемся к обзору меню программы Front Page.

Окошко операций редактирования Edit предназначено для выполнения копирования, вставки, отмены операций, поиска информации.

 Управление просмотром информации на экране осуществляется посредством кнопки меню View. 

При использовании кнопки меню Insert (Вставка) следует обратить внимание, кроме возможности вставлять файлы, рисунки, даты, на операцию вставки гиперссылки. 

Последовательность работы такова: 

1. Выделить объект (слово, группу слов, рисунок) который мы предполагаем использовать в качестве гиперссылки.

2. Зайти в меню Insert, указать подпункт Hyperlink,  и в появившемся окошке аккуратно указать адрес объекта гиперссылки.

3. Текстовый объект после завершения операции указания гиперссылки будет выделен подчеркиванием и примет синюю окраску.

Операции форматирования - Format - относятся как к отдельным символам, словам, блокам текста, (Font),  так и к абзацам (Paragraph). 

В данном пункте меню выполняются операции обрамления и затемнения (Borders and Shading), оформляются  обычные и нумерованные списки, управление стилями.

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

Окошко Frame пока рассматривать не будем, а про окошко Window скажем, что оно позволяет иметь загруженными в программу несколько файлов и управлять их просмотром.

 

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


Практическое задание 2.1 - Типовые методы и решения пакета Microsoft Front Page

В первую очередь, приступая к созданию собственного сайта, следует ознакомится с предлагаемыми типовыми построениями (шаблонами) документов и Мастерами решений.

Как это сделать. Заходим в программу FP, в главном меню выбираем File\New\Page, нажимаем <Enter>. 

Имеет смысл познакомится с типовыми решениями, предлагаемыми программой в разделах Общие (General)  и Фреймы (Frames Pages) 

Если же Вы пройдетесь по пути File\New\Web, Вы увидите типовые построения Web-сайтов - как бы кирпичики или строительные блоки  дизайна Вашего личного проекта. 

Увиденные вами типовые построения страниц должны стимулировать Вашу творческую фантазию.


И опять 2 вопроса для закрепления материала!

4.   Что такое IP-адрес:
  адрес Интернет Провайдера  
 
уникальный 32-х разрядный адрес, присваиваемый для того, чтобы компьютеры сети могли найти друг друга
 

Поставьте "точечки"!

5.  Доменная Система Имен - Domain Name System  - DNS - это: 
     
 
система текстовых имен, поставленных в соответствие числовому IP-адресу
 

Результат - в конце занятия!


Компоновка страницы

Теперь,  когда Вы увидели типовые решения, имеет смысл понять как они создаются в рамках инструмента Front Page. 

Один из вариантов - использование таблицы.

Давайте потренируемся. Заходим в редактор FP. 

Главное меню \ Table \ Insert \ Table 

В появившемся окошке задаем 3 строки и 1 столбец. 

Появившуюся таблицу мы будем использовать для компоновки Главной страницы Интернет-проекта 
"Партии нашего Катманду"

 
 
 

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

В чем преимущество использования милой сердцу каждого инженера таблицы?

Во-первых - структуризация информации.

Во вторых - каждая ячейка таблицы допускает единое форматирование,  управление которым - Меню \ Table \  Properties \ Cell

В третьих - внутри каждой таблицы возможно создание вложенной таблицы. 

 

Практическое задание. 

 

Маленькие хитрости. Если Вы не хотите видеть границ таблицы - задайте толщину линий = 0.


Курсовая работа.

Приступаем к созданию собственного сайта.

Заполняем поля Заголовок, Основное информационное, Концевик.


Небольшой тест из 5 вопросов!

6.  Создавать Web-страницы возможно с помощью:
  простого текстового редактора, например MS Pad или Note,  
обычного текстового редактора, например MS Pad или Word, вставляя тэги разметки в текст документа,
HTML-редакторов CorelWebDesinger, FrontPage, HomeSite, HotDog Webmaster,
всего вышеперечисленного.

   7.

Типовое оконное Меню программы стандарта MS содержит:

  Заголовок,  
главное меню и панель инструментов, информационную строку, 
рабочее поле,
все вышеперечисленное.

   8.

Типовая кнопка меню File позволяет выполнять:

  открытие-закрытие файла, сохранение его в папке компьютера и перенос на другой носитель,  
предварительный просмотр и печать файла, 
увидеть свойства (дата создания, место хранения, дату последнего редактирования),
все вышеперечисленное.

   9.

Может ли учебный курс послужить основой для новой системы распространения знаний?

  нет  
да
не знаю
жизнь покажет!

  10.

Каким образом Вы бы пожелали поблагодарить Автора курса?

  Написать благодарственное письмо  
Заказать создание учебного курса
Заказать обучение
"Хочешь помочь - помоги деньгами..!"

 Нажмите на кнопку "Результат"

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


 

Курс рассчитан на 6 учебных занятий по 4 учебных часа!

 

Ищу  партнеров  для создания дистанционного курса "Основы информатики и вычислительной техники"  |  ЭКСТЕРНАТ


VS

ВИРТУАЛЬНАЯ  ШКОЛА  КОМПЬЮТЕРНЫХ  ТЕХНОЛОГИЙ

©  2002-2005  Сазанов В.М.

О проекте  |  Курсы | Условия | Экстернат | Партнерство | Семинар | Ссылки Контакты

Посетителей:   Сегодня:

Сайт управляется системой uCoz