Теперь мы можем поместить на нашу Web-страницу некоторый текст с различным выравниванием:

Здесь будут мои личные страницы!

На них Вы сможете найти:
- рассказ обо мне и о моих увлечениях;
- мои фотографии.

С одной из моих страниц можно будет
отправить мне электронное письмо.

Кроме использования этих тегов, для разрыва строк возможно использование символов конца строк и табуляций в самом HTML-документе. Для этих целей существует тег

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

Например:
Это текст написан
 в две строки.

В HTML-документе, кроме текста, могут содержаться горизонтальные разделительные линии. Они, как и текст, не требуют никаких внешних файлов. Тег 
 выведет горизонтальную линию единичной толщины вдоль всей ширины страницы. Горизонтальная разделительная линия всегда приводит к разрыву строки, но пустых строк между линией и текстом не появляется. Тег 
 можнт содержать несколько атрибутов. 
 и 
 дают контурную линию с трехмерным эффектом углубления. 
 дает сплошную черную линию. Линия может не простираться во всю ширину страницы, а составлять лишь некоторую часть. Атрибут WIDTH задает ширину линии, в процентах от ширины всей страницы или в пикселах. Например, 50% - половина ширины страницы, 400 - ширина в 400 пикселов. Атрибут ALIGN может принимать значения, аналогичные его значениям для тега 
Но выравнивание по умолчанию - по центру. Атрибут SIZE задает толщину линии в пикселах от 1 до 175; по умолчанию 1, но если 
, (линия - контурная), то добавляется толщина, необходимая для трехмерного эффекта углубления.

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

3. Программы для создания Web-страниц


3.1
HTML-редакторы
Каждый выбирает свой инструмент для создания Web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page 2000. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad).
Текстовые редакторы возможно использовать только для создания небольших страниц, так как у них есть много минусов: не поддерживаются проекты, отсутствует "подсветка" текста..., в общем, работать крайне неудобно.
Основным недостатком MS FrontPage является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании Web-страниц в этом редакторе видишь одно, а в окне браузера - совсем другое (особенно это касается Netscape Navigator). Странички получаются какими-то кривыми, поэтому для создания качественных Web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже.
Начнем мы с популярного Macromedia DreamWeaver. Компания Macromedia считается лидером по производсту программ для создания веб-сайтов, а также законодателем моды в этой области.
Последния версия HTML-редактора этой компании - DreamWeaver 3, который относится к категории WYSIWYG-редакторов, и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и ShockWave технологий, возможность закачки файлов через FTP, поддержка SSI и многое другое. Для работы в этой программе не нужно досконально знать HTML (в этом и заключается преимущество технологии WYSIWYG - что вижу, то и

 получаю). 
DreamWeaver 3.0


Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет вам избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции "запись последовательности команд"

