Страница сайта в Dreamweaver | Как создать свой сайт

Страница сайта в Dreamweaver или блочная верстка сайта с помощью css

Июн-1-2009 Автор: VeryOldMan

Вот мы, наконец, и добрались до самого главного, а именно непосредственно до вопроса как создать сайт в Dreamweaver. В отличие от текстовых редакторов, где страница наполняется текстом, а потом сохраняется, здесь мы сначала создаем и сохраняем новую страницу сайта, которую потом будем постепенно наполнять содержимым. Это можно сделать при открытии программы, в меню Создать, выбрав HTML или с открытого главного окна выбрав в меню Файл (File) пунктСоздать…(New).  На экране появится диалоговое окноСоздать документ (New Document).  В нем мы выбираем: Пустая страница — HTML – Создать. В инструментарии документа выбираемПроект.

Теперь эту пустую страницу нужно сохранить. Для этого в менюФайл (File) выбираем пункт Сохранить как…(Save As). Так, как это будет главная страница сайта — сохраняем страницу под названием index.htmlв папке sitewww, в которой хранится содержимое сайта, и начинаем собирать страницу из фрагментов, созданных в  Фотошопе.

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

Итак:

Контейнер — это особый тег (особая команда) HTML, служащий как бы “упаковкой” для других тегов. То, что находится в контейнере, ведет себя как одно целое. То есть, мы имеем возможность, управляя этим одним целым, делать с ним все, что пожелаем, а именно применить стили css.Поэтомутакой вид верстки  еще называют и css версткойстраницы сайта.

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

Хорошо сказано! Это из книжки. А теперь я расскажу о контейнерах для тех, кто не знает HTML. Представьте себе ящик, состоящий из двух частей — верхней и нижней. Назовем это ящик контейнером. Все, что находится между верхней и нижней частью, то есть в середине его, называется содержимым контейнера.

По аналогии: открывающий тег <div> — верхняя часть контейнера, закрывающий </div> — нижняя часть контейнера. На HTML это выглядит так: <div> содержимое </div>.

Посмотрите на этот рисунок:

Страница сайта в Dreamweaver

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

С этим всем мы будем разбираться на странице  — CSS класс страницы сайта






10 комментариев
  1. Janearts Пишет,

    Спасибо! Очень полезные статьи, и хорошо написаны 😉

  2. Евгений Пишет,

    Спасиб вам большое! Очень интересно. ))

  3. Zerber Пишет,

    Вступление заинтриговало, сайт в закладки. Потом вернусь.

  4. Игорь Пишет,

    СПАСИБО!! Вам за проделанную работу ))) Очень доступно, поэтапно, не грузит терминами — «то шо нада» ))) СПАСИБО!!

  5. stas Пишет,

    дополняйте блок схемы контейнеров html кодом … может комуто будет проще как мне..

  6. aaa Пишет,

    ogromnoe vam spasibo

    eto lytshee, chto ya nashel v i-nete

  7. Николай Пишет,

    Спасибо очень интересно и доходчиво.

  8. Pavel Пишет,

    Дохожу до третей страницы ,дальше не идет.Делаю как написано ,не идет.5 раз начинаю сначала снова не идет. Где то вы пропустили описание.

  9. Галина Чернышова Пишет,

    Какое огромное Вам спасибо за этот материал.

    Замучалась настраивать Dreamweaver самостоятельно и вот счастье -попала на Ваш сайт.

    Все так просто и подробно расписано у Вас, что настроила его очень скоро. Сейчас вместе с Вами буду создавать страницу.

    Внесла Ваш сайт в закладки, весь не просмотрела, но вижу много интересного.

    Желаю успехов!

    С уважением, Галина Чернышова

  10. Firexi Пишет,

    Спасибо все работает, только слышал что на Dreamweaver сайты лучше не делать, лучше использовать Notepad++?

Добавить комментарий