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

• Название: Министерство образования республики беларусь белорусский национальный технический университет
• Анкор: Диплом айти
• Дата: 12.06.2022
• Размер: 1.96 Mb.
• Имя файла: 36e125a.doc
• Тип: Диплом; #586164
• страница: 4 из 5

3.2 Описание шаблона сайта

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

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

3.3 Реализация «фиксированной » верстки

Основой макета стала «фиксированная» верстка. При фиксированной верстке дизайн сайта не изменяется при изменении пропорций браузера, имеет строго определенную ширину и пропорции колонок. Если ширина браузера, а в 99% случаев это так, больше ширины сайта, то сам сайт обычно располагается по центру окна или прижимается к его левой (очень и очень редко к правой) стороне, а свободное место заполняется фоном.

При фиксированной верстке:

Нет необходимости выставлять максимальную и минимальную ширину макета (к тому же эти атрибуты не имеют кроссбраузерной реализации без применения различных "хаков");

В определенных случаях использовать верстку с фиксированной шириной макета необходимо для создания некоторых эффектов или дизайнерских решений (например, для позиционирования выпадающего меню). К тому же существуют такие макеты дизайна, которые РАЗУМНО возможно сверстать только при фиксированной ширине основного контейнера;

Макет, основанный на фиксированной ширине основного поля является оптимальным для наилучшей читаемости текста.

Исходя из анализа композиционного решения макета, был выбран двухколончатый вариант верстки на основе элементов «div».

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

В качестве объявления DOCTYPE использовался следующий вариант:









Подключаем таблицу каскадных стилей.



Двухколончатая верстка реализуется с помощью элементов «div».

Cоздаем главный div id =“container” с фиксированной шириной 800 px для последующего позиционирования сайта на странице браузера и дальнейшего размещения всех его элементов в пределах контейнера.

HTML	CSS
*	#container {plus.css (line 65) background:#E4EBF6 url(image/bg.gif) repeat scroll 0% 0%; margin:0px auto; width:800px; }

* - описание и листинг div “container” приведен ниже.

Благодаря свойствам margin сайт позиционируется по центру страницы. В свойство background задано программное размножение по вертикали изображения bg.gif, при этом фон заливается цветом #E4EBF6.

Создаем шапку сайта. Для этих целей понадобится div id=”head”. В шапке расположены изображение British_Flag4.jpg, модуль поиска, основная навигация сайта. Для позиционирования модуля поиска в шапке сайта присваиваем тэгам формы класс “forma” и выравниваем получившуюся форму в области шапки с помощью свойств css.

Основная навигация реализована при помощи списка ul класс “navi”, настройка работы которого происходит в файле css. Основными свойствами navi являются: float, обеспечивающее горизонтальное расположение элементов навигации в потоке; list-style-type , убирающее маркеры списка; margin и padding, позиционирующее элементы в контейнере “head” и т.д (см.листинг)

HTML	CSS
Найтинасайте Главная Онас Методика Учебныематериалы Живойдиалог Контакты	#container {plus.css (line 65) background:#E4EBF6 url(image/bg.gif) repeat scroll 0% 0%; margin:0px auto; width:800px; }

Далее создаем div-контейнер с id=”content” для размещения блоков левой колонки, основного содержимого контентной области, и дублирующего меню в границах дива. Для настройки идентичного позиционирования контейнера ”content” относительно шапки сайта применяем к id=”content” такие же свойства margin, и width как и для “head” (см.листинг).

HTML	CSS
*	#content { background: #F5F5F5; width:736px; margin:auto; }

* - описание и листинг div “content” приведен ниже.

Левая колонка создается со значением фиксированной ширины равной 220 px., class=” left. Для позиционирования колонки в границах "content” прижимаем ее к левому краю контейнера при помощи свойства float. В зависимости от разделов сайта содержание тэгов в колонке меняется (см.листинг).

Содержание и свойства левой колонки на главной странице сайта.

HTML

CSS

Методика <p> Уникальная методика преподавания на курсах гарантирует максимальную ориентацию на общение практическую направленность в изучении языка. Подробнее p> <h4>Преподавателиh4> <p> Гусакова Наиля Нуризяновна, Кузьмина Оксана Федоровна тел.[phone] p> <h4>Пройти тест на знание английского языкаh4> <p> Страница содержит форму с тестовыми вопросами для оценки уровня знания английского языка. Пройти тест