вы записываете последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности.
Следующий редактор - HomeSite 4 - для создания страниц вручную, т. е. для знатоков HTML. Вы получаете полный контроль над HTML-кодом, причем существует возможность оптимизировать свою страничку под один из трех популярных браузеров (MSIE, NN, Opera).
HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если вы загрузите чужой HTML-код, то HomeSite все перепишет по-своему. Режим Edit позволяет получить полный контроль над страничкой. Здесь вы можете настроить практически все, сможете прописать функции каждого тега (тогда ваша страничка в любом

 Одним из последних HTML-редакторов является EVR Soft 1st Page 2000 v2. 
Его лозунг - "Create 1st class websites!" ("Создавайте первоклассные веб-сайты!"). Редактор содержит несколько режимов - Normal, Easy, Advanced/Expert и Hardcore, то есть вы можете выбрать свой уровень, а со временем перейти на более высокий. Еще одна особенность - довольно большая коллекция скриптов на JavaScript и DHTML. Все это довольно удобно разбито по категориям.

3.2 Графические редакторы
Создание и оптимизация графики - сложная и капризная задача. Безусловно, возможно создание Web-страницы и без использования графики - при помощи шрифтов, скриптов и таблиц стилей (CSS) - и это будет красиво и стильно. Но ведь окончательный вид документа зависит от большого числа различных факторов, таких как: ширина окна браузера, предварительные настройки браузера, принятые по умолчанию размер шрифта, его имя и цвет. К тому же не все скрипты и стили поддерживаются всеми браузерами. Если же будет использована графика, то посетитель вашей страницы увидит ее точно такой, какой сделали и видите ее вы.
Основная сложность работы с Web-графикой состоит в том, что пропускная способность каналов Интернета, в большинстве случаев, очень низкая и перед вами сразу встанут проблемы - как сделать графический файл небольшой по объему, но хорошего качества, какие программы и приемы использовать при его оптимизации.
Именно этому посвящен раздел о векторные и растровые графических редакторах, которые являются мощным инструментом обработки изображения в умелых руках.
Прежде чем рассмотреть векторные и растровые графические редакторы, следует уяснить себе, в чем состоит различие между векторным и растровым представлением изображения.
Растровая графика

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

 формируются на основе математически описанных фигур, называемых векторами, а вид изображения определяется параметрами векторов. Другими словами, векторная графика состоит из кривых, имеющих координаты, цвет и прочие параметры, а также замкнутых областей, заполненных определенным цветом. Границы этих областей также описываются кривыми. Файл с векторной картинкой содержит координаты и параметры кривых.
Результаты обработки векторных изображений не зависят от разрешающей способности оборудования, поэтому вы можете произвольно изменять их параметры (размер, цвет, форму и т.д.) - качество не ухудшится. Векторная графика применяется при создании цифровых объектов с использованием мелких кеглей (размеров шрифта) или таких объектов, как логотипы, для которых важно сохранять четкие контуры, при неограниченном масштабировании.
Графические пакеты (редакторы) тоже делятся на два типа: растровые и векторные. Давайте теперь рассмотрим наиболее популярные из них.

А) Редакторы растровой графики

Microsoft Paint

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

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

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

, предоставляющие огромные возможности по обработке графики под WEB (оптимизация изображений, создание анимированных gif, "разрезание" картинок на более мелкие и т.д.). Девиз разработчиков Adobe Photoshop - "Camera of your mind" - предполагает не только техническое совершенство, но и полную свободу творчества, на которую человек, работающий с этой программой, просто обречен.
PhotoPaint

 - еще один не менее известный графический редактор (из пакета Corel Draw) для обработки растровой графики, конкурирующий с Adobe Photoshop. Здесь также имеются все необходимые инструменты для обработки графики, разнообразные фильтры, текстуры. Разница лишь в удобстве работы, интерфейсе и скорости наложения фильтров - наложение происходит немного медленнее.
Painter

 - редактор предоставляет великолепные возможности для эмуляции реальных инструментов рисования: графит, мел, масло и т.д. Также позволяет имитировать фактуру поверхности материалов, живопись, создавать анимацию. Очень удобен для разработки фоновых рисунков или Web-страниц в стиле живописи. Пользуясь это программой чуствуешь себя настоящим художником.
Существует еще ряд редакторов (Microsoft Photo Editor, Microsoft Photo DRAW
), также позволяющих реализовать простейшие задачи, но не удовлетворяющих запросам профессионалов.

Редакторы векторной графики

Adobe Illustrator

 - пакет позволяет создавать, обрабатывать и редактировать векторную графику. По своей мощности он эквивалентен
растровому редактору Adobe Photoshop: имеет аналогичный интерфейс, позволяет подключать различные фильтры и эффекты, понимает многие графические форматы, даже такие как.cdr (Corel Draw) и.swf (Flash).
CorelDraw

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

 (CorelGallery).
Adobe Streamline

 - еще один продукт фирмы Adobe, предназначенный для трассировки (перевода) растровой графики в векторную. Это небольшой, но очень полезный и мощный продукт. Особенно полезен, если вы создаете Web-страницы с использованием векторной графики, например, технологии Flash.

4.

Создание WEB-страниц в WORD"97


4.1
Способы создания WEB-страниц в WORD"97
Существуют два способа

 создания Web-страниц:
· с помощью мастера или шаблона

,
· преобразовать существующий документ Word в формат HTML.

В мастере Web-страниц для упрощения процесса создания страницы предлагаются образцы

 содержания страниц - например, индивидуальные начальные страницы и регистрационные формы и различные темы

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


