Инфоурок Информатика Научные работыПроектная работа по информатике на тему: «Создание сайта с использованием HTML»

Проектная работа по информатике на тему: «Создание сайта с использованием HTML»

Скачать материал

Муниципальное бюджетное общеобразовательное учреждение

«Средняя школа №10 с углубленным изучением отдельных предметов»

 

 

 

 

 

 

 

 

 

 

Проектная работа

по информатике

на тему:

«Создание сайта с использованием HTML»

 

 

 

 

 

 

 

Руководитель проекта: Суханова Т.И.  

учитель информатики МБОУ «СШ №10 с углубленным

изучением отдельных предметов»

 

Автор проекта: Налобин Даниил Дмитриевич,

Обучающийся МБОУ «СШ №10 с углубленным

изучением отдельных предметов»

 

 

 

 

 

 

                                              Допуск к защите :           

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Городской округ город Елец  2020г.

ОГЛАВЛЕНИЕ:

 

Оглавление

2 стр.

Введение

3 стр.

Глава 1. Из истории сайтостроения

4 стр.

1.1

Первые шаги в сайтостроении

4 стр.

1.2

Современные способы создания сайтов

5 стр.

1.3

Тоеретичекие основы  создание сайта с помощью HTML

8 стр.

Глава 2. Создание собственного информационного продукта

11 стр.

2.1

Изучение технологии разработки Web-сайтов с помощью HTML

11 стр.

2.2

Подготовка содержательной части – контента.

11 стр.

2.3

Создание схемы будущего сайта.

12 стр.

2.4

Графическое оформление

12 стр.

2.5

Тестирование

12 стр.

Заключение

13 стр.

Литература

14 стр.

Приложение 1 Мои результаты рабботы по созданию сайтов

15 стр.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Введение:

В настоящее время развитие сети Интернет происходит стремительно и контролируется самой жизнью, которая поддерживает эффективные решения и отрицает неэффективные. Используя  технологию мультимедиа, web-страницы объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети.

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

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

Выбранная мною тема работы представляется наиболее соответствующей предметной области «Информатика и информационно-коммуникационные технологии», так как она требует креативного подхода, позволяет достичь реальных результатов и нового качества деятельности, предполагает определенное применение.

Практическое значение результатов предполагает социальный эффект, так как с данным сайтом я участвую в нескольких конкурсах, совершенствую свои знания, умения и навыки, представляю  интересы ОУ  и  создам сайт для членов секции Совета ветеранов ОВД и ВВ МВД РФ по г. Ельцу по связям со СМИ и общественными организациями.

Ожидаемый Интернет-ресурс должен иметь широкий социальный охват: быть полезным не только мне, начинающему  web –разработчику,  сослуживцам МВд Липецкой области, которые захотят рассказать о своей работе, но и обычным пользователям, котрые желают познакомиться с деятельность данной организации.

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

В процессе работы необходимо  решить следующие задачи:

·                     Рассмотреть исторические вехи сайтостроения

·                     Изучить основные способы создания Web – страниц

·                     Изучить основы языка HTML

·                     Продумать и спроектировать будующий сайт.

·                     Собрать информацию, необходимую для верстки страниц сайта

·                     Продумать внешний вид сайта

·                     Создать сайт

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

К изучению привлекались следующие источники:

·  энциклопедии, справочная и учебная литература,

·  материалы, опубликованные в периодических изданиях,

·  Web-ресурсы,

Для выполнения работы были рассмотрены возможности языка гипертекстовой разметки HTML, основные рекомендации по разработке Web-сайтов, различные варианты разметки Web-страниц.

 

 

 

 

Глава 1. Из истории сайтостроения

1.1     Первые шаги в сайтостроении

 

