Создание учебного сайта

 

 

 

 

Министерство образования и науки Российской Федерации

Федеральное государственное бюджетное образовательное учреждение

высшего профессионального образования

«Ульяновский государственный педагогический университет

имени И.Н. Ульянова»

 

 

 

Кафедра информатики

 

 

 

Выполнила:

студентка 3 курса заочного                  

отделения

физико-математического факультета

группы М-09

 

 

 

 

 

 

 

Создание учебного сайта

 

 

 

 

 

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

 

 

 

 

 

 

Научный руководитель:

доцент, кандидат педагогических наук

Беляева Е.В.

 

 

 

 

 

 

 

 

 

 

Ульяновск, 2012

 

 

Оглавление

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Введение

 

В настоящее время в России реализуется национальный проект «Образование». В соответствие с этим проектом в школу пришли современные компьютеры. В учебный план школы вводятся новые предметы и элективные курсы. Одним из таких курсов является курс «Web-конструирование». Каждая школа уже подключена к Интернету. Возникает необходимость создавать школьные Интернет-страницы, на которых будут размещены материалы о сегодняшним дне школы и её истории.

В современном мире разразился настоящий «бум» сайтостроения. Свои странички в Интернете имеют все: государственные учреждения, различные компании, школы. Вы тоже можете построить свой собственный виртуальный дом.

Существуют множество программ, специально предназначенных для создания новых Web-сайтов. Например, MS Front Page или Macromedia Dream Weaver. Все они предоставляют широкие возможности для визуального создания сайтов. Это и хорошо и плохо.

Хорошо потому, что мы сможем создать наш сайт за считанные минуты. Оснастим его картинками, красиво оформленным текстом и гиперссылками. Однако при этом мы никогда не узнаем, как «устроена» наша страница, из чего она состоит и как взаимодействуют все ее компоненты. Кроме того, любая программа для создания сайтов предъявляет определенные требования к компьютеру, на котором будет работать, и не исключена вероятность того, что Вы не сможете использовать понравившийся продукт по причине недостаточной мощности своего ПК.

Поэтому воспользуемся другим более простым способом. Мы станем составлять наши странички из простейших элементарных команд языка HTML, который специально предназначен для разметки гипертекстовых документов, коими и являются сайты.

Для этой работы нам не нужно сверхмощного компьютера, поскольку работа будет происходить в обычной программе «Блокнот», которая входит в базовый комплект MS Windows.

Кроме этого нам потребуется любой браузер, например MS Internet Explorer, а так же – любой графический редактор – в нашем случае программа ACDSee и Adobe Photoshop.

В самом конце работы, когда придет время опубликовать наш готовый сайт в сети Internet, нам потребуется специальная программа FTP-клиент, в качестве которого выступит программа FAR, очень похожая на Norton Commander.

Объект исследования: изучение построения учебного сайта.

Предмет исследования: построение учебного сайта.

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

 

Задачи исследования:

  • Изучить научно-методическую литературу по данной теме.
  • Проанализировать этапы построения Web-сайтов.
  • Научить, используя средства HTML, строить полезные компьютерные приложения, которые можно было бы использовать на локальном компьютере у себя дома, в школе или на базе полученных знаний построить собственную страничку в Интернете.
  • Рассмотреть возможности публикации редактированного сайта в сети Интернет

Рабочая гипотеза: изучение данной темы направлено на формирование знаний, умений и навыков по созданию собственной Web-страницы на основе языка HTML и дальнейшее размещение её в Internet.

Объем работы составляет 20 страниц. Курсовая работа включает введение, две главы, заключение и приложения.

 

Глава 1.

    1. Структура сайта

 

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

Чтобы открыть главную Интернет – страницу, нужно запустить файл, который называется Index. Это стандартное обозначение первой (главной) страницы сайта. Так называются и все первые страницы отдельных Интернет – проектов, которые здесь содержатся.

Рассмотрим структуру сайта. На главной странице есть ссылки на второстепенные страницы. Такая структура называется иерархической. Если посмотреть файловую структуру, то она такая же: в корневой папке находится запускной файл (Index) и папки отдельных Интернет – проектов (cult, flash, history …), а в этих папках находятся уже файлы отельных Интернет - страниц и другие вспомогательные папки (например – папка Pic, содержащая картинки для Интернет – страниц, или папка с Flash – проектами).

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

