Урок 1

AlinaLaz

 Создаем свой собственный, простенький сайт с помощью программы Dreamweaver

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

Dreamweaver

Наcтройка программы Adobe Dreamweaver. Вам нужно зайти в настройки Dreamweaver и сделать некоторые изменения, которые позволят использовать данную программу в качественном объеме. После того, как Вы сделали настройки программы, можем смело приступать к началу работы, непосредственно к созданию сайта. Первое, что нам нужно-это сделать шаблон будущего сайта. Как правило он в Dreanweaver уже готовый. Вы его можете наблюдать в меню кода при создании нового документа, который называется по умолчанию Untitled-новый документ. И если Вы посмотрите в код данного документа, то увидите готовый шаблон, который необходим для любого сайта. Этот код нужен для каждой новой страницы сайта. Код должен выглядеть так:

шаблон страницы

Этот шаблон является стандартным в большинстве случаев.  Создаем шаблон будущего сайта. В нем может меняться 1 и 5 строчки. Все зависит от версии HTML и языка текста. Но я Вас буду учить создавать сайт именно по этому шаблону. Если Вы захотите создавать свой сайт в другом шаблоне, то пожалуйста, как говориться на вкус и цвет товарищей нет. Но запомните. что от этого Ваш сайт не изменится и результат во всех случаях будет одинаковый.

Если Вас все устраивает, то продолжаем. Действия за пределами программы Dreamweaver. Сохраните данный документ где нибудь у себя на компьютере. Создайте общую папку для Вашего будущего сайта и назовите ее на Ваше усмотрение. В этой папке создайте еще одну папку с названием www (именно так и никак иначе). Откройте эту папку и создайте еще одну с названием images (можно назвать ее pictures, как то еще, но при условии, что она будет на английском языке.

Здесь будут храниться Ваши картинки для сайта. Далее, сохраните Ваш созданный в dreamweavere новый документ в папку www под именем index.html. Это будет Ваша главная страница сайта, которая должна иметь именно такое название. Другое название главной страницы сайта не допустимо. Если только, она может менять расширение с html на php. Запомните эти главные требования, которые необходимы на начальном этапе создании любых сайтов. Эти требования необходимы для того, чтобы в дальнейшем, при создании сайта, не наткнуться на неприятные сюрпризы. Я не пугаю Вас, но данные требования нужны каждому, кто хочет увидеть свой сайт в интернете.

Подготовительная работа в Dreamweaver. Если все вышесказанное Вами сделано, то приступаем еще к одной подготовительной работе. Без данных действий можно обойтись, но Вам будет очень не удобно тогда работать с программой Dreamweaver. Поэтому сделайте данные действия о которых я Вам сейчас расскажу. Справа от Вас в рабочем окне программы находится панель программы Adobe Dreamweaver. Все что Вам понадобиться в данной программе, так это два пункта этой панели «Файлы» и «Стили CSS».

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

А именно в подпункте «веб-сайт» нужно Вам ввести название Вашего сайта (можно называть как угодно и любым языком) и локальную папку сайта ту которая называется «www». То есть у Вас будет полный путь к этой папке. Далее переходим в подменю «дополнительные настройки», где в строке «папка изображений по умолчанию» Вам нужно указать полный путь к Вашей папке с картинками, а именно папку «images». Важно при указании этих папок нужно обязательно зайти в них и затем нажать ок, чтобы в строке было название этой папки.

Все, после того как Вы сделали данные действия, нажимаете на кнопку сохранить в низу окна. После чего, у Вас появиться уже знакомое окно, но с той разницей, что в окне будет название Вашего созданного сайта. Теперь Вам нужно нажать на кнопку «готово». И в меню «файлы» в окне справа у Вас должен появиться Ваш созданный сайт с папкой www и файлом index.html. Если Вы нажмете на эту папку то у Вас появится еще одна с картинками. Здесь будут отображаться все Ваши файлы при создании сайта. Все, основную работу мы сделали. Осталась лишь самая малость, перед тем, как мы начнем создавать сайт. Для это мы подключим таблицу стилей CSS к нашему сайту и это будет последнее приготовление, которое позволит начать создавать сайт.

Так же мы поговорим о том, как сделать меню для сайта. Мы с Вами сделаем горизонтальное меню и вставим его на сайт с помощью Adobe Dreamweaver. Для этого Вам нужно совсем немного. Иметь при себе программу CSS Menu Generator, которую Вы сможете совершенно бесплатно скачать в интернете. В настоящее время данное действие, а именно создание меню для сайта является главным звеном всех сайтов.

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

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

Не знаю почему, но почему-то данный способ мне не нравиться. Мне по душе пришелся другой способ создания меню для сайта и именно этим способом я научу Вас создавать меню для сайта. Я буду рассматривать создания меню с помощью одной, но на мой взгляд самой подходящей для новичков программы CSS Menu Generator. В данной программе есть все необходимое для того, чтобы создать довольно приличное меню которое возможно в чем-то не будет уступать профессиональным меню.

Эта программа не имеет множество различных инструментов, которые по сути вообще не нужны, а наоборот имеет лишь те инструменты, которые нужны для создания меню. Интерфейс программы CSS Menu Generator довольно прост и понятен даже новичкам. Поэтому я и выбрала данную программу. Недостаток данной программы в том, что она на английском языке, но интерфейс ее до того простой, что на этот недостаток не обращаешь внимание.

Все меню которые созданы с помощью данной программы легко индексируются поисковыми системами и просты в управлении. Вы наверно устали от моей вступительной речи и готовы приступать уже к уроку который даст Вам возможность сделать меню для сайта своими руками? Первым делом, как я уже говорила-это иметь при себе программу CSS Menu Generator. Если данная программа у Вас уже есть, то замечательно. Далее запускаем программу и находим четыре строчки текста.

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

Внизу данного окна Вам будет показан начальный образец меню, который мы и будем изменять. Если Вы сейчас наведете на одну из ссылок в этом меню, например «Products» то увидите, что происходит выпадение еще дополнительных пунктов меню в данной ссылке. Это слишком много для начала, так как мы создадим обычное меню без выпадения  дополнительных пунктов, но усложнять вы можете самостоятельно.

Перейдем во вкладку «Menus» и щелкнем по Main Menu. У Вас появится еще одно окно. В этом окне в среднем квадратике находятся все ссылки меню, в том числе и выпадающие. Ваша задача, оставить те три ссылки, которые мы видите чуть раньше, без выпадающих пунктов, а именно «Home», «Products», «Services». Оставьте данный текст меню на английском языке. Вы сможете его поменять на русский и добавить потом  в программе Dreamweaver, так как программа CSS Menu Generator не распознает русский язык.

Для этого по очереди, нажимая мышкой, для выделения на каждый не нужный пункт меню, удаляем его кнопочкой delete правее окна меню. После нажатия на кнопку удаления в появившемся окошке нужно подтвердить данное действие. Данные действия повторяйте до тех пор, пока не будут удалены все лишние пункты меню. После этого переходим во вкладку . В этом окошке мы будем теперь делать оформление меню для сайта. Мы будем работать с табличками двух видов.

В первой мы будем выбирать пункты, отвечающие за определенные действия с данным меню, а во второй мы будем задавать цвет данным действиям. Здесь я не буду расписывать, так как Вы сами разберетесь. После того как Вы выставите на Ваше усмотрение цветовые настройки переходим во вкладку «Fonts».

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

После того как Вы сделаете все необходимые текстовые настройки переходим во вкладку с номером 3) Get the Files.У вас появятся еще вкладки, где Вам нужно перейти в последнюю вкладку с «HTML/CSS Code».После этого Вы увидите еще три вкладки, из которых Вам понадобятся лишь первые две. Переходим в первую вкладку и видим там код, который нужно вставить себе на сайт. Но в данном коде есть лишний код, который мы сейчас удалим. Для этого копируем весь код, в этом окне нажав на кнопку Copy.

После чего, сверните программу (Важное замечание: не закрывайте программу CSS Menu Generator до того момента, пока не скопируете последний код в данной программе) и откройте обычный блокнот на компьютере и вставьте данный код. Теперь найдите в этом коде тег DIV и скопируйте его со всем, что находится внутри данного тега. В данном коде, пожалуйста, удалите лишний код, выделенный красным цветом, так как он нам не нужен.

<div class=»main menu»>

<ul>

<li class=»li_nc»><a href=»/» target=»_self» >Home</a></li>
<li class=»li_nc»><a href=»#» target=»_self» >Products</a></li>
<li class=»li_nc»><a href=»#» target=»_self» >Services</a></li>
</ul>
</div>
Затем переходим в программу Dreamweaver и во вкладке «Код», вставляем данный скопированный код, в то место где Вы хотите видеть горизонтальное меню. Обычно меню для сайта вставляют ниже логотипа.

Теперь возвращаемся в программу CSS Menu Generator и переключаемся в следующую вкладку «CSS Code» . Здесь так же копируйте весь код и вставляете в блокнот. Здесь выделяем и копируем весь код начиная со слова с точкой .mainmenu { и заканчивая последним значком } в данном коде.

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

Для того, чтобы проверить Ваше созданное меню для сайта нажмите в Dreamweaver F12 на клавиатуре либо найдите на компьютере Ваш файл index.html и откройте его в браузере. После открытия данного файла Вы увидите Ваше готовое меню для сайта.

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

Данный рассказ закончен и я надеюсь, что он не прошел для Вас даром, и Вы знаете теперь, как сделать меню для сайта самостоятельно.

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

А я прощаюсь с Вами! До новых встреч! Надеюсь, что этот урок был Вам полезен.

Желающие узнать все тонкости и подробности создания сайта и инфобизнеса могут скачать пошаговое руководство

Аккаунт в Vkontakte

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Next Post

Урок 2

Ссылки с главной страницы Создаем переходы с главной Очередным уроком по созданию сайта я хочу Вас научить, как создать ссылки с главной страницы на страницы сайта. Тем самым увеличивать объём Вашего сайта новыми страницами, которые будут связаны между собой ссылками. Как не крути, но полноценный и привлекательный сайт для поисковых […]

Subscribe US Now