4.6 Работа с рисунками
Когда Web-страница сохраняется в формате HTML впервые, все рисунки преобразуются в форматы GIF или JPEG

. Только эти два вида графических изображений поддерживаются в Web.
Чтобы вставить рисунок в Web-страницу, выберите команду Рисунок в меню Вставка, а затем команду из файла или Картинки. Если вставляемый рисунок записан в формате JPG, он сохраняется в формате JPG. Если рисунок записан в другом формате, например, TIF, он преобразуется в формат GIF. Если рисунок вставляется из файла, при сохранении он копируется в ту же папку, что и Web-страница, если не установлен флажок
Вставленный на Web-страницу рисунок по умолчанию выравнивается по левому полю

. Расположение текста и рисунков можно задать дополнительно с помощью таблицы.
Графические объекты, - например, авто фигуры, надписи и фигурный текст - можно использовать в качестве объектов типа «Рисунок Microsoft Word». После закрытия документа эти элементы нельзя будет вновь отредактировать. Они будут преобразованы в изображения формата GIF.

4.7 Создание гиперссылок
Гиперссылки

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



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

Выводы

Таким образом, мы изучили возможности языка HTML для создания Web-страниц, узнали, какие HTML- и графические редакторы лучше использовать в Web-дизайне, каковы преимущества и недостатки тех или иных программных пакетов. И, наконец, мы выяснили, какие возможности для создания Web-страниц имеет Word’97 из пакета Microsoft Office.
Итак, поняв принцип построения Web-страницы, изучив возможности соединения в ней различных видов информации, мы можем смело сказать, что Web-страницы, с их потенциалом могут применятся для различных целей.
Web-страница – это лицо той фирмы, того учреждения, человека, который разместил ее в WWW. Именно поэтому сегодня Web-дизайну уделяется такое огромное внимание, ибо от него на прямую зависит популярность того или иного информационного ресурса Сети. Недаром сейчас профессия Web-дизайнера является одной из самых высокооплачиваемых.
Человек, создающий Web-страницу, соединяет свои знания и навыки со своим творческим потенциалом. Умение творить – вот что отличает настоящего Web-дизайнера. Для того чтобы создать Web-страницу, которая бы радовала глаз, нужно сочетать в себе качества художника и программиста.
Подводя итог всему выше сказанному, хочется отметить, что HTML стал тем форматом передачи данных, который наиболее полно и качественно удовлетворяет запросы современного общества. Несомненным фактом является и то, что будущее именно за HTML.
Список сайтов информация, с которых была использована при написании курсовой работы:
Www.webschool.narod.ru

Www.pronet.ru

Www.education.kulichki.net

Поскольку
документ Web представляет собой текстовый
файл, для его редактирования можно
использовать не только Блокнот, но и
любой текстовый редактор, например, из
состава MS-DOS,
Norton
Commander
или FAR.
Кстати, многие пользователи так и делают,
набирая в ручную HTML-код в этих простейших
редакторах.
В
настоящее время существуют также более
серьезные программы для подготовки
Web-страниц, которые можно условно
разделить на три типа:
Существуют
 конверторы
текстовых
 документов, подготовленных в Word
 и Word
 Perfect,
 в формат HTML-файлов (такой конвертор
 имеется, например, в самом процессоре
 Word
 97/2000).
Кроме
перечисленных трех категорий, существуют
программы, объединяющие в себе черты
текстовых и визуальных HTML-редакторов.
К таким программам относится, например,
Hot-Metal
разработки компании SoftQuad
Software.
Визуальные
 редакторы HTML,

 то есть редакторы типа WYSIWIG
 (например, Microsoft
 FrontPage,
 Netscape
 Navigator
 Gold
 и др.). при работе в этих программах
 пользователь имеет дело с графическими
 образами элементов HTML, а не с кодом
 документа.
Достоинство –
легкость в работе, не обязательно знать
хорошо языки разметки.
Недостаток –
генерируется некоторое количество
некорректного кода.
Редакторы
 собственно HTML-текстов