Но это были элементы навигации, присутствующие на каждой главной странице отдельного Интернет – проекта, они находятся в строго определенном месте – слева внизу. А основное место страницы занимают ссылки на вложенные страницы, то есть на содержание Интернет проекта. На воженных станицах есть стандартные для всех страниц элементы: кнопки «Домой», «Влево», «Вверх», «Вправо». Кнопка «Домой» в данном случае будет отправлять нас не на главную страницу всего сайта, а на главную страницу этого проекта. Кнопки «Влево», «Вправо» необязательно будут присутствовать на каждой вложенной странице, только на тех, которые находятся на одном уровне иерархии с другими вложенными страницами проекта. А кнопка «Вверх» отправляет на уровень вверх. Если следующий уровень – это главная страница, то это будет кнопка «Домой». Это тоже обязательный элемент любой страницы сайта и находятся  они только слева внизу.

На вложенных страницах могут быть текстовые ссылки на другие страницы, которые вожены дальше по смыслу. Например: в предложении «В вычислениях Вы можете потренироваться здесь». Слово «здесь» нас отправит на страницу с тренажером.

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

 

    1. Подготовка фотографий для сайта

 

Иллюстрации в тексте радуют глаз и делают документ более привлекательным. Браузеры “понимают” два графических формата GIF и JPG. JPG — для фотографий и очень сложных по цветовой гамме рисунков с плавными цветовыми переходами.

GIF — для логотипов, надписей, заголовков, рисунков, имеющих четкие цветовые  границы. GIF (англ. Graphics Interchange Format — рус. формат для обмена изображениями) — популярный формат графических изображений. Способен хранить сжатые данные без потери качества в формате не более 256 цветов. Независящий от аппаратного обеспечения формат GIF был разработан в 1987 году (GIF87a) фирмой CompuServe для передачи растровых изображений по сетям. В 1989-м формат был модифицирован (GIF89a), были добавлены поддержка прозрачности и анимации. GIF использует LZW-компрессию, что позволяет неплохо сжимать файлы, в которых много однородных заливок (логотипы, надписи, схемы).

GIF широко используется на страницах  интернета.

Создатели формата произносили его название как "джиф" /dʒɪf/. Тем не менее, в англоязычном мире широко используется и произношение "гиф" /gɪf/, основанное на том, что GIF - сокращение от Graphics Interchange Format. 

Изображение в формате GIF хранится построчно, поддерживается только формат с индексированной палитрой цветов. Стандарт разрабатывался для поддержки 256-цветовой палитры.

 

Один из цветов в палитре может быть объявлен «прозрачным». В этом случае в программах, которые поддерживают прозрачность GIF (например, большинство современных браузеров) сквозь пиксели, окрашенные «прозрачным» цветом будет виден фон. 

Анимированные изображения

Формат GIF поддерживает анимационные изображения. Они представляют собой последовательность из нескольких статичных кадров, а также информацию о том, сколько времени каждый кадр должен быть показан на экране. Анимацию можно сделать цикличной (англ. loop), тогда вслед за последним кадром начнётся воспроизведение первого кадра и т.д.

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

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

Алгоритм сжатия LZW относится к форматам сжатия без потерь. Это означает, что восстановленные из GIF данные будут в точности соответствовать упакованным. Следует отметить, что это верно только для 8-битных изображений с палитрой, для цветной фотографии потери будут обусловлены переводом её к 256 цветам.

Метод сжатия LZW разработан в 1978 году израильтянами Абрахамом Лемпелем и Якобом Зивом, а позднее доработан в США Терри Велчем. LZW сжимает данные путём поиска одинаковых последовательностей (они называются „фразы“) во всем файле. Выявленные последовательности сохраняются в таблице, им присваиваются более короткие маркеры (ключи).

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

Чересстрочный GIF

Формат GIF допускает чересстрочное хранение данных. При этом строки разбиваются на группы, и меняется порядок хранения строк в файле. При загрузке изображение проявляется постепенно, в несколько проходов. Благодаря этому, имея только часть файла, можно увидеть изображение целиком, но с меньшим разрешением.

 

