Презентація заголовків різних рівнів прості списки. Оформлення заголовків презентацій. Покрокова інструкція з фото. Введення ключових слів

Презентація заголовків різних рівнів прості списки. Оформлення заголовків презентацій. Покрокова інструкція з фото. Введення ключових слів

Головна > Навчально-методичний посібник 4 Робота зі списками та заголовками слайду. 4.1 Перегляд та редагування заголовків слайдів

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

Щоб згорнути у структурі всі заголовки слайдів, натисніть кнопку Розгорнути всі стандартні панелі інструментів. Повторне клацання на цій кнопці розгорне структуру всієї презентації.

Щоб змінити заголовок слайда, виконайте таке.

Клацніть на заголовку слайда, який потрібно змінити, на панелі структури. У заголовку слайда з'явиться I-подібний курсор.

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

4.2 Зміна тексту слайду

На більшості слайдів міститься текст. Скориставшись панеллю структури, ви зможете додавати, видаляти та змінювати текст слайду.

Щоб додати текст до слайда в презентації за допомогою панелі структури, виконайте таке.

Клацніть праворуч від заголовка слайда, до якого потрібно додати текст, і натисніть . PowerPoint відображає піктограму слайда прямо під слайдом, вибраним вами у п. 1.

Натисніть кнопку Зменшити рівень (стрілка праворуч) на панелі інструментів форматування. Значок слайда, що з'явиться, зникне, і ви зможете вводити текст у вікні вибраного слайда.

Введіть потрібний текст слайду. Коли ви вводите текст, PowerPoint буде відображати його у вікні слайда.

Розташування тексту під заголовком слайда визначає його розташування на слайді. Щоб змінити розташування тексту на слайді, виконайте таке.

На панелі структури презентації підведіть вказівник миші до лівого краю тексту (розташувавши його над маркером ліворуч від тексту), який потрібно перемістити. Вказівник миші набуде вигляду чотириспрямованої стрілки.

Утримуючи ліву кнопку миші, перемістіть мишу. Вказівник миші набуде форми двонаправленої стрілки. З'явиться лінія, яка показує, куди PowerPoint перемістить текст після відпустки лівої кнопки миші.

5 Робота зі слайдами презентації. 5.1 Додавання слайду

Кожен заголовок структури на панелі структури презентації представляє один слайд. Щоб додати новий слайд, виконайте таке.

Натисніть . PowerPoint відображає піктограму нового слайда над заголовком, який ви вибрали в пункті 1.

Натисніть кнопку зі стрілкою вгору, щоб підвести вказівник миші до заголовка створеного слайда. PowerPoint відобразить новий слайд.

Введіть текст заголовка на панелі структури презентації. Коли ви вводите текст заголовка, PowerPoint автоматично відображатиме його як на панелі структури, так і на панелі слайда. Щоб додати новий слайд та вибрати макет слайда для відображення тексту та графіки, виконайте таке.

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

Виконайте команду Вставка→Новий слайд. Відкриється діалогове вікно Створення слайду (рис. 5).

Клацніть на відповідному макеті слайда, після чого клацніть на кнопці ОК.

Введіть текст заголовка на панелі структури презентації. Будь-який текст, що вводиться, буде відображатися як в панелі структури презентації, так і в панелі слайда.

5. Створення слайду.

5.2 Видалення слайду

Іноді потрібно видалити слайд. Щоб це зробити, виконайте таке.

На панелі структури презентації наведіть вказівник миші на піктограму слайда, який потрібно видалити, і клацніть лівою кнопкою миші. PowerPoint виділить заголовок та всі розташовані під ним підзаголовки.

Натисніть клавішу< Delete >. PowerPoint вилучить виділений слайд.

5.3 Зміна порядку слайдів

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

Якщо презентація містить велику кількість слайдів, можна згорнути заголовки структури, щоб побачити заголовки слайдів. Щоб згорнути заголовки структури, клацніть на кнопці Розгорнути всі стандартної панелі інструментів.

Щоб змінити порядок слайдів, виконайте таке.

На панелі структури презентації наведіть вказівник миші на піктограму слайда поруч із заголовком структури (заголовком слайда), який потрібно перемістити, та натисніть ліву кнопку миші. PowerPoint виділить заголовок та всі розташовані під ним підзаголовки.

Перемістіть мишу. З'явиться горизонтальна лінія, яка показує, куди PowerPoint перемістить слайд після того, як ви відпустите ліву кнопку миші.

Відпустіть ліву кнопку миші, як тільки лінія опиниться в потрібному місці.

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

Виберіть пункт Вигляд → сортувальник слайдів PowerPoint відображає всі слайди презентації (мал. 6).

Рис.6. Перегляд слайдів за допомогою Сортувальника слайдів

Наведіть вказівник миші на слайд, який потрібно перемістити, та натисніть ліву кнопку миші. PowerPoint увімкне слайд у чорну рамку.

Перемістіть вказівник миші туди, де має розташовуватися слайд. З'явиться вертикальна лінія, яка показує, куди PowerPoint перемістить слайд після того, як ви відпустите ліву кнопку миші.

Відпустіть ліву кнопку миші, як тільки лінія опиниться в потрібному місці екрана. PowerPoint автоматично перенумерує слайди.

Виберіть Перегляд→Звичайний.

Перетворення заголовків структури на підзаголовки (і навпаки)

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

Щоб перетворити заголовок структури на підзаголовок, на панелі структури презентації клацніть на заголовку структури, який необхідно перетворити на підзаголовок, а потім натисніть кнопку Зменшити рівень стандартної панелі інструментів.

Щоб перетворити підзаголовок на заголовок структури, на панелі структури презентації клацніть на підзаголовку, який потрібно перетворити на заголовок структури, а потім натисніть кнопку Підвищити рівень стандартної панелі інструментів.

5.4 Додавання зауважень до слайдів

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