,
 позволяющие автоматизировать набор и
 редактирование кода (например,
 Dreamweaver,
 HomeSite,
 SiteEdit,
 WebEditor
 и многие другие). Эти программы дают
 возможность пользователю быстро и
 легко вставлять в документ элементы
 HTML, проверять синтаксис команд, выполнять
 запуск и отладку страницы, не покидая
 окна редактора. Вообще работа в таких
 редакторах напоминает работу в
 интерактивной среде программирования
 типа Delphi
 или Visual
 Basic.
Достоинство
– «чистый» код.
Недостаток –
необходимо хорошо знать веб-программирование.
ЛЕКЦИЯ
6.
Основы
цифровой обработки изображений и звука.
Веб-технологии и мультимедиа.
(2
часа)
6.1. Изображения в Интернет: технологии gif, jpeg, png, Flash.
Сегодня
для многих людей Всемирная паутина
является визуальной средой. Графика не
только усиливает воспри­ятие материала
пользователем; при условии эстетической
привлекательности она может улучшить
получаемые им впечатления. В то же время
злоупот­ребление графикой может
оказать отрицательное воздействие, и
в результате получится медленный и
непригодный для использования сайт.
Корректное применение изображений в
Web
- не просто дело вкуса. Для этого требует­ся
комплексное понимание различных форматов
файлов, таких как GIF,
JPEG
и PNG.
Основная цель дизайнера - сбалансировать
качество изобра­жений с их размером
при загрузке.
6.1.1. Форматы изображений
Монитор
компьютера состоит из множества мелких
точек, или пикселов (элементов изображения).
На экране изображения формируются путем
за­дания цветов отдельных пикселов.
Формат изображения описывает данные о
цвете и положении, необходимые для
выведения изображения на экран. Существуют
две основных разновидности форматов
изображений: вектор­ные
и растровые.
В
своей исходной форме растровое изображение
является лишь совокупно­стью пикселов,
имеющих различные цветовые значения.
Из-за большого количества пикселов и
цветовой информации необработанные
растровые изображения могут быть очень
объемными. Несжатое растровое изображе­ние
размером в 800x600 пикселов с 24-битным
цветом заняло бы больше 1 Мбайт (800 х 600
х 24 = 11 520 000 бит / 81 = 1 440 000 байт). Учитывая
их возможный размер, растровые
форматы

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

