Основные инструменты, необходимые для веб-дизайна, удивительно просты. Помимо компьютера и подключения к Интернету, большинство инструментов, необходимых для создания веб-сайта, - это программные продукты, некоторые из которых могут быть уже на вашем компьютере. Вам нужен текстовый редактор или редактор HTML, графический редактор, веб-браузеры и FTP-клиент для загрузки файлов на ваш веб-сервер.
Выбор основного текста или редактора HTML
Вы можете написать HTML в текстовом редакторе, таком как «Блокнот» в Windows 10, TextEdit на Mac или Vi или Emacs в Linux. Вы вводите код HTML, сохраняете документ в виде веб-файла и открываете его в браузере, чтобы убедиться, что он выглядит так, как предполагается.
Если вы хотите больше функциональности, чем в текстовом редакторе, используйте вместо этого редактор HTML. Редакторы HTML распознают код и могут идентифицировать ошибки кодирования перед запуском файла. Они также могут добавить закрывающие теги, которые вы забыли, и выделить неработающие ссылки. Они распознают и поддерживают другие языки кодирования, такие как CSS, PHP и JavaScript.
На рынке существует множество редакторов HTML, которые варьируются от базового до профессионального уровня. Если вы новичок в написании веб-страниц, один из редакторов WYSIWYG (What You See Is What You Get) может работать лучше всего для вас. Некоторые редакторы только показывают код, но с некоторыми из них вы можете переключаться между видами кодирования и визуальными представлениями. Вот несколько из многих доступных веб-редакторов HTML:
- Комодо IDE и его удобный интерфейс подходит как для начинающих, так и для продвинутых веб-разработчиков. Функция автокомпонента Komodo IDE особенно удобна для новых разработчиков, потому что она знает, как писать код для таких общих элементов, как ссылки. Программное обеспечение поддерживает цветовое кодирование различных типов кодирования, таких как HTML, CSS и многие другие языки кодирования. Komodo IDE - это кросс-платформенное программное обеспечение, которое работает в Windows, Mac и Linux.
- Редактор HTML CoffeeCup для новых разработчиков, которые больше заинтересованы в обучении программированию, чем в визуальном интерфейсе. Этот надежный редактор поставляется с шаблонами и имеет проверочные проверки, чтобы ваш код был безошибочным. Он включает в себя завершение кода и поддерживает другие языки кодирования, которые вы можете использовать в сочетании с HTML. Начинающие оценят это, когда программное обеспечение выделяет ошибки в коде, объясняет, почему они появились, и говорит разработчику, как их исправить. CoffeeCup HTML Editor работает в Windows.
- Mobirise это HTML-редактор для людей, которые не хотят ввязываться в код. Это все о выборе темы, а затем перетаскивании элементов на странице. Добавить текст так же, как в обычном текстовом редакторе, и вставить изображения, видео или значки - все без написания кода; Mobirise делает эту роль для вас. Mobirise доступен для Windows и Mac, и он бесплатный.
Веб-браузеры
Проверьте свои веб-страницы в браузере, чтобы убедиться, что они выглядят так, как вы планировали, прежде чем запускать страницу. Chrome, Firefox, Safari (Mac) и Internet Explorer (Windows) - самые популярные браузеры. Проверьте свой HTML на столько браузеров, сколько у вас на вашем компьютере, и загрузите менее известные браузеры, такие как Opera.
Редактор графики
Тип графического редактора, который вам нужен, зависит от вашего веб-сайта. Хотя Adobe Photoshop является золотым стандартом для работы с фотографиями, вам может не понадобиться такая мощь. Вы можете предпочесть векторную графическую программу для работы с логотипом и иллюстрацией. Несколько графических редакторов, для которых требуется базовое использование веб-разработки, включают:
- GIMP это бесплатная программа для редактирования фотографий с открытым исходным кодом, которая обеспечивает многие функции более дорогих конкурентов. Как программное обеспечение с открытым исходным кодом, оно доступно для Windows, Mac и Linux.
- Photoshop Elements для Mac и ПК - это редактор изображений, который является легкой версией своего тезки, но с большим количеством возможностей для работы с графикой для Интернета.
- Corel PaintShop Proдля ПК есть почти все полезные инструменты, которые вы найдете в Photoshop, и интерфейс, который прост в использовании.
- Inkscape для Windows, Mac и Linux - бесплатный редактор векторной графики. Эта альтернатива более дорогостоящему Adobe Illustrator имеет более чем достаточную мощность для простых дизайнерских работ и веб-графики.
FTP-клиент
Вам нужен FTP-клиент для переноса ваших файлов HTML и поддержки изображений и графики на ваш веб-сервер. Хотя FTP доступен через командную строку в Windows, Macintosh и Linux, гораздо проще использовать клиента. Есть много качественных клиентов FTP, в том числе:
- FileZilla это бесплатный FTP-клиент, доступный для Windows, Mac и Linux. Он поддерживает перенос файлов с перетаскиванием и имеет функцию паузы и возобновления для загрузки больших файлов.
- Cyberduck это бесплатное программное обеспечение с открытым исходным кодом, кросс-платформенное программное обеспечение, известное своей плавной интеграцией с внешними редакторами и привлекательным пользовательским интерфейсом.
- Бесплатный FTP а также Прямой FTP сделаны одной и той же компанией. Бесплатный FTP - это минималистический клиент, но он отвечает всем основным потребностям передачи файлов. Прямой FTP - это премиум-версия, предлагающая расширенные функции. Обе версии поддерживаются Windows 7,8 и Vista, но только Direct FTP подходит для Windows 10.
- передавать является премиальным клиентом FTP только для Mac. Это облегчает необычно быструю передачу и поддерживает Amazon CloudFront.
- Симпатичный FTP является мощным премиальным FTP-клиентом, который вы можете использовать для до 100 переводов одновременно. Он считается одним из самых безопасных FTP-клиентов.