В чересстрочном GIF’е сначала записываются строки 1, 5, 9 и т. д. Таким образом, загрузив 1/4 данных, пользователь будет иметь представление о целом изображении. Вторым проходом следуют строки 3, 7, 11, разрешение изображения в браузере ещё вдвое увеличивается. Наконец, третий проход передаёт все недостающие строки (2, 4, 6…). Таким образом, задолго до окончания загрузки файла пользователь может понять, что внутри и решить, стоит ли ждать полной загрузки изображения. Чересстрочная запись незначительно увеличивает размер файла, но это, как правило, оправдывается приобретаемым свойством.

 

    1. Обработка графики для Интернет-страниц Adobe Photoshop

 

В настоящее время Интернет-страницы невозможно представить себе без графики. Графика позволяет сделать их более интересными, содержательными, понятными и приятными для глаз пользователей Интернета. Но не каждую картинку можно вставить в HTML-документ. Основным требованием к ним является малый объём при достаточно высоком качестве изображения. Добиться этого можно несколькими способами. Но в основе каждого лежит работа с графическим редактором Adobe Photoshop.

Графический редактор Adobe Photoshop предназначен для обработки растровых изображений. К таким изображениям можно отнести различные фотоснимки, слайды, видеокадры, кадры мультипликационной графики.

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

Adobe Photoshop работает с большинством форматов графических файлов благодаря наличию большого набора конверторов для разных форматов. Последние преобразуют графическую информацию из формата файла в собственный формат редактора Adobe Photoshop при чтении из файла. При записи в файл конверторы выполняют обратное преобразование.

Основные возможности, предоставляемые графическим редактором Adobe Photoshop:

  • чтение и запись изображений в файлы в различных форматах хранения графической информации,
  • масштабирование изображения для проработки деталей,
  • тоновая и цветовая коррекция изображений,

 

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

 

Программа Adobe Photoshop запускается на выполнение через главное меню ОС Windows: Пуск – Все программы – Adobe Photoshop. После запуска на экране появляется главное окно Photoshop.

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

 

Чтобы уменьшить объём и размер фотографии нужно:

  1. Загрузить нужную фотографию в редактор.
  2. Нажать кнопку Изображение в главном меню, выбрать пункт Размер изображения.
  3. В открывшемся окне Размер рисунка найти пункт разрешение и изменить его на меньшее. Размер фотографии уменьшится.
  4. Выберите команду Файл-Сохранить для Web.
  5. Из предлагаемых форматов нужно выбрать формат JPEG. Далее, соглашаясь с тем, что предложит вам компьютер при конвертировании, можно уменьшить объём фотографии в несколько раз.

 

Глава 2.

2.1. Обзор программы ACDSee.

 

         ACDSee —  программа для просмотра и организации изображений для Microsoft Windows, а также для Mac OS X, выпускаемая ACD Systems. Содержит многочисленные инструменты для обработки изображений, в том числе и пакетной. В последних версиях имеет два режима просмотра: быстрый, в котором доступны только инструменты поворота изображения и изменение масштаба, и полный, с загрузкой всех инструментов обработки.

ACDSee является непревзойденным “авторитетом” среди программ для просмотра. Эта программа поддерживает множество графических форматов и позволяет не только просматривать изображения, но и каталогизировать их.

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

Интерфейс программы состоит из трех основных окон: слева отображается структура папок на диске в виде дерева, а справа — изображения в выделенной папке. Ниже находится окно предпросмотра изображения и Image Basket. Image Basket позволяет перемещать картинки из различных источников в специальную “корзинку”, где можно сделать с ними все что угодно — распечатать их, опубликовать в интернете или же записать на CD.

Программа ACDSee снабжена мощным набором инструментов для редактирования изображений — обрезка, копирование фрагмента, повороты и так далее. Кроме того, программа может переводить картинки из одного формата в другой.

Для того, чтобы создать HTML-альбом в программе ACDSee. Мы должны открыть программу. Выбрать папку, содержащую нужные файлы. Выделить их. Выбираем в меню команду Создать. Создать HTML-альбом. В появившемся диалоговом окне нажимаем кнопку Далее. Затем в строке Title пишем название альбома. Затем выбираем формат и размер длины и ширины файла. Далее выбираем папку, в которую создастся HTML-альбом.