информация хранится совсем по-другому:
изобра­жение описывается как
совокупность математических кривых,
точек и цве­тов. Учитывая компактность
способа описания векторных изображений,
преимущество такого формата состоит в
предельно малом размере файла Так как
изображение создается или визуализируется
математически, его легко масштабировать
- по сравнению с растровыми форматами,
в которых при изменении размера
изображения деформируются. Несмотря
на все свя­занные с ними выгоды, в
векторных изображениях есть и недостатки.
Во-первых, векторное изображение должно
проходить дополнительный этап
визуализации, когда оно просчитывается
и отображается на экране. В срав­нении
с растровыми изображениями, которые
просто распаковываются и воспроизводятся,
этот процесс занимает некоторое время.
Различие между этими двумя базовыми
форматами изображений было показано
на рис. 6.1.
Рисунок 6.1. Различия
между растровыми и векторными изображениями
В
большинстве случаев - тогда, когда
изображение довольно простое - время
визуализации векторного изображения
ничтожно мало. Когда изо­бражение
становится сложнее, процесс визуализации
может занимать все больше и больше
времени. Помните, что в конечном итоге
для вывода на экран любое изображение
должно стать растровым. Векторные
форматы хо­рошо подходят для графики
в иллюстративном стиле, текста и
логотипов, в то время как растровые
изображения хорошо справляются с
фотографиями. Довольно интересно, что
многие векторные форматы импортируют
растро­вые изображения для создания
текстур, а векторы нередко преобразуются
в растры для включения в растровые
изображения. У обоих типов форматов
есть свои достоинства, и они хорошо
сосуществуют.
Хотя
в стандарте HTML
нет данных о том, какие форматы изображений
могут применяться в Web,
браузеры, в основном, поддерживают одни
и те же их типы. В Web
основными растровыми форматами
изображений явля­ются GIF
(Graphics
Interchange
Format,
формат обмена графическими данными) и
JPEG
(Joint
Photographic
Experts
Group,
объединенная группа экс­пертов в
области фотографии). Формат PNG
(Portable
Network
Graphics,
пе­реносимая сетевая графика) сейчас,
наконец, делает некоторые успехи, но
пока что его нельзя назвать
общеупотребительным.
Что
касается векторной графики, в Web
преобладает формат Flash,
но одобренный W3C
формат SVG
(Scalable
Vector
Graphics,
масштабируемая векторная графика) также
получа­ет распространение. Другие
форматы изображений - например, различные
связанные с UNIX
форматы вроде ХВМ
(X
Bitmap,
Х-растровая карта) и ХРМ (X
Pixelmap,
Х-пиксельная карта) и формат Windows
(BMP)
- зачас­тую внутренне поддерживаются
браузерами, но в основном представляют
исторический интерес, и пользоваться
ими не стоит. Со временем господ­ствующими
станут скрытые форматы, например,
основанные на элементар­ных волнах;
но, по крайней мере, сейчас нужно
придерживаться хорошо зарекомендовавшими
себя GIF
и JPEG.
Обсудим основные форматы изо­бражений
и некоторые из их ценных возможностей.
Здравствуйте, уважаемые читатели блога. Давайте поговорим о программах, которые помогут нам создавать html сайты. Для эффективного написания html-кода, создания веб-страниц и, тем более, для создания сайта, даже небольшого, без таких программ не обойтись. В «Блокноте» это делать очень неудобно и долго. Итак, нам понадобятся следующие программы для создания html страниц:
Текстовый редактор для написания html кода;
Браузер для просмотра результатов;
Графический редактор для создания и редактирования изображений;
Валидатор, для проверки правильности html-кода.
Рассмотрим эти программы подробнее.
Текстовый редактор с подсветкой html кода
Одно из главных требований к текстовому редактору, это возможность подсветки синтаксиса. Т.е. редактор должен выделять теги, текст, ключевые слова, атрибуты различными цветами. Такая возможность ускоряет работу WEB-разработчику и снижает уровень ошибок. Еще хорошо бы, чтоб была возможность работать с вкладками, при открытии нескольких файлов. Рассмотрим подобные редакторы:
Notepad++
Один из лучших, на мой взгляд, текстовых редакторов. Самое главное то, что программа абсолютно бесплатна и скачать ее можно на сайте разработчиков
. Notepad++ умеет выделять синтаксис не только языка html, но и языка стилей CSS, синтаксис Javascript и еще многих языков программирования. Кроме подсветки синтаксиса html, Notepad++ предоставляет множество других полезных функций, облегчающих создание web-страниц. Подробное описание возможностей этого редактора можете почитать в статье « ». К тому же возможности Notepad ++ можно расширять при помощи плагинов, найти которые можно в интернете. В общем я советую вам этот текстовый редактор, а выбор за вами.
PSPad
Еще один бесплатный тестовый редактор, скачать можно с сайта pspad
. Также довольно удобная и простая в использовании программа.
Dreamweaver
А это уже платная программа. Довольно мощный редактор html-кода и предназначен больше для профессиональных web-дизайнеров. Предоставляет возможность визуального создания web-страниц. Т.е. вы переносите на страницу различные элементы, а html-код генерируется автоматически. Но главный минус Dreamweaver — это высокая стоимость. А также программа сложная в использовании. Поэтому не советую ее, если вы делаете только первые шаги в мире web-дизайна.
Браузер
 Браузер
 — это программа предназначенная для просмотра web-сайтов. Все популярные браузеры бесплатны, и будет лучше если вы установите их себе на компьютер как можно больше. Это нужно для того чтобы проверять правильность отображения html-страницы в разных браузерах. Так как каждый браузер может отображать одинаковые участки кода по разному.
