Підручник з Dreamweaver


Підручник з Dreamweaver створення веб-сайтуЯк відомо, на цьому веб-сайті йдеться про те, як зробити веб-сайт. Ви можете дізнатися різні способи, використовуючи WordPress, Joomla або Drupal. У нас навіть є посібник із використання чистого HTML, як колись (очевидно, з HTML5, остання версія). У цьому підручнику Dreamweaver для початківців ви дізнаєтесь ще один.


Для тих, хто не знає, Dreamweaver – це програма, яка дозволяє створювати, кодувати та керувати веб-сайтами. Що цікаво про Dreamweaver, це те, що він пропонує як можливість писати код, так і робити веб-сайт за допомогою візуального інтерфейсу.

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

Це буде довга їзда. Однак ви будете вражені тим, як швидко ви потрапите в цю дуже інтуїтивну програму.

Contents

Що таке Dreamweaver і що це може зробити??

На поверхні Dreamweaver – це IDE (інтегроване середовище розробки). Це означає, що це програмне забезпечення, яке поєднує різні інструменти для спрощення веб-дизайну та розробки.

Особливістю цього є те, що він знаходиться десь між CMS (де ви керуєте всім своїм веб-сайтом через візуальний інтерфейс) та чистим редактором коду. Ось як працюють різні частини.

Створюйте веб-сайти за допомогою інтерфейсу візуального дизайну

Панель інструментів візуального дизайну в основному дозволяє створювати веб-сайти за допомогою миші. Це дозволяє розміщувати елементи веб-сайту так, як ви створюєте макет у Word. В основному, ви бачите свій веб-сайт таким, як ви бачили в браузері, але також маєте можливість маніпулювати ним.

Це дуже корисно, оскільки дозволяє створити скелет веб-сайту швидко та без необхідності писати єдиний рядок коду. Натомість Dreamweaver автоматично створить необхідний для вас код. Таким чином, теоретично ви можете скласти цілий веб-сайт вручну та завантажити його на свій сервер.

З іншого боку, якщо ви здатні кодувати, Dreamweaver також має всі необхідні інструменти для цього.

Працює повноцінним редактором коду

Друга частина Dreamweaver – це повнофункціональний редактор коду. Він оснащений усіма стандартними функціями, включаючи:

  • Підсвічування синтаксису – Це означає, що Dreamweaver виділяє різні елементи (наприклад, оператори, змінні тощо) різними кольорами, щоб полегшити читання та виправлення коду.
  • Завершення коду – Поповнення коду працює аналогічно, як автозаповнення вашого телефону. Почніть вводити текст, і редактор зробить пропозиції щодо того, що ви намагаєтесь написати. Таким чином, вам не потрібно все друкувати повністю.
  • Код руйнується – Збір коду – ще одна особливість для полегшення читання коду. Це дозволяє візуально скоротити частини коду, коли вони вам не потрібні. Таким чином, вам не потрібно прокручувати весь файл, але ви можете мати справу лише з частинами, над якими вам потрібно працювати.

Dreamweaver підтримує найважливіші мови для веб-дизайну (HTML5, CSS, JavaScript, PHP) та багато іншого.

Найкраща частина: якщо ви зміните що-небудь у своєму коді, Dreamweaver автоматично відобразить його і з візуальної сторони. Таким чином, ви можете бачити це без необхідності завантажувати свої файли на сервер або запускати браузер.

Є набагато більше функцій, і ви побачите багато з них у дії в майбутньому навчальному посібнику Dreamweaver для початківців.

Процес настройки та створення веб-сайтів Dreamweaver (крок за кроком)

В якості першого кроку вам потрібно придбати Dreamweaver з офіційного веб-сайту Adobe.

Ви можете отримати безкоштовну пробну версію тут або від свого клієнта Creative Cloud.

навчальний посібник

Крок 1. Завантажте та встановіть

Коли ви отримаєте програму з офіційного веб-сайту, просто завантажте інсталяційний файл, виконайте його та дотримуйтесь інструкцій.

Якщо ви вже використовуєте Creative Cloud (як і ми), ви можете просто натиснути Спробуйте всередині клієнта. Потім, коли програма закінчена, натисніть кнопку Почніть пробну версію.

Крок 2. Перший запуск

Коли ви вперше запустите Dreamweaver, ви побачите цей екран.

Перший запуск dreamweaver