Прежде чем появилась возможность создавать сайты, возникла сеть Интернет, и произошло это событие в 1990 году. Интернет без информации, представлял  совершенно бесполезное изобретение и его необходимо было наполнить. Именно этим вопросом и решил заняться британский ученый Тимоти Бернерс-Ли, который создавал свои разработки в Европейской лаборатории элементарных частиц. Прежде чем создать сайт, он успел подготовить и другие, не менее важные инструменты, которые лежат в основе многих программ на сегодняшний день. Именно он создал Интернет, успешно разработал URL, а также протокол HTTP и прописал язык программирования, который на сегодня нам известен как HTML.

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

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

6 августа 1991 года в интернете появился самый первый во всех смыслах сайт, который располагался по электронному адресу info.cern.ch. Создал его, выше упомянутый Тим Бернерс-Ли, который  и стал настоящим отцом современных интернет-технологий.

Внешне первый сайт был невзрачен, что совершенно неудивительно. Он представлял собой сплошную стартовую страницу белого цвета, на которой для посетителей размещалась основная информация о инновационной технологии того времени "World Wide Web". Здесь же, на первом во всем мире сайте, были размещены и подробные инструкции по установке браузеров, а также серверов на свои персональные компьютеры, то есть технологию "WWW", можно смело назвать началом современного интернет-пространства, во всех его проявлениях.

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

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

Прежде чем создать и запустить свой первый сайт, задолго до этого Тим Бернерс-Ли трудился над разработкой других, не менее важных инструментов, о которых мы упоминали ранее. Только после создания интернета, разработки самого первого в мире гипертекстового браузера под названием WorldWideWeb или WWW, сервера запрограммированного на базе NeXTcube, без которого сайт ни каким образом не мог быть запущенным, а также технологии веба HTTP, был создан и запущен этот судьбоносный для всего человечества, сайт.

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

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

Прошло много времени и на сегодняшний день, ни один из продуктов который разработал Тим Бернерс-Ли, не используется в оригинале. Все они потерпели изменения, реструктуризацию, которая помогла им приспособиться к современному обществу и его запросам, хотя при этом остались в основе программного софта. Но если говорить об основной концепции создания интернета и сайта в целом, то все осталось неизменным. Так как и задумывал разработчик, интернет используется для сбора и хранения информации, а сайты являются своеобразными "папками", которые собирают и хранят информацию различной направленности.

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

После появления самого первого сайта в сети Интернет, разработка сайтов стала стремительно развиваться на коммерческом уровне и стала успешной самостоятельной отраслью, которая пользуется спросом во всем мире. Так, в 1995 году веб-разработкой сайтов занималось уже примерно 1000 компаний, а по истечении десяти лет, только в США таких компаний уже было не менее 30 000 единиц зарегистрированных официально.

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

 

1.2 Современные способы создания сайтов

Существует много способов создания сайтов, но рассмотрим  наиболее доступные и известные следующие:

·                 Создание с помощью написания программного кода.

·                 Использование визуального редактора.

·                 С помощью сервиса.

·                 На движке CMS.

 

Первый способ - создание сайтов с помощью языка программирования. Чтобы создать сайт таким способом потребуется знание: HTML — языка гипертекстовой разметки и CSS – каскадных таблиц стилей. Необходимым инструментом для написания программного кода будет блокнот.

С помощью языка HTML строится каркас сайта, а CSS позволяет произвести настройки его внешнего вида. При создании динамического сайта  потребуются знания языка PHP. Также не лишним будет понимание javascript, благодаря которому можно сделать сайт наиболее интересным.

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

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

 

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

Среди них наиболее популярны:

·            Blogger

·            WordPress

·            LiveJournal

·            LiveInternet

·            UCOZ

·            И др.

 

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

У таких сайтов есть некоторые недостатки:

·                     Ограничение функционала, наличие рекламы данных сервисов (они ведь должны как — то зарабатывать).

·                     Все эти неудобства можно преодолеть, купив премиум – аккаунт.

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

 

 Третий способ – создание сайта с помощью системы управления контентом.

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

Создание сайта на CMS движке