Для комфортной работы в браузере конечно же необходимо подключение к сети интернет и желательно использовать дешевые тарифы на интернет и сотовую связь .
На сегодняшний день наиболее популярны следующие браузеры: Internet Explorer, Mozilla Firefox, Google Chrome, Opera и Safari.
Internet Explorer
Этот браузер предоставляется вместе с операционной системой Windows. Именно это и объясняет его популярность. Но к сожалению этот браузер хуже всех поддерживает спецификацию HTML и зачастую под него отдельно приходится отлаживать html-код. Скачать его можно с официального сайта Microsoft
, но скорей всего, если у вас операционная система Windows, он у вас уже установлен.
Mozilla Firefox
Третий по популярности браузер в мире. Его конек это простота и расширяемость. Изначально Firefox содержит только самые необходимые функции, но благодаря специальным расширениям пользователи могут модифицировать браузер в соответствии с их требованиями. Один из минусов это более медленная работа в сравнении с другими браузерами. Firefox свободно распространяется и скачать его можно на сайте mozilla-russia.org
.
Google Chrome
Самый популярный браузер в мире, разрабатываемый компанией Google. Отличается высокой скоростью и стабильностью работы. Найти его можно со страницы браузера
.
Opera
Еще один довольно популярный браузер. Считается самым быстрым браузером на Земле. Особенно это касается работы со скриптами JavaScript. Скачиваем с официального сайта Opera
.
Safari
Разработанный компанией Apple браузер встроен в операционные системы Mac OS X и iOS.
Я при создании web-страниц обязательно проверяю правильность отображения html-кода в первых четырех браузерах.
Графический редактор
Графический редактор необходим для редактирования и обработки изображений.
Photoshop
Является самой популярной программой для обработки и создания графических изображений для сайтов. Photoshop разработан и распространяется фирмой Adobe Systems. Содержит в себе множество инструментов для обработки фотографий и является своего рода цифровой фотолабораторией. Но главный минус Photoshop-а, то что он платный. И к тому же в большинстве случаев вся мощь Photoshop-а не нужна и можно воспользоваться бесплатными аналогами.
GIMP
Мощный и свободно распространяемый графический редактор. GIMP поддерживает растровую графику и частичную работу с векторной графикой. Считается бесплатный аналогом Photoshop-а и легко расширяется с помощью дополнений. Скачать можно с сайта разработчиков
.
Paint.Net
Еще один бесплатный графический редактор, который позволяет осуществлять все необходимые действия с изображениями. Скачиваем с сайта разработчиков
.
Валидатор html
Валидатор нужен для проверки html-документа и выявления в нем ошибок в синтаксисе и расхождений со спецификацией HTML. При наличии интернета валидацию html кода можно проводить на сайте validator.w3.org
. При отсутствии подключения к Интернету можно воспользоваться программой Tidy
. Я пользуюсь только онлайн валидатором.
Кроме выше описанных программ, для тестирования web-сайта желательно установить WEB-сервер. При тестировании отдельных статичных страниц можно обойтись и без него, но при создании более сложных сайтов с применением языков php, javascript и других, без web-сервера не обойтись. В качестве web-сервера может вполне подойти поставляемый вместе с windows Microsoft Internet Information Services. Он прост в установке и его возможностей вполне хватит. Либо можно установить джентльменский набор Web-разработчика Денвер
.
Подведем итоги. Для эффективной и удобной разработки web-сайтов
 и html-страниц
 необходим некоторый набор программ:
Текстовый редактор
 с подсветкой синтаксиса html, я рекомендую Notepad++
;
Браузер
 для просмотра результата. Рекомендую обзавестись хотя бы самыми популярными Internet Explorer
, Mozilla Firefox
 и Google Chrome
;
Графический редактор
 для создания и редактирования изображений. Я пользуюсь в основном GIMP
;
И онлайн валидатор

 для проверки html-кода.
При разработке динамических web-сайтов понадобиться также web-сервер
.
На этом все! До встречи в следующих статьях!
Оффлайн программы для создания сайтов
 - это специализированный софт, упрощающий процесс создания и редактирования сайтов, используются такие программы на компьютере с установленной ОС Windows, Mac или Android. Отличие offline софта от облачных конструкторов в том, что для публикации сайта в Интернете потребуется самостоятельно приобретать хостинг
 и заливать на него файлы сайта. Онлайновая панель управления в таких программах отсутствует, последующее обновление сайта происходит путём выгрузки на сервер измененных файлов. То есть правка и доработка содержимого веб-сайта требует ПК с установленным программным обеспечением, наличия файлов проекта на жёстком диске и синхронизации с хостинг-аккаунтом. У обычных конструкторов все эти процессы автоматизированы.