Якщо ви ніколи раніше не використовували програму, виберіть Ні, я новачок. Коли ви це робите, Dreamweaver веде вас за допомогою майстра налаштування. Перший крок – це вибір робочого простору для розробників або стандартного робочого простору.

Dreamweaver на бортовому посібнику вибирайте робочу область

Оскільки це підручник для початківців Dreamweaver, виберіть стандартну версію. Після цього ви можете вибрати тему кольору для робочої області з чотирьох різних варіантів.

Інструкція з перегляду сну на борту сну вибирає кольорову гаму

Останнім кроком є ​​вибір того, чи слід починати із зразкового файлу, нового чи існуючого проекту чи переглянути підручник.

Останній крок керівника на борту борту снів

Виберіть для початку нову або існуючу папку, і ви закінчите процес налаштування. Хороша робота!

Тепер почнемо проект та дізнаємось, як створити веб-сайт за допомогою Dreamweaver.

Крок 3. Створіть новий сайт

Перший крок – створення нового сайту. Для цього йдіть до Сайт> Новий сайт. Він перейде до цього екрану:

створити новий веб-сайт у Dreamweaver

Перший крок – дати ім’я своєму сайту. Потім потрібно вибрати, де його зберегти. Це залежить від вас, але зазвичай має сенс тримати всі проекти на одному місці для простоти.

Ви також маєте можливість асоціювати ваш новий проект із сховищем Git. Це може бути хорошою ідеєю, оскільки вона дає вам контроль версій але ви можете пропустити це зараз.

Ми розберемося з усім під Сервери з лівого боку пізніше. Те саме з Препроцесори CSS, що важливо лише при використанні така річ.

Для нас важливо Місцева інформація під Розширені налаштування.

включити папку зображень за замовчуванням у режимі мрій

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

Це все, натисніть Зберегти щоб повернутися до робочої області.

Крок 4. Створіть файл домашньої сторінки

Тепер, коли ви створили сайт проекту, настав час для першого файлу. Почнемо з домашньої сторінки.

Якщо Dreamweaver не пропонує вам сам варіант, перейдіть на сторінку Файл> Нові. Можна або створити абсолютно новий файл, або використовувати вже наявний шаблон. Програма постачається з кількома з них (див Шаблони для початківців). Зараз ми створимо новий замість цього.

створити новий файл у dreamweaver

HTML встановлений за замовчуванням, і ви можете залишити його таким, яким він є. Для заголовка документа, введення index.html і вибрати Створіть. Це відкриє вас на наступному екрані.

свіжий проект у мрій

Це капелюх, про який ми згадували на початку: прямий огляд того, як виглядає ваш сайт (порожній на даний момент) та код за ним. Ви також помітите, що Dreamweaver автоматично створив деякі основні розмітки HTML, на яких ви можете побудувати. Зробимо це зараз, чи ми?

Крок 5. Створіть заголовок

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

Після цього вам потрібно перейти до Вставити в верхньому правому куті. Це дає вам список загальних HTML та елементів сайту, які ви можете додати на свою сторінку. Прокрутіть вниз, поки не побачите Заголовок як варіант.

вставити елемент заголовка в сонник

Простий клацання вставляє його на сторінку. Ви також бачите, що він відображається всередині документа HTML.

заголовок видно у візуальному інтерфейсі та редакторі коду

Просто, правильно?

Тепер ви зміните текст всередині заголовка, а також перетворите його на заголовок. Для обох – спочатку позначте текст у редакторі коду внизу.

позначити текст заголовка в мрійнику

Після цього поверніться до Вставити, натисніть на стрілку біля Заголовок і вибирайте Н1. Це загортає назву сторінки в тег HTML H1. Для отримання додаткової інформації про теги заголовків читайте Ця стаття.

Після цього ви також можете ввести заголовок для своєї сторінки. На вашому реальному веб-сайті ви вибрали б щось описове з ключовими словами, а не лише Ласкаво просимо на мій тестовий веб-сайт як у прикладі.

змінено заголовок у сні

Добре, щойно ви створили заголовок сторінки! На даний момент це все ще виглядає трохи неохайно, тож давайте змінимо це через CSS далі.

Крок 6. Створіть файл CSS

Якщо ви не знайомі з цим, CSS – це та частина, яка забезпечує всі стилі на веб-сторінці. Це дозволяє визначати кольори, розміри елементів, типи та розміри шрифту і пекло набагато більше. Ми хочемо використовувати розмітку для розширення заголовка нашої сторінки, а також дізнаємось, як змінити CSS у Dreamweaver.

