Разработка web-сайта

Автор: Пользователь скрыл имя, 04 Ноября 2011 в 12:40, дипломная работа

Краткое описание

Цель данного дипломного проекта – разработать технологию создания учебного пособия и проверить ее эффективность в реальном творческом проекте.
Реализация данной цели требует содержательного и методического решения следующих задач:
изучить историю и теорию Web-дизайна
разработать концептуальную модель учебника
изучить Web-технологию и языки HTML и Java-Script и их возможности в Web-дизайне
выявить эффективность программно-аппаратных средств в Web-дизайне
составить методическое руководство по разработке и использованию учебника.
провести апробацию разработанной технологии в реальном творческом проекте.

Оглавление

Введение 4
Распространение Internet 5
Концепция WWW 6
1. Информационное Обеспечение 9
1.1 Структура информационных потоков 9
1.2 Концептуальная модель учебника 1
2. Лингвистическое обеспечение 3
2.1 Создание Web-страницы с помощью языка HTML 3
2.2 Структура HTML документа 4
2.3 Форматирование текста 6
2.4 Фреймы 10
2.5 JavaScript 11
2.7 Дизайн учебника 12
3. Методическое обеспечение 14
3.1 Руководство по инсталляции 14
3.2 Руководство пользователя 14
4. Программное обеспечение 20
4.1 Выбор общесистемного программного обеспечения 20
4.2 Базовое программное обеспечение 21
4.3 Прикладное программное обеспечение 22
4.4 Руководство проектировщика 22
5. Техническое обеспечение 30
6. Промышленная экология 33
6.1 Понятие экологии 33
6.2 Экологические проблемы научно-технического прогресса 34
6.3 Классификация источников излучения и понятие ионизирующего излучения. Влияние ионизирующих излучений на окружающую среду и защита от них. 35
7. Мероприятия по охране труда и технике безопасности 44
7.1 Анализ условий труда операторов на вычислительных центрах 44
7.2 Меры по безопасности организации работ 46
7.3 Противопожарная защита 56
8 Технико-ЭкономическОЕ ОБОСНОВАНИЕ 59
Список использованных источников: 63
Приложения 66

Файлы: 1 файл

Разработка web-сайта.doc

