Разработка информативного сайта по компьютерным технологиям

Размещено на http://www.allbest.ru/

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ, МОЛОДЕЖИ И СПОРТА УКРАИНЫ

ХЕРСОНСКИЙ НАЦИОНАЛЬНЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ

КАФЕДРА ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ

Курсовой проект

РАЗРАБОТКА ИНФОРМАТИВНОГО САЙТА ПО КОМПЬЮТЕРНЫМ ТЕХНОЛОГИЯМ

Выполнил

студент группы 5ПР2 Е.М. Литовченко

Руководитель

Д.т.н., профессор В.А. Доровской

Херсон 2011

Размещено на http://www.allbest.ru/

СОДЕРЖАНИЕ

ВВЕДЕНИЕ

1. АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ. ПОСТАНОВКА ЗАДАЧИ

1.1 Анализ уже существующих сайтов

1. 2 Типы структур web - сайтов

1.3 Постановка задачи

2. ПРОЕКТИРОВАНИЕ БАЗЫ ДАННЫХ

2.1 Проектирование базы данных

2.2 Расчет популярности сайта

3. ПРОГРАМНАЯ РЕАЛИЗАЦИЯ WEB - САЙТА

3.1 Обоснование выбора программных и технических средств

3.2 Понятия и перечень требований, предъявляемых к содержимому и функциям web-сайта

3.3 Этапы создания сайта

3.4 Входные и выходные данные

3.5 Логическая структура web сайта

3.6 Инструкция пользователя

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

ПРИЛОЖЕНИЕ А. Экранные формы работы программы

ПРИЛОЖЕНИЕ Б. Текст программы



ВВЕДЕНИЕ

Интернет существует с 1969 года, с рождения сети ARPANET, господствовавшей вплоть до 1991 года, когда запустили в работу первую версию протокола HTTP. Этот своеобразный фундамент современного интернета до сих пор является основным методом передачи данных между пользователями и серверами. Протокол HTTP обеспечивает доставку данных и поддерживается всеми web-браузерами. Когда клиент запрашивает через браузер какую-либо информацию в интернет то задействует протокол HTTP для посылки своего запроса и этим же путём получаете ответ от сервера. Браузер служит для правильного оформления запроса клиента и визуального отображения полученного ответа.

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

В это же время начало развиваться программирование web приложений. Они нужны для создания игр, обмена файлами. Все эти и многие другие, сверх перечисленных, задачи, теперь доступны каждому простым набором данных в вашем браузере в любой точке мира в любое, удобное для вас, время. И всё это стало возможно только благодаря разработке языков программирования и технологий для создания приложений в web[1].

Все web-приложения делятся на две группы - серверные и клиентские. Различие между ними в методе исполнения:

- серверные приложения исполняются на машине сервера домена (сайта), с которого запрошен ответ или действие;

- клиентские приложения исполняются, как видно из названия, на компьютере пользователя, но обладают почти такими же возможностями, как обычные платформенные, написанные на C++ или Visual Basic, - как-то: красочность, скорость исполнения, интерактивность[2].

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

Вследствие изучения вышеперечисленных проблем был разработан динамический HTML. Он представляет собой комбинацию кода на HTML 3 и Java - сценариев, исполняемых на компьютере пользователя. Более или менее сформирован DHTML как технология для web-дизайна стал в 1998 году. Продвижению этих технологий всегда препятствовала конкурентная борьба между производителями браузеров. Одни реализовали её настолько, насколько считали нужным, другие - обязательно больше, чем у всех остальных. При этом на стандарт W3C вообще никто не обращал серьёзного внимания. Эта эпоха прославилась бардаком и самодеятельностью как среди web-мастеров, так и среди разработчиков браузеров[3].

WEB 2.0 - новейшая история интернет, основным достижением которой стало участие обычных пользователей в формировании содержания интернета. Теперь каждый, не имея специальных знаний, может завести свою страницу, личный дневник, форум, сайт под управлением CMS. Всё это стало возможно только в свете последней пятилетки, благодаря языкам PHP и MySQL, а также технологии AJAX[4].

Особенностью работы с базами данных является высокая скорость доступа к хранимым данным и неограниченный объём их хранения. Именно поэтому, когда появилась база данных с открытым исходным кодом - MySQL, она стала самой используемой для построения коллективных баз данных в интернете. В интернет базы данных используются для хранения данных пользователей, а также данных о записях, постах и прочих элементах, из которых формируется динамическое содержание страниц. Простота интерфейса, высокая скорость работы помогают MySQL оставаться наиболее популярной из всех[5].

PHP был создан Расмусом Лердорфом в 1995 году и практически сразу же приобрёл своих поклонников по всему миру. Главные преимущества PHP - быстрота, надёжность, простой синтаксис и почти неограниченные возможности. Как только Лердорф выложил версию своего детища в интернет, число пользователей интерпретатором достигло 50 000 за очень короткий срок. В настоящее время число доменов, использующих PHP, превысило 20% среди всех по всему миру. PHP обладает простым интерфейсом подключения к базам данных, в том числе и с MySQL[6].