Теоретично ви можете додати CSS прямо у документ HTML. Є набагато менш елегантний варіант того, що ми зробимо, а це створення виділеного файлу для всіх стилів CSS всього сайту.

Перший крок – надати вашому новому заголовку клас CSS або id. Під час цього процесу Dreamweaver також запропонує вам створити файл аркуша стилів. Перейдіть до меню DOM у нижній правій частині екрана, де відображається вся ваша структура сайту. Переконайтеся, що вибрано ваш заголовок.

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

додати файл css у dreamweaver

Клацніть знак плюс і введіть #header у полі, яке відкриється. Хештег означає, що ви призначаєте id на відміну від класу. Натисніть Enter. У меню відкриття замість Визначте на сторінці виберіть Створіть новий CSS-файл. У спливаючому вікні виберіть Огляд і перейдіть до папки вашого сайту. Потім введіть style.css (що є стандартною назвою для таблиць стилів) в Назва файлу поле і удар Зберегти.

створити аркуш стилів у мрій

Коли ви виберете Добре, новий файл з’явиться у верхній частині вашого перегляду в прямому ефірі. Ви можете його переглядати та редагувати звідти. Він також буде пов’язаний з розділ HTML частини вашої сторінки.

таблиця стилів додана на веб-сайт

Дивовижний апосум! Тепер ви готові змінити стиль сторінки.

Крок 7. Створіть CSS Selector для заголовку сторінки

Перше, що ви хочете зробити, – це змінити шрифт заголовка, а також відцентрувати його. Для цього спочатку потрібно створити новий селектор CSS. Селектор – це ім’я елемента на нашій сторінці, якому ви можете призначити властивості, наприклад, колір, розмір тощо.

Позначте заголовок H1 у поданні DOM в нижньому правому куті (як ви робили із заголовком раніше). Потім вище цього виберіть CSS дизайнер.

підготувати укладку для елемента заголовка

Щоб створити селектор CSS, натисніть на рядок, де написано Sобранці а потім натисніть на символ плюс. Це має автоматично запропонувати вибраний вами селектор #header h1.

створити селектор css у мрій

Натисніть Enter, щоб створити його. Зроблено!

Швидка примітка: для всіх нових у CSS цей селектор означає, що ви орієнтуєтесь на ім’я елемента h1 всередині елемент називається #header. Таким чином, все, що ви вводите як CSS, застосовується лише до написаного тексту, а не в загальному елементі заголовка.

Крок 8. Змініть шрифт заголовка

Тепер, коли у вас є селектор, ви можете призначити йому властивості. Якщо ви знаєте свій шлях навколо CSS, ви можете просто ввести розмітку style.css і програма автоматично подбає про неї.

Для менш досвідчених користувачів Dreamweaver також робить це дуже просто. Залишайтеся в CSS дизайнер меню та зніміть прапорець біля цього пункту Показати набір. Коли ви це зробите, це відкриє безліч додаткових варіантів.

включити параметри css у dreamweaver

За допомогою нових кнопок ви можете вибрати безліч властивостей CSS з областей компонування, тексту, межі та фону. The Більше кнопка дає вам параметри введення власних правил.

Щоб змінити тип шрифту, натисніть на Текст варіант вгорі (або прокрутіть вниз). У наступних варіантах наведіть курсор миші на курсор сімейство шрифтів і натисніть на шрифт за замовчуванням.

змінити сімейство шрифтів у dreamweaver

Це дасть вам ряд варіантів для загальних шрифтів, включаючи їх резервні копії (якщо браузер користувача не зможе показати основний шрифт). Ви можете натиснути на Управління шрифтами внизу, щоб перейти до цього меню:

веб-шрифти adobe edge

Тут ви можете вибрати безкоштовні шрифти від Adobe Служба Edge Web Fonts. Або шукайте шрифт за назвою або використовуйте безліч варіантів фільтра зліва, щоб звузити вибір, поки ви щось не знайдете.

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

створити власні стеки шрифтів у dreamweaver

Поки просто натисніть Зроблено і натисніть на шрифти за замовчуванням знову. Цього разу виберіть обраний для вас шрифт та voilá – зміна робиться, включаючи все необхідне кодування.

змінили шрифт у мрій

Якщо ви натиснете на style.css Файл у верхній частині, ви побачите, що також додана вся розмітка.

оновлений аркуш стилів у мрій

