Створення Web-сайту

[ виправити ] текст може містити помилки, будь ласка перевіряйте перш ніж використовувати.

скачати

РЕФЕРАТ

Пояснювальна записка до дипломного проекту містить:

  • 74 сторінки;

  • 5 таблиць;

  • 21 джерел.

Об'єкт дослідження: найбільш підходяща програма для створення Web-сторінок.

Мета роботи: створення Web-сторінок.

У дипломній роботі виконано: огляд програм для створення Web-сторінок; порівняльний аналіз Macromedia Dreamweaver і Front Page; описаний процес створення і розробки сучасного сайту; оцінка економічної доцільності використання персонального комп'ютера; правила охорони праці на робочому місці оператора комп'ютерного набору та верстки.

Web-сайт, Html-програмування, ДИЗАЙН САЙТУ, FRONT PAGE, MACROMEDIA DREAMWEAVER.

ЗМІСТ

Введення

Розділ 1. Сучасні Інтернет-технології

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

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

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

1.4 Представлення тексту на Web-сторінках

1.5 Представлення графіки на Web-сторінках

1.6 Web-сервери

Розділ 2. Основні правила та етапи створення сайту

2.1 Роль дисплеїв при створенні сайтів

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

Стандартні розміри і дозволу дисплеїв

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

2.2 Вибір структури Web-сторінки

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

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

Стратегія розробки Web-сайту

2.3 Огляд і порівняльний аналіз HTML-редакторів

Macromedia Flash

HTML-редактор FrontPage

  1. Оцінка економічної доцільності використання

HTML-редакторів

  1. Норми і вимоги охорони праці на робочому місці "Оператора комп'ютерного набору»

4.1 Загальні положення

4.2 Вимоги безпеки під час експлуатації ЕОМ

4.3 Вимоги безпеки під час роботи

4.4 Вимоги безпеки в аварійних ситуаціях

4.5 Вимоги безпеки після закінчення роботи

Висновки

Література

Введення

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

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

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

Кожен з нас вже зараз може зробити свій внесок у розвиток Internet. Для цього досить створити свій Web-сайт і розмістити його в Мережі. Але як це зробити? Відповідь на це запитання я спробую дати в цій роботі.

Для цього необхідно вирішити наступні приватні задачі:

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

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

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

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

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

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

World Wide Web - глобальна комп'ютерна мережа, на сьогоднішній день містить мільйони сайтів, на яких розміщена всіляка інформація. Люди отримують доступ до цієї інформації за допомогою використання технології Internet. Для навігації в WWW використовуються спеціальні програми - Web-браузери, які суттєво полегшують подорож по безкрайніх просторах WWW. Вся інформація в Web-браузері відображається у вигляді Web-сторінок, які є основним елементом байтів WWW.

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

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

Створити Web-сторінку непросто, але напевно кожна людина хотіла б спробувати себе в ролі дизайнера.

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

Також у даній роботі мною розглянуті основи мови програмування Web-сторінок - HTML, який є загальноприйнятим стандартом WWW. Це дасть нам можливість ознайомитися зі структурою Web-сторінки і прийомами її правильного оформлення.

Так що ж таке World Wide Web, або, як кажуть в просторіччі, WWW, the Web, або ще простіше - 3W? WWW - це розподілена інформаційна система мультимедіа, заснована на гіпертексті. Давайте розберемо це визначення по порядку.

Розподілена інформаційна система: інформація зберігається на величезній безлічі так званих WWW-серверів (servers). Тобто комп'ютерів, на яких встановлене спеціальне програмне забезпечення і які об'єднані в мережу Internet. Користувачі, які мають доступ до мережі, отримують цю інформацію за допомогою програм-клієнтів, програм перегляду WWW-документів. При цьому програма перегляду посилає по комп'ютерній мережі запит серверу, що зберігає файл з необхідним документом. У відповідь на запит сервер висилає програмі перегляду цей необхідний файл або повідомлення про відмову, якщо файл по тих або інших причинах недоступний. Взаємодія клієнт-сервер відбувається за певними правилами, або, як кажуть інакше, протоколу. Протокол, прийнятий в WWW, називається HyperText Transfer Protocol, скорочено - HTTP.

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

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

Такі посилання називають гіперпосиланнями або гіперзв'язками. На екрані комп'ютера у вікні програми перегляду посилання виглядають як виділені яким-небудь чином (наприклад, іншим кольором і / або підкресленням) дільниці тексту або графіки. Вибираючи гіперпосилання, користувач програми перегляду може швидко переміщатися від однієї частини документа до іншої, або ж від одного документа до іншого. При необхідності програма перегляду автоматично зв'язується з відповідним сервером в мережі і запитує документ, на який зроблено посилання. До речі, ідея гіпертекстового представлення інформації повинна вже бути добре знайома користувачам різних версій системи Microsoft Windows. Саме за цим принципом побудована в Windows система підказок (Help), з тією лише різницею, що гіпертекстова система підказок Windows не є розподіленою.

Отже, W eb-сторінка може містити стилізований і форматований текст, графіку і гіперзв'язки з різними ресурсами Internet. Щоб реалізувати всі ці можливості, була розроблена спеціальна мова, названа HyperText Markup Language (HTML), тобто, Мова Розмітки Гіпертексту. Документ, написаний на HTML, являє собою текстовий файл, що містить власне текст, несучий інформацію читачеві, і прапори розмітки. Останні являють собою певні послідовності символів, що є інструкціями для програми перегляду; у відповідності з цими інструкціями програма розташовує текст на екрані, включає в нього малюнки, що зберігаються в окремих графічних файлах, і формує гіперзв'язки з іншими документами або ресурсами Internet. Таким чином, файл на мові HTML набуває вигляд WWW-документа тільки тоді, коли він інтерпретується програмою перегляду.

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 Internet 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. Особливої ​​уваги заслуговує таблиця браузерів, де ви знайдете спеціальний список для кожного з браузерів (за версіями та платформ), перелік технологій і підтримуваних функцій, а також відсоток збоїв для кожного із браузерів.

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

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

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

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

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). Стандарти, специфікації і проекти нових пропозицій можна знайти на сайті http://www.3w.org/. В даний час діє специфікація HTML 4.0, підтримка якої з боку основних браузерів постійно зростає.

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

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

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

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

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

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

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

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

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

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

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

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

Деякі теги не має завершальних тегів, тому що вони використовуються для розміщення окремих (автономних) елементів на сторінці. Одним з них є тег зображення <img>, він просто поміщає графіку в потік сторінки. Інші автономні теги - це розрив рядка (<br>), горизонтальна лінія (<hr>) і теги, що містять інформацію про документ і не впливають на вміст, що виводиться на екран, такі як <meta> і <base>.

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

- Якщо значення являє собою одне слово або число і складається тільки з букв (az), цифр (0-9) і спеціальних символів (точка <.> Або дефіс <->), то можна помістити його після знака рівності без лапок;

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

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

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

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

The weather is <B> <I> gorgeous </ B> </ I> today - дана інформація, ігнорована браузерами.

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

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

- Символи табуляції і множинні пробіли. Коли браузер зустрічає в документі HTML символ табуляції і декілька послідовних символів пробілу, він виводить тільки один пробіл. Таким чином, якщо документ містить: "far, far away", браузер виведе "far, far away". Додаткові пробіли можна додати в текстовий потік, використовуючи символ нерозривного пробілу (Snbsp;). Крім того, всі прогалини виводяться, якщо текст є форматованим (знаходиться в тегах <рrе>);

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

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

