Что такое 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
  • Количество просмотров: 102
  • Количество скачиваний: 0
- Предыдущая Проведение урока с позиции технологии здоровья
Следующая - ОМНИБУСЗадание № 5 Выполнили: Бахметьева Екатерина,Гераймович Елизавета,Кажуро Мария,УтепбергеноваАсия

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

sadik 8 sadik 8 98
Анализ УМК Перспектива Анализ УМК Перспектива 175
Метод Ньютона Метод Ньютона 120
Культурно-досуговое мероприятие Культурно-досуговое мероприятие 188
Презентация Ребенок и пиротехника презентация к уроку по теме Презентация Ребенок и пиротехника презентация к уроку по теме 121
Презентация к бинарному уроку В мире ориентиров Презентация к бинарному уроку В мире ориентиров 137
Реализация образовательной области Речевое развитие детей дошкольного возраста Реализация образовательной области Речевое развитие детей дошкольного возраста 133
Генные заболевания скелета:ахондроплазия, диастрофическаядисплозия, врожденная косолапость Генные заболевания скелета:ахондроплазия, диастрофическаядисплозия, врожденная косолапость 113
Системно – деятельностный подход в обучении учебно-методический материал Системно – деятельностный подход в обучении учебно-методический материал 121
umk perspektiva umk perspektiva 141
Система стандартизации Система стандартизации 101
Виды и формы природопользования презентация к уроку Виды и формы природопользования презентация к уроку 246
104
Презентация по казахскому языку Қасым Аманжолов Қасым-Әуен! Қасым-Жыр! Қасым-Ақын! Презентация по казахскому языку Қасым Аманжолов Қасым-Әуен! Қасым-Жыр! Қасым-Ақын! 315
Способы очистки коксового газа, охлаждение. Компоновки улавливающих цехов, новые технологии Способы очистки коксового газа, охлаждение. Компоновки улавливающих цехов, новые технологии 103
Тайные мечты каждого ребенка ( Обращение детей к родителям. Презентация) материал Тайные мечты каждого ребенка ( Обращение детей к родителям. Презентация) материал 96
Прзентация Удивительный мир кристалов презентация к уроку (4 класс) Прзентация Удивительный мир кристалов презентация к уроку (4 класс) 105
Дидактическая игра для старшего дошкольного возраста Сок и варенье материал Дидактическая игра для старшего дошкольного возраста Сок и варенье материал 149
ИКТ презентация презентация к уроку ИКТ презентация презентация к уроку 100
Тема Сердечно легочная реанимаияааааа Тема Сердечно легочная реанимаияааааа 108
Презентация ко Дню Матери Материнская любовь Презентация ко Дню Матери Материнская любовь 127
Портрет Портрет 78
Технология оценивания Технология оценивания 132
Презентация по технологии профессиональной деятельности Упаковка подарков для детей Презентация по технологии профессиональной деятельности Упаковка подарков для детей 105
Презентация проекта Мой дом, моя улица, мой город проект (средняя группа) Презентация проекта Мой дом, моя улица, мой город проект (средняя группа) 144
Родительское собрание Овладение навыками оптимального чтения-залог успешного обучения презентация к уроку (3 класс) Родительское собрание Овладение навыками оптимального чтения-залог успешного обучения презентация к уроку (3 класс) 142
Автоматизация учета электроэнергии Автоматизация учета электроэнергии 111
Презентация Музей русской одежды презентация к уроку (старшая группа) Презентация Музей русской одежды презентация к уроку (старшая группа) 91
Тема классного часа:К. Азербаев Тема классного часа:К. Азербаев 136
Пояснительная записка к презентации опыта работы статья Пояснительная записка к презентации опыта работы статья 108


Слайд 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-Б