Что необходимо для публикации веб сайта

Публикация вашего веб-сайта

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

Какие существуют варианты?

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

Получение хостинга и доменного имени

Чтобы иметь больший контроль над контентом и внешним видом веб-сайта, большинство людей предпочитают покупать веб-хостинг и доменное имя:

• Хостинг — арендованное файловое пространство на веб-сервере хостинговой компании. Вы размещаете ваши файлы веб-сайта в этом пространстве, и веб-сервер выдаёт контент для веб-пользователей, которые запрашивают его.
• Доменное имя — уникальный адрес по которому люди могут найти ваш веб-сайт, например http://www.mozilla.org или http://www.bbc.co.uk . Вы можете арендовать доменное имя на столько лет, сколько захотите (минимум на 1 год) у регистратора доменов.

Множество профессиональных веб-сайтов располагается в Интернете именно таким образом.

Кроме того, вам потребуется File Transfer Protocol (FTP)-клиент (более подробно см. Сколько это стоит: программное обеспечение), чтобы передать файлы веб-сайта на сервер. Существует множество FTP-клиентов, но, как правило, вам нужно войти на веб-сервер, используя данные, предоставленные вашей хостинговой компанией (например: имя пользователя (логин), пароль, имя хоста). Затем FTP-клиент отобразит файлы на вашем компьютере в одной половине окна и файлы на хостинговом сервере в другой половине, так вы сможете перетаскивая копировать файлы с вашего компьютера на сервер и обратно.

Советы по поиску хостингов и доменов

• Здесь мы не продвигаем какие-то конкретные хостинговые компании. Чтобы найти хостинг и регистратора доменных имён, просто поищите «веб-хостинг» и «доменные имена». Во всех таких сервисах есть функция, позволяющая вам проверить, доступно ли имя домена, или кто-то другой уже зарегистрировал его.
• Ваш домашний или рабочий Интернет-провайдер может предоставлять хостинговые услуги для небольших веб-сайтов. Набор возможностей в таком случае может быть ограничен, но, тем не менее, он может отлично подойти для ваших первых экспериментов — свяжитесь с ними и узнайте!
• Также есть несколько бесплатных сервисов, таких как Neocities, Blogspot, и WordPress. Опять же, вы получаете то, за что платите, но они идеально подходят для ваших первоначальных экспериментов. Бесплатные сервисы по большей части не требуют FTP-клиентов — вы можете перетаскивать ваши файлы напрямую в веб-интерфейсе.
• Иногда компании предлагают одновременно и хостинг и домен.

Использование онлайн инструментов, таких как GitHub или Google App Engine

Некоторые сервисы позволяют вам опубликовать сайт:

• GitHub — это «социальная сеть программистов». С помощью неё можно загружать репозитории с вашими разработками для хранения в Git — систему контроля версий. По умолчанию все разработки хранятся с открытым исходным кодом, а это значит, что ваш код будет доступен любому — участники могут по нему учиться либо же предлагать свои улучшения. Вы также можете объединяться с другими кодерами! Это очень большое и полезное сообщество, в чьи ряды лучше вступить, и Git/GitHub это очень популярная система контроля версий — большинство компаний сейчас использует её для работы. GitHub имеет очень полезную функцию GitHub pages, с помощью которой вы сможете опубликовать ваш код (ваш сайт) в интернете.
• Google App Engine — это мощная платформа, которая позволяет создавать и запускать приложения в инфраструктуре Google — нужно ли вам создать многоуровневое веб-приложение с нуля или разместить статический веб-сайт. Смотрите как разместить ваш веб-сайт на Google App Engine чтобы узнать больше информации.

В отличие от других хостингов, эти услуги обычно бесплатны, но взамен вы получите ограниченный набор инструментов.

Использование облачных IDE, таких как CodePen

Существует ряд веб-приложений, эмулирующих среду веб-разработки, позволяющих вводить HTML, CSS и JavaScript, а затем отображать результат этого кода в виде сайта — и все это на одной вкладке браузера. Вообще говоря, эти инструменты достаточно просты, отлично подходят для обучения, хороши для того, чтобы делиться кодом (например, если вы хотите поделиться техникой с коллегой или обратиться за помощью в отладке к коллегам из другого офиса) и бесплатны (основные функции). Они размещают вашу отрендереную страницу на уникальном веб-адресе. Однако, основные функции довольно ограничены, и приложения обычно не предоставляют хостинговое пространство для таких файлов, как изображения и т.д.