2.2. Язык HTML и его назначение

 

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

Итак, программирование ссылок - это самое главное свойство HTML-документа. Документы со ссылками, которые передают управление другим документам, называются гипертекстами. Можно сказать, что язык HTML — это язык для программирования гипертекста. Именно так и расшифровывается аббревиатура HyperText Markup Language (язык разметки гипертекста).

Второй, важной особенностью HTML-документа, является его независимость от компьютерных платформ (DOS, Windows, UNIX, MacOS,...), а также от типа видеовывода конкретного компьютера (CGA, EGA, VGA, SVGA,...).

Чем обеспечивается такая универсальность?

HTML-текст — это программа, которая  задает информацию и правила  показа этой информации на  экране компьютера. Для каждой  платформы создается специальная программа-интерпретатор ("браузер" в терминологии Интернета), которая должна интерпретировать (выполнять) HTML-программу по единым стандартным правилам. Браузер учитывает особенности компьютера для максимального соблюдения стандарта, HTML-программа ничего о компьютере не знает.

Отмеченные выше два самых важных свойства HTML-текстов позволяют использовать HTML-программирование для конструирования страничек Интернета.

Любая Интернет-страница представляет собой текстовый файл в формате «Текст Windows». Расширение имени файла, содержащего текст Интернет-страницы, должен быть htm. Файл главной страницы должен называться index.htm или welcome.htm. остальные страницы сайта могут иметь произвольные имена, а пользователь будет попадать на них по ссылкам с основной страницы.

Всё содержимое Интернет-страницы заключается между тегами<HTML>…</HTML>, указывающий браузеру, что данный текст представляет собой HTML – документ и, возможно, содержит в себе теги, которые браузер должен выявить, распознать и правильно интерпретировать.

Типичная Интернет-страница состоит из двух частей: заголовка (HEAD) и тела (BODY).

Вот пример текста простейшей HTML-программы:

<HTML>               начало HTML-документа

<HEAD>               начало заголовка

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251"> информация о документе

<TITLE>Упражнение 1</TITLE> название документа

</HEAD> конец заголовка

<BODY> начало тела

<H1>Первый HTML-документ</H1> заголовок

<HR> горизонтальная линия

<P> начало абзаца

Корова не похожа на лошадь. абзац

А лошадь не похожа на корову.

Именно это сходство

мы и берем за основу.

</P> конец абзаца

</BODY> конец тела

</HTML>конец HTML-документа

Команды языка (теги) заключаются в угловые скобки. Как правило, теги парные. Первый тег открывает описание команды, определяет ее начало, второй, отличающийся от первого наличием косой черты "/" перед ключевым словом (именем тега), закрывает его. Тег <HTML> должен открывать программу, а тег </HTML> — закрывать ее.

Между этими двумя основными тегами располагается головная часть программы (заголовок программы) и ее тело.

<HTML>

заголовок программы

тело программы

</HTML>

Заголовок HTML-документа

В этом блоке (<HEAD>... </HEAD>) описываются общие правила интерпретации HTML-документа в целом и содержится вспомогательная информация о документе.

Команда:

META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

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

Название HTML-страницы

Между парой тегов <TITLE> и </TITLE> располагается имя HTML-документа. Это имя браузер использует в заголовке окна Windows, в котором показывает документ.

Тело программы

Между тегами <BODY> и </BODY> располагаются команды, следуя которым браузер выводит информацию в окно документа, например:

<H1>...</H1> -- заголовок

<HR> -- горизонтальная линия

<P>...</P> -- абзац

Заголовки являются важной частью документа. Они разделяют информацию на отдельные логические части и поэтому существенно улучшают ее восприятие.

Заголовки бывают разные по значению, или как говорят, по уровню. Учебник, например, имеет название — это заголовок первого уровня. Текст в учебнике разбит на главы; названия глав — это заголовки второго уровня. Главы содержат параграфы с заголовками третьего уровня. Параграфы — пункты, обозначенные заголовками четвертого уровня.

В HTML-документе поддерживаются заголовки шести уровней при помощи конструкции

<Hn>текст заголовка</Hn>

Здесь в качестве n следует использовать одну из цифр 1-6, обозначающую уровень заголовка.

