Розробка сайту "Портал Новин" як віртуальна подія в інформаційному суспільстві

Генерується вміст

Вміст елемента, що було пов'язано з ним в результаті використання відповідних таблиць стилів. Генерується вміст замінного елемента надходить не з вихідного документа. Це може бути додатковий текст для елемента (наприклад, значення атрибута "alt" в HTML) і елементи, явно чи неявно вноситься таблицею стилів, наприклад, маркери, номери та інші.

Дерево документа

Дерево елементів, закодоване у вихідному документі. Кожен елемент в цьому дереві має тільки один батьківський елемент, за винятком кореневого елемента, у якого його немає.

Дочірній елемент

Елемент А називається дочірнім по відношенню до елементу B, якщо і тільки якщо B є батьківським елементом елемента А.

Нащадок

Елемент А називається нащадком елемента B, якщо виконується одна з таких умов:

А є дочірнім елементом елемента B;

А є дочірнім елементом елемента C, який, у свою чергу, є нащадком B.

Предок

Елемент А називається предком елемента B, якщо і тільки якщо B є нащадком елемента А.

Сестринський елемент

Елемент А називається сестринським елементом елемента B, якщо і тільки якщо елементи А і B є дочірніми елементами одного і того ж елементу. Елемент А є попереднім сестринським елементом, якщо в дереві документа він знаходиться перед елементом B. Елемент A є наступним сестринським елементом, якщо в дереві документа він знаходиться після елемента B.

Попередній елемент

Елемент А називається попереднім елементу B, якщо і тільки якщо (1) А є предком B або (2) А є попереднім сестринським елементом елемента B.

Наступний елемент

Елемент А називається наступним за елементом B, якщо і тільки якщо B передує елементу А.

Розробник

Розробник - це людина, яка створює документи та пов'язані з ними таблиці стилів. Документи та асоційовані з ними таблиці стилів генеруються засобом розробки.

Користувач

Користувач - це людина, що взаємодіє з агентом користувача з метою перегляду, прослуховування чи іншого використання документа і пов'язаних з ним таблиць стилів. Користувач може створити персональну таблицю стилів, в якій будуть закодовані персональні налаштування.

Агент користувача

Агент користувача - це довільна програма, яка інтерпретує документ, написаний на деякій мові структуризації, і застосовує пов'язані з ним таблиці стилів у відповідності з правилами даної специфікації. Агент користувача може виводити документ на екран, здійснювати його звукове відтворення, виводити на друк, конвертувати в інший формат і т.д.

Розділ 3. Реалізація проекту

Проаналізувавши результати вивчених історичних та сучасних особливостей розвитку суспільства нами було зроблено висновок, що інформаційна потреба сьогодні є головною потребою кожного індивіда як складової інформаційного суспільства. Можливість вдовольнити цю потребу шляхом відображення у віртуальному просторі подій батьківської реальності є мережа Інтернет. Розглянувши Інтернет простір, як інструмент впливу на свідомість сучасної людини ми визначили, що актуальним на сьогодні являється знання технологій для створення віртуальної реальності, тобто технологій розробки сайтів. Тому в даному розділі будуть розглянуті особливості організації сайту як віртуальної події в інформаційному суспільстві.

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

В ході роботи над сайтом були визначені наступні етапи його розробки:

1. Культурно-соціологічне обгрунтування проекту

2. Технічне завдання

3. Дізайн сайту у вигляді графічного файлу

4. Вибір технології вирішення поставленого завдання відповідно до ТЗ і дизайном (HTML + CSS, Joomla)

5. Разработка шаблону сайту (блоковий і сторінковий) (HTML + CSS), меню (переходи за посиланнями)

6. Верстка макета

7. Меню (навигация)

8. Заготовки сторінок для кожного пункта меню

9. Наповнення сторінок контентом +стилі редагування в декількох варіантах (в соответствии с назначением сайта (соціо-культурна составляющая), с возрастной категорией пользователей, с функциональностью сайта)

10. Тестирование (под разные АО, ПО пользователей)

11. Описание алгоритма администрирования сайта

12. План развития сайта, графики обновлений

13. Публикация сайта в интернет

14. Раскрутка, продвижение, поддержка

15. Установка счетчика посещений сайта

3.1 Структура та вибір дизайну

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

Схема 3.1.1. Структура сайту "Портал новин"

Проаналізувавши певні данні, можна виділити чотири основні напрями у нашому “Порталі новин” : “Екологія”, “Культура”, “Освіта”, “Дозвілля”.

