Поточний час:
Сьогодні 18 червня, понеділок 2018 рік
Zura-Blog 3 роки 5 місяців 30 днів

Ваш ip адрес:54.198.86.28

Доброго дня!
Ви обновили сторінку в 14 : 28
Статистика

Кількість публікацій на блозі: 375
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 27
Кількість міток на блозі: 3

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

Post_103Привет всем посетителям Zura-Blog продолжаю совершенствовать сайт-визитку с шаблоном “Астрал” взятым для проекта, используя программу Adobe Dreamweaver

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

Но все равно всегда присуствует желание чего-то большего, например  собственные фото и т.д. Шаблон “Астрал” предоставляет такую ​​возможность, кроме того, на второй странице автор шаблона сделал ссылку для своих картинок.

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

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

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

Так удобнее просматривать сделанные изменения, при этом необходимо сначала в веб-редакторе Adobe Dreamweaver сохранять изменения путем “Файл” → “Сохранить”, а в браузере обновлять страницу. Можно просматривать изменения и направления в самой программе, не используя браузер, мне удобнее первым спосбом.

Если у вас уже создан проект в программе Adobe Dreamweaver, в таком случае вы можете внести открыть проект по страницы-приветствия программы, проект будет размещен первым на вкладке. Щелкаем на “Астрал” и работаем.

fast1

⇑можна открыть проект по страницы приветствия

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

3332

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

Подводим курсор мышки, в верхней половине панели программы Значок «Папка», там у нас отображается вид нашего проекта, а в нижней коды проекта, выделяем значок в верхней половине, а в нижней программа сразу выделит блок к которому принадлежит данный элемент, давайте дадим название иконке, поменяв значение в строке кода.

fast2

⇑поминяемо название страницы work

<a href=”#work” class=”icon icon-folder”> <SPAN> Про мене </ SPAN> </a> – (я дав назву сторінці “Про мене” ви даєте свою назву).

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

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

<H2> работает </ h2> </ заголовок> <p> Phasellus enim Sapien, ес Elementum blandit ullamcorper, condimentum ес Элит. Преддверия анте Ipsum primis в faucibus Орси luctus др ultrices Дознание Eget luctus Элит Eget interdum. </ P>

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

fast3

⇑красивий шрифт

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

fast4

⇑програма покажет строку и код где находится элемент

<a href=” http://flypixel.com/knob/3495684098026313 “class=”image image-full”> <IMG SRC =” Images / 1.jpg “Alt =” “> </a> – посилання, виділене червоним, міняємо на своє.  

Открываем папку сайта, далее папку “images” а в папке ищем изображение с №1, обратите внимание, в коде показано расположение элемента ( ” images / 1.jpg “) – папка “images” а графический файл в папке “1.jpg”  меняем изображение на своем.

Если нас устраивают размеры картинки автора, тогда открываем графический редактор и в нем размер нашего фото меняем на размер фото автора, высоту и ширину. И не забываем что расширение графического файла должно быть .jpg

И также лучше добавить к ссылке атрибут  target = “_ blank” чтобы ссылка открылась с новой страницы.

<a target=”_blank” href=”http://ruszura.in.ua/sample-page.html” class=”image image-full”> <IMG SRC = ” Images / 1.jpg ” Alt = “” > </a>

Проводим все вышеописанные действия, проверяем, и результат появился все «Ок».

fast5

⇑результат появился все «Ок».

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

Блок кода.

<DIV класс = “4U”> <a href=”http://ruszura.in.ua/sample-page.html”target=”_blank” class=”image image-full”> <IMG SRC = “изображения / 1.jpg “альт =” “> </a> </ DIV>

Поменять нужно будет название картинки, поскольку у нас уже есть картинка с названием “1.jpg” тогда добавим “1а.jpg” вместо “1.jpg” получится “images / .jpg” вместо “images / 1 .jpg”

и конечно меняем ссылки

 ruszura.in.ua/sample-page.html

на другое 

ruszura.in.ua/neobhidno-znaty/perenosymo-sajt-z-hostynhu-do-sebe-na-kompyuter-z-prohramoyu-denver.html

проверим, у меня снизу появилась вторая картинка значит все готово, в папке “images” нужно вставить еще одну картинку, дать название картинке, картинка должна соответствовать названию указанной в коде, таким образом можно разместить даже сто картинок со ссылками

FAST6

⇑можна разместить даже сто картинок со ссылками

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

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

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

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

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

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

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

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

И вам посоветую не париться с различными этими онлайн-мастерскими, а найти специальную прогу которая справится с такой задачей.  

Где взять фавикон? Для обычного, стандартного вида фавикона и программы то не нужно, ввести фразу в поисковике, ресурсов на которых размещены иконки, и которые предоставят возможность скачать Бесплатно множество, нужно только выбрать тематику, и в архиве вы получите более ста иконок. А там одна среди ста вам обязательно приглянется.

Я к установить фавикон на сайт-визитку.

Нужен графический файл, формат файла ico. или gif. название файла рекомендую дать на латинский “favicon.ico”, лучше такое название идентифицировать в кодах, когда придется вносить изменения в кодах, то по названию “favicon” вы сразу увидеть до этого линка принадлежит именно фавикон, а не какой-то другой элемент.

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

<Ссылка отн = “ярлык” HREF = “favicon.ico”>

fast8

разместить в корневую папку вашего сайта

Прописать нужно в области “head”, я прописал в данном шаблоне после мета тегов перед закрывающим тегом </ head>. После всех перечисленных действий в вас появится в вкладке фавикон. Если не появится тогда обратите внимание на расширение фавикона, или расширение такое же как прописано в ссылке, ну и размеры должны быть не более 32х32, для мобильной версии 16х16.

fast7

⇑Прописаты нужно в области “head”

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

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

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

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

Найти где находится ссылка на твиттер в программе Adobe Dreamweaver проще простого, в верхней половине щелкнули на иконку, а в нижней перебросит вас на абзац где находится код ссылки. В notepad ++ строка кода под №44.

А дальше меняем например 

<a href=”http://twitter.com/n33co” class=”icon icon-twitter”> <SPAN> Twitter </ SPAN> </a>

на свое собственное Ruszura

<a href=”https://twitter.com/Ruszura”target=”_blank” class=”icon icon-twitter”> <SPAN> Twitter </ SPAN> </a>

и желательно добавить атрибут  target = “_ blank” чтобы видкривалсь в новой вкладке.

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

На этом все до встречи.  


user_97

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

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

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