Текст зауважень на слайді не відображається. Зауваження дозволяють "приєднати" до слайдів допоміжний текст.

Щоб додати зауваження до слайда, виконайте такі дії.

Клацніть на панелі зауважень. PowerPoint відображає кожен слайд разом із текстовим полем, призначеним для введення зауважень (див. мал. 12 4).

Введіть потрібний текст.

6 Збереження презентацій

Перш ніж ви насолоджуватиметеся, переглядаючи презентації, створені з нуля, їх необхідно зберегти. Залежно від ваших цілей презентації PowerPoint можна зберегти як файл або Web-сторінки.

6.1 Збереження файлу під новим ім'ям

Єдиним простим способом швидкого створення презентації є відкриття існуючої презентації та збереження її файлу під новим ім'ям. Таким чином ви зможете внести зміни до існуючої презентації, а не створювати нову презентацію з нуля.

Щоб зберегти файл під іншим ім'ям, виберіть Файл →Зберегти як.

6.2 Збереження презентації Power P oint як Web-сторінки

Якщо ви створили дуже цінну презентацію, її можна зберегти у форматі Web-сторінок. Щоб це зробити, виконайте таке.

Натисніть кнопку Змінити праворуч від слова Заголовок. Відобразиться діалогове вікно Задати заголовок сторінки.

Введіть заголовок, який повинен відображатися у верхній частині Web-сторінки, і натисніть кнопку ОК.

Щоб побачити презентацію PowerPoint у вигляді Web-сторінки, виберіть команду Файл→Попередній перегляд Web-сторінки або запустіть Web-броузер і завантажте щойно створену Web-сторінку, щоб побачити, як вона буде представлена ​​в Internet.

7 Виведення презентації на друк

Після того, як ви досягли необхідного зовнішнього вигляду презентації, роздрукуйте результати вашої праці для того, щоб мати перед собою тези доповіді або повісити ваш витвір мистецтва на дошці оголошень. Щоб вивести презентацію на друк, виконайте таке.

Виберіть Файл →Друк. Відкриється діалогове вікно Друк.

Клацніть у полі Друкувати та виберіть один із наведених нижче варіантів.

    Слайди. Друкується один слайд на сторінці, що дозволяє побачити текст і зображення, представлені на слайді.

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

    Нотатки. Друкуються лише нотатки до слайдів. Ці нотатки можна роздати глядачам, а можна використовувати під час проведення презентації.

    Структура. Друкується структура презентації, що дозволяє побачити структуру презентації, але без графічних зображень.

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

Натисніть кнопку ОК.

8 Початкова інформація про зображення 8.1 Векторні зображення

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

Векторне уявлення полягає в описі елементів зображення математичними кривими із зазначенням їх кольорів та заповнюваності (згадайте, коло та коло – різні фігури). Червоний еліпс на білому тлі буде описаний всього двома математичними формулами - прямокутника та еліпса відповідних кольорів, розмірів та місця розташування. Ще одна перевага - якісне масштабування в будь-який бік. Збільшення чи зменшення об'єктів здійснюється збільшенням чи зменшенням відповідних коефіцієнтів у математичних формулах.

8.2 Растрові зображення

Растрова графіка описує зображення з використанням кольорових точок, званих пікселями, які розташовані на сітці. Наприклад, зображення деревного листа описується конкретним розташуванням та кольором кожної точки сітки, що створює зображення приблизно так само, як у мозаїці. Під час редагування растрової графіки Ви редагуєте пікселі, а не лінії. Растрова графіка залежить від роздільної здатності, оскільки інформація, що описує зображення, прикріплена до сітки певного розміру. Під час редагування растрової графіки якість її подання може змінитися. Зокрема, зміна розмірів растрової графіки може призвести до "розкушування" країв зображення, оскільки пікселі будуть перерозподілятися на сітці.

Основою растрового представлення графіки є піксель (точка) із зазначенням її кольору. При описі, наприклад, червоного еліпса білому тлі доводиться вказувати колір кожної точки як еліпса, і фону. Зображення представляється у вигляді великої кількості точок - чим їх більше, тим візуально якісніше зображення і розмір файлу. Тобто. одна і навіть картинка може бути представлена ​​з кращою або найгіршою якістю відповідно до кількості точок на одиницю довжини – роздільною здатністю (зазвичай, точок на дюйм – dpi або пікселів на дюйм – ppi).

8.3Векторне зображення як складне зображення

PowerPoint має достатньо можливостей для роботи з векторними зображеннями. Можна використовувати готові зображення, наприклад, з бібліотеки Clipart або Інтернету. Можна малювати векторні зображення самостійно.

Для того, щоб вставити в слайд малюнок із бібліотеки (Clipart), необхідно в меню Вставка вибрати команду Малюнок (Зображення). Бібліотека представляє безліч картинок з різної тематики. Виберіть потрібну вам тему, клацнувши лівою кнопкою миші.

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

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

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

Об'єкти векторного зображення можуть довільно без втрати якості змінювати свої розміри.

9 Основні операції над елементами векторного зображення

9.1 Геометричні перетворення.

Переміщення

Переміщення векторного зображення можна виконати за допомогою миші. Для цього потрібно клацнути лівою кнопкою Миші за зображенням і утримуючи цю кнопку перемістити Об'єкт у потрібне місце слайду.

Також можна скористатися меню Формат. Вибрати опцію Автофігура і У вікні, що відкрилося, вказати Положення об'єкта по горизонталі і вертикалі від верхнього лівого кута або від центру слайда.

Масштабування

Можна змінювати масштаб векторного зображення. При виборі об'єкта мишею в кутах і вздовж меж прямокутника виділення з'являються маркери зміни розміру. При перетягуванні цих маркерів розміри об'єкта змінюються. Щоб змінити розміри об'єкта більш точно, встановіть нові значення висоти та ширини об'єкта у відсотках або сантиметрах. Для цього можна скористатися меню Формат. Вибрати опцію Автофігура і в віконці вказати Розмір.

