|
Среди программ для создания сайта самым известным является редактор Dreamweaver, созданный компанией Macromedia и продолжаемый разрабатываться и совершенствоваться в настоящее время компанией Adobe.
Dreamweaver - мощное и в то же время удобное средство для разработки сайтов. В этой статье я рассмотрю, как создать простой сайт из трёх страничек с помощью этой программы.
Как уже упоминалось в статье "Как создать свой собственный сайт", при создании сложного, хорошо оформленного сайта обычно сначала целиком рисуют дизайн страницы в графическом редакторе, например, Фотошопе, а затем полученная картинка разрезается на кусочки и верстается при помощи html-редактора, такого, как Dreamweaver. Но если сайт простой, графические элементы можно сделать отдельно и сразу начинать его создание в html-редакторе. Так и поступим. Пусть сайт, который мы решили сделать, будет рассказывать об Антарктиде. Сделаем для него простую шапку и выберем фон:
Создадим на компьютере папку "antarktida" и сохраним туда эти рисунки.
Запустим Dreamweaver CS5. Жмите на цифры внизу, чтобы последовательно посмотреть выполняемые действия.
|
|
|
|
|
|
|
|
Для начала нам нужно создать новый сайт. Выбираем в меню "Веб-сайт" -> "Новый сайт".
Придумываем название для сайта и выбираем папку, в которой будут храниться страницы, картинки и прочие файлы, относящиеся к сайту.
Слева список всех этих файлов можно видеть. Пока в папке всего 2 файла - 2 картинки, которые я сохранил в неё ранее.
Теперь нужно создать первую страницу сайта. Создадим обычную пустую html-страницу.
Сохраним страницу. Поскольку эта страница будет главной, дадим файлу название index. Страница будет сохранена под именем "index.html".
Нажмём на кнопку "Свойства страницы" внизу, чтобы задать фоновый рисунок.
Выберем картинку, содержащую фоновое изображение (01.jpg).
Важный пункт в свойствах страницы - это её кодировка. Dreamweaver CS5 задал для новой страницы кодировку utf-8, и я не будут её менять, однако в некоторых более старых версиях Dreamweaver страница по умолчанию создаётся с западноевропейской кодировкой, не содержащей русских символов. В этом случае кодировку страницы нужно поменять, выбрав, например, "Кириллица (Windows)" или "Юникод (UTF-8)".
|
Теперь приступим к расположению элементов - текста и картинок на странице. Такой процесс называется вёрсткой. Вёрстка бывает двух видов - табличная и блочная. Блочная вёрстка (или, как её ещё называют, вёрстка на "дивах") считается более продвинутым способом, однако она более сложна в освоении.
Выберем следующее расположение основных блоков на странице:
Будем использовать при создании сайта более простую табличную вёрстку. Жмите на цифры внизу, чтобы последовательно посмотреть выполняемые действия.
|
|
|
|
|
|
|
|
|
Разные элементы на страницу можно добавлять, выбирая их при помощи пункта меню "Вставка".
Более удобным вариантом может быть использование панели инструментов для вставки элементов на страницу. Если этой панели вы не видите, включить её можно, поставив галочку, как показано на рисунке.
Вот так выглядит эта панель инструментов.
Для начала нам нужно вставить таблицу. Укажем для таблицы такие параметры, как вы видите на рисунке.
Чтобы таблица не прижималась к левому краю, выровняем её по центру.
На синем фоне текст будет читаться плохо. Зададим для ячеек таблицы белый фон. Для начала при помощи мыши выделим все ячейки.
Внизу выберем белый цвет для фона.
Для шапки и подвала нам нужно всего по одной ячейке. Объединим две верхних и две нижних ячейки. Для начала выделим две верхних ячейки при помощи мыши.
Нажмём внизу на кнопку, объединяющую ячейки, как указано на рисунке.
Аналогично объединим две нижних ячейки. Вот что получилось.
Для меню нужно меньше места, чем для основного текста. Поместим курсор в левую среднюю ячейку и зададим ширину для неё 20%. Теперь она будет занимать 20% ширины таблицы, а правой колонке останется 80%.
Вот что получилось.
Начнём заполнять ячейки. Вставим картинку, приготовленную для шапки. Жмём кнопку для вставки изображений.
Выбираем нужную картинку.
Полезно задать для картинки поясняющий текст. Если вдруг у кого-то будут отключены картинки в браузере, он увидит этот текст вместо картинки, а поисковые системы будут показывать по этому тексту картинки с вашего сайта в поиске по картинкам.
Теперь сделаем меню. Пусть на сайте будет три страницы - главная, про климат Антарктиды и про животный мир Антарктиды. Напишем заголовки для этих страниц и выделим мышкой.
Нажмём на кнопочку внизу, чтобы сделать меню в виде маркированного списка (1). Также выберем выравнивание по верхнему краю, чтобы меню всегда было в верхней части ячейки (2).
Теперь заголовки пунктов меню нужно сделать ссылками. Выделим текст "Главная".
Внизу в поле "Ссылка" впишем название файла главной страницы index.html. Теперь пункт меню "Главная" будет указывать на главную страницу index.html
Придумаем названия для файлов двух других страниц, например, klimat.html и zhivotnyj-mir.html и аналогичным образом сделаем соответствующие пункты меню ссылками.
Укажем название для главной страницы в соответствующем поле. Пусть будет "Сайт об Антарктиде".
Добавим в ячейку для основного текста общую информацию об Антарктиде.
Наконец добавим текст в футер. Главная страница готова.
Сделаем две другие страницы. Сначала сохраняем главную страницу.
Затем выбираем "Сохранить как...", чтобы на основе главной сделать следующую страницу.
Сохраняем страницу под именем "klimat.html".
Меняем заголовок и текст, сохраняем, затем таким же образом создаём ещё одну страницу - о животном мире Антарктиды. На этом создание сайта завершено.
|
Что делать после того, как сайт готов? Осталось выбрать хостинг и закачать сайт в интернет. Закачиваем все файлы сайта, включая картинки и страницы, на хостинг через ftp или при помощи менеджера файлов в панели хостинга.
Сайт, созданный в примере, можно увидеть по адресу http://antarktida-11.narod.ru
Сайт в примере был создан полностью в визуальном режиме. Однако при создании сложных сайтов не обойтись без знания языка html. Изучить html и во всех деталях освоить создание сайтов в dreamweaver вам помогут учебники из этого раздела сайта wseweb.ru.
Вам всё ещё непонятно, как создать сайт в программе dreamweaver? Задайте вопрос на форуме! |
