В этой статье мы рассмотрим инструменты для создания сайта. Они все доступны в режиме «Дизайн». Это «Выделение», «Рамка», «Текст», «Прямоугольник», «Рука» и «Масштаб». Чаще всего мы будем использовать «Текст» и «Прямоугольник».
Инструмент «Прямоугольник»
Берём «Прямоугольник» и кликаем, перетаскивая до нужных нам размеров. По умолчанию он создаётся белого цвета, кликнув на заливку, выберем нужный цвет уже из данных или используем палитру. Выбираем обводку, включаем иконку в виде рамки, которая в панели меню рядом с обводкой, и задаем нужный радиус, чтобы скруглить углы.
В эффектах добавляется тень, скос, свечение. Посмотрите, как это работает, и настройте, если вам это нужно. Чтобы прямоугольник в режиме “просмотр” растянулся в ширину экрана, выберите его и, кликнув на перспективу, выберите кнопку «Ширина 100%». в этом случае, при уменьшении или увеличении ширины браузера прямоугольник перестраивается под нужный размер. Так же, если увеличивать ширину прямоугольника по горизонтали, он автоматически привязывается к краям экрана и становится 100 % по ширине.
У прямоугольника есть заливка. Кликнув на заливку вы выбираете цвет в палитре или изображение, кликнув на “добавить” и выбрав нужную картинку. Картинка заключается внутри прямоугольника, и там, где она заканчивается, виден цвет заливки. Чтобы этого избежать, в режиме «Заливка» необходимо поставить в пункте «Подгонка» значение «Заполнение». Выбираем положение изображения внутри прямоугольника, чтобы оно центрировалось по левому краю, верхнему краю, по правому краю и по центру. Это меняет вид картинки. В режиме «Мозайка» изображение повторяется много раз. Чтобы удалить изображение, нажимаем на «Корзину».
Инструмент «Текст»
Чтобы добавить текст выбираем инструмент «Текст» и растягиваем до нужного размера текстовый блок. Выбираем нужный шрифт, размер шрифта и начертание: жирное, курсивное или подчёркнутое. Чтобы применить дополнительные настройки текста, кликаем на него или в закладке «Окно» выбираем пункт «Текст». Здесь дублируются стандартные настройки, а также можно выровнять текст по центру, по правому краю, по левому краю и по формату. Аналогично программе Microsoft Word, если работали в нём. Здесь задается размер красной строки в пикселях, расстояние между строчками, отступ слева и отступ справа, расстояние перед началом абзаца и в конце.
Чтобы сделать гиперссылку, нужно выделить текст, в разделе «Гиперссылка» выбрать «Добавить или фильтровать», вставить сюда необходимую ссылку. Ссылка должна теперь стала активной. Чтобы ссылка открывалась в новом окне, кликните на раздел «Гиперссылка» и поставьте галочку в чекбоксе «Открывать ссылку в новом окне или новой вкладке».
Инструменты «Масштаб» и «Рука»
В режиме «Дизайн» так же есть инструмент «Масштаб»: вы кликаете и изображение увеличивается, если держать клавишу Alt изображение уменьшается, также стоит использовать Ctrl+ / Ctrl–. Инструмент «Рука» предназначен для просмотра длинных страниц, им мы перетаскиваем страницу.
Инструмент «Crop»
Инструмент «Crop» уменьшает и увеличивает изображение. Выбираем инструмент «Crop Tool», появляется рамка, которую можно уменьшить. Изображение в дальнейшем можно снова выбрать и расширить до нужных размеров — информация сохраняется. Когда вы опубликуете эту картинку в интернет, она сохранится отдельным выделенным фрагментом. Это экономит время загрузки.
Задание
- Создайте новый проект с настройками по умолчанию.
- Добавьте фоновое изображение, так как это делали мы, чтобы оно тянулось слева-направо.
- Добавьте внешнюю гипер-ссылку, которая будет открываться в новом окне, например на мое сообществоvk.com/4wwweb, или на любой другой сайт, или на свою страницу Вконтакте.
- И сделайте 2 заголовка, например, со стандартным шрифтом Trebuchet.
- И опубликуйте сайт на новый домен в businesscatalyst.
