Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Спецкурс “Основивеб-дизайну”

Содержание

 Основи веб-дизайнуВперед>>
Спецкурс “Основи веб-дизайну”Розділ 2. Основи мови HTML Основи веб-дизайнуВперед>>  Основи веб-дизайнуВперед>> Вперед >> Вперед >> Вперед >> Вперед >> Вперед >> Вперед >> Основи веб-дизайнуПриклад 2.4. Вперед >> Основи веб-дизайну Вперед >> Вперед >> Вперед >> Вперед >> Вперед >> Вперед >> Вперед >> Вперед >> Вперед >> Вперед >> Вперед >> Вперед >> Вперед >> Вперед >> Вперед >> Вперед >> Вперед >> Вперед >>
Слайды презентации

Слайд 2  Основи веб-дизайну
Вперед>>

 Основи веб-дизайнуВперед>>

атрибути.
Розмітка веб-сторінок за допомогою таблиць.
Практична робота №4.

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

Частина 3

Слайд 3 Вперед >>

Вперед >>

інформація розміщена у комірках, утворених у результаті поділу прямокутника

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

 Основи веб-дизайну

Слайд 4 Вперед >>

Вперед >>

елементи. Таблицю описують за допомогою тегів ...; вона повинна

мати один або кілька рядків ..., у кожному з яких може міститися заголовок <ТН>... або дані ....
За умовчанням таблиця має невидимі межі комірок. Для того щоб зробити їх видимими, використовують атрибут BORDER, який має цілочислове значення, що визначає товщину рамки в пікселах, наприклад .


 Основи веб-дизайну



Слайд 5 Вперед >>

Вперед >>

задається тегами та . Тег може містити

атрибут ALIGN з одним із значень top або bottom, які визначають розташування заголовка відповідно перед таблицею або після неї (за умовчанням встановлено значення top). Наприклад,
.
Наприклад, <ТН>Понеділок або визначені атрибути ROWSPAN та COLSPAN.
2. Збережіть документ із розширенням .html.
 

 Основи веб-дизайну

Перейти на виконання вправи 2.3

Слайд 13 Вперед >>

Вперед >>

комірок в одному стовпці однакова, а в одному рядку

може бути різною.
Ширину таблиці задають атрибутом WIDTH у тегу
Розклад уроків.


 Основи веб-дизайну

Слайд 6 Вперед >>

Вперед >>

і закінчується тегом Якщо рядок містить заголовки

стовпців таблиці, то використовують теги <ТН> і , якщо ж дані - то
і 1. Алгебра.
У таблиці слово «Понеділок» буде виділене браузером напівжирним шрифтом, а текст «1. Алгебра» відформатовано стандартним способом.

 Основи веб-дизайну

Створення таблиці

Понеділок1. Алгебра

<ТН>Понеділок

1. Алгебра

Понеділок1. Алгебра

Слайд 7 Вперед >>

Вперед >>

структуру табл. 2.2. Вона містить назви п'яти робочих
днів тижня,

на кожен з яких припадає 4-5 уроків.

 Основи веб-дизайну

Створення таблиці

Таблиця 2.2. Розклад уроків

Слайд 8 Вперед >>
 Основи веб-дизайну
Приклад 2.4.

Вперед >> Основи веб-дизайнуПриклад 2.4.

Слайд 9 Вперед >>
 Основи веб-дизайну

Вперед >> Основи веб-дизайну

веб-сторінка у вікні браузера, показано на рис.
Зверніть увагу

на те, що за відсутності даних у комірці таблиці рамка навколо неї не відображається. Для того щоб рамку було видно, можна ввести спеціальний код   (non-breaking space - нерозривний пробіл). Після цього порожня комірка буде взята в рамку.

Слайд 10 Вперед >>

Вперед >>

в одну як по горизонталі, так і по вертикалі.


Об'єднання першого типу застосовують тоді, коли потрібно створити для кількох стовпців спільний заголовок. Коли вміст кількох комірок поспіль у стовпці однаковий, їх об'єднують по вертикалі.
Для об'єднання комірок використовують такі атрибути: COLSPAN (об'єднання по горизонталі, у рядку) і ROWSPAN (по вертикалі, у стовпці) тегу
.
Значеннями цих атрибутів є кількість об'єднуваних стовпців або рядків. Наприклад, COLSPAN=3 означає, що комірка розтягнута на 3 стовпці, a ROWSPAN=2 — що комірка займає 2 рядки.

 Основи веб-дизайну

Слайд 11 Вперед >>

Вперед >>

таблицю з об'єднаними комірками
Створимо HTML-документ, що містить дві таблиці,

в яких є об'єднані комірки .
Таблиця 2.3. Таблиця з комірками, об'єднаними по вертикалі Таблиця 2.4. Таблиця з комірками, об'єднаними по горизонталі




