ОДЕСЬКИЙ НАЦІОНАЛЬНИЙ ІНСТИТУТ
ДЕРЖАВНОГО УПРАВЛІННЯ
УКРАЇНСЬКА АКАДЕМІЯ
ДЕРЖАВНОГО УПРАВЛІННЯ
ПРИ ПРЕЗИДЕНТОВІ
УКРАЇНИ
РЕФЕРАТ
по комп'ютерних мережах
Тема:
"Порівняльна характеристика інструментів для Web-дизайну"
Виконала: студентка 2-го курсу
МО
21-А групи
Крюкова К.М.
Одеса - 2004р.
Алгоритм пошуку
Для пошуку реферата "Порівняльна характеристика інструментів для Web -дизайну "я скористалася наступним пошуковим серверомhttp://www.yandex.ru
Потім у вікно пошуку ввела запит "Реферати" щоб отримати посилання напошук рефератів з даної теми.
Вибрала одне посилання Bankreferatov.ru з пропонованих по зазначеній теміі відкрила її в іншому вікні.
На його початковій сторінці знаходяться поля введення запиту, і кнопка для початкупошуку рефератів.
Сформулювавши запит пошуку що дана мені темі, ввела в поле вводуключові слова "web-дизайн", далі натиснула кнопку пошуку. У новому вікнівідобразилися теми контрольної роботи на мою заданому запиту. Вибравши найбільшвідповідний реферат, знайшла ще декілька інформаційних програм.
Я відкрила попередній пошук запиту "Реферати" і відкрила наступне посилання
Referats.ru. Тут також у вікні пошуку ввела запит "Web-дизайн". У вікнівідобразилося три посилання на різні сайти з комп'ютерних систем ітехнологіями. Вибравши перше посилання і відкривши її в новому вікні відбивсявеличезний список рефератів з даної теми. Для того, щоб полегшити собіпошук, у вікно введення запиту вводжу ключові слова "Web-дизайн", встановившинижче вікна пошуку галочку шукати в знайденому. Скопіювала кількарефератів з даної теми, а потім редагуючи попередній знайденийреферат доповнила його більш різноманітною інформацією. На цьому припинила свійпошук реферату, тому що вважаю, що необхідна кількість інформації поданої теми вже зібрано.
«Порівняльна характеристика інструментів Web-дизайну»
План:
1. Вступ (4-5)
2. Що таке Web-дизайн? (5-6)
3. Створення Web-сторінок за допомогою мови HTML (6)
4. Програми для створення Web-сторінок (7-8)
5. Створення Web-сторінок за допомогою Macromedia DreamWeaver (8-33)
6. Висновки (34)
7. Список сайтів інформація, з яких було використано при написанні курсової роботи (35)
1. Вступ
Internet - це найбільша світова комп'ютерна мережа. Тепер Internetмає приблизно 150 мільйонів користувачів більш ніж в 50 країнах.
WWW доступний в основному через Internet; але кажучи WWW і Internet мимаємо не одне і те ж. WWW можна віднести до внутрішнього змісту,тобто це якийсь абстрактний мир знань, в той час як Internetє зовнішньою стороною глобальної мережі у вигляді величезної кількостікабелів і комп'ютерів.
World Wide Web - глобальна комп'ютерна мережа на сьогоднімістить мільйони веб-сайтів, на яких розміщена будь-яка інформація.
Люди отримують доступ до цієї інформації за допомогою використання технології
Internet. Для навігації в WWW використовуються спеціальні програми - Web -браузери, які істотно полегшують подорож по безкрайніх просторах
WWW. Вся інформація в Web-браузері відображається у вигляді Web-сторінок, якіє основним елементом сайтів WWW.
Web-сторінки, підтримуючи технологію мультимедіа, об'єднують в собірізні види інформації: текст, графіку, звук, анімацію і відео. Від того,наскільки якісно і гарно зроблена та чи інша Web-сторінка, залежитьбагато в чому її успіх у Мережі.
Користувачеві приємно відвідувати ті Web-сторінки, які мають стильнеоформлення, не обтяжені надмірно графікою і анімацією, швидко завантажуютьсяі правильно відображаються у вікні Web-браузера.
Створити Web-сторінку непросто, але мабуть кожна людина хотіла бспробувати себе в ролі дизайнера. І я, в даному випадку, не євинятком, тому і вибрала таку тему для свого реферату, в якому язробила спробу розібратися в тому, що необхідно знати і вміти длястворення Web-сторінки, яке програмне забезпечення єінструментарієм створення Web-сторінок і як його ефективно використовувати.
Так що ж таке World Wide Web, або, як кажуть в просторіччі, WWW,the Web, або ще простіше - 3W? WWW - це розподіленаінформаційна система мультимедіа, заснована на гіпертексті. Давайтерозберемо це визначення по порядку.
Розподілена інформаційна система: інформація зберігається навеличезній безлічі так званих WWW-серверів (servers). Тобтокомп'ютерів, на яких встановлене спеціальне програмне забезпечення тащо об'єднані в мережу Internet. Користувачі, які мають доступ домережі, отримують цю інформацію за допомогою програм-клієнтів, програмперегляду WWW-документів. При цьому програма перегляду посилає покомп'ютерній мережі запит серверу, що зберігає файл з необхіднимдокументом. У відповідь на запит сервер висилає програмі перегляду цейнеобхідний файл або повідомлення про відмову, якщо файл по тих або іншихпричинах недоступний. Взаємодія клієнт-сервер відбувається запевними правилами, або, як кажуть інакше, протоколу. Протокол,прийнятий в WWW, називається HyperText Transfer Protocol, скорочено - HTTP.
Мультимедіа: інформація включає в себе не тільки текст, але і двох-ітривимірну графіку, відео та звук.
Гіпертекст: інформація в WWW представляється у вигляді документів, кожний зяких може містити як внутрішні перехресні посилання, так і посилання наінші документи, що зберігаються на тому ж самому або на будь-якому іншомусервер.
Такі посилання називають гіперпосиланнями або гіперзв'язками. На екранікомп'ютера у вікні програми перегляду посилання виглядають як виділені яким -небудь чином (наприклад, іншим кольором і/або підкресленням) дільницітексту або графіки. Вибираючи гіперпосилання, користувач програми переглядуможе швидко переміщатися від однієї частини документа до іншої, або ж відодного документа до іншого. При необхідності програма переглядуавтоматично зв'язується з відповідним сервером в мережі і запитуєдокумент, на який зроблене посилання. До речі, ідея гіпертекстовогопредставлення інформації повинна вже бути добре знайома користувачамрізних версій системи Microsoft Windows. Саме за цим принципомпобудована в Windows система підказок (Help), з тією лише різницею, щогіпертекстова система підказок Windows не є розподіленою.
Отже, Web-сторінка може містити стилізований і форматованого текст,графіку і гіперзв'язки з різними ресурсами Internet. Щоб реалізувати всіці можливості, був розроблений спеціальна мова, названа HyperText
Markup Language (HTML), тобто, Мова Розмітки Гіпертексту. Документ,написаний на HTML, являє собою текстовий файл, який міститьвласне текст, несучий інформацію читачеві, і прапори розмітки. Останніявляють собою певні послідовності символів, якіє інструкціями для програми перегляду; відповідно до цихінструкціями програма розташовує текст на екрані, включає в ньогомалюнки, що зберігаються в окремих графічних файлах, і формуєгіперзв'язки з іншими документами або ресурсами Internet. Таким чином,файл на мові HTML набуває вигляд WWW-документа тільки тоді, коли вінінтерпретується програмою перегляду. Про мову HTML буде детальнорозказано в наступному розділі, оскільки без знання основ цієї мовинеможливо створити Web-сторінку для публікації в WWW.
2. Що таке web-дизайн?
Web-дизайн - це насамперед творчість, у якому тебе ніхто необмежує. Тільки в цій сфері ви можете повністю показати себе, необмежуючись, ні в змісті, ні в обсязі. Якщо наприклад братикореспондентів і журналістів. Вони написали матеріал, довго трудилися, іподали його редактору, а редактор взяв і викинув статтю, посилаючись на те,що вони написали кілька слів про знаменитого "шахрая", який займаєвисокий пост у місцевій Думі. А вам надаються всі можливості, длятого, щоб писати, малювати і т.д. Потім вивісити це все на сайті і нехайвсе милуються.
Але в основному web-дизайн означає вміння красиво оформити web-сторінку насайті. Якщо ви написали кілька слів, на звичайному default'ном тлі, це недизайн.
Навіщо це потрібно?
Причини, з яких люди вирішують підготувати й опублікувати у Всесвітніймережі власний web-ресурс, можуть бути абсолютно різними. Якщо мовайде про домашній сторінці, то основним рушійним фатором для web-майстрає прагнення розмістити в мережі інформацію, яку згодомможна використовувати при пошуку роботи або інтерактивному спілкуванні з іншимилюдьми за допомогою Інтернету. Іноді домашня сторінка служить засобомдля публікації, наприклад літературних творів, малюнків, музики, абонаукових досліджень автора. Таким способом власник сторінки може знайтивидавця для своїх розповідей, організаторів виставки для своїх картин,продюсера для музичного проекту або спонсора, готового фінансувати йогорозробки. У ряді випадків за допомогою домашньої сторінки можна простозаробляти гроші.
3. Створення Web-сторінки за допомогою мови HTML
Web-сторінки можуть існувати в будь-якому форматі, але в якостістандарту прийнятий Hyper Text Markup Language - мова розмітки гіпертекстів,призначений для створення форматованого тексту, насиченогозображеннями, звуком, анімацією, відео та гіпертекстовими посиланнямина інші документи, розкидані як по всьому Web-простору, так іщо знаходяться на цьому ж сервері або є складовою частиною цього ж Веб -проекту.
Можна працювати на Web без знання мови HTML, оскільки тексти HTMLможуть створюватися різними спеціальними редакторами і конвертерами. Алеписати безпосередньо на HTML неважко. Можливо, це навіть легше, ніжвивчати HTML-редактор або конвертер, які часто обмежені в своїхможливостях, містять помилки або проводять поганий HTML код, який непрацює на різних платформах.
Мова HTML існує в декількох варіантах і продовжує розвиватися,але конструкції HTML швидше за все будуть використовуватися і надалі.
Вивчаючи HTML і пізнаючи його глибше, створюючи документ на початку вивчення HTMLі розширюючи його наскільки це можливо, ми маємо можливість створювати Web -сторінки, які можуть бути переглянуті багатьма броузерами Web, якзараз, так і в майбутньому. Це не виключає можливості використання іншихметодів, наприклад, метод розширених можливостей, що надається
Netscape Navigator, Internet Explorer або деякими іншими програмами.
Робота по HTML - це спосіб засвоїти особливості створення документів встандартизований мові, використовуючи розширення, тільки якщо цедійсно необхідно.
HTML був ратифікований World Wide Web Consortium. Він підтримуєтьсядекількома широко поширеними броузерами, і, можливо, станеосновою майже всього програмного забезпечення, яке має відношення до
Web.
4. Програми для створення Web-сторінок
4.1 HTML-редактори
Кожен вибирає свій інструмент для створення Web-сторінок. Це можебути MS FrontPage або Macromedia DreamWeaver, Allaire HomeSite або 1st Page
2000. А хтось користується простим текстовим редактором, наприклад Блокнотом
(Notepad).
Текстові редактори можливо використовувати тільки для створення невеликихстраниц, тому що у них є багато мінусів: не підтримуються проекти,відсутній "підсвічування" тексту ..., загалом, працювати вкрай незручно.
MS FrontPage
Основним недоліком MS FrontPage є те, що він генерує дужевеликий HTML-код (занадто багато зайвого), тому сторінки виходятьвеликими, що позначається на швидкості завантаження. Більш того, при створенні
Web-сторінок в цьому редакторі бачиш одне, а у вікні браузера - зовсім інше
(особливо це стосується Netscape Navigator). Сторінки виходять якимиськривими, тому для створення якісних Web-сторінок рекомендуєтьсявикористовувати пакунки, які будуть розглянуті нижче.
Macromedia DreamWeaver.
Почнемо ми з популярного Macromedia DreamWeaver. Компанія Macromediaвважається лідером по виробництву програм для створення веб-сайтів, а такожзаконодавцем моди в цій області. Остання версія HTML-редактора цієїкомпанії - DreamWeaver 3, який відноситься до категорії WYSIWYG-редакторів,і цей пакет має дуже багато переваг: зручний інтерфейс, настройкафункцій, підтримка великих проектів і ShockWave технологій, можливістьзавантаження файлів через FTP, підтримка SSI і багато іншого. Для роботи в ційпрограмі не потрібно знати досконально HTML (у цьому і полягаєперевага технології WYSIWYG - що бачу, то і отримую).
Але DreamWeaver на декілька кроків випереджає інші редактори,використовують технологію WYSIWYG, в першу чергу тим, що генерує дужечистий HTML-код. DreamWeaver дозволяє вам позбавитися від однотипної роботипри створенні сторінок (наприклад, верстка тексту) за допомогою використанняопції "запис послідовності команд" ви записуєте послідовністьвироблених вами команд, потім натискаєте, наприклад, CTRL + P, і DreamWeaverвідтворює всі в тій же послідовності.
HomeSite 4
Наступний редактор - HomeSite 4 - для створення сторінок вручну, тобтодля знавців HTML. Ви отримуєте повний контроль над HTML-кодом, причомуіснує можливість оптимізувати свою сторінку під один з трьохпопулярних браузерів (MSIE, NN, Opera).
HomeSite містить два основні режими: Edit і Design. Режим Design --це подібність WYSIWYG-редактора, яка видає HTML-код, причому, якщо ви завантажиличужий HTML-код, то HomeSite все перепише по-своєму. Режим Edit дозволяєотримати повний контроль над сторінкою. Тут ви можете налаштуватипрактично все, зможете прописати функції кожного тега (тоді вашасторінка в будь-якому браузері буде виглядати однаково).
Ще одна відмінна особливість HomeSite - це його «склеювання» з
Dreamweaver. HomeSite володіє кнопкою «Dreamweaver», а також входить до йогостандартний пакет поставки. Втім, і DreamWeaver має можливістьпідключення HomeSite, як редактора для коректіровкі HTML-коду.
EVR Soft 1st Page 2000 v2
Одним з останніх HTML-редакторів є EVR Soft 1st Page 2000 v2. < p> Його гасло - "Create 1st class websites!" ( "Створюйте першокласнівеб-сайти! "). Редактор має кілька режимів - Normal, Easy,
Advanced/Expert і Hardcore, тобто ви можете вибрати свій рівень, а зчасом перейти на більш високий. Ще одна особливість - досить великаколекція скриптів на JavaScript та DHTML. Все це досить зручно розбитоза категоріями.
5. Macromedia DreamWeaver
5.1. Інтерфейс даного пакета
Ідея даного опису проста - ми будемо поступово будувати сайт
(наприклад, домашню сторінку). При цьому я постараюся пройтися по всіхможливостям DreamWeaver. Розкажу де і чим краще за все користуватися.
Почнемо ми з самого простого - з інтерфейсу пакета.
Так виглядає зовнішній вигляд DreamWeaver 3 після його встановлення і завантаження.
Основні панелі я виділила і підписала.
Почнемо розбір інтерфейсу з панелі "палітра об'єктів" - палітри, за допомогоюякої ми поміщаємо практично всі зовнішню (не стосується тексту)інформацію на нашу сторінку. Ця палітра має декілька різних варіантів,які можуть бути відкриті за допомогою меню, що випадає у верхній частині
"палітри об'єктів".
| | За замовчуванням завжди стоїть палітра common objects (основні об'єкти). У неї |
| | Включено практично все що вам потрібно (зліва-навправо, зверху-вниз): |
| | Image (картинка) - вставляє на сторінку графічний елемент |
| | Rollover Image (перекатиш) - вставляє на сторінку конструкцію, яка |
| | Імітує анімовану кнопку (кнопку змінює свій вигляд при наведенні на |
| | Неї) |
| | Table (таблиця) - вставляє на сторінку таблицю |
| | Tabular data (табличні дані) - вставляє готову з таблицю з готовими |
| | Даними (наприклад з Exel) |
| | Horizontal Rule (лінійка) - вставляє декоративний елемент - лінійку (зазвичай |
| | Використовується як розділювач абзаців) |
| | Navifgation Bar - вставляє навігаційну панель складається з декількох |
| | Кнопок |
| | Draw Layer (намалювати шар) - вставляє на сторінку шар (як в PhotoShop) |
| | |
| | Line Break (варіант переносу) - вставляє на сторінку (у тексті) м'який |
| | Перенесення |
| | E-mail Link (сслика на електронну пошту) - вставляє на сторінку посилання на |
| | Електронна адреса |
| | Date (дата) - вставка в документ поточної дати (можна з оновлення) |
| | Flash - вставляє флеш-анімацію в сторінку |
| | ShockWave - вставляє Shockwave-анімацію |
| | Generator - вставляє заготовку Generator |
| | FireWorks - вставляє об'єкт FireWorks |
| | Applet - вставляє ява-аплет |
| | ActiveX - вставляє ActiveX |
| | Plugin - вставляє об'єкт, що програється плагіном |
| | SSI - вставляє інклюд (підключається зовнішній HTML файл) |
| | Палітра Invisibles возволяет додавати у вихідний код сторінки: |
| | Закладку |
| | Коментарі |
| | Ява-скрипти |
| | Нерозривні пробіли |
| | Палітра head допомагає нам додавати різні опису та властивості сторінки, |
| | Такі як: |
| | Мета-теги |
| | Ключові слова |
| | Опису сторінки |
| | Встановлювати параметри оновленняя сторінки |
| | Вказувати основне посилання (посилання за замовчуванням) |
| | Вказувати посилання |
| | Палітра Frames (фрейми) допоможе зробити одним натисканням на кнопку складну |
| | Фреймової структури. Детальніше про фреймах і їх застосуванні пізніше. |
| | Палітра forms (форми) служить для візуального створення форм (того, що ви |
| | Досить часто заповнюєте на різних сайтах). Вона складається з об'єктів: |
| | Form - сама форма |
| | Text field - текстове поле |
| | Button - кнопка |
| | Checkbox - чекбокс (це де ви галочку на виборах ставите) |
| | Radio button - радіобаттон, забезпечує вибір одного з варіантів |
| | List/menu - робить список, що випадає або меню |
| | Filefield - форма для завантаження файлів |
| | Imagefield - поле картинки |
| | Hidden filed - прихована поле |
| | Jump menu - для переходу по кліку на іншу сторінку |
| | Палітра спеціальних символів допоможе вам просто і легко додати на свою |
| | Сторінку знак копірайту, зареєстрованої торгової марки, ієни та багато чого |
| | Іншого. Достатньо просто натиснути на потрібну кнопку. |
5.2. Діалогові вікна
При натисканні на кожну кнопку виникають різного роду діалоги, що виникаютьпри додаванні об'єктів з "палітри об'єктів" в полі документа.
Більша частина цих діалогів, наприклад таких як: вставка картинки,горизонтальної лінійки, м'якого переносу, флеш, shockwave, generator,plugin, activeX, java applet і server-side include взагалі не вимагаютьпояснень, тому що або не містять ніяких діалогових вікон, або зводятьсядо вказівкою потрібного файлу на свій диск.
Почнемо зі вставки rollover image (картинки-перекатиша). В основному,подібні об'єкти використовуються для різних навігаційних елементів насайті.
У вікні діалогу є чотири основні поля. Зверху-вниз це:
. image name - назва зображення (використовується java-скриптом, для поділу різних об'єктів даного типу на сторінці). Ніколи не робіть назви однаковими!
. original image - тут ви вказуєте розташування файлу з картинкою
"по-замовчуванню", тобто тієї картинкою яка буде відображатися на початку.
. rollover image - а тут вказується файл картинки, яка буде з'являтися при наведенні на наш об'єкт мишки (підпункт Preload
Rollover image рекомендую залишати включеним, тому що ні що не виглядає так страшно, як поява при наведення мишки на подібний об'єкт порожній картинки)
. go to url - тут потрібно написати посилання, по якому піде користувач при натисканні на наш об'єкт.
Ось і все. Після натискання на кнопку OK ви отримаєте готову кнопку, ненаписав жодного рядка коду.
Наступний об'єкт - Insert Table (вставити таблицю). Таблиці у побудовісайтів використовуються не тільки як в якому-небудь Word-е або Excel-е, а іяк модульні сітки (власне такий собі каркас, на якому як на павутинітримаються всі об'єкти сторінки).
Що потрібно вказати в даному випадку:
. Rows - кількість рядів таблиці
. Columns - кількість колонок
. Cell padding - відстань від межі осередку до об'єктів всередині її
. Cell Spacing - відстань між кордонами сусідніх комірок
. Width - ширина таблиці (в пікселях або у відсотках)
. Border - товщина бордюру між осередками таблиці
Теж не складно. Всі заповнили, вказали і отримали готову таблицю.
Об'єкт Tabular Data з'явився тільки в третій версії і являє собою дужезручний інтерфейс для вставки зовнішніх табличних даних в Dreamweaver.
Наприклад прайсів з Excel.
Зазначаємо:
. data file - вихідний файл
. delimiter - тип роздільник колонок (з декількома варіантами)
. Table width - ширину таблиці (по ширині даних або вказуємо своє значення)
. Cell padding - відстань від межі осередку до об'єктів всередині її
. Cell Spacing - відстань між кордонами сусідніх комірок
. Format Top Row - виділення або невиділення шапки таблиці
. Border - товщина бордюру між осередками таблиці
Все. Після цього ваш (заздалегідь підготовлений) файл з даними постанеперед вами в DreamWeaver.
Navigation Bar - цей об'єкт побив усі рекорди за кількістю полів якіпотрібно заповнити. Його потрібно розглядати як деякий дуже навороченийінструмент для створення навігаційних панелей на сайтах.
Заповнюємо:
. за допомогою кнопок "+" і "-" ми можемо додавати або видаляти елементи
(кнопки) навігаційної панелі
. element name - назва поточної кнопки, ніколи не робіть імена однаковими, найкраще давати їм імена самих кнопок (home, link, next, prev і т.д.)
. Up image - вказуємо файл із картинкою для стану кнопки "по-замовчуванню"
. Over Image - вказуємо файл із картинкою для стану кнопки при наведенні на неї мишки
. Down Image - вказуємо файл із картинкою для натиснутою кнопки
. Over While Down - вказуємо файл із картинкою для стану кнопки натиснута + на неї наведена мишка (важко уявити собі іншу ситуацію):)
. go to url - посилання на яку буде зроблений перехід (при цьому вкажіть де вона буде відкрита)
. Preload Images - рекомендую залишити включеним
. Show "Down image" initialy - за умовчанням показувати кнопку натиснутою
. Insert - вид панелі (горизонтальна або вертикальна)
. Use tables - використовувати таблиці
Якщо ви все це заповніть і зробите - то в результаті у вас буде нормальнаробоча навігаційна панель без написання навіть рядки коду.
Вставка посилання на електронну адресу. Тим хто трохи знає HTML вжевідомо, що для вставки подібної посилання досить написати:e-mail.
Вставлення поточної дати - дуже зручна річ. Досить вказати формат дати,часу і, якщо необхідно, вказати пункт Update Automatically on Save
(автоматично оновлювати при збереженні).
5.3. Структура сайту
Перш ніж взагалі братися за виготовлення сайту, треба чітко уявитисобі його структуру, розміщення основних матеріалів по каталогах. Щобпотім просто не заплутатися в цих матеріалах. У нашому випадку структурабуде гранично проста:
У кореневому каталозі ми розмістимо наші веб-сторінки (. Htm-файли), в каталозі
Images - зображення (фотографії, елементи дизайну і багато чого іншого) і вкаталозі CSS - Cascading Style.
5.4. Початок створення сайту
Після того, як велика частина матеріалів готова, можна приступати достворення сайту в DreamWeaver. Для цього потрібно зайти в меню edit і вибратипункт preferences.
Зверніть увагу на кнопку Define Sites (визначити сайти). Ось вона то намі потрібна. Сміливо натискайте її.
Після натискання ви побачите ось таке меню:
Вибираємо кнопочку New і починаємо заповнювати "анкету" нашого сайту. Анкетаскладається з п'яти розділів:
Почнемо з перших. Заповнюємо:
. Site name (назва сайту) - лобое зручний для вас назва (я написав
- моя домашня сторінка)
. Local Root Folder (локальний кореневий каталог) - власне наш каталог test (див. картинку на початку статті).
. Залишаємо як є галочку навпроти Refresh Local File List
Automatically
. Обов'язково включаємо пункт Cache [] Use Cache to Speed Link Updates - стане в нагоді якщо ми почнемо змінювати посилання (швидше буде)
Тепер другий
:
У ній ми налаштовуємо параметри доступу до віддаленого серверу (місцем, куди мибудемо наші файли викладати):
. Server Access - доступ до сервера (варіанти none - ні, FTP - по FTP,
Local/Network - по локальній мережі
. FTP Host - адреса сервера, на який будуть викладатися файли , наприклад ftp.cdrom.com
. Host Directory - каталог на сервері, будьте уважні, коли заповнюєте цей пункт, якщо ваш каталог набраний великими літерами, то вам теж потрібно вказувати його назва великими літерами, крім того шлях ви вказуєте від кореня, тобто рядок може виглядати так: users/design/ace
. Login - ім'я користувача, під яким ви заходите на сайт
. Password - пароль користувача, під яким ви заходите на сайт. Пипко save вмикайте тільки в тому випадку, якщо ви користуєтеся цим комп'ютером одна. Інакше ваш пароль доступу легко дістається з registry
(він там у відкритому вигляді зберігається) < p>. Use Passive FTP і Use Firewall - настройки які необхідні в конкретних випадках. Наприклад Use Firewall необхідно вказувати, якщо ви ходите через проксі-сервер. Якщо ви працюєте по модему - ці налаштування вас не хвилюють.
Перейдемо до третього закладці:
Якщо ви працюєте над проектом разом з іншими користувачами DreamWeaver,то доцільно налаштувати даний пункт (тобто включити галочку поруч із
Enable File Check In and Check Out і вказати своє ім'я в полі Check Out
Name). Просто при таких налаштуваннях ваші колеги завжди будуть бачити зайнятийЧи дане зображення вами в даний час (редагуєте ви його) і не зможутьсамі взяти його на редагування (і тим самим знищити плоди вашогопраці). Для тих хто працює один цей пункт не цікавий.
Четверта закладка:
Вона налаштовує зовнішній вигляд панелі Site Map (саме зовнішній, фізично наструктуру сайту або його файли ці налаштування ніякого впливу ненадають). Установки прості - вказуємо:
. Home Page - початкову сторінку сайту
. Numper of Columns, Column Width - кількість колонок та їх розмір
(ширину)
. Icon Labels - що використовувати як підписів під значками - назви файлів або назви сторінок
. Options - додаткові параметри - показувати чи ні приховані файли і показувати чи ні залежні файли.
Ну і, нарешті, остання - п'ята закладка:
Вона теж більшою мірою має значення при груповій роботі, ніж прироботі поодинці. Установки прості - зберігати чи так звані Design
Notes (замітки, які можна додавати в файл при роботі з ним) ізакачувати їх на віддалений сервер. Крім того, можна видалити ці саміробочі нотатки, натиснувши на кнопку Clean Up.
Після всіх цих налаштувань можна сміливо натискати OK і одержувати готовийрезультат. Отже, якщо ви все зробили правильно, ви побачите ось такукартинку:
Це так званий Site Manager, у якому дуже зручно робити самірізні дії. Він розділений на дві колонки - ліва для файлів,що знаходяться на віддаленому сервері - права для локальний файлів. Крім того,ви можете бачити кілька кнопок:
. Connect - підключення до віддаленого серверу
. Refresh - оновлення списку фалів на віддаленому та локальному серверах
. Get - закачування виділеного файлу (каталогу, групи файлів) на локальний диск
. Put - протилежна операція - завантаження файлів, каталогів або груп фалів на віддалений сервер (зауважу, що при завантаженні файлу з підкаталогу CSS або будь-якого іншого, файл автоматично поміщається в той же каталог на віддаленому сервері - тобто теж опиниться в каталозі
CSS.
Ну от. Сайт створений і ми готові продовжувати.
5.5. Створення першої сторінки
Ну ось добралися і до створення першої сторінки (все правильно, адже сайтце не одна сторінка і навіть не два - сайт це ідея, концепція, якийсьцілісний проект).
. Logo - логотип нашої сторінки, якийсь помітний малюнок (візуал) і чи будь-який інший засіб залучення уваги
. Menu - головне меню сайту
. SubMenu - підменю поточного розділу
. Text - основне наповнення, контент
. Copyright - "підвальний" розділ для банерів, кнопок, копірайтів та іншої мішури
Крім того я відразу вказала основні розміри. Як бачите, я вирішила зробитиправий край нашої сторінки "гумовим" для того, щоб користувачі звеликими моніторами могли насолоджуватися своїми дозволами 1600х1200 ...
Почнемо створення всього цього в HTML.
Для початку увійдіть у свій сайт (просто виберіть його із списку) і створітьновий файл вибравши пункт New File. "А чому не New Window?" - Запитаєте ви.
Відповідаю - при відкритті нового вікна файл відразу не створюється (він створюєтьсятільки під час запису на диск), а всі посилання звичайно вказуються щодоположення файлу. Вам сподобаються посилання виду --d: vasyaworkimageslogo.gif? Мені немає, та й відображатися подібнаконструкція буде тільки навашей локальній машині. Так що вибираємо New
File і ніяких цвяхів!
Після вибору пункту New File на панелі справа (локальні файли) з'явитьсяфайл untitled.htm який варто відразу перейменувати в index.htm абоdefault.htm - так зазвичай вказується назва першої (головний) сторінкисайту
Подвійним клацанням відкриваємо створений файл і бачимо чистий білий аркуш (щоможе бути прекрасніше), на якому ми і будемо створювати нашу сторінку. Алеперед створенням таблиці та занесенням до неї наших елементів дизайну вартозадати основні властивості нашої сторінки (це важливо!). Для цього потрібнозайти в меню Modify і вибрати пункт Page Properties (або просто натиснути Ctrl
+ J).
Перед вами відкриється ось такий діалог. Що тут потрібно заповнити:
. Title - назва вашої сторінки (як воно буде відображатися в заголовку вікна браузера)
. Background Image - фоновий малюнок (у нашому випадку не використовуємо)
. Background - колір фону (в нашому випадку білий)
. Text - колір тексту (чорний)
. Links - колір посилань (темно-синій)
. Visited Links - колір відвіданих посилань (фіолетовий)
. Active Links - колір поточного активного посилання (темно-червоний)
. Left Margin, Margin Width - відступ від краю сторінки до початку контенту ліворуч (у нашому випадку 0)
. Top Margin, Margin Height - те ж, але зверху
. Document Encoding - кодування документа (будьте уважні, вказуйте правильну кодування)
. Tracing image - кладе на фон напівпрозору картинку з дизайном - зручно для точного поєднання дизайну в HTML з дизайном (начерком), зробленим в PhotoShop.
5.6. Створення таблиць
Ну, а ось тепер настав час зайнятися таблицями і іншим. Для початку зробітьтаблицю з параметрами як показано на малюнку ліворуч: 3 ряди, 2 колонки,відступи і бордюр по нулях, ширина таблиці 100%. Зауважте, що ці даніповністю збігаються з тим що ми планували на початку при розробцімодульної сітки.
Після натискання на OK ви отримаєте порожню таблицю, яку потрібнокоректувати і заповнювати нашими графічними елементами.
Перш за все виберіть першу комірку (просто клікніть всередину) і вставтекартинку з логотипом (My homepage).
Після цього виділіть колонку зліва (саму крайню). Після виділення вкажітьширину (Width) нашої колонки, яку ми визначили ще в модульній сітці -
247 Pix. Виконайте ту ж операцію з другої колонкою, тільки тепервкажіть ширину 100%.
Тепер займемося рядами. Для початку клацніть в будь-яку з комірок верхнього ряду.
Тепер подивіться в лівий нижній кут вікна DreamWeaver. Бачите список
? Цей список демонструє всі теги HTML, якіє більш "старшими" по відношенню до поточного тегу (тег це "команда"мови HTML, полягає в, може содежать відкриває та закриває тег
). Тобто показують якусь ієрархію документа. Але нам це поки недуже важливо, нам важливо те, що просто натиснувши на ми одразу отримуємовиділений ряд.
Давайте поставимо нашу верхнього ряду фон. Для цього знову зверніть своюувагу на нижню панель - властивості. Там є пункт Bg (background). Натиснувшина значок папки ви можете вказати файл, який буде грати роль фону. Унашому випадку це top_back.gif. Крім того те ж саме можна зробити натиснувшина перехресті поряд і потягнувши стрілочку вказати на панелі менеджментусайту потрібний файл (такий собі drag'n'drop). Якщо ви все зробили вірно, верхнійряд буде залитий за потрібне фоном.
На останок давайте отформатіруем ще нижній ряд. Для цього виділіть йогояк розповідалося раніше і виберіть пункт Bg. Ну от. Початок уже покладено.
5.7. Виготовлення меню
Виготовлення меню нашого сайту.
Для початку виберіть комірку таблиці (верхню праву) для якої ми відвелимісце під меню. У властивостях змініть горизонтальне і вертикальневирівнювання ліворуч і вниз відповідно (див. малюнок ліворуч).
Тепер напишіть текст складається з назв основних розділів і посилань наних.
Після написання тексту змініть у властивостях його форматування з none наparagraph. В HTML це означає закінчення тексту в тег.
Так, тепер виділяємо наше меню натисканням на букву в нижньому лівому кутівікна.
В панелі стилів просто обираємо наш стиль (menu). Ну ось, стиль на параграфтексту ми призначили. Можна перевірити як все це виглядає в браузері. Дляцього потрібно лише натиснути F12.
Для параграфа ми вкажемо конкретний шрифт (font), розмір (size) і колір
(color). Останнє залишимо як є.
Крім параграфа ми ще й парочку тегів a: link і a: hover змінимо. Ці міткивідповідають за зовнішній вигляд посилання в стандартному стані і в стані принаведеної на неї мишки.
Задамо колір посилань (білий) і при наведенні зробимо зміна Decoration зnone на underline.
Настав час вказати посилання на основні сторінки нашого сайту. Робиться цепросто - виділяєте потрібний текст (якщо це одне слово, то можна просто парураз клацнути по ньому мишкою) і пишете у властивостях сслилку.
Самих файлів у нас поки що (реально на диску) немає, по-цьому саме ми пишемопотрібні нам назви (а не шукаємо їх на диску).
Наша остання завдання - полегшити установку і зміна (за потребою)нашого меню. Її можна вирішити за допомогою зручного інструменту DreamWeaverпід назвою "бібліотека" (library). Де вона знаходиться ви бачите намалюнку ліворуч.
У вікні, що з'явилося вибираємо створити новий елемент (наше меню повинне бутицілком виділено!). Відразу ж вилітає попередження про те, що мизастосовуємо до елемента меню особливі стилі, і він може не відображатисякоректно на інших сторінках. Не лякайтеся, все гаразд, простонатисніть OK.
Все, залишилося тільки назвати наш елемент зручніше і при необходімостівставляти його у будь-який документ за допомогою кнопки Insert.
До речі, всі зміни, які ми будемо вносити в наш елемент будутьавтоматично вноситься у всі сторінки на яких він використовується.
5.8. Особливості форматування тексту в DreamWeaver
Після вказівки імені вашого стилю (або вибору стандартного стилю дляперепризначення) ви опиняєтеся в "настройках" стилю. Робиться тут вседосить просто, за змінами ви можете спостерігати в режимі realtime
(щоправда з деякими застереженнями).
На першій закладці ми визначаємо, як буде виглядати окрема букванашого тексту:
1. Зазначаємо шрифт, яким буде писатися текст. Зверніть увагу, що ви можете або вказати конкретний шрифт, хоч FreeSet, але немає шансів, що він є у користувача на машині (а якщо його немає - відображатися сторінка буде не так). Так що рекомендую користуватися конструкціями, пропонованими самим DreamWeaver - наприклад, Verdana,
Arial, Helvetica, sans-serif. У цьому випадку спочатку буде шукатися шрифт Verdana - не знайшли, тоді Arial, немає такого? Тоді Helvetica, ну а якщо і її немає - тоді будь-який шрифт без зарубок - гротеск.
2. Зазначаємо розмір шрифту - у порівнянні з можливостями HTML тут все просто здорово. Розмір можна вказати практично в чому завгодно, починаючи від% і закінчуючи пікселями та пунктами
3. Тут настроюється ступінь "ваги" букви або, простіше кажучи, його товщина. Варіантів як бачите теж чимало.
4. Стиль написання - похилий (італлік), стандартний (normal)
5. Варіації написання - наприклад, весь текст набраний тільки малими або тільки великими літерами
6. Висота базової лінії шрифту в пунктах, поінта або будь-яких інших величинах
7. Якими літерами ми користуємося - великими, маленькими або стандартно і тим і іншим
8. Різний декор - підкреслення, миготіння та інше
9. Колір тексту.
Зверніть увагу на пункти позначені *. На цьому і на інших панелях цязірочка означає, що даний варіант не відображається візуально в
DreamWeaver (тобто в браузері треба перевіряти)
На даній закладці ми виробляємо налаштування фону. Фона всієї сторінки аботільки заданого абзацу тексту - це вже як ви стиль вирішили створювати.
1. Колір фону (вибираєте варіант із стандартних 256 квітів або створюєте свій колір)
2. Файл з фоновим зображенням
3. Налаштування повторення (розмноження) фонового зображення по сторінці, наприклад, можна поставити, щоб зображення копіювалося тільки по осі X
4. Тут вказується як веде себе фонове зображення при прокручуванні сторінки - прокручується разом з нею або стоїть на місці
5. Вказівка горизонтальній позиції початку фону
6. Вказівка вертикальної позиції початку фону
Одразу зауважу, що пунктами 3 і 4 треба користуватися "з оглядкою" - тобтоперевіряти у всіх необхідних версіях браузерів на сумісність - інакше,може вийти розбіжність у відображенні ...
Пункт block служить для установки параметрів блоку тексту (тобто тут мовайде вже не про окремі літери як у пункті Type).
1. Налаштування відстані між словами
2. Налаштування межбуквенного відстані або трекінг
3. Вертикально
