Mozilla Введение в веб программирование [Сергей Леонидович Куринный] (pdf) читать постранично, страница - 2

проверять наш код. Выберите вашу
операционную систему ниже и нажмите на соответствующие ссылки
для загрузки установочных программ ваших любимых браузеров:
Linux: Firefox, Chrome, Opera.
Windows: Firefox, Chrome, Opera.
Mac: Firefox, Chrome, Opera, Safari.
Firefox (​
https://www.mozilla.org/ru/firefox/new/​
),
Chrome (​
https://www.google.com/chrome/browser/​),
Opera (​
http://www.opera.com/​
).
Прежде, чем идти дальше, вам следует установить, по крайней мере,
два из этих браузеров, чтобы использовать их для тестирования.

Каким должен быть ваш веб-сайт?
Обдумайте план и дизайн веб-сайта, прежде чем приступить к
написанию кода, в том числе:
- Какую информацию будет содержать мой веб-сайт?
- Какие шрифты и цвета я хочу использовать?
- Что будет делать мой сайт?

Перво-наперво: планирование
Перед тем как делать что-то, вам нужны идеи. Что ваш веб-сайт
должен фактически делать? По существу, ваш веб-сайт может
делать все, что угодно, но для вашей первой попытки, вы должны
придерживаться простых вещей. Мы начнем с создания простой
веб-страницы, содержащую заголовок, изображение и несколько
5

абзацев. Для начала, вам будет нужно ответить на следующие
вопросы:
1. О чем ваш веб-сайт? Вам нравятся собаки, Нью-Йорк или
Pacman?
2. Какую информацию вы предоставляете о предмете?
Напишите заголовок и несколько абзацев, и подумайте над
изображениями, которые вы хотите показать на своей
странице.
3. Как будет выглядеть ваш веб-сайт, в простых терминах
высокого уровня. Какой цвет фона? Какой вид шрифта будет
уместен: деловой, мультяшный, жирный и кричащий или
тонкий?
Комплексные проекты нуждаются в детализированных руководствах,
которые включают все детали цветов, шрифтов, расстояния между
элементами на странице, соответствующий стиль письма и так
далее. Их иногда называют руководствами по проектированию или
бренд-бук.

Сделайте набросок вашего дизайна
Затем, возьмите ручку и бумагу и сделайте примерный набросок того,
как вы хотите, чтобы выглядел ваш сайт. Для вашей первой
веб-страницы должен получиться небольшой набросок, и вы должны
взять это в привычку. Это действительно помогает, и вам не нужно
быть Ван Гогом!

6

Даже в реальных, сложных веб-сайтах, команда разработчиков
обычно начинает с наброска на бумаге и потом строит цифровые
макеты используя графические редакторы или веб-технологии.
Веб-команда часто включает в себя пару графических дизайнеров и
дизайнера с опытом взаимодействия (user-experience (UX) designer).
Графические дизайнеры, очевидно, работают вместе над
визуализацией веб-сайта. UX дизайнеры играют более абстрактную
роль, обращаясь к тому как пользователи будут пользоваться и
взаимодействовать с веб-сайтом.

Выберите свои активы
На данном этапе неплохо начать собирать воедино весь контент,
который в конечном итоге будет располагаться на вашей
веб-странице.
ТЕКСТ
7

У вас должен быть текст, разбитый на заголовки и параграфы.
Придерживайтесь этого правила.
ЦВЕТОВАЯ СХЕМА
Чтобы выбрать цвет, перейдите в ​
инструмент выбора цвета​и
выберите цвет, который вам нравится. Когда вы щёлкните по цвету,
вы увидите странный код из шести цифр, например, #660066. Это
называется шестнадцатеричный код (hex(adecimal) code) и он
представляет ваш цвет. Скопируйте это код куда-нибудь прямо
сейчас.

ИЗОБРАЖЕНИЯ
Чтобы выбрать изображение, перейдите в Google Картинки
(​
https://www.google.com/imghp?gws_rd=ssl​
) и найдите что-нибудь
подходящее.
1. Когда вы найдете нужное изображение, которое хотели,
щёлкните по изображению.
2. Нажмите кнопку В полном размере (View image).
3. На следующей странице, правым щелчком мыши на
изображении (Ctrl + клик на Mac), выберите Сохранить
изображение как... (Save Image As...), и укажите место для
хранения вашего изображения. В качестве альтернативы,
8

скопируйте адрес изображения из адресной строки браузера
для последующего использования.

9

Большинство изображений в Интернете, использованных в Google
Картинках имеют авторские права. Для снижения вероятности
нарушения авторских прав, используйте фильтр лицензии Google.
Для этого: 1) кликните на Инструменты поиска (Search tools), затем на
2) Права на использование (Usage rights):

ЧТОБЫ ВЫБРАТЬ ШРИФТ:
1. Перейдите на Google Fonts (​
http://www.google.com/fonts​) и
прокрутите список вниз, пока не найдете тот шрифт, который
вам понравится. Вы также можете использовать элементы
управления слева для дальнейшей фильтрации результатов.
2. Щёлкните по кнопке Add to collection рядом со шрифтом,
который вы хотите выбрать.
3. Щёлкните по кнопке Use на панели в нижней части страницы.
4. На следующей странице прокрутите вниз к разделам 3 и 4 и
скопируйте строки кода Google для последующего сохранения
в вашем текстовом редакторе.

10

11

Работа с файлами
Веб-сайт состоит из множества файлов: текстового контента, кода,
стилей, медиа-контента, и так далее. Когда вы создаете веб-сайт, вы
должны собрать эти файлы в рациональную структуру на