[X] Помощник

[WPGet Topic Starter]

[img]http://s018.radikal.ru/i527/1210/55/c332c4349b9d.png[/img]

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

Ниже список программ которые мы будем использовать:

• Artisteer 3
• WYSIWYG Web Builder 8
• Adobe DreamWeaver
• NetBeans
• NotePad++

Я постарался выставить некую иерархию сложности программ в плане верстки на них сайтов от самых легких с которыми справиться даже новичок, до инструментов реальных профи. Почему в конце я оставил NotePad++? Потому, что это текстовый редактор без какой либо графической оболочки. Т.е. отлаживать сайт вам придется в каком либо браузере и к тому же вы должны знать языки программирования, разметки и т.д. Все программы работали на Windows 7 Ultimate x64, поэтому если возникнут какие либо проблемы с совместимостью пишите попробую помочь.

[img]http://s005.radikal.ru/i209/1210/e6/d2aa07c435af.png[/img]

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

Плюсы данной программы:

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

Минусы:

• Программа ориентирована на создание шаблонов, поэтому можно создать только статичную странницу, а не CMS
• Слишком сильная "шаблонность" не даст создать абсолютно любой дизайн, например как на YouTube и т.д.
• Иногда может зависнуть и проект не сохраниться (пару раз такое случалось, после стал чаще сохраняться)

Несмотря на некоторые минусы, программа меня несколько раз выручала, даже был случай когда сверстал сайт на платной основе, поэтому имейте ввиду. Для создания с html странницы (html-шаблона особой разницы в данном случае нет, так как html шаблон можно использовать как статичную странницу) достаточно в контекстном меню выбрать Файл->Сменить тему->HTML шаблон. Вот как это выглядит:

[img]http://s017.radikal.ru/i436/1210/e6/bf61088ef2ea.png[/img]

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

[img]http://s019.radikal.ru/i624/1210/55/5e494c53bf07.jpg[/img]

Таким образом отредактируйте нужные элементы, не бойтесь ничего испортить в программе работает Cntrl+Z. После создания тестовой html странницы сохраним ее. Для это в контекстном меню программы выбираем Файл->Экспорт->Экспорт HTML:

[img]http://s40.radikal.ru/i089/1210/b2/3783601c4a22.jpg[/img]

Далее появится окошко с параметрами, где мы можем указать имя нашего проекта, путь сохранения и как именно мы хотим сохранить (архивом или в папке):

[img]http://s017.radikal.ru/i439/1210/b3/6a45b693ee08.jpg[/img]

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

[img]http://s002.radikal.ru/i197/1210/b6/276e44087e6b.png[/img]

Так же платная программа, но имеющая триальный период Довольно известная программа для верстки сайтов, название которой является аббревиатурой из слов What You See Is What You Get, («что видишь, то и получишь» материал из Wiki). К программам типа WYSIWYG относятся все программы которые имеют графический редактор сайта паралельно с текстовым. Такая связь помогает одновременно редактировать код и создавать различные элементы (например таблицу) в визуальном режиме. Отсюда и название. Наглядным примером может стать всем известный Adobe DreamWeaver.

Данная программа является моей любимой в том плане, что она очень легкая в плане нагрузки на компьютер и точно также легкая при работе с ней. Эта программа спасла меня еще на 3 курсе когда нам задали создавать сайты и выставить их. Так как в универе был только FrontPage, а сроки поджимали я нашел случайно эту программу в сети и начал создавать свой тогда еще первый сайт. К чему я это говорю. А к тому, что благодаря своей простоте программа помогла создать мне сайт с меню и различной медиа-информацией за 3 дня. Если учитывать, что программа на английском, она была для меня не изведанной, я еще не делал сайтов. Чем то напоминает работу с Microsoft Word.

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

[img]http://s003.radikal.ru/i202/1210/20/f2427dcd4930.jpg[/img]

Название и маленькое изображение на против каждого элемента дает понять, что это за элемент и за, что он отвечает/делает. Далее в программе в верхнем правом углу находиться окошко со структурой вашего сайта. Очень большим плюсом является то, что в данной программе можно создать полнофункциональный движок сайта. Программа поддерживает работу с php и asp. Правда для этих целей вам понадобятся ряд уроков по данной программе. Чем сложней вы собираетесь сделать проект, тем больше знаний потребуется. К сожалению одной статьи мало для описания всех возможностей данной программы, поэтому остальные данные я опубликую в своем блоге в формате видеоуроков.

