Содержание
Введение2
1. Аналитическая часть4
1.1 Изучение проблемы4
1.2 Требования к системе5
1.3 Программная и техническая архитектура школы6
1.4 Обоснование необходимости использования вычислительной техники для решения задачи9
2. Проект системы10
2.1 Выбор инструментальных средств10
2.2 Выбор программного обеспечения13
2.3 Выбор аппаратных средств16
2.4 Структура информационного фонда18
3. Программная реализация20
3.1 Дерево функций и сценарий диалога20
3.2 Описание программных модулей20
3.4 Руководство пользователя33
3.4.1 Установка системы33
3.4.2 Работа клиентского приложения33
3.4.3 Работа приложения администратора38
4. Обоснование экономической эффективности проекта45
5. Безопасность жизнедеятельности49
5.1. Разработка мероприятий по охране труда49
5.1.1.Нормирование микроклимата помещения52
5.1.2.Описание вредных производственных факторов и влияние их на персонал55
5.1.2.1.Освещение55
5.1.2.2. Шум60
5.1.2.3. Обеспечение электробезопасности на рабочем месте62
Заключение64
Литература65
Приложения67
Выдержка из текста работы
_________________________________________________________________________________________________________________________________________________________________________________________________
4. Цель, задачи дипломной работы ______________________________
_________________________________________________________________________________________________________________________________________________________________________________________________
_________________________________________________________________________________________________________________________________________________________________________________________________
5. Содержание выпускной квалификационной работы ______________
___________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
6. Перечень графического материала ____________________________
_____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
7. Нормоконтроль __________________________________________
________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
Руководитель _________________
Задание к исполнению принял «28» апреля 2012 г.
Содержание
Определения, обозначения и сокращения
Введение
1. Основная часть
1.1 Обзор типов сайтов
1.2 Основные этапы разработки Web-сайта
1.3 Технологии создания Web-сайта
1.3.1 Принцип работы Web-сервера
1.3.2 Технологии серверных скриптов
1.3.3 Работа с базами данных. СУБД MYSQL
2. Практическая часть
2.1 Характеристика объекта проектирования сайта
2.2 Задачи Web-сайта
2.3 Программное обеспечение для реализации создания Web-сайта
2.4 Разработка веб-сайта
2.4.1 Построение базы данных сайта
2.4.2 Построение основной части сайта
2.4.3 Организация обратной связи на сайте
2.4.4 Организация форума на сайте
Заключение
Список использованной литературы
Приложение А Шаблонная страница сайта index.php
Приложение Б Каскадная таблица стилей template.css
Определения, обозначения и сокращения
В настоящей ВКР применяют следующие термины с соответствующими определениями:
1. WWW — world wide web — гипертекстовая среда Интернет, объединяющая мультимедийные документы средствами гипертекста. Пользователи могут переходить от одних документов к другим с помощью гипертекстовых ссылок.
2. DNS-сервер — Domain name system server- специальные компьютеры, известные серверы системы доменных имен. Хранят таблицы имен машин с ассоциированными с ними IP-адресами и переводят их в друг в друга для человеческих и компьютерных нужд.
3. URL — Uniform Resource Location — унифицированный адрес ресурса. Стандартная форма обозначения имен файлов в Интернете и в World Wide Web, описывающая тип сетевой службы, абонентское имя компьютера и имя файла на данном компьютере, включая полный путь поиска файла.
4. HTML — hypertext mark-up language — язык разметки гипертекста. Основная задача HTML — определить структуру документов и семейств документов так, чтобы они могли быть легко и быстро доставлены пользователю по сетям и отображены на самых разных дисплеях.
5. HTTP — hypertext transport protocol — протокол прикладного уровня передачи данных (изначально — в виде гипертекстовых документов). Основой HTTP является технология «клиент-сервер», то есть предполагается существование потребителей (клиентов), которые инициируют соединение и посылают запрос, и поставщиков (серверов), которые ожидают соединения для получения запроса, производят необходимые действия и возвращают обратно сообщение с результатом.
6.TCP/IP — это название набора сетевых протоколов. На самом деле передаваемый пакет проходит несколько уровней. IP протокол — это протокол так называемого сетевого уровня. Задача этого уровня — доставка ip-пакетов от компьютера отправителя к компьютеру получателю. TCP — это протокол с установлением соединения и с гарантированной доставкой пакетов.
Введение
Для всего цивилизованного мира образование и культура являются наиболее важными и весомыми общечеловеческими ценностями. Большие возможности для повышения образовательного уровня и культурного развития открывает информационное пространство Интернет. Интернет и WWW прочно вошли в нашу жизнь, и теперь уже трудно представить свою деятельность без них. WWW — это огромный набор гипертекстовых документов, которые благодаря Интернет, доступны в любой точке мира.
Создание Web- сайтов является одной из важнейших технологий разработки ресурсов Интернет. Web-сайт — это информационный ресурс, состоящий из связанных между собой гипертекстовых документов (Web-страниц), размещенный на Web-сервере и имеющий индивидуальный адрес. Web-страница представляет собой текстовый файл с расширением *.html, который содержит текстовую информацию и специальные команды: HTML-коды, определяющие в каком виде эта информация будет отображаться в окне браузера. Вся графическая, аудио- и видео информация непосредственно в Web-страницу не входит и представляет собой отдельные файлы с расширениями *.gif, *.jpg (графика), *.mid, *.mp3 (звук), *.avi (видео). Хороший сайт, вбирая в себя всю полезную информацию, является лучшей визитной карточкой и коммерческой фирмы и образовательного учреждения.
Создание электронного представительства в сети Интернет — Web-сайта, является действенным средством реализации коммуникационной политики организации. Задачей Web-Сайта является бесперебойное предоставление разнообразных информационных продуктов и услуг целевой аудитории в on-line режиме.
Подводя итог сказанного выше, можно утверждать, что создание качественного сайта является залогом успеха имеджа компании.
Исходя из этого, можно определить цель и задачи выпускной квалификационной работы.
Цель: разработать на основе современных технологий web-сайт с функциями обратной связи и форума для общеобразовательного учреждения Лицей №35.
Задачи:
1. проанализировать информацию по видам web-сайтов и способах их создания;
2. систематизировать данные по разработке web-сайтов и их продвижению в сети Интернет;
3. разработать корпоративный web-сайт Лицея №35 с функциями обратной связи и форума и перенести на него данные со старого.
Метод исследования: обзор и анализ существующих разработок (сайтов образовательных учреждений), изучение документов, литературы, экспериментальная работа.
1. Основная часть
1.1 Обзор типов сайтов
Деление сайтов по типам довольно условно. Чёткое определение целей и задач планируемого сайта даст понимание того каким он должен быть и на какую аудиторию должен быть рассчитан.
В зависимости от целей, сайты условно можно разделить на несколько типов:
— Персональные (домашние) странички
Это сайты обычных пользователей. Сайт обычно состоит из небольшого количества страниц. На этих страницах пользователи обычно выкладывают любую информацию, например: о себе, о друзьях и т.д. Данные сайты не относятся к коммерческой деятельности. Подобные виды сайтов, в большинстве случаев, имеют узкий круг аудитории.
— Сайт-визитка
Сайт не отличается большой функциональностью. Сайт- визитка применим для выкладывания просто контактной информации о компании, виде деятельности и несёт в себе рекламный характер. В основном сайт содержит всего 5-10 страниц на которых размещают информацию о себе и своих услугах ; структура сайта в основном проста имеет главную страницу и несколько разделов: «О компании», «Продукция или услуги», «Прайс-листы», «Контакты».
— Информационные сайты
Подобные типы сайтов в интернете очень распространены. Ими пользуются организации, предприятия, индивидуальные предприниматели или обычные пользователи интернет для выкладывания информации большой аудитории. На данном виде сайте может быть создано множество страниц посвященной одной тематике или широкого круга информационной направленности, все зависит от назначения информационного сайта. Данный вид сайтов очень подходит для предприятий и организаций. В первую очередь на данном предприятии можно выложить всю необходимую информацию о фирме, ее деятельности, товарах, вакансиях и т.д.
— Промо сайты
Сайты, посвященные разовым событиям и акциям. Например, выставке или конференции, празднику или концерту. Освещение таких мероприятий через специальные веб-ресурсы, называемые «промо-сайтами», является хорошим тоном и показателем высокого уровня их организации и проведения. Эксклюзивный дизайн создается с учетом всех особенностей акции. Единственным отличием данного вида сайтов является то, что время жизни его ограниченно, конкретным мероприятием. И как только оно закончиться, информация на сайте станет бесполезной.
— Сайт фотогалереи
Данный вид сайтов предназначен для размещения на нем картинок, изображений и других иллюстраций. Например, подобный вид сайтов применим для организации выставки картин, любительских фото, все зависит от специфики самой фотогаллереи. Подобные виды сайтов не предназначены для размещения какой бы то ни было информации, они выступают в роли выставок.
— Сайт Блог
Это сайт, представляющий собой интернет-дневник, или журнал, который ведется подобно новостной ленте, при этом на каждую тему блога посетители могут оставлять свои комментарии-сообщения, доступные с главной страницы соответствующей темы. Блог обычно очень часто обновляется, по этой причине он может намного чаще индексироваться поисковыми машинами. Блог часто используется для общения людей объединенных какими-либо общими интересами, и в этом, чем-то, напоминает форум. Самые последние события в мире зачастую раньше появляются на различных блогах, и только немного позже в сообщениях новостных интернет-изданий.
— Информационные интернет издания, СМИ
Это особые виды сайтов. Относятся они к категории крупных новостных порталов, которые публикуют большое количество информации на своих сайтах. Основная тематика данных сайтов — это новости различного рода. Это может быть как новости региональные, города, так и глобальные новости всего интернета. Такие сайты имееют сложную структуру категорий.
— Корпоративные представительства
Корпоративные представительства — это облегченная версия корпоративного сайта. В распоряжении корпоративного представительства входят все инструменты для создания многоуровневой структуры сайта, создания оригинального дизайна, не имеет ограничений по функциональности. Но в свою очередь корпоративное представительство не имеет интерактивных модулей взаимодействия с посетителями, такие например, как форум, регистрация на сайте и т.д. В данном виде сайта может быть подключены такие модули как дата и время, календарь, информационно-рекламный блок и другие. Поэтому корпоративные сайты в какой-то мере похожи на информационные сайты.
— Крупные информационные порталы
С первого взгляда может показаться, что это обычный информационный сайт, только большой. Но это не так крупный информационный портал — это сайт, который не только содержит большой объем информации, но имеет всю предоставленную информацию в текстовом или графическом варианте, предоставляя ее для скачивания посетителю. Примерами таких крупных информационных порталов могут являться портал, посвященный большой коллекции рефератов, курсовых или дипломных работ, либо сайт, посвященный юридической тематике, на котором посетитель может не только прочитать закон, постановления и т.д., но и скачать все эти документы для просмотра на своем компьютере.
— Корпоративный сайт
Корпоративные сайты — это классика Интернета. Полнофункциональный web-сайт. Обладает большим объемом и разветвленной структурой представления данных, позволяющей разместить всю интересующую Вашего потенциального клиента информацию. Эксклюзивный дизайн корпоративного сайта выполнен с учетом фирменного стиля и концепции сайта. Специально разработанная навигация позволяет посетителю сайта быстро найти любую интересующую его информацию, а присутствующие интерактивные формы дают возможность принять участие в обсуждении (форум), оставить свой отзыв о сайте или услугах фирмы (гостевая книга), а также заказать товар или услугу, заполнив бланк заказа. Весь ассортимент продукции фирмы обычно представлен в электронном каталоге с яркими красочными фотографиями.
— Интернет-магазин
Может включать в себя различные интерактивные формы (гостевая книга, форум, задай вопрос), но обязательно каталог товаров и корзину заказов. Часто на главную страницу выносятся новинки товаров, «хиты продаж», специальные предложения. Вы можете создать эксклюзивный дизайн нацеленный на увеличение числа продаж, носит специфический характер.
1.2 Основные этапы разработки Web-сайта
сайт серверный скрипт форум
Любой сайт, как впрочем и любой проект, проходит по определенным этапам своего жизненного цикла. Перечислим их:
1.Постановка целей и задач, создание проекта. На первоначальном этапе необходимо определиться с целями создания сайта и задачами которые он будет решать. После этого выбрать нужное направление. Разработка проекта представляет собой детальное техническое задание, которое подробно описывает все детали разработки.
2. На второй стадии проекта разрабатываются:
-дизайн (2 макета)
-HTML- верстка
-программная часть и создание панели управления
-наполнение сайта содержимым
-происходит запуск сайта.
3. После того, как создан сайт, удовлетворяющий потребности, необходимо приступить к его продвижению (привлечению пользователей на сайт). Результатом данного этапа является то, что сайт начинает приносить прибыль и работать на имидж компании-владельца.
4.Жизнь не стоит на месте, и через некоторое время уточняется и дополняется понимание потребностей, и, следовательно, ставятся новые цели и задачи.
На рисунке ниже показаны шаги, которые способствуют достижению цели. Определенные этапы могут идти одновременно.
Рисунок 1 Этапы разработки Web-сайта
Рассмотрим подробнее этапы создания сайта.
Первый этап является самым важным, так как неправильная постановка целей и задач не может привести к желаемому результату. Необходимо так же проанализировать потенциальную аудиторию, на которую он будет рассчитан, определиться с направлением концепции сайта.
Для достижения всей перечисленных целей первого этапа так же надо определиться с командой. Очень правильно, когда со стороны компании разработчика есть проект-менеджер — человек, который отвечает за проект и является посредником между клиентом и командой разработчиков. Проект-менеджер должен заниматься координацией технических специалистов, в то время как общение с регистратором доменных имен и хостинговой компанией клиент ведет самостоятельно.
Рисунок 2 Роли в проекте разработки Web-сайта
Также очень полезно, когда и со стороны заказчика имеется одно ответственное лицо, владеющее всей полнотой необходимой информации и принимающее решение. Даже в крупных проектах, когда привлечено большое количество людей, принимать решение должен один человек, с которым проект-менеджер должен иметь возможность общаться без посредников.
Второй этап, не менее важен, здесь уже непосредственно идет разработка самого сайта: его дизайн, программная, логическая части, а так же наполнение сайта и его запуск.
Начать нужно с разработки базового макета. Этот этап можно начать с посещения сайтов конкурентов. Первая задача — изучить лучшие образцы сайтов по аналогичной (или близкой теме) и отметить для себя достоинства и недостатки каждого из них. Учитывая опыт конкурентов, нужно определить общую концепцию дизайна, базовые элементы, цвета, шрифты и прочее. При этом, конечно же, необходимо учитывать пожелания заказчика. Последняя стадия проектирования — создание наброска, каркаса. Его можно сделать на бумаге, можно с помощью специальных программ и сервисов. После обсуждения с заказчиком, можно переходить к разработке дизайна.
Разработка дизайна — это этап определения с формой, в которую облачится содержимое сайта, это детализация макета. Обычно такой дизайн создается в Photoshop или другом графическом редакторе. Готовый дизайн должен практически полностью соответствовать конечному продукту (элементы, цвета, картинки, шрифты). Разработка дизайна включает в себя не только основную страницу, но и разработку также подстраниц, а может быть и “дополнительные версии” для мобильных устройств или каких-то других специальных целей.
Далее можно переходить непосредственно к самому созданию сайта. На этом этапе необходимо «картинку» (детализированный дизайн) превратить в живой сайт. Этот этап начинается с верстки страниц. В зависти от того как, на основе чего и для какой CMS (если она предусмотрена) пишется код. После «нарезки» нужных элементов в Photoshop, происходит процесс разметки. Далее сайт наполняют необходимой информацией.
После написания, отладки, тестирования в различных браузерах и исправления ошибок, наступает следующий этап: запуск сайта. Запуск сайта заключается в публикации его в Интернете. После закачивания сайта на хостинг по ftp, еще раз тщательно все тестируется.
Третий этап — продвижение сайта.
Продвижение сайта — это процесс поднятия его рейтинга в поисковых системах. В России основной поисковой системой счатается Яndex, Rambler, и Google. Не так важно, какой поисковой системой будет пользоваться потенциальный клиент — процесс продвижения сайтов одинаков для всех поисковых систем. Для этого осуществляется процедура регистрации в поисковых системах, каталогах, рейтингах и т.д. А для увеличения вероятности нахождения его заинтересованным пользователем, используется оптимизация сайта с применением различных средств раскрутки и продвижения его в сети. Результатом данного этапа является то, что сайт начинает приносить прибыль и работать на имидж компании-владельца.
Последний этап — обновление сайта. Дело в том, что созданный сайт, в зависимости от своей специфики, нуждается в регулярном обновлении содержания, реже — дизайна. Своевременное обновление информации на сайте — залог успеха. Актуальный ресурс, содержащий свежую информацию, помогает привлечь целевую аудиторию.
1.3 Технологии создания Web-сайта
1.3.1 Принцип работы Web-сервера
Интернет — это абстрактное понятие, ресурсы Интернета разбросаны по оборудованию на всем земном шаре. Для связи этого оборудования между собой на огромных расстояниях придумали специальные алгоритмы и стандарты, в частности, протокол TCP/IP, на котором в настоящее время функционирует наш Интернет. Согласно этому стандарту, каждый компьютер, находящийся в Глобальной сети, имеет свой уникальный адрес — IP-адрес. IP-адрес, представляет собой последовательность четырех чисел в диапазоне от 0 до 255, разделенных между собой точками (например, 195.34.32.116.). Один компьютер может связаться с другим компьютером в сети, зная его IP-адрес. Но сказать «компьютер связался с компьютером» не совсем верно, так как связываются не сами компьютеры, а сетевые службы (приложения), выполняющиеся на них. На компьютере одновременно может работать сразу несколько сетевых программ (например почтовый сервер, веб-сервер и пр.), поэтому помимо IP-адреса для связи протоколом TCP/IP предусмотрено дополнительно такое понятие как порт. Порт — это число в диапазоне от 1 до 65536. Таким образом, минимальным условием для связи одной сетевой программы с другой является наличие у первой IP-адреса и номера порта второй. Совокупность IP-адреса и порта принято записывать через двоеточие (например, 195.34.32.116:443).
Для установления связи первой программе задается номер порта и она начинает «ожидать» подключение второй. Второй программе указывается тот же самый номер порта и IP-адрес компьютера, на котором запущена первая программа.
Программа, ожидающая подключение, называется сервером. Серверу при запуске указывается номер порта. На компьютере не может быть запущено более одного сервера с одинаковым номером порта (иначе невозможно определить, к какому из серверов подключаться). Программа, устанавливающая соединение с сервером, называется клиентом. К серверу могут подключаться несколько клиентов с разных компьютеров, если это поддерживает сам сервер.
Теперь определим, что такое WEB-сервер. Судя по названию, это сетевая программа, ожидающая и принимающая соединения (сервер). По умолчанию, WEB -сервер «слушает» порт под номером 80. WEB-сервер поддерживает работу одновременно с несколькими клиентами (сразу несколько человек могут просматривать сайт). Клиентом для WEB-сервера выступает WEB-браузер (Internet Explorer, Opera, Mozilla Firefox и так далее).
Таким образом, сайт функционирует за счет WEB -сервера, который отправляет странички этого сайта клиентам, запрашивающих их у него. Для того, чтобы запросить страницу необходимо знать IP-адрес компьютера, на котором запущен WEB -сервер с нужным сайтом. Но запоминать IP-адреса неудобно, поэтому придумали доменные имена, представляющие собой некую текстовую сущность (например, yandex.ru). Доменные имена более понятны и более легки в запоминании. Однако протокол TCP/IP не в состоянии найти требуемый компьютер по доменному имени, поэтому его необходимо преобразовать в IP-адрес. Для этого служат DNS-сервера на которых расположены таблицы соответствий доменных имен и IP-адресов. Когда мы вводим в адресной строке браузера домен yandex.ru, в первую очередь посылается запрос в DNS-сервер для определения IP-адреса данного домена. Когда адрес определен, браузер пытается связаться с WEB-сервером по этому адресу и по стандартному порту под номером 80. Если соединение с WEB-сервером установлено, браузер запрашивает у WEB-сервера требуемую страницу сайта.
Для взаимодействия WEB -сервера и браузера необходим «общий язык», то есть некий стандарт, по которому формируются запросы и ответы. Этим стандартом служит протокол HTTP (Hyper Text Transfer Protocol). Этот протокол соответствует схеме «запрос-ответ».
Одним из наиболее распространенных web-серверов в настоящее время является Apache. Apache HTTP-сервер является кроссплатформенным программным обеспечением, поддерживает операционные системы Linux, BSD, Mac OS, Microsoft Windows, Novell NetWare, BeOS. Основными достоинствами Apache считаются надёжность и гибкость конфигурации. Он может конкурировать с любым из известных HTTP серверов в среде UNIX с точки зрения функциональности, эффективности и скорости. Также он позволяет подключать внешние модули для предоставления данных, использовать СУБД для аутентификации пользователей, модифицировать сообщения об ошибках и т. д.
1.3.2 Технологии серверных скриптов
В последнее время Web-узлы перестают быть просто набором страниц и картинок. Все чаще создаются узлы, которые взаимодействуют с посетителем, выполняют какие-то действия, собирают данные, ведут подсчеты, самонастраиваются под предпочтения посетителя. Вcё меньше Web-узлы становятся похожими на статическую библиотеку страниц и превращаются в целые программные системы, связанные с базами данных. Для того чтобы, простая HTML-страница ожила, существует несколько технологий. Первое деление связано с местом осуществления этого оживления: на сервере или на клиенте. Вышеизложенное, можно представить в виде следующей таблицы:
Таблица 1 Деление технологий
Сторона клиента |
Сторона сервера |
|||
Скрипты |
Программы |
Скрипты |
Программы |
|
· JavaScript· JScript· VBScript |
· Plug-ins· ActiveX· Java applets |
· Perl· Tcl· командная оболочка (shell) |
· отдельные CGI-программы· модули сервера· ISAPI/NSAPI· ActiveX· Java servlets |
Серверные скрипты относятся к серверной части, но стоят особняком, так как сочетают в себе свойства как скриптовых языков, так и программ.
Основное отличие от CGI-скриптов (которые пишутся чаще всего на языке Perl, а иногда на Tcl и даже на языке командных оболочек bash/tcsh) и от CGI-программ (которые пишутся на языках высокого уровня) — это то, что в CGI-программах вы сами пишете выводимый HTML-код, а используя язык серверного скрипта, вы встраиваете свою программу в готовую HTML-страницу, используя открывающий и закрывающий теги.
Отличие серверного скрипта от JavaScript, VBScript или JScript, состоит в том, что серверный скрипт выполняется на сервере, а клиенту передается результат работы, тогда как в JavaScript-код полностью передается на клиентскую машину и только там выполняется.
Страница в этом случае представляет собой смесь HTML-кода с кодом программы. Web-сервер настраивается таким образом, что файлы-страницы с определенным расширением (asp/php/cfm) не отправляются сразу клиенту, а перед отправкой пропускаются через обработчик, который производит разбор страницы и выполняет операции, в ней записанные. Таким образом клиенту выдается не та страница, которая хранится на сервере, а страница созданная на лету по результатам выполнения программы. Как видно, связка состоит из двух звеньев: скриптов в HTML-странице и обработчика, который представляет собой либо отдельную программу, либо для увеличения скорости работы встраивается в виде модуля в Web-сервер.
Преимущества:
-Независимость от платформы.
В большинстве случаев скрипты, написанные для одной платформы, можно перенести на другую платформу с минимальными изменениями или даже вообще без них. Главное, чтобы под данную платформу существовал «обработчик».
-Открытость кода.
Работая со скриптами, всегда можно быть уверенным в том, что полностью контролируете выполнение программы. Имея исходный текст, можно внести в программу необходимые изменения, которые в полной мере отвечают именно вашим специфическим запросам.
Недостатки:
-Скорость работы.
Несмотря на то что, рассматренные языки — являются интерпретируемыми, они в большей степени уступают по скорости работы откомпилированным CGI-программам.
Наиболее популярные технологии серверных скриптов:
embPerl, Mod_perl
WebSQL
ColdFusion
Java Server Pages
Рассмотрим некоторые из них.
PHP (англ. PHP: Hypertext Preprocessor — «PHP: препроцессор гипертекста», англ. Personal Home Page Tools (устар.) — «Инструменты для создания персональных WEB-страниц») — скриптовый язык программирования общего назначения, интенсивно применяемый для разработки WEB-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков программирования, применяющихся для создания динамических WEB-сайтов.
Язык скриптов напоминает своим синтаксисом язык C. Имеется множество дополнительных библиотек для работы с различными базами данных, с документами PDF, с GIF-файлами. Часто PHP увязывается в одно с такой же бесплатной базой данных как MySQL. Существует множество провайдеров, предоставляющих хостинг со связкой Apache/PHP/MySQL.
ASP (англ. Active Server Pages — «активные серверные страницы») — первая технология компании Microsoft, позволяющая динамически создавать WEB-страницы на стороне сервера. ASP работает на платформе операционных систем линейки Windows NT и на веб-сервере Microsoft IIS.
ASP не является языком программирования — это лишь технология предварительной обработки, позволяющая подключать программные модули во время процесса формирования WEB-страницы. Относительная популярность ASP основана на простоте используемых языков сценариев (VBScript или JScript) и возможности использования внешних COM-компонентов.
Главный Web-узел: http://www.microsoft.com.
1.3.3 Работа с базами данных. СУБД MYSQL
База данных — это совокупность связанных данных, организованных по определенным правилам, предусматривающим общие принципы описания, хранения и манипулирования, независимая от прикладных программ. Обращение к базам данных осуществляется с помощью системы управления базами данных (СУБД). Существует множество различных СУБД, но в условиях хостинга как правило применяется СУБД MySQL. Она не предназначена для работы с большими объемами информации, но ее применение идеально для интернет сайтов, как небольших, так и достаточно крупных. СУБД MySQL отличатся хорошей скоростью работы, надежностью, гибкостью. Работа с ней, как правило, не вызывает больших трудностей. Поддержка сервера MySQL автоматически включается в поставку PHP. Немаловажным фактором является ее бесплатность. СУБД MySQL распространяется на условиях общей лицензии GNU (GPL, GNU Public License).
MySQL входит в состав серверов WAMP, LAMP и в портативные сборки серверов Денвер, XAMPP. Обычно MySQL используется в качестве сервера, к которому обращаются локальные или удалённые клиенты, однако в дистрибутив входит библиотека внутреннего сервера, позволяющая включать MySQL в автономные программы.
СУБД MySQL классифицируется как реляционная система управления базами данных (RDBMS— relational database management system). Слово «реляционная» обозначает популярную разновидность СУБД, в которых отслеживается «соответствие» записей в одной таблице на «соответствие» записей в другой таблице. Достоинства реляционных СУБД заключается в их способности выбирать соответствующие данные из этих таблиц и создавать ответы на вопросы, которые нельзя получить только из одной такой таблицы.
Для доступа к данным в СУБД MySQL используется язык SQL (Stuctured Query Language), язык структурированных запросов. В настоящее время SQL является стандартом работы с базами данных, и все основные СУБД понимают его. SQL включает много разных типов операторов, разработанных для взаимодействия с базами данных.
2. Практическая часть
2.1 Характеристика объекта проектирования сайта
Сфера деятельности муниципального общеобразовательного учреждения “Лицей №35”- это предоставление образовательных услуг.
Муниципальное бюджетное общеобразовательное учреждение «Лицей №35» г. Новокузнецка осуществляет образовательную деятельность по образовательным программам начального, основного общего, среднего(полного) общего образования на основании Лицензии №А 0001549, регистрационный №11803 от 19 декабря 2011г.; Свидетельства о государственной аккредитации АА 000659, регистрационный №1642 от 29 ноября 2011 г.
Основная образовательная цель МБОУ «Лицей №35»:
повышение доступности, эффективности и качества образовательного процесса путём оснащения школы новейшими технологиями, методической информационной литературой, использования инновационных технологий преподавания, роста профессионального уровня деятельности педагогов, реализации вариативных программ, учебных курсов, учитывая индивидуальные особенности учащихся.
В настоящее время для учреждения разработан сайт, размещенный по адресу www.licey35.ru , но проведя его полный анализ, администрация лицея совместно с педагогами и родителями пришли к выводу, что он требует дальнейшего развития и усовершенствования.
2.2 Задачи Web- сайта
Автором работы было внесено предложение по разработке нового дизайна, модернизации и дополнения функциональности WEB- ресурса.
Цель сайта: предоставление информации об учебном заведении и его деятельности, изучаемым материалам, расписанию занятий, возможность форума и обратной связи с администрацией лицея.
Также в задачи создания нового WEB-ресурса входит не только разработка, но и перенос данных со старого сайта.
Функциональные возможности сайта:
1. Авторизация пользователя.
2. Контактная информация.
3. Форма обратной связи.
4. Фотогалерея.
5. Форум
6. Карта сайта.
7. Предоставление видео отчетов.
2.3 Программное обеспечение для реализации создания сайта
Для разработки сайта было использовано следующее программное обеспечение:
1. Операционная система Windows XP.
2. Сервер Apache 2.2.
3. СУБД MySQL 5.1.4.
4. Система управления содержимым БД phpMyAdmin 3.3.7
5. Верстка и редактирование: Adobe Dreamweaver CS3.
6. Создание графических элементов: Adobe Photoshop CS3.
7. Программа создания меню: Sothink DHTMLMenu 9.7.
8. Язык WEB-программирования: PHP.
На рисунке 3 представлена схема разрабатываемого WEB-сайта.
Рисунок 3 — Схема WEB-сайта
2.4 Разработка Web-сайта
2.4.1 Построение базы данных сайта
После установки пакета программ Denwer и запуска web-сервера, в адресной строке интернет — браузера необходимо ввести следующий адрес: «http://localhost/». Для начала проектирования базы данных необходимо запустить web-интерфейс phpMyAdmin, для этого нужно перейти по ссылке «http://localhost/phpmyadmin» .
Загрузится web — интерфейс для работы с СУБД MySQL. Сначала необходимо создать базу данных. Следующий этап — это создание таблицы. Для создания таблицы необходимо в поле «имя» указать имя таблицы, в поле «поля» указать количество полей таблицы и нажать кнопку «пошел». В таблице необходимо указать имена полей и их типы, а так же необходимо указать первичный ключ. Дальше нужно заполнить таблицу данными.
Для хранения практически всей информации о сайте Joomla использует базу данных MySQL. Она позволяет хранить значительные объемы данных, при этом предоставляет удобный интерфейс для взаимодействия с ней. Для корпоративного сайта лицея №35 необходимо разработать базу данных “Licey”, в которой создать таблицы для хранения и чёткого разделения информации.
Структура базы данных, взаимодействие между таблицами (ER-диаграмма) представлена на рисунке 4.
Рисунок 4- ER-диаграмма базы данных для сайта компании Лицей №35
2.4.2 Построение основной части сайта
Для решения задачи построения основной части сайта, основную задачу можно разделить на следующие подзадачи:
1. Разработка макета дизайна сайта.
2. Организация навигации сайта
3. Установка системы управления контентом сайта и определение ее дополнений под задачи сайта.
4. Разработка шаблонной страницы сайта и создание основных модулей сайта.
Разработка макета дизайна сайта.
Макет дизайна разрабатываемого сайта взял за свою основу существующий макет реального сайта «Лицея №35», с исправлением недостатков и минусов последнего. Вся информация на сайте, в первую очередь, должна быть удобно представлена для пользователя. Принято решение сделать 2-х колоночный макет прямоугольной формы, со сглаженными углами и мягкими границами основной области и блоков. Все блоки расположены в соответствии с законами удобства использования. На рисунке 5 представлен эскиз расположения основных блоков сайта на главной странице.
Рисунок 5 — Эскиз расположения основных блоков сайта
Рабочее пространство макета сайта делится на 5 основных блоков.
-Верхний блок сайта, так называемая «шапка — сайта» содержит в себе логотип лицея и название сайта.
— Основная панель навигации расположена в верхней части (ниже «шапки — сайта») — здесь находится верхнее меню сайта компании. Меню имеет 4-х уровневую вложенность.
— Основной информационный блок (занимает большую часть экрана) — в этой части, на главной странице, располагается фотография лицея и информация о нём, а на остальных страницах — отображается выбранная в меню информация.
— Левый блок сайта — в этой части располагаются блоки главного меню, поиска по сайту и регистрации пользователя, а так же дополнительные вспомогательные блоки (прогноз погоды). В блок главного меню вынесены важные пункты сайта, такие как «Главная», «Контакты», «Обратная связь» и «Карта сайта».
— Нижний блок сайта, так называемый «подвал — сайта»- содержит в себе счетчик HotLog .
Рисунок 6 — Макет главной страницы сайта
Дизайн всех страниц сайта выдержан в едином стиле. Основные цвета — синий, серый и белый. Для верхнего меню выбран зеленый цвет, он яркий и привлекает внимание к панели навигации. Выбранные цвета часто используются при создании сайтов образовательных учреждений.
Организация навигации сайта
Горизонтальное меню. Для основной навигации на сайте решено сделать многоуровневое горизонтальное меню (максимальное значение достигает 4х уровней) со всплывающими окнами подпунктов меню (Рисунок 7). Данный тип навигации отличается удобством для пользователя, а также экономит место на странице сайта.
Рисунок 7 Верхнее меню сайта
Для корректного отображения меню во всех браузерах необходимо привязать его к одному из модулей. Всплывающее меню сайта написано на языке JavaScript с использованием программы Sothink DHTMLMenu 9.7, которая является приложением для создания JavaScript и DHTML (динамических HTML-файлов).
Структура многоуровневого верхнего меню представлена на рисунке 8(в ней изображено 2 уровня вложенности).
Рисунок 8 — Структура верхнего меню (2уровня)
— Левый блок сайта — в этой части располагаются блоки главного меню, поиска и регистрации пользователя. В блок бокового меню вынесены важные пункты сайта, такие как «Главная», «Контакты», «Обратная связь» и «Карта сайта».
Внешний вид левого бокового блока сайта представлен на рисунке 9.
Рисунок 9 — Левый блок сайта
Главное (боковое) меню — включает в себя пункты меню главная страница лицея, контакты, обратная связь и карта сайта. В разделе «Контакты» размещены адрес лицея, телефоны администрации, электронный адрес и схема проезда. В разделе «Обратная связь» простая форма обратной связи, для ответа на возникшие вопросы или внесения предложений. В разделе «Карта сайта» представлена иерархическая структура горизонтального (верхнего) меню сайта, что в большей степени облегчает поиск нужной информации пользователю и служит для правильной индексации сайта. На рисунке 10 представлен фрагмент «Карты сайта».
Рисунок 10 — Фрагмент карты сайта
Разработка шаблонной страницы сайта и создание основных модулей сайта. Для создания шаблона страницы системы управления Joomla используется блочная верстка. При необходимости отредактировать какой-то блок страницы можно сделать это единажды и достаточно быстро.
Страница делится на блоки модули, с указанием к какому модулю сайта привязываются блоки (Рисунок 11).
Рисунок 11 — Расположение блоков и соответствующих модулей сайта
Создается файл templateDetails.xml, в котором будут храниться блоки (основные модули), информация об авторе, прописываются все изображения используемые для сайта, а также файлы, входящие в состав шаблона.
Для сайта Лицея №35 созданы следующие модули:
<positions>
<position>banner1</position>// Шапка сайта
<position>banner2</position>
<position>banner3</position>// Главный блок для вывода информации
<position>banner4</position>
<position>banner5</position>
<position>banner6</position>
<position>bottom1</position>
<position>bottom2</position>
<position>bottom3</position>
<position>breadcrumb</position>// Хлебные крошки
<position>copyright</position>// Строка авторских прав
<position>left</position>// Левый блок сайта (главное меню, поиск, регистрация)
<position>right</position>
<position>syndicate</position>
<position>top1</position>
<position>top2</position>
<position>top3</position>
<position>user1</position>
<position>user2</position>
<position>user3</position> // Горизонтальное меню сайта
<position>user4</position>
<position>user5</position>
</positions>
Параметры модулей задаются во вкладке Менеджер модулей Администраторской панели, здесь можно создать модуль со свободным HTML-кодом или выбрать готовые (все модули для данного сайта прописываются HTML-кодом). Указывается позиция в соответствии с файлом templateDetails.xml, состояние публикации (включен/выключен), права доступа (в сайте Лицей №35 все модули общедоступны), выбираются страницы на которых должен отображаться модуль, каждый модуль имеет свой идентификатор.
Создается файл index.php, в котором и происходит разметка страницы сайта и разделение на блоки. Полностью файл index.php представлен в Приложении А.
Блоки хранятся в отдельных каталогах сайта, называемом, Менеджер модулей, и при необходимости отредактировать блок надо будет однажды.
Для того чтобы задать стиль блоков сайта, создается каскадная таблица стилей (CSS), назовем ее template.css. Полностью файл template.css представлен в Приложении Б.
Здесь можно задать стиль текста, фона, ссылок, кнопок, и модулей сайта. Например, левая часть сайта (включает главное меню, строку поиска и авторизацию)
#leftpart {
float: left;
background: #ffc;
border: 1px solid #d4d5aa;
padding: 5px;
max-width: 200px;}
2.4.3 Организация обратной связи на сайте
Для удобства пользователя создана форма обратной связи, здесь можно задать интересующий пользователя вопрос, внести свои предложения и пожелания.
Был использован компонент ArtForms для Joomla! 1.5. Этот компонент дает широкие возможности для создания разнообразных индивидуальных форм на сайте. ArtForms имеет следующие преимущества:
— неограниченное количество форм и полей;
— сохранение форм в базе данных;
— индивидуальный стиль для разных полей;
— поддержка Captcha.
Этапы создания «обратной связи»:
1.Планирование полей, которые должна содержать обратная связь и анализ степени важности этих полей (обязательно для заполнения, необязательно для заполнения), определение типа поля (ввод данных, текстовое поле, выбор, пароль). Форма обратной связи для данного сайта должна содержать следующие поля с указанием (в скобках) типа поля:
— обязательные — ФИО(ввод данных), e-mail отправителя (ввод данных),тема (ввод данных) и текст сообщения (текстовое поле);
2.Установка компонента ArtForms происходит через Установку/Удаление расширений в Административной панели Joomla!
3.Настройка формы (происходит во вкладке Формы) — название формы, электронный адрес получателя формы, отправка копии формы клиенту (да/нет), пользовательский JavaScript код, загрузка пользовательского CSS-кода, возможность включения проверочной системы (Captcha), указать параметры публикации.
Для сайта используются следующие настройки:
— название формы — «обратная связь»;
— e-mail адрес — [email protected];
— проверочная система — EasyCaptcha Component.
4.Разрешение загрузки файлов — если загрузка разрешена, то определяется размер прикрепляемого файла, количество вложенных файлов, выбор разрешенных типов файлов. Для вложения используются следующие типы файлов: doc (Microsoft Word), pdf (Adobe Acrobat), gif, jpg, png, cdr (Corel Draw), psd (Adobe Photoshop).
5.Создаются поля обратной связи в соответствии с типом поля, важностью выполнения, если необходимо выполняется проверка полей, например, проверка e-mail или номера.
Интерфейс формы обратной связи приведен на рисунке 12.
Рисунок 12 — Форма обратной связи сайта Лицей №35
Все данные компонента ArtForms хранятся в базе данных: в таблице jos_artforms — параметры формы, jos_artforms_inbox — входящие сообщения, в jos_artforms_items — поля таблицы и их свойства.
Принцип работы формы: после заполнения пользователем полей, и нажатия кнопки «Отправить» проверяется правильность заполнения обязательных полей и Captcha, если поля заполнены не верно или не заполнены, форма выдает сведения об ошибке. Если все верно, то с помощью команды sendmail отправляется сообщение на указанный электронный адрес. А пользователь видит текст сообщения «Спасибо, в случае необходимости мы с Вами свяжемся!».
2.4.4 Организация обратной связи на сайте
Так же на сайте создан форум, здесь пользователь может высказать своё мнение по уже готовым темам форума или создать свою новую ветку в форуме. Участие в форуме могут принимать только зарегистрированные пользователи.
Для реализации функции форума был использован компонент ccBoard для Joomla! 1.5. Здесь были созданы 3 категории «Первоклассники», «ЕГЭ» и «Выпускник», в каждой из них соответственно были созданы форумы “Запись в первый класс”, “Обсуждение проведения ЕГЭ и его результаты”, “Вечер встречи выпускников Лицея №35”. В форуме “Запись в первый класс” создана ветка “Необходимые документы.”
Рисунок 13 — Форма форума сайта Лицей №35
Список использованных источников
1. Дизайн-студия Smart [Электронный ресурс]: типы сайтов, или классификация интернет ресурсов. Режим доступа: http://www.smart-web.ru/types-of-sites.html — 07.12.2010.
2. Дизайн-студия Trilan [Электронный ресурс]: разработка и создание сайтов. Режим доступа: http://develop.trilan.ru — 07.12.2012.
3. Веб-студия BSWS [Электронный ресурс]: информационное обеспечение сайта. Режим доступа: http://bsws.com.ua/ru/teoriya/stati.html — 08.12.2012.
4. Russian Apache — сайт о сервере Apache [Электронный ресурс]: краткий обзор сервера. Режим доступа: http://apache.lexa.ru/intro.html — 08.12.2012.
5. MySQL [Электронный ресурс]. — Режим доступа: http://ru.wikipedia.org/wiki/MySQL (дата обращения: 20.12.2012).
6. Дэвис Е.М. Изучаем PHP и MySQL [Текст]: учебник / Дэвис Е.М., Филипс Дж.А. — пер. с англ. — СПб.: Символ-Плюс, 2008. — 448 с.
7. Дюбуа П. MySQL. Полное и исчерпывающее руководство по применению и администрированию баз данных MySQL, а также программированию приложений [Текст]: учебник — 2-е изд. — пер. с англ. — М.: Изд. дом «Вильямс», 2004. — 1056 с.
Приложение А
Шаблонная страница сайта index.php
<?php
defined(‘_JEXEC’) or die(‘Restricted access’);
require_once dirname(__FILE__) . DIRECTORY_SEPARATOR . ‘functions.php’;
$document = null;
if (isset($this))
$document = & $this;
$baseUrl = $this->baseurl;
$templateUrl = $this->baseurl . ‘/templates/’ . $this->template;
artxComponentWrapper($document);
?>
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml» xml:lang=»<?php echo $this->language; ?>» lang=»<?php echo $this->language; ?>» >
<head>
<jdoc:include type=»head» />
<link rel=»stylesheet» href=»<?php echo $this->baseurl; ?>/templates/system/css/system.css» type=»text/css» />
<link rel=»stylesheet» href=»<?php echo $this->baseurl; ?>/templates/system/css/general.css» type=»text/css» />
<link rel=»stylesheet» type=»text/css» href=»<?php echo $templateUrl; ?>/css/template.css» media=»screen» />
<!—[if IE 6]><link rel=»stylesheet» href=»<?php echo $templateUrl; ?>/css/template.ie6.css» type=»text/css» media=»screen» /><![endif]—>
<!—[if IE 7]><link rel=»stylesheet» href=»<?php echo $templateUrl; ?>/css/template.ie7.css» type=»text/css» media=»screen» /><![endif]—>
<script type=»text/javascript» src=»<?php echo $templateUrl; ?>/jquery.js»></script>
<script type=»text/javascript»>jQuery.noConflict();</script>
<script type=»text/javascript» src=»templates/shablon_2col/menu/stmenu.js»>/script.js»></script>
</head>
<body>
<div id=» shablon_2col -main»>
<div class=» shablon_2col -sheet»>
<div class=»shablon_2col -sheet-tl»></div>
<div class=»shablon_2col -sheet-tr»></div>
<div class=»shablon_2col -sheet-bl»></div>
<div class=»shablon_2col -sheet-br»></div>
<div class=»shablon_2col -sheet-tc»></div>
<div class=»shablon_2col -sheet-bc»></div>
<div class=»shablon_2col -sheet-cl»></div>
<div class=»shablon_2col -sheet-cr»></div>
<div class=»shablon_2col -sheet-cc»></div>
<div class=»shablon_2col -sheet-body»>
<div class=»shablon_2col -header»>
<div class=»shablon_2col -header-center»>
<div class=»shablon_2col -header-png»></div>
<div class=»shablon_2col -header-jpeg»></div>
</div>
</div>
<jdoc:include type=»modules» name=»user3″ />
<script type=»text/javascript»>
<!—
stm_bm([«menu61b2″,960,»»,»templates/shablon_2col/menu/blank.gif»,0,»»,»»,0,0,250,0,500,1,0,0,»»,»»,0,0,1,2,»default»,»hand»,»»,1,25],this);
stm_bp(«p0″,[0,4,0,0,3,0,20,13,100,»»,-2,»»,-2,50,0,0,»#799BD8″,»#dbeaf7″,»»,3,1,2,»#afd0ed»]);
stm_ai(«p0i0″,[1,»Главная»,»»,»»,-1,-1,0,»index.php?option=com_content&view=article&id=53″,»_self»,»»,»»,»»,»»,20,0,0,»templates/shablon_2col/menu/icon_24.gif»,»»,13,10,0,1,1,»#CCCCCC»,1,»#FFFFF7″,1,»templates/shablon_2col/menu/menumiddle.gif»,»templates/shablon_2col/menu/menumiddle1.gif»,3,3,0,0,»#999999″,»#000000″,»#0000CC»,»#FFFFFF»,»bold 10pt Verdana»,»bold 10pt Verdana», 0,0, «templates /shablon_2col /menu /menuleft.gif», «templates/shablon_2col /menu/menuleft1.gif»,»templates/shablon_2col/menu/menuright.gif»,»templates/shablon_2col/menu/menuright1.gif»,6,21,41],111,41);
stm_bp(«p1″,[1,4,4,4,0,0,10,0,100,»stEffect(\»rect\»)»,-2,»»,-2,80,0,0,»#799BD8″, «transparent»,»»,0,1,1,»#0000FF»]);
stm_ai(«p1i0″,[0,»Все новости»,»»,»»,-1,-1,0,»»,»_self»,»»,»»,»»,»», 10,7,0,»»,»»,0,0,0,0,1, «#e0fdfe»,0,»#e0fdfe»,0,»»,»»,3,3,0,0,»#ace8eb»,»#ace8eb»,»#000000″,»#0000FF»,»bold 9pt Verdana»,»bold 9pt Verdana»,0,0,»»,»»,»»,»»,0,0,0],150,25);
stm_aix(«p1i1″,»p1i0″,[0,»Форум»,»»,»»,-1,-1,0, «index.php?option= com_ccboard&view =topiclist&Itemid=42″,»_self»,»»,»»,»»,»»,10,7,0,»»,»»,0,0,0,0,1,»#e0fdfe»,0,»#e0fdfe»,0,»»,»»,3,3,1,1],150,25);
stm_aix(«p1i2″,»p1i1″,[0,»Галерея»,»»,»»,-1,-1,0, «index.php?option=com_phocagallery& view=categories&Itemid=101″,»_self»,»»,»»,»»,»»,10,7,0,»»,»»,0,0,0,0,1,»#e0fdfe»,0,»#e0fdfe»,0,»»,»»,3,3,1,1],150,25);
stm_aix(«p1i3″,»p1i1″,[0,»Гостевая книга»],150,25);
stm_ep();
stm_aix(«p0i1″,»p0i0″,[0,»О нас»,»»,»»,-1,-1,0,»index.php? option=com_content&view= article&id=54&Itemid=4″,»_self»,»»,»»,»»,»»,15,7],70,41);
stm_bpx(«p2″,»p1»,[1,4,4,4,0,0,10,16]);
stm_aix(«p2i0″,»p1i1″,[0,»Коллектив лицея»,»»,»»,-1,-1,0,»index.php?option= com_content&view=article&id=57&Itemid=43″,»_self»,»»,»»,»»,»»,10,7,0,»templates/
shablon_2col/menu/arrow_29.gif»,»»,16,9],170,25);
stm_bpx(«p3″,»p1″,[1,2,-10,0,0,5,0,0,100,»»,-2,»»,-2,80,0,0,»#799BD8″, «transparent», «»,3]);
stm_aix(«p3i0″,»p1i1″,[0,»Директор,администрация»,»»,»»,-1,-1,0,»index.php?option=com_content&view=article&id=74&Itemid=44″,»_self»,»»,»»,»»,»»,0,7,0,»»,»»,0,0,0,0,1,»#FFFFFF»],0,20);
stm_aix(«p3i1″,»p3i0″,[0,»Педагогический состав»,»»,»»,-1,-1,0,»index.php ?option= com_content&view=article&id=74&Itemid=58″,»_self»,»»,»»,»»,»»,0,7,0,»»,»»,0,0,0,0,1,»#FFFFFF»],0,20);
stm_ep();
stm_em();
//—>
</script>
<jdoc:include type=»modules» name=»banner1″ style=»artstyle» artstyle=»shablon_2col -nostyle» />
<?php echo artxPositions($document, array(‘top1’, ‘top2’, ‘top3’), ‘art-block’); ?>
<div class=»shablon_2col -content-layout»>
<div class=»shablon_2col -content-layout-row»>
<?php if (artxCountModules($document, ‘left’)) : ?>
<div class=»shablon_2col -layout-cell shablon_2col -sidebar1″>
<?php echo artxModules($document, ‘left’, ‘shablon_2col -block’); ?>
<div class=»cleared»></div>
</div>
<?php endif; ?>
<?php $contentCellStyle = artxCountModules($document, ‘left’) ? ‘content’ : ‘content-wide’; ?>
<div class=»shablon_2col -layout-cell shablon_2col -<?php echo $contentCellStyle; ?>»>
<?php
echo artxModules($document, ‘banner2’, ‘shablon_2col -nostyle’);
if (artxCountModules($document, ‘breadcrumb’))
echo artxPost(null, artxModules($document, ‘breadcrumb’));
echo artxPositions($document, array(‘user1’, ‘user2’), ‘shablon_2col -article’);
echo artxModules($document, ‘banner3’, ‘shablon_2col -nostyle’);
?>
<?php if (artxHasMessages()) : ?><div class=»shablon_2col -post»>
<div class=»shablon_2col -post-tl»></div>
<div class=»shablon_2col -post-tr»></div>
<div class=»shablon_2col -post-bl»></div>
<div class=»shablon_2col -post-br»></div>
<div class=»shablon_2col -post-tc»></div>
<div class=»shablon_2col -post-bc»></div>
<div class=»shablon_2col -post-cl»></div>
<div class=»shablon_2col -post-cr»></div>
<div class=»shablon_2col -post-cc»></div>
<div class=»shablon_2col -post-body»>
<div class=»shablon_2col -post-inner»>
<div class=»shablon_2col -postcontent»>
<jdoc:include type=»message» />
</div>
<div class=»cleared»></div>
</div>
<div class=»cleared»></div>
</div>
</div>
<?php endif; ?>
<jdoc:include type=»component» />
<?php echo artxModules($document, ‘banner4’, ‘shablon_2col -nostyle’); ?>
<?php echo artxPositions($document, array(‘user4’, ‘user5’), ‘shablon_2col -article’); ?>
<?php echo artxModules($document, ‘banner5’, ‘shablon_2col -nostyle’); ?>
<div class=»cleared»></div>
</div>
</div>
</div>
<div class=»cleared»></div>
<?php echo artxPositions($document, array(‘bottom1’, ‘bottom2’, ‘bottom3’), ‘shablon_2col -block’); ?>
<jdoc:include type=»modules» name=»banner6″ style=»artstyle» artstyle=»shablon_2col -nostyle» />
<div class=»shablon_2col -footer»>
<div class=»shablon_2col -footer-t»></div>
<div class=»shablon_2col -footer-l»></div>
<div class=»shablon_2col -footer-b»></div>
<div class=»shablon_2col -footer-r»></div>
<div class=»shablon_2col -footer-body»>
<?php echo artxModules($document, ‘syndicate’); ?>
<div class=»shablon_2col -footer-text»>
<?php if (artxCountModules($document, ‘copyright’) == 0): ?>
<?php ob_start(); ?>
<p><a href=»#»>Link1</a> | <a href=»#»>Link2</a> | <a href=»#»>Link3</a></p><p>Copyright © %YEAR%. All Rights Reserved.</p>
<?php echo str_replace(‘%YEAR%’, date(‘Y’), ob_get_clean()); ?>
<?php else: ?>
<?php echo artxModules($document, ‘copyright’, ‘shablon_2col -nostyle’); ?>
<?php endif; ?>
</div>
<div class=»cleared»></div>
</div>
</div>
<div class=»cleared»></div>
</div>
</div>
<div class=»cleared»></div>
</div>
</body>
</html>
Приложение Б
Каскадная таблица стилей template.css
# shablon_2col -main, table
font-family: Arial, Helvetica, Sans-Serif;
font-size: 13px;
h1, h2, h3, p, a, ul, ol, li
margin: 0;
padding: 0;
body
margin: 0 auto;
padding: 0;
color: #281B36;
background-color: #B8D5EF;
background-image: url(‘../images/Bottom_texture.jpg’);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: bottom left;
. shablon_2col -postcontent h1
margin: 21px 0 21px 0;
color: #283A8A;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 32px;
list-style-type: none;
list-style-position: inside;
div. shablon_2col — header-jpeg
position: absolute;
left:-50%;
top: 0;
width: 1000px;
height: 220px;
background-image: url(‘../images/header.jpg’);
background-repeat: no-repeat;
background-position:center center; }
. shablon_2col -content-layout
{ display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
background-color: Transparent;
border: none !important;
padding:0 !important;}
. shablon_2col -blockcontent-body,
. shablon_2col -blockcontent-body li,
. shablon_2col -blockcontent-body a,
. shablon_2col -blockcontent-body a:link,
. shablon_2col -blockcontent-body a:visited,
. shablon_2col -blockcontent-body a:hover
color: #283A8A;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 13px;
. shablon_2col -blockcontent-body a:link
color: #283A8A;
text-decoration: none;
. shablon_2col -blockcontent-body a:visited, . shablon_2col -blockcontent-body a.visited
color: #283A8A;}
#background-image{
position: relative;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-attachment: fixed;
background-image: url(‘../images/page_gl.png’);
background-repeat: no-repeat;
background-position: top center;
form{
padding: 0 !important;
margin: 0 !important;
#header{
margin: 0 auto;
position: relative;
width: 100%;
height: 150px;
overflow: hidden;
#header-png{
position: absolute;
left:-50%;
top: 0;
width: 986px;
height: 150px;
background-image: url(‘../images/header.png’);
background-repeat: no-repeat;
background-position:center center;
#header-jpeg{
position: absolute;
top: 0;
left:-50%;
width: 986px;
height: 150px;
background-image: url(‘../images/header.jpg’);
background-repeat: no-repeat;
background-position: center center;
table.contenttoc
margin: 5px;
border: 1px solid #ccc;
padding: 5px;
float: right;
. shablon_2col -footer
position: absolute;
left:9px;
right:9px;
bottom:0;
height:50px;
background-image: url(‘../images/footer.png’);}
Размещено на