Головна
Банківська справа  |  БЖД  |  Біографії  |  Біологія  |  Біохімія  |  Ботаніка та с/г  |  Будівництво  |  Військова кафедра  |  Географія  |  Геологія  |  Екологія  |  Економіка  |  Етика  |  Журналістика  |  Історія техніки  |  Історія  |  Комунікації  |  Кулінарія  |  Культурологія  |  Література  |  Маркетинг  |  Математика  |  Медицина  |  Менеджмент  |  Мистецтво  |  Моделювання  |  Музика  |  Наука і техніка  |  Педагогіка  |  Підприємництво  |  Політекономія  |  Промисловість  |  Психологія, педагогіка  |  Психологія  |  Радіоелектроніка  |  Реклама  |  Релігія  |  Різне  |  Сексологія  |  Соціологія  |  Спорт  |  Технологія  |  Транспорт  |  Фізика  |  Філософія  |  Фінанси  |  Фінансові науки  |  Хімія

Лекція№17 - Економіко-математичне моделювання

Списки і рамки в HTML

. Списки

Іноді при створенні веб-сторінок буває корисно якось упорядкувати представлену на них інформацію. Традиційно для цього застосовують списки. Як перший приклад давайте розглянемо веб-сторінку гіпотетичної фірми «Ледар». Припустимо, ми спочатку хочемо перерахувати надані послуги, а потім вказати послідовність дій, необхідних для їх замовлення.

Марковані та нумеровані списки

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

Вкручування електричних лампочок

Вкручування електричних лампочок

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

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

Отже, давайте подивимося, як може виглядати ця сторіночка. (Елемент вирівнювання DIV - парний, SMALL - зменшує шрифт)

Фірма "ЛЕДАР"

Фірма «ЛЕДАР»

Наша фірма надає наступні послуги

Вкручування електричних лампочок

Підмітання підлоги

Винесення сміття з квартири

Миття посуду

Дефрагментація жорстких дисків

Щоб скористатися нашими послугами, слід:

Зареєструватися (тут)

Заповнити форму замовлення (тут)

Отримавши листа з паролем, послати порожній відповідь

Заповнити форму-підтвердження замовлення

(Тут)

Приготувати гроші для оплати послуг

См. Файл: spiski1.html

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

Інше питання, що буде, якщо код написаний некоректно: наприклад, вказані теги без тега списку або, або в списку є елементи без тега?

Взагалі кажучи, такого допускати не слід, так як деякі «суворі» броузери в цьому випадку не будуть відображати практично нічого. Більшість популярних браузерів, правда, спробують догодити навіть авторові сторіночки, який написав такий код. Наприклад, Internet Explorer 5, якщо зустріне теги без тега початку списку, інтерпретує їх як маркований список, хоча і не виділятиме його відступом, а не помічені тегом елементи списку залишить без маркера. Однак, повторюю, це з низки он виходять випадки.

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

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

Далі, при вкладенні декількох маркованих списків хочеться кожен з них позначити своїм типом маркера. Деякі броузери так і роблять за замовчуванням. Наприклад, Internet Explorer елементи першого списку із серії вкладених позначає зафарбовані гуртком, елементи другого - незакрашенним гуртком, а елементи всіх наступних - квадратиком. Однак, по-перше, так чинять не всі броузери, а по-друге, нам може захотітися змінити порядок маркерів. Для явного визначення типу маркера в тезі слід встановити атрибут TYPE =. У нього можуть бути три значення: "disc", "square" і "circle", що означає, відповідно, зафарбований гурток, квадратик і зафарбований гурток.

У тезі нумерованого списку можна встановити атрибут TYPE = для визначення типу нумерації. Якщо не вказано нічого або встановлено значення TYPE = "1", то нумерація відбувається звичайними цифрами. Якщо встановити TYPE = "I" або "i", то вийде нумерація римськими цифрами (відповідно, з використанням прописних або малих літер).

І, нарешті, для літерних позначень елементів списку встановлюють атрибут TYPE = "A" або "а". Крім того, іноді може знадобитися почати нумерацію ні з одиниці, а з якого-небудь іншого числа. Для цього існує атрибут START =. Наприклад, запис викличе нумерацію елементів списку, починаючи з числа 43. Далі підуть елементи з номерами 44, 45 і т. Д.

Може виникнути природне запитання: а як використовувати інші типи маркерів списків - різноманітні галочки, кольорові гуртки та інші, які ми так часто бачимо в WWW! Дійсно, така можливість є, проте ми розглянемо її дещо пізніше, а поки наведемо приклад веб-сторінки фірми «Ледар» з використанням вкладених списків:

Фірма "ЛЕДАР"

Фірма «ЛЕДАР»

Haшa фірма надає наступні послуги:

Побутові послуги

Вкручування електричних лампочок

