Код фона для сайта html: Как добавить фоновый рисунок на веб-страницу?

Содержание

seodon.ru | Учебник HTML — Меняем цвет текста и фона

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега <P> нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style, который позволит нам менять цвет там, где мы захотим.

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

  • Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
  • HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

Раньше в HTML рекомендовалось использовать только безопасную палитру цветов, которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета. Поэтому в данном учебнике я буду всегда использовать именно HEX-коды цветов.

Как изменить цвет текста?

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

<тег>…</тег> — указание цвета текста по имени.

<тег>…</тег> — указание цвета текста по коду.

И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения цвета текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета текста</title>
</head>
<body>
<h5>Красный текст заголовка</h5>
<p>Синий текст параграфа.</p>
<p>
 <em>Зеленый курсив.</em>
 <span>Красный текст.</span> 
</p>
</body>
</html>

Результат в браузере

Красный текст заголовка

Синий текст параграфа.

Зеленый курсив. Красный текст.

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

<тег>…</тег> — указание цвета фона по имени.

<тег>…</тег> — указание цвета фона по коду.

Пример изменения цвета фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета фона</title>
</head>
<body>
<h5>Заголовок.</h5>
<p>Параграф.</p>
<p>
 <b>Жирный текст.</b>
 <span>Обычный текст.</span> 
</p>
</body>
</html>

Результат в браузере

Заголовок.

Параграф.

Жирный текст. Обычный текст.

Когда меняешь цвет фона элементов, то становится очень хорошо видно, какую на самом деле ширину занимает каждый из них. Как видите, блочные элементы, такие как параграфы и заголовки, в основном занимают всю доступную ширину, даже если они содержат очень мало текста, а вот встроенные (inline) теги по ширине равны своему содержимому. Кстати, последний параграф в примере тоже занимает всю ширину, просто его фон прозрачный, поэтому сквозь него виден фон страницы. Вообще, фон всех элементов на странице, в которых он не указан явно — прозрачный, вот и все.

Домашнее задание.

  1. Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
  2. Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
  3. Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
  4. Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
  5. Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).

Посмотреть результат → Посмотреть ответ

Как изменить шрифт?← Содержание →Выравнивание содержимого

[HTML] — Как применить фон GIF к веб-сайту с помощью

Узнайте, как использовать HTML и CSS для применения фона GIF к вашему веб-сайту с помощью этого фрагмента кода и рекомендаций.

👩‍💻 Технический вопрос

Спросил 3 месяца назад в HTML by Лаура

 

как применить фон GIF

HTML CSS фон GIF

Дополнительные вопросы по кодированию в HTML

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 4 дня назад в HTML by Heather

 

центрировать мои 3 изображения на одной строке

HTML CSS изображение центр флексбокс

👩‍💻 Технический вопрос

Спросил 8 дней назад в HTML by Achilla

 

Какой код поставить слоган рядом с логотипом

HTML CSS логотип слоган позиционирование

👩‍💻 Технический вопрос

Спросил 8 дней назад в HTML by Rebekah

 

объясните, как работает "span"

HTML охватывать CSS дизайн функциональный

👩‍💻 Технический вопрос

Спросил 14 дней назад в HTML Хана

 

разница между тегами div и span

HTML див охватывать блочный уровень встроенный

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML by Thomas

 

Написать стандартную викторину с использованием HTML, CSS и JavaScript

HTML CSS JavaScript контрольный опрос веб-разработка

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML от Боитумело

 

как перейти от списка к горизонтальному

список горизонтальный CSS показать свойство

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML Наталия

 

что такое aria-label?

ария-метка доступность программы для чтения с экрана вспомогательные технологии кнопка

👩‍💻 Технический вопрос

Спросил 24 дня назад в HTML Джози

 

как центрировать изображение

HTML CSS центр изображение

👩‍💻 Технический вопрос

Спросил 25 дней назад в HTML by Shelah

 

что делает элемент нижнего колонтитула

нижний колонтитул элемент документ раздел веб-страница

👩‍💻 Технический вопрос

Спросил 25 дней назад в HTML Тинсэ

 

когда использовать span в html

HTML охватывать встроенные элементы CSS JavaScript

👩‍💻 Технический вопрос

Спросил 25 дней назад в HTML от Lungelo

 

что такое

HTML тег выделения форматирование текста

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML Андреана

 