Код цього документа наведено нижче. Код цього документа наведено нижче.












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

 Основи веб-дизайну







Приклад COLSPAN
Kласи
11-A 11-B 11-B




Приклад ROWSPAN та COLSPAN







Приклад ROWSPAN
Kласи 10-A
10-B




Перейти на виконання прикладу 2.5.

Слайд 12 Вперед >>

Вперед >>

має таку ж структуру, як в таблиці, в якій

одночасно об'єднано і стовпці, і рядки.
Таблиця 2.5. Таблиця, в якій об'єднано кілька рядків і кілька стовпців







1. Створіть HTML-документ, де у відповідних тегах
...
, а комірки — за допомогою того самого атрибута у тегу
або <ТН>.
Ширину таблиці можна визначати як у пікселах, так і у відсотках від ширини вікна, а комірки — у пікселах або у відсотках від ширини таблиці.

 Основи веб-дизайну





; цей самий атрибут у тегах та ;
  • Имя файла: spetskurs-“osnoviveb-dizaynu”.pptx
  • Количество просмотров: 136
  • Количество скачиваний: 0
- Предыдущая Проведение урока с позиции технологии здоровья
Следующая - ОМНИБУСЗадание № 5 Выполнили: Бахметьева Екатерина,Гераймович Елизавета,Кажуро Мария,УтепбергеноваАсия

Похожие презентации

Детство, опаленное войной (не придуманные рассказы) презентация к уроку по теме Детство, опаленное войной (не придуманные рассказы) презентация к уроку по теме 134
Принципы распределения расходов по уровням бюджетной системы Принципы распределения расходов по уровням бюджетной системы 139
Презентация классного часа по пожарной безопасности Презентация классного часа по пожарной безопасности 136
Уморилась Уморилась 146
Открытие антибиотиков Открытие антибиотиков 211
Артериальная гипотензия беременных Артериальная гипотензия беременных 219
Редактор формул Редактор формул 198
ВВЕДЕНИЕ В ДИСЦИПЛИНУ ВВЕДЕНИЕ В ДИСЦИПЛИНУ 143
Україна – це ми Україна – це ми 129
Презентация Старый город Презентация Старый город 130
Пособие по изготовлению гуманизированных стрел для РИ Пособие по изготовлению гуманизированных стрел для РИ 166
Урок занимательной математики Математика и жизнь Урок занимательной математики Математика и жизнь 181
Породи,продуктивність і відтворення поголів'я великої рогатої худоби Породи,продуктивність і відтворення поголів'я великої рогатої худоби 101
gorod 3 gorod 3 168
Всеукраїнський футбольний турнір“aegon kids cup 2014” Всеукраїнський футбольний турнір“aegon kids cup 2014” 116
Эмоции детей презентация к уроку Эмоции детей презентация к уроку 140
Презентация проекта Жевательная резинка- друг или враг нашему здоровью проект (3 класс) по теме Презентация проекта Жевательная резинка- друг или враг нашему здоровью проект (3 класс) по теме 142
Материал для родительского собрания в подготовительной группе. Психологическая готовность ребенка к школе. презентация к уроку (подготовительная группа) Материал для родительского собрания в подготовительной группе. Психологическая готовность ребенка к школе. презентация к уроку (подготовительная группа) 122
Шаблоны для презентации Универсальные Шаблоны для презентации Универсальные 134
Презентация к уроку Передвижка и подъем зданий по ПМ 04. МДК 04.02 Реконструкция зданий Презентация к уроку Передвижка и подъем зданий по ПМ 04. МДК 04.02 Реконструкция зданий 210
Бизнести уюштуруунун формалары Бизнести уюштуруунун формалары 144
Эксперименты с использованием цифровых датчиков. Мастер-класс опыты и эксперименты (4 класс) Эксперименты с использованием цифровых датчиков. Мастер-класс опыты и эксперименты (4 класс) 163
Презентация по специальной медицинской группе Презентация по специальной медицинской группе 160
ВНИМАНИЕ ВНИМАНИЕ 132
Презентация Новые варианты подвижных игр методическая разработка (средняя группа) по теме Презентация Новые варианты подвижных игр методическая разработка (средняя группа) по теме 139
Классный час Дети и война Классный час Дети и война 146
Презентация по развитию речи на тему: Русские богатыри (дети 5-6 лет) Презентация по развитию речи на тему: Русские богатыри (дети 5-6 лет) 196
Доклад: Методическое сопровождение внедрения СФГОС как фактор повышения педагогического мастерства педагогов статья Доклад: Методическое сопровождение внедрения СФГОС как фактор повышения педагогического мастерства педагогов статья 154
Маркетинг в соціокультурній сфері Маркетинг в соціокультурній сфері 133
Использование социо-игровой технологии в работе с детьми старшего дошкольного возраста презентация к уроку (старшая группа) Использование социо-игровой технологии в работе с детьми старшего дошкольного возраста презентация к уроку (старшая группа) 175