обертання

Якщо необхідно виконати обертання об'єкта, потрібно вибрати об'єкт і використовувати опцію Дії з меню Малювання. Вибрати команду Повернути/Відобразити, Потім на вибір: Вільне обертання, Повернути ліворуч або Повернути праворуч. Якщо ви вибрали Вільне обертання, то з кутів об'єкта з'являються маркери напряму обертання. При перетягуванні цих маркерів орієнтація об'єкта змінюється.

Відображення

Іноді корисно використовувати такий тип перетворення, як відображення. Для цього потрібно скористатись опцією Дії з меню Малювання. Вибрати команду Повернути/Відобразити та Відобразити зліва направо або Відобразити зверху донизу.

9.2 Угруповання елементів. Порядок елементів.

Для угрупування або розгрупування об'єктів необхідно вибрати об'єкти, перейти в меню Малювання, натиснути кнопку Дії та вибрати команду Згрупувати або Розгрупувати.

Об'єкти, які вставляються в слайд, автоматично розміщуються на різних рівнях. Ці рівні можна спостерігати під час перекриття об'єктів: об'єкт верхнього рівня закриває частину об'єктів нижніх рівнів. Якщо будь-який об'єкт «загубився», його легко знайти, пройшовши по всіх рівнях у циклі натисканням клавіші TAB (вперед) або SHIFT+TAB (назад). , а також на верхній або нижній рівень. Під час малювання об'єкти часто перекриваються, але нижній об'єкт не обов'язково малювати першим, оскільки його можна перемістити на інший рівень.

Виберіть об'єкт, який потрібно перемістити. Якщо об'єкт прихований, знайдіть його, натискаючи клавіші TAB або SHIFT+TAB.

Натисніть на панелі інструментів Малювання кнопку Дії, вкажіть Порядок і виберіть команду На передній план, На задній план, На один рівень вище або На один рівень нижче.

10. Поняття автофігури.

PowerPoint має набір готових фігур, які можна використовувати в презентаціях. Ці фігури можна збільшувати, зменшувати, обертати, перевертати, розфарбовувати, а також комбінувати з іншими фігурами для створення складніших форм. Як правило, фігура забезпечується маркером зміни форми, що дозволяє змінювати найбільш характерний атрибут фігури; наприклад, розмір вістря стрілки.

На панелі інструментів Малювання в меню Автофігури наведено кілька категорій фігур, у тому числі прості та сполучні лінії, основні фігури, елементи блок-схеми, зірки та стрічки, а також виноски. Пункт Додаткові автофігури відкриває розділ автофігур у колекції кліпів. Будь-яку автофігуру в колекції кліпів можна легко перетягнути на слайд.

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

11 Додавання растрових зображень

Відкрийте слайд, до якого потрібно додати малюнок. Щоб додати малюнок на кожен слайд презентації, додайте його до зразка слайдів.

У меню Вставка виберіть команду Зображення та виберіть З файлу.

Знайдіть папку, яка містить малюнок, який потрібно вставити.

Виберіть рисунок. Виконайте одну з таких дій:

  • Щоб ввести малюнок у презентацію, натисніть кнопку Вставка.

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

Настроювання растрового зображення вбудованими засобами Microsoft PowerPoint.

При виборі зображення відображається панель інструментів Настройка изображения. На ній знаходяться кнопки зміни яскравості та контрасту малюнка, обрізання, зміни кольору та додавання кордону.

Виберіть малюнок, який потрібно змінити. Змініть інструменти панелі Налаштування зображення.

Примітка. У PowerPoint за допомогою панелі інструментів Налаштування зображення не можна обрізати, згрупувати та змінити заливку, кордон, тінь та прозорість анімованого малюнка у форматі GIF. Такий малюнок слід змінити у спеціальному редакторі, а потім знову вставити у слайд.

12 Додавання до слайду тексту та кольору

Написи та малюнки – найважливіші елементи слайдів, оскільки вони надають слайдам барвистіший вигляд, що дозволяє привернути увагу слухачів до доповіді. Написи містять текст (це не дивно, чи не так?), малюнки можуть бути картинками з колекції Office, зображеннями, отриманими за допомогою цифрової камери або сканера, або фотографіями, завантаженими з Internet.

Текст може містити важливу інформацію, яку потрібно донести до слухачів. Перш ніж додавати текст до слайда, до слайду необхідно додати напис. PowerPoint надає чотири способи створення напису у слайді.

    Створіть новий слайд і PowerPoint автоматично створить один або кілька написів.

    Створіть підзаголовок на панелі структури презентації та введіть текст. PowerPoint автоматично розмістить введений текст у вікні напису.

    Клацніть на кнопці Напис панелі інструментів Малювання та намалюйте вікно напису.

    Виберіть Вставити→Напис і намалюйте вікно напису в слайді.

12.1 Переміщення, зміна розмірів та видалення напису.

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

Для переміщення, зміни розмірів або видалення напису виконайте таке.

На панелі слайдів клацніть на написі, який потрібно перемістити, видалити або змінити розмір. Навколо напису з'явиться кордон із білими маркерами, а тексті з'явиться I-образный курсор, як показано на рис. 7.

Виберіть один із варіантів.

    Щоб перемістити напис. Розмістіть покажчик миші на межі напису, внаслідок чого він повинен набути форми чотириспрямованої стрілки. Утримуючи ліву кнопку миші, перемістіть вказівник миші туди, де має розташовуватися напис, після чого відпустіть кнопку.

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

Велика кількість елементів HTML призначена для організації контенту і насамперед тексту, який зазвичай складає переважну частину вмісту Web-сторінок. У новій концепції мови основна увага приділяється логічній розмітці тексту або логічному форматуванню. Елементи, пов'язані з такою розміткою контенту, розглянуті у цьому розділі.