- Текст у коментарях. Браузери не виводять текст між спеціальними елементами <! і ->, які використовуються для позначення коментарів. Після символів початку коментарю і перед символами закінчення обов'язково повинен перебувати пробіл. У сам коментар можна поміщати практично все. Коментарі не можна вкладати. У Microsoft Internet Explorer є фірмовий тег, що позначає коментарі <com-ment> ...</ comment>. Однак, він не підтримується іншими браузерами.

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

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

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

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

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

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

Специфікація HTML 4.0 вводить ряд нових атрибутів і тегів, створених спеціально для того, щоб зробити Web-документи доступними для більш широкого кола користувачів. Коротко перелічимо деякі нові можливості HTML 4.0. (Розширений список можливостей розміщений на сайті http://www.w3.org/WAI/References/HTML4-access, а повні специфікації даної версії - на сайті http://www.w3.org/TR/REC-html40).

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

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

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

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

- Нові теги <abbr> і <acronym>, які допомагають мовним і іншим пристроям інтерпретувати абревіатури та акроніми;

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

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

- Покращений механізм створення альтернативного тексту. Атрибут alt тепер обов'язковий для тега <img>. Щоб забезпечити зв'язок з більш довгими текстовими поясненнями до зображень, введений атрибут longdesc.

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

Каскадні таблиці стилів або 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. На ньому є ряд корисних посилань до джерел, пов'язаних з проблемою доступності (http://www.w3.org/WAI).

2). Дуже хороше джерело статей і посібників для авторів HTML розташований на сайті Фонду сліпих Юрія Рубинського, який є своєрідною зброєю боротьби за права інвалідів на розширений доступ до технологій (http://www.уun.org/Webable).

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-тегів: <рге>, <tt>, <code>, <kbd>, <samp>, <ХТР>.

Оскільки багато людей не міняють налаштування шрифтів, встановлену за замовчуванням, текст, що знаходиться в зазначених тегах, буде виведений одним з шрифтів типу 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 - Grafic Interchange Format можна назвати традиційним форматом файлів Web. Він був першим форматом файлів, який підтримувався Web-браузерами, і до цього дня продовжує залишатися основним графічним форматом Web.

Його властивості полягають в наступному:

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

- Використовує палітру кольорів;

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

- Підтримує чересстрочную розгортку;

- Є потоковим форматом, тобто показ картинки починається під час перекачування;

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

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

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

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

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

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

Є ще третій графічний формат, що конкурує за постійне використання в 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-дюйм-ші дисплеї з роздільною здатністю 640x480 пікселів. Щоб гарантувати заповнення графічної заставкою всього простору екрану, краще зробити його шириною не більше 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 (response headers). Ці заголовки забезпечують браузер інформацією про прибуває файлі, включаючи його тип даних (також відомий як "тип вмісту" або "тип MIME"). Зазвичай сервер визначає формат з розширення файлу, наприклад, файл із расшіреніем.gif розпізнається як файл зображення.

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

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

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

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

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

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

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

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

<!--# Command param = "value" ->,

де # - ознака початку SSI-вставки; command - SSI-команда; param - параметри SSI-команди.

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

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

На комп'ютерах IBM PC і Маcintosh більшість функцій можна виконати, використовуючи інструментарій з графічним інтерфейсом. Тим не менш, іноді неможливо знайти заміну для старої сесії Telnet. Telnet - протокол "емуляції терміналу", що дозволяє вам реєструватися у іншій комп'ютерній системі або мережі, такий як Internet. Цей термін також використовують стосовно до будь-якого додатка, службовцю для спілкування з використанням протоколу Telnet. Програма Telnet надасть текстове термінальне вікно іншої системи, в якому можна вводити інструкції в командному рядку.

Коли за допомогою програми Telnet відкривається сеанс зв'язку з віддаленим сервером, з'являється запрошення зареєструватися в системі. Перш ніж отримати доступ до сервера, системному адміністраторові потрібно встановити для користувача обліковий запис (account) Unix.

При успішній реєстрації, ви отримаєте підказку системи Unix%, (або іноді #) залежно від різновиду Unix, на якій працює сервер. Це знак, що система готова. З цього моменту використовується програма під назвою shell. Вона інтерпретує друкуються вами команди і викликає запитувані програми. Переміщення в домашній каталог буде автоматичним.

Щоб закінчити сесію Telnet достатньо набрати logout або exit.

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

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

Ім'я шляху (path name) - це нотація, яка використовується для вказівки конкретного файлу або каталогу. Воно вказує, який шлях треба пройти, щоб дістатися до бажаної мети. Є два типи шляхів: абсолютний (з кореневого каталогу) і відносний (з каталогу в якому знаходишся).

Для того щоб файли вдало подорожували по мережі, потрібно назвати їх відповідно до встановлених угодами про імена файлів:

- Заборонено використання прогалин в іменах файлів. Хоча це абсолютно прийнятно для локальних файлів в MacOS і Windows 95/98/NT, пробіли не розпізнаються іншими системами;

- Небажано використання в іменах файлів спеціальних символів, таких як?,%, #. Краще обмежитися літерами, цифрами, символом підкреслення (замість пробілів), дефісами і крапками;

- Вибір розширення повинен бути правильним. Документи HTML вимагають розширення. Html (або htm для сервера Windows). Графічні файли GIF мають розширення. Gif, а файли JPEG -. Jpg або. Jpeg. Файли з неправильним розширенням браузер не розпізнає як файли, дозволених для передачі в Web;

- Імена файлів HTML чутливі до регістру. Хоча це й не обов'язково, але краще використовувати тільки букви нижнього регістра. Це може полегшити запам'ятовування імен файлів.

Найбільш частою транзакцією, з якою Web-дизайнер звертається до сервера, є завантаження на сервер HTML-документів, зображень або мультимедійних файлів. По мережі файли передаються між комп'ютерами за допомогою методу, званого FTP (File Transfer Protocol, протокол передачі файлів). При роботі на Unix в сесії Telnet можна запустити програму ftp і передавати файли з величезним числом аргументів командного рядка.

На комп'ютерах IBM PC і Маcintosh є ряд програм FTP з графічними інтерфейсами, які позбавляють від необхідності передавати файли з використанням командного рядка Unix. Більш того, в більшості випадків функції FTP вбудовані безпосередньо в WYSIWYG HTML-редактори, такі як GoLive Cyberstudio, Claris HomePage і Dreamweaver. Ha комп'ютерах Macintosh досить популярні спеціальні програми, які здійснюють передачу файлів методом перетягування. На PC є чимало простих програм FTP, таких як WS__FTP і AceFTP.

Браузери Netscape Navigator і Internet Explorer також функціонують як прості FTP-клієнти, надаючи можливість як завантажувати, так і вивантажувати файли, використовуючи інтерфейс "drag-and-drop".

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

1. Запуск програми FTP, з'єднання з сервером. Потрібно ввести точне ім'я сервера, реєстраційне ім'я та пароль.

2. Знаходимо каталог, в який потрібно скопіювати файли. Можна також створити новий каталог або видалити існуючі файли і каталоги на сервері, використовуючи засоби управління FTP-програми.

3. Задаємо режим передачі. Головне під час передачі - вирішити, чи передавати дані в двійковому або ASCII-режимі. ASCII-файли складаються з буквено-цифрових символів. Деякі FTP-програми розглядають файли ASCII як "текстові". Документи HTML слід передавати як ASCII або текст.

Двійкові файли складаються з компільованих даних (одиниць і нулів), їх прикладами є виконувані програми, зображення, фільми і т.д. Деякі програми розглядають двійковий режим як "необроблені дані" ("raw data") або "зображення" ("Image"). Всі графічні (. Gif або. Jpeg) і мультимедійні файли повинні передаватися як виконавчі або "Raw Data". У Fetch (MacOS) ви можете виявити параметр MacBinary, який передає файл повністю, разом з гілкою ресурсів (частина файлу, що містить піктограми робочого столу і інші специфічні для комп'ютера Маcintosh дані). Цей варіант слід використовувати тільки при передачі з одного комп'ютера Маcintosh на інший. Гілка ресурсів відділяється від мультимедійних файлів, створених на комп'ютерах Маcintosh, при передачі в двійковому режимі.

Деякі FTP-програми мають також параметр Auto, який дозволяє вам передавати повністю весь каталог, що містить файли обох типів. Програма перевіряє кожний файл і визначає, чи слід передавати його в текстовому або двійковому режимі. Ця функція не у всіх програмах надійна на 100%, тому треба використовувати її з обережністю, поки не буде впевненості, що результат правильний.

4. Передача файлів на сервер. Стандартний протокол FTP використовує терміни "помістити" ("put") для позначення передачі файлів з ​​комп'ютера користувача на сервер і "отримати" ("get") для позначення завантаження файлу з сервера на комп'ютер, тому вони можуть використовуватися і в програмі FTP. Одночасно можна завантажувати декілька файлів.

5. Роз'єднання. Коли передача закінчена, зв'язок з сервером завершується. Перед цим можна протестувати передані в браузер файли, щоб переконатися, що передача пройшла вдало.

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

Деякі FTP-програми дозволяють встановлювати право доступу за замовчуванням у діалоговому вікні. Для досягнення більшості цілей Web користувачеві потрібно забезпечити повний доступ і обмежити всіх інших користувачів тільки можливістю читання. Може знадобитися згода адміністратора сервера з такими установками.

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

Система для повідомлення мультимедійних типів файлів дуже нагадує MIME (Multipurpose Internet Mail Extension, багатоцільові розширення поштової служби в Інтернеті), яка була спочатку розроблена для вкладень в листи електронної пошти. Щоб успішно повідомляти тип файлу браузеру, потрібно щоб сервер був налаштований на розпізнавання будь-якого MIME-типу. Якщо потрібно доставляти дані, що виходять за рамки стандартних HTML-файлів та зображень (наприклад, відео Shockwave Flash або аудіофайли), слід уточнити у адміністратора сервера, чи здатний сервер підтримувати цей MIME-тип. Більшість поширених форматів вбудовані в поточні версії програмного забезпечення сервера. Якщо ні, то адміністратор може легко їх встановити, слід лише надати йому необхідну інформацію.

Точний синтаксис для конфігурування MIME-типів варіюється в різних серверних програмах. Тим не менш, всім потрібна одна і та ж базова інформація: тип, підтип і розширення. Типи - це найбільш загальні категорії файлів. Вони включають текст, зображення, аудіо, відео, додаток і т.д. У кожній категорії є ряд підтипів. Наприклад, файловий тип image (зображення) включає підтипи gif, jpeg і т.д. Розширення файлу використовується сервером для визначення типу файлу і його підтипу. Не всі розширення стандартизовані.

Розділ 2. Основні правила та етапи створення сайту

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

Всі передбачити неможливо, але на початковому етапі можна дотримуватися наступних правил:

- Якщо розробляється сайт наукового або академічного змісту, особливу увагу слід звернути на те, як сайт працює в Lynx (або в іншому неграфіческій браузері);

- Якщо сайт призначений для споживачів - наприклад, сайт, який пропонує навчальні іграшки для дітей, - увага звертається на швидкість завантаження і зовнішній вигляд сайту для AOL-браузерів;

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

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

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

2.1 Роль дисплеїв при створенні сайтів

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

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

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

Монітори, якщо вони кольорові, розрізняються за кількістю відтворюваних кольорів. Це ще один чинник, який впливає на рішення розробника. Монітори зазвичай відтворюють 24-раз-рядні (16,77 млн. кольорів), 16-розрядні (65 536 кольорів) або 8-розрядні (256 кольорів).

Кольори, отримані в "істинному", 24-розрядному просторі квітів будуть спотворюватися (виводитися з плямами і цятками) при обробці браузерами на 8-розрядних дисплеях.

Існує, однак, набір з 216 кольорів, складений з квітів системних палітр МасOS і Windows, який не буде спотворюватися на 8-розрядних дисплеях. Одна з назв цього безлічі квітів - Web-палітра (Web Palette). Багато дизайнерів вважають за краще користуватися цією палітрою при створенні Web-графіки та елементів HTML, так щоб сторінка виглядала однаково для всіх користувачів.

Якщо орієнтуватися на користувачів з монохромними або півтоновими (Gray Scale) дисплеями, то необхідно застосування висококонтрастною графіки. Коли кольору конвертуються в безліч відтінків сірого кольору (або змішуються з чорними і білими пікселями), має значення тільки яскравість кольорів. Уявіть собі пурпуровий текст на темно-сіро-зеленому фоні. Хоча це кольори контрастних тонів, із загальної яскравості вони досить близькі, так що текст стає неможливим при перегляді на напівтоновому дисплеї.

Стандартні розміри і дозволу дисплеїв

Першим кроком при визначенні ймовірного розміру вашої Web-сторінки має стати визначення максимального простору, що забезпечується дисплеєм. Комп'ютерні дисплеї мають різні стандартні розміри і зазвичай вимірюються в дюймах. Можна навести деякі типові розміри дисплеїв - 14 ", 15", 17 ", 19" і 21 ".

Більш значущою характеристикою є дозвіл дисплея - загальне число пікселів (picture 's element - елемент картинки) на екрані. Чим вище дозвіл, тим більш детальним може бути зображення. Знаючи можливе число пікселів, ви можете створювати відповідно до нього зображення (також вимірювані в пікселях) і елементи сторінки.

Важливо пам'ятати, що чим вище дозвіл на даному дисплеї, тим більше пікселів спресований в наявному просторі екрану. У результаті пікселі стають менше і відповідно зменшуються зображення та інші елементи сторінки.

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

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

Тепер Web призначений не тільки для персональних комп'ютерів. Web-браузери впевнено входять в житлові кімнати, портфелі і машини у вигляді WebTV, кишенькових PDA-пристроїв і навіть стільникових телефонів. З незвично малими розмірами їх дисплеїв пов'язані нові турботи дизайнерів.

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

Як пристрій відображення WebTV використовує телевізор. Робочий простір WebTV становить 544x378 пікселів. Браузер дозволяє вертикально перегортати сторінки, але не має горизонтального прокручування, так що більш широка графіка буде частково невидима і недоступна. Принципи дизайну, що відповідає стандартам телебачення, полягають в тому, щоб створювати світлий текст на темному тлі, а не навпаки, а також не використовувати елементи шириною менше 2 пікселів.

Зростаюча популярність Web в сукупності з розширюється використанням кишенькових пристроїв зв'язку, таких як кишенькові комп'ютери, PDA і мобільні телефони, призвела до того, що Web-браузери стиснулися неймовірно малих розмірів. Багато хто з цих пристроїв для відображення змісту сайту використовують браузери типу "тонкий" клієнт (thin client) - клієнт-термінал. Цей вид браузера працює з мінімальними вимогами до процесору на стороні клієнта, залишаючи весь величезний обсяг роботи сервера.

Наприклад, браузер HitchHiker спеціально розроблений для роботи на монохромному квадратному дисплеї стільникового телефону зі стороною 2 дюйми. Браузер ProxiWeb являє собою приклад іншого клієнта, який забезпечує доступ до популярного PDA PalmPilot (а також до IBM WorkPad і новому Palm III). Він працює з використанням проксі-сервера, який обробляє Web-сторінки, призначені для відображення на портативних пристроях. ProxiWeb навіть перетворює графіку в монохромні бітові карти, так що до деякої міри зберігається первинний вигляд сторінки (це найбільш корисно для графічних заголовків).

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

2.2 Вибір структури Web-сторінки

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

Вимоги до Web-сторінці

Величезна кількість джерел з web-дизайну пропонують велику кількість правил і порад щодо створення та оформлення web-сторінок.

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

Необхідно пам'ятати:

- 5-7 пунктів меню - це межа для гарного сприйняття міститься в меню інформації;

- Оптимальне використання не більше 30-40 кбайт графіки на сторінку;

- Дизайн першої сторінки хоч трохи, але повинен відрізняться від усіх інших сторінок;

- Рядки, що біжать краще не використовувати або використовувати, але вкрай рідко. Тому, що від них тільки очі болять, але якщо в цьому є особлива необхідність, то не слід навантажувати рядок великою кількістю інформації;

- У web-сторінках використовуються лише формати JPG, JPEG і GIF;

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

- Необхідно розбивати велику кількість інформації;

- Іменувати, створені сторінки слід англійською мовою;

- Необхідно позбавлятися від горизонтальних прокручувань екрану;

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

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

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

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

- Не використовуйте на сайті текст, набраний заголовними буквами;

- Найбільше небажано - це використання при створенні сайту фреймів;

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

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

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

Переваги:

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

- Заповнений весь простір дисплея, відсутня небажане вільне місце, наявність якого часто планується розробниками сторінок з фіксованими розмірами;

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

Недоліки:

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

- На великих дисплеях елементи будуть розташовані на екрані досить гармонійно, на маленьких дисплеях вони виявляються скупченими;

- Результати гнучкого дизайну непередбачувані, і сторінка в різних користувачів буде виглядати по-різному.

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

Переваги:

- Сторінка буде виглядати однаково незалежно від розмірів дисплея. Це особливо важливо для компаній, які прагнуть представити свій імідж однаково для всіх відвідувачів;

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

Недоліки:

- Якщо розмір даного вікна браузера менше сітки сторінки, частини сторінки не буде видно і може знадобитися горизонтальна прокрутка. Вона майже завжди сприймається як перешкода, що ускладнює роботу, тому в більшості випадків її треба уникати. Одне з рішень - вибрати розмір сторінки, який підійде більшості;

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

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

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

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

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

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

Стратегія розробки

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

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

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

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

Більшість дизайнерів вважають за краще йти на компроміс. У дизайнерських колах поширена фраза про Web-сторінках, які "витончено деградують" ("degrade gracefully"), що означає використання новітніх технологій, подібних DHTML або JavaScript, таким чином, щоб забезпечувати функціонування сторінки і на більш ранніх версіях браузерах.

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

Ще більш один підхід - автоматичний запуск версії, відповідної типу браузера, який робить запит. JavaScript може задавати дії залежно від використовуваного браузера. Крім того, сторінки можуть бути скомпоновані в процесі роботи для конкретного браузера серверними включеннями (Server Side Includes).

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

- Website Garage;

- Net Mechanic;

- Doctor HTML.

Перевірка з використанням редакторів HTML. Бази даних сумісності браузерів і засоби перевірки HTML починають прокладати шлях до авторського інструментарію HTML. Так, GoLive Cyberstudio надає повну базу всіх тегів HTML, а також інформацію про їх підтримку браузерами. Ще більш корисно засіб "Check Target Browsers" інструмента Macromedia Dreamweaver. Автори ставлять типи браузерів, для яких вони розробляють сайт (Netscape 2.0, 3.0 та 4.0 і Internet Explorer 2.0, 3.0, 4.0, 5.0), a Dreamweaver перевіряє, чи всі теги і атрибути підтримуються обраними браузерами.

2.3 Огляд і порівняльний аналіз HTML-редакторів

Macromedia Flash

Кожен вибирає свій інструмент для створення Web-сторінок. Це може бути MS FrontPage або Macromedia DreamWeaver, Allaire HomeSite або 1 st Page 2000. А хтось користується простим текстовим редактором, наприклад Блокнотом (Notepad). Текстові редактори, можливо, використовувати тільки для створення невеликих сторінок, тому що в них є багато мінусів: не підтримуються проекти, відсутня «підсвічування» тексту, в загальному, працювати з ними може тільки професіонал, що знає мову HTML.

Розглянемо візуальний HTML-редактор DreamWeaver. Цей програмний продукт розрахований на тих, хто погано, або майже не знає мову HTML, хоча в ньому можна створювати сайти навіть не володіючи даними знаннями. DreamWeaver містить все, що необхідно як для візуальної компонування web-сторінок, так і для роботи з HTML- кодом. Інтуїтивний інтерфейс DreamWeaver настільки простий, що навіть початківець дизайнер зможе швидко створити професійний Web-сайт. Безпосередньо в Dreamweaver можна створювати анімації у форматі Macromedia Flash, використовувати дані з Microsoft Office, легко імпортувати rollover-графіком, меню і кнопки з Fireworks. Компанія Macromedia вважається лідером з виробництва програм для створення веб-сайтів, а також законодавцем моди в цій області. Останнім часом вона почала випускати версію за версією даного продукту, тим самим все, більш удосконалюючи його. DreamWeaver-3, -4, -6 і це ще не межа. Причому в кожній новій версії додається все більше і більше функціональних можливостей, не по одній і не по дві, а мало не десятками. Багато розроблювачів Web-сайтів вважають DreamWeaver найбільш зручним HTML-редактором як для початківців Web-дизайнерів, так і для досвідчених програмістів.

Одна з останніх версій HTML-редактора компанії Macromedia-DreamWeaver 9, який відноситься до категорії WYSIWYG-редакторів (т.е.What You See Is What You Get), і цей пакет має дуже багато переваг: зручний інтерфейс, настроювання функцій, підтримка великих проектів та багато іншого. Для роботи в цій програмі не потрібно досконально знати HTML (у цьому і спрощується перевага технології WYSIWYG - що бачу, то і отримую).

DreamWeaver на кілька кроків випереджає інші редактори, що використовують технологію WYSIWYG, в першу чергу тим, що генерує дуже чистий HTML-код. DreamWeaver дозволяє позбутися від однотипної роботи при створенні сторінок (наприклад, верстка тексту) за допомогою використання опції «запис послідовності команд» ви можете записувати послідовність вироблених вами команд, потім натискаєте, наприклад, CTRL + P, і DreamWeaver відтворює все в тій же послідовності.

Macromedia DreamWeaver - професійний редактор HTML для візуального створення і управління сайтами різної складності і сторінками мережі Internet. Чи подобається вам вручну писати код HTML або ви віддаєте перевагу працювати у візуальному середовищі, DreamWeaver полегшує цю роботу і забезпечує корисними інструментами і засобами, щоб зробити свої власні проекти неперевершеними. DreamWeaver включає в себе багато інструментів і засобів для редагування та створення професійного сайту: HTML, CSS, JavaScript, редактори коду (перегляд коду та інспектор коду), що дозволяє вам, редагувати різні текстові документи, які підтримуються в DreamWeaver. Також ви можете налаштувати DreamWeaver, щоб він наводив порядок і переформатував HTML, як ви цього хочете.

Можливість візуального редагування в DreamWeaver також дозволяє швидко створювати або змінювати дизайн проекту без написання коду. DreamWeaver відноситься до так званих «візуальним» редакторам, тобто ви відразу можете бачити на екрані (хоча б приблизно) результат своєї роботи. При цьому він поширює повний доступ до джерела коду і не вставляє в нього нічого зайвого, як це робить, наприклад, FrontPage. Таким чином, можна створювати свою сторінку і паралельно вивчати HTML, заглядаючи в джерело. Можна на живому прикладі переконатися, що HTML - це просто. Простота поводження з редактором DreamWeaver полягає в тому, що можливо розглянути всі централізовані елементи і перетягнути їх із зручною панелі безпосередньо в документ.

DreamWeaver повністю настроюється. Можна використовувати DreamWeaver, щоб створювати свої власні об'єкти і команди, змінювати «гарячі» клавіші і розширювати можливості DreamWeaver новими властивостями, інспекторами властивостей і новими звітами про сайт.

Можливо, чи розмістити сторінку, яка містить пристойну кількість анімації, звуку і дивних способів інтерактивності в файл порядку 100 Кбайт? Зробити так, щоб ця сторінка працювала однаково як у Netscape Navigator, так і в Internet Explorer? Компанія Macromedia вирішила більшість проблем сумісності і продуктивності, випустивши Flash, який до сьогоднішнього дня вельми еволюціонував і є повноцінною частиною інструментів-технік Web-дизайну.

Коротко і ясно про те, що це таке. Існують plug - in 'и (Plug-in), які вбудовуються в браузер, і служать для перегляду Flash сторінок. Називаються вони Flash Player. Причому в останніх версіях Netscape Navigator і Internet Explorer ці модулі вже вбудовані (якщо немає, то їх можна безкоштовно завантажити з сайту Macromedia). І існує програма Flash, за допомогою якої ці сторінки створюються.

На користь Flash наведу його основні переваги і статистку використання Macromedia професійними розробниками:

- Маленький розмір виходять файлів і, відповідно, більш швидке завантаження з мережі. Flash використовує векторний формат зображень і стискає растрові і звукові файли, (які також можуть використовуватися в сторінках Flash), що дуже позитивно впливає на зменшення розміру сторінки і час її скачування;

- Усунення проблем сумісності між браузерами. На відміну від HTML, Flash однаково працює як в Internet Explorer, так і в Netscape Navigator. Є навіть спеціальний варіант примочки-програвача для браузерів, що підтримують Java (Flash Java Player);

- Потужний подієво-керований мову. У Macromedia Flash використовується спеціальна мова, за допомогою якого можна створювати «інтелект» для своєї сторінки. Причому якщо в Flash 4 це був, швидше, якийсь скрипт (script), що має всього кілька основних функцій, то в Flash 5 (незважаючи на назву «ActionScript») - це майже повноцінна мова програмування, за підтримкою умов, циклів, масивів, функцій і класів, які можна успадковувати;

- Flash має автоматичну підтримку anti - aliasing (згладжування контурів за допомогою змішування сусідніх кольорів). У результаті навіть проста лінія або кружечок, намальовані в Flash, виглядають приємно для очей. Що ж тут говорити про малюнки, намальованих професіоналами;

- Створювати сторінки в Flash під силу навіть дитині, і, зізнаюся, це вельми приємне заняття. А якщо володіти елементарними навичками дизайну та малювання, відкривається весь простір для Вашої фантазії, що надається Flash.

- Flash потихеньку стає стандартом де-факто. У випадках, де необхідна широка інтерактивність, графіка, звук, і маленький розмір, Flash незамінний.

На сьогоднішній день Flash Player використовують 222 млн людей, і кожен день його викачує ще 1.4 мільйона. За даними Macromedia це дозволяє 90% користувачам Мережі переглядати сторінки з Flash вмістом.

Модулі поширюються безкоштовно, в той час як за програму створення Flash файлів доводиться платити. Остання, 5-а версія продукту коштує $ 399. Користувачам старих версій це задоволення дістанеться за $ 149.

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

Тут робиться основний акцент на нестандартні інтерфейси.

«Нестандартні» інтерфейси мають ряд відмінностей від «стандартних» (під «стандартними» маються на увазі звичні інтерфейси HTML):

1. Спеціальні керуючі об'єкти (кнопки, панелі, блоки). Для прикладу, рулетка в Microsoft Word - нестандартний об'єкт. Її практично неможливо реалізувати в HTML, тільки зображення, але не інтерактивну функціональність.

2. Незалежне розміщення об'єктів, іншими словами, не розміщення об'єктів щодо один одного, а розташування за координатами і рівням. У DHTML така можливість існує, але в DHTML надійно реалізувати можна тільки зовсім прості речі.

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

У результаті такої «нестандартність» з'являється повна свобода у створенні інтерактивного інтерфейсу, більш зручного, більш наочного, більш функціонального. Це реально підвищує рівень сервісу. А значить, досягається «customer satisfaction» (задоволення вимог клієнта), і, в кінцевому підсумку, система стає більш конкурентоспроможною.

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

Розробники, що спробували програмувати в середовищі Flash 5, підтвердять мої слова: Flash - вже не просто технологія для створення анімаційних роликів. Іншими словами, Flash став, застосуємо для створення інтерактивних додатків.

Коли слід використовувати Macromedia Flash? Чи є сенс використовувати Flash 5 там, де він ніколи не використовувався? Адже «несть числа» всіляких мов програмування, що описує клієнтську частину. А Flash, до того ж, - один із самих повільних.

Для цього важливо зрозуміти, що існує дві принципові умови застосування Flash:

1. Потрібно акуратно вибирати область застосування Flash за межами анімації.

2. Цим інструментом треба вміти грамотно користуватися.

З першою умовою досить просто: Flash потрібен там, де нестандартний інтерфейс дає багато нових можливостей, де потрібна інтерактивність, де не підходить «спартанська» зовнішність. При збігу всіх цих вимог має сенс задуматися про використання Flash 5 як інструмент для побудови системи.

Чим визначається «грамотність» застосування Flash 5? Необхідно визначитися, які переваги використання саме Flash в конкретному проекті, і з якими «підводними каменями» доведеться зіткнутися.

Основні плюси програмування в середовищі Flash 5 - у процесі розробки:

1. Майже кожна акуратно запрограмована функція відразу очевидно корисна в багатьох місцях.

2. Можлива побудова універсального сервера.

3. Легко переноситься частина логіки з серверної на клієнтську частину.

4. Свобода у верстці і в наборі control-елементів (кнопок, меню, списків, таблиць).

Однак, є і недоліки, що-то працює не кращим чином, а тому, якщо в системі важливі певні компоненти, Flash використовувати поки недоцільно. Ось список тих компонентів, які на даний момент «не дружать» з Flash:

1. Складні математичні операції на клієнтської частини.

2. Робота з дуже складними структурами даних на клієнтської частини.

3. Дрібні тексти, написані російською мовою, через проблеми з кодуванням.

4. Веб-сайти з надскладною бізнес - логікою, що вимагають миттєвого завантаження.

5. Механізми, що вимагають роботи з файловою системою клієнта або його пристроями (наприклад, Web-камерою або мікрофоном).

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

1. Кешування растрированною векторів.

2. Підтримка Unicode.

3. Удосконалення механізму успадкування об'єктів.

4. Впровадження методів проектної / командної роботи.

5. Налагодження Performance and Memory-Use на XML, Math / Data Functions.

6. Остаточний поділ програмування та дизайну.

Це не так багато, різниця між Flash 4 і Flash 5 набагато більше, ніж ці зміни. Звичайно, і після цього Flash не треба буде застосовувати скрізь - він все одно залишиться для «своєї» області.

Продуктивність, підтримка кодувань - ці питання вже скоро будуть вирішені. Інструмент буде більш чітко розділений, а концепція мови скоригована. Зрозуміло, Flash 6 як і раніше буде підтримувати розроблені на Flash 5 продукти.

Багато описані проблеми вирішуються вже сьогодні:

1. Проблема з текстом вирішується підвантаженням шрифту, як зовнішньої бібліотеки. Він стає чітким і швидким. Єдине, його треба довантажити один раз - 30 Кбайт.

2. Проблеми в розробці вирішуються шляхом чіткого структурування, як даних, так і графіки.

3. Застосування об'єктно-орієнтованих підходів у програмуванні дозволяє усунути складність з псевдо-багатопоточність.

4. Спеціалізовані мітки дозволяють працювати навіть з невидимими символами.

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

HTML-редактор FrontPage

Одним з перших редакторів є FrontPage. Редактор входить в програмний пакет MS Office. Цей програмний продукт спрощує роботу з HTML-мовою.

Microsoft FrontPage покликаний полегшити вам завдання гідно представити себе у WWW або створити Web-сайт для мережі intranet вашої організації. FrontPage, органічно вписується в пакет додатків Microsoft Office, став першим продуктом широкого використання для Internet, що поєднує в собі клієнтську і серверну частини і забезпечує можливість розробки сайту в цілому і встановлення його на більшість популярних серверів. Якщо ви хочете створити свій Web-сайт, але з програмуванням знайомі лише з чуток, не турбуйтеся - FrontPage здатний взяти на себе всю необхідну роботу з програмування. Однак FrontPage стане досить серйозним помічником і для професійних розробників, що віддають перевагу тримати в руках повний контроль над творчим процесом.

FrontPage поставляється з декількома додатковими утилітами, разом складовими так званий FrontPage Bonus Pack.

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

У клієнт - серверних системах, сервер - це комп'ютер (або додаток), що забезпечує віддаленим користувачам доступ по мережі до своїх даних або ресурсів. Клієнт - це комп'ютер (або додаток), який запитує ці дані або ресурси. Найчастіше сервер - потужна машина, а клієнт - звичайний настільний комп'ютер. Припустимо, наприклад, що всі рахунки, виставлені компанією Cascade Coffee Roasters, зберігаються в базі даних на сервері. У клієнт-серверної платіжній системі ви вводите інформацію на комп'ютері-клієнті, а заповнивши рахунок, зберігаєте інформацію на сервері, централізовано. Таким чином, ви можете підключити до сервера необмежену кількість клієнтських комп'ютерів, і всі вони будуть мати доступ до одних і тих же даних.

FrontPage працює аналогічним чином, фактично він включає і сервер, і клієнта. Його клієнтське програмне забезпечення складається з Провідника (FrontPage Explorer) і редактора (FrontPage Editor). Провідник дозволяє переглядати і адмініструвати сайти кількома різними способами. Для створення нових сторінок і редагування існуючих призначений Редактор.

Для серверної сторони FrontPage можна використовувати FrontPage Personal Web Server або Microsoft Personal Web Server під управлінням Windows 95, Windows 98 або Windows NT Workstation. При установці на Windows NT Server FrontPage автоматично визначає наявність Microsoft Internet Information Server (IIS), і якщо він встановлений, то надалі з ним і працює. Ви можете встановити один з персональних Web-серверів на комп'ютер в локальній (Local Area Network, LAN) або глобальною (Wide Area Network, WAN) мережі на базі TCP / IP і тим самим перетворити цю мережу в intranet. Ви навіть можете розмістити персональний Web-сервер на тому ж комп'ютері, на якому встановлено клієнтське забезпечення. Редагувати сторінки вашого сайту і створювати нові ви можете на будь-якому клієнтському комп'ютері, підключеному до сервера - навіть якщо вони знаходяться в протилежних точках земної кулі.

До складу FrontPage також входять Серверні розширення (FrontPage Server Extensions), що забезпечують інтеграцію FrontPage з усіма найбільш популярними Web-серверами. Якщо у вашій організації вже є якісний Web-сервер, то серверні розширення допоможуть гладко вирішити проблеми взаємодії між ним і FrontPage.

У складу Microsoft Office входять Microsoft Word, Excel, PowerPoint і Access. Microsoft Office - це самий популярний сьогодні на ринку пакет офісних додатків. Потужність Office в створенні інформаційного наповнення у поєднанні із засобами управління сайтом і засобами генерації сторінок FrontPage дає вам у руки неперевершені можливості конструювання Web-сайтів. Ось лише кілька аспектів їх тісної взаємодії:

- Документи Office у всіх режимах огляду сайту в Провіднику FrontPage позначаються тими ж значками, що і в провіднику Windows.

- Можливості FrontPage з перевірки та відновленню посилань поширюються на будь-які розташовані на вашому сайті документи Office, які містять посилання

- Матеріал з файлів Office дуже просто перенести в Web-сторінки FrontPage. Наприклад, робочі листи Excel можна частково або повністю скопіювати в редакторі на вашу сторінку за допомогою буфера обміну (Clipboard) або механізму drag - and - drop, і FrontPage автоматично перетворює їх в таблицю HTML

- Ви можете перетягувати документи Office з Провідника Windows в Провідник FrontPage, і ці документи будуть автоматично імпортуватися в ваш сайт

Основним недоліком MS FrontPage, як я вже згадував, є те, що він генерує дуже великий HTML-код (занадто багато зайвого), тому сторінки виходять великими, що позначається на швидкості завантаження. Більш того, при створенні Web-сторінок в цьому редакторі бачиш одне, а у вікні браузера - зовсім інше (особливо це стосується Netscape Navigator). Тому для створення якісних Web-сторінок рекомендується використовувати пакет Macromedia Dream W eaver.

Розділ 3. Оцінка економічної доцільності використання HTML-редакторів

У даному розділі я хотів би розглянути питання про доцільність і економічності використання HTML-редакторів, на прикладі Macromedia Dreamweaver і MS Front Page.

Для початку виберемо ціни і системні вимоги, щоб скласти необхідну конфігурацію комп'ютера.

На сьогоднішній день ціна HTML-редактора і повного пакета прикладних програм для Macromedia Dreamweaver 8.0 RU становить 274,96 грн, а ціна MS Front Page 2003 становить 255 грн.

Будь-яка програма не може працювати без операційної системи. В даний час найбільш поширеною операційною системою є Windows XP Professional. Дана операційна система найбільш оптимізована для роботи з прикладними програмами, має зручний інтерфейс. На даний момент єдиною гідною ОС, здатної конкурувати з ХР, є Windows Vista. Але на даному етапі свого розвитку Vista ще не встигла заслужити довіри серед користувачів. Причиною тому є недолік програмного забезпечення для неї, наявність великих системних вимог, а також численні недоробки.

Таблиця 3.1 - Вартість операційної системи

Операційна система

Вартість, грн.

Windows XP Home Edition Russian SP2

208.54

Windows XP Professional Russian SP3

390.31

Windows Vista Ultimate Russian SP1

1680.00

Windows Vista Ultimate English SP1

1564.00

Таблиця 3.2 - Системні вимоги HTML-редакторів


Macromedia DreamWeaver 8

MS Front Page 2003

Процесор

Чи не менше 800 МГц Intel Pentium III процесор (або еквівалентний)

Pentium 133 МГц або вище, рекомендований Pentium III

RAM

128 MB RAM (256 MB бажано, 1 Гб рекомендовано для роботи більше, ніж з одним продуктом Studio 8 одночасно)

16 Мб оперативної пам'яті (рекомендується 32 Мб)

HD

доступний дисковий простір 650 Мб.

165 Мбайт вільного місця на диску, 115 Мбайт на диску, на якому встановлена ​​ОС

CD-ROM

Ні

Так

Дисплей

1024x768, 16-біт відеорежим (32-біта рекомендовано), 256 кольорів

Super VGA (800Ѕ600) і вище, 256 кольорів

ОС

Windows 98 SE, Windows 2000, Windows XP або Windows Server TM 2003.

Windows 98 SE, Windows 2000, Windows XP або Windows ServerTM 2003.

Периферія

Миша Microsoft Mouse, Microsoft IntelliMouse або сумісний пристрій

Миша Microsoft Mouse, Microsoft IntelliMouse або сумісний пристрій

Рекомендовані: комп'ютер, що працює під управлінням Microsoft Windows XP Professional на базі Pentium III і 256 Мбайт RAM

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

Таблиця 3.3 - Мінімальні вимоги і витрати

Товар

Опис

Ціна

Процесор

Intel Celeron 2000/128 Socket 478 BOX

199,00 грн

Материнська плата

SOLTEK SL -85 DRV -5: Socket 478, VIA P 4 X 266 E + VT 8235, ATX, 3 DDR 266, FSB 533/400 MHz, UATA / 133, AGP 4 x

256,00 грн

RAM

DDR 128 Mb, 333 MHz

77,22 грн

Відео-адаптер

PCI-E: ATI X550 SAPPHIRE 128MB/128bit/TV/DVI

192,00 грн

Жорсткий диск

IDE 80.0g 7200 ATA100 Samsung 2Mb

70,00 грн

CD-ROM

CD-ROM LG 52 х (Black)

65,00 грн

Корпус

ATX Midi Tower Storm 2202-LX, P4 PSU 300W

152,20 грн

Клавіатура

PS / 2 SVEN Slim 300

13,67 грн

Миша

SVEN L-30 PS / 2, Scroll

8,30 грн

Монітор

17 "SAMTRON 76 E

570,00 грн

Разом:

1603,39 ГНР.

Визначимо конфігурацію комп'ютера для роботи з HTML-редакторами з розрахунку на мінімальні системні вимоги.

Таблиця 3.4 - Співвідношення ціни і продуктивності

Товар

Опис

Ціна

Процесор

Pentium Dual-Core E2180 2.0ГГц (800МГц, 1MB, Conroe, S775) BOX

417,00 грн

Материнська плата

ASUS P5B SE (LGA775, P965, PCI-E, 4xDDR-II (800), 1xIDE, 5xSATA-II, 3xPCI, ATX)

392,00 грн

RAM

DDR II 1024Mb, 800MHz Hynix

165,00 грн

Продовження таблиці 3.4

Відео-адаптер

PCI-E: GEFORCE-PCX 8500GT Sonic DirectX 10 / 256MB DDR3 (128bit) + TV XPERTVISION

422,00 грн

Жорсткий диск

IDE 160.0g 7200 ATA133 Samsung 8Mb

319,00 грн

CD-ROM

DVD-RW / + RW LG Black

153,00 грн

Корпус

ATX Midle Tower ASUS TA-891, 350W

248,00 грн

Клавіатура

PS / 2 A-4 Tech KB-28G Game Master

52,00 грн

Миша

A-4 Tech X710 OPTICAL PS / лютий 1000 dpi

72,00 грн

Монітор

17 "SAMSUNG 794 MB

689,00 грн

Разом:

2929 грн.

А тепер визначимо оптимальний варіант для роботи з HTML-редакторами та іншим програмним забезпеченням.

Таблиця 3.5 - Найкраща продуктивність

Товар

Опис

Ціна

Процесор

Pentium Dual-Core E2200 2.2 Ггц (800 Мгц, 1MB, Conroe, S775) BOX

489 грн

Материнська плата

ASUS P5K SE (Socket775/P35/PCI-E + GbLAN/SATA/U133/ATX/4DDR-II/PC-6400)

525 грн

RAM

DDR II 2 x 2048 Mb, 800 MHz TEAM алюмінієвий радіатор, Retail

480 грн

Відео-адаптер

PCI-E: GEFORCE-PCX 8800GTS DirectX 10 / 512MB DDR3 (256bit) + TV LEADTEK

2040 грн

Жорсткий диск

SATA II 250.0g 7200 WD 16 Mb (2500AAKS)

345 грн

CD-ROM

DVD-RW / + RW LG LightScribe

228 грн

Корпус

ATX Midle Tower Microlab M4810 Silver 420W

284 грн

Клавіатура

PS / 2 SVEN 733 Multimedia

32,80 грн

Миша

A-4 Tech SWOP-48UP OPTICAL 800 dpi PS / 2

34 грн

Монітор

CRT 19 "LG SW900B

757 грн

Разом:

5214,8 грн

Виходячи з отриманих даних для нормальної роботи з HTML-редакторами я рекомендую використовувати конфігурацію ПК, наведену в таблиці 3.4. Дана конфігурація економічна з боку матеріальних витрат і придатна для оптимальної роботи з цим програмним забезпеченням.

Розділ 4. Норми і вимоги охорони праці на робочому місці оператора комп'ютерного набору

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

Типова інструкція з охорони праці при роботі з персональними комп'ютерами встановлює загальні вимоги безпеки для працівників, які використовують у роботі персональні комп'ютери (далі - ПК).

4.1 Загальні положення

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

Жінки з часу встановлення вагітності та в період годування грудьми до виконання всіх видів робіт, пов'язаних з використанням ПК, не допускаються. Л іца, не молодше 18 років, що пройшли обов'язковий при прийомі на роботу та щорічні медичні огляди на предмет придатності для роботи на ЕОМ і ПЕОМ.

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

При роботі з ПК на працівників можуть впливати наступні небезпечні та шкідливі виробничі фактори:

- Підвищений рівень електромагнітних випромінювань;

- Підвищений рівень іонізуючих випромінювань;

- Підвищений рівень статичної електрики;

- Підвищена напруженість електростатичного поля;

- Підвищена або знижена іонізація повітря;

- Підвищена яскравість світла;

- Прямий і відбитий блискіт;

- Підвищене значення напруги в електричному ланцюзі, замикання якого може відбутися через тіло людини;

- Статичні перевантаження кістково-м'язового апарату і динамічні локальні перевантаження м'язів кистей рук;

- Перенапруження зорового аналізатора;

- Розумова перенапруга;

- Емоційні перевантаження;

- Монотонність праці.

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

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

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

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

Щоб забезпечувалося зручність зорового спостереження, швидке і точне зчитування інформації, площина екрана монітора розташовується нижче рівня очей працівника переважно перпендикулярно до нормальної лінії погляду працівника (нормальна лінія погляду - 15 град. Вниз від горизонталі).

Для виключення впливу підвищених рівнів електромагнітних

випромінювань відстань між екраном монітора і працівником повинна становити не менше 500 мм (оптимальне 600 - 700 мм).

Застосовувані рухливі підставки для документів (пюпітри) розміщуються в одній площині і на одній висоті з екраном.

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

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

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

Для зниження яскравості в полі зору при природному освітленні застосовуються регульовані жалюзі, щільні штори.

Світильники загального та місцевого освітлення повинні створювати нормальні умови освітленості і відповідний контраст між екраном і навколишнім оточенням з урахуванням виду роботи та вимог видимості з боку працівника. Освітленість на поверхні столу в зоні розміщення робочого документу повинна становити 300 - 500 люкс.

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

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

Для забезпечення безпеки працівників на сусідніх робочих місцях, відстань між робочими столами з моніторами (у напрямі тилу поверхні одного монітора й екрана іншого монітора) повинно бути не менше 2,0 м, а відстань між бічними поверхнями моніторів - не менше 1,2 м.

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

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

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

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

При роботі з ПК працівники зобов'язані:

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

- Виконувати вимоги пожежної безпеки, знати порядок дій у разі пожежі, вміти застосовувати первинні засоби пожежогасіння;

- Курити тільки в спеціально призначених для куріння місцях;

- Знати прийоми надання першої допомоги при нещасних випадках на виробництві;

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

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

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

4.2 Вимоги безпеки під час експлуатації ЕОМ

Перед початком роботи з ПК працівник зобов'язаний:

- Провітріть приміщення;

перевірити:

- Стійкість положення устаткування на робочому столі;

- Відсутність видимих ​​пошкоджень обладнання, дискет у дисководі системного блоку;

- Справність і цілісність живлять і сполучних кабелів, роз'ємів і штепсельних з'єднань, захисного заземлення (занулення);

- Справність меблів;

відрегулювати:

- Положення столу, стільця (крісла), підставки для ніг, клавіатури, екрана монітора;

- Освітленість на робочому місці. При необхідності включити місцеве освітлення;

- Протерти поверхню екрану монітора, захисного фільтра (при його наявності) сухою м'якою тканинною серветкою;

- Переконатися у відсутності відображень на екрані монітора, зустрічного світлового потоку;

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

Забороняється приступати до роботи при:

- Вираженому тремтіння зображення на моніторі;

- Виявленні несправності обладнання;

- Наявності пошкоджених кабелів або проводів, роз'ємів, штепсельних з'єднань;

- Відсутності або несправності захисного заземлення (занулення) обладнання.

4.3 Вимоги безпеки під час роботи

Під час роботи з ПК працівник зобов'язаний:

- Дотримуватися вимог охорони праці;

- Тримати в порядку і чистоті своє робоче місце;

- Тримати відкритими вентиляційні отвори обладнання;

- Дотримуватися оптимальну відстань від екрану монітора до очей.

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

Оператору і користувачеві ПК під час роботи забороняється:

- Торкатися одночасно екрану монітора і корпусу комп'ютера або клавіатури;

- Доторкатися до задньої панелі системного блоку комп'ютера при включеному живленні;

- Перемикати роз'єми інтерфейсних кабелів периферійних пристроїв

при включеному живленні;

- Виконувати перезавантаження комп'ютера;

- Самостійно розкривати і ремонтувати комп'ютерів;

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

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

Тривалість безперервної роботи з ПК без регламентованого перерви не повинна перевищувати 2 годин.

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

Працівникам з високим рівнем напруженості праці під час регламентованих перерв і в кінці робочого дня показана психологічне розвантаження у спеціально обладнаних кімнатах психологічного розвантаження.

З метою зменшення негативного впливу монотонності необхідно застосовувати чергування операцій.

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

4.4 Вимоги безпеки в аварійних ситуаціях

Оператор і користувач ПК зобов'язаний:

- У всіх випадках виявлення обриву проводів електроживлення, несправності заземлення та інших пошкоджень обладнання негайно вимкнути живлення комп'ютера і повідомити керівника;

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

- При будь-яких випадках збоїв у роботі комп'ютерного обладнання та програмного забезпечення негайно повідомити керівника;

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

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

- У випадку загоряння обладнання відключити харчування і вжити заходів до гасіння вогнища пожежі за допомогою вогнегасника, викликати пожежну команду і повідомити керівника.

4.5 Вимоги безпеки після закінчення роботи

Після закінчення робіт оператор і користувач ПК зобов'язаний:

- Коректно закрити всі активні завдання;

- При наявності дискети в дисководі витягти її;

- Вимкнути живлення системного блоку;

- Вимкнути живлення всіх периферійних пристроїв;

- Відключити блок безперебійного живлення;

- Відключити кабель живлення від мережі;

- Оглянути і привести в порядок робоче місце;

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

технічне обслуговування обладнання;

- При необхідності вимити з милом руки.

У даному розділі були розглянуті основні положення і норми охорони праці, необхідні для роботи оператору комп'ютерного набору.

Висновки

У представленій дипломній роботі мною була розглянута тема «Створення Web-сайту».

У ході теоретичного аналізу мною було встановлено, що найбільш зручно для створення сайту користуватися html-редактором Macromedia Dreamweaver, тому що він має такі можливості:

  • не володіючи знаннями HTML, легко створити сучасний сайт;

  • зручний, інтуїтивний інтерфейс;

  • підтримка великих проектів;

  • генерує дуже чистий HTML-код;

  • володіє вбудованими HTML, CSS, JavaScript, PHP, «візуальним» редакторами коду (перегляд коду та інспектор коду);

  • вставка і обробка різних об'єктів;

  • маленький розмір згенерованих файлів і, відповідно, більш швидке завантаження з мережі.

Були розглянуті стратегії розробки сучасного Web-сайту та основні вимоги до оформлення.

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

Перелік посилань

  1. Франклін Д. «Flash 4.Анімація в Інтернеті»

  2. Малекс М. «Flash. Теорія і практика »

  3. Грибов К. П. «Macromedia Flash 4.Для дизайнерів»

  4. Леонтьєв В.П. «Web-дизайн. Керівництво користувача »

  5. Карпов Б., Жданов А. «Dreamweaver 4. Короткий курс »2001 Пітер.

  6. Крамер Р. «HTML: наочний курс Web-дизайну»

  7. Нідерст М.В. «Web-мастеринг для професіоналів. Настільний довідник »

  8. Альонова Наталя «Html для чайників» (http://postroika.ru)

  9. www.km.ru

  10. www.rambler.ru

  11. www.yandex.ru

  12. www.referats.ru

  13. www.bankreferatov.ru

  14. www.stydenty.ru

  15. www.bankreferatov.ru

  16. www.ireferat.ru

  17. www.kursach.by

  18. www.education.kulichki.net

  19. www.rosdiplom.ru

  20. www.websitegarage.com

Посилання (links):
  • http://postroika.ru/
  • http://www.km.ru/
  • http://www.rambler.ru/
  • http://www.yandex.ru/
  • http://www.referats.ru/
  • http://www.bankreferatov.ru/
  • http://www.stydenty.ru/
  • http://www.ireferat.ru/
  • http://www.education.kulichki.net/
  • http://www.rosdiplom.ru/
  • http://www.websitegarage.com/
  • Додати в блог або на сайт

    Цей текст може містити помилки.

    Програмування, комп'ютери, інформатика і кібернетика | Диплом
    314.6кб. | скачати


    Схожі роботи:
    Створення web-сайту Богородського Благочинія
    Створення web сайту Богородського Благочинія
    Створення Web сайту на мові html
    Загальні відомості про HTML принципи створення Web-сайту
    Створення структурованого Web-сайту на тему Інтернет та засоби масової комунікації
    Методика і технологія розробки web-сайту освітнього закладу на прикладі сайту соціально-гуманітарного
    Web-Дизайн і програми для створення web-сторінок
    Процес розробки Web-сайту
    Дослідження відвідуваності WEB сайту
    © Усі права захищені
    написати до нас