AJAX или асинхронный Java Script и XML - это технология, использующая сценарии на Java Script, которые запрашивают данные у сервера в фоновом режиме и, по мере получения, обновляют отдельные части страницы. Фактически получается, что пользователь получает немедленный ответ на свои действия без перезагрузки страницы. AJAX объединяет технологии, ранее считавшиеся несовместимыми - серверные сценарии и клиентские. Для пользователя это означает более комфортную работу, почти такую же, как с обычной программой.

В сущности, AJAX распределяет нагрузку между сервером и клиентом, позволяя им обмениваться данными, пока пользователь просто работает со страницей. Можно сказать, что эта технология делает интернет максимально дружелюбным по отношению к пользователю и делает работу в интернет по-настоящему удобной [7].

Из этих соображений, было решено построить сайт, связывающий вышеперечисленные технологии.

сайт структура проектирование



1 АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ. ПОСТАНОВКА ЗАДАЧИ

1.1 Анализ существующих сайтов

Создание сайта нужно начинать с анализа предметной области, то есть просмотр уже созданных ранее сайтов. Это требуется сделать по следующим причинам:

- во-первых, понять, для каких целей сайт создается;

- во-вторых, нужно заранее знать, какую информацию надо подобрать по теме: статьи, иллюстрации, данные;

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

Ниже будут рассмотрены некоторые компьютерные сайты. Они находятся в первой десятке поисковика Google,следовательно, являются популярными.

Первым рассмотрим сайт «comp.vodn.info». Он представлен на рисунке 1.1

Рисунок 1.1 Главная страница сайта comp.vodn.info

Анализ этого сайта показал следующие положительные стороны:

1) Индекс цитирования средний, 40% аудитории приходит с поисковых систем. Около 50%-ти процентов со ссылающихся сайтов.

2) Быстрота доступа. Загружается страница не долго, так как не загружена графикой.

Отрицательными сторонами здесь будут:

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

2) Структура сайта слишком ассиметрична, что также мешает работе с сайтом. Создается ощущение, что на главную страницу сайта «накидана вся информация, которая может заинтересовать».

3) Информация, которая размещена на сайте, является актуальной лишь для тех, кто зашел на данный сайт для получения краткой информации. Но сайт создан для постоянного пользования, и подразумевалось, что информация будет пополняться и интересовать зарегистрированных пользователей. Но новости не обновлялись с июля 2009 года.

Следующим будет рассмотрен сайт, который также находится в десятке Google, следовательно, является популярным.

На рисунке 1.2 представлен сайт «www.bslash.kz/»

Рисунок 1.2 Главная страница сайта www.bslash.kz

Положительными аспектами сайта является:

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

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

3) Новости на сайте постоянно пополняются, комментируются.

4) За последние полгода статистика возросла на 0.5%

5) Отрицательной стороной является слишком много пустых пассивных полей.

1.2 Типы структур web - сайтов

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

Существует несколько видов сайтов:

1) Информационные web-сайты. На таких web-сайтах представлена информация по конкретной теме или об определенной организации. Это самые распространенные в сети Internet web-сайты; с течением времени они зачастую перенимают некоторые черты других категорий web-сайтов.

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

3) Web-сайты сообществ. На этих web-сайтах представлена информация или средства, связанные с осуществлением операций, но упор делается на взаимодействие между посетителями. Web-сайты, основанные на сообществах, имеют тенденцию к фокусированию на конкретной теме или человеке; они поощряют взаимодействие между сходно мыслящими личностями

4) Развлекательные web-сайты. Эти web-сайты создаются для игр или некоего занимательного взаимодействия, для которого могут употребляться элементы операционного, информационного типов и web-сайтов сообществ.

5) Коммерческие web-сайты. Web-сайт из этой группы создается и поддерживается организацией или индивидуумом для получения коммерческой выгоды - либо напрямую посредством электронной коммерции, либо косвенно через стимулирование приобретения товаров или услуг вне Internet.

6) Образовательные web-сайты. Web-сайт такого типа курирует некое образовательное учреждение (возможно, имеющее отношение к правительственным органам); он используется для обеспечения образовательных или исследовательских задач.

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

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

1.3 Постановка задачи

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

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

1. Просмотр данных компьютеров (новинки, характеристики);

2. Просмотр данных о мобильных устройствах (новинки, характеристики);

3. Просмотр данных о фотоаппаратах (новинки, характеристики).



2. ПРОЕКТИРОВАНИЕ БАЗЫ ДАННЫХ

2.1 Проектирование базы данных

База данных -- представленная в объективной форме совокупность самостоятельных материалов (статей, расчётов, нормативных актов, судебных решений и иных подобных материалов), систематизированных таким образом, чтобы эти материалы могли быть найдены и обработаны с помощью электронной вычислительной машины (ЭВМ).

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

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

1. Каждая таблица состоит из однотипных строк и имеет уникальное имя.

