Создание веб сайта с помощью Dreamweaver CS4. Обучающий курс. Часть первая

Создание веб сайта с помощью Dreamweaver CS4. Обучающий курс. Часть первая

Adobe Dreamweaver Creative Suite 4 (SC4) – это популярный веб редактор для разработки дизайна, создания комплексных сайтов и управления ими. Вы можете легко создать свою страницу, а затем просмотреть результат, загрузив ее в обычный браузер.

Не беспокойтесь за совместимость созданного сайта с различными браузерами, Dreamweaver обеспечивает это, генерируя для веб страниц стандартный совместимый код.

Преимущества Dreamweaver CS4

К концу работы с Dreamweaver CS4, вы получите полностью готовый сайт с различными разделами и страницами, включая «Главную», форму обратной связи, страницу «О нас» и «Карту сайта». Ваши страницы будут содержать меню навигации, изображения, формы и ссылки на внутренние страницы и на другие сайты. Кроме того, научившись использовать инструментарий Dreamweaver на практике, вы сможете сами создавать привлекательные сайты.

Что вам понадобится

Создание веб сайта - это больше чем просто дизайн визуальной части страницы. Что же вам понадобится в первую очередь?

Dreamweaver:Так как мы рассматриваем возможности Dreamweaver CS4 это даже не обсуждается. Заметьте, что вам нужно использовать Dreamweaver CS4, а не более раннюю версию. CS4 и CS3 очень похожи, но есть некоторые различия (например, новые функции CS4, которые отсутствуют в предыдущей версии). Если у вас установлен редактор Dreamweaver 8, вам необходимо сделать обновление до CS4 версии.

Домен и веб хостинг: Вамследует зарегистрировать доменное имя вашего сайта. Пока у вас нет домена, вы столкнетесь со множеством проблем. Также побеспокойтесь о хостинге. Хостинг – это услуга, по размещению вашего сайта на сервере поставщика услуг для того, чтобы пользователи Интернета могли его видеть. Обычно под понятием услуги хостинга подразумевают как минимум возможность размещения файлов сайта на сервере, на котором запущено специальное программное обеспечение, необходимое для обработки запросов к этим файлам. Как правило, в услугу хостинга уже входит предоставление места для почтовой корреспонденции, баз данных, DNS, файлового хранилища и др., а также поддержка функционирования соответствующих сервисов. После того, как вы разработали сайт, вам нужно будет выложить его на сервер хостера. Сейчас создано большое количество хостов, так что выбор за вами. Тем не менее, сейчас мы говорим о создании и публикации сайта с помощью Dreamweaver.

Установка менеджера сайта в Dreamweaver CS4

Давайте приступим к созданию сайта. Для начала установите Dreamweaver CS4. На верхней панели вы увидите меню, с его помощью вы получите доступ к функциям редактора.

Для успешной работы с редактором, вам в первую очередь необходим «менеджер сайта». Установите его, кликнув на кнопку «site» в меню. В самом верху диалогового окна две клавиши: «Базовая» и «Расширенная». Выбирайте «Базовую».

В основной части диалогового окна вы увидите графу «Как вы хотите озаглавить сайт?». Здесь вы задаете имя сайта. Если вы уже зарегистрировали имя домена, просто забивайте его в это поле. Если вы создаете сайт для компании, то забивайте её название.

Ниже названия вашего сайта – графа, где нужно заполнить адрес вашего сайта. Вы увидите вопрос: «Какой HTTP адрес (URL) вашего сайта?» (What is the HTTP Address (URL) of your site). Как только вы заполнили обе графы, нажимайте кнопку «Далее».

Во втором окне выбираете ответ «Нет, я не хочу использовать технологию сервера» и нажимаете кнопку «Далее».

В третьем окне вы увидите вопрос «Как вы хотите подключиться к удаленному серверу?» (How do you connect to your remote server?). Выбирайте ответ «None». К нему вы вернетесь во второй части нашего курса. Кнопка «Далее»- вы увидите установленные параметры - жмите кнопку «Готово».

Главная страница сайта

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

Как разработать дизайн домашней страницы сайта в Dreamweaver CS4

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

Нажмите кнопку “File” . Перед вами окно под заголовком «Новый документ».

В правой колонке “Layout” (формат) выбирайте строку «2 column liquid, left sidebar, header and footer» одним нажатием на нее. А в правом нижнем углу найдите строку «Формат CSS» (Layout CSS) и выбирайте значение «создать новый файл»(create new file). Теперь Dreamweaver будет помещать информацию вашей страницы в отдельном файле. Это нужно для того, чтобы все страницы сайта хранились в одном формате, а размещение всей информации в одном файле будет экономить место на диске и пропускную способность, а также увеличит скорость загрузки веб страницы, если посетители будут загружать несколько страниц одновременно. Как только вы все закончили, нажимайте кнопку «Создать».

Следом появляется окно с предложением «Сохранить файл таблицы стилей как» (Save Style Sheet File As). Выбирайте имя по умолчанию и нажимайте «сохранить». Теперь перед вами страница с боковым и главным меню, и каким-то глупым содержанием внутри. Можно приступать к созданию домашней страницы

Давайте взглянем на стандартную настройку интернет сайта, который вы создаете в редакторе Dreamweaver. В верхней части страницы находится горизонтальная панель Header (или «шапка»). Здесь вы будете размещать название сайта и его логотип. Прямо над ней - графа, которая больше относится к функциям Dreamweaver - «Untitled Document», пишите сюда название вашего сайта.

Под «шапкой» находятся две разделенные области. Левая часть называется «боковое меню» (side bar), здесь будет меню навигации по сайту. Правая озаглавлена «Основное содержание» (main content) - это место для содержимого страницы.

Теперь можно заняться содержанием. Наведите курсором на «основное содержание», удалите находящийся там текст, и поместите свой. Функции печати и редактирования текста в Dreamweaver точно такие же, как у текстового редактора.

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

Прокрутите страницу к нижней части, вы увидите горизонтальную панель «подвал»(footer). Вы можете написать здесь все, что угодно (чаще всего сюда помещают знак копирайта (с) и название компании).

Во второй части вы познакомитесь с тем, как можно опубликовать сайт при помощи Adobe Dreamweaver CS4.

Чтобы больше узнать о возможностях Adobe Dreamweaver CS4 или у вас появились вопросы по приобретению, обращайтесь к нам, мы рады будем вам ответить.

Часть вторая

Купить Adobe Dreamweaver CS4 TLP русская версия

Купить Adobe Dreamweaver CS4 BOX русская версия



Возврат к списку