Проектирование новостного сайта IT-технологий

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

Новостной портал обеспечивает выполнение следующих функций:

• -    демонстрация всех разработанных страниц согласно структурной схеме в соответствующих разделах меню;

• -    свободная навигация по страницам без обновления меню и оформления;

• -    регистрация пользователей, назначение им соответствующих ролей и прав доступа;

• -    добавление, редактирование, удаление материала;

• -    добавление, редактирование, удаление категорий;

• -    добавление, редактирование, удаление модулей и расширений.

С точки зрения наглядности, новостной портал должен имеет:

• -    удобный и понятный интерфейс;

• -    современный дизайн;

• -    возможность просмотра контента без установки дополнительных программ и шрифтов;

• -    просмотр контента на различных браузерах.

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

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

Структура главной страницы с определенными в ней позициями показана в таблице 1.

Зная расположение позиции, разработчик / администратор может настраивать расположение модулей и соответственно отображение контента так, как ему удобно.

В соответствии с имеющимися позициями и имеющими блоками, страница портала имеет следующую схему:

Таблица 1 – Структура главной страницы с позициями

Position: header_top1		Position: header_top2
Position: top_menu
Position: left			Position: right
Position: left			Position: right
Position: left			Position: right
Position: bottom1	Position: bottom2		Position: bottom3
Position: footer1	Position: footer2		Position: footer3

Таблица 2 – Структура главной страницы с имеющимися блоками

Логотип	Форма поиска
Верхнее меню СЛАЙДЕР
Основной контент		Основное меню
		Форма регистрации
		Топ – 5 новостей
Ранние материалы

Описание процедур

Блок заголовка

// расположение файла фонового изображения background-repeat: no-repeat; // фоновое изображение не повторяется margin-left: 10px; // отступ слева margin-right: 10px; // отступ справа

}

Блок навигации

background-color: #DCDCDC;

}

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

Блок слайдера

Блок страницы, в котором размещен слайдер, имеет название wowslider-container1.

#wowslider-container1

{ zoom: 1;

position: relative;

margin: 0px auto 111px;

z-index: 90;

border: none;

text-align: left;

font-size: 10px;

}

Блок правого меню

.moduletable_menu { border: solid 1px #DDD;

background: #F9F9F9;

• - webkit-border-radius: 4px;

• - moz-border-radius: 4px;

border-radius: 4px;

padding: 20px;

margin-bottom: 20px;

}

Блок левого меню

.mod-preview-info { padding: 2px 4px 2px 4px; // внешние отступы border: 1px solid black; // толщина, тип и цвет границ рамки position: absolute; // описание позиции: абсолютное background-color: white; // цвет фона color: red; // цвет текста

}

Блок основного контента

Блок, в котором отображается основной контент имеет название main_body.

.crate { min-height: 20px;

padding: 10px;

margin-bottom: 20px;

border: 0;

background-color: #FFF;

• - webkit-box-shadow: 0px 0px 10px -1px rgba(102,102,102,1);

• - moz-box-shadow: 0px 0px 10px -1px rgba(102,102,102,1);

box-shadow: 0px 0px 10px -1px rgba(102, 102, 102, 1);

}

Итоговый общий вид показан на рисунке 1.

Рисунок 1 – Главная страница новостного портала

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