Количество современных программ для создания сайтов невелико, мы покажем самые топовые
 из них. Но все же начнем с описания сервиса, который с легкостью заменит любую из них.

 (обзор) - универсальный онлайн конструктор
 с визуальным редактором и интуитивным интерфейсом. Является самым популярным инструментом для создания сайтов-визиток, лендингов и интернет-магазинов. Веб-сервис uKit - это тоже своего рода «программа»
, изначально предустановленная на хостинг. Разница лишь в том, что файлы сайтов, получаемые в десктопных программах, нужно потом самому загружать
 на предоплаченный хостинг. У конструктора они с самого начала уже находятся
 там, а все изменения сохраняются в реальном времени. Ну и по интерфейсам - у uKit он висит в облаке и доступен через браузер, а файлы десктопных приложений размещены на диске компьютера, не имеющего связи с Интернетом через DNS-сервер.
Конструкторы сайтов
 - это пик эволюции офлайновых инструментов для самостоятельного создания сайтов, представляющие собою реально удобную концепцию, как для новичков, так и для профессионалов.
Используя конструктор ничего скачивать и устанавливать не придётся, поскольку:

хостинг входит в поставку по умолчанию;
 
программа уже настроена оптимальным образом;
 
функционал обновляется автоматически;
 
доступен выбор готовых шаблонов;
 
внедряются новые современные технологии;
 
доступны интеграции с другими сервисами;
 
инструкции в комплекте;
 
техподдержка всегда на связи.
Важно, чтобы конструктор был не только современным в техническом плане и удобным, но и доступным по стоимости
. Для сайтов, созданных в оффлайн программах нужен отдельный хостинг
, который стоит денег. Доменное имя покупать необходимо в обоих случаях. Стоимость годового тарифа uKit обойдётся в $36 (с учётом скидочного промо-кода: UGUIDE-25). Много ли это? Хостинг для размещения сайта, созданного в программе, обойдётся примерно вдвое дешевле. Ну или столько же, если возьмёте реально хорошего качества услугу. В программах есть также платные элементы (шаблоны, расширения, модули), которые могут увеличить стоимость использования. В uKit достаточно оплатить подходящий тариф и откроется полный доступ ко всему функционалу, доплачивать сверху не придётся. Так что выгоднее?
uKit предоставляет полную экосистему в сборе
, позволяет начать использовать себя мгновенно после входа на официальный сайт. Сразу в бой, без настроек, инструктажей и танцев с бубном. Готовый сайт можно собрать самостоятельно за один вечер.

Можно ли то же самое сказать про десктопное приложение? Поэтому при весьма схожей стоимости использования uKit можно считать «убийцей» программ, которые будут описаны ниже. Приложения для создания сайтов хороши по-своему, но тягаться по удобству с доступным в плане стоимости, современным онлайн конструктором им не по силам.
Mobirise - лучшая и абсолютно бесплатная программа для создания сайта

Mobirise (обзор) - это бесплатный оффлайн конструктор
 для самостоятельного создания сайтов на своем ПК или ноутбуке (Windows, Mac, Android). Программа лучше всего подходит для запуска сайтов с небольшим количеством страниц: сайты-визитки, лендинги, одностраничники или портфолио. Процесс сборки осуществляется в визуальном редактора, интерфейс простой и предельно комфортный, идеально подходит для новичков. Для начала работы нужно скачать архив с программкой на свой компьютер, установить и завести акканут.
Приложение напоминает своим подходом к созданию сайтов конструктор Lego: пользователю предоставляется большое количество блоков
 различного назначения, которые необходимо перетаскивать в окно редактора, создавая таким образом сайт необходимой структуры. Блоки - это строительный материал сайта: меню, хедеры, слайдеры и галереи, преимущества, медиа-контент, статьи, информационные, отзывы, соцсети, прайсы, формы, карты и футеры. Оформление и содержание блоков можно изменять: цвет, шрифты, добавить эффекты, кнопки, ссылки, заголовки. Ненужные элементы (стрелки, кнопки, описания и т. д.) можно выбрасывать из блоков или выключать. SEO-настройки присутствуют, ровно как и возможность создания многостраничных сайтов с многоуровневым меню. Функционала хватит с головой для оформления классной визитки или лендинга.