Структурування контенту має на увазі його розбиття на логічні блоки. Першим серед таких блоків, як правило, слідує заголовок.

Заголовки. Елементи h1, h2, h3, h4, h5, h6

Існують заголовки першого, другого, третього та інших рівнів, аж до шостого. Організуються вони за допомогою тегів h1, h2, h3, h4, h5, h6:

3аголовок 1-го рівня
Заголовок 2-го рівня
3аголовок 3-го рівня
Заголовок 4-го рівня
Заголовок 5-го рівня
3аголовок 6-го рівня

Використання заголовків різного рівня дозволяє структурувати документ за розділами, розділами, параграфами тощо, полегшуючи читання. Елементи-заголовки різних рівнів за промовчанням відображаються браузером різним розміром шрифту (рис. 3.1).

приклад.

Рівні заголовків 3аголовок 1-го рівня Заголовок 2-го рівня 3аголовок 3-го рівня Заголовок 4-го рівня Заголовок 5-го рівня 3аголовок 6-го рівня

Мал. 3.1.

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

3аголовок 1-го рівня Заголовок 2-го рівня 3аголовок 3-го рівня Заголовок 4-го рівня Заголовок 5-го рівня 3аголовок 6-го рівня

Залежно від переваг браузера деякі заголовки різного рівня можуть відображатися однаково, або навіть заголовки нижчого рівня можуть виглядати помітніше своїх "старших братів". У ряді браузерів, наприклад Opera, розмір і вид шрифтів, що використовуються на Web-сторінці, може задавати сам користувач в налаштуваннях. Далі буде показано, як керувати розміром, типом та іншими характеристиками шрифту програмним шляхом за допомогою стилів, не покладаючись на особливості інших браузерів.

Атрибути:

  • align – задає вирівнювання заголовка на сторінці. Чи не рекомендований. Може приймати чотири значення:
    • left- вирівнює заголовок лівим краєм сторінки (використовується за замовчуванням);
    • right- вирівнює заголовок з правого краю сторінки;
    • center- Вирівнює заголовок по центру;
    • justify- Вирівнює заголовок по ширині сторінки, розтягуючи рядок від правого до лівого поля. Ефект проявляється, коли довжина заголовка більша за ширину листа.
  • id, class
  • lang, dir
  • title
  • style
  • onfocus, onblur - внутрішні події.
Елементи вбудовані та блокові