что делает

HTML див контейнер блочный уровень макет

👩‍💻 Технический вопрос

Спросил 27 дней назад в HTML by Shelah

 

что делает элемент span

HTML пролетный элемент встроенный элемент CSS стиль

👩‍💻 Технический вопрос

Спросил 27 дней назад в HTML Шарлотта

 

уменьшить поля текста абзаца html css

HTML CSS допуск текстовый элемент значение пикселя

👩‍💻 Технический вопрос

Спросил 30 дней назад в HTML by Mule

 

Как я могу добавить комментарии к html коду?

HTML Комментарии код

👩‍💻 Технический вопрос

Спросил 30 дней назад в HTML Шела

 

что делает span

HTML ярлык в соответствии CSS стиль

👩‍💻 Технический вопрос

Спросил 30 дней назад в HTML от Lance

 

что такое и как это работает?

HTML мета кодировка кодировка

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML Шела

 

что делает элемент div и span

div охватывать группировка в соответствии веб-страница

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML by Shelah

 

что делает элемент em?

HTML Эм акцент форматирование текста

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML Шела

 

что делает элемент hr

HTML элемент часов горизонтальная линия

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML by Mahsa

 

как комментировать в html

HTML комментарий синтаксис код объяснение

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML по ОФФА

 

Напишите мне код панели пользователя

HTML CSS JavaScript панель управления пользователя макет

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML by OFFA

 

Напишите мне страницу предварительного просмотра заказа для веб-сайта продуктов питания

еда заказ предварительный просмотр стол кнопка

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML по ОФФА

 

Напишите мне код страницы регистрации

регистрация форма CSS HTML отправить-форма

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML by OFFA

 

Напишите мне код страницы входа

HTML CSS JavaScript страница авторизации проверка формы

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML Шэрон

 

html как сделать центрированный список горизонтальным?

HTML CSS центрированный список горизонтальный список

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML by Sharon

 

html как центрировать горизонтальный список?

HTML CSS центр горизонтальный список

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML Тамека

 

Как добавить фото рядом друг с другом

HTML CSS изображений поплавок

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML by Tameka

 

как добавить несколько страниц на целевую страницу

HTML целевая страница несколько страниц навигация КСС

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML от Дианы

 

как убрать пробелы между строками в html?

HTML CSS межстрочный интервал допуск прокладка

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 1 месяц назад в HTML by Наталия

 

интервал между элементами html

HTML CSS допуск набивка интервал

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML by Olena

 

как сделать градиентный фон в HTML?

HTML CSS градиент фон

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML by Olena

 

как сделать линию с цветом, то бишь hr?

HTML CSS линия час цвет

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML by Furá

 

У меня есть html-файл, который нельзя изменить, и мне нужно настроить его стиль и вставить содержимое в новый html-файл

HTML CSS JavaScript настройка ДОМ

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML by Furá

 

Как вставить в html-файл таблицу из другого html-файла и использовать тот же лист style. css

HTML стол стиль.css тег объекта

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML by Furá

 

Могу ли я применить CSS-лист моего html-файла к html-объекту?

HTML CSS сорт ИДЕНТИФИКАТОР стиль элемент

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML Кодили

 

как закодировать смайлик солнце за облаком

HTML код Юникод эмодзи солнце облако

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML by Burhan

 

добавить логотип заголовка

HTML CSS заголовок логотип сайт

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML от Бурхан

 

как получить логотип заголовка

HTML логотип заголовок тег изображения

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML by Isa

 

как добавить html изображение с компьютера скачать

HTML изображение компьютер путь

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML Луянда

 

Как сделать изображение фоном для вашего веб-сайта с помощью языка html и CSS

HTML CSS изображение на заднем плане Веб-сайт дизайн

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML by Shukura

 

как добавить картинку в html

HTML изображение img-тег атрибут источника альт атрибут

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML от Raquel

 

как добавить ссылку в мой код

HTML связь ссылка

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML от Raquel

 

как добавить абзац в мой код

HTML параграф код

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML от Ракель

 

расскажите мне больше о сильном элементе

HTML ярлык сильный жирный шрифт важность

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML by Nikita

 

как сделать кнопку с кнопкой ввода

представлять на рассмотрение форма

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML Эллешева

 