Готовые блоки оформлены в едином стиле в рамках выбранного шаблона. Последних в привычном понимании здесь нет, есть 5 видов оформления: 2 бесплатных и 3 платных. Смотрятся они привлекательно, современно и заметно отличаются между собой по стилю оформления. Каждый блок содержит демо-контент для наглядности. При необходимости, можно докупить дополнительные блоки ($39), если не хватает стандартных. Также в наличии есть пак векторных иконок, отдельный виджет слайдера, редактор кода и приём оплат через PayPal ($29). Подключение аналитики от Google, Soundcloud, виджеты комментирования через соцсети и соцбар бесплатны. Все покупки, совершённые в системе, остаются навсегда. То есть речь идёт не о помесячной аренде функционала. Один раз купил и пользуйся без ограничений.

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

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

Adobe Muse (обзор) - это мощная и продвинутая программа
 для создания сайтов на компьютере. Считается идеальной платформой для профессионального создания посадочных страниц, сайтов-визиток, портфолио и небольших магазинов. Интерфейс программы покажется простым лишь для опытных пользователей Photoshop"а. Всем остальным для его освоения понадобятся сторонние уроки, курсы или большое количество времени и терпения.
В Адоб Мьюз достаточно легко кастомизировать дизайн при наличии дизайнерской жилки. К сожалению, создать годную страницу с нуля без навыков здесь мало кто сможет. Лучше тогда использовать шаблоны. Структура последних здесь отличается от привычной. Под шаблонами подразумеваются макеты, заполненные элементами, повторяющимися на всех остальных страницах. То есть полный вариант дизайна сайта состоит из шаблонов (для шапки, подвала) и отдельных страниц (о нас, контакты и прочее). Редактировать, дублировать и создавать/удалять их можно почти в свободном порядке. Ограничение одно: из обычной страницы нельзя изменить подотчётные шаблону элементы.
Программа Adobe Muse отлично подойдёт для тех, кто желает научиться создавать шедевральные лендинги
. Либо же для тех, кто уже немного умеет и желает расширить свои возможности. Сайты-визитки оформлять сложнее, поскольку всё нужно делать вручную. Полноценные магазины неудобно делать, вести блоги - вообще табу, поскольку ПО не имеет онлайновой панели управления и, следовательно, не может динамически обновлять контент. Лендинги и одностраничники на Muse можно и нужно продвигать контекстной рекламой и социальными сетями. Встроенные возможности весьма стандартны: подключение аналитики Яндекса и Google, заполнение мета-тегов. Всё остальное нужно делать в сторонних сервисах.

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

Программа платная, стоит от 454 руб/мес
 по подписке Creative Cloud - облачной экосистемы продуктов Adobe. Позволяет создавать адаптивные страницы на HTML5, которые потом можно выгрузить на ПК или любой хостинг. Есть бесплатный пробный период 7 дней.
Оффлайн программы или онлайн конструкторы?
Несмотря на малочисленность, современные компьютерные программы для создания сайтов продолжают развиваться. Самые яркие примеры - Adobe Muse и Mobirise. Разработчиков последней совершенно не смущает конкуренция с облачными сервисами. Они идут своим путём, регулярно выкатывая интересные обновления. Если бы не необходимость отдельной закупки/настройки хостинга, данный сайтбилдер был бы в топах систем с визуальным редактором.
Лучшие программы для создания сайта:


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



Mobirise – отлично подойдёт
 новичкам для публикации единичного сайта – разбираться там вообще не в чем. Каждый сможет. При этом, программа бесплатная. Годится для личного использования – создания лендингов и сайтов-визиток с красивым, но несложным дизайном.



Adobe Muse – обладает мощнейшим
 редактором дизайна страниц, вне конкуренции по этому параметру. Пользоваться сложно на первых порах, но потом удобно. Подходит дизайнерам и тем, кто хочет делать посадочные страницы на заказ.

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