Вредоносное ПО (malware) - это назойливые или опасные программы,...
Программа 3D MAX помогает детально проектировать архитектурные объекты, локации, интерьеры, персонажей мультфильмов, кинофильмов и многое другое. Это едва ли не важнейшая программа для того, кто работает с компьютерной графикой. Но так как это довольно объемная и сложная программа, познавать ее нужно методично, упорно и долго. Самоучитель 3D MAX и различные форумы здорово могут помочь в освоении ее азов. В этой статье мы поговорим об аспекте добавления библиотеки материалов в 3D MAX. А также поговорим, как создать личную библиотеку.
Добавляем новую библиотекуВ 3D MAX изначально представлено на выбор 15 библиотек, объединенных в 6 групп: металл, дерево, камни, небо, земля и кирпич. Все дополнительные материалы и текстуры легко скачиваются в интернете. Файлы библиотек сохраняются в формате.mat. Чтобы добавить библиотеку в программу, необходимо открыть редактор материалов (М на клавиатуре или значок шарик со стрелочкой). Слева в блоке Browse from выбираем Mtl Library, а затем Open чуть пониже. Откроется диалоговое окно под названием Open Material Library, здесь выбираете нужную вам библиотеку и нажимаете кнопку Открыть.
С помощью команды Merge можно добавить новые материалы в текущую библиотеку, которая в данный момент загружена и используется. Кнопка Save позволит сохранить текущую библиотеку с учетом всех новых обновлений. Если же вы хотите сохранить в библиотеке все новые материалы и текстуры, используйте кнопку Save As.
Как создать собственную библиотеку?Интерьер или экстерьер в 3D MAX создать с нуля достаточно непросто и довольно легко растеряться в количестве предлагаемых материалов к использованию. Очень многие предпочитают создавать личные библиотеки с часто используемыми текстурами или для конкретного объекта. Это позволяет иметь любимые материалы под рукой в быстром доступе и не засорять основные библиотеки.
Для этого открываем сцену, из которой хотим сохранить текстурную карту и на клавиатуре нажимаем латинскую М, выбираем пункт Scene из блока Browse From. В окне Map Browser нажимаем кнопку Save As. Открывается окно Save Material Library, где нужно указать название библиотеки. Сохраняем и наслаждаемся.
Чтобы добавить новый материал, нажимаем на клавиатуре М, в окне библиотеки находим кнопку Put to Library. Необходимо ввести в диалоговом окне название материала и сохранить. Удалить карту можно с помощью кнопки Delete from Library.
В этом уроке мы скачаем Bootstrap 3.0 с официального сайта и подключим файлы к главной странице.
Итак, приступим.
Шаг 1. Чтобы начать работать с фреймворком Bootstrap 3.0 , нам нужно его скачать. Это можно сделать на официальном сайте.
Шаг 2. Создайте папку, например, «Мой сайт на Bootstrap 3.0 » и перенесите все файлы из архива в нее. У вас должно появиться три папки «css » , «js » , «fonts »:
Шаг 3.
Удаление ненужных файлов из Bootstrap 3.
Давайте просмотрим стандартную файловую структуру Bootstrap и удалим оттуда все ненужные файлы:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
Папка CSS
В папке CSS находится 6 файлов, но нам, по сути, нужен только один J.
В итоге в папке CSS оставляете только файл bootstrap.css , все остальные удаляйте.
Папка fonts
В папке fonts хранятся 4 файла с одинаковым шрифтом, но с разными расширениями. Это нужно для того, чтобы шрифт показывался во всех браузерах. Здесь ничего не трогаем, идем в следующую папку.
Папка js
В папке js хранятся 2 файла, это bootstrap.js
и bootstrap.min.js
.
Как вы уже поняли, это два одинаковых файла, только bootstrap.js
– полная версия, а bootstrap.min.js
– сжатая. Удаляем файл
bootstrap.min.js
.
Итак, файл bootstrap.js – это набор готовых js-сценариев.
○ Давайте подведем итог по всем папкам
.
В папке CSS
один файл - bootstrap.css
В папке fonts
четыре файла - glyphicons-halflings-regular.eot
, glyphicons-halflings-regular.ttf
, glyphicons-halflings-regular.svg
и glyphicons-halflings-regular.woff
.
В папке js
один файл - bootstrap.js
.
bootstrap/
├── css/
│ └── bootstrap.css
├── js/
│ └── bootstrap.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
Шаг 4. Теперь в папке «Мой сайт на Bootstrap 3.0 » создайте файл «index.html » с .
Шаг 5. Откройте файл «index.html» текстовым и вставьте вот такой стандартный код, который предлагается на самом сайте Bootstrap:
Bootstrap 101 Template Hello, world!
В этом коде нужно сделать некоторые поправки для подключения bootstrap. Нам нужно в коде прописать правильный путь к файлам bootstrap.js и bootstrap.css .
Это будет выглядеть вот так:
Bootstrap Template на сайт Hello, world!
В строке №10 мы подключили таблицу стилей «bootstrap.css»:
В строке №25 мы подключили файл со скриптами «bootstrap.js»:
В строке №23 мы подключили библиотеку jquery:
Сохраните файл.
В результате в браузере вы увидите вот такой результат:
Хочу еще сказать, что можно в дополнение к файлам Bootstrap подключать свой собственный файл со стилями, если это необходимо. В дальнейших уроках вы все это увидите. Следите за обновлением моего блога. Пока!
Система сеток в Twitter Bootstrap 3 – это быстрый путь для создания html макета сайта. Как раз это самая основная часть в bootstrap, т.к. благодаря сетки с можно создать адаптивную версию сайта, обеспечивает правильное расположение всех элементов. И начинает разработка макета с css класса container.
Container (контейнер) с фиксированной шириной.Из названия очевидно, что container содержит заданную width, изменения которой происходят в следствии изменении рабочего окна браузера.
Выравнивание происходит по центру с помощью css свойств: .container{ margin-left: auto; margin-right: auto; } Container имеет внутренние отступы: .container{ padding-left: 15px; padding-right: 15px; }
В таблице ниже представлена ширина container, которая зависит от ширины окна веб-клиента пользователя:
Контейнер с резиновой шириной. В отличии от фиксированного container, container-fluid не имеет ширины, и единственное, что у него есть из css классов: .container{ padding-left: 15px; padding-right: 15px; }
После того, как вы определились с контейнером нужно переходить к рядам. Ряд принимает такую же ширину, как и контейнер. Имеет отрицательный margin:
Row{ margin-left: -15px; margin-right: -15px; } В итоге наша конструкция уже получает вид (для примера возьму фиксированную ширину):
Внутри блока размещается контент сайта. Также можно размещать еще одни ряды. Один ряд содержит 12 блоков.
Ширина блока указывается в относительном формате посредством необходимого количества колонок. Стартовая ширина – 1 – соответствует одной колонке Bootstrap, наибольшая ширина – 12 – максимальное количество колонок в одном ряду.
Например: если нам необходимо в одном ряду иметь 4 блока с идентичной шириной, то нам нужно задать width равную 3 (div class ="col-*-3" > ... div >). В сумме выходит 12 (3+3+3+3).
Я до этого писал, что Twitter Bootstrap 3 знаменит своими сетками, которые подходят под различные пользовательские устройства, будь то телефон, планшет, монитор вашего домашнего/рабочего компьютера). И как раз пришло время до конца разобраться с этим.
В примере выше после слова col я ставил звездочку. И как раз вместо звездочки нужно указывать для какого устройска будет применяться заданный блок:
- – col-xs-* – применяется для создание сетки с маленькими экранами. Под это определение подходят телефоны;
- – col-sm-* – для устройств чуть большей ширины экрана, чем у телефона, например планшет;
- – col-md-* – средних размеры экранов, т.е. нетбуки;
- – col-lg-* – для больших экранов. Если верить яндекс.метрике , то на данный момент количество пользователей именно сидят на сайтах под этими экранами. Но этот показатель очень сильно зависит от тематики сайта.
| Фиксированный макет (class ="container" ) | Соответствует 100% ширине веб-клиента | 750px | 970px | 1170px |
| Резиновый макет (class ="container-fluid" ) | Соответствует 100% ширине экрана веб-клиента | |||
| Префикс класса | class ="col-xs-*" | class ="col-sm-*" | class ="col-md-*" | class ="col-lg-*" |
| Максимальная ширина колонки Bootstrap для фиксированного макет (class ="container" ) | 62px (750px / 12) | 81px (970px / 12) | 97px (1170px / 12) | |
| Максимальная ширина колонки для резинового макета (class ="container-fluid" ) | Ширина веб клиента делится на 12 | |||
| Внутренние отступы | 15px по краям | |||
Но будьте тут внимательнее! Например, если вы используете класс class ="col-sm-*" , то он будет применяться не только к планшетам, но и к нетбукам и большим экранам, но это дейтсвует в том случае, если вы не указали "col-md-*" и "col-lg-*" . Т.е. если у вашем ряду будет один блок для всех экранов, то достаточно написать div class ="col-xs-12" > ... div >, а не div class ="col-xs-12 col-sm-12 col-md-12 col-lg-12" > ... div >.
Пример адаптивной верстки на Twitter Bootstrap 3В теории – вроде как все понятно, и одновременно ни чего не понятно. Чтобы хоть как-то разобраться и закрепить все эти блоки, ряды и понять смысл всей этой сетки рассмотрю небольшой кусок кода, при помощи которого все встанет на свои места.
Я не дизайнер, да и в этом уроке ни чего не нужно выдумывать супер красивого. Для общего представления будет достаточно и схемаческих изображений.
В качестве примера я сверстаю макет, состоящий из трех блоков, которые расположены в одном ряду, но по-разному будут отображаться на пользовательских устройствах. На рисунке ниже как раз все это показано. И, кстати, когда будете заказывать разработку макета , то заранее нужно говорить дизайнеру, что верстка будет делаться под фреймворк Twitter Bootstrap 3, т.к. дизайнер сразу будет изображать элементы в соответствии с сеткой.
Стили, применяемые к макету, будут подключаться, когда активная область окна браузера (ширина) больше и равна 1200px. Из картинки видно, что контейнеры занимают все пространство ряда и делят его на три равные части. Выходит, 12 блоков нужно разделить на 3 контейнера (т.к. они все одинаковые), получаем, что в одном таком контейнере 4 блока.
Итог для большой ширины экрана:
Контейнер №1
Контейнер №2
Контейнер №3
Средняя ширина экранаСтили, применяемые к макету, будут подключаться, когда активная область окна браузера (ширина) больше или равна 992px и меньше 1200px. Два контейнера расположены горизонтально и занимают ширину в 100% (каждый контейнер занимает 6 блоков), и один расположен с новой строки и также занимает 100% ширины (контейнер №12 занимает 12 блоков). Чтобы четко объяснить браузеру, что контейнер нужно разместить без обтекания к других контейнерам в twitter bootstrap предусмотрен css-класс class ="clearfix" . Но, еще один момент, т.к. этот класс должен распространяться на этот вид экранов нужно добавить еще один класс - class ="visible-md-block" (md – это название экрана, аналогично с классами для блока).
Итог для средней ширины экрана (будьте внимательны , я буду добавлять в уже написанный код новые классы и элементы):
Контейнер №1
Контейнер №2
Контейнер №3
Маленькая ширина экрана и «крошка-экран» По этому же принципу нужно добавить классы и для оставшихся экранов. Не буду расписывать одно и тоже, просто приведу общий итог:Контейнер №1
Контейнер №2
Контейнер №3
Для «крошка-экран» можно опустить css-класс class ="col-xs-12" , т.к. он занимает 100% ширины экрана автоматически и чтобы не загромождать код лишними символами можно их удалить.
Конечный код для этого шаблона будет выглядеть:
Контейнер №1
Контейнер №2
Контейнер №3
Разные элементы на разных экранах До этого я использовал класс class ="visible-md-block" – который отображается на средний экранах. Более подробно о класс "visible" :| class ="visible-xs-*" | Этот класс добавляет видимости на «крошка-экран», ширина которого меньше 768px. Если экран больше – элемент не будет виден. |
| class ="visible-sm-*" | Этот класс добавляет видимости только на гаджетах, которые имеют ширину экрана больше или равную 768px (т.е. ≥768px), но меньше 992px. Если под эти характеристики не подходит экран, то элемент не будет отображаться. |
| class ="visible-md-*" | Этот класс добавляет видимости только на гаджетах, которые имеют ширину экрана больше или равную 992px (т.е. ≥992px), но меньше 1200px. Если под эти характеристики не подходит экран, то элемент не будет отображаться. |
| class ="visible-lg-*" | Этот класс добавляет видимости только на гаджетах, которые имеют ширину экрана больше или равную 1200px (т.е. ≥1200px). Если под эти характеристики не подходит экран, то элемент не будет отображаться. |
| class ="visible-*-inline" | display :inline |
| class ="visible-*-block" | Часть макета приобретает css-свойство display :block |
| class ="visible-*-inline-block" | Часть макета приобретает css-свойство display :inline-block |
Для того, чтобы скрывать элементы предназначен класс class ="hidden"
| class ="hidden-xs" | Этот класс добавляет скрытность элементу только на гаджетах, которые имеют ширину экрана меньше 768px. На других экранах части макета будут видны. |
| class ="hidden-sm" | Этот класс добавляет скрытность элементу только на гаджетах, которые имеют ширину экрана больше или равную 768px (т.е. ≥768px), и меньше 992px. На других экранах части макета будут видны. |
| class ="hidden-md" | Этот класс добавляет скрытность элементу только на гаджетах, которые имеют ширину экрана больше или равную 992px (т.е. ≥992px), и меньше 1200px. На других экранах части макета будут видны. |
| class ="hidden-lg" | Этот класс добавляет скрытность элементу только на гаджетах, которые имеют ширину экрана больше или равную 1200px (т.е. ≥1200px). На других экранах части макета будут видны. |
Так же можно одновременно применять к одному элементу несколько классов, например:
Этот элемент не будет отображаться на средних и больших пользовательских экранах
Разработчики Twitter Bootstrap 3 не забыли и про печать документов/веб-страниц и добавили несколько классов как раз предназначенных для этих целей:
Еще один пример Если у вас в одном ряде должен находиться элемент шириной в 6 блоков и по центру, то вам нужно указать смещение на 3 блока:...
...В третьем уроке немного теории о построении шаблона и сетке Bootstrap.
Bootstrap видит шаблон сайта следующим образом
В построение шаблона с помощью Bootstrap используются три уровня вложенности
- Первый уровень это container — область в которой размещаются все блоки сайта.(Красная рама)
- Второй уровень это row — область в которую помещаются блоки для материала
- Третий уровень для разных устройств он разный. Это уже сам материал.
В целом Bootstrap чем-то схож с обычной таблицей. Есть общий каркас далее идут строки и ячейки. Если проводить аналогию с html-таблицей, то роль контейнера выполняет тег
| .
С первым уровнем мы уже познакомились. Второй уровень вложенности выполняет функцию контейнера, но уже применительно к информационным блокам (аналогично тегу |
