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

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

Ай, да молодцы !!! Наши успехи за год Ай, да молодцы !!! Наши успехи за год 88
Шаблон 23 февраля - 3 презентация к уроку по теме Шаблон 23 февраля - 3 презентация к уроку по теме 77
Беседа с детьми в ДОУ презентация к уроку (старшая группа) Беседа с детьми в ДОУ презентация к уроку (старшая группа) 113
Проект В гостях у книги Проект В гостях у книги 21
Классификация прав ребенка презентация Классификация прав ребенка презентация 83
Общее и местное обезболивание Общее и местное обезболивание 131
Наставничество Тема Ознакомление с окружающим миром : организация НОД, методы и приемы;современные технологии при обучении; РППС. консультация по теме На НОД по ознакомлению с окружающим  миром можно использовать следующие здоровьесберегающие технологии: Наставничество Тема Ознакомление с окружающим миром : организация НОД, методы и приемы;современные технологии при обучении; РППС. консультация по теме На НОД по ознакомлению с окружающим  миром можно использовать следующие здоровьесберегающие технологии: 97
Предметно-пространственная развивающая среда в группе в соответствии с ФГОС. консультация Предметно-пространственная развивающая среда в группе в соответствии с ФГОС. консультация 102
БИОХимическая очистка сточных вод в искусственных условиях БИОХимическая очистка сточных вод в искусственных условиях 88
Презентация урока-конференции по экономике. Презентация урока-конференции по экономике. 31
Визитная карточка группы Ромашка презентация к уроку (младшая группа) Визитная карточка группы Ромашка презентация к уроку (младшая группа) 122
БЫСТРЫЕ ДЕНЬГИ БЫСТРЫЕ ДЕНЬГИ 96
Современные формы взаимодействия ДОУ с семьей в воспитании ребенка презентация урока для интерактивной доски Современные формы взаимодействия ДОУ с семьей в воспитании ребенка презентация урока для интерактивной доски 100
Качество- как интегральная характеристика образовательно- воспитательного процесса презентация к уроку Качество- как интегральная характеристика образовательно- воспитательного процесса презентация к уроку 93
pereletnye ptitsy pereletnye ptitsy 91
Конспект родительского собрания Детские капризы план-конспект занятия (средняя группа) по теме Конспект родительского собрания Детские капризы план-конспект занятия (средняя группа) по теме 111
Кадровое делопроизводство Кадровое делопроизводство 229
Паркинсонизм-плюс Паркинсонизм-плюс 82
Единый орфографический режим в начальной школе. Единый орфографический режим в начальной школе. 108
Презентация о жизни и творчестве Мусы Джалиля презентация Презентация о жизни и творчестве Мусы Джалиля презентация 82
Your house Your house 159
памятка родителям по ПДД консультация памятка родителям по ПДД консультация 81
Роль витаминов в обмене веществ Роль витаминов в обмене веществ 82
Сенсорное развитие детей младшего дошкольного возраста в процессе дополнительного образования презентация к уроку (младшая группа) Сенсорное развитие детей младшего дошкольного возраста в процессе дополнительного образования презентация к уроку (младшая группа) 28
Комбинированные банкеты и приемы по профессии Официант, бармен Комбинированные банкеты и приемы по профессии Официант, бармен 211
Родительское собрание в 4 Г классе презентация к уроку (4 класс) по теме Родительское собрание в 4 Г классе презентация к уроку (4 класс) по теме 78
Казачьи формирования Казачьи формирования 79
Презентация на родительское собрание ФГОС ДОУ презентация урока для интерактивной доски (младшая, средняя, старшая группа) Презентация на родительское собрание ФГОС ДОУ презентация урока для интерактивной доски (младшая, средняя, старшая группа) 97
Компьютер- дуҫмы, әллә дошманмы? Компьютер- дуҫмы, әллә дошманмы? 82
Урок отработки умений и рефлексии консультация по теме Урок отработки умений и рефлексии консультация по теме 95


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