Створюємо текст і списки і біжучий рядок - верстка html

Введення і форматування тексту

Переконайтеся, що у вас відкрита домашня сторінка зробленого в минулому досвіді, WEB сайту в режимі редагування Конструктор (Design). Якщо це не так, двічі клацніть мишею на файлі index.htm в поданні WEB сайту Папки (Folders).

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

Введіть наступний текст:

Ми раді вітати вас на нашому WEB сайті Enter

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

Встановіть текстовий курсор на першому рядку введеного тексту і в що відкривається переліку Стиль (Style) на панелі інструментів Форматування (Formatting) виберіть Заголовок 2 (Heading 2). Рядок буде відформатована даним стилем.

Щоб побачити знаки кінця абзацу та роздільник рядка, клацніть на кнопці абзацу на панелі інструментів Стандартна (Standard). При повторному натисканні на цю кнопку роздільники будуть укриті.

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

У другому рядку набраного тексту виділіть за допомогою миші або клавіатури 1-і чотири слова Тут ви можете відшукати, а потім оберіть в меню команду Формат - Шрифт (Format - Font). На дисплеї з'явиться діалог Шрифт (Font).

Оберіть якісь неординарні опції для виділеного шматка, наприклад: шрифт Arial, стиль Напівжирний (Bold).

Натисніть кнопку ОК, щоб закрити діалог і застосувати обрані опції до тексту.

Якщо в поданні Сторінка (Page) ви виберете режим Код (Code) або З поділом (Split), натиснувши відповідну кнопку в нижній частині вкладки index.htm, то побачите, як обрані атрибути тексту будуть збережені у вигляді відповідних тегів.

Переконайтеся, що текстовий курсор залишився на другому рядку набраного раніше тексту і виберіть в меню команду Формат - Абзац (Format - Paragraph). На дисплеї з'явиться діалог Абзац (Paragraph).

У цьому діалозі можна поміняти опції, які стосуються повністю до поточного абзацу. Відкривається перелік Вирівнювання (Alignment) задає метод вирівнювання рядків на сторінці. Групи елементів управління Відступ (Indentation) і Інтервал (Spacing) створені для регулювання відступів і інтервалів для рядків абзацу.

Натисніть кнопку ОК, щоб закрити діалог Абзац (Paragraph).

Оберіть в меню команду Формат - Межі та заливка (Format - Borders and Shading). На дисплеї з'явиться діалог Межі і заливка (Borders and Shading).

Вкладка Кордон (Borders) містить елементи управління, що дозволяють поставити кордон навколо тексту абзацу.

У групі елементів управління Тип (Setting) виберіть позицію рамка (Box).

У переліку Стиль (Style) виберіть тип рамки, наприклад подвійна (Double).

Оберіть вкладку Заливка (Shading) для вибору кольору і методу заливки фону абзацу.

У відчиненому списку Колір фону (Background color) виберіть випадковий колір фону.

На даній вкладці для всього абзацу можна також задати Колір тексту (Foreground color) і

встановити випадковий Фоновий малюнок (Background picture).

Натисніть кнопку ОК, щоб закрити діалог і застосувати обрані опції.

На сторінці має бути видно введений текст, але видно і смуги розмітки.

Знову перейдіть в режим Конструктор (Design) подання Сторінка (Page), натиснувши відповідну кнопку в нижній частині вкладки index.htm, щоб повернутися до редагування сторінки.

Зараз приберемо форматування з другого абзацу.

Виділіть за допомогою миші або клавіатури другий абзац тексту.

Оберіть в меню команду Формат - Видалити оформлення (Format - Remove Formatting). Шрифт абзацу буде приведений до початкового, що застосовується за умовчанням.

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

Оберіть в меню команду Формат - Межі та заливка (Format - Borders and Shading). На дисплеї з'явиться діалог Межі і заливка (Borders and Shading).

У переліку Стиль (Style) виберіть Ні (None).

Оберіть вкладку Заливка (Shading) і в що відкривається переліку Колір фону (Background color) виберіть колір Авто (Automatic).

Натисніть кнопку ОК, щоб закрити діалог Межі і заливка (Borders and Shading) і застосувати обрані опції. Фоновий колір і рамка в поточному абзаці будуть видалені.

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

Ми хочемо запропонувати Enter

Тури по закордонним країнам Enter

Тури по країнах СНД Enter

Путівки на найкращі курорти України Enter

Авіаквитки на внутрішні і міжнародні рейси Enter

Встановіть текстовий курсор на першому рядку введеного тексту і в що відкривається переліку Стиль (Style) на панелі інструментів Форматування (Formatting) виберіть Заголовок 2 (Heading 2). Рядок буде відформатована даним стилем.

Зараз виділіть інші рядки введеного тексту - з другої по п'яту - за допомогою миші або клавіатури і натисніть кнопку на панелі інструментів Форматування (Formatting). Набраний текст буде перетворений в маркований список.

Вид маркованого переліку можна обрати в діалозі Характеристики переліку (List Properties), який викликається командою меню Формат - Перелік (Format - Bullets and Numbering).

На вкладці Графічні маркери (Picture Bullets) для переліку можна обрати начерк маркера або з поточної теми, або задати будь-який малюнок. Кількість вкладок в діалозі Характеристики переліку (List Properties) знаходиться в залежності від обраної теми. Тема за раніше вибирається в області завдань після виконання команди меню Формат - Тема (Format - Theme).