Крок 9. Відцентруйте заголовок та змініть його розмір

Текст ще міг виглядати краще. Наступне завдання – центрирувати його та збільшувати розмір шрифту. Для цього можна також скористатися іншою функцією під назвою Швидке редагування.

Щоб скористатися ним, перейдіть до перегляду коду та клацніть правою кнопкою миші частину, яку ви бажаєте відредагувати. У цьому випадку справа йде на

кронштейн.

відкрити меню швидкого редагування у режимі сну

Тут вибирайте Швидке редагування на вершині. Це відкриє CSS, пов’язаний з цим елементом, під ним. Тепер ви можете вводити додаткові властивості без необхідності пошуку всього файлу аркуша стилів (що може бути дуже довгим). Щоб центрувати текст і збільшити його, додайте до нього наступний код.

розмір шрифту: 42 пікселів;
вирівнювання тексту: центр;

Вводячи, Dreamweaver також вноситиме пропозиції щодо того, що ви намагаєтеся ввести, що полегшить його. Це функція заповнення коду, згадана раніше.

Коли ви закінчите, це буде виглядати приблизно так:

змінити css за допомогою швидкого редагування у dreamweaver

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

Досить круто, правда?

До речі, якщо ви ніколи не знаєте, що означає властивість CSS, просто клацніть правою кнопкою миші та виберіть Швидкі документи (або натисніть Ctrl + K). Потім Dreamweaver дасть вам пояснення.

Dreamweaver швидкі документи

Крок 10. Додайте більше вмісту

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

  • Визначені шрифти за замовчуванням для заголовків та абзаців
  • Додано панель навігації та створено посилання на головну сторінку в ній
  • Додано поле для вмісту з ще двома полями всередині
  • Перемістив один з них ліворуч і один праворуч плавати власність
  • Обмежте їх ширину відсотками, щоб вони могли горизонтально вирівнюватися
  • Додано зразковий заголовок та фіктивний текст зліва, включаючи не упорядкований список
  • Створена форма (скористайтеся спадним меню під Вставити), два текстових поля та кнопку надсилання
  • Додано інтервал навколо елементів за допомогою поля CSS та прокладки
  • Надані кольори фону та рамки
  • Створено колонтитул та повідомлення про авторські права

Ось результат:

веб-сайт з вдосконаленим дизайном

Код для прикладу:

Оскільки це трохи вдосконалено, і не всі знають, як це зробити, ви можете знайти HTML та CSS нижче, щоб ви могли реконструювати його для себе. Спочатку HTML:





index.html

 



Головна

Зразок заголовка основного вмісту

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi. In imperdiet auctor leo vitae blandit.

  • Etiam tempus urna condimentum libero varius
  • Ut commodo risus finibus
  • Duis odio lacus, elementum eget sem finibus
  • Mollis dignissim enim.
  • Quisque molestie suscipit odio vel facilisis

Curabitur vestibulum, lorem a tincidunt dapibus, erat sem rhoncus nisl, non dapibus quam mi ac ligula. Vestibulum id auctor eros, nec porttitor odio. Nunc efficitur turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, facilisis nisl.

Зразок заклику до дії!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi.

Copyright © 2017 Мій уявний веб-сайт

А потім CSS:

@charset "utf-8";

корпус {
колір фону: # F5F5F5;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

p,
а,
вул,
ол,
лі,
етикетка,
введення {
сімейство шрифтів: muli, sans-serif;
стиль шрифту: нормальний;
шрифт: 300;
розмір шрифту: 17px;
}

h1, h2, h3, h4, h5 {
сімейство шрифтів: karla, sans-serif;
стиль шрифту: нормальний;
шрифт: 400;
перетворення тексту: великі літери;
}

#header {
підкладка: 25px;
нижня підкладка: 25px;
колір фону: #FFFFFF;
облямівка-дно: 4px суцільний # EB232F;
}

#header h1 {
сімейство шрифтів: aguafina-script;
стиль шрифту: нормальний;
шрифт: 400;
розмір шрифту: 42 пікселів;
вирівнювання тексту: центр;
margin-top: 0px;
margin-bottom: 0px;
перетворення тексту: немає;
}

#navigation {
margin-right: авто;
край-ліворуч: авто;
максимальна ширина: 1140px;
margin-top: 10px;
margin-bottom: 10px;
}

#navigation a {
колір: # EB232F;
}