Рис.1. сервисы предоствляемые системой управления контентом (СМS) WordPress

 Четвертый способ - использование визуального редактора. Этот метод не потребует наличия особых знаний. Для создания сайта необходимо наличие визуального редактора, например Dreamweaver. Путем несложных действий настраивается внешний вид сайта. Об исходном коде не нужно даже думать - программа все сделает сама, важно лишь подобрать и рацоинально  разместить  информацию. Заметим, что  с помощью таких редакторов можно создать статический сайт с небольшим количеством страниц.

Такой метод создания сайта подходит только для новичков. Исходный код таких сайтов несовершенен, т.к. захламлен лишними тегами.

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

 

Рис 1 . рабочее окно визуального редактора Dreamweaver

 

 

                                                   

   

 

 1.3Теоретичекие основы  создание сайта с помощью НTML

 

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

Если вы отправите свой файл index.html на сервер хостинг-провайдера, он станет доступным для просмотра из любой точки Земного шара.

Таким способом можно хоть "Войну и мир" напечатать, и выложить в Интернете. Но, допустим,  нужно изменить размер шрифта, придать ему какой-то цвет, вставить рисунки, фотографии...Как всё это сделать? А для этого нужно применить язык гипертекстовой разметки- HTML.

Html — что это? HyperText Markup Language — это язык разметки документа во всемирной паутине.  Язык html воспроизводится интернет-браузером в виде удобной страницы с текстом, таблицами, списками, изображениями.

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

Структура простейшего html файла или простейшей интернет страницы:

<html>

Начало разметки

<heard>

Начало «головы» страницы сайта

<title> Петропавловск-Камчатский </title>

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

</heard>

Конец «головы»

<body>

Начало «тела» страницы

Мой город Петропавловск-Камчатский

Основной контент сайта

</body>

Конец «тела»

</html>

Конец разметки html

Из примера, если присмотреться, видно, что документ состоит из текста и текста заключенного в скобки <>. <html>, </body>, <title> — так называемые ТЭГИ (или ключевые слова, или дискрипторы).

Тег – начальный или конечный маркер элемента записывается в угловых скобках и состоит из имени, за которым может следовать список атрибутов. Причем теги есть открывающие <body> и закрывающие </body>. Отличие между ними — наличие правого слеша в закрывающем теге. Практически всегда теги присутствуют парами, кроме нескольких исключений, например тег <br> — у него нет закрывающего тега.

Между тегами <body> и </body> находится вся основная информация или контент, который видят посетители интернет страницы. Для отображения текста в виде таблиц, для вывода видео, картинок, для создания форм и  др. существует достаточное количество тегов.

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

Пока страница выглядит не слишком привлекательной. Мелкий шрифт и чёрные буквы на белом фоне почти не обращают на себя внимания. С помощью HTML - тегов можно задать различные параметры форматирования текста. Чтобы придать тексту требуемый вид воспользуемся тегами:

<p> - тег абзаца; используется с закрывающим тегом </p>. Каждый абзац начинается с новой строки. Между абзацами браузер оставляет небольшой промежуток.

<b> - полужирный текст; используется с закрывающим тегом </b>. Любой текст становится полужирным.

<br> - перевод строки.

<hr> - горизонтальная разделительная линия

<H2> - заголовок 1-го уровня используется с закрывающим тегом </H2>.

