Документ взят из кэша поисковой машины. Адрес оригинального документа : http://www.abitu.ru/en2002/closed/viewwork.html?work=13
Дата изменения: Fri May 5 15:25:23 2006
Дата индексирования: Tue Oct 2 02:15:50 2012
Кодировка: koi8-r






«Создание функционального сайта, занимающего минимум места»







Автор: Гаврилов Дмитрий Александрович.
Ученик физмат школы ?5 г.Долгопрудного
Введение.
1. Актуальность проблемы.
В настоящее время очень сильно растет число пользователей глобальной сети
Интернет, растет количество WEB- сайтов. В связи с этим очень остро встает
вопрос о размере WEB- страниц. Ведь чем больше места занимает WEB-
страница, тем больше за ее загрузку платят пользователи. (По выделенному
каналу - трафик, по модему - время). Автор считает, что основная цель
Интернета - информация, поэтому стоит ли размещать на страницах (часто даже
образовательного характера) различные анимационные кнопки, панели, и.т.д.
Ведь украсить кнопки, панели, и.т.д. можно и с помощью языка HTML, можно
применять JavaScript. Автор работы создал сайт, занимающий минимум места,
но сохранивший «дружелюбный» интерфейс и функциональность.
2. Проведенная работа.
Создан сайт, позволяющий с комфортом и удобством изучать размещенную на нем
информацию (каждая страничка загружается не более 2-5 секунд). Несмотря на
малый размер сайт выполнен в едином стиле и обладает оригинальным дизайном.
Цветовая гамма подобрана так, чтобы беречь зрение посетителей. Хорошо
продумана навигация по сайту. Программная часть сайта включает в себя
простые скрипты, написанные на языке JavaScript. Есть формы для заполнения
и дальнейшей отправки по почте, написанные на языке HTML. Сайт идеально
подходит для размещения на нем текстовой информации (по темам), программ,
и.т.д. на скачивание.
3. Дальнейшее развитие сайта.
В ближайший месяц сайт будет размещен во всемирной компьютерной сети
ИНТЕРНЕТ.
В настоящее время идет работа над форумом и гостевой книгой к этому сайту.
Также идет постепенная отладка скриптов. Автор с удовольствием примет все
Ваши замечания и поправки.


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

Методика решения.

Начнем с главной странички. Большинство поисковых систем ищет и
регестрирует странички по заголовку . Поэтому в этом теге
максимально кратко описываем нашу страничку. В данном случае:
Скачать MP3, приколы, съемки скрытой камерой, программы, описания<br> программ, материалы по реестру, Rundll32, материалы о компьютерном железе,<br> книги по древнейшей истории..
Можно также описать страничку в теге , но, как показывает практика,
толку от этого мало.

Можно оживить страничку следующим скриптом, который занимает около 1
килобайта:



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

Также можно разместить скрипт, который показывает возраст сайта:


Далее разместим заголовок страницы. Заголовок данной страницы выполнен в
программе Cool 3D 3.5. Затем с помощью программы Ulead Gif Animator 5.0 его
цветовая палитра была уменьшена до 16- ти цветов. Имеем - 3.2 кб.
Далее поместим ссылки. Автор работы предлагает следующее решение.



  Программы  
  Музыка  
  Игры  
  Видео  
  Описания  
  Книги  
  Компьютерное
железо  
  Авторы  



Сначала описывается стиль шрифта: описывается: шрифт, цвет шрифта - код
цвета, размер шрифта, тип шрифта - жирный, название шрифта - Arial, шрифт -
обычный. Далее идет описание шрифта, который сменит первый шрифт при
наведении на него мыши. Цвет шрифта - white, фон - blue. WR - имя стиля.

Затем описываем рамку, которая обводит текст в ссылке. Далее описывается
сама ссылка и всплывающая подсказка. Размер - минимален.

Можете посмотреть:ad2.htm

Другой вариант, более эффектный.

Описание шрифта аналогично первому примеру, но описание шрифта, который
сменяет первый, другое. Здесь применяется увеличения шрифта. При этом
создается эффект движения, что «оживляет» ссылку. Итак, каждая ссылка -
около 400 байт!!! И это с описанием стиля!!!

С помощью такого варианта удобно делать ссылки на электронную почту.

Далее разместим поле новостей. Для этого создадим таблицу, в одном из
столбцов которой разместим небольшой фрейм. Это удобно тем, что для
обновления новостей требуется заменять маленький файл.



