Проектування та створення сучасного web-сайту

року міністерство освіти Російської Федерации.

Самарський державний университет.

Механіко-математичний факультет.

Кафедра вищої математики информатики.

ДИПЛОМНА РАБОТА.

Студента 5 курсу денного отделения.

Кондрахина Сергія Сергеевича.

ПРОЕКТУВАННЯ І СОЗДАНИЕ.

СУЧАСНОГО WEB-САЙТА Допущена до захисту: Науковий керівник, 8 червня 2001 року к.ф.-м.н., доцент Завкафедрою, д.ф.-м.н., Ігнатьєв В.А. професор Сараєв Л.А. ______________________.

Оцінка: ______________.

Председатель ДАК ______________________.

" ___ «__________ 2001 г.

Самара 2001 год.

Запровадження 3.

1. СУЧАСНІ ІНТЕРНЕТ-ТЕХНОЛОГІЇ 4.

1.1. Web-дизайн і браузери 4.

1.2. Мова розмітки гіпертекстових сторінок HTML 8.

1.3. Забезпечення доступності Webсторінки 14.

1.4. Уявлення тексту на Web-страницах 19.

1.5. Уявлення графіки на Web-страницах 22.

1.6. Web-серверы 25.

2. ОСНОВНІ ПРАВИЛА І ЕТАПИ СТВОРЕННЯ САЙТУ 35.

2.1. Вплив дисплеїв на Web-дизайн 36.

2.2. Стандартні розміри та ліквідації дисплеїв 37.

2.3. Альтернативні дисплеї 38.

3. ВИБІР СТРУКТУРЫ WEB-СТОРІНКИ 41.

3.1. Створення фіксованих і гнучких Web-страниц 41.

3.2. Розробка комбінованих Web-страниц 43.

3.3. Macromedia Flash 44.

3.4. Стратегія розробки Web Сайту 49.

Висновки 52.

Література 53.

Додаток 54 Введение.

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

Десять років, за прогнозами фахівців, близько 50 відсотків сімей (безумовно, поки що лише розвинених країн) використовуватимуть його щодня. Телебачення і радіоприймачі ні замінені комп’ютерами, але матимуть потужний процесор, велику пам’ять і буде самі будуть відомі лише деякому відношенні компьютерами.

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

Кожен вже може зробити свій внесок у розвиток Internet. І тому досить створити свій веб-сайт і розмістити їх у Мережі. Але як це зробити? Відповідь даний питання спробуємо дати у цій работе.

І тому вирішити такі приватні задачи:

— ознайомитися з сучасними Інтернет-технологіями і з можливості, використовувати їх у своїй разработке;

— вивчити програмний інструментарій, застосовуваний і розробити і створення Web-сайтов;

— виявити та врахувати методи і засоби уявлення про Web-страницах різних видів інформації, не що перешкоджають їх доступности;

— ознайомитися з основними правилами і рекомендації для розробки і творення Web-сайтів і беззастережно дотримуватися їх у своїй практике;

— визначитися зі структурою Web-страниц;

— вибрати стратегію розробки і створення Web-сайта.

1. СУЧАСНІ ИНТЕРНЕТ-ТЕХНОЛОГИИ.

1.1. Web-дизайн і браузеры.

Багато Web-дизайнеры сходяться в думці, що з головних проблем Web-дизайна — розмаїття браузерів і платформ, кожна з яких порізного підтримує HTML і сценарії. З випуском кожної нової браузери поліпшуються їх характеристики й можливості, але ці значить, що як ранні версії у своїй зникають. Здебільшого люди й не схильні гнатися за новітнім і найкращим. Одні задовольняються тим, що вони є, а інші, найімовірніше, працюють за комп’ютерами фірм чи установ, котрі вибрали браузери за них.

Як зробити дизайн Webсторінки естетично й технічно цікавим, не ігноруючи у своїй власників попередніх версій браузерів? Невже Webсторінка, розрахована те що, щоб функціонувати будь-яких браузерах, мусить бути обов’язково нудної? Чи можна догодити всім? А якщо ні, то де провести риску? Скільки старих версій працюватиме з вашої страницей?

У Web-дизайні немає жорстких правил. Оскільки головне наше завдання — зробити вміст сторінки доступне максимальної кількості користувачів, то тут для просування вперед однаково важливі й експеримент, і використання нових технологій з урахуванням існуючих реалій. Запорука успіху дизайнерського рішення лежать у розумінні потреб аудиторії та в чіткому поданні, як сайт буде использован.

Браузери Netscape Navigator і Microsoft Internet Explorer. На ринку домінують дві основні браузери: Netscape Navigator і Microsoft Internet Explorer. Спільно вони, зокрема всі їх версії, представляє приблизно 90% (або як) використовуваних сьогодні браузеров.

Ці дві браузери конкурують між собою панування над ринком. Результатом їх боротьби стала колекція фірмових HTML-тегов, і навіть несумісні реалізації різних технологій (горезвісний Dynamic HTML, і навіть JavaScript і Cascading Style Sheets — каскадні таблиці стилів). З іншого боку, між Netscape і Microsoft загалом сприяла швидшому розвитку середовища Web.