Послуги з наведення чистоти

Підмітання підлоги

Bинeceніe сміття з квартири

посуду

Приготування їжі

Koмпьютepниe послуги

Дeфpaгмeнтaція жорстких дисків

Перевстановлення Windows

Для того, щоб скористатися нашими послугами, слід:

Зареєструватися (Тут)

Заповнити форму замовлення (Тут)

Підтвердити замовлення:

Отримавши листа з паролем підтвердження, послати порожній відповідь, натиснувши "Reply"

Заповнити форму-підтвердження замовлення

(Тут)

Приготувати гроші для оплати послуг

(Див. Файл spiski2.html) Графічні маркери

Отже, вище ми згадали про можливість створення графічних маркерів списків. Вона настільки привернула творців веб-сторінок, що для їх зручності були створені спеціальні засоби. Дійсно, одна справа, коли маркерами списку є стандартні кружечки або квадратики, і зовсім інша - коли кожен сам має можливість створити маркер! Маркером може бути все що завгодно - від просто кольорових і трохи опуклих кружків і квадратів до витончених мініатюрних художніх робіт. Однак зверніть увагу на те, що саме мініатюрних: маркери списків повинні за розміром якось відповідати висоті текстового рядка, і турбота про це лягає на автора ще на етапі створення зображення. Намагайтеся створювати подібні зображення відразу в «натуральну величину». Якщо створювати спочатку великі малюнки, а потім просто зменшувати їх, то при зменшенні вони можуть стати невпізнанними! Вся справа в тому, що комп'ютер «не знає», які деталі малюнка важливі для нашого сприйняття. Якщо при зменшенні зникнуть важливі деталі, результат буде жахливим. Якщо зникнуть другорядні деталі, якість сприйняття погіршає, але загальне впе-; чатление залишиться.

Щоб проілюструвати можливість вставки в список графічних маркерів, скористаємося одним з прикладів - веб-сторінкою фірми «Ледар». Якщо пам'ятаєте, там ми створили два списки:

маркований (список послуг) і нумерований (порядок оформлення замовлення). Тепер, припустимо, ми хочемо замінити гуртки в маркірованому списку на червоні трикутники.

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

Щоб піти далі, замінимо атрибут TYPE = на атрибут STYLE = (як, до речі, і належить робити відповідно до специфікації HTML 4.0):

Tenepь, щоб замінити кружок на графічний маркер, замінимо властивість list-style-type на властивість list-style-image і визначимо місце розташування нашого файлу-малюнка:

От і все! Можна насолоджуватися списком з графічними маркерами. Зверніть увагу на те, що при вказівці імені файлу ми уклали його не в звичайні подвійні лапки, а в одинарні. Це зроблено тому, що всі значення атрибута STYLE = укладено в подвійні лапки. Тому якби ми помилково написали

то лапка перед словом Images була б сприйнята як що закриває, тобто атрибуту STYLE = було б присвоєно значення "list-style-image: url (", a все, що слідує за цим, стало б ще одним, нерозпізнаним атрибутом тега.

Рамки

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

Створення рамок

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

Створіть у текстовому редакторі два маленьких Web-документа і збережіть їх як файли a.htm і b.htm. Ці сторінки будуть відрізнятися тільки назвами.

Файл a.htm:

Рамки. Сторінка A

сторіночка А

Файл b.htm:

Рамки. Сторінка B

сторіночка В

Створіть базову сторінку, на якій будуть відображатися рамки, і збережіть baza.htm:

Paмкі

Відкрийте сторінку baza.htm в програмі перегляду, і Ви побачите, що вона складається з двох областей:

Наведемо невеличкий коментар до використання прапора. У ньому вказується, що екран поділяється на дві колонки (параметр COLS), кожна з яких займає рівно половину екрану (COLS = "50 ° / o, 50%").

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

Як розділити сторінку на більше число областей?

Створіть чотири HTML-файлу: a.htm, b.htm, c.htm, d.htm. Крім того, змініть колір фону кожної сторінки, для чого використовуйте атрибут BGCOLOR прапора BODY: на сторінці А вкажіть колір FFOOFF, на сторінці В - OOFFOO, на сторінці С - FFFFOO і на сторінці D -FFFFFF.

Файл a.htm:

Рамки. Сторінка A

Фрейм А рожевого кольору

Файл b.htm:

Рамки. Сторінка B

Фрейм В зеленого кольору -

Файл c.htm:

Рамки. Сторінка C

фрейм З жовтого кольору

Файл d.htm:

Рамки. Сторінка D

фрейм D білого кольору

| Базова сторінка demo.htm: (у нашому випадку - це і є index.html)

Демонстрація фреймів

FRAMESET COLS = "25%, 25%, 25%, 25%">