Попробуйте один из этих и посмотрите, какой из них вам больше нравится:

Публикация с помощью GitHub

А теперь, давайте рассмотрим, как опубликовать свой сайт на страницах GitHub. Мы не хотим сказать, что этот метод является единственным и наиболее верным, но это бесплатно, достаточно просто, а также затрагивает определённые навыки, которые точно будут полезны для вашего дальнейшего обучения.

Основная настройка

1. Прежде всего, установите Git на ваш компьютер. Это основная версия системы управления версий, поддерживающая GitHub.
2. Далее, создайте аккаунт в GitHub. Это просто и легко.
3. После того как вы зарегистрировались, войдите в github.com используя ваш логин и пароль.
4. Далее, вам нужно создать новый репозиторий для ваших файлов. Нажмите Плюс (+) в правом верхнем углу главной страницы GitHub, затем выберите New repository.

На этой странице, в поле Repository name, введите username.github.io, где username это ваше имя пользователя. Так, например, наш друг valerii15298 введёт valerii15298.github.io.

Нажмите Create repository и вы окажетесь на следующей странице:

Загрузка ваших файлов на GitHub

Здесь у нас будет использоваться командная строка чтобы отправить наш репозиторий на GitHub. Командная строка — это окно где вы вводите команды для быстрого выполнения таких вещей, как создание файла или запуск программы, без использования пользовательского интерфейса. Командная строка выглядит примерно так:

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

У всех операционных систем есть командная строка:

• Windows: Командная строка. Чтобы открыть её нажмите клавишу Windows, затем введите Командная строка в поле поиска, и выберите её в появившемся списке. Заметьте, что Windows имеет свои собственные соглашения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
• OS X: Terminal можно найти в Приложения > Утилиты.
• Linux: Обычно вы можете вытащить терминал с помощью Ctrl + Alt + T. Если это не сработает, найдите Терминал в панели приложений или меню.

Сначала это может показаться немного страшным, но не волнуйтесь — вы скоро освоите основы. Вы говорите компьютеру сделать что-то в терминале, введя команду и нажав Enter.

Укажите в командной строке каталог test-site (или другое название каталога, содержащего ваш сайт). Для этого используйте команду cd (т.е. «change directory»). Вот то, что вы наберёте, если разместили свой веб-сайт в каталоге под названием test-site на рабочем столе:

cd Desktop/test-site 

git init 

git remote add origin https://github.com/bobsmith/bobsmith.github.io.git 

git add --all git commit -m 'adding my files to my repository' 

git push -u origin master 

Примечание: Если вы застряли, GitHub Pages homepage будет очень полезна для вас.

Дальнейшее изучение GitHub

Если вы хотите сделать больше изменений на своём тестовом сайте и загрузить их в GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам нужно ввести следующие команды (нажав Enter после каждого), чтобы вставить эти изменения в GitHub:

git add --all git commit -m 'another commit' git push

Вы можете заменить another commit более подходящим сообщением, описывающим какие изменения вы только что сделали.

Мы едва затронули Git. Чтобы узнать больше, начните с GitHub Help site.

Заключение

К этому моменту, у вас должен быть собственный пример веб-сайта, доступный по уникальному веб-адресу. Отлично!

Дальнейшее чтение

• Что такое веб-сервер?
• Что такое доменные имена?
• Сколько стоит сделать что-то в Интернете?
• Развёртывание сайта: хороший курс от Codecademy, который забегает немного вперёд и показывает некоторые дополнительные техники.
• Cheap or Free Static Website Hosting, статья написанная Скоттом Мюрреем содержит некоторые полезные идеи о доступных сервисах.

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

В этом модуле

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

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Создаём сайт: вот всё, что вам нужно знать

Нельзя доверять коду, который вы не написали полностью сами.

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

И вот несколько подсказок!

Лучшие преподаватели по программированию доступны для занятий