2. Строки имеют фиксированное число полей (столбцов) и значений (множественные поля и повторяющиеся группы недопустимы). Иначе говоря, в каждой позиции таблицы на пересечении строки и столбца всегда имеется в точности одно значение или ничего.

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

4. Столбцам таблицы однозначно присваиваются имена, и в каждом из них размещаются однородные значения данных (имя,e-mail,сообщение).

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

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

Результат построения представлен в таблице 2.1.

Таблица 2.1 Лог сообщений

Имя	E-Mail	Сообщение	Причина жалобы
Иванов	123@mail.ru	Где заказать?	Личное
Петров	123@mail.ru	Когда восстановится доступ?	Неполадки в работе сайта

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

2.2 Расчет популярности сайта

Для того чтобы сайт был популярен, необходимо чтобы он был на первой странице известных поисковиков. Существуют большие корпорации, поддерживающие мощные системы поиска. Сейчас главенствуют три основные поисковые системы: Яндекс, Google, Aport. Наряду с основными поисковыми системами существует еще десяток, но менее распространенных.

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

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

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

Так как все построено на догадках, статистике и вероятности - то предлагается описать элементы математической модели функцией вида:

f(A,B,C,x)=A*exp(-(x-B)^2/2C).

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

F(A,B,C,x)=1, x<70 ;

F(A,B,C,x)=A*exp(-(x-B)^2/2C), x>=70;

B=70; A=1; C=5;

где x - количество символов, B - рекомендуемая длина названия страницы (математическое ожидание), C - величина, характеризующая скорость убывания экспоненты.

Таким образом, если длина названия страницы не превышает 70 символов - получаем максимальную вероятность высокой оценки индекса страницы поисковой машиной.

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

A=1, B=2, C=5, F(A,B,C,x)=A*exp(-(x-B)^2/2C),

где х - позиция слова в названии страницы.

Общая модель может быть представлена в виде:

M₁ (A₁, A₂,…..A_n, B₁, B₂,….B_n, C₁, C₂,….C_n, x₁, x₂,….x_n) = = f (A₁, B₁, C₁, x₁) * f (A₂, B₂, C₂, x₂)* …. * f(A_n, B_n, C_n, x_n).

Или

M₂ (A₁, A₂,…..A_n, B₁, B₂,….B_n, C₁, C₂,….C_n, x₁, x₂,….x_n) = k₁ * f (A₁, B₁, C₁, x₁) +…. + k_n * f (A_n, B_n, C_n, x_n),

где k_i - коэффициент значимости каждой позиции.

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

3. ПРОГРАМНАЯ РЕАЛИЗАЦИЯ WEB - САЙТА

3.1 Обоснование выбора программных и технических средств

Курсовая программа “Информативный сайт компьютерных технологий” реализована на языке HTML с использование программирования сценариев РНР с использованием СУБД MySQL и языка программирования JavaScript. Оболочка написана на языке разметки гипертекста HTML.

PHP это скриптовый server-side язык программирования, предназначенный в основном для включения в html страницу и выполняемый сервером перед выдачей страницы браузеру. PHP очень похож на ASP, но приспособлен к unix-like системам и чаще всего употребляется с web-сервером apache, хотя может работать и с MS IIS и в принципе с любым другим web-сервером. Кроме того, PHP является объектно-ориентированным.

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

Для РНР характерны:

- Развитая функциональность для работы с базами данных, строками, сетевыми соединениями, поддержка операций с файловыми системами, Java, COM, XML, CORBA, WDDX и Macromedia Flash.

- Совместимость с платформами: UNIX (любые разновидности), Win32 (NT/95/98/2000), QNX, MacOS (WebTen), OSX, OS/2 и BeOS.

- Совместимость с серверами: модулем Apache (UNIX, Win32), CGI/Fast-CGI, thttpd, fhttpd, phttpd, ISAPI (IIS, Zeus), NSAPI (Netscape iPlanet), механизмом сервлетов Java, AOLServer и модулем Roxen/Caudium.

Интеграция PHP в Apache производится в автоматическом режиме. Для этого достаточно запустить установщик PHP и выбрать версию Apache. Детально процесс интеграции показан на рисунке 3.1.

Рисунок 3.1 Интеграция PHP в Apache

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

- Энергичное и доброжелательное сообщество разработчиков. Изобилие программных примеров и бесплатного кода. Группа разработчиков РНР отлично справляется с обеспечением новичков ресурсами и поддержкой.

- Простота расширения. Можно легко создавать собственные расширения языка.

- Простой синтаксис, напоминающий С. Опытные программисты С, C++, Perl и командных сценариев легко осваивают РНР.

- Открытость кода и бесплатность.

Замысел РНР возник у Расмуса Лердорфа (Rasmus Lerdorf) осенью 1994 года. Версия 1 этого языка появилась в начале 1995 года и была положительно воспринята небольшой группой пользователей. Позднее в том же году вышла версия 2, за которой последовали версии 3 и 4 в 1997 и 2000 годах, соответственно.

