Сайт, сделать, в Dreamweaver, быстро

Мне очень нравится программа Dreamweaver, поэтому я её применяю! Но это совсем не означает, что  вы не сможете применить весь материал, который здесь представлен! Некоторые материалы, вообще никакого отношения не имеют к программе Dreamweaver.

Большинство манипуляций можно сделать и в блокноте! Либо в другой программе предназначенной для работы с кодом, например Notepad .

И еще хочется добавить, что я очень благодарен всем разработчикам, которые придумали программу Dreamweaver.

Благодарен им за то, что я немного, теперь, понимаю в коде и код не кажется  – джунглями, через которые невозможно пройти!

Когда я только начинал делать сайт, то нигде не мог найти простой инструкции – как сделать сайт быстро.

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

Самое главное – думайте о ваших посетителях, и делайте сайт для посетителей!

Мы будем делать сайт  в простом html и в программе Dreamweaver. Это меня вполне удовлетворяет. Текст написан, реклама поставлена, комментировать можно – что еще нужно?

Adobe Dreamweaver - программа для создания сайтов

Программа для создания сайтов. Как скачать и установить. Об этом я и хочу рассказать. В интернете сейчас масса различных сервисов, платных плагинов и конструкторов для создания сайтов. Пользоваться ими конечно удобно и просто.

Только есть одно «Но», они же все на одно лицо, а некоторые люди (я например) делают музыкальные виртуальные открытки. редактируют изображения для блогов.  А так же Вам может понадобиться шапка для видеоканала на YouTube. Можно конечно поискать фрилансера, но где гарантия что он сделает так как нужно Вам?

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

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

А что касается Дриамвивеера, то моё дело разместить  красиво фон, картинки, надписи, аудио или видео. А программа сделает за меня всё остальное, даже выдаст список кодов и вставит, после того как я их выберу. Важно ещё то что программа на русском языке! И мне останется только сделать папочку и загрузить файлы на хостинг. Очень удобно, эта программа просто незаменима.

У известного автора потрясающих видеокурсов о технической стороне инфобизнеса Евгения Попова есть бесплатный видеокурс об этой программе из очень качественных 14-ти видеоуроков. Предлагаю Вам скачать этот видеокурс  http://yadi.sk/d/3LWK5jEy2WxDI на свой компьютер и научиться работать в это программе

Эту программу можно найти в интернете бесплатно, а можно скачать с официального сайта и использовать пробный период в течении 30 дней, который предоставляет компания Adobe.  И не только эту программу Вы сможете использовать, там предоставлено внушительное количество разнообразных приложений и программ.

Всё это Вы сможете просмотреть в установочной панели, когда распакуете файл, который скачаете ссылочка будет размещена под видеороликом. Установить её не трудно для опытного пользователя, но с первого раза возможно придётся повозиться, так как многие надписи на английском языке. И так как на моём блоге много новичков, судя по опросу в сайдбаре, то я сделала скринкаст о том как скачать и установить программу

Вот ссылочка для скачивания программы  http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver&loc=en_gb

Переходите по ней и спускайтесь в самый низ сайта и там на тёмном фоне ищите слово Download (Скачать) и жмите на ней

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

Вы можете прочитать другие  статьи,

для этого воспользуйтесь Картой сайта .

А также получать новые статьи прямо на Ваш почтовый ящик.

Adobe Dreamweaver

После установки программы Adobe Dreamweaver, вам в первую очередь нужно будет определиться, где будут храниться папки с вашими сайтами. Это может быть папка на рабочем столе ( Мои сайты ) или на одном из дисков OS(C:). Data(D:) на вашем компьютере. Если вы хотите сделать сайт, где будет возможность отправлять комментарии, СМС, фотографии и т.д. вам нужно иметь либо свой домен ( sayte.ru ), либо локальный сервер. установленный на вашем компьютере.

Самое лучшее решение – установить локальный сервер.

Какой лучше всего выбрать и как его настроить, вы можете посмотреть

Я работаю с локальным сервером и примеры мои будут в локальной среде.

Локальный диск, установленный на моём компьютере - OS(W:). Где будут храниться ваши сайты, решайте сами!

И так, проходим в созданную папку для сайтов OS(W:). далее в папку domains (если локального сервера нет, папка domains не нужна). В ней создаёте ещё одну папку, с названием сайта которого вы будете делать. Например – test. Имя не должно содержать Русских букв и .ru. com. net и т.д.

Далее внутри папки test создаёте ещё одну папку с именем www. в этой папке будут храниться все файлы вашего сайта test.

Путь должен выглядеть так – OS(W:)\domains\test\www\ или Мои сайты\test\www\

Создадим сразу в папке www ещё две папки. Для изображений папку с именем - images и для стилей css папку - css

Корневой каталок сайта создан!

Как создать шаблон в Adobe Dreamweaver

adobe dreamweaver cs6 + кряк

Как только скачали и установили, думаю можно начинать

Перед тем как начать. создайте где нибудь папку для сайта ,туда будем сохранять наши файлы. И сразу создайте папку для картинок

В главном меню выберите HTML

Перед вами появится исходный код документа.

Title - нужен для отображения названия сайта в браузере. Туда пишем название нашего будущего сайта. К примеру я сейчас буду создавать сайт на тематику туризм. И согласитесь, цены за клик в контекстных рекламах туристических тематик выше чем у тематик кино или спорт. Конечно с моей стороны нехорошо делать сайт исключительно для заработка, но я постараюсь сделать наполовину СДЛ. Сама статьи не пишу. буду только заказывать. Но тематика ТУРИЗМ слишком обширная, так что мой сайт будет о конкретной стране, то есть об Италии. Вот что у меня получилось

Body - это тело сайта. ставим между ними курсор. нажимаем на "Вставка ", в нем на "Таблицы ". Тут можно выбирать количество строк и столбцов.

С помощью таблицы мы разделим наш сайт на разделы (шапка, меню, подвал, основа). У меня каркас будет простым. Если сумеете сразу разобраться можете выбрать сложный путь. Вот как я разделила мой будущий сайт :

Сначала задала 2 столбца и 3 строки. а потом верхние 2 и нижние 2 ячейки объединила. Для этого зашла в "Дизайн ". Выделила с помощью кнопка "ctrl " 2 ячейки. и правой кнопки мыши "таблицы " => "объединить ячейки "

Вот что у меня получилось в разделе "Код "

width - ширина. поставил 1115. шапка тоже будет такого размера

height - высота. 100%. на весь экран

border - пусть пока стоит 1, чтоб мы видели границы. Потом когда все закончите можно изменить его на 0

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

Один раз сохраните как index.html. Мало ли что. свет выключат ошибку какую нибудь выдаст.

Теперь давайте начнем наполнять сайт контентом

Сперва мы должны поставить шапку. у меня есть заранее подготовленная шапка

Для этого вставляем курсор в первую ячейку, далее "вставка " и "изображение ". выбираем там нашу шапку. И она автоматически вставится в код, ширину я изменяю на 1115px, а высоту оставляю как есть.

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

Давайте сразу здесь сделаем нашу шапку кликабельной, выделяем текст, идем вниз и там есть строка "ссылка ". туда пишем index.html

С шапкой закончили. можете что нибудь еще добавить. сфантазируйте

Теперь можно добавлять категории в блок Меню. "вставка " - "гиперссылка ". Изменяя параметры под себя вставляем несколько категорий. Например у меня. Города Италии - city.html. Италия обзор - italiya.html, Итальянская кухня - italyanskaya-picca.html и т.д.

Если нажать на кнопку "свойства страницы ". снизу раздела "дизайн ", можно поменять параметры ссылок (свет, размер, отступы, шрифт и т.д.)

Основная часть: Заходим в дизайн. наводим курсор в блок "основная часть " и вставляем свой текст. код к нему пропишется автоматически. Тут так же, если зайти в "свойства страницы ". можно отредактировать параметры

Теперь давайте создадим наши другие страницы

Заходим в "дизайн ", там в блоке "Основная часть" удаляем все, заполняем другой информацией. Например Города Италии. пишу сюда все что связано с тематикой Города Италии, и сохраняю страницу как city.html

Италия обзор. заполняю и сохраняю как italiya.html

В конце вот что у меня получилось

Это естественно не мастеркласс. И для опытных дизайнеров, которых много на этом форуме, мой урок покажется смешным, но для новичка который и понятия не имеет в создании сайта, вполне сойдет.

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

Если где то допустила ошибку не судите строго

Автор Марина Волохова

2. Pixsel [8838 ]

26 апр 2013, 15:46

Не чего смешного нет

3. МашаРастеряша [61 ]

Создание сайта в Adobe Dream Weaver

Возможность работы с текстовыми редакторами только для создания небольших WEB-страниц. Теория Web-дизайна и его история. Редактор DreamWeaver, его особенности. Основные требования, предъявляемые к Web-странице. Предпосылки возникновения DreamWeaver.

курсовая работа [576,1 K], добавлен 12.06.2009

Обзор программ для создания Web-страниц; сравнительный анализ Macromedia Dreamweaver и Front Page. Процесс создания современного сайта; оценка экономической целесообразности использования компьютера. Охрана труда оператора компьютерного набора и верстки.

дипломная работа [84,2 K], добавлен 07.07.2010

Характеристика возможностей редактора DreamWeaver и Front Page. Особенности языков программирования PHP и JavaScript. Основные требования, предъявляемые к Web-странице. Специфика программного обеспечения для ее создания и эффективности использования.

курсовая работа [44,6 K], добавлен 03.02.2011

Порядок проектирования сайта и разработки Web дизайна. Приемы работы и решения программных продуктов Microsoft FrontPage 2003, Adobe Photoshop CS2, Allaire HomeSite 4.5, AWicon Pro v. 9.0. Реализация дизайнерского решения с помощью графических объектов.

творческая работа [3,7 M], добавлен 26.05.2009

Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.

методичка [1,9 M], добавлен 06.07.2011

Язык разметки гипертекстовых страниц HTML. Обеспечение доступности Web-страницы, представление текста и графики. Основные правила и этапы создания сайта, выбор структуры страницы. Оценка экономической целесообразности использования HTML-редакторов.

дипломная работа [86,7 K], добавлен 25.03.2013

Теоретический обзор по проблеме создания web-сайта "Конфликты в организации". Анализ информационных ресурсов и сервисов. Характеристика методов исследования конфликтов в организациях. Программный пакет Macromedia Dreamweaver для создания web-сайтов.

дипломная работа [1,7 M], добавлен 22.06.2015

Основные понятия и определения мультимедийных технологий. Возможности программы для создания интерактивной векторной анимации, ориентированной на создание web-сайтов и презентаций Macromedia Flash. Этапы создания мультимедийных презентационных программ.

дипломная работа [73,2 K], добавлен 15.04.2013

Рассмотрение средств создания web-страниц: HTML, CSS и РНР. Разработка приложения в PhpMyAdmin, работающего с базой данных "Спортивные организации города". Соединение с сервером и базой данных. Создание сайта "Институт" в Macromedia Dreamweaver 8.

курсовая работа [461,8 K], добавлен 10.07.2015

Сравнение языка Php с другими языками программирования web-приложений. Язык разметки гипертекстовых страниц Html. Технология Macromedia Flash, её преимущества и недостатки. Этапы создания флеш-сайта, руководство пользователя и листинг программы.

дипломная работа [2,3 M], добавлен 04.10.2013

Как создать шаблон Adobe Dreamweaver

Шаблоны Dreamweaver решают проблему, с которой сталкиваются многие компании – как поддерживать сайт и оставлять стандартные разделы стандартными. Обычным решением является использование SSI (Серверные вставки), но не все веб-сервера поддерживают эту технологию. Есть другие способы, посредством которых можно включить один html-файл в другой, но все они используют или программы на стороне сервера, или java-скрипты на на стороне пользователя.

Шаблоны Dreamweaver позволяют создавать шаблон страницы, который постоянно находится в одной области вашего сайта, и в последующем создавать другие страницы, основываясь на этом шаблоне. Потом, при внесении изменений в шаблон, изменятся также страницы, использующие шаблон.

1. Начинаем с макета

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

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

2. «Сохранить как шаблон…» – в меню Файл

В меню Файл есть опция «Сохранить как шаблон…». Выберите её, чтобы сохранить созданный дизайн как шаблон Dreamweaver.

Примечание. Шаблоны Dreamweaver создаются как часть сайта Dreamweaver. Если у вас не определён ни один сайт, вам нужно создать сайт в Dreamweaver перед созданием шаблона.

3. Сделайте описание шаблона

Выберите сайт, на котором вы хотите использовать шаблон. Я буду его использовать на сайте «Dreamweaver Examples». Название вашего сайта будет отличаться.

Опишите шаблон. Описание может быть настолько коротким или длинным, насколько вам это необходимо. Однако не скупитесь на детали, они могут быть важными в будущем.

4. Создание папки для хранения шаблонов

У моего сайта уже есть папка для шаблонов. Но если её не было, Dreamweaver автоматически создаст такую.

Все шаблоны Dreamweaver хранятся в папке «templates» на вашем сайте, и имеют расширение *.dwt (сокращенно от Dreamweaver Template).

5. Начинаем добавлять редактируемые области

• Выберите часть текста, которую хотите сделать изменяемой.
• Перейдите в пункт меню Вставка — Объекты шаблона.
• Выберите «Редактируемая область».

Есть и другие объекты шаблона, но они выходят за рамки данного урока.

6. Задайте имя Редактируемой области

Вы можете оставить имя, которое Dreamweaver задал по умолчанию, но я рекомендую задать описывающее имя, что позже напомнит вам, какая именно информация должна содержаться в этой области.

7. Редактируемые области в блочных элементах

Если вы попробуете разместить редактируемые области внутри блочных элементов (таких как заголовок, параграф), Dreamweaver выдаст предупреждение. Если вы оставите область внутри блочного элемента, ваши авторы контента не смогут внедрить туда какие-либо другие HTML-элементы.

Я использую это, когда хочу убедиться, что заголовок останется заголовком, или необходимо конкретное количество параграфов или других элементов в шаблоне.

Если вы решили оставить возможность добавлять другие блочные элементы внутри данного элемента, тогда вам нужно перенести границы редактируемой области за теги элемента. Вы можете это сделать в режиме отображения HTML-кода, или заново указав область, предварительно её удалив.

8. Оцените готовый шаблон

В готовом шаблоне редактируемые области выделяются рамками, над которыми будет имя области.

9. Создаем страницу на основе шаблона

Как только вы сохраните шаблон, можете его использовать на сайте:В меню Файл выберите «Создать»;

• Перейдите ко вкладке «Страница из шаблона»;
• Выберите созданный шаблон;
• Удостоверьтесь, что выбран пункт «Обновлять страницу при изменении шаблона»;
• Нажмите «Создать».

Теперь вы можете вносить изменения, но только в редактируемые области. Dreamweaver не позволит вам изменять другие части шаблона.

10. Измените шаблон – обновите файлы

Если позже вам необходимо внести какие-то изменения в шаблон, отредактируйте файл dwt в папке «Templates». Как только вы сохраните изменения в шаблоне, Dreamweaver спросит не хотите ли вы обновить страницы, созданные на основе шаблона. Он также укажет, какие это файлы.

Как только вы кликните «Обновить», все файлы, созданные на основе этого шаблона, будут обновлены. Вам только остается сохранить их и загрузить на веб-сервер.

Создание сайта в Dreamweaver

Поговорим о подготовке базы, т.е. что нам потребуется для самостоятельного создания сайта html в Dreamweaver. Нам потребуется html – редактор. Об этом многообразии мы тоже уже говорили (от простого блокнота и до сложных WYSIWYG систем). Объяснять Вам и выкладывать скриншоты я буду на примере популярной программы Dreamweaver. Продукт этот не бесплатный, а призывать Вас скачать Dreamweaver с таблеткой я не стану. Если у Вас есть возможность работать с этой программой (любой версии) то это очень хорошо, а если нет, то тоже ничего страшного. Кстати можно воспользоваться 30-дневным бесплатным периодом и, по-моему, там нет никаких серьёзных ограничений. Если же нет, то в этом случае можно, к примеру, воспользоваться совершенно бесплатным программным продуктом Nvu.

Приступим.

1. Создаём папку, в которой собственно и будет храниться сайт, который мы будем создавать - html страницы, каскадные таблицы стилей css. изображения. Сделайте это в любом удобном для Вас месте. У меня это будет диск C: и каталог я назову freesite.
2. Заходим в программу Dreamweaver. Я буду опираться на Adobe Dreamweaver CS5 .

Связываем созданный нами каталог freesite с Dreamweaver, чтобы из него получился локальный веб-сайт. Для этого щёлкаем на «Файлы»  - «Управление веб-сайтами …» в правой панели или выбираем из горизонтального меню «Веб-сайт» - «Управление веб-сайтами …».

Документ по умолчанию: HTML;

Расширение по умолчанию. html;

Тип документа по умолчанию (DTD): HTML 4.01 Transitional.