Глобальное редактирование и изображения
занятие 7
Stylesheet
Таблица стилей позволяет глобально редактировать вашу новеллу. Например, сменить шрифт во всей игре.
Как в нее попасть? В верхнем правом углу выбираем историю — дальше таблицу стилей. Открывается текстовое пространство для вашего кода.
Что важно, здесь используется немного другой синтаксис. Те команды, которые вы использовали в абзацах здесь работать не будут.
Что можно менять?
Вся история tw-story {Все, что вы кодом здесь распишете, влияет на текст/фон/картинки внутри абзацев}
Весь абзац tw-passage {Все то, что вы кодом здесь распишете, влияет на текст внутри абзацев}
Ссылки tw-link {Все то, что вы кодом здесь распишете, влияет навсе ссылки внутри абзацев}
Все абзацы, у которых есть какой-либо тэг tw-story [tags≅«тэг нужного параграфа»]{Все то, что вы кодом здесь распишете, влияет на текст, внутри выбранных абзацев}
Как менять?
Поменять цвет текста: color: #000000; — цвет задаете в формате hex
Поменять шрифт текста: font-family: Arial; — название шрифта, на который предварительно указали ссылку
Поменять размер: font-size: 20px;
Поменять цвет фона: background-color: #000000
Изображения: в абзаце
Добавление изображения в текст: img src=«ссылка URL на изображение»> Добавление изображения с указанным размером: img src =«ссылка URL на изображение» width=100 height=100>
Берите изображение максимального разрешения, чтобы не было шакалов.
Когда нашли картинку: скопируйте URL нужной вам картинки.
Если вы хотите использовать свою, простой способ — выложить картинку и скопировать URL.
Картинку можно выровнять также как и текст.
==> Этот текст будет справа =><= Этот по середине <== Этот будет слева ===><= Здесь будут колонки размером ¾ слева, ¼ справа =><===== Здесь колонки 1/6 слева, 5/6 справа.
Изображения: в stylesheet
Изображение с одной стороны, текст с другой.
Текст в абзаце выделяем следующим образом:
Весь текст блока \+ ссылки нужно будет помещать между значками параграфа в каждом абзаце
Здесь же добавляем ссылку на картинку.
tw-story{padding: 0px; } — редактируем историю
img {padding: 0px; float: left; width: 50%; } — указываем, где будет картинка
p {float: left; padding: 50px; width: 50%; font-family: Roboto; font-size: 22px; } — указываем, где будет текст параграфа
Изображение как фон.
Текст в абзаце выделяем следующим образом:
Весь текст блока \+ ссылки нужно будет помещать между значками параграфа в каждом абзаце
Для каждого абзаца с картинкой нужны тэги.
Картинки добавляются в Stylesheet
Вы можете ограничить максимальный размер картинок в вашей истории.
Для этого в таблице стилей пишем:
img { max-width: 800px; max-height: 800px; }
Чтобы поставить картинку на весь фон, пишем background-image: url (ссылка URL);
Чтобы растянуть картинку на весь фон (если не тайловое изображение), пишем background-size: cover;
Получается так tw-story[tags≅"тэг нужного параграфа»] { background-image: url (ссылка URL); background-size: cover; } img {padding: 0px; width: 50%; }
p {background-color: black; float: left; padding: 50px; width: 50%; font-family: Roboto; font-size: 22px; color: #000000}
Padding
Padding — отступ от края.
Вы можете установить размер отступа в пикселях или процентах. Два числа — первое от верхнего края, второе от левого. Одно число — одинаково для обоих краев.
p {padding: 10% 15%; }
Width
Width — отступ от края. Если Если не сделать этот отступ, фон текста закончится сразу после последнего знака текста. Вы можете установить размер отступа в пикселях или процентах.
p {width: 50%; }
Фон текста
Фон текста можно сделать частично прозрачным. Обычно мы используем HEX цвета, чтобы обозначить цвет.
К примеру, черный HEX #000000
Но вы можете использовать RGBa, чтобы добавить прозрачность. Тогда полупрозрачный черный будет выглядеть так: rgba (0,0,0,0.5)
- Непрозрачный черный фон: background-color: black;
- Полупрозрачный черный фон: background-color: rgba (0,0,0,0.5);
Цвет ссылок
Вы можете изменить не только цвет основного текста, но и цвет ссылок.
Делаем это в таблице стилей.
Цвет ссылки: tw-link { color: #ffffff; }
Можно также изменить цвет открытых ранее ссылок.
Можете замаскировать их под неоткрытые или просто назначить им красивый цвет. Делаем это в таблице стилей.
Цвет открытой ссылки: tw-link.visited { color: #ffffff; }
Единый стиль
Если берете изображения из интернета, Обрабатывайте их так, чтобы выглядело гармонично.
Для этого выравниваем:
- Цветовую гамму
- Контраст
- Насыщенность
- Яркость
Задание
Сделайте скриншот структуры вашей новеллы и отправьте его мне вместе со ссылкой на вашу игру.
Дедлайн: за 24 часа до последнего занятия