Линия — простейший графический элемент, который умеет строить браузер. Горизонтальная линия задается тегом <HR>, и этот тег не имеет парного закрывающего. Браузер, выполняя эту команду, выведет на экран горизонтальную линию:

Горизонтальные линии удобно использовать для дополнительного выделения (или разделения) элементов документа на экране.

Как правило браузер использует не красную, а пустую строку для отделения одного абзаца от другого или абзаца от других элементов документа. Задается абзац тегами <P> и </P>, между которыми помещается текст. Фактически работа тега <P> сводится к выводу перед текстовым фрагментом пустой строки. А вот парный тег </P> просто игнорируется браузером, поэтому его можно и не писать.

Абзац выравнивается по левому краю.

Между словами всегда помещается ровно по одному пробелу независимо от того, сколько пробелов вы поместите в HTML-программе.

Перенос текста на новую строку происходит тогда, когда очередное слово не помещается в экранной строке, а не тогда, когда вы перешли на новую строку в HTML-программе.

«Физическое» и «логическое» форматирование текста

Все уже рассмотренные способы форматирования реализуют так называемые «физические» стили текста, когда теги явным образом указывают его вид. Однако в

HTML предусмотрено также и «логическое» форматирование текста, когда тот или иной тег указывает «название» стиля, а конкретные характеристики отображения для него заранее предопределены в браузере. Вот пример нескольких названий стилей:

<EM>...</EM>Шрифтовое выделение

<STRONG>...</STRONG>Особое шрифтовое выделение

<CITE>...</CITE>Цитата

<KBD>...</KBD>Ввод с клавиатуры

Авторское редактирование текста HTML. Самый простой способ, который позволяет сэкономить время при размещении на странице сколько угодно длинного фрагмента уже отформатированного текста: заключите его между тегами <PRE>...</PRE>, и браузер сохранит все пробелы и разбивки на строки, а используемый при отображении такого текста моноширинный шрифт семейства Courier обеспечит сохранение выравнивания.

Основные теги HTML

HR тег горизонтальной линии 

Форматирование текста

FONT тег задания параметров шрифта.

I тег выделения текста курсивом 

EM тег логического ударения 

B тег выделения текста жирным  шрифтом 

STRONG тег усиленного выделения

BIG тег увеличения шрифта 

SMALL тег уменьшения шрифта 

Списки

UL тег ненумерованного списка 

OL тег нумерованного списка 

LI тег пункта списка 

DL, DT, DD теги для задания списка  определений(термин и его описание)

Объекты

IMG тег вставки изображения

EMBED тег вставки различных объектов: не-HTML документов и media-файлов...

APPLET тег вставки Java апплетов 

Таблицы

TABLE тег создания таблицы 

TR тег строки таблицы 

TD тег столбца таблицы 

Формы

FORM тег создания формы 

TEXTAREA тег текстовой области

SELECT тег выпадающего меню 

OPTION тег пункта выпадающего меню 

INPUT тег поля формы

 

    1. Размещение информации на Интернет-сайте

 

       Сайт Муниципального образовательного учреждения средней общеобразовательной школы с.Чувашская Решётка муниципального образования «Барышский район» расположен по адресу www.chrschool.okis.ru. Зайти на него для дополнения материала удобно через поисковую систему Яндекс. Заходим на Яндекс.

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

       Попадаем в мастерскую. Отдельные файлы можно загрузить. На этой странице несколько разделов.

       В мастерской можно управлять файлами сайта. Для этого щелкаем на ссылку «Управление файлами и HTML редактор». Мы заходим в мастерскую управления файлами. Здесь можно выполнять стандартные операции над файлами, а именно:

Копировать;

Переместить;

Удалить.

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

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

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

      В мастерской щелкаем по ссылке «Загрузка файлов на сайт». Перед нами открывается окно загрузки в котором можно набрать адрес загружаемого файла, либо, нажав кнопку обзор, выбрать нужный файл для загрузки, в нашем случае файл News Выделяем его и нажимаем открыть добавляем обновленный файл News.

Возвращаемся назад в раздел Управление файлами, теперь видим, что News есть мы можем посмотреть. Текстовая часть есть, а рисунки отсутствуют.