.головний {
дисплей: блок;
margin-top: 15px;
margin-right: авто;
край-ліворуч: авто;
маржа-нижня: 15 пікселів;
зрозуміло: обидва;
переповнення: авто;
максимальна ширина: 1140px;
}

.main # main-right {
поплавок: праворуч;
ширина: 37,5%;
дисплей: блок;
}

.main # main-left {
поплавок: зліва;
ширина: 57%;
дисплей: блок;
підкладка-права: 20px;
}

.main # main-right .cta {
вирівнювання тексту: центр;
}

.main # main-right .form {
ширина: 92%;
margin-right: авто;
край-ліворуч: авто;
}

# головний-правий .form div {
margin-bottom: 10px;
}

# main-right .form .label {

}

# main-right .form .textfield {
ширина: 100%;

}

.main # main-right # кнопка {
вирівнювання тексту: центр;
підкладка: 7px;
підкладка-дно: 7px;
край-ліворуч: авто;
margin-right: авто;
положення: відносне;
дисплей: блок;
підкладка-права: 36 пікселів;
підкладка-зліва: 36px;
межа: немає;
фоновий колір: # EB232F;
колір: #FFFFFF;
курсор: вказівник;
}

.нижній колонтитул {
дисплей: блок;
обшивка: 25 пікселів;
нижня підкладка: 25px;
вирівнювання тексту: центр;
}

Ми хочемо використати це як приклад, щоб показати вам наступні кроки. Навіть якщо це здається складним, ми склали це так, як ми показали вам раніше.

Крок 11. Попередній перегляд у браузері та на мобільному пристрої

Як ми все це зробили? Ну, по-перше, ми трохи досвідченіші у створенні веб-сайтів, ніж ви, мабуть, є. Тому у нас вже є кроки щодо створення належної веб-сторінки.

По-друге, ми використовуємо дуже корисну функцію, яка допомагає мені прискорити процес: попередній перегляд браузера. Dreamweaver дозволяє переглядати веб-сторінки в режимі реального часу в браузері та навіть на мобільних пристроях.

Для початку натисніть кнопку попереднього перегляду в реальному часі в правому нижньому куті.

включити меню попереднього перегляду в режимі сновидіння

Це відкриє параметри попереднього перегляду.

параметри попереднього перегляду в режимі реального часу в мрій

Клацання одного з імен браузера відкриє проект вашого веб-сайту. Ви також можете сканувати QR-код за допомогою телефону або планшета (наприклад, за допомогою Firefox Quantum) або введіть відображену адресу у своєму браузері, щоб почати попередній перегляд на вашому пристрої.

Просто пам’ятайте, що для цього вам потрібно ввести свій Adobe ID та пароль. Ви повинні мати це від реєстрації в Dreamweaver.

Найкраща частина: Будь-які зміни, внесені в Dreamweaver, автоматично з’являться у веб-переглядачі одночасно з їх внеском.

Як це допомогло мені швидше зібрати сайт? Перш за все, залежно від розміру екрана, відображення в браузері може бути ближче до оригіналу, ніж те, що ви бачите в Dreamweaver.

По-друге, перевірка сайту в браузері дозволяє мені використовувати інструменти для розробників для тестування змін.

інструменти для розробників у браузері

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

Погляд на телефонну версію показує, що ще належить зробити багато роботи.

мобільний попередній перегляд у реальному часі у мрій

Це підводить нас до наступного моменту.

Крок 12. Додайте медіа-запити

Для того, щоб ваш веб-сайт працював на всіх пристроях, вам потрібно додати так звані медіа-запити. Це умовні твердження CSS, які вказують браузерам застосовувати стиль лише над або під певні розміри екранів або на певних пристроях. Таким чином, ви можете змінити макет на менших екранах.

Поки ви визначали лише глобальні стилі. Це означає стилі, які застосовуються до всього сайту. Тепер ви дізнаєтесь, як додати умовні стилі для менших екранів.

Спочатку перейдіть до CSS дизайнер. Переконайтесь, що файл, до якого потрібно додати код, вибрано під Джерела. Натисніть знак плюс під @media.

Це дає вам панель параметрів:

меню медіа-запитів у мрій

Ви можете визначити умови для медіа-запитів, наприклад, пристрої, до яких вони застосовуються, орієнтацію, дозвіл та багато іншого. Також ви можете додати кілька умов зі знаком плюс.

Що є більш важливим для нашого прикладу максимальна ширина налаштування. З цим ви зможете визначити спеціальний CSS, який застосовуватиметься лише до певного максимального розміру екрана.

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