.left { background: #365c9b; color: #FFFFFF; width:220px; height:550px; float: left; padding: 0px 0 0 0; border:4px double #bbd8f6; font-family:Verdana, Tahoma, Arial, sans-serif; font-size: 14px; } .left a { color:#5ca4ce; } .left a:hover { color:#ae253e; text-decoration:none; }

Содержание и свойства левой колонки на странице «О НАС».

HTML

CSS

Преподаватели Расписание Условия обучения <li><ahref="">Услуги переводовa>li> Контакты Телефон: [phone] Подробнее

.left_navi { list-style-type: none; padding: 5px; } .left_navi li { padding: 10px 5px 0px 10px; } .left_navi li a { text-decoration: none; color: #FFFFFF; display: block; padding: 5px 0 5px 15px; border-bottom:1px dashed white; font-weight: bold; font-family: Verdana, Tahoma, Arial, sans-serif; } .kontakt { width: 210px; height: 100px; font-weight: bold; margin-left: 10px; } .logo2 { background-image: url(image/logo7.jpg); background-repeat: no-repeat; background-position: 15px 0px; /* padding-bottom: 50px; */ padding-left: 90px; font-size: 12px; height: 70px; }

Особенности: на странице «О НАС» появляется дополнительное меню

«О нас», созданное при помощи списка ul c классом left navi; появляется ссылка на раздел «Контакты» расположенная в div class=”contact” с изображением логотипа курсов (см.листинг).

В div class=”main” на главной странице расположен контент с приветственным словом к посетителям сайта (см.листинг), div с фиксированной шириной в 500px и свойством float:left, прижимающий div к левой колонке, выравнивание div осуществляется с помощью margin-left и padding (см.листинг).

HTML

CSS

<divclass="main"> <h1>Добро пожаловать в мир английского языкаh1> Курсы английского языка «Коммуникация плюс» предлагает качественное, быстрое и увлекательное изучение английского языка. Результат занятий не заставит себя ждать, эффект от учебы превзойдет самые смелые ваши надежды, а знания и навыки, полученные на курсах, останутся с вами надолго. Подробнее

.main { background: #F5F5F5; width:500px; float:left; padding: 15px 0 9px 0; margin-left:2px; font-family: Verdana, Tahoma, Arial, sans-serif; } h1 { font-size: 18px; margin-left: 20px; color: #5ca4ce; padding-bottom:5px; /* font-family:Georgia, "Times New Roman", Times, serif; */ font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; } .main p { font-size:14px; color:#0e0632; padding:0 0 15px 5px; border-bottom:1px dashed #333; text-align: left; margin-right: 15px; }

В нижней части контентной области осуществляется вывод div-контейнеров c классами left_main (навигация «Полезные ресурсы»), right_main («Новости»).Фиксированной ширины со свойством float:left, прижимающих контейнеры к левой колонке и к друг другу, свойства margin и padding позиционируют элементы в границах div-контейнера “content” и друг относительно друга. Расположение элементов в границах контейнеров реализовано с помощью списков, в заголовки h5 встроены изображения-маркеры, свойства регулируются в css (см.листинг).

HTML

CSS

Полезныересурсы Английскийалфавит Тексты песен на английском языке Английскиеидиомы Английскиесленговыевыражения Историяанглийскогоязыка Новости 01.03.2011Изучениеновойтемы. Студенты группы Intermediate приступают к изучению новой темы модальные глаголы. Подробнее 01.03.2011Записьвгруппынаапрель!. Начинается набор в группы на Апрель. Формируются группы разных уровней, от начального до продвинутого. Подробнее

.left_main { margin-left:35px; margin-top:5px; float:left; width:220px; font-size:14px; font-family: Verdana, Tahoma, Arial, sans-serif; } .left_main ul a { color:#365c9b; } .left_main ul a:hover { color:#ae253e; text-decoration:none; } .right_main { float:left; width:245px; /* margin-left:25px;*/ margin-top:5px; color:#0e0632; padding-bottom:30px; font-family: Verdana, Tahoma, Arial, sans-serif; } .right_main a { color:#365c9b; } .right_main a:hover { color:#ae253e; text-decoration:none; } .left_main ul{ list-style-image:url(image/blue_arrow.gif); } .right_ul { list-style-type:none; font-size:12px; }

Далее осуществляется вывод div-контейнера с id=”footer”, в границах которого реализован вывод дублирующей навигации в виде списка (см.листинг).

HTML	CSS
Главная О нас Методика Учебные материалы Живой диалог Контакты	#footer { clear:both; background:#013F7E; width:736; height:75px; font-size: 14px; font-family: Verdana, Tahoma, Arial, sans-serif; } #footer a { color:#bbd8f6; } #footer a:hover { color:#ae253e; text-decoration:none; } .down { list-style-type:none; float:left } .down li { float:left; margin-left:25px; margin-top:20px; }

Вывод фотогалереи. Фотогалерея один из самых сложных элементов сайта, в изготовлении которого помимо верстки (html, css) использовалось программирование на языке Java-Script (см.листинг).

HTML	CSS	Java-Script
Фотогалерея "Прогулка по Великобритании" Previous Next Pause Coberley Coberley …	#wrap { background:#365C9B; width: 736px; color:white; float: left; } .photo img { border: 1px solid #666; background-color: #FFF; padding: 4px; } .figure { float: left; width: 165px; margin: 5px 0px 0px 10px; padding: 0px; display: inline; } .figure p { font:9px Arial, Helvetica, sans-serif; text-align: center; margin: 10px 0 0 0; height: 5em; }

4.4 Обоснование использования CMS
CMS (Content Management System) - это компьютерное программное обеспечение, предназначенное для упрощения и систематизации совместного создания документов и контента. Чаще всего, CMS – это веб приложение, служащее для управления веб сайтами и их содержимым. Преимущества, которые дает использование CMS:

• 
  Абстрагирование от оформления, человек работает только над содержимым сайта.
  
• 
  Автоматизация задач по управлению сайтом.
  
• 
  Возможность создания различных по правам доступа частей сайта.
  
• 
  Данные хранятся не в виде файлов, а в реляционных СУБД, что значительно проще и удобнее.
  

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

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

С точки зрения тех, кто делает сайты - это инструмент, который ускоряет разработку сложных сайтов, позволяя компоновать решения из готовых блоков, изменяя в определенных пределах логику работы и оформление.
4.5 Основные характеристики и особенности CMS Joomla!
Joomla! - система управления контентом (содержанием) сайта. Название созвучно со словом "Jumla", что означает "все вместе", "все в одном", что отображает подход разработчиков к проектированию этой CMS.

CMS Joomla! написана на языке программирования РНР, что делает ее весьма универсальной - ее можно установить как на домашнем компьютере (конечно, для Этого нужно будет установить также Web-сервер Apache), так и на практически любом хостинге. В качестве хранилища данных эта CMS использует сервер баз данных MySQL, который тоже является стандартом де-факто на серверах хостинг-провайдеров.

Система Joomla! является совершенно бесплатной и распространяется по лицензии GPL. Данная лицензия подразумевает свободное распространение программного обеспечения. Единственное требование лицензии GPL - новые программные продукты, созданные на базе GPL-продуктов, должны также распространяться по лицензии GPL, т. е. свободно [7, с.5].

Вот неполный список возможностей Joomla!:

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

4.6 Установка CMS Joomla! и подключение шаблона
Для того, чтобы начать работу с Joomla!, необходимо правильно ее установить. Порядок действий на данном этапе следующий:

• 
  Раскрыть контрольную панель локального сервера xampp, запустить Apache, MySQL серверы.
  
• 
  В папке xampp зайти в папку htdocs и создать в ней каталог (с использованием латинских символов) для размещения сайта (название папки произвольное, не содержащее пробелов).
  
• 
  Разархивировать в созданную папку архив с Joomla!
  
• 
  Открыть файл my.cnf и удостовериться в наличие записи:
  

character-set-server=cp1251

collation-server=cp1251_general_ci

#character-set-server=cp1251

• 
  В браузере набрать в адресной строке http://localhost/название созданной папки.
  
• 
  На 1-й и 2-й странице мастера установки кликаем «далее».
  
• 
  На странице «ШАГ 1»:
  

• 
  Имя хоста MySQL – «localhost».
  
• 
  Имя пользователя – «root».
  
• 
  Название БД – произвольное название на латинице.
  

• 
  Вводим произвольное название сайта.
  
• 
  Вводим адрес электронной почты (на него будет ориентирована страницы «контакты»).
  
• 
  Изменяем пароль администратора на более простой (если пароль будет забыт, будет невозможно попасть в панель управления Joomla).
  
• 
  Удаляем папку INSTALLATION (иначе работа с Joomla! будет невозможна).
  

Для дальнейшей работы необходимо вставить шаблон в отдельную папку в директорию с шаблонами Joomla! Там должны находиться следующие файлы:

• 
  Резервная копия шаблона, сверстанная в HTML – index.html;
  
• 
  Основной файл шаблона, чье расширение изменено на PHP – index.php
  
• 
  Папка с изображениями, использованными при верстке;
  
• 
  Стилевой файл CSS, помещенный в отдельную папку
  
• 
  Файл мини-скриншота сайта в формате png;
  
• 
  XML-файл с данными о шаблоне, а так же перечнем всех используемых в шаблоне файлов
  

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

Так же в начало файла был добавлен следующий код PHP, необходимый для корректной работы системы:



defined( '_VALID_MOS' ) or die( 'Доступограничен' );

$tstart = mosProfiler::getmicrotime();

$iso = explode( '=', _ISO );

echo '$iso[1] .'"?' .'>';

?>

В область HEAD был добавлен следующий код PHP:





if ( $my->id ) {

initEditor();

}

$collspan_offset = ( mosCountModules( 'right' ) + mosCountModules( 'user2' ) ) ? 2 : 1;

$user1 = 0;

$user2 = 0;

$colspan = 0;

$right = 0;

if ( mosCountModules( 'user1' ) + mosCountModules( 'user2' ) == 2) {

$user1 = 2;

$user2 = 2;

$colspan = 3;

} elseif ( mosCountModules( 'user1' ) == 1 ) {

$user1 = 1;

$colspan = 1;

} elseif ( mosCountModules( 'user2' ) == 1 ) {

$user2 = 1;

$colspan = 1;

}

if ( mosCountModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {

$right = 1;

}

?>

" />

Для подключения css файла, прописывается путь:


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

На сайте используются модули поиска, модуль случайного вывода текста и изображения, компонент галерея. Модуль поиска является встроенными в систему Joomla!, остальные устанавливались через пункт меню cms Установка/Удаление. Каждый модуль имеет собственные настройки, в которые вносились изменения.

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



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



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



Для добавления главного меню использовалась вставка:



Для добавления дополнительного меню необходимо изменить позицию модуля по умолчанию ‘left’ на позицию ‘user9’, что позволило расположить данный модуль отдельно:


4.7 Настройка функциональной части сайта
В этом пункте будет описано создание навигации сайта (на примере основного меню).

Используя модули Joomla! легко создать меню для отображения на сайте. В нашем случае будет реализовано меню, построенное на стандартном модуле mod_mainmenu. Он является по умолчанию главным для создания меню. Место вывода меню на сайте определяется в шаблоне сайта [6].

Далее связываем объект содержимого с пунктом меню. В окне дополнительных параметров на вкладке «параметры связи с меню»:

• 
  выбрать меню, в которое будет добавлен пункт (ссылка);
  
• 
  выбрать название пункта меню;
  

Нажимаем кнопку «Связать с меню».

Примечание: На странице редактирования раздела или категории в дополнительном окне справа (для создаваемого раздела или категории данное окно будет доступно после сохранения – кнопка «Сохранить»). В данном окне необходимо:

• 
  выбрать меню, в которое будет добавлен пункт (ссылка);
  
• 
  выбрать тип меню, в котором виде будет отображаться раздел или категория;
  
• 
  выбрать название пункта меню;
  

Нажимаем кнопку «Связать с меню».

На странице «Управление меню (mainmenu)» отображается список уже созданных пунктов меню (по умолчанию без установки демонстрационных данных доступен только один пункт – «Главная»).

Для добавления нового пункта меню необходимо перейти на страницу «Новый пункт меню», далее нажмаем кнопку «Новый» на странице «Управление меню (mainmenu).

Здесь доступно несколько типов создаваемого пункта меню. Все типы разбиты по группам:

• 
  Содержимое, пункт меню будет отображать содержимое объекта.
  
• 
  Разное.
  
• 
  Отправка, пункт меню позволяющий добавлять объекты содержимого с сайта.
  
• 
  Компоненты, пункт меню позволяющий работать с компонентом и его возможностями.
  
• 
  Ссылки.
  

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

Чтобы добавить тот или иной пункт:

• 
  Вводим имя нового пункта меню (поле «Название»).
  
• 
  Выбираем объект содержимого (поле «Содержимое для связи»).
  
• 
  Выбираем как должно открываться окно при нажатии на пункт меню.
  
• 
  Определяем родительский пункт меню (поле «Родительский пункт меню»).
  
• 
  Выбираем порядок расположения (поле «Порядок расположения»).
  
• 
  Выбираем уровень доступа («Уровень доступа»).
  
• 
  Выбираем команду опубликован пункт меню.
  

В поле «Родительский пункт меню» перечисляются все существующие пункты меню, которые можно выбрать как «родительский пункт» для нового пункта меню. Поддержка иерархической структуры меню и отображение ее на сайте возможны, только если в шаблоне есть поддержка отображения иерархии пунктов меню. Для реализации меню с подменю используются дополнительные расширения, позволяющие улучшить создание и отображение структуры меню на сайте.
4.8 Тестирование сайта
Данный проект проходил внутреннее тестирование. Выполнялась следующая проверка:

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

5. ЗАПУСК И СОПРОВОЖДЕИЕ