1 е занятие бесплатно!

1 е занятие бесплатно!

1 е занятие бесплатно!
1 е занятие бесплатно!

1 е занятие бесплатно!

1 е занятие бесплатно!

1 е занятие бесплатно!

1 е занятие бесплатно!

1 е занятие бесплатно!

1 е занятие бесплатно!

1 е занятие бесплатно!
1 е занятие бесплатно!

1 е занятие бесплатно!

1 е занятие бесплатно!

1 е занятие бесплатно!

1 е занятие бесплатно!

Какие языки программирования используют для создания сайта?

Вы можете без труда создать веб-сайт с помощью CMS (Content Management System, то есть системы управления контентом сайта, по-простому «движок сайта»), например, WordPress, Tilda или Wix. Однако некоторые компании предпочитают более сложный путь и хотят, чтобы их сайт был написан с нуля на каком-либо языке программирования. Веб-разработка позволяет добавлять различные интерактивные элементы в процессе создания сайта.

Итак, существует несколько языков программирования, которыми пишут сайты:

• язык программирования HTML,
• язык программирования CSS,
• язык программирования PHP,
• язык программирования JavaScript,
• язык программирования Python,
• Язык программирования MySQL.

Но какой же выбрать?

Не существует лучшего языка программирования, и даже из вышеупомянутых невозможно выбрать идеально подходящий для любого случая. Каждый веб-разработчик выбирает тот язык программирования, который ему подходит для решения тех или иных задач. У каждого языка программирования свои сильные стороны и своё предназначение.

Например, чтобы создать простую веб-страницу, вам достаточно знать HTML. Затем вам понадобится язык CSS для создания графических элементов сайта. Если вы хотите продвинуться немного дальше в создании своего веб-сайта, то вам пригодится знание таких языков, как PHP и Javascript, — они помогут вам добавить интерактивность. Кстати, язык PHP является сегодня одним из наиболее широко используемых в веб-программировании.

Вы можете пойти ещё дальше, изучив основы языков Python или MySQL. Они помогут вам наладить взаимодействие сайта с базами данных.

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

Где найти курсы программирования на С++?

Как улучшить пользовательский интерфейс для создания своего веб-сайта?

UI-дизайн — это графический интерфейс веб-сайта. Дизайнер пользовательского интерфейса отвечает за выбор правильных графических элементов и их размещение на сайте, чтобы на получившийся продукт было приятно смотреть, чтобы он был логичным и в хорошем смысле предсказуемым.

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

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

Затем приступайте к созданию своего веб-сайта. С помощью CMS или путем непосредственно программирования вы можете перейти к этапу графического дизайна после того, как структура вашего сайта уже разработана.

Страницы сайта не должны быть перегружены информацией, вам необходимо найти баланс. Нельзя отдавать предпочтение только текстам или только фотографиям — это будет смотреться странно либо нечитабельно. В идеале вы должны найти баланс между текстами, фотографиями и иллюстрациями.

Кроме того, не забывайте оставлять «воздух» на странице, чтобы ваш сайт был более приятен глазу и читабелен.

Вам также понадобится разработать собственный брендбук: определить основные цвета и вёрстку, выбрать шрифты.

Что касается цветов, веб-дизайнеры рекомендуют выбирать два основных цвета.

От этого правила можно отступить при необходимости, но имейте в виду, что во всём должна быть логика и последовательность. Если вы выбрали красный и синий, то используйте именно их, не меняя палитру от страницы к странице. То же касается и шрифтов: определите один шрифт для заголовков, другой — для текстов и не «играйте шрифтами» без необходимости.

Советы по улучшению UX вашего сайта

UX-дизайн не следует путать с UI-дизайном. В то время как второе относится к графическому интерфейсу веб-сайта, первое относится к пользовательскому опыту посетителей сайта. Хотя работа UI-дизайнера очень похожа на работу UX-дизайнера, есть некоторые отличия. Обычно именно два дизайнера работают над сайтом, чтобы навигация по нему была максимально простой и интуитивной.

В этом процессе UX-дизайнер отвечает за весь веб-сайт, включая его начинку и графические элементы, чтобы обеспечить лучшую навигацию и взаимодействие с пользователем.

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

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