створити медіа-запит у сні

Що також відбудеться при натисканні Добре полягає в тому, що вгорі екрана з’являється зелена лінія. Це візуально представляє медіа-запит. Клацніть по ньому, і екран автоматично перейде до цього розміру.

створювати медіа-запити у режимі мрій

Крок 13. Додати умовний CSS

Щоб виправити дизайн для мобільних пристроїв, перше, що нам потрібно зробити, – це усунути код, який змушує два елементи на сайті розташовуватися поруч. Очевидно, що для цього недостатньо місця.

Ви можете зробити це так само, як ви раніше маніпулювали CSS, лише цього разу у вас активований медіа-запит, поки ви це робите.

Перш за все – перейдіть до елемента у поданні DOM. Звідти створіть для нього новий селектор CSS. Потім встановіть його ширина до авто, плавати до жоден (щоб не переходити ліворуч) і додати трохи накладок з боків, щоб вміст не межував з краю екрана.

виправлена ​​мобільна конструкція

Виглядає набагато краще, чи не так? Таким же чином ви можете змінити CSS всіх інших елементів на сторінці, щоб вони виглядали правильно.

Це в основному це для медіа-запитів. Можна скористатися тим самим методом, щоб налаштувати макет на планшети та інші розміри.

Про поради: Не здійснюйте оптимізацію для певних пристроїв та їх розмірів, натомість створюйте медіа-запити залежно від макета. Це означає грати з розміром екрана та додавати запити в ті моменти, коли макет вже не виглядає добре.

І ще одне: Ви також можете створити медіа-запити трохи легше, використовуючи попередньо встановлені розміри пристрою в нижньому куті та натиснувши на знак плюс вгорі, коли ви знайшли точку, куди потрібно додати один.

створювати медіа-запити за допомогою ярликів у сні

Крок 14. Завантажте свій сайт на сервер

Ми рекомендуємо використовувати Bluehost (партнерське посилання) для розміщення вашого сайту Dreamweaver.

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

Спочатку перейдіть до Сайт> Керування сайтами. Виберіть у меню свій поточний веб-сайт і виберіть Редагувати внизу зліва. У наступному вікні натисніть на Сервери.

конфігурація віддаленого сервера в мрій

Введіть усі важливі дані для підключення до вашого FTP-сервера. Назва залежить від вас, решта (FTP-адреса, ім’я користувача, пароль) походить від вашого хостинг-провайдера. Не забудьте вказати, в який каталог розміщувати файли та веб-адресу вашого веб-сайту! Остання частина важлива для того, щоб Dreamweaver міг створювати відносні до сайту внутрішні посилання.

Під Розширений у вас є ще кілька варіантів (чи автоматично завантажувати файли після збереження). Зазвичай ви можете зберігати речі такими, якими вони є. Удар Зберегти двічі, і ви закінчили.

Тепер перейдіть до Файли панель (у верхній правій частині або через Вікно> Файли) та натисніть найдальший лівий символ, щоб підключитися до вашого сервера:

завантажувати сайт на віддалений сервер у Dreamweaver

Після встановлення з’єднання виберіть файли, які ви хочете завантажити та натисніть стрілку вгору для цього. Після цього ваш веб-сайт повинен бути доступний із вашої веб-адреси.

Молодці! Ви тільки що створили та завантажили простий сайт із Dreamweaver!

Підручник з Dreamweaver – заключні слова

Dreamweaver – це фантастична програма для створення веб-сайтів. Він поєднує інтуїтивно зрозумілий інтерфейс користувача з повноцінним редактором коду. Завдяки цій суміші, це дозволяє легко початківцям, проміжним та досвідченим користувачам створювати якісні веб-сайти.

У цьому підручнику Dreamweaver для початківців ми ознайомили вас із Dreamweaver та його можливостями. Ми показали, як налаштувати програму та розпочати роботу зі свого першого сайту. Ви дізналися, як створити основну структуру HTML та накреслити її за допомогою CSS. Ми також розглянули, як зробити веб-сайт мобільним адаптивним і завантажити його на свій сервер.

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

Не забувайте: Dreamweaver – це лише один із способів створення веб-сайту. Є ще багато, і ви можете знайти багато інформації про це прямо тут. Удачі!

Ви раніше використовували Dreamweaver? Яка ваша думка? Що додати до сказаного? Повідомте нас у коментарі нижче!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me