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

[ред.]Синтаксис

CSS має порівняно простий синтаксис і використовує невелику кількість англійських слів для найменування різних складових стилю.

Стилі складаються зі списку правил. Кожне правило містить  один або більше селектор (англ. selector) та блок визначення (англ. declaration block). Блок визначення складається із оточеного фігурними дужками списку властивостей. Властивості в списку оформлюються у вигляді назва властивості, двокрапка (:), значення, крапка з комою (;).

Приклад:

 p {

   font-family: Verdana, sans-serif;

 }

h2 {

   font-size: 110%;

   color: red;

   background: white;

 }

 .note {

   color: red;

   background: yellow;

   font-weight: bold;

 }

p.warning {

   background: url(warning.png) no-repeat fixed top;

 }

 #paragraph1 {

   margin: 0;

 }

 a:hover {

   text-decoration: none;

 }

 #news p {

   color: red;

 }

В прикладі використано 7 правил, селектори p, h2, .note, p.warning, #paragraph1, a:hover та #news p. Приклад властивості: color: red, де властивості з назвоюcolor присвоєно значення red.

В перших двох правилах визначаються властивості HTML-елементів p (абзац, скорочення від англ. paragraph) та h2 (Заголовок другого рівня, скорочення від англ. header). Абзац буде відображено шрифтом Verdana або, у разі відсутності Verdana, іншим шрифтом sans-serif. Заголовок другого рівня буде відображено червоним кольором на білому тлі.

Третє правило буде застосовано  до всіх елементів, властивість class визначена як 'note'. Наприклад:

<p class="note">Абзац буде відображено  червоним жирним шрифтом на  жовтому тлі.</p>

Третє правило також можна  записати як *.note. 
Для того щоб третє правило застосовувалося лише до абзаців його слід переписати як:

 p.note {

   color: red;

   background: yellow;

   font-weight: bold;

 }

Четверте правило стосується тих елементів рівню абзаца (p), що мають властивість class дорівнюючу 'warning'. Такі абзаци будуть мати фонове зображення warning.png вгорі.

Властивість .class може містити не лише порівняння, але й перелік. Коли властивість class містить перелік значень, розділених пробілом, то до цього елементу застосовуються правила усіх перелічених класів. Наприклад, до <p class="note warning"> будуть застосовані правила note та warning.

П'яте правило застосовується лише до одного елементу в документі HTML, що має ідентифікатор id дорівнюючою paragraph1. Цей елемент не буде мати межі навколо, тому що властивість margin дорівнює 0. Наприклад:

<p id="paragraph1">Цей абзац не має межі тому що межа

 дорівнює 0. На сторінці може бути лише один такий елемент.

</p> 

Шосте правило визначає стиль  наведення мишкою (hover) для a (anchor) елементів. Стандартно більшість браузерів підкреслюють елементи a (посилання в межах одного документа або на інші HTML-документи). Це правило прибере підкреслювання з посилань коли користувач наводить на них мишкою.

Останнє правило застосовується до тих абзаців, що знаходяться всередині (мають батьківський елемент) з ідентифікатором news. Це приклад наслідування властивостей.

Завдяки каскадній структурі CSS, ці абзаци (p) будуть наслідувати font-family: Verdana, sans-serif; як і всі елементи p (абзаци). Ті з них, що мають class дорівнюєwarning будуть мати також і фонове зображення.

CSS може містити також  коментарі. Синтаксис коментарів  подібний до синтаксису що  використовується в багатьох мовах програмування (наприклад C, PHP). Слід звернути увагу на те, щоб в коментарях CSS-файлів не використовувалися кирилічні літери (деякі браузери некоректно обробляють CSS-файли з українськими або російськими літерами^[1]).

/* comment */

[ред.]Селектори та Псевдо-класи

CSS має спеціальні позначення (селектори, від англ. selector) для визначення діапазону застосування правила.

Всі елементи 

використовується селектор * (часто не пишеться, наприклад *.p та p — рівнозначні)

За назвою елементу 

наприклад для всіх p або h2

Наслідування 

наприклад для всіх a елементів які містяться в li елементах (посилання всередині списків) селектор буде мати вигляд li a

Властивості class та id

наприклад .class або #id для елементів class="class" або id="id"

Суміжні елементи 