Більшість Web-авторов у роботі орієнтуються на Navigator і Internet Explorer, оскільки вони займають левову пайку наявних ринку. Проте, існує інших браузерів, що ви можете вживати на внимание.

У версії Internet Explorer 4.0 для комп’ютерів Macintosh відсутня значної частини функціональних можливостей версії, створеної для Windows, тому використання низки особливих можливостей версії 4.0 може вилучити з гри деяких пользователей.

Деякі документовані відмінності включають: відсутність підтримки які вбудовуються шрифтів; відсутність підтримки фільтрів CSS і переходів (візуальних ефектів, як-от тіні, отбрасываемые об'єктом, які йдуть на елементів тексту); відсутність елементів управління мультимедіа (ефекти переходів і анімації, зазвичай створювані авторськими мультимедійними програмними засобами); проблеми у реалізації DHTML.

Попри заяви Microsoft, що DHTML підтримується усіма платформами, він особливо ненадійний за комп’ютерами платформи Масintosh.

Браузери America Online. Користувачі America Online (AOL) використовують одне із семи можливих браузерів (залежно від платформи, і версії програмного забезпечення AOL), окремі забезпечують лише саму мінімальну підтримку HTML.

Останню версію America Online для PC — це версія 3.0, використовує адаптовану версію браузери Microsoft Interne Explorer 3.0. Проте він менш, який завжди можна повністю покластися з цього версію як і, як у стандартний варіант MS Internet Explorer 3.0. (Функціональність особливо обмежена для користувачів комп’ютерів Macintosh). Багато розробники Web неодноразово жахалися, побачивши дизайн свого сайту (яка чудово працював у більшості основних браузерів), коли він запущено в системі AOL і відображено однією з їх браузеров.

Проблеми частково виникають тому, що AOL потрібно було на проксисервери та художні засоби стискування зображень. Відомо, що використовуваний AOL метод стискування зображення має проблеми із відображення JPEG-графики, які у появу плям і кольорових смуг. Були відзначені проблеми освіти й при виведення фонових изображений.

З іншого боку, деякі технології, такі як Java і Cascading Style Sheets (каскадні таблиці стилів), не доступні для користувачів Windows 3.0 (приблизно 40% користувачів AOL). Власники комп’ютерів Macintosh не зможуть використовувати JavaScript й інших можливостей (приблизно 8% пользователей).

На щастя, створено спеціальну сайт на допомогу тим Web-дизайнерам, які прагнуть зробити свої сторінки цікавими і доступними для користувачів AOL. Особливої уваги заслуговує таблиця браузерів, де ви знайдете спеціальний список кожного з браузерів (за версіями і платформам), перелік технологій і підтриманих функцій, і навіть відсоток збоїв кожного з браузерів. (Адреса сайту AOL для Web-дизайнеров: internet.

WebTV. WebTV спричиняє наші квартири Web через звичайний телевізор з пультом дистанційного управління (також із бажанню, можна використовувати клавіатуру). Для перегляду Web-страниц WebTV використовує власний спеціалізований браузер. Він здійснює синтаксичний аналіз згідно — зі стандартом HTML 3.2, але з надає можливостей відображення фреймів, Java, JavaScript, ActiveX або домогтися будь-якого іншого формату, який вимагає які вбудовуються додатків (крім вбудованих Shockwave і RealAudio 3.0). Також створене багато нових фірмових HTML-тегов, що використовуються лише у WebTV.

Оскільки WebTV виводить зображення на екран телевізора, пред’являються нові вимоги до характеристикам кольору та параметрами экрана.

Opera. Opera — це маленьке і простенький браузер, створений норвезької компанією Opera Software Осло. Цей браузер має виключно малим часом завантаження і мінімальними вимогами обсягу диска. Перевагою Opera є повну відповідність стандартам HTML. Неточності в написанні тегов (наприклад, пропущені які зачиняють теги, неправильне вкладення тощо. буд.), які пропускають солідніші браузери, ні правильно відображатись цим браузером. Opera 5.0 підтримує Java, каскадні таблиці стилів і DHTML.

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

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

Люди справді використовують Lynx, тому слід дивуватися, якщо клієнт замовить розробку сайту для Lynx. Цей браузер важливим для інвалідів зору: вони використовують Lynx разом із мовними устройствами.

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

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

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

1.2. Мова розмітки гіпертекстових сторінок HTML.

Мова розмітки гіпертекстових сторінок (HTML — Hypertext Markup Language) є мову, розроблений спеціально до створення Web-документов. Він визначає синтаксис і розміщення спеціальних інструкцій (тегов), які виводяться на екран, але вказують браузеру, як відображати вміст документа. Він також використовується до створення посилань інші документи, локальні чи мережні, наприклад, перебувають у мережі Интернет.

Стандарт HTML та інші стандарти для Web розроблено під керівництвом консорціуму W3C (World Wide Web Consortium). Стандарти, специфікації й молодіжні проекти нових пропозицій можна знайти в сайті internet Нині діє специфікація HTML 4.0, підтримка яку з боку основних браузерів постійно растет.

Насправді на стандарт HTML великий вплив надає наявність тегов, запропонованих і підтримувані найвідомішими браузерами, такими як Microsoft Internet Explorer і Netscape Navigator. Ці теги у цей момент можуть як входити, не входити до складу діючої специфікації HTML.

Інформації про тегах HTML Compendium (стисле посібник з HTML) созданно Ron Woodall. Компендіум містить список тегов та його атрибутів в алфавітному порядку, і навіть оновлену інформацію про підтримку кожного з виборців із боку браузерів. Компендіум HTML перебуває в сайті internet.

Інструментарій редагування HTML. Документи HTML є звичайними текстовими ASCII-файлами. Це означає, що їх створення можна використовувати будь-який текстовий редактор, і з мінімальними можливостями. Існують кошти редагування, розроблені спеціально для написання HTML. Вони дозволяють заощаджувати час, оскільки містять клавіші швидкого доступу до виконання повторюваних операцій, наприклад, завдання початкових установок документів, таблиць чи навіть застосування стилів до тексту. Редактори HTML від авторського WYSIWYG-инструментария (аналізованого далі) тим, які потребують знання правил складання HTML вручну, редактори лише спрощують і прискорюють цей процесс.

Користувачам Windows точно слід перевірити HomeSite, потужний і недорогий редактор HTML компанії Allaire Corporation. У ньому є кошти на виділення квітами синтаксичних конструкцій HTML, функція FTP, контроль синтаксису і правопису, многофайловый пошук і освоєння заміщення. З іншого боку, він містить спеціальні команди, і шаблони до створення більш складних елементів (фреймів, сценаріїв JavaScript і DHTML). Інформація і демонстраційна програма для завантаження перебувають за адресою httр://internet.

Працюючи за комп’ютерами Macintosh звертають уваги на BBEdit, комерційний HTML-редактор компанії Bare Bones Software, Inc. Він справді має вагу серед Web-разработчиков для для комп’ютерів Macintosh. У його складу входять зручні і швидкі HTML-инструменты, многофайловый пошук і освоєння заміна, вбудована FTP-функция, підтримка 13 мов програмування, построитель таблиць, контроль синтаксису HTML і ще безліч функцій. Додаткові відома і демонстрационную програму можна знайти за адресою internet.

Авторський інструментарій WYSIWYG. Останніми роками характеризуються різким зростанням ринку авторських інструментів. HTML-редакторы класу WYSIWYG (What You See Is What You Get — що бачиш, те й одержиш) мають графічні інтерфейси, що роблять написання HTML більше схожим на програму редагування текстів чи розмітки сторінки. Початкової метою цих програм було звільнення користувачів від тегов HTML, на кшталт того, як програми розмітки сторінок захищають розробника від набору команд мови PostScript. Сьогодні їхній значимість зросла, оскільки вони підвищують ефективність яких і рівень автоматизації виробництва документів, забезпечуючи до того ж час доступу до тексту HTML.

Найпопулярнішими нині WYSIWYG-редакторами є: Macromedia Dreamweaver, Golive CyberStudio (лише комп’ютерів Macintosh), Microsoft FrontPage, FileMaker Claris, Home Page, Adobe PageMill.

Теги HTML. Документ HTML містить текст (вміст сторінки) і вбудовані теги — інструкціями про структуру, зовнішньому вигляді та функції вмісту. Документ HTML поділяється на дві основні частини: заголовок — head і тіло — body. Заголовок містить такі дані документ, як він назва та методичніша інформація, яка описувала вміст. У тілі перебуває саме утримуємо документа (те, що виводиться з вікна браузера).

Кожен ярличок складається з імені, на яких може вийти список необов’язкових атрибутів, всі вони всередині кутових скобок < >. Вміст скобок будь-коли виводиться з вікна браузери. Ім'я тега, як правило, є абревіатуру його функції, що полегшує його запам’ятовування. Атрибути є властивостями, які розширюють чи уточнюють функцію тега. Зазвичай, ім'я і атрибути всередині тега не чутливі до регістру. Ярлик працюватиме як і, як. Проте значення певних атрибутів може бути чутливі до регістру. Це стосується, зокрема, до імен файлів і URL.

Контейнери. Більшість тегов є контейнерами. Це означає, що вони є початковий (відкриває чи стартовий) і кінцевий (закриває) теги. Текст, які перебувають між тегами, виконуватиме які у них інструкції. Например:

The weather is gorgeoustoday.

Результат: The weather is gorgeous today.

Кінцевий ярличок має саме ім'я, як і початковий, але проти нього стоїть слэш (/). Його можна як «вимикач «тега. Кінцевий ознака будь-коли містить атрибутов.

У окремих випадках кінцевий ярличок необов’язковий, і браузер визначає кінець тега з контексту. Найчастіше опускають кінцевий ярлик (абзац). Браузери раніше підтримували цей ярлик без відповідного завершення, тому багато хто автори Web звикли використовувати коротку форму. Це дозволено не всім тегам, і все браузери прощають відсутність. Тому, є сумніви, включіть до тексту закриває ознака. Особливо важливо, як у документі ви використовуєте каскадні таблиці стилей.

Автономні теги. Деякі теги немає завершальних тегов, тому що їх використовують розміщувати окремих (автономних) елементів на сторінці. Однією з них етикетка зображення, він поміщає графіку в потік сторінки. Інші автономні теги — це розрив рядки (), горизонтальна лінія () і теги, містять інформацію про документі та які впливають на вміст, виведене на екран, такі як і .

Атрибути. Атрибути додаються в ярлик належала для розширення чи модифікації його дії. До одного тегу можна додати кілька атрибутів. Якщо атрибути тега йдуть після імені тега, ліпіди діляться однією або кількома прогалинами. Порядок прямування не важливий. Більшість атрибутів мають значення, які випливають за знаком рівності (=), які є після імені атрибута. Довжина значень обмежена 1024 символами. Значення можуть бути чутливі до регістру. Іноді значення має перебувати у лапках (подвійних чи одинарних). Правила записи значення следующие:

— якщо значення є одним слово чи число і полягає тільки з літер (a-z), цифр (0−9) і спеціальних символів (точка чи дефіс), можна вмістили його після знака рівності без кавычек;

— якщо значення містить кілька слів, розділених комами чи прогалинами, чи містить спеціальні символи, які від точки чи дефіса, тоді її необхідно розмістити у лапки. Наприклад, URL вимагають лапок, оскільки вони містять символи " :// «. Також лапки необхідні при завданні значень квітів з допомогою формату «#rrggbb » .

Якщо ви хоч невпевнені, варто використовувати лапки, використовуйте їх завжди всім значений.

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

The Weather is gorgeous today.

Результат: The weather is gorgeous today.

Часто трапляється помилкою є перекриття тегов. Хоча частина браузерів відбивають вміст, відзначене в такий спосіб, багато не дозволяють порушувати правило, тому важливо розмішати теги правильно. Наступний приклад показує неправильне вкладення тегов (зауважте, що етикетка закривається перед закриттям):

The weather is gorgeoustoday — дана інформація, игнорируемая браузерами.

Інформація, игнорируемая браузерами. Деяка информацияНиже наводиться інформація, у документі HTML, включаючи певні теги, яка ігноруватися під час перегляду браузерами. До її складу входят:

— розриви рядків. Символи кінця рядків документі HTML ігноруються. Текст і елементи будуть переноситися до того часу, поки потоці тексту документа не зустрінеться ознака чи. Розриви рядків виводяться, якщо текст означене як текст з заданим форматом ();

— символи табуляції і множинні прогалини. Коли браузер зустрічає у документі HTML символ табуляції і кілька послідовних символів прогалини, виводить лише одне прогалину. Отже, якщо документ містить: «far, far away », браузер виведе «far, far away ». Додаткові прогалини можна додати в текстовий потік, використовуючи символ нерозривного прогалини (Snbsp;). З іншого боку, все прогалини виводяться, якщо текст є форматированным (перебуває у тегах);

— множиннітеги. Послідовність тегов, не що перериваються текстом, усіма браузерами інтерпретується як надлишкова. Вміст буде виводитися бо коли був би лише одне ознака. Більшість браузерів виведе кілька тегов у кількох переходів нові строку;

— нераспознаваемые теги. Якщо браузер не розуміє поміткою чи ту був не так заданий, то браузер його просто ігнорує. Залежно від тега і браузери це можуть призвести до різним результатам. Або браузер щось виведе, чи що вона може відобразити вміст тега як звичайний текст;

— текст коментарів. Браузери не виводять текст між спеціальними елементами, що використовуються позначення коментарів. Після символів початку коментарю та перед символами закінчення обов’язково повинен бути прогалину. Тож у коментар можна поміщати майже всі. Коментарі не можна вкладати. У Microsoft Internet Explorer є фірмовий ярлик, що означає коментарі … Проте, він не підтримується іншими браузерами.

1.3. Забезпечення доступності Web-страницы.

Під час розробки Webсторінки фіксованого розміру, мабуть, доведеться вибирати нею розмір екрана. Здоровий сенс підказує, що сторінка мусить бути доступна (і відображатись) для максимально можливого числа користувачів. Ідея проста: необхідно визначити найбільш часто що використовується дозвіл дисплея розробити і сторінку в такий спосіб, щоб сторінка гарантовано заповнювала все робоче пространство.

Більшість дизайнерів рекомендують розробляти сторінки в форматі 640×480, щоб за перегляді користувачам більше не довелося застосовувати горизонтальну прокручування. Горизонтальна прокручування завжди утрудняє сприйняття, тому дизайнери традиційно її отвергают.

Дедалі більше розробників вважає стандартним дозвіл 800×600. І одиниці розробляють сторінки для ще більше високих дозволів. Звісно, рішення буде, насамперед, залежати від аудиторії. Наприклад, якщо сайт ресурсів для дизайнерів графіки, то вважаємо, що вони теж мають дисплеї, по крайнього заходу, з дозволом 800×600 чи вище, в відповідність до що навіть розробляється сторінка. Якщо сайт призначений спеціально для WebTV чи іншого устрою відображення, слід поступово переорієнтовуватися під це конкретне устройство.

Гідний поваги Web-дизайн включає розробку сторінок, доступних для користувачів з обмеженими можливостями, зокрема у зору і слуху. Консорціум World Wide Web оголосив про ініціативу Web Accessibility Initiative (WAI), яка на меті зробити Web доступнішою всім користувачів. Проте успіх даної ініціативи залежить від участі у ній рядових розробників, що потенційно можуть (або можуть) створити веб-сайти в відповідність до поставленими задачами.

Користувачі з обмеженими можливостями зору може використати спеціальні устрою збільшення зображення, знаходиться в екрані. І тут до дизайну не пред’являється ніяких спеціальних вимог. Багато людей із проблемами зору використовують текстові браузери (такі як Lynx) разом із програмним забезпеченням, яке голосно читає вміст сторінки. У кожному разі основну увагу приділяється структурі документи й його тексту. Графічне вміст то, можливо просто утеряно.

Кошти HTML 4.0. Специфікація HTML 4.0 запроваждує низку нових атрибутів і тегов, створених спеціально у тому, щоб зробити Web-документы доступними якомога ширшої кола користувачів. Коротко перелічимо нові можливості HTML 4.0. (Розширений список можливостей розміщений з сайту internet, а повні специфікації цієї версії - з сайту internet.

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

— подальше поділ структури документи й його зовнішнього уявлення. Щодо стилі HTML 4.0 пропонує безкоштовно розміщувати у каскадних таблицях стилей;

— навігаційна допомогу, наприклад, клавіші доступу і індексування порядку табуляції для доступу до елементам сторінки з допомогою лише клавиатуры;

— рекомендації, що стосуються нової клієнтської карты-изображения, об'єднуючою графічні і текстові ссылки;

— нові теги і, які допомагають мовним та інших пристроям інтерпретувати абревіатури і акронимы;

— можливість логічно групувати рядки — і стовпчики таблиць, забезпечувати їх заголовками, резюме та довгими описами вмісту, полегшуючи інтерпретацію таблиц;

— можливість групувати елементи управління формами і створювати довгі списки вибору, більш ясні до. Елементи форм також доступні через клавіші табуляції та швидкого доступа;

— поліпшений механізм створення альтернативного тексту. Атрибут alt тепер обов’язковий для тега. Щоб якось забезпечити зв’язку з довшими текстовими поясненнями до зображенням, запроваджено атрибут longdesc.

Для додавання інформації про будь-якому елементі, можна використовувати атрибут title.

Кошти CSS. Каскадні таблиці стилів чи CSS (від англійського Cascading Style Sheets) є результатом її подальшого розвитку HTML і дають нам можливість перейти наступного року рівень подання. Таблиці стилів дозволяють розділити значеннєве вміст сторінки та її оформление.

У перших версіях стандарту HTML був передбачено ніяких коштів на управління зовнішнім виглядом інформації. Загальна концепція гіпертексту була на доступність інформації для будь-яких пристроїв, здатних відтворювати текст. Для розмітки рекомендувалося використовувати лише логічні теги, що визначають заголовки, підзаголовки, списки, абзаци, цитати тощо. — тобто, ті елементи, які становлять структуру документа. Інтерпретація ж зовнішнього вигляду залишалася повністю за совісті кінцевого терминала.

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

Тоді було здійснено широкомасштабна стандартизація. Через війну чого світ з’явився стандарт HTML 3.2. Він був революційним, а лише розставив на місця нововведення виробив загальні рекомендації для виробників браузерів. Революційні зміни ввели з нового стандарті - HTML 4.0 чи, як він почали називати, Dynamic HTML. У звернення ввели верстви, таблиці стилів і універсальна объектная модель браузера.

У кодексі стандарті спробували повернутися до початків концепції HTML. Четверта версія, як й перша, рекомендує створювати сторінки таким чином, що вони були відтворені будь-якою устрої - чи це 21 «дисплей чи маленький чорно-білий екран стільникового телефона.

Яким чином було розв’язано проблему з наданням зовнішнього вигляду інформації? У цьому полягає революційність підходу. Усі оформлення рекомендується винести в зовнішній стильовий файл. А основна сторінка буде утримувати лише інформації і посилання необхідні стили.

При показі сторінки конкретному влаштуванню мусить бути задіяна відповідна випадку таблиця стилів. Для стільникового телефону і дисплея комп’ютера вони, зрозуміло, мають бути різними. У першому випадку ми використовуємо мінімальне оформлення, що дозволить уявити інформацію найоптимальніше і компактно. У другому випадку у нашій розпорядженні є багатство шрифтового і колірного оформления.

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

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

CSS2 (Cascading Style Sheets, Level 2) — остання рекомендація по каскадним таблицям стилів, надає механізми для поліпшеною інтерпретації сторінок неграфическими і візуальними пристроями. Удосконалення включают:

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

— спеціалізована підтримка для загружаемых шрифтів — таким чином зменшується тенденція поміщати текст в графіку підвищення зовнішнього вигляду страницы;

— механізми позиціонування і вирівнювання, які відокремлюють вміст від зовнішнього уявлення. Ці таблиці стилів мають виключити некоректне використання тегов HTML до створення особливих ефектів відображення. Теги HTML можна використовуватиме логічного структуризації документа, роблячи простішим для інтерпретації не візуальними посредниками;

— засоби управління для звукового виведення доставленої по Web информации;

— поліпшені кошти навігації, такі як цифрові маркери, які можна додавати до документа з метою ориентации.

Джерела розробки доступних страниц.

1). Офіційний сайт WAI. Нею є низка корисних посилань до джерелам, що з проблемою доступності (internet.

2).Очень хороший джерело статей і посібників авторам HTML розташований з сайту Фонду сліпих Юрія Рубинского, що є своєрідним зброєю боротьби за права інвалідів на розширений доступом до технологіям (internet.

1.4. Уявлення тексту на Web-страницах.

Під час створення професійної графіки для Web використовується текст зі згладженими краями. Згладжування — це легка розмитість на нерівних краях, сглаживающая переходи між квітами. Не згладжені краю, навпаки, виглядають зазубреними і ступеневими. Винятком від цього загальне правило є текст дуже малого розміру, (10 пунктів і від), застосування згладжування робить її практично нерозрізненим. Текст малих розмірів виглядатиме набагато краще без сглаживания.

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

Пропорційний шрифт — інакше «шрифт перемінної ширини «кожному за символу виділяє різну кількість місця у залежність від його начерки. Наприклад, в пропорційному шрифту заголовна «W «забирає понад місця у рядку за горизонталлю, ніж прописна «I ». Такі гаринитуры, як: Times, Helvetica і Arial є взірцями пропорційних шрифтов.

Web-браузеры більшість текстів на Web-сторінці, включаючи основний текст, заголовки, списки, цитати тощо. буд., використовують пропорційні шрифти. Зазвичай, великі уривки основного тексту зручніше читати, що вони надруковані пропорційними шрифтами. Оскільки більшість користувачів немає часу замінити шрифти, встановлені за умовчанням, запросто можна припустити, що текст за вашої сторінці буде відображено шрифтом Times розміром 10 чи 12 пунктів (по вмовчанням в Netscape) чи Helvetica (за умовчанням в Microsoft Internet Explorer). Але це лише загальне правило.

Шрифт з фіксованою шириною надає однакове місце для всіх символів шрифту. Головна «W «займає максимум місця, ніж прописна «I ». Прикладами шрифтів фіксованою ширини є гарнітури Courier і Monaco. У Web-браузерах шрифти фіксованою ширини йдуть на відображення будь-якого тексту всередині наступних HTML-тегов:, ,, , .

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

Текст в зображеннях. Дизайнери швидко зрозуміли, що вірний спосіб повного контролю над шрифтами — помістити текст в зображення. Можна часто бачити заголовки, підзаголовки і оголошення, виконані вигляді файлів GIF. Багато Webсторінки представлені тільки у графіці, що містить всередині себе всю текст страницы.

Переваги використання графіки замість HTML-текста абсолютно очевидны:

— можна визначати тип шрифту, розмір, інтерліньяж, проміжок між літерами, колір і вирівнювання — все атрибути, що викликають складності лише у HTML;

— ваша сторінка буде однакова при виведення переважають у всіх графічних браузерах.

Але в цієї методу є низка недостатков:

— зображення завантажується довше, ніж текст, т.к. графічні файли зазвичай кілька порядків більше, ніж HTML-тексты, мають те содержание;

— в неграфічних браузерах зміст втрачається. Користувачі, які можуть (чи ні) переглядати графіку, не побачать і тексту. Альтернативний текст (використовується атрибут Alt) дома графічного зображення допомагає, та його можливості обмежені і це завжди надійний спосіб ототожнення відсутньої графічної информации;

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

Розмір шрифту. Зазвичай розмір шрифту визначається пунктах (72 пункту (пт) = 1 дюйм висоти шрифту) але, на жаль, ці розміри не досить точно переводяться між платформами. Почасти це відбувається що їх операційні системи управляють дисплеями з різними дозволами. Зазвичай Windows використовує дозвіл екрана 96 точек/дюйм, a MacOS — 72 точек/дюйм. Монітори MultiScan припускайся вищу разрешение.

Шрифт на екрані дисплея Масintosh має такий самий розмір, як і для друку (наприклад, 12 пт Times" на екрані така ж, як 12 пт Times" на бумаге).

Для шрифтів Microsoft такої угоди не виконується, і величину шрифту при виведення на екран більше, що полегшує читання з дисплея. У результаті шрифт розміром 12 пт на Windows більше на друкований шрифт в 16 пунктів. Щоб самому отримати на Windows друкований розмір 12 пт, ви повинні вибрати розмір шрифту 9 пунктів (але давайте тоді користувачі комп’ютерів Масintosh побачать текст майже нерозбірливим, оскільки він відображено шрифтом розміром всього 6,75 пт).

1.5. Уявлення графіки на Web-страницах.

На цей час майже всі зображення на Web, представлені у двох форматах: GIF і JPEG. Третій суперник, вартий згадки, формат PNG, виборює підтримку і увагу браузерів. Далі - короткий огляд «великої трійки «онлайнових графічних форматів. Більше докладна інформація представленій у розділах, присвячених кожному з форматов.

GIF. GIF — Grafic Interchange Format може бути традиційним форматом файлів Web. Він був охарактеризований першим форматом файлів, який підтримувався Web-браузерами, і з сьогодні продовжує залишатися основним графічним форматом Web.

Його властивості перебувають у следующем:

— підтримує трохи більше 256 квітів (менше можна й часто нужно);

— використовує палітру цветов;

— використовує стиснення без втрати інформації з методу LZW (який подібний до застосовуваному в архиваторе PKZIP, і, отже, GIF-файлы в подальшому мало сжимаются);

— підтримує чересстрочную развертку;

— є поточным форматом, тобто. показ картинки починається у час перекачки;

— дозволяє призначити одного з квітів у палітрі атрибут прозорий, що застосовується під час створення про прозорих GIFов;

— має можливість щодо одного файлі кількох зображень, що віднаходить своє застосування під час виготовлення анимированных GIFов;

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

Нині ж трошки роз’яснень — чого ці якості можуть призвести. Як написали, GIF підтримує максимум 256 квітів, але це отже, що все зображення, які ми зберігаємо в GIF-формате, явно чи неявно зменшують кількість квітів, аби вкластися у цей ліміт (різні програми з успіхом). А звідси висновок — якщо в взяти красиву фотографію з плавними переходами і мало вловимими відтінками кольору, то після перетворення усе почне значно гірше — відтінки перестануть бути невловними, і весь фотографія придбає неприродний, нереалистичный вид. Тому, коли треба все-таки зберегти фотографію в форматі GIF і передати всі відтінки, то мусять іти на хитрості. Наприклад, до фотографії можна застосувати який-небудь художній фільтр і перетворити їх у малюнок чи застосувати тонування. Зате нема ніяких проблеми з збереженням рисунків і креслень у цьому форматі, вони, зазвичай, добре стискуються і є багато цветов.

JPEG. Другим найпопулярнішим графічним форматом в Web є JPEG — Joint Photographic Experts Group. Він має 24-разрядную інформацію про кольорі. Це 16,77 млн квітів у на відміну від 256 квітів формату GIF. У JPEG використовується зване стиснення з утратами. Це означає, що деяка інформація про зображеннях у процесі стискування відкидається, але переважно випадків погіршення якості зображення не шкодить і навіть не заметно.

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

PNG. Є ще третій графічний формат, конкуруючий за постійне використання у Web. Це формат PNG — Portable Network Graphic, який, попри деякі гідності, з 1994 р. є близько більш-менш в тіні. Тільки недавно браузери почали підтримувати PNG як вмонтовану графіку, але PNG має шанси стати дуже популярний форматом в Web. Саме й тому він включений тут у «велику трійку ». PNG може підтримувати 8-разрядные індексовані кольору, 16-разрядные півтони чи 24-разрядные барвисті зображення, використовуючи схему стискування без втрат. Це забезпечує вищу якість зображень, котрий іноді менший обсяг файлів проти форматом GIF. З іншого боку, файли PNG мають деякі чудові функції, наприклад, вбудоване управління коефіцієнтом гама, і змінювані рівні прозорості (це дозволяє показувати малюнок фону крізь отбрасываемые м’які тени).

Дозвіл і величину файла зображень. Оскільки зображення Web існують тільки екрані дисплея, буде технічно правильно вимірювати їх дозвіл в пикселах на дюйм (ppi — pixels per inch). Інша одиниця виміру дозволу — кількість точок на дюйм (dpi — dots per inch) належить до розв’язання друкованих зображень і від вирішення що друкує устройства.

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

Практично створювати зображення з дозволом 72 ppi (це найкращий варіант до подання на екрані), зважаючи лише з загальні розміри в пикселах. У процесі створення графіки на Web взагалі не використовувати дюйми. Важливий розмір зображення порівнянню коїться з іншими зображеннями сторінка і спільного розміру вікна браузера.

Наприклад, багато користувачі як і використовують 14-дюймо-вые дисплеї з дозволом 640×480 пікселів. Щоб гарантувати заповнення графічної заставкою всього простору екрана, краще зробити його шириною трохи більше 600 пікселів (враховуючи, що коли частина пікселів справа й зліва буде використана для вікна й у смуги прокручування). Розмір інших кнопок і зображень сторінка слід вимірювати в пикселах щодо банеpa, має ширину 600 пикселов.

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

У цьому плані для Web-дизайнера існує єдине найбільш важливе правило: розмір файла графічного зображення може бути мінімально можливим! Створення зображень, виділені на передачі по мережі, покладає відповідальність на розробників серйозно ставитися до проблемі часу загрузки.

1.6. Web-серверы.

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

Сервер — це будь-яке котра управляє комп’ютером програмне забезпечення, що дає можливість виконувати запити на документи й інші дані. Програми, які запитують і відбивають документи (такі як браузер), називаються клієнтами. Терміни «за серверу «і «за клієнта », використовувані, наприклад, під час роботи з картами-изображениями, ставляться до тієї машині, яка керує процесом. Функції за клієнта виконуються машиною користувача, функції за серверу — на віддаленій машине.

Web-серверы відповідають запити браузерів (клієнтських програм), знаходять задані файли (або виконують сценарій CGI) і повертає документ чи результати сценарію. Web-браузеры і сервери спілкуються за протоколом Hypertext Transfer Protocol (HTTP, протокол передачі гипертекста).

Програмне забезпечення серверів. Більшість серверів працюють на платформі Unix. Саме у світі Web як і використовується термінологія системи Unix. У процесі роботи знадобиться вивчити кілька Unix-команд. Однак відсоток серверів Windows NT, Windows 95 і навіть MacOS стає більше. Деякі серверні пакети пропонують графічний інтерфейс як альтернативу управлінню з командної рядки Unix.

Ось лише деякі відомі сервери: NCSA Server, Apache, CERN, Netscape Servers, Internet Information Server (IIS).

Сьогодні більшість серверів (приблизно 70%) працюють на Apache або його попередника NCSA. Конкретний тип серверу важить велику частина, що робить дизайнер, наприклад, створення графіки чи розробку базових HTML-файлов. Звісно, він проводити більш скоєні методи створення Web-сайтів, такі як Server Side Includes (серверні включення), додавання типів MIME і Webсторінки, керовані базами данных.

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

Індексні файли. Прямий слэш (/) наприкінці URL означає, що URL звертається до каталогу, а чи не до файлу. За умовчанням сервери відбивають зміст каталогу, вказаної у URL. Більшість серверів, проте, сконфигурированы те щоб відображати особливий файл замість списку каталогу, цей файл називається індексним. Індексні файли зазвичай мають ім'я index. html, але деяких серверах можуть називатися welcome. html чи default.html.

Якщо сервер сконфигурирован на перебування індексного файла і виявляє його, замість нього може бути відображене зміст каталогу, але це робить файли уразливими для сторонніх. Через це непогано завжди називати жодну з сторінок (зазвичай головну) у кожному каталозі index. html (чи іншим домовленим именем).

Заголовки відгуку HTTP. Щойно сервер визначає місце розташування файла, він посилає вміст цього файла назад браузеру разом із деякими заголовками відгуку HTTP (response headers). Ці заголовки забезпечують браузер інформацією щодо прибывающем файлі, включаючи його тип даних (також відомого як «тип вмісту «чи «тип MIME »). Зазвичай сервер визначає формат з розширення файла; наприклад, файл з розширенням .gif розпізнається як файл изображения.

Браузер читає інформацію в заголовку яких і визначає, що робити з файлом. Він може відобразити файл з вікна або запустити відповідне допоміжне чи встраиваемое додаток (plug-ins).

Сценарії CGI. Замість звертатися до файлам HTML, URL може зажадати запустити програму CGI. CGI розшифровується як Common Gateway Interface (загальний шлюзової інтерфейс). Він дає змогу Web-серверу іншими програмами (сценаріями CGI), які працюють на сервері. Сценарії CGI зазвичай пишуть мовами Perl, З чи C++.

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

Більшість адміністраторів серверів дотримуються правила зберігати сценарії CGI у спеціальній каталозі, озаглавленому cgi-bin (скорочено від CGI-binaries). Коли вони щодо одного каталозі, адміністраторам простіше управляти сервером забезпечуватиме її безпека. Якщо сценарій CGI запитує браузером, сервер виконує функцію і повертає браузеру динамічний содержимое.

Використання SSI. SSI — Server Side Includes чи, російською, — включення за серверу. SSI — це директиви, вставляемые просто у HTMLкод і службовці передачі вказівок Wев-серверу. Зустрічаючи такі директиви, які називаються SSI-вставками, Web-сервер інтерпретує їх і виконує відповідні дії. Наприклад: вставка HTML-фрагмента з іншого файла, динамічний формування сторінок на залежність від деяких змінних (наприклад, типу браузери) та інші щонайменше приємні вещи.

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

А, щоб сервер знав, що сторінка не звичайна, а містить SSI-директивы, вона не має спеціальне розширення: *.shtml чи *.shtm, наявність і це змушує Web-сервер попередньо обробляти сторінки. Узагалі-то, розширення може бути будь-яка — залежно від конфігурації Web-сервера, але переважно застосовується саме *.shtml.

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

//g;

$value =~ s/n/ /g;

$FORM{$name} = $value;

} open (OUTF, «>>$logfile ») or &dienice («Couldn «t open guestbook.txt. »); print OUTF «&name_$hits=$FORM{ «name «}& email_$hits=$FORM{ «e-mail «}& comments_$hits=$FORM{ «comments «}n »; close (OUTF); sub dienice {.

($msg) = @_; print «Ошибкаn »; print $msg; exit;}.

ЛІСТИНГ ФАЙЛА INDEX.HTML.

PCBIT.

= 4); explorer = (navigator.appName == «Microsoft Internet Explorer »); ie4 = explorer && (parseInt (navigator.appVersion) >= 4); function shake (n).

{ if (n4 || ie4).

{ for (і = 12; і > 0; i—).

{ for (j = n; j > 0; j—).

{ self. moveBy (0,i); self. moveBy (i, 0); self. moveBy (0,-i); self. moveBy (-i, 0);

}.

}.

}.

}.

// End -->

ЛІСТИНГ ФАЙЛА MYGUEST.HTML.

GuestBook.