Web sait: что это такое, зачем нужен, как работает, как его создать

Содержание

Каким должен быть ваш веб-сайт? — Изучение веб-разработки

Назад
Обзор: Getting started with the web
Далее

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

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

Для начала, вам будет нужно ответить на следующие вопросы:

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

Примечание: Комплексные проекты нуждаются в детализированных руководствах, которые включают все детали цветов, шрифтов, расстояния между элементами на странице, соответствующий стиль письма и так далее. Их иногда называют руководствами по проектированию или бренд-бук, вы можете увидеть пример в Руководство Firefox OS.

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

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

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

На данном этапе хорошо бы начать собирать контент, который в конечном итоге появится на вашей веб-странице.

Текст

У вас должен быть текст, разбитый на заголовки и параграфы. Придерживайтесь этого правила.

Цветовая схема

Чтобы выбрать цвет, перейдите в инструмент выбора цвета и выберите цвет, который вам нравится. Когда вы щёлкните по цвету, вы увидите странный код из шести цифр, например, #660066. Это называется шестнадцатеричный код (hex(adecimal) code) и он представляет ваш цвет. Скопируйте это код куда-нибудь прямо сейчас.

Изображения

Чтобы выбрать изображение, перейдите в Google Картинки и найдите что-нибудь подходящее.

Когда вы найдёте изображение, которое хотели, щёлкните по нему.
Нажмите кнопку В полном размере (View image).
На следующей странице, правым щелчком мыши на изображении (Ctrl + клик на Mac), выберите Сохранить изображение как… (Save Image As…), и выберите место для сохранения вашего изображения. В качестве альтернативы, скопируйте адрес изображения из адресной строки браузера для последующего использования.

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

Инструменты поиска (Search tools), затем на 2) Права на использование (Usage rights):

Шрифт

Чтобы выбрать шрифт:

Перейдите на Google Fonts и прокрутите список вниз, пока не найдёте шрифт, который вам понравится. Вы также можете использовать элементы управления справа для дальнейшей фильтрации результатов.
Щёлкните по кнопке «плюс» рядом со шрифтом, который вы хотите выбрать.
Щёлкните по кнопке «* Family Selected» на панели в нижней части страницы. («*» зависит от того, сколько шрифтов вы выбрали)
В всплывающем окне вы можете увидеть и скопировать строки кода, которые предоставляет Google, чтобы сохранить их позже в вашем текстовом редакторе.

Назад
Обзор: Getting started with the web
Далее

Установка базового программного обеспечения

Каким должен быть ваш веб-сайт?
Работа с файлами
Основы HTML
Основы CSS
Основы JavaScript
Публикация вашего веб-сайта
Как работает Веб

Last modified: 7 нояб. 2022 г., by MDN contributors

Онлайн Вебсайт Создатель | Renderforest

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