Точно так же необходимо будет структурировать всю информацию, чтобы посетитель мог быстро понять логику сайта и спокойно по нему перемещаться, выбирая между наиболее важной информацией и второстепенной.

Вы также можете сделать более интерактивный сайт, добавив кнопки, иконки и другие элементы, которые позволят посетителю легко перемещаться по сайту. Не усложняйте без надобности, сайт не должен быть чересчур инновационным или перенасыщенным интерактивом. Если вы открыли ваш сайт для посетителей, но не успели доделать некоторые страницы, то лучше скройте их либо добавьте объявление, что ведутся технические работы и вскоре всё появится.

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

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

Наконец, выбирайте качественный контент. Используйте правильный тон в своих текстах в соответствии с вашими целями и вашей аудиторией и размещайте только те статьи, которые действительно повышают ценность сайта. Также отдавайте предпочтение уникальным фотографиям, сделанным вами или нанятым фотографом, а не бесплатным картинкам, найденным в Интернете.

Где найти уроки программирования на языке С?

Сколько стоит создать свой сайт?

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

Вы можете выбрать одностраничный сайт-визитку — лендинг пейдж. Многие выбирают этот формат, чтобы не тратить слишком много денег на веб-разработку. К тому же, это подходящий тип сайта для фрилансеров или начинающих бизнесменов. На лендинг пейдж вы можете поделиться вашими контактами, портфолио и описанием ваших услуг — этого достаточно, чтобы у ваших потенциальных клиентов сформировалось первое впечатление о вас. Более серьёзный сайт можно сделать чуть позже, когда ваш бизнес станет больше и мощнее.

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

Следующий этап — сайт с небольшим количеством страниц. Здесь вы уже можете разбить информацию на рубрики, разместить больше примеров работ, прописать собственную миссию и историю и так далее. Если не добавлять сложные функции, такие как окно для подписки на новостную рассылку или смена языков сайта, вы можете уложиться в относительно небольшую сумму.

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

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

Если вы наймёте фрилансера, то стоимость сайта выйдет дешевле, чем если вы соберётесь нанимать агентство. Чем сложнее ваш сайт, тем больше времени потребуется на его создание, а фрилансеры, как правило, используют почасовую оплату. Самый простой сайт на фрилансе обойдётся примерно в 12000 рублей, но имейте в виду, что расценки сильно разнятся даже среди фрилансеров.

Конечно же, вы можете нанять агентство, профессионально занимающееся разработкой сайтов. Но имейте в виду, что стоить это будет существенно дороже, так как вы будете платить целой команде специалистов. С другой стороны, обратиться в агентство может быть не такой уж плохой идеей, если вы являетесь большой компанией, которой требуется комплексный подход к созданию сайта. Особенно, если речь идёт о создании интернет-магазина, где необходима ещё и многоуровневая система защиты для проведения безналичной оплаты. В этом случае рассчитывайте на сайт за несколько сотен тысяч рублей, не меньше. Потолка у расценок на такие сайты не существует — всё зависит от вашей фантазии.

В конце концов, вы всегда можете использовать CMS типа WordPress, Tilda или Wix, чтобы создать свой собственный веб-сайт совершенно самостоятельно. Однако вам все равно придётся заплатить за хостинг и доменное имя. Это может стоить несколько тысяч рублей в год или даже меньше.

Теперь вы знаете все секреты создания сайтов! Вперёд, дерзайте!

Понравилась статья? Оцените!

Какое программное обеспечение необходимо для создания веб-сайта?

В этой статье мы изложим какие программные компоненты вам понадобятся при редактировании, загрузке или просмотре веб-сайта.

Необходимые знания:	Вы должны уже знать разницу между веб-страницами, веб-сайтами, веб-серверами и поисковыми системами.
Цель:	Узнать, какие программные компоненты вам понадобятся при редактировании, загрузке или просмотре веб-сайта.

Аннотация

Вы можете бесплатно загрузить большинство программ, необходимых для веб-разработки. Мы предоставим несколько ссылок в этой статье. Вам понадобятся инструменты: 1) создания и редактирования веб-страниц, 2) загружать файлы на ваш веб-сервер, 3) просматривать ваш веб-сайт.