[img]http://s018.radikal.ru/i515/1210/ea/2d6432225a1b.png[/img]

Пожалуй самая известная программа для верстки сайтов из категории WYSIWYG. Довольно крутая и дорогая программа для верстки сайтов. Скажу сразу, что программа предназначена для профессионалов и вот так в ней не разберешься. Открытие программы начнется с того, что вам предложат создать документ с которым вы ходите поработать (php, html. xml и т.д.). Это является основной фишкой данной программы, она на столько функциональна, что в ней легко затеряться новичку.

[img]http://s002.radikal.ru/i199/1210/b6/ede8d867d2a6.png[/img]

Для свободной работы в программе, вы должны знать языки разметки и/или программирования. Программа не нацелена на новичков к сожалению никаким образом и начинать сайтостроение с нее я не советую, для начало освойте язык разметки html, попробуйте себя в программировании на php. Стоит так же изучить CSS и Javascript.

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

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

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

[img]http://s019.radikal.ru/i644/1210/75/7b91540233b2.png[/img]

Бесплатная среда разработки, когда то посоветована мне одним из моих друзей. Отличная программа для людей которые учат php или же javascript. В программе радует наличие русского языка и большое количество документации и примеров в сети (в самой программе тоже есть довольно много примеров их можно увидеть при создании нового проекта). В основном акцент сделан на написание кода, что может порадовать только истинного программиста.

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

Список поддерживаемых языков программирования можно увидеть при создании нового проекта. В контекстном меню Файл->Создать проект:

[img]http://s019.radikal.ru/i625/1210/46/7fe0a84f33b6.jpg[/img]

Собственно тут же видно, что есть уже какие то встроенные примеры.

[img]http://s019.radikal.ru/i632/1210/91/7e5d3ad11587.png[/img]

Старый добренький блокнот. С момента работы с компьютером это самое частое, что я открываю помимо браузера. Универсальная программа. Лично мне она заменяет записную книжку, ежедневник, редактор десятков различных форматов файлов в числе которых и php с html. Данная программа на самом деле универсальная, она имеет отличную подсветку синтаксиса десятков различных языков программирования и является бесплатной. Для выбора подсветки определенного синтаксиса нужно в разделе синтаксис выбрать нужны вам язык программирования/разметки:

[img]http://s55.radikal.ru/i150/1210/31/e0b5e316c3e3.png[/img]

Вот простой пример документа на html:

[img]http://s017.radikal.ru/i429/1210/44/a3d42f7ad075.jpg[/img]

Таким же образом можно работать с CSS, PHP и т.д. Так как это изначально текстовый редактор, никакого графического интерфейса нет вы должны очень хорошо знать html теги и синтаксис.

Всем спасибо за внимание, можете посетить мой блог по созданию сайтов и их монетизации.

При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.
[img]http://www.masterwebs.ru/sp/seopult.gif[/img]

[k1on]

Мне phpDesigner нравится для всего подходит.

[EPashkov]

Спасибо за статью. Визуальными редакторами не пользуюсь, в PHP-проектах использую NetBeans. На мой взгляд нет смысла использовать NetBeans исключительно для верстки, не верстальная это программа. Тем более, что подсветка синтаксиса и автодополнение есть даже NotePad++.

[sae]

Использую Dreamveawer, Notedap++ и AkelPad.
1. DW в 2 раза сокращает время верстки благодаря автоматической подстановке нужных тегов и прочим плюшкам. Но тяжеловат и громоздок как-то. Работа с кодировками на нуле.
2. N++ очень полезен, когда надо очень быстро поправить какую-нибудь мелочь. Все быстро и просто. Замечательно проработана работа с кодировками в рамках одного файла.
3. AP использую исключительно для пакетной смены кодировки. Больше там ничего сверхъестественного то вроде инет. А вот тыщу файлов за минуту в utf-8 перевести - это он может.

[WPGet Topic Starter]

Всем спасибо за информацию и критику

[sc2r2bey]

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

[WPGet Topic Starter]

[member=surfer],Может поделитесь названиями этих программ? Очень хочется узнать.

[sc2r2bey]

я давал тут ссылку на хороший обзор программ ищи

[WPGet Topic Starter]

ищи

Сам скинь.
P.S. у кого то кажется батхерт

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.