Відкрийте файл demo.htm в програмі перегляду. На екрані комп'ютера Ви побачите, як виглядають створені Вами рамки

Чи можна зробити рамки різного розміру? Та вайте спробуємо!

Відредагуйте Ваш файл demo.htm і сохранітe його як demo2.htm:

-

Демонстрація фреймів 2

Зверніть увагу, що розмір четвертою; Cамой правої рамки зазначений не числовим значенням, символом «*». Це означає, що дана рамка повинна займати всю решту площа головною стра-учениці.; Перегляньте файл на екрані:

Розміри рамок можна задавати не тільки у відсотках, а й в пікселях. Наприклад, можна вказати, що кожна з чотирьох рамок має горизонтальний розмір в 60 пікселів:

Демонстрація фреймів 3

На екрані Ви побачите стрілочки, що з'явилися внизу лівої рамки

Ввівши атрибут SCROLLING у відповідний прапор, можна управляти появою на екрані смуг прокрутки. Можливі значення атрибуту SCROLLING

SCROLLING = YES - у рамки завжди будуть смуги прокрутки, незалежно від того, чи потрібні вони чи ні.

SCROLLING = NO-у рамки не буде смуг прокрутки, незалежно від того, чи потрібні вони чи ні.

SCROLLING = AUTO - у рамки будуть смуги прокрутки тільки в разі потреби.

Проведемо експеримент з смугами прокрутки

Створимо файл demo9.htm

neMOHCTpauuH фреймів 9

|

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

Давайте подивимося, як вирівняти графічне зображення по лівій межі рамки. Як видно з попереднього малюнка, графічне зображення не-багато зміщений вправо від кордону рамки. Вирівняти його можна за допомогою атрибутів MARGINWIDTH і MARGINHEIGHT. Ці атрибути керують відступом зображення усередині рамки Створіть файл demolO.htm. і встановіть мінімальні значення кожного атрибута:

демонстрація фреймів 10

На екрані Ви побачите, що графічне зображення вирівнялося:

Зв'язок між рамками

Повернемося до часто використовуваному нами прикладу з двома рамками (baza.htm). Змініть вміст файлу a.htm, додавши посилання на інший файл (c.htm):

Демонстрація фреймів (посилання)

A link to c.htm

Якщо Ви завантажте базовий приклад з двома рамками і активізуєте посилання, то отримаєте вміст сторінки С, відображене всередині рамки А. А як відобразити вміст сторінки З всередині рамки В? Уважно вивчіть приклад:

Демонстрація фреймів

Додавання імені не відбивається на його зовнішньому вигляді - це лише внутрішня зміна. Але Ви можете використовувати це ім'я як параметр атрибуту target прапора:

; Демонстрація фреймів

c.htm

Подивившись на цей приклад в програмі просмо тра, Ви виявите, що вміст сторінки З відображається тепер всередині фрейму
Стабілізація грошового потоку, теорії фірми
Лабораторна робота №1 Стабілізація грошового потоку Вихідні дані: Є N підприємств. Відомо для кожного підприємства на початковий етап часу фінансовий стан підприємств: m1, m2, ... mn (Вектор фінансового стану) Відомо що між підприємствами існує фінансова зв'язок, яка задається за допомогою

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

Мережеві моделі планування та управління
МІНІСТЕРСТВО ОСВІТИ РОСІЙСЬКОЇ ФЕДЕРАЦІЇ Алтайського державного університету Економічний факультет Курсова робота За темою: «МЕРЕЖЕВІ МОДЕЛІ ПЛАНУВАННЯ ТА УПРАВЛІННЯ» Барнаул 2001 Введення Мережевий моделлю (інші назви: мережевий графік, мережа) називається економіко-комп'ютерна модель, що

Розрахунок стратегій діяльності автотранспортних підприємств
Додаток 12 Б 1 лок-схема технологічного процесу 02.08 03.10 02.07 3 2 Графік виконання Інструкція по виконанню План-графік виконання 02.05 03.09

Розрахунок фінансового левериджу
Міністерство торгівлі Російської Федерації Московський державний університет комерції Краснодарський філія Факультет ОФФ Курс 1-ий Група 0212 Курсова робота по курсу: "Інформатика та обчислювальна техніка " на тему:" Розрахунок фінансового левериджу " Виконав: Студентка

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

Криза Російської економіки і шляхи виходу з нього
ПЛАН ВВЕДЕННЯ... 2 1. Економічна криза. Причини і наслідки... 4 1.1. ПРИЧИНИ кризи... 4 1.2. наслідки кризи... 8 2. Сценарії розвитку економічної ситуації і перспективи виходу з кризи... 10 2.1. Сценарії розвитку економічної ситуації... 10 2.1.1. "Патерналистско-ліберальний" сценарій...

© 2014-2022  8ref.com - українські реферати