На вкладці Нумерація (Numbers) діалогу Характеристики переліку (List Properties) можна обрати варіант нумерації для створення упорядкованого переліку. Щоб стрімко перетворити текст в нумерований список, можна користуватися кнопкою у вигляді списку або обрати відповідний стиль у відчиненому списку Стиль (Style) на панелі інструментів Форматування (Formatting).

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

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

Встановіть текстовий курсор на сторінці в початок рядка, перед словами Ми хочемо запропонувати, і виберіть команду меню Вставка - Горизонтальна лінія (Insert - Horizontal Line). На сторінку буде вставлена ​​горизонтальна лінія.

Два рази клацніть на розділової смуги. На дисплеї з'явиться діалог Характеристики горизонтальної смуги (Horizontal Line Properties).

Група елементів управління Розмір (Size) дозволяє поміняти ширину (Width) і висоту (Height) смуги. За допомогою перемикачів Вирівнювання (Alignment) лінію можна вирівняти по лівому краю (Left), по центру (Center) або по правому краю (Right). Прапор Суцільна лінія (без заливки) (Solid line (no shading)) робить лінію суцільний.

У відчиненому списку Колір (Color) виберіть випадковий колір для смуги і натисніть кнопку ОК. Розділова лінія буде пофарбована обраним кольором.

Як надати тексту ефект біжучого рядка

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

Виділіть перший рядок набраного на сторінці тексту Ми раді вітати вас на нашому WEB сайті.

Оберіть команду меню Вставка - WEB компонент (Insert - WEB Component). На дисплеї з'явиться діалог Вставка компонента WEB вузла (Insert WEB Component).

У списку Тип компонента (Component type) можна обрати один з доступних компонент, а в переліку Оберіть ефект (Choose an effect) - варіант обраного компонента. На даний момент обрано динамічний ефект, що біжить рядок (Marquee).

Натисніть кнопку Готово (Finish). На дисплеї з'явиться діалог Характеристики біжучого рядка (Marquee Properties).

В поле введення Текст (Text) знаходиться текст виділеного шматка, який буде виводитися як біжить рядок. За допомогою перемикача Напрям (Direction) можна обрати напрямок руху рядки: справа наліво (Left) або зліва направо (Right). У групі елементів управління Швидкість (Speed) регулюється затримка між послідовними зрушеннями тексту (Delay) і величина зсуву в пікселах (Amount). Група елементів управління Поведінка (Behavior) задає режим переміщення тексту: при установці перемикача прокрутка (Scroll) текст часом пробігає по екрану, як на інформаційному табло, при установці перемикача зрушення (Slide) текст переміщається до зворотного кордону, зупиняється і залишається на дисплеї, при установці перемикача поперемінно (Alternate) текст переміщається всередині кордонів області біжучого рядка. Група елементів управління Розмір (Size) визначає ширину (Width) і висоту (Height) прямокутної області біжучого рядка. Якщо належні прапорці скинуті, то значення визначаються за розміром тексту. Встановлений прапор Безперервно (Continuously) в групі елементів управління Повтори (Repeat) задає необмежене число повторень прокрутки рядки; якщо прапор скинутий, то в поле введення з лічильником задається кількість повторень. Відкривається перелік Колір фону (Background color) визначає колір фону в області переміщення біжучого рядка.

Натисніть кнопку ОК, щоб закрити діалог Характеристики біжучого рядка (Marquee Properties). Текст заголовка зовні не поміняється, але буде перетворений в окремий компонент.

Поверніться до режиму редагування сторінки, клацнувши мишею на кнопці Конструктор (Design) в нижній частині вкладки index.htm.

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

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

Оберіть команду меню Вставка - Файл (Insert - File). На дисплеї з'явиться стандартний діалог відкриття файлу Вибір файлу (Select File).

У відчиненому списку Тип файлів (File Туре) виберете тип Текстові файли (* .txt) (Text files (* .txt)).

Знайдіть і виділіть відповідний текстовий документ.

Для прикладу можна взяти один з текстових документів з папки, в якій встановлена ​​операційна система Windows.

Натисніть кнопку Відкрити (Open). Діалог Вибір файлу (Select File) закриється, і на дисплеї з'явиться діалог Перетворення тексту (Convert Text).

Цей діалог дозволяє обрати метод перетворення тексту з файлу. За замовчуванням пропонується варіант відформатовані абзаци (Formatted Paragraphs). Це означає, що кожен абзац початкового тексту буде перетворений в окремий абзац на сторінці. При цьому для форматування буде застосований стиль З форматом (Formatted). Нагадаємо, що стиль тексту вибирається і відображається у відчиненому списку Стиль (Style) на панелі інструментів Форматування (Formatting).

Можливі й інші варіанти:

один відформатований абзац (One formatted paragraph) - перетворення всього тексту в єдиний абзац з впровадженням роздільників рядків і стилю З форматом (Formatted);

звичайні абзаци (Normal paragraphs) - перетворення початкового тексту в окремі абзаци зі стилем Normal;

звичайні абзаци з розривами рядків (Normal paragraphs with line breaks);

НЕ перетворювати (Treat as HTML) - вставка початкового тексту конкретно в форматі HTML.

Натисніть кнопку ОК, щоб закрити діалог Перетворення тексту (Convert Text). Текст з файлу буде вставлений в поточну позицію.

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

Додаткова інформація по темі

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

Схожі статті