загрузить видео на сайт в формате html, указав постер и ширину

HTML тег видео плакат ширина веб-разработка

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 1 месяц назад в HTML by Mark

 

Дан массив с элементами разных типов. Создайте функцию, которая вычисляет среднее арифметическое только числовых элементов данного массива с помощью html.

HTML Множество среднее арифметическое функция

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML Ольга

 

что такое атрибуты в HTML?

HTML атрибуты элемент открывающий тег ID

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML Апиринья

 

можете ли вы объяснить

?

HTML тег div контейнер группировка

Просмотрите вопросы по кодированию по темам: HTML CSS JavaScript Код ВС Питон Реагировать Начальная загрузка Попутный ветер Джава PHP Node.js Рубин Идти .NET

Как задать свойства страницы HTML и свойства CSS на странице Dreamweaver

Руководство пользователя Отмена

Поиск

  1. Руководство пользователя Dreamweaver
  2. Введение
    1. Основы адаптивного веб-дизайна
    2. Что нового в Dreamweaver
    3. Веб-разработка с использованием Dreamweaver — обзор
    4. Dreamweaver / Общие вопросы
    5. Сочетания клавиш
    6. Системные требования Dreamweaver
    7. Обзор функций
  3. Dreamweaver и Creative Cloud
    1. Синхронизация настроек Dreamweaver с Creative Cloud
    2. Библиотеки Creative Cloud в Dreamweaver
    3. Использование файлов Photoshop в Dreamweaver
    4. Работа с Adobe Animate и Dreamweaver
    5. Извлечение SVG-файлов, оптимизированных для Интернета, из библиотек
  4. Рабочие пространства и представления Dreamweaver
    1. Рабочее пространство Dreamweaver
    2. Оптимизация рабочего пространства Dreamweaver для визуальной разработки
    3. Поиск файлов по имени или содержимому | Mac OS
  5. Настройка сайтов
    1. О сайтах Dreamweaver
    2. Настройте локальную версию своего сайта
    3. Подключиться к серверу публикации
    4. Настройка тестового сервера
    5. Импорт и экспорт настроек сайта Dreamweaver
    6. Перенос существующих веб-сайтов с удаленного сервера в корневой каталог локального сайта
    7. Специальные возможности в Dreamweaver
    8. Расширенные настройки
    9. Установка параметров сайта для передачи файлов
    10. Укажите параметры прокси-сервера в Dreamweaver
    11. Синхронизация настроек Dreamweaver с Creative Cloud
    12. Использование Git в Dreamweaver
  6. Управление файлами
    1. Создание и открытие файлов
    2. Управление файлами и папками
    3. Получение и передача файлов на сервер и с него
    4. Возвращать и извлекать файлы
    5. Синхронизировать файлы
    6. Сравнить файлы на наличие различий
    7. Скрытие файлов и папок на сайте Dreamweaver
    8. Включить заметки разработчика для сайтов Dreamweaver
    9. Предотвращение потенциального использования гейткипера
  7. Макет и дизайн
    1. Использование наглядных пособий для макета
    2. Об использовании CSS для разметки страницы
    3. Разработка адаптивных веб-сайтов с использованием Bootstrap
    4. Создание и использование мультимедийных запросов в Dreamweaver
    5. Представить контент с таблицами
    6. Цвета
    7. Адаптивный дизайн с использованием гибкой сетки
    8. Извлечение в Dreamweaver
  8. CSS
    1. Общие сведения о каскадных таблицах стилей
    2. Разметка страниц с помощью конструктора CSS
    3. Использование препроцессоров CSS в Dreamweaver
    4. Как настроить параметры стиля CSS в Dreamweaver
    5. Перемещение правил CSS в Dreamweaver
    6. Преобразование встроенного CSS в правило CSS в Dreamweaver
    7. Работа с тегами div
    8. Применение градиентов к фону
    9. Создание и редактирование эффектов перехода CSS3 в Dreamweaver
    10. Код формата
  9. Содержимое страницы и активы
    1. Установка свойств страницы
    2. Установка свойств заголовка CSS и свойств ссылки CSS
    3. Работа с текстом
    4. Поиск и замена текста, тегов и атрибутов
    5. Панель ДОМ
    6. Редактировать в режиме Live View
    7. Кодирование документов в Dreamweaver
    8. Выбор и просмотр элементов в окне документа
    9. Установка свойств текста в инспекторе свойств
    10. Проверка правописания веб-страницы
    11. Использование горизонтальных линеек в Dreamweaver
    12. Добавление и изменение комбинаций шрифтов в Dreamweaver
    13. Работа с активами
    14. Вставка и обновление дат в Dreamweaver
    15. Создание избранных ресурсов и управление ими в Dreamweaver
    16. Вставка и редактирование изображений в Dreamweaver
    17. Добавить мультимедийные объекты
    18. Добавление видео в Dreamweaver
    19. Вставить видео HTML5
    20. Вставка файлов SWF
    21. Добавить звуковые эффекты
    22. Вставка аудио HTML5 в Dreamweaver
    23. Работа с элементами библиотеки
    24. Использование текста на арабском языке и иврите в Dreamweaver
  10. Связывание и навигация
    1. О связывании и навигации
    2. Связывание
    3. Карты изображений
    4. Ссылки для устранения неполадок
  11. Виджеты и эффекты jQuery
    1. Использование пользовательского интерфейса jQuery и мобильных виджетов в Dreamweaver
    2. Использование эффектов jQuery в Dreamweaver
  12. Кодирование веб-сайтов
    1. О программировании в Dreamweaver
    2. Среда кодирования в Dreamweaver
    3. Установка параметров кодирования
    4. Настройка цвета кода
    5. Напишите и отредактируйте код
    6. Подсказка кода и завершение кода
    7. Свернуть и развернуть код
    8. Повторное использование кода с фрагментами
    9. Код ворса
    10. Код оптимизации
    11. Редактировать код в представлении «Дизайн»
    12. Работа с заголовком для страниц
    13. Вставка серверных включений в Dreamweaver
    14. Использование библиотек тегов в Dreamweaver
    15. Импорт пользовательских тегов в Dreamweaver
    16. Использование поведения JavaScript (общие инструкции)
    17. Применить встроенное поведение JavaScript
    18. О XML и XSLT
    19. Выполнение преобразований XSL на стороне сервера в Dreamweaver
    20. Выполнение преобразований XSL на стороне клиента в Dreamweaver
    21. Добавление символов для XSLT в Dreamweaver
    22. Код формата
  13. Рабочие процессы для нескольких продуктов
    1. Установка и использование расширений для Dreamweaver
    2. Обновления в приложении в Dreamweaver
    3. Вставка документов Microsoft Office в Dreamweaver (только для Windows)
    4. Работа с Fireworks и Dreamweaver
    5. Редактировать содержимое на сайтах Dreamweaver с помощью Contribute
    6. Интеграция Dreamweaver и Business Catalyst
    7. Создавайте персонализированные кампании по электронной почте
  14. Шаблоны
    1. О шаблонах Dreamweaver
    2. Распознавание шаблонов и документов на основе шаблонов
    3. Создание шаблона Dreamweaver
    4. Создание редактируемых областей в шаблонах
    5. Создание повторяющихся областей и таблиц в Dreamweaver
    6. Использовать необязательные области в шаблонах
    7. Определение редактируемых атрибутов тегов в Dreamweaver
    8. Как создавать вложенные шаблоны в Dreamweaver
    9. Редактировать, обновлять и удалять шаблоны
    10. Экспорт и импорт XML-содержимого в Dreamweaver
    11. Применение или удаление шаблона из существующего документа
    12. Редактирование содержимого в шаблонах Dreamweaver
    13. Правила синтаксиса для тегов шаблонов в Dreamweaver
    14. Установка параметров выделения для областей шаблона
    15. Преимущества использования шаблонов в Dreamweaver
  15. Мобильный и многоэкранный
    1. Создание мультимедийных запросов
    2. Изменение ориентации страницы для мобильных устройств
    3. Создание веб-приложений для мобильных устройств с помощью Dreamweaver
  16. Динамические сайты, страницы и веб-формы
    1. Понимание веб-приложений
    2. Настройте компьютер для разработки приложений
    3. Устранение неполадок подключения к базе данных
    4. Удаление сценариев подключения в Dreamweaver
    5. Дизайн динамических страниц
    6. Обзор источников динамического контента
    7. Определить источники динамического содержимого
    8. Добавление динамического содержимого на страницы
    9. Изменение динамического содержимого в Dreamweaver
    10. Показать записи базы данных
    11. Предоставление оперативных данных и устранение неполадок в Dreamweaver
    12. Добавить настраиваемое поведение сервера в Dreamweaver
    13. Создание форм с помощью Dreamweaver
    14. Использование форм для сбора информации от пользователей
    15. Создание и включение форм ColdFusion в Dreamweaver
    16. Создание веб-форм
    17. Расширенная поддержка HTML5 для элементов формы
    18. Разработка формы с помощью Dreamweaver
  17. Визуальное создание приложений
    1. Создание основных страниц и страниц сведений в Dreamweaver
    2. Создание страниц поиска и результатов
    3. Создать страницу вставки записи
    4. Создание страницы записи обновления в Dreamweaver
    5. Создание страниц удаления записей в Dreamweaver
    6. Использование команд ASP для изменения базы данных в Dreamweaver
    7. Создать страницу регистрации
    8. Создать страницу входа
    9. Создайте страницу, доступ к которой имеют только авторизованные пользователи
    10. Защита папок в Coldfusion с помощью Dreamweaver
    11. Использование компонентов ColdFusion в Dreamweaver
  18. Тестирование, предварительный просмотр и публикация веб-сайтов
    1. Предварительный просмотр страниц
    2. Предварительный просмотр веб-страниц Dreamweaver на нескольких устройствах
    3. Протестируйте свой сайт Dreamweaver

 