Усі елементи, відповідальні за подання контенту, прийнято розділяти на великі групи:

  • елементи рівня блоку або блокові (block);
  • вбудовані або елементи рівня тексту (inline).

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

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

    Мал. 3.2.

    Елементи нижчого рівня – рівня тексту – за замовчуванням виводяться один за одним у поточному рядку (рис. 3.3). Вони можуть вбудовуватись у елементи рівня блоку та включати інші вбудовані елементи. Однак вбудовані елементи не можуть містити блокові елементи. Загальне правило: елементи можна вкладати лише в елементи вищого чи свого рівня. До вбудованих відносяться елементи логічного (phrase) та фізичного (fontstyle) форматування тексту, спеціальні елементи та елементи завдання форм.

    Якщо дуже Вам не йдеться,
    Спирайтеся, чимдоведеться,
    Водними займіться процедурами.

    Мал. 3.3. Вбудовані елементи.

    Виділення блоку. Елемент

    Елемент div є найхарактернішим представником елементів рівня блоку. Він використовується для поєднання різного вмісту в логічно цілісну одиницю. Логічний блок - це більше, ніж виділення тексту в абзац. Він може відокремлювати, наприклад, кілька абзаців, які є анотацією статті, новини або зауваження до основного тексту. У поєднанні з атрибутами class та id, роботу яких ми розглянемо пізніше, елемент div дозволяє легко структурувати текст.

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

    Атрибути:

    • align - визначає вирівнювання тексту на сторінці. Чи не рекомендований. Може приймати чотири значення:
      • left
      • right
      • center
      • justify
    • id, class – ідентифікатори в межах документа.
    • lang, dir - інформація про мову та спрямованість тексту;
    • title - заголовок елемента (виводиться браузером як коментар при наведенні курсору на вміст елемента).
    • style - вбудована інформація про стиль.
    • onclick, onblclick, onmouseown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup - внутрішні події.
    Вбудований блок. Елемент

    Аналогом div лише на рівні тексту є елемент span. Основне його призначення - організовувати вбудовані блоки, які можна ефективно форматувати за допомогою стилів.

    Атрибути:

    • ctlparid
    • id, class – ідентифікатори в межах документа.
    • lang, dir - інформація про мову та спрямованість тексту;
    • title - заголовок елемента (виводиться браузером як коментар при наведенні курсору на вміст елемента).
    • style - вбудована інформація про стиль.
    • - Внутрішні події.
    Цитати. Елемент

    Цей елемент є різновидом блочного виділення. Відмінність від div у цьому, що за умовчанням елемент, як цитата, зсувається праворуч стосовно основного тексту. Раніше цей елемент використовувався для створення штучних полів ліворуч від тексту. У разі потреби лапки додаються за допомогою таблиць стилів.

    Атрибути:

    • cite - задає URL-адресу документа або листа, що підлягає цитуванню.
    • id, class – ідентифікатори в межах документа.
    • lang, dir - інформація про мову та спрямованість тексту;
    • title - заголовок елемента (виводиться браузером як коментар при наведенні курсору на вміст елемента).
    • style - вбудована інформація про стиль.
    • onclick, onblclick, onmouseown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup - внутрішні події.
    Організація абзаців. Елемент

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

    Атрибути:

    • align - задає вирівнювання тексту. Чи не рекомендований. Може приймати чотири значення:
      • left- вирівнює текст по лівому краю сторінки (використовується за замовчуванням);
      • right- вирівнює текст праворуч сторінки;
      • center- вирівнює текст центром;
      • justify- Вирівнює текст по ширині сторінки, розтягуючи рядок від правого до лівого поля.
    • id, class – ідентифікатори в межах документа.
    • lang, dir - інформація про мову та спрямованість тексту;
    • title - заголовок елемента (виводиться браузером як коментар при наведенні курсору на вміст елемента).
    • style - вбудована інформація про стиль.
    • onclick, onblclick, onmouseown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup - внутрішні події.

    приклад.

    1 2 3 4 Заголовки, блоки, цитати, абзаци 5 6 7 8

    Частина перша

    9

    Старгородський лев

    10 11 12

    Глава 1

    13

    Безенчук та "Німфи"

    14 15

    16 В повітовому місті N було так багато перукарень і бюро 17 похоронних процесій, що здавалося, жителі міста народжуються лише 18 для того, щоб поголитися, остригтися, освіжити голову вежеталем і 19 відразу ж померти. А насправді в повітовому місті N люди народжувалися, 20 голилися та вмирали досить рідко. Життя міста N було 21 тиша. 22

    23 24

    25 Питання кохання і смерті не хвилювали Іполита Матвійовича 26 Вороб'янінова, хоча цими питаннями з роду своєї служби він 27 відав з дев'ятої ранку до п'ятої вечора щодня з півгодинною 28 перервою для сніданку. 29

    30 31

    32 Хоча похоронних депо було багато, але клієнтура в них була небагата. 33 "Милості просимо" лопнуло ще за три роки до того, як Іполит Матвійович 34 осів у місті N, а майстер Безенчук пив гірку і навіть одного разу намагався 35 закласти в ломбарді свою найкращу виставкову труну. 36

    37 38 Пішоходів треба любити.
    39 Пішоходи становлять більшу частину людства. Мало того – 40 найкращу його частину. Пішоходи створили світ. Це вони звели міста, 41 звели багатоповерхові будівлі, провели каналізацію та водогін, 42 замостили вулиці та висвітлили їх електричними лампами. 43 44 45

    Мал. 3.4.

    Аналізуючи цю Web-сторінку, можна відзначити таке:

    • рядки 7-10: заголовок першого рівня.
    • рядки 11-14: заголовок другого рівня, виконаний за умовчанням дрібнішим шрифтом.
    • рядки 15-22

      .

    • рядки 23-30: блок . Для наочності він виділений іншим кольором тексту та фоном, які задаються за допомогою стилів CSS, а також зміщений на 50 пікселів ліворуч від ряду інших елементів.
    • рядки 31-36: звичайний абзац, створений за допомогою елемента

      .

    • рядки 37-43: цитата, створена за допомогою елемента За замовчуванням зсунуто праворуч по відношенню до основного тексту. Для більшої наочності виділено курсивом, який задається за допомогою стилів CSS.

    Всі перелічені елементи входять до елементу. У термінах програмування кажуть, що цей елемент є батьківським для вкладених елементів-нащадків (а також «дітей» або «спадкоємців»).

    , . Елементи-нащадки успадковують низку властивостей елемента-батька. Наприклад, , ,

    Наслідують від значення лівої межі. Елементи і випадають із цього списку, оскільки для явно задано ліве поле, а має зміщення вправо за замовчуванням. А ось елемент

    Який входить у , успадковує від нього зміщену ліву межу (рис. 3.4).

    Переклад рядка. Елементи
    , , Елемент

    Як говорилося раніше, місце перенесення рядків визначається браузером автоматично з урахуванням розмірів вікна, шрифтів тощо. Для випадків, коли необхідне примусове переведення рядка, передбачено елемент
    . Зустрівши тег
    , браузер розпочне виведення наступного тексту з нового рядка.

    Примітка:

    У XHTML, де тег, що закриває, обов'язковий, з положення виходять, записуючи тег у формі
    , або відразу за відкривають вводять закриває тег

    .

    Атрибути:

    • clear - вказує, де має з'явитися перенесений рядок. Цей атрибут враховує об'єкти, що прикріплюються (таблиці, зображення тощо). Не рекомендований. Може приймати чотири значення:
      • none- наступний рядок тексту відображається звичайним чином, на найближчому вільному знизу просторі (за замовчуванням);
      • left- наступний рядок тексту відображається на найближчому вільному просторі під прикріпленим біля лівого краю об'єктом;
      • right- наступний рядок тексту відображається на найближчому вільному просторі під прикріпленим у правого краю об'єктом;
      • all- наступний рядок тексту відображається на найближчому вільному просторі під прикріпленим біля будь-якого краю об'єктом;

    Розглянемо на прикладі використання елемента
    .

    Нехай є вихідний документ, в якому об'єкт-зображення не прикріплений до якогось краю документа (не визначено атробут align) і, відповідно, текстом не обтікається (рис. 3.5):

    приклад.

    1 2 3 4 Використання елемента br з різними атрибутами 5 6 7 8 На заняттях Мірзакарим Санакулович Норбеков часто повторює: 9 "Я звичайна людина, така ж, як усі. Нічим не краще і, сподіваюся, 10 нічим не гірше за вас. Усього, чого я досяг у житті, ви теж можете досягти, 11 важливо тільки цього захотіти! 12 А він досяг багато чого. Сьогодні М. С. Норбеков - доктор 13 психології, доктор педагогіки, доктор філософії в медицині, професор, 14 дійсний член і член-кореспондент низки російських та зарубіжних 15 академій, автор багатьох запатентованих винаходів та відкриттів у науці. 16 Втім, усі ці звання сам він називає "собачими регаліями", 17 бо не заради визнання він працює. 18 Мірзакарим Санакулович – справжній вчений-дослідник. 19 Коло його інтересів дуже широке. Багато хто дивується з того, як все це 20 може поєднуватися в одній людині: художник, композитор, письменник, кінорежисер, 21 артист, спортсмен, тренер, що має чорний пояс по карате другий дан і чорний 22 пояс по сам чон до дев'ятого дан. Але найголовніше, автор книги - фахівець із 23 суфійської медицини та практики, однієї з найдавніших серед усіх існуючих. 24 25

    Мал. 3.5. Вид документа із зображенням без додаткових атрибутів

    Тепер організуємо обтікання зображення текстом, прикріпивши його до лівого краю. Для цього зображення вкажемо атрибут align=left , тобто в HTML-коді документа рядок 7 замінимо на рядок . В результаті отримаємо текст, що обтікає зображення (рис. 3.6):

    Мал. 3.6. Вид документа із прикріпленим зображенням.

    Застосування елемента br із заданим атрибутом clear , визначає чи буде розташований за елементом текст і далі обтікати об'єкт, чи виводитися під ним. У наведеному нижче прикладі, використання елемента br без вказівки атрибута clear (що рівнозначно вказівкою clear=none) не перериває обтікання текстом, а лише здійснює перенесення на наступний рядок. Вставимо елемент br перед пропозицією "А досяг він дійсно багато чого." (Рис. 3.7):

    Мал. 3.7. Демонстрація застосування елемента br.

    Використання елемента br з атрибутом clear=left перерве обтікання текстом і продовжить виведення тексту відразу під прикріпленим об'єктом (рис. 3.8):

    Мал. 3.8. Застосування елемента br із атрибутом clear=left

    Елемент

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

    Текст нестерпного рядка

    Закриваючий тег є обов'язковим.

    Якщо рядок занадто довгий, то з'явиться горизонтальна лінійка скролінгу (прокрутки). У невеликих фразах, щоб уникнути перенесення, можна використовувати нерозривний пробіл (один або кілька), який вставляється як символ-літерал (у десятковій формі, в шістнадцятковій формі А0;).

    Елемент

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

    - Гарна жінка, - сказав Остап, - мрія поета. Провінційна безпосередність. У центрі таких субтропіків давно вже немає, але на периферії, на місцях - ще зустрічаються.

    На практиці простіше використовувати тільки елемент, виділяючи їм частину рядка, що не підлягає перенесенню. Попередній приклад у цьому випадку було б записано так:

    - Гарна жінка, - сказав Остап, - мрія поета. Провінційна безпосередність. У центрі таких субтропіків давно вже немає, але на периферії, на місцях - ще зустрічаються.

    Оновив та перевірив коректність створення списків 28.02.2010 р. (А.К.)

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

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

    Досвідчений користувач редактора Word, можливо, посміхнеться і скаже: що тут складного? Ввів текст для заголовка, надав йому необхідний шрифт і форматування або застосував до нього стиль заголовка необхідного рівня та натиснув кнопку "Нумерація" на панелі форматування. Все так, але в результаті в документі утворюється безліч різних невпорядкованих стилів, в яких можна загубитися і ніяк не сприяють покращенню зовнішнього вигляду документа. Адже є ще й багаторівневі списки, які представляються багатьом абсолютно заплутаними та незрозумілими у застосуванні.

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

    Отже, переді мною стояло завдання використовувати в документі нумеровані заголовки чотирьох різних рівнів для позначення розділів документа. Ці розділи мали також свої нумеровані підрозділи. Ось зразок правильних багаторівневих нумерованих заголовків:

    Насамперед, зберігаємо новий документ як шаблон (розширення. dot). І працюємо вже із цим шаблоном.

    Наступне, що потрібно зробити, це відредагувати стандартні стилі заголовків, вбудовані в наш шаблон. Для того, щоб побачити стилі, що використовуються в шаблоні або документі, виберіть з пункту меню "Формат" (Format) підпункт (команду) "Стилі та форматування" (Styles and Formatting) . Праворуч від робочої області програми з'явиться однойменна область завдань, як на скріншоті нижче:

    Стандартно відображаються основні стилі трирівневих заголовків та стиль "Звичайний", тобто стиль простого тексту документа. Щоб відобразити більше стилів у цій області, ви можете вибрати в списку "Показати" (Show) в нижній частині області завдань параметр "Спеціальне" (Custom) . Відкриється таке діалогове вікно:

    Якщо встановлено категорію "Доступні стилі" (Available Styles) , то в області "Відображувані стилі" відображаються лише ті стилі, які використовуються під час створення цього документа. Зазвичай галочками відзначено три рівні заголовків. Якщо вам потрібно використовувати четвертий рівень заголовка, позначте прапорцем "Заголовок 4". Цілком можливо, що в області "Стилі, що відображаються" не буде такого стилю. У цьому випадку виберіть категорію "Всі" (All Styles) і позначте прапорцями лише заголовки з 1 по 4 та стиль "Звичайний", а також ті стилі, які були створені особисто вами. Закрийте вікно "Параметри формату" клацанням миші на кнопці ОК.

    Другим нашим кроком буде тонке налаштування стилів заголовків. Заголовкам спочатку присвоєно шрифти з різним форматуванням. Для створення програмного документа, згідно з ДСТУ, необхідно використовувати єдиний шрифт для всього документа. Я використовую шрифт Times New Roman 14 пунктів для стилю "Звичайний". Для заголовків я теж використовуватиму цей шрифт, змінюючи лише його розмір і інтервали.

    Щоб змінити стиль заголовка, наведіть вказівник миші на заголовок 1 в області завдань. Напис з'явиться в рамці, а праворуч від нього з'явиться кнопка з трикутником. Клацніть на цьому трикутнику, і перед вами відкриється контекстне меню для цього стилю. Виберіть команду "Змінити" (Modify) і з'явиться діалогове вікно "Зміна стилю".

    У полі "Основан на стилі" (Style based on) виберіть зі списку, що розкривається, значення "Ні" (No style) . Залишіть поле "Стиль наступного абзацу" (Style for following paragraph). Потім натисніть кнопку "Формат" у нижній частині вікна та виберіть потрібні команди, щоб змінити налаштування. Для зміни шрифту використовуйте команду "Шрифт", для зміни абзацного відступу та інтервалів передбачено команду "Абзац". Зробіть необхідні вам зміни. Я, наприклад, для "Заголовка 1" встановив наступні параметри: шрифт - Times New Roman напівжирний 18 пт, абзац - вирівнювання по лівому краю, відступ першого рядка на 1,5 см, інтервал перед 0 пт, після 3 пт, міжрядковий подвійний, табуляція – встановити 3,5 см з лівого краю без заповнювача.

    Якщо ви хочете застосувати зроблені зміни для шаблону, на основі якого ви потім створюватимете ваші документи, то поставте прапорець у полі "Додати до шаблону" (Add to template), інакше всі ці зміни будуть застосовані лише до активного на даний момент документа.

    Аналогічно я змінив стиль заголовків, що залишилися, відповідно зменшивши для кожного з них розмір шрифту: "Заголовок 2" - напівжирний 16 пт, "Заголовок 3" - напівжирний 15 пт, "Заголовок 4" - напівжирний 14 пт.

    Таким чином, я налаштував потрібні мені у шаблоні стилі заголовків. Тепер потрібно було створити стиль для багаторівневих списків.

    З меню "Формат" виберіть команду "Список" (Bullets and Numbering) . Відкриється однойменне діалогове вікно. Перейдіть на вкладку "Список стилів" (List Styles) і натисніть кнопку "Додати" (Add) . Перед вами відкриється вікно "Створення стилю" (New Style) зі знайомим інтерфейсом та кнопками:

    Зверніть увагу на поле "Застосувати форматування до" (Apply formatting to). Стандартно там буде встановлено значення "Рівень 1". Задаючи форматування нумерації, ви застосовуєте його лише до стилю "Заголовок 1". Відповідно, вибравши в цьому полі наступне значення - "Рівень 2" - ви повинні задати і для нього форматування, яке раніше було задано для "Заголовка 2".

    У полі "Ім'я" (Name) введіть назву вашого стилю (нехай буде "Нумерація_заголовків"). Потім натисніть кнопку "Формат" у нижній частині вікна. Доступними будуть лише три команди: "Шрифт", "Нумерація" та "Поєднання клавіш".

    Виберіть "Нумерація" (Numbering) і перед вами відкриється діалогове вікно "Список". Клацніть на будь-якому зразку списку і кнопка "Змінити" (Customize) в нижній частині вікна стане активною. Натисніть на неї. Відкриється нове вікно, показане на скріншоті нижче.

    У цьому вікні ми маємо налаштовувати стилі нумерації кожного із заголовків. Виберіть потрібний рівень, наприклад, 1. У вікні відобразяться параметри, які застосовуються до цього рівня. Тут можна налаштувати шрифт нумерації, абзацний відступ. Якщо це вікно відкрилося в короткому вигляді, натисніть кнопку "Більше" (More) і будуть доступні додаткові параметри налаштування.

    Виберіть "Шрифт". Перед вами з'явиться вже знайоме діалогове вікно, в якому встановіть такі параметри, які ви задавали для "Заголовка 1" (Times New Roman, жирний, 18). Обов'язково зніміть усі прапорці у групі "Видозміна" (Effects) - вони будуть блідого кольору, задайте колір тексту, відсутність підкреслення та перевірте всі інші налаштування в інших вкладках вікна.

    У групі "Положення номера" (Number Position) встановіть положення по лівому краю на 1,5 см. У групі "Положення тексту" (Text Position) встановіть табуляцію після 3,5 см, відступ 0 см. Виберіть зі списку в параметрі " Зв'язати рівень зі стилем" (Link level to style) значення "Ні". Значення в полі "Символ після номера" (Follow number with) залиште як є знак табуляції.

    Після вибору другого рівня для списку, у полі "Формат номера" може бути відображена буква або інший символ. Для наших же цілей (створення шаблону за ГОСТом) вам потрібно стерти значення в полі, потім в полі "Попередній рівень" вибрати значення "Рівень 1", щоб у нас для другого рівня заголовка з'явилася перша цифра, поставте крапку і в поле "Нумерація" " Виберіть "1,2,3" - у полі "Формат номера" після цифри з точкою з'явиться наступний номер 1.

    Знову натисніть кнопку "Шрифт" і встановіть ті самі значення, які ви встановлювали для стилю "Заголовок 2" (Times New Roman, жирний, 16).

    Повторіть ці дії для решти 2 рівнів: 3 та 4.

    Зверніть увагу, коли налаштовуватимете заголовки 3 і 4, що ви повинні спочатку стерти поле "Формат номера", послідовно вибрати наявні значення в полі "Попередній рівень": спочатку "Рівень 1", поставити крапку, потім "Рівень 2" (а для Заголовка 4 - та "Рівень 3") і далі вибрати значення "1,2,3".

    Після закінчення натисніть кнопку ОК. В області завдань "Стилі та форматування" з'явиться новий елемент (стиль) з вашим ім'ям "Нумерація_заголовків".

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

    У розділі "Обмеження на форматування" встановіть прапорець "Обмежити набір дозволених стилів" та натисніть посилання "Налаштування". Відкриється діалогове вікно "Обмеження форматування". Встановіть прапорці в цьому вікні на стилі, що є у вашому шаблоні (які ви створили або які ви хочете мати). У нашому випадку це 4 рівні заголовків та стиль "Нумерація_заголовків". Натисніть кнопку "ОК". Діалогове вікно закриється і з'явиться діалог із запитанням: "Можливо, документ містить заборонені стилі або форматування. Видалити їх?". Виберіть "Так". Після цього натисніть кнопку "Так, увімкнути захист". Пароль задавати необов'язково (на ваш розсуд).

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

    Останнє, що нам потрібно зробити, - перевірити на практиці роботу стилів. Для цього створіть новий документ на основі цього шаблону, введіть у документ кілька рядків тексту. Введіть щонайменше сім рядків, щоб перевірити різні рівні заголовків. Поставте курсор миші на перший рядок тексту та застосуйте до неї стиль "Заголовок 1".

    Потім застосуйте до цього тексту створений вами стиль "Нумерація_заголовків". Повторіть ці дії в заданій послідовності (Заголовок -> Нумерація_заголовка) для інших рядків, щоразу застосовуючи для них різні рівні. Повинен вийти приблизно такий ієрархічний список:

    Як ви можете помітити, у нижній частині вікна у мене з'явився рівень "Заголовок 2", але з порушеною нумерацією - 1.1. Таке буває. І виправити це дуже просто. Достатньо клацнути правою кнопкою миші на цьому номері, щоб відобразилося контекстне меню. Виберіть у цьому меню команду "Продовжити нумерацію" (Continue previous list) та заголовок отримає правильний номер, у даному випадку - 2.2.

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

    Як зразок прикріплюю шаблон, що вийшов у мене, з налаштованими стилями заголовків і списку.

    Для створення автоматичного змісту нам потрібно спочатку призначити стилі для кожного елемента тексту. Це досить просто, але доведеться трохи повозитися.

    Word 2007: у вкладці Головна в блоці Стилі клацаємо по значку стрілки в нижньому правому кутку:

    Word 2003: у меню Формат клацаємо по пункту Стилі та форматування (на малюнку просто Стилі – не звертайте уваги):

    Тепер у правій частині вікна з'явилося меню Стилі. Для початку створимо новий стиль для оформлення нашого основного тексту – клацаємо по кнопці Створити стиль у нижньому правому куті меню Стилі :

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

    Ім'я: Параграф (ви можете придумати будь-яке інше)

    Стиль: Абзацу

    Заснований на стилі: Звичайний

    Стиль наступного абзацу: Параграф (або ваш варіант назви стилю)

    Шрифт: Times New Roman (тут справа смаку)

    Кегль: 14 пунктів

    Вирівнювання: По ширині

    Інтервал: Півторний

    Але це ще не все, потрібно встановити параметри абзацу. Для цього в правому нижньому куті діалогового вікна Створення стилю клацаємо по кнопці Формат та вибираємо пункт Абзац:

    У діалоговому вікні Абзац у вкладці Відступи та інтервали виставляємо наступні параметри:

    Перший рядок: Відступ, 1,25 см

    Інтервал: Після, 25 пунктів

    Відзначаємо галкою: Не додавати інтервал між абзацами одного стилю

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

    Натискаємо кнопку OK в даному діалоговому вікні і ще раз у вікні Створення стилю.

    Чудово, стиль створений! Спробуємо тепер застосувати його.

    Виділяємо частину основного тексту та в меню Стилі клацаємо за стилем Параграф:

    Як бачимо, текст набув вигляду, який ми заздалегідь поставили для нього в параметрах стилю. Зверніть увагу, наскільки відформатований текст відрізняється від решти.

    Як ви вже здогадалися, ми задаємо стиль Параграф для основного тексту. Тепер переходимо до створення іміджу для підрозділів.

    У меню Стилі знову клацаємо по кнопці Створити стиль і задаємо для нього такі параметри:

    Ім'я: Підрозділ

    Стиль: Абзацу

    Заснований на стилі: Заголовок 2 (потрібно для створення змісту)

    Стиль наступного абзацу: Параграф (або ваш варіант назви стилю основного тексту)

    Шрифт: Verdana

    Кегль: 14 пунктів

    Стиль: Напівжирний

    Вирівнювання: По лівому краю

    Інтервал: Півторний

    Не закриваючи це вікно, клацаємо по кнопці Формат і вибираємо пункт Абзац .

    У вкладці Відступи та інтервали задаємо наступні параметри:

    Перший рядок: Відступ, 1,5 см

    Інтервал: Перед, 0 пункту; Після, 20 пунктів

    У вкладці Положення на сторінці ставимо галки навпроти пунктів:

    · заборона висячих рядків (щоб рядок, що не вміщається на даній сторінці, не перескакував на наступну сторінку, бо некрасиво:)

    · Не відривати від наступного (щоб заголовок не відривався від основного тексту)

    · не розривати абзац (щоб весь заголовок розміщувався на одній сторінці)

    Закриваємо віконця створення стилю за кнопками OK і задаємо для всіх заголовків другого рівня стиль Підрозділ:

    Залишилося створити стиль для заголовків першого рівня – заголовків розділів. Задаємо стиль Розділ аналогічно до створення попереднього стилю.

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

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

    HTML заголовки бувають 6-ти рівнів, кожен із яких відрізняється величиною. За створення заголовка відповідає тег і парний тег, що його закриває. Де x – це число від 1 до 6, яке визначає рівень заголовка.

    Таким чином, тег визначає найбільший розмір заголовка, а найменший тег. На малюнку ви можете бачити всі рівні заголовків від 1-го до 6-го.

    В основному застосовують заголовки вищих рівнів, дуже рідко застосовуються заголовки 6-го та 5-го рівнів. Спробуємо застосувати цей тег практично і зробимо заголовок для HTML сторінки. Назвемо її, наприклад, "Тестова сторінка" і застосуємо до неї заголовок 1-го рівня.

    Для цього в код нашої веб-сторінки, яку ми створювали в уроці, одразу після тега вставимо наступне Тестова сторінка. Весь код виглядатиме так:

    Моя перша сторінка Тестова сторінка Ось ви і створили свою першу сторінку!

    Можете спробувати змінювати цифри в тезі заголовка від 1 до 6 і подивитися, як змінюватиметься величина тексту. Не забудьте, що після кожної зміни в коді, html файл необхідно зберегти, а щоб побачити внесені зміни необхідно оновити веб-сторінку в браузері. Одночасно з величиною тексту тег заголовка задає відступи та робить текст жирним.

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

    Матеріал підготовлений порталом:

    переглядів