Разработка Web-сайта для кафедры "Вычислительная техника и информационные технологии" (стр. 5 из 8)
Страница «Дисциплины» содержит методические материалы и краткое описание дисциплин.
Страница «Абитуриентам» содержит всю необходимую абитуриентам информацию о специальности.
Страница «Новости» содержит самые последние обновления.
Страница «Статьи» содержит интересные публикации.
Страница «Сотрудничество» содержит информацию о компаниях, с которыми контактирует кафедра.
При открытии страницы «Форум» пользователь попадает в форум кафедры.
На странице «Поиска» посетители могут найти любую информацию, которая содержится на сайте.
2.2 Разработка интерфейса web-сайта
2.2.1 Дизайн web-сайта
В соответствии с разработанной структурой была спроектирована главная страничка сайта (Рисунок 3). Она содержит все основные структурные элементы, переход по которым осуществляется с помощью гиперссылок.
Рисунок 3 – Главная страница сайта
Как и планировалось на этапе постановки задачи, сайт содержит все необходимые структурные и навигационные элементы: форму поиска, навигационное меню (в виде текстовых ссылок в сопровождении соответствующих изображений).
При нажатии на ссылке «История кафедры» выводится информация о возникновении последней, информация о дисциплинах и ссылки на их краткое описание (рисунок 4).
Рисунок 4 – История кафедры
Вид регистрационной формы для нового пользователя показан на рисунке 5.
Рисунок 5 – Регистрационная форма
При вводе административного логина и пароля активируется меню администратора (рисунок 6).
Рисунок 6 – Панель администрирования
2.2.2 Описание создания страниц web-сайта
Разработка web-сайта велась в основном в паке компании Joomla 1.0.12. Выбор данного пакета обоснован тем, что его освоение отнимает мало времени, во время разработки доступен предварительный просмотр каждой отдельно сделанной операции, доступно большое количество функций (организация интерактивных элементов сайта, создание гиперссылок в несколько кликов мышки и т.п.), пакет поддерживает большое количество технологий (HTML, PHP, ASP, Java, XML, XSLT, CSS и другие).
При создании сайта использовались стандартные шаблоны, однако для их модификации под конкретные задачи, стандартные средства Joomla применять неудобно из-за отсутствия визуального редактора. Поэтому для редактирования шаблонов был использован визуальный редактор DreamWeaver MX.
Рассмотрим создание главной странички сайта (Рисунок 7). Она является основополагающей для всех остальных.
Рисунок 7 – Разработка главной странички сайта
Как видно из рисунка, в основе странички лежит таблица. Все элементы странички составляют некую мозаику, которая впоследствии предстаёт на экране пользователя как единое целое.
Любая информация (текстовая или графическая) заносится непосредственно в ячейки таблицы. Таким образом, достигается структурированность странички, позволяющая наиболее удобно редактировать любой её элемент. Так же для удобства правки и логического отделения одного сегмента от другого каждому из них присвоено имя (рисунок 7). Код шаблонов страниц приведён в приложении А.
2.3 Разработка сайта на основе CMS
2.3.1 Описание установки CMS Joomla
Для доступа к административной панели управления (Backend – бэк-енд, панель управления) Joomla используйте адрес Вашего веб-сайта (или полный путь до папки, в которую установлена Joomla) с добавлением в конце пути "/administrator". Например, если адрес веб-сайта www.myweb.ru, то доступ к панели управления возможен по адресу www.myweb.ru/administrator. После правильного ввода адреса, откроется страница авторизации
Рисунок 8 - Страница входа в панель управления Joomla
Рисунок 9 - Главная страница панели управления Joomla
При правильном вводе имени пользователя и пароля откроется главная страница администрирования системой, то есть будет открыта панель управления Joomla (Рисунок 9), которая предоставит управления всеми функциями и возможностями Joomla. Возвратиться на главную страницу панели можно в любое время при нажатии кнопки "Главная" в левом верхнем углу.
2.3.2 Создание Раздела
Раздел – это главный (верхний) объект в основе иерархии структуры содержимого. Позже в Раздел будут добавлены Категории.
Для работы с разделами необходимо перейти на страницу "Управление разделами". Можно нажать на главной странице панели кнопку "Управление разделами" или в основном меню выбрать "Содержимое", затем пункт "Управление разделами" (Рисунок 10).
Рисунок 10 - Доступ на страницу "Управление разделами" (Section Manager), или далее на страницу "Управление категориями" (Category Manager)
Будет открыта страница "Управление разделами".
На странице "Управление разделами", используя кнопки на панели инструментов, можно (перечисление справа налево):
Помощь открыть в новом окне страницу описания по данному окну ("Управление разделами"). Нажмите кнопку "Помощь".
Создать новый раздел. Нажмите кнопку "Новый".
Изменить существующий раздел. Нажмите на название раздела или отметьте нужный раздел и нажмите кнопку "Изменить".
Удалить существующий раздел. Отметьте нужный раздел и нажмите кнопку "Удалить".
Копировать существующий раздел. Отметьте нужный раздел и нажмите кнопку "Копия".
Скрыть (сделать неопубликованным) существующий раздел. Отметьте нужный раздел и нажмите кнопку "Скрыть".
Допустить (Опубликовать) существующий раздел. Отметьте нужный раздел и нажмите кнопку "Допустить".
Для создания нового раздела нажмите кнопку "Новый". Будет открыта страница редактирования "Раздела" (Рисунок 11).
Рисунок 11 - Страница редактирования "Раздела"
На странице редактирования "Раздела" с помощью кнопок на панели инструментов можно (перечисление справа налево):
Помощь – открыть в новом окне страницу описания по данному окну (редактирование "Раздела"). Нажмите кнопку "Помощь".
Применить (сохранить) изменения, но остаться на странице редактирования "Раздела". Нажмите кнопку "Применить".
Сохранить изменения и закрыть страницу редактирования "Раздела" и вернуться (выйти) на страницу "Управление разделами". Нажмите кнопку "Сохранить".
Загрузить изображение (сохраняется в папку images\stories). Нажмите кнопку "Загрузить".
На странице редактирования "Раздела" нужно:
В поле "Заголовок" ввести короткое имя раздела, которое будет использоваться в меню или в выпадающих списках панели управления.
В поле "Раздел - Название" ввести длинное имя раздела, которое будет использоваться при отображении содержимого раздела на сайте, показывая заголовок раздела.
В поле "Изображение" выбрать изображение, которое будет использоваться при отображении раздела в меню.
В поле "Порядок отображения" после применения (сохранения) изменений можно изменить порядок отображения раздела в списке на странице "Управление разделами".
В поле "Уровень доступа" можно выставить права доступа на просмотр данного раздела (содержимого данного раздела):
"Общий" - для всех посетителей вебсайта,
"Участники" - для зарегистрированных пользователей сайта,
"Специальный" - для зарегистрированных пользователей панели управления.
В поле "Опубликован" - выбрать публиковать сейчас или нет.
В текстовом поле "Описание" можно написать краткое описание (аннотацию) содержимого раздела.
Рисунок 12 - Визуальный редактор "TinyMCE"
В поле "Описание" можно написать о содержании раздела, но помните, что раздел включает одну или несколько категорий, и, когда конечный пользователь (посетитель Вашего вебсайта) видит это описание, то оно также будет сопровождаться (вероятно) списком включенных в данный раздел категорий.
В поле "Описание" используется специальный редактор HTML, то есть не Joomla, а ее расширение - мамбот. Данное расширение, мамбот, называется HTML-редактором Joomla. В системе можно использовать любой из множества различных визуальных HTML-редакторов, но рекомендуется использовать "TinyMCE" (Рисунок 12).
Если HTML-редактор не появился в Вашей системе, то Вы должны установить его и (или) включить редактор. В локализованной сборке Joomla RE редактор "TinyMCE" уже установлен и включен. Внешний вид Вашего визуального редактора может сильно отличаться от того, что использовался для написания этого руководства.
Кнопки на панели инструментов HTML-редактора помогают задавать стиль (формат) вводимого текста.
Когда Вы закончите создавать или редактировать раздел, нажмите кнопку "Сохранить" для сохранения результатов работы и выхода на страницу "Управление разделами". Или можно нажать кнопку "Применить" для сохранения результатов, не закрывая страницы редактирования "Раздела".