Почти все операционные системы по умолчанию включают текстовый редактор и просмоторщик веб-сайтов (называемый браузером). Поэтому обычно вам нужно приобрести лишь программное обеспечение для передачи файлов на ваш веб-сервер.

Активное изучение

Копай глубже

Создание и редактирование веб-страниц

Для создания и редактирования веб-страниц необходим текстовый редактор. Тестовые редакторы создают и изменяют неотформатированные текстовые файлы. (Другие форматы, такие как RTF (en-US), позволяют добавить форматирование, такое как полужирное или подчёркивание. Эти форматы не подходят для написания веб-страниц.) вам следует выбирать текстовый редактор с умом, так как вы будете активно работать с ним, при создании веб-сайта.

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

Операционная система	Встроенный редактор	Сторонний редактор
Windows	Notepad	Notepad++Visual Studio CodeWeb StormBrackets
Mac OS	TextEdit	TextWranglerVisual Studio CodeBrackets
Linux	Vi (All UNIX) GEdit (Gnome) Kate (KDE) LeafPad (Xfce)	Emacs VimVisual Studio CodeBrackets

Ниже скриншот продвинутого текстового редактора:

Загрузка файлов в Интернете

Когда ваш сайт будет готов для публичного просмотра, вам придётся загрузить свои веб-страницы на веб-сервер. Вы можете купить место на сервере у различных провайдеров (см. Сколько стоит делать что-то в Интернете? (en-US) ). После того, как вы решите, какого провайдера использовать, провайдер отправит вам по электронной почте информацию о доступе к протоколу FTP (протокол передачи файлов). Загрузка файлов на веб-сервер является важным шагом при создании сайта, поэтому мы подробно расскажем об этом в отдельной статье (en-US) . А сейчас, вот краткий список бесплатных базовых FTP-клиентов:

Просмотр веб-сайтов

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

• Mozilla Firefox
• Google Chrome
• Microsoft Internet Explorer
• Apple Safari

Если вы ориентируетесь на определённую группу (например, техническую платформу или страну), возможно, вам придётся протестировать ваш сайт с помощью дополнительных браузеров, таких как Opera, Konqueror, или UC Browser.

Но тестирование усложняется, потому что некоторые браузеры работают только в определённых операционных системах. Apple Safari работает на iOS и Mac OS, а Internet Explorer работает только в Windows. Поэтому лучше воспользоваться такими сервисами, как Browsershots или Browserstack. Browsershots предоставляет скриншоты вашего сайта, того как ваш сайт будет выглядеть в различных браузерах. Browserstack фактически предоставляет вам полный удалённый доступ к виртуальным машинам, поэтому вы можете протестировать ваш сайт в наиболее распространённых средах. Кроме того, вы можете настроить свою собственную виртуальную машину, но это требует некоторого опыта. (Если вы следуете этому пути, Microsoft имеет инструменты для разработчиков, включая готовую к использованию виртуальную машину на modern.ie.)

Обязательно проведите тестирование на реальном устройстве, особенно на реальных мобильных устройствах. Симуляция мобильных устройств — это новая, развивающаяся технология и менее надёжна, чем симуляция настольных устройств. Разумеется, мобильные устройства стоят денег, поэтому мы предлагаем взглянуть на Open Device Lab initiative. Вы также можете обмениваться устройствами, если вы хотите протестировать на многих платформах, не тратя слишком много.

Следующие шаги

• Некоторые из перечисленных программ бесплатны, но не все. Узнайте, сколько стоит сделать что-то в Интернете.
• Если вы хотите больше узнать о текстовых редакторах, прочитайте нашу статью о том как выбрать и установить текстовый редактор (en-US).
• Если вам интересно, как опубликовать ваш веб-сайт в Интернете, посмотрите статью «Как загрузить файлы на веб-сервер» (en-US).

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Каким должен быть ваш веб-сайт?

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

Перво-наперво: планирование

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

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

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

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

Сделайте набросок вашего дизайна

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

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

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

Выберите свои активы

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

Текст

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

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

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

Изображения

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

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

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

Шрифт

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

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

В этом модуле

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

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.