Узнайте, как задать свойства HTML-страницы и свойства CSS, такие как шрифт, цвет фона и свойства фонового изображения, для страницы Dreamweaver.

Для каждой страницы, создаваемой в Dreamweaver, можно указать свойства макета и форматирования в диалоговом окне «Свойства страницы» («Файл» > «Свойства страницы»). Диалоговое окно «Свойства страницы» позволяет указать семейство и размер шрифта по умолчанию, цвет фона, поля, стили ссылок и многие другие аспекты дизайна страницы. Вы можете назначить новые свойства страницы для каждой новой страницы, которую вы создаете, и изменить их для существующих страниц. Изменения, внесенные в диалоговом окне «Свойства страницы», применяются ко всей странице.

Dreamweaver предлагает два метода изменения свойств страницы: CSS или HTML. Adobe рекомендует использовать CSS для установки фона и изменения свойств страницы.

Примечание:

Выбранные вами свойства страницы применяются только к активному документу. Если на странице используется внешняя таблица стилей CSS, Dreamweaver не перезаписывает теги, установленные в таблице стилей, так как это влияет на все остальные страницы используя эту таблицу стилей.

Установить шрифт страницы CSS, цвет фона, и свойства фонового изображения

Используйте диалоговое окно «Свойства страницы», чтобы указать несколько основных вариантов макета страницы для ваших веб-страниц, в том числе шрифт, цвет фона и фоновое изображение.

  1. Выберите «Файл» > «Свойства страницы» или нажмите кнопку «Свойства страницы» в текстовом инспекторе свойств.

  2. Выберите категорию Внешний вид (CSS) и установите параметры.

    Шрифт страницы

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

    Размер

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

    Цвет текста

    Задает цвет по умолчанию для отображения шрифтов.

    Фоновый цвет

    Устанавливает цвет фона для вашей страницы. Щелкните поле Цвет фона и выберите цвет из палитры цветов.

    Изображение на заднем плане

    Устанавливает фоновое изображение. Нажмите кнопку Обзор, затем просмотрите и выберите изображение. Или введите путь к фоновому изображению в поле Фоновое изображение.

    Плитки Dreamweaver (повторяет) фоновое изображение, если оно не заполняет все окно, так же, как это делают браузеры. (Чтобы предотвратить мозаичное изображение фонового изображения, используйте каскадные таблицы стилей, чтобы отключить изображение плитка.)

    Повторить

    Указывает, как фоновое изображение будет отображаться на странице:

    • Выберите параметр «Без повтора», чтобы фоновое изображение отображалось только один раз.

    • Выберите параметр «Повторить», чтобы повторить или разбить изображение по горизонтали и по вертикали.

    • Выберите параметр «Повторить-x», чтобы расположить изображение горизонтально.

    • Выберите параметр «Повторить-y», чтобы расположить изображение вертикально.

    Левое поле и правое поле

    Укажите размер левого и правого полей страницы.

    Верхнее поле и нижнее поле

    Укажите размер верхнего и нижнего полей страницы.