наприклад для всіх елементів p попереднім до яких є елемент h2 (перший абзац після заголовка) селектор буде h2 + p

Пряме наслідування 

наприклад для всіх span елементів всередині p, але не глибших за перший рівень наслідування span селектор буде p > span

За атрибутами

наприклад для всіх <input type="text"> селектор буде input[type="text"]

Для більш точного визначення стилю можуть використовуватися псевдо-класи (англ. pseudo-classes). Мабуть найвідомішим є псевдо-клас :hover, що застосовується коли користувач вкаже на елемент, зазвичай наведенням курсору. Стиль визначається для a:hover або #elementid:hover. Інші псевдо-класи, наприклад, :first-line(перша строка тексту), :first-letter (перша літера) :visited (посилання, що вже відкривалось) або :before (визначає стиль перед елементом). Спеціальний псевдо-клас :lang(c) буде застосовано до елементів якщо їх мова (англ. language) «c».

Підтримка псевдо-класів залежить від браузеру, наприклад Internet Explorer 6 підтримує псевдо-клас :hover лише для посилань.

Селектори можуть поєднуватися і іншим чином для досягнення більшої гнучкості (див. визначення селекторів на сайті W3C). В наступному прикладі декілька селекторів об'єднуються через кому^[2]. Правило встановлює шрифт для HTML-заголовків всіх рівнів.

h1, h2, h3, h4, h5, h6 {

   font-family: "Arial", sans-serif;

 }

[ред.]Приєднання до сторінки

Для того щоб включити таблицю  стилів CSS потрібно зберігти код CSS у  файл (це можна зробити будь-яким текстовим редактором), наприклад example.css, і потім включити або імпортувати його в HTML або XHTML-сторінку.

Включення CSS-файла до сторінки (XHTML):

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

Включення CSS-файла до сторінки (HTML):

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

Імпорт CSS-файлів до HTML та XHTML-сторінок:

 <style type="text/css">

@import "example.css";

 </style>

CSS може бути визначенний  в <head> частині сторінки або для елементу сторінки через style.

Включення CSS-файла до XML-сторінки:

 <?xml-stylesheet type="text/css" href="example.css"?>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Практична реалізація

 

3.1 Постановка завдання

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

  У даній курсовій  роботі були запропоновані наступні завдання: 
 1) Обробка шаблонів WEB сторінок. Дана система керування повинна мати можливість при необхідності динамічно міняти дизайн сайту, розташування модулів.  

  2) Універсальність. Клієнтська частина системи керування інтернет-сторінками повинна передбачати сумісність зі всіма основними браузерамі і платформами. Перед даною CMS системою ставиться завдання сумісності з наступними браузерамі: Internet Explorer, Mozilla Firefox, Opera, Safari, Awant (на двіжку IE).

  3) Реалізація, що запобігає додатковому коректуванню HTML коду або коду самої системи керування. Користувач, не маючи спеціальної освіти, повинен без проблем редагувати і оперувати вмістом. Повинен бути наданий призначений для користувача інтерфейс, який дозволяє обійняти всі призначені для користувача запити по наповненню.

  4) Засіб для простого додавання інформації, її зберігання та форматування.

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

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

3. 2 Розробки та результати

 

  При розробці клієнтської частини системи керування Web-контентом необхідно в першу чергу визначитися з мовою та базою даних.

Обрана наступна конфігурація: HTML + JavaScript + PHP + MYSQL.

  Мова розмітки сторінок HTML є простим і зручним інструментом для створення сторінок, за допомогою JavaScript зручно писати скрипти, без PHP сьогодні важко представити сучасні сайти, оскільки ця мова надає практично необмежені можливості програмування Web-сторінок.

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

  1) швидкодіючий алгоритм

  2) ефективний підхід до розробки

   3) простий, але зрозумілий інтерфейс

  4) різноманітні модулі

  5) підтримка різних браузерів

  6) надійну функціональність

  Інтерфейс повинен бути мінімізованим і зрозумілим. Суть полягає в заповненні необхідних форм і подальшої передачі запитів з подальшим виведенням сторінки.

  Планується досягти високої швидкодії за рахунок мінімізації і простоти.

3.3 База даних

 
  Основним  кроком при написані CMS є створення бази даних для системи. База створюється вбудованими функціями панелі управління хостингом, інтерфейс представлений на “Малюнку 1”.

 

Малюнок 1

 

   Оптимальним було б рішення використовувати кодування «UTF 8», що забезпечує підтримку майже всіх існуючих мов і кодує ASCII символи одним байтом, а національні алфавіти - кількома.  
Але, оскільки сайт українськомовний, було вирішено використовувати «cp1251_general_ci». У «cp1251_general_ci» кодуванні наявні практично всі символи, що використовуються у російській типографіці для звичайного тексту (відсутній тільки значок наголосу); вона також містить всі символи для близьких до російської мови мов: українського, білоруського, сербського та болгарського. Інтерфейс бази даних представлений на малюнку “Малюнку 2”.

  

    Розглянемо структуру основних таблиць  бази даних.

 

Структура таблиці “users”:  
 Поле "user_id" - є ключовим і містить унікальний номер користувача.  
 Поле "username" - містить логін користувача.  
 Поле "siteurl" – силка на власний сайт користувача .  
    Поле "usermail" – mail користувача.  
    Поле "pss" – пароль, який буде використовуватися при  вході на сайт.

Поле "avatar" – номер аватарки.  
 Поле "last_ip" – ip адреса ком’ютера, з якого користувач заходив на сайт      останній раз.  
 Поле "regdate" – дата реєстрації.  
    Поле "last_date" – дата останнього входу користувача на сайт.  
    Поле "status" – його статус.

Поле "city" – місто, де проживає user.

  

 
 

Малюнку 2

 

Структура таблиці  “news”:  
 Поле "id" - є ключовим і містить унікальний номер новини.  
 Поле "title" - назва.  
 Поле "news" – короткий опис новини .  
    Поле "full_news" – повний опис новини.  
    Поле "newsman" – користувач,  який додав новину на сайт.

Поле "DATA" – дата додання  новини.  
 Поле "hits" – кількість переглядів.  
 Поле "rank" – ранг.  
    Поле "status" – його статус.

Поле "cat" – категорія  новини.

 

Структура таблиці  “files”:  
 Поле "id" - є ключовим і містить унікальний номер файлу.  
 Поле "title" - назва.  
 Поле "files" – короткий опис  даних про файл.  
    Поле "full_files" – повний опис .  
    Поле "filesman" – користувач,  який додав файл на сайт.

Поле “url”-силка на скачування файлу.

Поле "DATA" – дата додання файлу.  
 Поле "hits" – кількість скачувань файлу.  
 Поле "rank" – ранг.

  Поле “size”-розмір файлу.

Поле “licen”-ліцензія. 
    Поле "status" – його статус.

Поле "cat" – категорія  файлу.

“bоoks” має структуру аналогічну до структури “files”.

 Структура таблиці “links”:  
 Поле "id" - є ключовим і містить унікальний номер посилання.  
 Поле "title" - назва.  
 Поле "links" – короткий опис посилання.  
    Поле “url”-  саме посилання. 
    Поле "linksman" – користувач,  який додав посилання на сайт.

Поле "DATA" – дата додання посилання.  
 Поле "hits" – кількість переходів по посиланню.  
 Поле "rank" – ранг. 

  Поле "status" – статус.

Поле "cat" – категорія посилання.

Поле “cms”-СMS сторінки, на яку ми перейдемо по посилання.

Поле “url_links”- url нашого сайту.

 

  Окрему увагу потрібно приділити форуму. Форум реалізують три таблички: “mod_forums”, “mod_forums_categories”, “mod_forums_post”. Робота форуму полягає у створенні користувачами тем у розділах і можливістю обговорення всередині цих тем. Окремо взята тема, по суті, являє собою тематичну гостьову книгу. Елементи форуму: розділи (“mod_forums_categories”)→теми(“mod_forums_post”)→ →повідомлення(“mod_forums”). 
 У табличках ”news_cat”, “links_cat”,”files_cat”, ”books_cat” розташовані категорії, відповідно новин, посилань файлів та книжок. “news_comments”,     “files_comments” i “books_comments” – коментарі. Комертарі можуть додавати  тільки користувачі, які авторизувались. 

  Табличка “papa_adm” містить тільки один запис – дані про адміністратора сайту(його mail та пароль, який потрібно ввести при вході у панель керування сайтом).