Посилаючись на особливості технічного завдання нами був розроблений шаблон сайту з використанням технології HTML та CSS. Всі сторінки були виконані на основі технології “легкий дизайн”.

Структуру шаблону кожної сторінки сайту можна представити у вигляді схеми (Схема 3.1.2.):



1. Назва сайту

2. Головне навігаційне меню

3. Основний логотип сайту

4. Головне меню в колонці зліва

5. Меню розділу в колонці зліва

6. Блок регістрації відвідувачів

7. Контент

8. Заголовок статьи

9. Текст статьи

10. Столбец справа с тремя одинаковыми блоками

11. Подвал

12. Служебная информация

13. Ссылки на сайты разработчиков

Для організації вище структури сторінок необхідно використовувати технологію HTML для семантичної розмітки (Схема 3.1.3.).

#container

#top

#topmenu

#osnov

#logo

#left

#leftmenu

#razdelmenu

#schet

#right

#news

#news1

#foto

#content

#clear

#footer

Результат семантичної розмітки з використанням HTML має наступний вигляд:

<html>

<head>

<title>Новостной партал</title>

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

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

</head>

<body>

<div id ="container">

<div id ="top"></div>

<div id ="topmenu">

<div id ="osnov">

</div>

</div>

<div id ="logo"><img src="">

</div>

<div id ="left">

<div id ="leftmenu">

<ul>

</div>

<div id ="schet">

</div>

</div>

<div id ="right">

<div id ="news"><h3></h3>

</div>

<div id ="news1"><h3></h3>

</div>

<div id ="foto"><h3></h3>

</div>

</div>

<div id ="content">

<div id ="clear">

</div>

</div>

</div>

<div id ="footer">

</div>

</body>

</html>

Результат запрограмованної сотрінки у web- браузері виглядає так:

Рис. 3.1.1. Структура сторінки

Для надання сторінці вигляду до шаблону необхідно за допомогою конструкцій CSS, прописати правила до кожного елементу сторінки. Кожен з правил відповідає технічним вимогам:

1. Внутрішня організація:

· Обнуляємо зовнішні і внутрішні відступи у всіх елементів сторінки

· колір фону сторінки відповідає шаблону

2. Блок володіє наступними характеристиками:

має ширину 790px,

· відцентрован по горизонталі

· блок #top (1) розташований на всю ширину контейнера

· назва сайту знаходиться в блоці (1) є заголовком першого рівня і має 24 розмір

· шрифт Garamond, колір #0079b6, поля шириною 6em :

3. Верхнє меню (#topmenu) (2) також займає всю ширину контейнера, а висоту 30p, колір фону залежить від шаблону:

4. в блоці меню (#osnov) застосовуємо наступне форматування:

· видаляємо маркери в списку,

· до пунктів меню застосовуємо обтікання зліва,

· шрифт тексту 12px/30px Times New Roman напівжирного накреслення

· кожен пункт меню є блоковим елементом і містить посилання відповідного шаблону кольору вирівняну по центру, ширина якої 91px, висота - 28px, колір фону за зразком

· видаляємо підкреслення гіперпосилання і встановлюємо кордон справа товщиною 1 px, суцільну за кольором, відповідно макету.

· кожне гіперпосилання при наведенні покажчика миші повинне змінювати колір фону і тексту на протилежний йогог звичайного стану

5. Логотип сайту (# logo) (3)

займає всю ширину контейнера, а по висоті дорівнює 230px

ліва колонка по ширині 160px з обтіканням зліва

6. Блок Основного меню (#left)

по ширині 140px, з верхнім, правим і нижнім полем рівним 8px і внутрішніми відступами 5px

7. Головне меню (#leftmenu) (4)

· у колонці зліва має назву у вигляді заголовка 3-го рівня у якого нульові поля, напівжирне накреслення, ширина 25px, 14 розмір, Times New Roman, вирівнювання по центру.

· Колір фону відповідає шаблону

· кожен пункт меню є блоковим елементом і містить посилання відповідно шаблону кольору вирівняну по центру з нульовими полями, відсутністю маркерів і підкреслень.

· кожен елемент списку має тільки нижню межу товщиною в 1px. Саме посилання має внутрішній відступ зліва в 5px, шрифт 12px/30px Times New Roman.

· кожна гіперпосилання при наведенні покажчика миші повинна змінювати колір фону і тексту на протилежний його звичайного стану

8. Меню розділу (# razdelmenu) (5)

у колонці зліва має всі властивості відповідне за описом назвою головного меню

9. Блок реєстрації відвідувань (# schet) (6) аналогічно оформлений попереднім блокам і

містить скрипт, для фіксації відвідувачів сайту

10. Колонка справа (#right) (10) по ширині 180px, внутрішніми відступами 5px, полем зверху 8px, вирівняна по правому краю осяжний блоку

11. Всі три блоки #news, #news1, #foto оформлені однаково: заголовки блоків відповідають блоку #leftmenu, ширина блоків 150px, вірніше та нижнє поле 8px, внутрішній відступ 5px, кордон з усіх сторін 1px блок

12. Контент (#content) (7)

· в ширину 410px,

· поле зверху 8px,

· внутрішні відступи 5px 10px,

· вирівняний по лівому краю

· Заголовки новин (8) в цьому блоці представлені заголовками першого рівня, розміром 18px, шрифтом Arial Black, з відступом зліва 30px

13. Абзаци (9): внутрішній відступ 0 20px, поле зверху 10px, вирівнювання по ширині, відступ першого рядка 0.8em, кордон знизу товщиною 2px

14. Підвал (9) щодо позиційований основного вікна, займає всю ширину екрану монітора, по висоті 40px, текст в ньому (12, 13) вирівняний по центру, шрифт тексту Garamond, розмір тексту 13px. Колір тексту відповідає шаблоном .

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

1. Головне навігаційне меню

Для реалізації структури сторнінки ми використовували такі властивості:

Обнуляємо зовнішні і внутрішні відступи у всіх елементів сторінки

колір фону сторінки відповідає шаблону.

1.1. Блок володіє наступними характеристиками:

· має ширину 790px,

· відцентрован по горизонталі

1.2. Блок #top (1) розташований на всю ширину контейнера

· назва сайту знаходиться в блоці (1) є заголовком першого рівня і має 24 розмір

· шрифт Garamond, колір #0079b6, поля шириною 6em :

1.3. Верхнє меню (#topmenu) (2) також займає всю ширину контейнера, а висоту 30p, колір фону залежить від шаблону:

· в блоці меню (#osnov) застосовуємо наступне форматування:

· видаляємо маркери в списку,

· до пунктів меню застосовуємо обтікання зліва,

· шрифт тексту 12px/30px Times New Roman напівжирного накреслення

· кожен пункт меню є блоковим елементом і містить посилання відповідного шаблону кольору вирівняну по центру, ширина якої 91px, висота - 28px, колір фону за зразком

· видаляємо підкреслення гіперпосилання і встановлюємо кордон справа товщиною 1 px, суцільну за кольором, відповідно макету.

· кожне гіперпосилання при наведенні покажчика миші повинне змінювати колір фону і тексту на протилежний його звичайного стану

Код CSS:

*{ margin:0px;

padding:0px;

}

body{ background-color:#333399;

}

#container{width:790px;

margin:auto;

}

#top{width:100%;

}

h1{font-size:24px;

font-family:garamond;

color:#0079B6;

margin:.6em;

}

#topmenu{width:100%;

height:30px;

background:#1C86EE;

}

#osnov li{float:left;

font-weight:bold;

font:12px/30px Times New Ruman;

list-style:none;

}

#osnov li a{display:block;

width:91px;

height:28px;

border-right:1px solid#333399;

text-decoration:none;

color:white;

text-align:center;

}

В браузері це виглядає так:

2. Основний логотип сайту

Банер відображає годинник, картинку, що відповідає назві порталу. Має такі властивості:

· Логотип сайту (# logo) (3)

· займає всю ширину контейнера, а по висоті дорівнює 230px

· ліва колонка по ширині 160px з обтіканням зліва

HTML :

<img src="img/education.png" width="100%">

CSS:

#logo{position: relative; width:100%; height:230px;

}

В браузері банер відображається в наступному вигляді:

3. Головне меню в колонці зліва, меню розділу

Меню сайту містить в собі чотири розділи нашого порталу і має такі властивості:

3.1. Блок Основного меню (#left)

· по ширині 140px, з верхнім, правим і нижнім полем рівним 8px і внутрішніми відступами 5px

3.2. Головне меню (#leftmenu) (4)

· у колонці зліва має назву у вигляді заголовка 3-го рівня у якого нульові поля, напівжирне накреслення, ширина 25px, 14 розмір, Times New Roman, вирівнювання по центру.

· Колір фону відповідає шаблону

· кожен пункт меню є блоковим елементом і містить посилання відповідно шаблону кольору вирівняну по центру з нульовими полями, відсутністю маркерів і підкреслень.

· кожен елемент списку має тільки нижню межу товщиною в 1px. Саме посилання має внутрішній відступ зліва в 5px, шрифт 12px/30px Times New Roman.

· кожна гіперпосилання при наведенні покажчика миші повинна змінювати колір фону і тексту на протилежний його звичайного стану

3.3. Меню розділу (# razdelmenu) (5)

сайт новинний html css

· у колонці зліва має всі властивості відповідне за описом назвою головного меню

Властивості цього блоку прописані в CSS так:

#left{width: 160px;

float: left;

}

leftmenu, #razdelmenu{width:140px;

padding:5px;

margin-top:8px;

margin-bottom:8px;

margin-right:8px;

background-color: #1C86EE;

}

#leftmenu ul, #razdelmenu ul{list-style:none;

}

#leftmenu ul li,#razdelmenu ul li{display:block;

border-bottom:1px solid #333399;

}

#leftmenu ul li a,#razdelmenu ul li a {text-decoration:none;

font: 12px/30px Times New Roman ;

color:white; padding-left: 5px;

}

#leftmenu ul li a:hover,#razdelmenu ul li a:hover{color: #1A1917;

background-color: white;

}

Вигляд браузера:

4. Контент

В блоці контент ми розташували основні новини, які відредаговані наступним чином:

4.1. Контент (#content) (7)

· в ширину 410px,

· поле зверху 8px,

· внутрішні відступи 5px 10px,

· вирівняний по лівому краю

4.2. Заголовки новин (8) в цьому блоці представлені заголовками першого рівня, розміром 18px, шрифтом Arial Black, з відступом зліва 30px

4.3. Абзаци (9): внутрішній відступ 0 20px, поле зверху 10px, вирівнювання по ширині, відступ першого рядка 0.8em, кордон знизу товщиною 2px

В CSS відповідно цим вимогам прописан код:

#content{width: 410px;

margin-top: 8px;

padding: 5px 10px;

float: left;

background-color: white;

}

Браузер відображає код:

5. Стовбець справа з трьома однаковими блоками

З правої сторони веб-сторінки знаходиться допоміжний стовбець, що відображає випадкове фото, новини, та випадкову статтю. В CSS код цього блоку має такий вигляд:

#right{ width:180px;

padding: 5px;

margin-top: 8px;

float: right;

background-color: white;

}

h3{margin:0;

font-weight: bold;

height:25px;

font-size: 14px;

font-family: Times New Roman;

text-align:center;

background-color: white;

vertical-align: middle;

}

#news, #news1, #foto{width:150px;

padding:5px;

margin-top: 8px;

margin-bottom:8px;

border:1px solid #B0C4DE;

}

Браузер при зчитуванні CSS відображає наступне:

6. Колонтитул сайту

Оскільки наш портал ліцензійний та легальний безумовно ми маємо авторські права. Вся інформація щодо створення сайту та про розробників сайту знаходиться знизу сторінки.

Прописаний код виглядає такий:

#clear{clear: both;

}

#footer{ width:100%;

height:45px;

clear:both;

text-align: center;

font: 13px Garamond;

background-color: #0079B6;

position:relative;

font-weight: normal;

}

#footer a {color: yellow;

}

#footer a:hover{color: #333399;

Написаний вище код при застосуванні до блока відображається таким чином:

В результаті застосування правила “один до всіх” вийшов наступний шаблон сторінки:



Окрім головно сторінки наш портал містить щ декілька розгалужень -- рубрик новин.

Я відповідала за рубрику “Освіта”. Щоб організувати сторінки цього напряму потрібно було придумати інший вигляд сторінки по даному шаблону за правилами підбору кольорів для таких сторінок та щоб дизайн співпадав з основним шаблоном і був подібний зі всіма сторінками порталу.

Література

1. http://buklib.net/component/option,com_jbook/task,view/Itemid,99999999/catid,203/id,9554/

2. http://sitenet.com.ua/

3. http://www.hmx.ru/sozdanieiraskrutka.html

4. http://www.analytic.com.ua/Main/labs/assorti/article-site-types

5. http://blogoreader.org.ua/2007/11/23/creating-good-site/

6. http://uk.wikipedia.org/wiki/Соціальна_мережа

7. http://webstudio2u.net/webdesign/

8. http://yaneznal.ru/facts/3039

9. http://blogwork.ru/chto-takoe-html/

10. http://www.artima.ru/offer/html-verstka.html

Размещено на Allbest.ru