Чтобы выполнить форматирование имеющегося HTML – документа, разместим теги в нужных местах текста С помощью тега FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например FACE=”Arial”), атрибут SIZE – размер шрифта (например SIZE=4), атрибут COLOR – цвет шрифта (например COLOR=”#00FF00”)

Задать цвет текста можно следующим образом  <FONT COLOR=”#00FF00”>Текст</ FONT>

 Подключение графических объектов

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

Для вставки изображения используется тег "IMG" с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута достаточно указать только имя файла.

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

Если файл находится на удалённом сервере в интернете, то должен быть указан Интернет-адрес этого файла.

Теговое включение графики.

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

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

Инструкция src определяет имя графического файла. Пример: <img src=”logo.gif”>

Среди других инструкций тега <img> существуют следующие:

·                     Alt – альтернативное текстовое описание рисунка;

·                     Height – переопределение высоты рисунка;

·                     Width – переопределение ширины рисунка;

·                     Border – задание ширины границ.

 Гиперссылки.

Первая титульная страница должна посетителю Web – сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы сайта.

Гиперссылки, размещённые на Web-странице, позволяют загружать в браузере другие Web-страницы, хранящиеся на локальном компьютере или в Интернете.

Гиперссылка создаётся с помощью тэга "А" и его атрибута HREF,  указывающего, в каком файле хранится загруженная Web-страница.

Если загруженная в браузер Web-страница размещена на локальном компьютере в той же папке, то указывается просто имя файла. Относительный URL – адрес указывает на местоположение документа относительно того, в котором находится указатель ссылки. При разработке сайта рекомендуется входящие в него Web – страницы связываются относительными ссылками. Это позволит не изменять адресную часть ссылок при перемещении Web – сайта в другой каталог локального компьютера или при публикации его в Интернете.

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

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

Панель навигации будет представлять собой абзац, выровненный по центру, в которых указатели гиперссылок разделены пробелами (&nbsp): <p align= “center”> [<a href="index.html"> Видеоролик. </a>]

  Вставка мультимедиа файлов.

Для вставки на Web-страницу  аудиоролика  язык HTML предусматривает парный тег <AUDIO>. Интернет-адрес файла, в котором хранится этот аудиоролик, указывают с помощью атрибута SRC этого тега:

<AUDIO SRC="sound.wav"></AUDIO>

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

 Тег <AUDIO> создает блочный элемент Web-страницы. Так что мы не сможем вставитьаудиоролик на Web-страницу в качестве части абзаца. Зато, чтобы поместить его в отдельный абзац, нам не придется совершать никаких дополнительных действий (в отличие от изображения).

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Глава 2. Создание собственного информационного продукта

2.1 Изучение технологии разработки Web-сайтов с помощью HTML

 

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

Начало работе над сайтом положила Глава 8 книги Н.Угриновича «Практикум по информатике» (10), которая научила меня основам создания Web-страничек и познакомила с языком гипертекстовой разметки HTML.

Также мне помогли полезные заметки, касающиеся навигации по сайту и вставки в него графических объектов и небольших Java-скриптов, из главы «Мир творчества: курс начинающего Web-мастера» книги В.Леонтьева «Новейшая энциклопедия Интернет» (7).

Из книги В.Леонтьева «Новейшая энциклопедия компьютера» (8) я узнал об основных методах создания Web-страниц и о специальных программах, помогающих объединить их в целый сайт, администрировать и изменять их содержимое.

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

Общие представления о Web-дизайне я почерпнул из книги «Кухня Web-мастера Сидорова» А.А.Дуванова (3), в которой автор старается оградить читателя от распространенных ошибок начинающих «творцов».

Автор «Самоучителя HTML» (1), А.Гончаров, научил меня правильно использовать особенности синтаксиса HTML и работать с формами на Web-сайтах.

 

2.2   Подготовка содержательной части – контента.

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

На главной странице решено было разместить краткую новостную информацию о юбилейных мероприятиях линейного отдела МВД России в Липецкой области, а также разместить удобную панель управления сайтом (меню). Следовательно, продукт должен содержать  основные направлениям работы, быть продолжением деятельности по развитию информационных услуг.

Страница «Мероприятия». На данной странице были размещены мероприятия группы Совета ветеранов и Общественного Совета ОМВД России по г.Ельцу.

Страница «Документы» содержит информацию о подвигах советской милиции и  мероприятия Общественного совета при ОМВД  по г. Ельцу . Из фотоархива были взяты и дополнены новыми снимки , на которых запечтлены различные мероприятия данной организации.

На вкладке «Контакты»  указаны контакты  членов секции Совета ветеранов ОВД и ВВ МВД РФ по г. Ельцу по связям со СМИ и общественными организациями, членов Елецкого городского общественного патриотического движения "Мы из Ельца"

 Страница «О нас»   представляет группу Совета ветеранов и Общественного Совета ОМВД России по г. Ельцу. В фотоальбомах история служб милиции и подразделений силовых ведомств, работа общественных формирований по патриотическому воспитанию молодёжи

 

 

 

2.3 Создание схемы будущего сайта.

Потом необходимо было изготовить шаблон странички и создать удобную навигационную систему, после чего шаблон размножить и добавить в полученный сайт содержательную часть, предварительно переведенную в язык гипертекстовой разметки HTML и разделенную на страницы. В качестве основной схемы расположения текста, заголовков и ссылок на другие части сайта была принята традиционная система разделения главной части страницы на три части , где сверху идет общая часть для всх страниц. Она не будет меняться. Здесь указаны название сайта, эмблема значка «Ветеран МВД» и патятник «Защитника Ельца»  , вцентре  располагается навигация по сайту – строка меню, третья часть - содержательная часть.

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

·                    Главная(index.htm).

·                    Мероприятия(event.htm).

·                    Документы(documents.htm).

·                    Контакты (kontakts.htm).

·                    О нас (about.htm).

 

Кодировка русского языка была выбрана стандартная и наиболее популярная – utf-8, а не альтернативная KOU-8.

2.4 Графическое оформление.

  Для привлечения внимания потребителей информационного продукта к соответствующим разделам нужно было добавить в текст немного и GIF-анимации. Цветовая гамма фона (серая) сайта была выбрана не слишком навязчивая, приглушенная, чтобы не препятствовать восприятию текстовой информации. При создании фотогалереи для ускорения загрузки страниц все снимки были предварительно уменьшены в редакторе AdobeFotoshop, а потом вставлены в сайт в формате JPEG.Также была сделана пометка об авторском праве.

2.5 Тестирование.

Сайт был протестирован на различных операционных системах и наиболее популярных Web-браузерах: InternetExplorer, NetscapeNavigator и Opera. Необходимо было убедиться в правильной работе гиперссылок и расположении рисунков, а также в удобстве чтения текста с учетом его цвета и выбранного фона.

Вопрос о размещении сайта пока не решен.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Заключение:

 

Проведенное изучение технологии разработки Web-сайтов позволило создать информационный ресурс с учетом усвоенных рекомендаций по Web-дизайну.

Все стадии решения основной задачи работы – собственно создания сайта – реализованы с учетом первоначальных планов. Содержательная часть была подготовлена и размещена в соответствии с разработанной структурой и графическим оформлением.

Сайт пока в локальном  виде отправлен на Всероссийский конкурс медиатворчества и программирования среди учащихся «24 bit», в котором я уже не первый год участвую (ниже в прилоржении 1 размещен  первый диплом , который я получил за работу в  направлении web-дизайне). Итогов конкурса в этом учебном году еще не было. В ближайшее время планируется размешение сайта в сети Интернет, что обеспечивает доступ к нему широкого круга пользователей.

Можно сделать вывод о том, что запланированные задачи были выполнены.

Созданный информационный ресурс – Web-сайт «Сослуживцы.48»– признан «заказчиком» (Ветеранами МВД) соответствующим главной идее проекта (предоставление  информационных услуг).

Дальнейшее развитие проекта предполагается в двух направлениях: собственно поддержка жизнеспособности сайта путем обновления и расширения содержательной части.

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

Продолжения работы будет требовать раздел «Фотогалерея», полезные ссылки в соответствующем разделе дополнятся новыми.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Литература:

  1. Гончаров А. Самоучитель HTML. – СПб.: Питер,2002. – 240 с.
  2. Дейнеко И.В. Презентация работы библиотеки: Методика разработки и создания библиотечной компьютерной презентации или стендового доклада. – М.: Чистые пруды, 2005. – 32с. – (Библиотечка «Первого сентября», серия «Библиотека в школе».Вып.4.).
  3. Дуванов А.А. Кухня web-мастера Сидорова: Основы практическогоweb-дизайна. – М.: Чистые пруды, 2005. – 32с. – (Библиотечка «Первого сентября», серия «Информатика»).
  4. Жадько Н.В. Проектное развитие библиотек. – М.: Елена, 2000. – 96с.
  5. Информатика: Энциклопедия для детей. Т.22/ Глав.ред. Е. А. Хлебалина, вед. науч. ред. А.Г.Леонов.  – М.: Аванта+, 2003. – с.511 - 516.
  6. Карпов И.П. Интернет-филолог// Литература. – 2005. - №15. – с.36-41.
  7. Леонтьев В.П. Новейшая энциклопедия Интернет. – М.: ОЛМА-ПРЕСС, 2002. – 607с.: ил.
  8. Леонтьев В.П. Новейшая энциклопедия персонального компьютера 2001. – М.: ОЛМА-ПРЕСС, 2001. – 847с.: ил.
  9. Симонович С.В., Мураховский В.И. Интернет у вас дома: Полное руководство для начинающего пользователя. – М.: АСТ-ПРЕСС: Инфорком-Пресс, 2001. – 432с.
  10. Угринович Н.Д. Практикум по информатике и информационным технологиям. – М.: Лаборатория Базовых знаний, 2002. – 394с.: ил.
  11. Ястребцева Е.Н. Школьный библиотечный медиацентр: от идеи до воплощения: Методические рекомендации. – М.: БМЦ, 2001. – с.88-98.

12.  https://nischenko.ru/polezno-pochitat/istoriya-sozdaniya-sajtov-s-chego-vse-nachinalos.html - Нишенко История создания сайтов - с чего все начиналось [14.04.2020]

  1. https://infourok.ru/lekciya-po-teme-tehnologii-sozdaniya-saytov-4003594.html - лекции по теме: «Технологии создания сайтов»
  2. http://seitostroenie.ru/sposoby-sozdaniya-sajta.html - способы создания сайта [14.04.2020]

 

 

 

 

 

 

 

 

 

 

 

 

 

Приложение 1: Мои результаты по работе в сайтостроении:

 

 

 

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Проектная работа по информатике на тему: «Создание сайта с использованием HTML»"

Методические разработки к Вашему уроку:

Получите новую специальность за 3 месяца

Дефектоскопист

Получите профессию

Экскурсовод (гид)

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 664 189 материалов в базе

Скачать материал

Другие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 17.11.2022 5831
    • DOCX 273.6 кбайт
    • 124 скачивания
    • Рейтинг: 1 из 5
    • Оцените материал:
  • Настоящий материал опубликован пользователем Cуханова Татьяна Ивановна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Cуханова Татьяна Ивановна
    Cуханова Татьяна Ивановна
    • На сайте: 8 лет и 1 месяц
    • Подписчики: 0
    • Всего просмотров: 46351
    • Всего материалов: 28

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Копирайтер

Копирайтер

500/1000 ч.

Подать заявку О курсе

Курс профессиональной переподготовки

Математика и информатика: теория и методика преподавания в профессиональном образовании

Преподаватель математики и информатики

500/1000 ч.

от 8900 руб. от 4150 руб.
Подать заявку О курсе
  • Сейчас обучается 41 человек из 23 регионов
  • Этот курс уже прошли 53 человека

Курс профессиональной переподготовки

Информатика: теория и методика преподавания с применением дистанционных технологий

Учитель информатики

300 ч. — 1200 ч.

от 7900 руб. от 3650 руб.
Подать заявку О курсе
  • Этот курс уже прошли 18 человек

Курс повышения квалификации

Особенности подготовки к сдаче ОГЭ по информатике и ИКТ в условиях реализации ФГОС ООО

36 ч. — 180 ч.

от 1700 руб. от 850 руб.
Подать заявку О курсе
  • Сейчас обучается 102 человека из 39 регионов
  • Этот курс уже прошли 806 человек

Мини-курс

Маркетинг в сфере услуг: от управления до рекламы

4 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 29 человек из 14 регионов

Мини-курс

Цифровая трансформация в бизнесе: аспекты управления и развития

3 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Toolbox классического проектного менеджмента

4 ч.

780 руб. 390 руб.
Подать заявку О курсе