Слайд 14 Вперед >>

Вперед >>

HTML-документ, в якому задана ширина таблиці та деяких комірок
Розглянемо

HTML-документ, в якому буде створено таблицю певної ширини, а також задано ширину деяких комірок.


Приклад встановлення ширини таблиці





Класи10-A
10-B




Вся таблиця має ширину 500 пікселів. Ширина комірки з текстом Класи становить 50 % від ширини всієї таблиці, а комірки з текстом “10-А” - 250 пікселів. Комірка з текстом “10-Б” теж завширшки 250 пікселів (хоча для неї ширину не було задано), оскільки вона розташована в одному стовпці з попередньою.


 Основи веб-дизайну

Слайд 15 Вперед >>

Вперед >>

оформлення рамок таблиці
Текст всередині комірок можна вирівнювати як по

горизонталі, так і по вертикалі. Горизонтальне вирівнювання вмісту всього рядка задають за допомогою атрибута ALIGN у тегу
або <ТН> в окремих комірках виконує таку саму роль.
Атрибут ALIGN може набувати значень center, right, left або justify, які задають вирівнювання вмісту таблиці відповідно по центру, за правим чи лівим краєм або за шириною.
Приклади тегів
із використанням вирівнювання:
l. Алгебра.

 Основи веб-дизайну

Слайд 16 Вперед >>

Вперед >>

width="120" align="right" valign="middle">Понеділок1. Алгебра

Слайд 17 Вперед >>

Вперед >>

у тегах , або за допомогою атрибута

VALIGN, який може набувати значень top, bottom та middle, що визначають вирівнювання відповідно за верхнім та нижнім краєм і по центру.
Для оформлення зовнішньої рамки таблиці можна використовувати атрибут FRAME тегу .
Його значення визначають, що браузер відображатиме:











 Основи веб-дизайну

Слайд 18 Вперед >>

Вперед >>

width=“200" border="1" bordercolor="#3333CC" frame="box">
frame="above”
frame="below"
frame="box"
frame="hsides"
frame="rhs"
frame="lhs"
frame="vsides"
frame="void"

Слайд 19 Вперед >>

Вперед >>

стовпцями та рядками таблиці визначають за допомогою атрибута RULES

тегу
.
Він може набувати таких значень:

 Основи веб-дизайну

Слайд 20 Вперед >>

Вперед >>

width="200" border="1" bordercolor="#CC0000" rules="all">
rules=“all”
rules="cols"
rules="rows"
rules="none"

Слайд 21 Вперед >>

Вперед >>

Створіть HTML-документ, який містить таблицю із такими настройками: товщина

рамки таблиці дорівнює 15 пікселам, відображаються всі її чотири сторони і лише горизонтальні розділювальні лінії між рядками. Нехай ширина таблиці становить 300 пікселів.
2. Збережіть документ у файлі з розширенням .html.
 

 Основи веб-дизайну

Перейти на виконання вправи 2.4.

Слайд 22 Вперед >>

Вперед >>

за допомогою кольорів застосовують атрибут BGCOLOR.
Колір можна визначати,

вказуючи його назву англійською мовою або символ # та шістнадцяткове число.
1). Якщо потрібно задати колір для всієї таблиці, то атрибут BGCOLOR задають у тегу
.
2). Для зміни кольору лише в одному рядку—в тегу
3). Настроювання кольору окремої комірки забезпечує наявність цього атрибута всередині тегу

 Основи веб-дизайну

Слайд 24 Вперед >>

Вперед >>

браузер розміщує елементи на екрані один за одним у

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


 Основи веб-дизайну

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

Слайд 25 Вперед >>

Вперед >>

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

Приклад позиціювання










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


 Основи веб-дизайну

Слайд 23 Вперед >>

Вперед >>

HTML-документ, який містить різнокольорову таблицю

Приклад керування кольором

BORDERCOLOR="#808080" BORDERCOLORLIGHT="#99CCFF" BORDERCOLORDARK="#9900FF">







Kласи
11-A 11-Б 11-B



Якщо необхідно задати колір шрифту для тексту таблиці, то це можна зробити за допомогою тегу всередині відповідних тегів 		. Наприклад:
Teкст
Старші класи
10-A
10-B
11-A
11-B
11-B



 Основи веб-дизайну

Слайд 26 Вперед >>

Вперед >>

- відображення html-документа браузером.

Комірки таблиці можна заповнювати не лише

текстом, а й зображеннями, іншими таблицями та рухомими рядками. Текст або зображення всередині комірки може бути гіперпосиланням.
Наприклад:
11-Б