— 1.06 Мб (Скачать)
 

 

     Таблица 3. 

     Шаблон  страницы

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

     Контейнер для большого изображения.

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

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

     2.4 Фреймы

 

     В данной дипломной работе все страницы сайта кроме первой содержат фреймы. Фреймы позволяют разделить окно браузера на небольшие части, каждая из которых выводит свой HTML документ. Поддержка фреймов, предложенная Netscape Navigator 2.0+, была вскоре использована и другими популярными браузерами. Основная спецификация фрейма работает с Netscape Navigator 2.0 и выше, а также с MicroSoft Internet Explorer, начиная с версии 3.0 .

     Главное преимущество фреймов заключается в том, что они обеспечивают неподвижность частей страницы, в то время как другие части прокручиваются. [19,27]Это важно, когда вы хотите, чтобы часть изображения оставалась постоянно на экране, например, навигационные значки или заголовки рекламных объявлений.

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

     Используя тег <no frames>, несложно добавить альтернативное содержимое для браузеров, которые  не поддерживают фреймы. Это свойство встроено в систему фреймов.

     2.5 JavaScript

 

     JavaScript представляет собой язык написания сценариев на клиентской стороне, который вносит на Web-страницы элементы интерактивности и условного поведения. С помощью JavaScript вы можете выводить дополнительную информацию о ссылках, создавать интерактивные эффекты при работе с мышью, изменять при определенных условиях содержимое страниц, случайным образом отображать содержимое страницы, загружать содержимое в новые окна браузер и фреймов и (с некоторой помощью CSS) передвигать элементы по странице. Дополнительные руководства по JavaScript можно найти на страницах webcoder.com.

     Сценарии  JavaScript обычно помещают непосредственно в документ HTML. Они могут находиться или в заголовке или в теле документа. В один документ можно поместить несколько сценариев. Пример синтаксиса: 

     <SCRIPT LANGUAGE=”JavaScnpt”>

     Здесь находится сценарий

     </SCRIPT>

     2.7 Дизайн учебника

 

     Элементы, без которых не обходится ни одна web-страница, — фон, текст и гипертекстовые ссылки — ставят интересную задачу гармонизации трех (или четырех, если учитывать цвет «посещенных» ссылок) цветов, занимающих в композиции резко различающиеся площади и выполняющих разные функции. Есть немало страниц с минимумом графики и достаточно ординарной композицией, которые привлекают и запоминаются исключительно своей цветовой гаммой.[19;20;21]

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

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

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

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

 

      3 Методическое обеспечение

     3.1 Руководство по инсталляции

 

     Чтобы разместить сайт в сети Internet, необходимо открыть сайт с адресом http://www.tbns.net/, затем перейти в окно "Free Services", далее на Web-Hosting, затем - SignUp Today, щелкнуть на SignUp Now! Следующий шаг – необходимо будет заполнить предложенную форму, при этом необходимо удостовериться, что ваше имя и адрес записаны верно. Вам будет выслана необходимая информация на ваш электронный счет, здесь важно не забыть свой пароль и пора подумать о будущем логине. Ваш сайт будет располагаться по адресу www.tbns.net/<ваш login>. Например,

     если  ваш логин = solidworks, то адрес будет

     address=www.tbns.net/solidworks

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

     3.2 Руководство пользователя

 

     Чтобы просмотреть сайт школы, пользователю необходимо иметь компьютер, модем, выход в интернет и браузер Internet Explorer 4.0 или выше.[22] Первая страница, на которую попадает пользователь, называется главной. (Рисунок 5) Она имеет вид таблицы, в ячейках которой расположены элементы страницы - гиперссылки, логотип школы и e-mail. Граница таблицы имеет толщину 0, поэтому ее на экране не видно.

 

       
 
 
 

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

     Сразу под анимированным логотипом  школы Завтрашнего Дня, располагается  текст в рамке, являющийся гиперссылкой, призванный заинтриговать читателя. При нажатии на этот текст, пользователь переходит на следующую страницу (см. рисунок 4 на стр. 39 и 6), где видные педагогические авторитеты высказываются о необходимости реформ, либо о состоянии народного образования в целом, что опять же подтверждает остроту вопроса реформирования школы. С этой страницы возможен переход только на главную страницу. 

       
 
 
 
 
 

     Рисунок 6 – Современная школа 

     Возвратясь  на главную страницу, читатель уже  понял, что с общественным образованием надо что-то делать, но что именно еще  не решил. И тут Школа Завтрашнего  Дня предлагает свой выход из ситуации. Именно так называется ссылка внизу экрана. При нажатии на нее читатель попадает на страницу, очень кратко, буквально в двух словах, представляющую ШЗД (Школу Завтрашнего Дня). (Смотрите рисунок 7) С этой страницы, как и впрочем, со всех остальных, можно перейти на любую другую страницу сайта.  

       
 
 
 
 

     Рисунок 7 – Школа завтрашнего дня 

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

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

       
 
 
 
 

     Рисунок 8 – Наша история 

     Под "Нашей историей" расположены "Наши будни", расказывающие о  повседневной жизни школы. (Смотрите рисунок 9) Эта страница постоянно  прокручивается без участия пользователя. На этой странице есть возможность  связаться со школой по электронной почте или непосредственно с автором сайта. Справа от логотипа расположена ссылка «Почему мы лучшие», где в полной мере используется сценарий Java-Script для анимации текста. (Смотрите рисунок 10) На странице проводится сравнительный анализ ШЗД на примере Казахстано-Американской английской школы и обычной школы. 

       
 
 
 

     Рисунок 9 – Наши будни 

     Под этой ссылкой находится школьный е-mail, при нажатии на который запускается Outlook Express, если он установлен на данной машине.

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

       
 
 
 
 
 
 

     Рисунок 10 – Почему мы лучшие

 

      Так, есть страница, называемая "Основы нашей философии", которая изобилует  таблицами, фреймами и Java скриптами. На этой странице анимированный текст объясняет принципы, на которых построена ШЗД.

     Кроме нее есть еще одна страница, которая  называется "5 законов обучения". Педагогические исследования д-ра Ховарда  и его команды привели к  открытию 5 законов обучения, которые имеют свое обоснование в Библии. Эти законы, которые служат фундаментом для "Основ нашей философии" прошли многолетнюю практику по всему миру и отлично зарекомендовали себя. 

 

     

     4

     4.

 

      4. Программное обеспечение

     4.1 Выбор общесистемного программного обеспечения

 

     В качестве операционной системы была выбрана Windows 9x по целому ряду причин. [23;34]

     Во-первых, она является одной из наиболее распространенных на сегодняшний день. Создавать программу, работающую на основе OS/2, было бы не рационально.

     Во-вторых, В Windows 9x, в частности 98, надежность компьютера повышается за счет применения новых мастеров, служебных программ и ресурсов, обеспечивающих бесперебойную работу системы.

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

     Проводник Windows 98 и Internet Explorer позволяют объединить ресурсы Web в едином представлении, что особенно важно, учитывая специфику данной работы.

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

Информация о работе Разработка web-сайта