Установка свойств страницы HTML

Установка свойств в этой категории Диалоговое окно «Свойства страницы» приводит к форматированию HTML, а не CSS вашей страницы.

  1. Выберите «Файл» > «Свойства страницы» или нажмите кнопку «Свойства страницы» в текстовом инспекторе свойств.

  2. Выберите категорию Внешний вид (HTML) и установите параметры.

    Изображение на заднем плане

    Устанавливает фоновое изображение. Нажмите кнопку Обзор, затем просмотрите и выберите изображение. Или введите путь к фоновому изображению в поле Фоновое изображение.

    Плитки Dreamweaver (повторяет) фоновое изображение, если оно не заполняет все окно, так же, как это делают браузеры. (Чтобы предотвратить мозаичное изображение фонового изображения, используйте каскадные таблицы стилей, чтобы отключить изображение плитка.)

    Фон

    Устанавливает цвет фона для вашей страницы. Щелкните поле Цвет фона и выберите цвет из палитры цветов.

    Текст

    Задает цвет по умолчанию для отображения шрифтов.

    Связь

    Задает цвет для текста ссылки.

    Посещенные ссылки

    Определяет цвет для посещенных ссылок.

    Активные ссылки

    Указывает цвет, применяемый при щелчке мышью (или указателем) по ссылке

    Левое поле и правое поле

    Укажите размер левого и правого полей страницы.

    Верхнее поле и нижнее поле

    Укажите размер верхнего и нижнего полей страницы.

