5. Приклад сторінки

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

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

5.1 Index.Html

Цей файл не буде розбиратися для кожного рядка, тому що ви побачите багато прикладів у майбутніх лекціях, однак, кілька основних моментів, які необхідно відзначити, наступні:

Рядок 1 представляє так зване оголошення типу документа або doctype. У цьому випадку сторінка має тип XHTML 1.0 Transіtіonal. Тип документа визначає безліч правил, за яким виконано розмітку, і згідно яким вона буде перевірятися. Більш докладно про типи документів буде у наступних лекцях.

Рядки з 5 по 7 імпортують файл CSS на сторінку — стилі, що містяться у цьому файлі будуть застосовуватися до різних елементів на сторінці. Вміст цього файлу CSS, що управляє всім форматуванням сторінки, буде показано далі.

Для кожного з різних типів посилань створені різні класи. Це дозволяє застосувати різні стилі оформлення для кожного типу посилань — наприклад, у даному прикладі праворуч від кожного посилання поміщений спеціальний кольоровий індикатор, щоб полегшити перегляд списку.

Тепер давайте подивимося на файл CSS, що оформляє цей HTML.

5.2 Styles.Css

Ця сторінка спеціально трохи перевантажена стилістичним оформленням, що додає кілька ефектів для фону, щоб показати деякі можливості, які можна реалізувати за допомогою CSS.

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

На наступному рядку задано, що сторінка буде мати ширину 800px, хоча тут можна було б визначити відсоток, щоб сторінка розширювалася/стискувалася на основі розміру вікна браузера. Налаштування полів, що використані тут, будуть гарантувати, що контент сторінки залишається центрованим у вікні.

Далі звернемо нашу увагу на фонові зображення, використані на сторінці (вони застосовуються за допомогою оголошень background: url). На цій сторінці є три різних фонових елементи. Перший є градієнтом, що розташовується по верху сторінки, створюючи плавну зміну кольору. Потім використовується напівпрозоре зображення ручки pen.png, щоб створити достатній контраст із текстом над ним і з'єднати із градієнтом (напівпрозорі зображення PNG не працюють в Іnternet Explorer 6 або більше старих версіях, але вони працюють майже у всіх сучасних браузерах). Наприкінці використовується ще одне напівпрозоре зображення PNG для фону заголовку сторінки. Воно створює для заголовку невеличкий додатковий контраст, акуратно його виділяючи.

Приклад буде виглядати як показано на Рис. 2.

Рис. 2. Закінчений приклад із застосованими стильовими оформленнями

Висновок

Немає нічого особливо таємничого у відношенні XHTML, CSS і JavaScrіpt. Вони є просто еволюцією Web. Якщо ви вже трохи знайомі з HTML, то нічого "забувати" не потрібно. Все, що ви знаєте, як і раніше може застосовуватися, необхідно тільки робити деякі речі іншим чином (і бути небагато більше уважним під час розмітки).