Автор работы: Пользователь скрыл имя, 17 Декабря 2012 в 14:53, курсовая работа
Целью написания сайта является закрепление знаний курса предмета Web-дизайн, а так же является практической практикой. При написании сайта мы применяем разные технологии и учимся комбинировать их для достижения наилучшего результата.
Введение 3
Глава 1. ASP-технологии 4
1.1. Общие сведения о ASP-технологиях 4
1.1.1. Принципы функционирования 5
1.1.2. Используемые средства для программирования 7
1.2. Этапы разработки Web-сайтов 7
1.2.1. Понятие, цели и задачи WEB-сайтов. Классификация Web-сайтов. 7
1.2.2. Этапы разработки web-сайтов 11
Глава 2. Разработка WEB-сайта МОУ СОШ с. Политово 26
2.1. Анализ задач, которые должен решать сайт, определение целевой аудитории 26
2.2. Регистрация доменного имени сайта 26
2.3. Планирование структуры будущего сайта 27
2.4. Разработка дизайна сайта 27
2.5. Интеграция сверстанного макета в систему управления сайтом 28
2.6. Верстка разработанного сайта 29
2.7. Наполнение сайта контентом 31
2.8. Тестирование сайта на соответствие техническому заданию 31
Выводы и предложения 32
Список литературы 33
В данном случае тег имеет название IMG (тег вставки изображения) и параметры SRC (путь к файлу изображения), WIDTH (ширина изображения), HEIGHT (высота изображения).
Так выглядят правилами записи тегов, теперь остановимся на рассмотрению структуры HTML-документа.
Прежде всего, надо указать на то, что данный документ описывает web-страницу на языке HTML. Для этого текст начинается с тега <HTML>. Для него требуется закрывающий тег </HTML>, обозначающий конец документа. Следующими по уровню вложенности являются теги заголовка документа и его содержания. Внутри тега заголовка записывается информация о документе (его название, описание, таблица кодировки и т. д.). Сам тег заголовка записывается как <HEAD>. Для него требуется закрывающий тег </HEAD>. Тег содержания документа определяет информационную часть описания страницы. В ней располагается текст, рисунки и другие элементы. Тег описания (тела страницы) выглядит следующим образом: <BOOY>...</BODY>.
Тег <TITLE>, расположенный в заголовке страницы, указывает название страницы, которое большинство браузеров отображают в заголовке окна. Определив название страницы, вы упростите работу с сайтом (пользователь поймет, куда он попал, еще до окончания загрузки документа). Кроме того, поисковые системы могут ориентироваться на заголовки документов при анализе соответствия содержимого сайта введенному пользователем запросу.
Тело документа находится
BGCOLOR задает цвет фона страницы. Записывается в следующем виде: BGCOLOR-#RRGGBB, где RR, GG и ВВ — запись RGB-компонентов цвета в шестнадцатеричной форме. Символ «#» (номер) указывает на то, что дальше записано обозначение цвета. Пример записи:
<BODY BGCOLOR=#F8FF10>
TEXT задает цвет, которым будет отображаться текст документа. Цвет записывается в той же форме, что и цвет фона. Эти настройки могут не сказаться на цвете текста, расположенного в ячейках таблиц. Пример:
<BODY TEXT="#FF8000">
LINK/ VLINK указывает цвет ссылок, Пример:
<BODY LINK="#12E6F7">
BACKGROUND задает URL-адрес (путь к
файлу) фонового рисунка для
страницы (текстуры). Этот параметр,
а также другие параметры
<BODY BACKGROUND="back/texture.gif">
Кроме этого, существуют параметры, позволяющие управлять, например, шириной полей, оставляемых браузером по краям окна.
Среди служебной информации, задаваемой в заголовке документа, можно определить такие полезные сведения, как таблица кодировки. Это особенно важно при просмотре документа на компьютере, работающем под управлением другой операционной системы.
После того, как вы определите структуру документа, можно приступать к наполнению его информацией, предназначенной пользователям. Эта информация располагается между тегами <BODY> и </BODY>. Вы можете поместить в документ текст, «сдобренный» при помощи тегов рисунками и элементами форматирования (заголовками, таблицами, списками).
Тестирование сайта
проверка содержимого
определить продолжительность временных задержек;
проверка работы при включенной работе с графикой и при отключении ее;
проверка работы сайта на различных типах мониторов;
проверка работы в различных браузерах.
После того как web-сайт создан, необходимо проверить правильность перехода со страницы на страниц. Браузеры разных фирм иногда по-разному интерпретируют встречающиеся HTML-команды. У многих стоят различные версии, расширение мониторов, поэтому финальное тестирование положено проводить на различных компьютерах. Сайт должен одинаково хорошо выглядеть в различных браузерах, на разных мониторах и разрешениях. При этом выявляются и исключатся ошибки в программировании. В идеале тестирование, при разработки web сайтов, должно проводится несколькими людьми. Проверка всех ссылок изображений, информации, прежде чем выкладывать сайт в сеть необходимо все довести до ума, ведь сайт это лицо вашей организации.
Что касается продвижения, то к основным его этапам можно отнести следующие:
1. Аудит сайта— это анализ сайта с точки зрения его видимости, прежде всего поисковыми системами, с точки зрения usability сайта, функциональных возможностей для последующей оптимизации сайта и перспектив его продвижения в целом.
Аудит сайта проводится на основе информации о целях, которые Вы преследуете, задачах, которые хотите решить при работе с сайтом в рамках его продвижения.
Осуществляется детальный
Исследуется потенциал сайта для решения поставленных перед ним задач и преследуемых целей на базе анализа:
- уровня оптимизации страниц
под ключевые запросы и
- статистики посещений вашего сайта;
- сайтов конкурентов и степени
конкуренции на данном
На основе анализа и исследований сайта предоставляются результаты, выводы и рекомендации по необходимым и желательным изменениям на сайте, требуемым для оптимального решения интернет-ресурсом поставленных перед ним задач и преследуемых целей:
- какие мероприятия необходимы для повышения уровня видимости сайта, в частности по ключевым запросам (оптимизация сайта);
- какие изменения в контент, а возможно, и в структуру сайта необходимо внести для того, чтобы повысить usability сайта, и для конвертации посетителя в клиента;
Аудит сайта — лишь начало глобальной
работы по его продвижению. На основе
аудита сайта можно проводить
оптимизацию сайта под
2. Поисковая оптимизация сайта.
Мероприятия по подготовке страниц сайта под поисковые запросы проводятся на основе аудита сайта. Вырабатывается общая концепция поискового продвижения. Подбираются и анализируются поисковые запросы, соответствующие специфике бизнеса сайта. Оценивается степень конкуренции тех или иных поисковых запросов (высокочастотные, среднечастотные, низкочастотные).
К мероприятиям по поисковой оптимизации сайта, которые проводят SEO специалисты, можно отнести следующие:
— внесение коррективов на
страницы сайта (изменение
— работа с текстами на страницах сайта;
— внутриссылочное ранжирование (работа с ссылками);
— внесение дополнений, возможно, новых страниц сайта и др.;
— создание SEO-карты сайта;
— подготовка пакета ссылок
для сайта с целью
При поисковой оптимизации сайта не исключены серьезные изменения в его структуре, навигации. Для достижения оптимальных результатов при последующем продвижении сайта возможны функциональные изменения. При неквалифицированном создании сайта многие SEO вопросы просто игнорируются, поэтому нельзя исключить серьезных коррективов.
Поисковая оптимизация — второй этап системного и долгосрочного продвижения сайта.
3. Обмен ссылками.
4. Постоянное развитие сайта с точки зрения usability.
5. Он-лайн реклама сайта.
6. Оф-лайн реклама сайта.
Создаваемый нами сайт нужен для представления к информации о школе, прежде всего самим ученикам, а так же для детей собирающихся идти в первый класс или перейти из другой школы и главным образом их родителям. Сайт должен быть одновременно понятен и прост в восприятии и поиске информации. Так же сайт нужен для привлечения внимания потенциальных учеников. Сейчас сайт – это лицо учреждения, многие люди начинают с него знакомство со школой, университетом. Так же на сайте должны быть новости, расписания и другой контент для учащихся – например фото отчет с праздничного мероприятия.
Для регистрации доменного имени необходимо использовать один из нескольких специализированных интернет сайтов (например www.reg.ru, www.nic.ru и другие) опираясь на «Правила регистрации доменных имен в домене .RU». Так же можно зарегистрировать домен на сайте некоторых хостингов – стоимость будет ниже но придется размещать сайт на данном хостинге. Чаще всего это будет оптимальным вариантом.
Сайт будет состоять из 6 разделов:
Навигация по сайту будет происходить через меню слева.
Меню сайта
Рис. 1
Разделы сайта будут одинаково стилизованы, иметь одинаковый дизайн и будут лишь отличаться контентом. Это сделано для ощущения «единства» сайта и уменьшения времени на его разработку.
Дизайн сайта должен быть приятен к просмотру, удобен. Ко всему прочему он по минимуму должен содержать картинок и графики что бы страница имела минимальный размер. Для того что бы сайт был максимально прост в написании мы использовали табличный каркас. В итоге сайт получился таков:
Главная страница сайта
Рис. 2
Мы использовали табличную структуру, так как по нашему мнению она более удобна и гибка в использовании
Рассмотрим шапку сайта. На ней располагается надпись черного цвета «МОУ СОШ с. Политово».
Основная часть представляет бирюзовым и оранжевым фоном. Отделяет его от шапки фоновый отступ. Графически меню и контент не разделены. Пункты меню выполнены в виде списка. Надпись – черного цвета, без подчеркивания. При нажатии на кнопку градиент инвертируется.
Получившийся макет мы используем для всех страниц сайта, изменяя только контент. Все страницы располагаются в корневом каталоге, все изображения в каталоге images. В разработке сайта мы не применяли сторонних макетов. Была выбрана наиболее распространенная схема расположения элементов – сверху шапка сайта, слева меню, посередине контент.
Каркас сайта имеет табличную структуру, и сделан одной таблицей которая состоит из четырех строк и четырех столбцов. Визуально структуру можно разделить на 3 части:
В теге <boby> указан один атрибут background= "images/rough_diagonal.png" – в фоне изображение диагональных линий. Так же для него мы применили атрибуты topmargin="0", leftmargin="0", rightmargin="0" что бы убрать отступы от края окна браузера до таблицы:
<body topmargin="0" leftmargin="0" rightmargin="0"
background="images/rough_
Начнем с таблицы. В <body> код разметки структуры таблицы следующий:
table width="800" border="0" cellpadding="0" cellspacing="0" align="center">
<tr >
<td width="200"></td>
<td bgcolor="#CСFFFF"></td>
</tr>
<tr>
<td width="200" align="left" valign="top" bgcolor="#CCCCCC"></td>
<td bgcolor="#CCFFFF"> </td>
</tr>
</table>
Как видно из примера, таблица занимает 800px и выравнивается по центру окна браузера, не имеет границ и не имеет отступов между ячейками и от границы до текста.
В первой строке две ячейки. В первой ячейке находится всталено изображение школы. Вторая ячейка находится название школы, в фоне серый цвет.
Код первой строки выглядит так:
<tr >
<td width="200"><img src="images/school.jpg" width="200" height="119"></td>
<td bgcolor="#CCFFFF"><p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="+3">МОУ СОШ с. Политово</font></p>
<p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="+2">МОУ СОШ с. Полтитово</font></p></td>
</tr>
Во второй строке таблицы две ячейки. В первой находится меню сайта. Сами пункты меню являются стандартно форматированными ссылками оформленные не нумерованным списком.
Меню содержит 5 пунктов:
<td width="200" align="left" valign="top" bgcolor="#CCFFFF">
<br>
<ul>
<li><a href="index.html">Главная</a><
<li><a href="news.html">Новости</a></
<li><a href="photo.html">Фото</a></
<li><a href="history.html">История</
<li><a href="contact.html">Контакты</
</ul></td>
Фоновый цвет его такой же, как и у шапки – бирюзовый.
Основной контент пришлось поместить в еще одну таблицу с одной ячейкой, для того что бы создать отступ от Меню и справа. Для этого мы использовали атрибут cellspacing="20" для внутренней таблицы:
<td bgcolor="#FFFFFF">
<table width="100%" cellspacing="20"><tr><td valign="top">
<p align="center"><font size="6">Главная</font></p>
</td></tr>
</table>
</td>
Информация о работе Разработка Web-сайта образовательного учреждения на примере МОУ СОШ с. Политово