Установка свойств заголовка и кодировки для страницы

Параметры Заголовок/Кодировка в Свойствах страницы позволяют указать тип кодировки документа, соответствующий языку, используемому для создания веб-страниц. Параметры Заголовок/Кодировка также позволяют укажите, какую форму нормализации Unicode использовать с этим типом кодирования.

  1. Выполните одно из следующих действий:

    • Щелкните Файл > Свойства страницы
    • Щелкните Окно > Свойства и щелкните Свойства страницы в текстовом Инспекторе свойств.
  2. На панели «Свойства страницы» выберите «Заголовок/Кодировка». Можно настроить следующие параметры:

    • Заголовок: указывает заголовок страницы, который отображается в строке заголовка окна документа и большинства окон браузера.
    • Тип документа (DTD): определяет определение типа документа. Например, можно сделать HTML-документ совместимым с XHTML, выбрав XHTML 1.0 Transitional или XHTML 1.0 Strict во всплывающем меню.
    • Кодировка: указывает кодировку, используемую для символов в документе. Если вы выберете Unicode (UTF-8) в качестве кодировки документа, кодировка объекта не требуется, поскольку UTF-8 может безопасно представлять все символы. Если вы выберете другую кодировку документа, может потребоваться кодировка объекта для представления определенных символов. Для получения дополнительной информации о символьных объектах см. www.w3.org/TR/REC-html40/sgml/entities.html.
    • Перезагрузить: Преобразует существующий документ или повторно открывает его, используя новую кодировку.
    • Форма нормализации Unicode. Доступно, только если в качестве кодировки документа выбрано значение UTF-8. Существует четыре формы нормализации Unicode. Наиболее важной является форма нормализации C, потому что это наиболее распространенная форма, используемая в модели персонажей для всемирной паутины. Adobe предоставляет три другие формы нормализации Unicode для полноты картины. В Unicode некоторые символы визуально похожи, но могут храниться в документе по-разному. Например, «ë» (э-умлаут) может быть представлен как один символ «э-умлаут» или как два символа: «обычный латинский е» + «комбинация умлаут». Комбинированный символ Unicode — это тот, который используется с предыдущим символом, поэтому умлаут будет отображаться над «латиницей e». Обе формы приводят к одному и тому же визуальному оформлению, но то, что сохраняется в файле, отличается для каждой формы. Нормализация — это процесс проверки того, что все символы, которые могут быть сохранены в разных формах, сохранены с использованием одного и того же источника. То есть все символы «ë» в документе сохраняются как одиночный «э-умлаут» или как «е» + «комбинированный умляут», а не как обе формы в одном документе. Дополнительную информацию о нормализации Unicode и конкретных формах, которые можно использовать, см. на веб-сайте Unicode по адресу www.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *