Post_100Привет всем посетителям Zura-Blog сегодняшняя публикация будет касаться сайта-визитки, в предыдущих публикациях было написано как создавать сайт-визитку с программой Incomedia WebSite X5, тематика сегодняшней публикации также посвящена сайтам-визитки, но уже с Adobe Dreamweaver.

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

Adobe Dreamweaver это HTML-редактор или веб-редактор, для того чтобы работать с этой программой понятие хотя-бы в языке HTML нужно иметь.

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

Давайте начну все по порядку как создать сайт-визитку в HTML-редакторе Adobe Dreamweaver, кто читал мои статью «Как создается сайт на HTML» там сказано, что сайт состоит не из одного файла а из нескольких файлов и папок, хотя и с одной может быть , правда это уже скорее будет HTML-страница.

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

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

Не сложно, но требуется опыт работы с языками HTML, РНР и т.д. У кого опыта нечего тогда делать, я постараюсь как легче описать в этой статье как создать сайт-визитку. За основу я взял шаблон под названием «Аstral», кстати по данному шаблону я нашел в сети уже много созданных сайтов-визиток другими мастерами, поэтому этот шаблон вполне подходит для такого типа сайта.

Простенький, ничего лишнего, мне он тоже нравится, я бы уже разместил в сеть свой сайт-визитку с взятым за основу этим шаблон, но пока жалко тратить средства на доменное имя. Сейчас работаю над еще одним проектом, он почти готов, созданный программой для создания сайтов, Incomedia WebSite X5.

Пока так и не опридилився из этих двух проектов лучше, хотя мне больше понравился сайт — визитка создан с WebSite X5. В отличие от Incomedia WebSite X5, где нужно прикладывать усилия чтобы создать красивый дизайн, в HTML-редакторе Adobe Dreamweaver то мудрить в дизайне не нужно, дизайн уже готов, нужно всего навсего поменять некоторые данные, данные, конечно те которые касаются автора шаблона » Аstral «на свои.

Приступаем к основному вопросу этой статьи.

Итак скачиваем шаблон «Аstral», распаковываем архив, открываем папку «Аstral», и изучаем файлы и папки внутри папки «Аstral». Внутри у нас находятся три папки «css» «images» «js» и файл index.html.

astral1

⇑видкриты в браузере файл index.html

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

astral2

⇑визначитись что мы бы хотели поменять

А для обработки фото нам нужен будет хороший графический редактор, но начнем делать изменения не из графического редактора, а с html-редактора с инициалов автора «Jane Doe» для этого запускаем Adobe Dreamweaver или можите пользоваться и бесплатным Notepad ++ также очень хороший редактор.

Запустили Dreamweaver, сверху находится панель инструментов, щелкаем в инструментах раздел «Файл», далее «Открыть», ищем у себя на компьютере разархивированные папку «Аstral» и в ней нужный файл index.html. Подводим курсор мышки к файлу index.html, выделяют и щелкаем кнопку «Открыть».  

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

1astr

⇑зверху панель инструментов

Достаточно удобно пользоваться программой Adobe Dreamweaver вы собираетесь модифицировать шаблон, я считаю для таких задач программа подходит супер, лучшей я пока не нашел. Дальше ничего мудрить не нужно, а просто выделить курсором мышки в верхней панели где у нас показан вид сайта текст «Jane Doe», после чего мы сразу увидим в нижней панели, где у нас находятся строку с кодом в котором текст «Jane Doe».

astral3

⇑миняемо текст «Jane Doe»

⇓на например «Иван Попадайло»

astral4

Аккуратно удаляем текст «Jane Doe», в том месте из которого мы удалили инициалы «Jane Doe», прописываем свои инициалы, например «Иван Попадайло».

Далее ниже вместо текста «Senior Astral Projectionist» выставим какой-то свой текст, например «Больше дела меньше слов» или «Персональная страница», и не обращайте внимания, если вы в программе будет криво отображаться текст, в браузере он будет отображаться правильно, смотреть так же как и текст который был до удаления в шаблоне, несмотря на разницу в количестве символов.

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

Чуть ниже находится ссылка на фото автора <img src = «images / me.jpg» alt = «» /> конечно нужно поменять, но не само ссылки, а только фото автора на свое. Для этого открываем папку «images» а в папке ищем фотку автора, называется «me».

astral5

открываем папку «images» а в папке ищем фотку автора, называется me

Указано в ссылке <img src = «images / me.jpg» alt = «» /> где «images / me.jpg» (images-папка, me.jpg- графический файл). В коде ничего не нужно менять, поменять нужно фото, но название вашего фото дать «me» с расширением «jpg» а не другой формат, и другое название, потому что другим данным фото не будет отображаться.

Поэтому приступаем теперь к программе предназначенной для графических изображений, я использую ACD, перед запуском программы определим параметры графического файла, нам нужно будет знать размеры файла, ширину и высоту, следовательно ширина 306 пикселей, высота 394 пикселей, именно такие размеры мы должны выставить в нашей фотографии.

Сделать размер фото другой можно с помощью графического редактора например ACD See.

astral6

⇑ширина 306 пикселей, высота 394 пикселей

В случае с другими размерами, фото отображается но не корректно, так приступаем к изменению фото, я делаю эту операцию с проигрывают ACD See. Кстати в ближайшее время напишу пост о данной программе, редактуемо графический файл выставив нужные размеры, и указав название файла и расширение «me.jpg».

В папке «images» меняем фото «даму» на наше фото, перезапустить браузер и видим результат вместо фото «дамы» наше.

astral7

⇑миняемо фото «даму» на наше фото

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

astral8

⇑робимо изменения в подвале

<Ул класс = «ссылки»> <li> & копия; Jane Doe </ li> <li> Изображения: <a href=»http://fotogrph.com/»> fotogrph </a> </ li> <li> Дизайн: <A HREF = «HTTP: // html5up .net / «> HTML5 Up! </a> </ li> </ UL>

 

Можите удалить полностью целый блок, тогда в подвале ничего не будет отображаться, можите оставить <li> & copy; Jane Doe </ li>, в таком случае поменяем текст «Jane Doe» на текст «Иван Попадайло» а удалим только ссылки, тогда у нас будут отображаться только наши инициалы. @ Иван Попадайло.

<Li> Изображения: <a href=»http://fotogrph.com/»> fotogrph </a> </ li> <li> Дизайн: <a href=»http://html5up.net/»> HTML5 Up! </a> </ li>

или поменяем ссылки на свои например вместо «Images» я вставлю слово «автор» «вместо имени» fotogrph.com «я пропишу свое» ruszura.in.ua «вместо» fotogrph «я назову своего блога» Zura-Blog ». Что с последующим строкой делать, или удалить или прописать ссылки например на вашу страницу в социальной сети. 

Design можем оставить, html5up.net меняем на адрес вашей страницы в соц сети, а текст «HTML5 Up!» поменяем например «Я в гугл +». Если вы зарегистрированы в социальной сети, тогда у вас должно быть собственное ссылку на вашу страницу с вашим ID (идентификатор)

Перезапустить браузер но перед запуском не забываем сохранять изменения в программе Adobe Dreamweaver, «Файл» → «Сохранить» и результат первая страница готова.

Что еще можно сделать для первой сторнкы, давайте добавим флэш анимацию   «Часы»   созданную с помощью еще одной программы от Adobe, Adobe Flash Professional программа о которой я написал статью «Flash анимаций, скрипты flash редактор Adobe Flash Professional»  .

Для того чтобы разместить анимацию чтобы показывала время, нужно иметь в наличии файл с анимацией, такой файл вы можите себе создать сами, просмотрев публикацию «Flash анимаций, скрипты flash редактор Adobe Flash Professional» или скачать (ссылка на файл появится на странице позже).

Файл с расширением «SWF» нужно разместить в корневой папке сайта, а в файле index.html нужно прописать скрипт.

<Объект данных «clock5.swf» типа «применение / х-shokwave-вспышка» ширина = «130» heiht «55» выровняйте = «низ»> <парам имя = «фильм» Value = «ceas.swf» /> < парам имя = «WMode» значение «Прозрачный» /> <вставлять SRC = «ceas.swf» ширина = «130» высота = «55» ALIGN = «снизу» WMode = «Прозрачный»> </ врезать> </ объект>

 

Где можно прописать скрипт, в принципе я прописал в <header> после строки кода <span class = «byline»> Персональная страница </ span> перед </ header>. Выше инициалов «Иван Попадайло» теперь отображаются часы, минуты и секунды.

astral9

⇑скрипт прописан, выше инициалов теперь отображается дата

Все первая страница готова, правда при наведении на иконку вместо слова «Главная» отображается слово «me», не порядок будем менять, так же подводим курсор мыши к иконке, выделяем чтобы увидеть где находится «me» в коде, и меняем слово «me «на наше слово например» Главная «а» Work «на» Обо мне «» Email Me «удалим» Me «» Twitter «можите оставить.

astral10

⇑перша страница готова «Ок»

На этом буду закругляться, в наступниий публикации рассмотрю остальных страницы, в принципе их можно удалить, первой страницы также достаточно для сайта-визитки, если в вас нет возможности работать с программой Adobe Dreamweaver в связи с ее отсутствием, вы можит модифицировать шаблон с бесплатным Notepad ++.

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

Кстати приношу извинения чуть не забыл, я не указал откуда у меня «Астрал», ссылка на «Астрал» http://html5up.net. На странице присутствует несколько шаблонов, кстати «Астрал» адаптирован и к планшетам и к смартфонам. Можно посмотреть live Demo на странице сайта как выглядит шаблон. 

До встречи.


user_97

Публикации посвящены созданию сайта-визитки в программе Adobe Dreamweaver .