Створення сайту - Дикі кішки
' w /> Створення сайту "Дикі кішки"
Опис роботи:
Текст роботи:
МОУ Гімназія №17
Сайт «Дикі кішки»
Атестаційна робота з інформатики та ІКТ
3. Створення Web-сторінки за допомогою мови HTML
Структура HTML документа
4. Зовнішній вигляд проекту
5. Особливості оформлення
7. Список використаної літератури
В даний час люди все частіше звертаються з різних причин до такого джерела інформації як Глобальна Комп'ютерна Мережа (World Wide Web).
World Wide Web - глобальна комп'ютерна мережа на сьогоднішній день містить мільйони сайтів, на яких розміщена різноманітна інформація. Люди отримують доступом до цієї інформації у вигляді використання технології Internet.
Інтернет став невіддільною частиною сучасної цивілізації. Стрімко вриваючись у сфери освіти, торгівлі, зв'язку, послуг, він породжує нові форми спілкування та навчання, комерції та розваг.
Internet - це найбільша світова комп'ютерна мережу. Наразі Internet має приблизно 150 мільйонів користувачів більш ніж у 50 країнах. WWW доступний переважно через Internet; Але кажучи WWW і Internet ми маємо на увазі не те саме. WWW можна віднести до внутрішнього змісту, тобто це якийсь абстрактний світ знань, тоді як Internet є зовнішньою стороною глобальної мережі як величезної кількості кабелів і комп'ютерів.
В даному рефераті я розглянула те, що являє собою Веб - сайт в цілому, а також докладно описала те, як і за допомогою яких засобів, додатків та програм я його створювала.
Тема, обрана мною для висвітлення у своєму проекті, на мійпогляд, дуже цікава. Багато людей, як і я, люблять диких кішок і дику природу взагалі, але, на жаль, нині чисельність таких красивих та цікавих видів як тигри, леви, леопарди та інші скорочується, тому в моїй роботі відображені не лише аспекти їхнього життя, їх зображення та типи поведінки, але так само описано те, яким чином слід захищати та охороняти цих прекрасних тварин.
Мені здається, що у моїй роботі найповніше відображені найцікавіші факти життя диких кішок. В Інтернеті є кілька сайтів подібного роду, але я спробувала зібрати максимально важливу і цікаву для читача інформацію для того, щоб при пошуку наприклад доповіді на тему «Чим харчуються рисі», користувач міг легко знайти те, що потрібно.
Так що ж таке World Wide Web, або, як кажуть у просторіччі, WWW, the Web? WWW – це розподілена інформаційна система мультимедіа, заснована на гіпертексті.
Розподілена інформаційна система: інформація зберігається на величезній величезній кількості так званих WWW-серверів (servers). Тобто комп'ютерів, куди встановлене спеціальне програмне забезпечення і об'єднані у мережу Internet.
Для навігації в WWW використовуються спеціальні програми – Web-браузери, які суттєво полегшують подорож безкрайніми просторами WWW. Вся інформація у Web-браузері відображається у вигляді Web-сторінок, які є основним елементом байтів WWW.
У свою чергу Веб-браузер – це програма-клієнт, що надає користувачеві можливості:
- Завантаження файлів і т.п.
Що ж таке Web-сайт і для чого він потрібен?
Веб-сайт- сукупність Веб - сторінок з дизайном, що повторюється, об'єднаних за змістом, навігаційно і фізично що знаходяться на одному Веб- Сервері.
3.Створення Web-сторінки за допомогою мови HTML
Робота з HTML - це спосіб засвоїти особливості створення документів у стандартизованій мові, використовуючи розширення тільки якщо це дійсно необхідно. HTML був ратифікований World Wide Web Consortium. Він підтримується кількома широко поширеними броузерами, і, можливо, стане основою майже всього програмного забезпечення, яке стосується Web.
3.1Структура HTML документа
2) Заголовна частина.
і Між цими тегами міститься інформація про документ (назва, ключові слова для пошуку, опис тощо). Однак найбільш важливою є назва документа, яку ми бачимо у верхньому рядку вікна браузера і у списках "Вибране (BookMark)". Спеціальні програми-спайдери пошукових систем використовують назву документа для побудови баз даних. Для того, щоб дати назву своєму HTML-документу, текст поміщається між тегами.
3) Тіло документа.
3.2Форматування тексту
У розділі BODY усі символи табуляції та кінця рядків браузером ігноруються та ніяк не впливають на відображення сторінки. Тому переклад рядка у вихідному тексті HTML-документа не призведе до початку нового рядка у тексті, що відображається оглядачем за відсутності спеціальних тегів. Це правило дуже важливо пам'ятати і не забувати ставити розділяючі рядки теги, інакше текст не матиме абзаців, і він стане нечитаним.
Для початку нового рядка використовується тег (скор. від англ. Break - перервати). Цей тег призводить до відображення наступного рядка браузером подальшого тексту. Тег, що закриває для нього, не використовується. Він зручний, якщо потрібно з якогось місця писати з нового рядка без початку новогоабзацу, наприклад, у вірші. Повторне його використання дозволяє вставити один або кілька порожніх рядків, відсунувши наступний фрагмент сторінки вниз.
Суцільний текст без проміжків читається не дуже легко, його незручно переглядати та знаходити потрібні місця. Розбитий на абзаци текст сприймається набагато швидше. Для початку нового абзацу використовується тег (paragraph -абзац). Цей тег, крім початку нового рядка, вставляє один порожній рядок. Але багаторазове повторення
, на відміну , не призведе до появи кількох порожніх рядків, залишиться той самий порожній рядок.
У HTML-документі, крім тексту, можуть бути горизонтальні розділові лінії. Вони, як і текст, не вимагають жодних зовнішніх файлів. Тег виведе горизонтальну лінію одиничної товщини вздовж усієї ширини сторінки. Горизонтальна розділова лінія завжди призводить до розриву рядка, але порожніх рядків між лінією та текстом не з'являється. Тег може містити кілька атрибутів. і дають контурну лінію із тривимірним ефектом поглиблення. дає суцільну чорну лінію. Лінія може не простягатися на всю ширину сторінки, а становити лише деяку частину. Атрибут WIDTH визначає ширину лінії у відсотках від ширини всієї сторінки або в пікселах. Наприклад, 50% - половина ширини сторінки, 400 - ширина 400 пікселів.
4. Зовнішній вигляд проекту
Зручний інтерфейс мого сайту дозволяє вільно переміщатись по всьому проекту, що полегшує пошук інформації в ньому.
Інтерфейс- у широкому значенні - певна стандартами межа між взаємодіючими незалежними об'єктами. Інтерфейс задає параметри, процедури та характеристики взаємодії об'єктів.
Adobe Photoshop - на сьогоднішній день це найпотужніший пакет дляпрофесійної обробки растрової графіки Це цілий комплекс, що має численні можливості модифікації растрового малюнка, що має величезний набір різних фільтрів і ефектів, причому є можливість підключати інструменти незалежних виробників. Пакет пропонує, наприклад, засоби для відновлення пошкоджених зображень, ретушування фотографій або створення найфантастичніших колажів, які тільки можуть дозволити собі нашу уяву. Загалом, потенціал цього пакета справді величезний.
Сайт виконаний через кадр, тобто кожна сторінка розділена на 3 частини, що значно полегшує сприйняття тексту та інших даних.
Фрейм- елемент мови HTML версії 3.0 та вище. Фрейми дозволяють розділити Інтернет-сторінку на кілька незалежних вікон і в кожному з них розміщувати окрему Інтернет-сторінку. При цьому допускаються посилання з одного вікна до іншого вікна. Зазвичай фрейми застосовується для організації меню, що знаходяться на екрані.
У верхній частині сторінки (фрейму) розміщується банер, який зображує та вказує на те, на якій сторінці ви перебуваєте на даний момент.
У моєму випадку банер є стильовим забарвленням сторінки.
На головній сторінці розміщено банер із мультиплікацією. Він також був зроблений в Adobe Photoshop CS, як і решта графіки проекту, але при цьому оброблений у додатку COFEE CUP GIF ANIMATOR 7.5, що дозволило створити в ньому рух. Всі банери мають формат «.jpg», крім анімованого, що має формат «.gif».
б. Основна частина
Також основна частина кадру містить безліч фотографій. Взагалі, основний акцент мого сайту був зроблений саме на зображення диких кішок.
Зліва або з правого боку на кожній сторінці могосайту знаходиться меню, що полегшує пошук інформації.
Меню складається з кнопок, які у таблиці. При натисканні на кожну з них кнопка змінює свій колір, при цьому у головному вікні кадру відкривається потрібна сторінка.
Для того, щоб кнопка змінила колір, був використаний спеціальний скрипт, написаний мовою javascript.
Скрипт -програма, що містить набір інструкцій для деяких програм або утиліт. Семантика та синтаксис інструкцій у скриптах визначаються відповідними додатками. Зазвичай мова скриптів включає прості структури управління: лінійні послідовності, цикли та умовні вирази.
Скрипт-мова- в Інтернет - інтерпретована (об'єктно орієнтована) алгоритмічна мова, призначена для генерації динамічних веб-сторінок. Розрізняють скрипт-мови:
- виконувані за клієнта: javascript і VBScript; і
- виконувані за сервера: ASP, Perl, PHP та інших.
javascript- мова програмування, заснована на об'єктному поданні браузера. Текст програми вбудовується безпосередньо в HTML-документ та інтерпретується самим браузером.
javascript застосовується для надання користувальницькому інтерфейсу більшої інтерактивності в порівнянні зі статичним HTML, він дозволяє реалізувати: рядок, що біжить, змінюються малюнки і т.д.
Місце призначення гіперпосилання, наприклад Web-сторінка, може розташовуватися на жорсткому диску того ж комп'ютера, в Інтернеті або в Інтернеті.
5. Особливості оформлення
5.1 Галерея фотографій
Також у сайті присутні такі цікаві рішення як календар, який дозволяє користувачеві бачити сьогоднішню дату, а такожпросто надає головній сторінці певну індивідуальність.
Крім цього сайт «дає поради» відвідувачам сайту залежно від дня тижня, це приємно дивує відвідувачів
При створенні даного проекту використовувалися додаткові інструменти Web – дизайну: об'єкти біжучого рядка, об'єкти GIF – анімації, підказки, використання різних стилів накреслення тексту, обтікання елемента текстом, впровадження звукових об'єктів у фоновому режимі (при відкритті кожної сторінки звучить відповідне музичне співробітництво) ін. На сторінці карти сайту та корисних посилань використовуються нумеровані списки.
Недоліком сайту є пошукова система. При додаванні її до структури сайту, його використання буде набагато зручнішим, оскільки пошук інформації значно спроститься.
Сайт представлений для атестації повністю готовий, але не можна зупинятись на досягнутому. До нього можна додати додаткові види і породи диких кішок. Мені не можливо розглянути всю інформацію з цієї теми в одному проекті, тому на мій погляд краще було б створити ще один сайт, який став би «продовженням» попереднього. Надалі я постараюся розвинути тему диких кішок, а особливо їхнього захисту, у наступному проекті.
Список використаної літератури:
1. Еге. Крамер. HTML - Наочний курс Web-дизайну. М.-Спб.-Київ: Діалектика, 2001;
2. Пол Макфедріс. Створення Web-сторінок. М: АСТ Астрель, 2005;