Як створити сайт-візитку з програмою Adobe Dreamweaver, додаємо портфоліо та фавікон, ZURA-BLOG
Це означає, що якщо ви займаєтеся розробкою сайтів, то цілком можете зробити зміни, використовувати шаблон для портфоліо, теж на шаблоні можна вставити скріншоти ваших проектів, з посиланням на ресурси.
Якщо у вас вже створено проект у програмі Adobe Dreamweaver, у такому разі ви можете внести відкрити проект на сторінці-вітання програми, проект буде розміщений першим на вкладці. Клацаємо на «Астрал» та працюємо.
⇑можна відкрити проект по сторінці привітання
Трохи нижче місця панелі інструментів, програмою зазначені папки та файли шаблону, дуже зручно, можна вносити зміни, відкривши кілька файлів відразу.
при необхідності ми легко відкриємо файл. У цьому проекті всі сторінки розміщені на головній, окремо HTML - файлів створених персонально для сторінок у шаблоні відсутні, код кожної сторінки прописаний на одній сторінці index.html.
Підводимо курсор мишки, у верхній половині панелі програми Значок "Папка", там у нас відображається вид нашого проекту, а в нижній коди проекту, виділяємо значок у верхній половині, а в нижній програма відразу виділить блок до якого належить даний елемент, давайте дамо назву значок, змінивши значення в рядку коду.
⇑змінюємо назву сторінки work
Про мене (я давши назву сторінці «Про мене» ви даєте свою назву).
Також міняєте назви для інших сторінок, а які будуть потрібні, тоді просто видаляєте рядок у блоці.
Далі у нас після слова "Work" розташований англійський текст,виділяємо цей текст, і в нижній половинці програми буде виділено область де знаходяться ці значення в коді, знайшли і тепер мінятимемо англійський текст на свій.
Phasellus enim Sapien, єс Elementum blandit ullamcorper, condimentum єс Еліт. Переддень анте Ipsum primis у faucibus Орсі luctus ін ultrices Дізнання Eget luctus Еліт Eget interdum.
Продовжуємо, видаляємо виділені англійські значення, їх ми збираємося поміняти, змінюємо на наш текст, далі в панелі інструментів клацаємо комбінацію «Перегляд» → «Перевірити» і після оновлення у верхній половині з'явиться результат, до речі вийшов дуже красиво підібраний сам шрифт тексту.
Продовжуємо далі, прокручуємо коліщатком миші вниз у верхній половині, і підводимо до зображення курсор миші, клацаємо, і в нижній половині нам програма покаже рядок і код, де знаходиться елемент, це посилання від картинки.
⇑програма покаже рядок та код де знаходиться елемент
- Посилання, виділене червоним, міняємо на своє.
Відкриваємо папку сайту, далі папку "images" а в папці шукаємо зображення з №1, зверніть увагу, в коді показано розташування елемента ("images/1.jpg") - папка "images" а графічний файл у папці "1.jpg" змінюємо зображення на своєму.
Проводимо всі вищеописані дії, перевіряємо і результат з'явився все «Ок».
⇑результат з'явився все «Ок».
На сторінці п'ятнадцять картинок, якщо вам не потрібно стільки, видаліть не потрібні, а в програмі бажано видалити блок коду, на які посилалися картинки. Якщо вам потрібно більше, то в такому випадку скопіюйте блок, і вставте в кінці всіх блоків, потім зміни значення.
Поміняти потрібно буде назву картинки, оскільки ми вже маємо картинку з назвою «1.jpg» тоді додамо «1а.jpg»замість «1.jpg» вийде «images/1а.jpg» замість «images/1.jpg»
і звичайно змінюємо посилання
Наступний елемент, який здалося б розмістити не тільки на сайті-візитці, а й на будь-якому іншому ресурсі, це фавікон. Фавікон це маленька іконка, яка відображається у вкладці браузера, перед назвою сторінки.
По-друге, для вашого ресурсу буде набагато корисніше, коли користувач шукаючи в пошуковій системі потрібну інформацію на першій сторінці пошуковика він за рахунок вашого фавікона відразу побачить іконку, яка вказуватиме цей матеріал відноситься до вашого блогу.
Якщо фавікон відсутня, тоді існує ймовірність що вашу публікацію обійде, хоча й публікація з вашого сайту може бути розміщена на першій сторінці, але з'явиться скажімо на в перших рядках а десь посередині, або в останніх рядках, як зазвичай відвідувачі на сторінці пошуковика заходять на першу публікацію, можливо на другу, а вашу просто проігнорують.
Якщо фавікон буде присутній, тоді він відразу впаде в очі відвідувачеві, і то зазвичай по фавікон дізнається ваш ресурс, перейде саме на вашу публікацію, і не буде звертати увагу на інших.
Сам фавікон може надати професіоналізму ресурсу, дуже добре, якщо вдасться створити банер, логотип, фавікон, під один мотив, щоб були схожі один на одного.
Для таких завдань існують спеціальні програми, але мова про такі програми буде в наступних публікаціях, а на питання де взяти фавікон, існує багато онлайн ресурсів інструментів, які дають можливість створити самому фавікон.
Я пробував створити ці елементи на таких ресурсах, і скажу незадоволений, по-перше на рахунок фавікона хотів зробити маленьку іконку свого фото, а невиходило, точніше інструментом з онлайн ресурсу створив фавікон, але якість була ніяка, пробував створити банер на іншому ресурсі, банер вдалося створити, але на банері були ініціали їх ресурсу, мене теж такий варіант не задовольняє.
І вам пораджу не паритися з різними цими онлайн-майстернями, а знайти спеціальну прогу, яка впорається з таким завданням.
Де взяти фавікон? Для звичайного, стандартного виду фавікона і програми не потрібно, ввести фразу в пошуковій системі, ресурсів на яких розміщені іконки, і які нададуть можливість завантажити Безкоштовно безліч, потрібно тільки вибрати тематику, і в архіві ви отримаєте більше ста іконок. А там одна серед ста вам обов'язково сподобається.
Ядо встановлення фавікон на сайт-візитку.
Потрібен графічний файл, формат файлу ico. або gif. Назва файлу рекомендую дати на латинську favicon.ico, краще таку назву ідентифікувати в кодах, коли доведеться вносити зміни в кодах, то за назвою favicon ви відразу побачити до цього лінка належить саме фавікон, а не якийсь інший елемент.
розмістити у кореневу папку вашого сайту
Прописати потрібно в області «head», я прописав у даному шаблоні після мета тегів перед тегом, що закриває . Після всіх наведених дій у вас з'явиться у вкладці фавікон. Якщо не з'явиться тоді зверніть увагу на розширення фавікона, або розширення таке ж, як прописано в засланні, та й розміри повинні бути не більше 32х32, для мобільної версії 16х16.
⇑Прописати потрібно в області «head»
Якщо розміри великі, то фавікон не буде відображатися на сторінці, але якщо ви завантажуєте фавікона в архіві з ресурсу, то там навряд чи будуть неправильні розміри, і тільки коли ви будите фавікон.створювати самостійно, з якою програмою в такому разі можлива помилка.
І то якщо програма буде широко функціональна, наприклад фотошоп, та й то якщо ви чайник то через відсутність досвіду можете не виставити розмір, і файл з якого ви пробували створити фавікон зберегли за великим розміром, але якщо програма буде призначена тільки для створення фавікона, то навряд там будуть розміри, які б перевищувати 32х32.
Як завжди в таких програмах все автоматично налаштовано, тому що вони призначені тільки для якогось одного завдання.
А далі міняємо наприклад
на своє власне Ruszura
і бажано додати атрибут target = "_ blank" щоб відкривався в новій вкладці.
На цьому закінчуватиму публікацію, планую додати до сайту-візитки аудіоелемент, для того щоб коли сторінка відкривається у браузері починалася програватись мелодія, і аудіоелемент має бути прихованим, але матеріали будуть у наступних публікаціях.
На цьому все до зустрічі.
Публікації присвячені створенню сайту-візитки у програмі Adobe Dreamweaver.
- Як створити сайт-візитку з програмою Adobe Dreamweaver
- Як створити сайт-візитку з програмою Adobe Dreamweaver додаємо приховані аудіоелементи та змінюємо фон