Создать сайт самому? Не проблема! Все о создании сайтов – как создать дизайн сайта, верстка сайта, уроки HTML, сайт на WordPress, как выбрать хостинг сайтов

Ну вот, страничку сайта мы в программе Photoshop сделали, порезали, а теперь будем собирать ее в web-редакторе Dreamweaver CS. Что значит собирать? А то и значит, что мы будем собирать фрагменты страницы, порезанной в Photoshop, как дети собирают мозаику. Кстати и, похоже. Да плюс к этому научимся вставлять или набирать текст и связывать между собой отдельные страницы сайта и части этих страниц, а также ссылаться на ресурсы Интернета. Весь этот процесс называется версткой сайта .

Хотел было назвать раздел со статьями по работе с редактором учебник Dreamweaver CS или чуть поскромнее, уроки Dreamweaver CS, но, как говорится, рука не поднялась. Может со временем, когда в раздел добавятся хотя бы несколько десятков статей, он сможет хоть как-то претендовать на роль хотя бы скромного самоучителя Dreamweaver CS. А пока здесь просто несколько статей, описывающих конкретный случай сборки конкретной страницы сайта. Учебники, кстати, можно посмотреть в разделе Электронная web литература. Итак, к делу.

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

Редакторов много. Лучший, по моему мнению, Dreamweaver CS. Это самая лучшая программа для создания сайта. Он из так называемых, визуальных web-редакторов, которые работают в соответствии с принципом “что ты видишь, то ты и получишь”. В них вы набираете или вставляете тексты, элементы графики, короче собираете web-страницу, а в окне редакторов сразу же видите, что у вас получается. Конечно, редактор имеет и режим непосредственной правки HTML кода.

Ну а теперь непосредственно к редактору Dreamweaver . Я не буду описывать всю программу, а ограничусь только самым необходимым. Вот чтоб взять – и делать! Подробнее – в литературе.

После запуска программы видим такую заставку:

У меня редактор Dreamweaver CS3. Левая колонка – позволяет открыть документы, с которыми вы недавно работали. Средняя — определяет тип вновь создаваемого документа. В третей – мы можем создавать новые документы, пользуясь стандартным набором шаблонов. Можете посмотреть, хотя там ничего интересного нет.

Так, как мы создаем HTML страницу – щелкнем на HTML в Создать. Откроется вот такая страница называемая главным окном:

Чего тут только нет! Разберем, вкратце из чего оно, главное окно, состоит. Если мы не открыли какую-либо готовую web-страницу — мы увидим страницу, называемую стартовой. В верхней части окна находится меню, называемое главным. Правая часть окна содержит целый набор панелей с разным назначением, отделенных от остального окна толстой серой полосой. Это так называемый док. На средине этой полосы можно увидеть значок прямоугольника с треугольником внутри, кликнув на котором можно свернуть или развернуть док. Из панелей дока нам, пока что, нужны будут – Файлы и CSS.

Нижняя часть окна содержит панель, называемую Свойства (Properties). Ее назначение – редактирование свойств элементов страницы, которою вы создаете. Эта панель имеет такую же серую полосу, назначение ее то же, что и в правом доке.

Посмотрим в верхнюю часть окна. Здесь, под главным меню, вы увидите две панели – называемые инструментариями. Непосредственно под главным меню находится панель, которую называют Инструментарий объектов. Ее назначение — быстро помещать на web-страницу различные элементы:

Под ней находится панель, которую называют Инструментарий документа. Ее назначение — выполнение различных действий с web-страницей, которую вы открыли:

Что и к чему разберем в процессе работы над страницей. Вот коротко и все по описанию редактора. Дальше, посмотрим, как его настраивают и перейдем непосредственно к верстке сайта в редакторе Dreamweaver CS.

И будет это на странице Настройка редактора Dreamweaver