В 2003 году рост популярности РНР составлял 15% в месяц, и он использовался, по меньшей мере, в семи миллионах доменов (источник - Netcraft Survey), то есть 20% всех зарегистрированных на тот момент доменов. А это существенная часть рынка, если еще учесть, что в это число не входят многочисленные установки в корпоративных сетях и закрытых серверах разработчиков. РНР может работать на 7 основных платформах (стабильно), с 10 интерфейсами серверов (стабильно), поддерживает 40 стабильных расширений (и примерно столько же экспериментальных), предлагает поддержку свыше 20 баз данных. Эти цифры подтверждают, что своей нынешней популярности РНР достиг благодаря мощи и простоте использования.

Страница, на которой применяется РНР делается интерактивной благодаря:

1) возможности генерировать код HTML прямо на лету, под-готавливая страницу посетителю в уже готовом виде. Самый распространенный и самый простой пример - счетчик. Если он текстовый, все упрощается до предела. РНР передал браузеру нужное зна-чение, что положительно сказалось на скорости, так как уменьшился поток пере-даваемых данных по Интернету и браузеру ничего не надо дополнительно выпол-нять кроме HTML.

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

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

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

Синтаксис РНР очень похож на синтаксис языка С или Perl. Синтаксис включает в себя операторы, разделенные между собой точкой с запятой. Ошибки в РНР по умолчанию вы-даются на экран (в отличии от CGI, где все ошибки записываются в лог-файл), и найти ошибку при определенной внимательности и опыте не составит большого труда. Тем более что умный ин-терпретатор подскажет номер строки, в котором произошла ошибка.

Для программирования на РНР необходим любой текстовый редак-тор, но для удобства он должен обеспечивать подсветку синтаксиса и нумерацию строк. Еще понадобится комплект для ра-боты с РНР. Как правило, использу-ется Apache+PHP, хотя это и не обязательно, подходит любой сервер, например - IIS Microsoft. Но первый вариант бесплатен и имеет большую
поддержку документацией (в том числе на русском языке) и форумами, где можно выяснить любой вопрос.

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

SQL (Обычно произносимая как "СЭКВЭЛ") символизирует собой Структурированный Язык Запросов. Это язык, который дает вам возможность создавать и работать в реляционных базах данных, которые являются наборами связанной информации сохраняемой в таблицах. Что такое реляционная база данных? Реляционная база данных - это тело связанной информации, сохраняемой в двухмерных таблицах. Напоминает адресную или телефонную книгу.

3.2 Понятия и перечень требований, предъявляемых к содержимому и функциям web-сайта

Сайт (от англ. website: web -- «паутина, сеть» и site -- «место», буквально «место, сегмент, часть в сети») -- совокупность электронных документов (файлов) частного лица или организации в компьютерной сети, объединённых под одним адресом (доменным именем или IP-адресом).

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

Были выделены следующие требования к содержимому и функциям Web- сайта:

- Технические требования: использование HTML,CSS.

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

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

- Определение требований к техническим средствам

Для успешной работы программы “Информативный сайт компьютерных технологий” необходимый следующий набор технических средств:

- процессор - Intel Pentium II с частотой 500Мгц, или AMD Athlon или выше;

- оперативная память - 128 Мбайт и выше;

- видеоадаптер - объем видео памяти не ниже 4 Мбайт;

- накопитель на жестких дисках объемом - 2 Гбайт и выше;

- сетевая карта типа Fast Ethernet 10/100 МБит;

- стандартная 101/102 кнопочная клавиатура;

- манипулятор типа „мышь”.

3.3 Этапы создания сайта

Выделим основные этапы создания Web сайта (разработка информативного сайта по компьютерным технологиям):

1) Создание темы для сайта.

2) Создание главного сайта с удобным переключением между страницами.

3) Создание сайта - меню с отображением текущей техники, выбранной ранее в заглавном сайте.

4) Создание сайта для отображения информации о выбранной технике.

5) Создание обратной связи для того, чтобы пользователь сайта мог написать письмо с просьбой или советом.

6) Также на сайте будут размещаться слайды и курсовая работа. Это будет реализовано в специальной вкладке.

Структура сайта приведена на рисунке 3.1.

Рисунок 3.2 Структура сайта

3.4 Входные и выходные данные

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

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

3.5 Логическая структура web-сайта

Сайт выгружен на свободные хост и имеет адрес evgeniilit.net16.net.

Для каждой подзадачи была создана своя страница. Рассмотрим подробнее структуру сайта. Главная страница была названа index.htm. К ней можно получить доступ по адресу evgeniilit.net16.net/index.htm.

Структура этой старание построена на ссылках меду другими web страницами. Так к примеру с помощью следующего кода пользователь сможет перейти на страницу photo.htm:

<p><b><font color="#008cff"><a href="photo.htm"> </a></font></b></p>

Структура страницы photo.htm является страницей выбора и имеет структуру такую же как computers.htm и mobile.htm,но различная от главной страницы и страниц, которые дают информацию о выбранном продукте. Структура данной страницы позволяет выбрать фотоаппарат и информирует пользователя о виде этого аппарата и его названии. Структура данной страницы состоит из:

- фона, значение которого стоит не повторяться:

<body class="global ctt" style="background-image:url('images/fon3.jpg'); background-repeat:no-repeat;">

- вид фотоаппаратов и название. На странице и вид фотоаппарата и названия ссылаются на одну технику. На рисунке 3.3 показан вид данного меню.

Рисунок 3.3 Меню страницы photo.htm

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

- меню;

- изображение(возможности: отображение части изображения или его увеличение);

- информативная часть(находится под изображением и несет в себе информативный характер( параметры устройства).

Так, как часть страницы отличается от предыдущих, опишем логику данной страницы подробнее.

Страница также, как и предыдущие, выгружена на свободный хост. Она находится в папке menu. Такое название папка получила из-за того, что файлы, которые там хранятся, выбраны из меню страницы для выбора. Как указывалось ранее таких страниц 3 (компьютеры(computers.htm), фотоаппараты (photo.htm), мобильные телефоны (mobile.htm)). Далее будет проведено рассмотрение работы скрипта.

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

function autoactivate0(){ iAaCTA=testBrowser();

if(iAaCTA){document.write('<!-- ')} }

Далее создается функция, которая подгружает все элементы по идентификатору. Это видно из следующего кода:

function autoactivate1(obj_id){ if(iAaCTA){ var

obj=document.getElementById(obj_id); var objCode=obj.innerHTML;

var iAaFrom=objCode.indexOf('<object'); var

iAaTo=objCode.indexOf('</object>')+9; objCode=objCode.substring(iAaFrom,iAaTo);

document.write(objCode); } }

Следующим шагом тестируется браузер на возможность расчета данного скрипта. Так, как браузер, при котором тестировалась работа является Опера, приведу ту часть, которая отвечает за браузер Опера:

function testBrowser(){ var sBrowser=navigator.userAgent.toLowerCase(); var iAaPos=sBrowser.indexOf('msie');

var iAaOpera=sBrowser.indexOf('opera'); if(iAaPos>-1){

if(parseInt(sBrowser.charAt(iAaPos+5))>5){return true} } if(iAaOpera>-1){

if(parseInt(sBrowser.charAt(iAaOpera+6))>8){return true} } return false; }

Следующий кусочек отвечает за подгрузку Cookie на сайт.

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

- аутентификации пользователя;

- хранения персональных предпочтений и настроек пользователя;

- отслеживания состояния сессии доступа пользователя;

- ведения статистики о пользователях.

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



document.cookie=cookiename+'='+escape(value)+((days==null) ? '' : ';expires='+expiredate); }

function cookieExists(cookiename){ if (document.cookie.length>0){ var cookieindex=document.cookie.indexOf(cookiename+'=');

if (cookieindex>-1){return true} else{return false} } }

function cookieRead(cookiename){ if (document.cookie.length>0){ var cookieindex=document.cookie.indexOf(cookiename+'=');

if (cookieindex>-1){ var istart=cookieindex+cookiename.length+1; var iend=document.cookie.indexOf(";",istart);

if (iend<0) iend=document.cookie.length; return

unescape(document.cookie.substring(istart,iend)); } } return ''; }

Следующий кусочек служит для подсчета процента выгрузки страницы на сайт:

function opacitySet(obj,percent){ var percent=Math.round(percent); var

val=percent/100; obj.style.opacity=val;

obj.style.MozOpacity=val; obj.style.KhtmlOpacity=val; if (percent<100) {

obj.style.filter='alpha(opacity='+percent+')' }

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

function fadeHalt(obj){ var id=obj.id; for (x=0;x<aFadeObjs.length;x++){ if

(aFadeObjs[x].obj==id) {

clearTimeout(aFadeObjs[x].tmr); aFadeObjs[x].tgt=-1; return x; break; } } return

; }



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

function sizeTo(objx,wpos,hpos,secs){ var idx=resizeHalt(objx); var

valw=stripPx(objx.style.width);

var valh=stripPx(objx.style.height); var sw=(wpos-valw)/(secs*50); var sh=(hpos-valh)/(secs*50);

if (idx<0){idx=aResizeObjs.length; var origw=valw; var origh=valh}

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

Также стоит рассмотреть события на передвижения мыши. В следующем коде рассматривается, какое событие создать при движение мыши по оси У,а какое по оси Х.

function getMouseX(e) { if (!e && window.event) { var e = window.event; } if (e.pageX) { return e.pageX; }

else if (e.clientX) { return e.clientX+document.body.scrollLeft; } else { return 0; } }

function getMouseY(e) { if (!e && window.event) { var e = window.event; } if (e.pageY) { return e.pageY; }

else if (e.clientY) { return e.clientY+document.body.scrollTop; } else { return 0; } }



В вышенаписанном коде просто созданы процедуры, которые возможно использовать в дальнейшем ссылаясь на них и подставлять свои параметры.

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

<script type="text/javascript" src="../antenna/auto.js"></script>

Находится он в папке antenna. Папка так названа по желанию свободного хоста и из их соображений. Также была создана папка изображений images. Из этой папки подгружаются картинки на сайт.

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

Структурно сайт можно представлен на рисунке 3.4:

Рисунок 3.4 Отображение сайта в виде дерева

3.6 Инструкция пользователя

Для начала работы с сайтом необходимо перейти по адресу evgeniilit.net16.net.

На сайте будет показана главная страница. Она представлена на рисунке 3.5.

Рисунок 3.5 Главная страница сайта

Так как структура сайта поделена на 3 составляющих, а именно: компьютеры, мобильные телефоны и фотоаппараты, то на сайте присутствуют 3 соответствующие ссылки.

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

Рисунок 3.6 Выбор модели компьютера

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

Рисунок 3.7 Информация о выбранном компьютере

Аналогичным образом можно просмотреть информацию о мобильных телефонах и фотоаппаратах.

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

Также на сайте присутствует возможность загрузки курсовой. Для этого в правом меню необходимо выбрать пункт «Курсовые». Страница загрузки файлов представлена на рисунке 3.8

Рисунок 3.8 Страница загрузки файлов

На странице присутствует возможность выбора типа курсового(doc,pdf) или слайд-шоу.



ЗАКЛЮЧЕНИЕ

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

Визуальная часть сайта была написана на языке HTML с включением разметки CSS. Для создания сайта обработчика был выбран язык программирования PHP. РНР представляет собой язык с открытым исходным кодом для выполнения на сервере сценариев, создающих динамические web-страницы. Помимо независимости от браузеров он предлагает простое и универсальное, независимое от платформы решение для электронной коммерции и сложных web-приложений, в том числе управляемых базами данных. В качестве СУБД использовался MySQL. MySQL - это небольшая, но очень быстрая и функциональная реляционная СУБД. Также был подключен язык JavaScript. Он позволяет более красиво отображать некоторые части сайта. Так, как язык кроссплатформенный, то сайт будет работать на любой операционной системе.



СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

Веллинг Л., Томасон Л. Разработка Web-приложений с помощью PHP и MySQL - М.: Издательский дом «Вильямс», - 2003. - 800с.: ил.

Гилмор В. PHP 4. Учебный курс - СПб.: «Питер», - 2001. - 352с.: ил.

Курбацкий А. Н. Автоматизация обработки документов - Мн.: БГУ, 1999. - 221с.: ил.

Кузнецов М. В., Симдянов И. В., Голышев С. В. «РНР 5 на примерах.» -- СПб.: БХВ-Петербург, 2005. -- 576 с : ил.

Кузнецов М. В., Симдянов И. В., Голышев С. В. «РНР 5. Практика разработки Web-сайтов.» -- СПб.: БХВ-Петербург, 2005. -- 960 с : ил.

Аргерих Л. и др. «Профессиональное РНР программирование» 2-е издание. - Пер. с англ. - СПб: Символ-Плюс, 2003. - 1048 с., ил.

Матросов А.В., А.О. Сергеев, М.П. Чаунин “HTML 4.0” - СПб.: БХВ-Петербург, 2001. -672с



ПРИЛОЖЕНИЕ А

Экранные формы работы программы

Рисунок А.1 Главная страница сайта

Рисунок А.2 Список доступных мобильных телефонов

Рисунок А.3 Информация по выбранному мобильному телефону

Рисунок А.4 Служба поддержки пользователя



ПРИЛОЖЕНИЕ Б

Текст программы

Файл index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>О новинках</title>

<meta name="description" content="О новинках в компьютерной технике">

<meta name="generator" content="Antenna 4.0">

<meta http-equiv="imagetoolbar" content="no">

<link rel="stylesheet" type="text/css" href="antenna.css" id="css">

<style type="text/css">.abs {position:absolute}</style>

<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">

<script type="text/javascript" src="antenna/auto.js"></script>

</head>

<body class="global ctt" style="direction:left-to-right;">

<div class="ctr global" style="width:760px">

<div id="lays357huvrc">

<div id="pict962ajuby" class="hid abs" style="left:469px; top:256px; width:291px; height:527px;">

<img id="pict962ajubyi" class="fil smf" src="images/123.jpg" alt="">

</div>

<div id="pict357kmpvx" class="nml hid abs" style="left:222px; top:81px; width:246px; height:188px;">

<img id="pict357kmpvxi" class="fil" src="images/sketch_lines.jpg" alt="">

</div>

<div id="pict357kuvte" class="nml hid abs" style="left:90px; top:130px; width:225px; height:6px;">

<img id="pict357kuvtei" class="fil" src="images/heading_underline.jpg" alt="">

</div>

<div id="pict357oekzn" class="nml hid abs" style="left:20px; top:100px; width:57px; height:64px;">

<img id="pict357oekzni" class="fil" src="icon_bubble_large.jpg" alt="">

</div>

<div id="pict357tjdoa" class="nml hid abs" style="left:0px; top:0px; width:760px; height:88px;">

<img id="pict357tjdoai" class="fil" src="images/topbar.jpg" alt="">

</div>

<div id="pict357rftmf" class="nml hid abs" style="left:360px; top:7px; width:217px; height:67px;">

<img id="pict357rftmfi" class="fil" src="images/logo.gif" alt="">

</div>

<div id="pict357zepko" class="nml hid abs" style="left:469px; top:80px; width:291px; height:185px; cursor:default;">

<img id="pict357zepkoi" class="fil" src="images/panel.jpg" alt="">

</div>

<div id="pict357jppvw" class="nml hid abs" style="left:469px; top:849px; width:291px; height:84px;">

<img id="pict357jppvwi" class="fil" src="images/panel_fadeout.gif" alt="">

</div>

<form method="GET" action="http://www.google.com/search" target="_blank" id="srch786lxtha" class="nml hid abs" style="

left:469px; top:892px; width:290px; height:60px; opacity:0.9; -ms-filter:'alpha(opacity=90)'; filter:alpha(opacity=90);">

<input type="hidden" name="ie" value="UTF-8"><input type="hidden" name="oe" value="UTF-8">

<input type="hidden" name="domains" value=""><input type="hidden" name="sitesearch" value="">

<input style="width:100%" type="text" name="q" size="37" maxlength="255" value="">

<input style="width:100%" type="submit" name="searchbutton" value="Поиск в Google"></form>

<div id="pict964gpwow" class="hid abs" style="left:494px; top:100px; width:245px; height:147px;">

<img id="pict964gpwowi" class="fil smf" src="images/images.jpeg" alt="">

</div>

<div id="pict970drgae" class="hid abs" style="left:0px; top:-7px; width:760px; height:88px;">

<img id="pict970drgaei" class="fil smf" src="images/topbar2.jpg" alt="">

</div>

<div id="pict000nloux" class="hid abs" style="left:469px; top:782px; width:291px; height:106px;">

<img id="pict000nlouxi" class="fil smf" src="temp/1233.jpg" alt="">

</div>

<div id="pict357vpfku" class="nml hid abs" style="left:494px; top:288px; width:266px; height:32px;">

<img id="pict357vpfkui" class="fil" src="images/button.gif" alt="">

</div>

<div id="pict357zwkfp" class="nml hid abs" style="left:494px; top:338px; width:266px; height:32px;">

<img id="pict357zwkfpi" class="fil" src="images/button.gif" alt="">

</div>

<div id="pict357hcrud" class="nml hid abs" style="left:494px; top:388px; width:266px; height:32px;">

<img id="pict357hcrudi" class="fil" src="images/button.gif" alt="">

</div>

<div id="pict357cwnya" class="nml hid abs" style="left:480px; top:295px; width:39px; height:43px;">

<img id="pict357cwnyai" class="fil" src="images/icon_bubble_small.gif" alt="">

</div>

<div id="pict357dqihi" class="nml hid abs" style="left:480px; top:345px; width:39px; height:43px;">

<img id="pict357dqihii" class="fil" src="images/icon_bubble_small.gif" alt="">

</div>

<div id="pict357njijq" class="nml hid abs" style="left:480px; top:395px; width:39px; height:43px;">

<img id="pict357njijqi" class="fil" src="images/icon_bubble_small.gif" alt="">

</div>

<div id="text357fhdca" class="nml aut abs" style="left:525px; top:295px; width:200px; height:26px;">

<p><a href="index.htm">На главную</a></p></div>

<div id="text357ybwdy" class="nml aut abs" style="left:525px; top:345px; width:200px; height:26px;">

<p><a href="solutions.htm">Курсовые</a></p></div>

<div id="text357ufqpc" class="nml aut abs" style="left:525px; top:395px; width:200px; height:26px;">

<p><a href="contact.htm">Общая информация</a></p></div>

<div id="pict980eoyqy" class="hid abs" style="left:480px; top:395px; width:39px; height:43px;">

<img id="pict980eoyqyi" class="fil smf" src="temp/icon_bubble_small.gif" alt="">

</div>

<div id="pict980rgsfz" class="hid abs" style="left:480px; top:345px; width:39px; height:43px;">

<img id="pict980rgsfzi" class="fil smf" src="temp/icon_bubble_small.gif" alt="">

</div>

<div id="pict981oujwf" class="hid abs" style="left:480px; top:295px; width:39px; height:43px;">

<img id="pict981oujwfi" class="fil smf" src="temp/icon_bubble_small.gif" alt="">

</div>

</div>

<div id="lays357axdyn">

<div id="text357mqhwn" class="hd1 aut abs" style="left:90px; top:100px; width:230px; height:30px;"><p>ОБЗОР ТЕХНИКИ</p></div>

<div id="text357iupel" class="hd2 aut abs" style="left:15px; top:188px; width:454px; height:253px; cursor:default;">

<p>Добро пожаловать на компьютерный сайт</p>

<p>&nbsp;</p>

<p>Данный сайт содержит:</p>

<p>&nbsp;</p>

<p><b><font color="#008cff"><a href="computers.htm">Информацию о компьютерах</a></font></b></p>

<p><span style="font-size: 10px">Компьютерные новинки - процессоры,материнские платы,ОЗУ,видеокарты.</span> &nbsp; </p>

<p>&nbsp;</p>

<p><b><font color="#008cff"><a href="photo.htm">Информацию о фотоаппаратах</a></font></b></p>

<p><span style="font-size: 10px">Фотоаппараты от различных производителей и их описание.</span></p>

<p>&nbsp; &nbsp; </p>

<p><b><font color="#008cff"><a href="mobile.htm">Информацию о мобильных телефонах</a></font></b></p>

<p><span style="font-size: 10px">Информаию о новинках мобильных телефонов,смартфонов и комуникаторах.</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

</div>

<div id="pict977norrq" class="hid abs" style="left:-4px; top:490px; width:473px; height:292px;">

<img id="pict977norrqi" class="fil smf" src="temp/xuke600-1.jpg" alt="">

</div>

</div>

</div></body></html>

Файл Solutions.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Выбор типа курсовой работы</title>

<meta name="description" content="Новинки">

<meta name="generator" content="Antenna 4.0">

<meta http-equiv="imagetoolbar" content="no">

<link rel="stylesheet" type="text/css" href="antenna.css" id="css">

<style type="text/css">.abs {position:absolute}</style>

<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">

<script type="text/javascript" src="antenna/auto.js"></script>

</head>

<body class="global ctt" style="direction:left-to-right;">

<div class="ctr global" style="width:760px">

<div id="lays357huvrc">

<div id="pict962ajuby" class="hid abs" style="left:469px; top:256px; width:291px; height:527px;">

<img id="pict962ajubyi" class="fil smf" src="images/123.jpg" alt="">

</div>

<div id="pict357kmpvx" class="nml hid abs" style="left:222px; top:81px; width:246px; height:188px;">

<img id="pict357kmpvxi" class="fil" src="images/sketch_lines.jpg" alt="">

</div>

<div id="pict357kuvte" class="nml hid abs" style="left:90px; top:130px; width:225px; height:6px;">

<img id="pict357kuvtei" class="fil" src="images/heading_underline.jpg" alt="">

</div>

<div id="pict357oekzn" class="nml hid abs" style="left:20px; top:100px; width:57px; height:64px;">

<img id="pict357oekzni" class="fil" src="icon_bubble_large.jpg" alt="">

</div>

<div id="pict357tjdoa" class="nml hid abs" style="left:0px; top:0px; width:760px; height:88px;">

<img id="pict357tjdoai" class="fil" src="images/topbar.jpg" alt="">

</div>

<div id="pict357rftmf" class="nml hid abs" style="left:360px; top:7px; width:217px; height:67px;">

<img id="pict357rftmfi" class="fil" src="images/logo.gif" alt="">

</div>

<div id="pict357zepko" class="nml hid abs" style="left:469px; top:80px; width:291px; height:185px; cursor:default;">

<img id="pict357zepkoi" class="fil" src="images/panel.jpg" alt="">

</div>

<div id="pict357jppvw" class="nml hid abs" style="left:469px; top:849px; width:291px; height:84px;">

<img id="pict357jppvwi" class="fil" src="images/panel_fadeout.gif" alt="">

</div>

<form method="GET" action="http://www.google.com/search" target="_blank" id="srch786lxtha" class="nml hid abs" style="

left:469px; top:892px; width:290px; height:60px; opacity:0.9; -ms-filter:'alpha(opacity=90)'; filter:alpha(opacity=90);">

<input type="hidden" name="ie" value="UTF-8"><input type="hidden" name="oe" value="UTF-8">

<input type="hidden" name="domains" value=""><input type="hidden" name="sitesearch" value="">

<input style="width:100%" type="text" name="q" size="37" maxlength="255" value="">

<input style="width:100%" type="submit" name="searchbutton" value="Поиск в Google"></form>

<div id="pict964gpwow" class="hid abs" style="left:494px; top:100px; width:245px; height:147px;">

<img id="pict964gpwowi" class="fil smf" src="images/images.jpeg" alt="">

</div>

<div id="pict970drgae" class="hid abs" style="left:0px; top:-7px; width:760px; height:88px;">

<img id="pict970drgaei" class="fil smf" src="images/topbar2.jpg" alt="">

</div>

<div id="pict000nloux" class="hid abs" style="left:469px; top:782px; width:291px; height:106px;">

<img id="pict000nlouxi" class="fil smf" src="temp/1233.jpg" alt="">

</div>

<div id="pict357vpfku" class="nml hid abs" style="left:494px; top:288px; width:266px; height:32px;">

<img id="pict357vpfkui" class="fil" src="images/button.gif" alt="">

</div>

<div id="pict357zwkfp" class="nml hid abs" style="left:494px; top:338px; width:266px; height:32px;">

<img id="pict357zwkfpi" class="fil" src="images/button.gif" alt="">

...