Займемся страничкой со ссылками на программы. Заголовок опишем по аналогии
с главной страницей.

Далее рекомендуется разместить панель навигации. (Для удобства перемещения
по сайту).


    


Размер такой формы минимален.

Также рядом можно разместить ссылку на главную страницу.




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

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

Ссылка: programs.htm

Страницы со ссылками на музыку и видео изготавливаются полностью
аналогично.

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

Заголовок страницы аналогичен всем остальным.
В панели навигации разместим ссылки на страницы по тематике.



Рядом разместим ссылку на главную страницу.




Далее можно продублировать ссылки на страничке по теме в виде,
представленном автором:





  Всё о
видеокартах  

  Всё о современных
модемах  

HREF="international_standarts.htm">  Международные стандарты
модемов  





  Кулеры для Intel и AMD
(Кулеры,
I часть)  
  Увеличение
емкости болванок CD-R  
  Всё
о TV(FM) тюнерах.  




  Разгон в домашних
условиях  

  Кулеры для разгона (Кулеры,
II
часть)  



Затем разместим форму, которая отправляет сообщения посетителей (в IE 6.0 и
выше действие не проверялось)

"mailto:gavrilov@mail.mipt.ru?Subject=Send from Mail Form" ENCTYPE =
"text/plain">









Имя:



Тема:



Город:



Ваш сайт:



Сообщение:










Здесь используется кодировка text/plain, которая отправляет текст,
введенный в форму.

К сожалению, не все пользователи смогут воспользоваться такой формой. Дело
в том, что всю работу по составлению сообщения и запуску почтовой программы
для его отправки фактически берет на себя браузер пользователя. Это значит,
что конфигурация доступа пользователя к Интернет должна обеспечивать
одновременное функционирование протокола передачи гипертекстов и протокола
доставки исходящей почты. Такое возможно не всегда. Тем не менее, даже если
это невозможно, ничего смертельного не случится. Браузер просто выдаст
сообщение об ошибке.
Ссылка: hardwere.htm
Особые таблицы. Ссылка: table.htm
cellpadding="5" cellspacing="0">




















Программа Характеристики
Размер Описание
Windows 2000 500Мб Отлично
Windows XP 600Мб Отлично



|Программа |Характеристики |
| |Размер|Описание|
|Windows |500Мб |Отлично |
|2000 | | |
|Windows XP |600Мб |Отлично |

Данная таблица создается следующим образом:
















ROWSPAN=2 Эта ячейка занимает 2
ряда.
COLSPAN=2 Эта ячейка
занимает
2 колонки
Атрибуты COLSPAN и ROWSPAN не используются Атрибуты COLSPAN и ROWSPAN не используются
Атрибуты COLSPAN и ROWSPAN не используются Атрибуты COLSPAN и ROWSPAN не используются Атрибуты COLSPAN и ROWSPAN не используются


|ROWSPAN=2 Эта |COLSPAN=2 Эта ячейка занимает 2 |
|ячейка занимает |колонки |
|2 ряда. | |
| |Атрибуты COLSPAN|Атрибуты COLSPAN|
| |и ROWSPAN не |и ROWSPAN не |
| |используются |используются |
|Атрибуты COLSPAN|Атрибуты COLSPAN|Атрибуты COLSPAN|
|и ROWSPAN не |и ROWSPAN не |и ROWSPAN не |
|используются |используются |используются |

Ссылка: table2.htm
Далее о диаграммах. Многие их строят в EXEL-е, затем сохраняют в файл,
затем на сайт.
Автор предлагает следующее:
Можно для построения диаграмм использовать таблицы.
Пример:

Оценка операционных систем.


















Windows XP







color=#FFFFFF> 120








Windows
200







color=#FFFFFF> 100








Windows98 SE









10



Оценка операционных систем.
|Windows XP|120 |
| | |
| | |
|Windows |100 |
|200 | |
| | |
|Windows98 | |
|SE |10 |
| | |

Ссылка: table3.htm
Ссылка на весь сайт: ad2.htm

Выводы.
Простейший сайт готов. Места он занимает очень мало, даже по модему
загружается почти мгновенно.
В настоящее время автор занимается разработкой форума для этого сайта, а
также оптимизацией синтаксиса скриптов. Где-то через месяц сайт будет
размещен в глобальной сети ИНТЕРНЕТ.
Автор с удовольствием примет все ваши советы и замечания.