# 1. Створення блоків сторінки

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

Можливо, в минулому уроці, вам здалося, що весь код, який ми помістили в документ перетворився в нечитаемую простирадло, - це дійсно так. Уявіть, що в нашому коді буде не 10-15 рядків, а, скажімо, 1 000, - працювати з таким кодом стало б неможливо.

Для роботи з кодом програмісти використовують спеціалізовані текстові редактори. У своїх статтях я буду використовуватиNotepad ++ . Завантажити його можна за цим посиланням.

На минулій лекції ми створили html -сторінок. Давайте скопіюємо її в новий каталог Learn 2 і відкриємо в професійному редакторі Notepad ++ .

# 1. створення блоків сторінки

# 1. створення блоків сторінки

Погодьтеся - інша справа!

Якщо у вас не такий вид тексту, проведемо невелику налаштування редактора:

# 1. створення блоків сторінки

Це сильно допоможе нам в майбутньому.

У минулому уроці я не акцентував увагу на те, що в програмуванні кожен символ має значення і, відповідно, для чогось потрібен. У нашому випадку, це символи <, / і > . Якщо вони будуть перебувати не там, де потрібно, або будуть відсутні там, де потрібні, наш код працювати не буде.

У таких випадках, як раз, допомагає новий текстовий редактор.

Перейдемо до справи

Проведемо експеримент, - видалимо символ > з тега початку абзацу:

було:

зробимо:

# 1. створення блоків сторінки

Нотпад моментально показує нам підказку ( фіолетовий колір ):неправильний синтаксис . У нашому випадку, це некоректне відкриття абзацу.

Повернемо абзац до свого попереднього стану і подивимося що ще вміє такий редактор.

Давайте приберемо параметр center з абзацу.

було:

стало:

Сюди ж почнемо писати ce … І редактор видає нам можливі варіанти цієї комбінації, відштовхуючись від написаного коду:

# 1. створення блоків сторінки

Редактор ніби знав який нам потрібен параметр. Тиснемо Enter .

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

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

логіка коду

Так само писати код ( програмувати ) дуже зручно логічними розділами. Кожен логічний розділ повинен починатися з нового рядка. Для візуального сприйняття коду вставляють порожній рядок, але, бажано, не більше однієї.

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

З блоків в коді стрибнемо на сектори сторінки.

сектор сторінки

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

Відкриємо наш редактор і розіб’ємо нашу сторінку на сектора:

Тема вкладки
заголовок сторінки

Текст в абзаці. Текст для прикладу.

Не поспішайте перевіряти результат, подивимося на код ще раз:

# 1. створення блоків сторінки

Зверніть увагу на структуру двох секторів в коді. Зберігаємося і йдемо дивитися результат:

# 1. створення блоків сторінки

Здавалося б, нічого не змінилося, але насправді це не так. У кожного сектора тепер є своя межа, за замовчуванням вона прихована. Ми зможемо побачити кордону секторів, використовуючи інтструментарій табличного тега . Змінюємо в 7-му рядку частина коду:

- просимо наші сектора показати кордон, border , і вибираємо перший варіант її накреслення, 1 .

було:

стало:

Йдемо дивитися результат:

# 1. створення блоків сторінки

Тепер ми візуально спостерігаємо кордону створених секторів.

Давайте придумаємо як буде називатися наша сторінка, придумаємо текст для неї і створимо ще кілька секторів:

Easy Dev - Створення сайтів від А до Я
Easy Dev

лівий сектор

Створення сайтів від А до Я. Робити сайти може кожен! Це легше, ніж здається! Я вас навчу!

Правий сектор

Підвал сторінки Easy Dev

Подивимося результат:

# 1. створення блоків сторінки

Ми створили додаткові сектори, аналогічно наявним.

Дуже важливо не заплутатися в структурі тегів.

Сьогодні ми розмічаємо ( пам’ятаєте про розмітку? ) Нашу сторінку табличним методом або, як прийнято називати,табличній версткою .

Логічно, тіло таблиці відкривається тегом і їм же закривається

. Далі ми відкриваємо рядок і так же тегом її закриваємо. Після цього йдуть теги стовпців і так само закриваються .

Як і в будь-якій таблиці, осередок формується при перетині рядка і стовпця:

Комірка

Вважаю, що ви помітили 3 об’єднані осередки вгорі і внизу таблиці. Ми це зробили параметром colspan = “3” в 9 і 33 рядках, де цифра 3 - це кількість поєднуваних осередків в рядку.

було:

стало:

Видихайте, далі копіпаст ( copy + paste ):

Easy Dev - Створення сайтів від А до Я
Easy Dev

лівий сектор

Створення сайтів від А до Я. Робити сайти може кожен! Це легше, ніж здається!Я вас навчу!

Правий сектор

Підвал сторінки Easy Dev

Дивимося результат:

# 1. створення блоків сторінки

Що змінилося: я візуально хочу показати структуру коду.Використовуючи табличну верстку, ми жорстко відокремлюємо сектори один від одного. Так само ми можемо їх кастомизировать ( змінити під наші потреби ), задаючи висоту рядка, height = “200” в 15-му рядку коду, а так само вказувати заливку фону, bgcolor = “aqua” , в 16-му рядку, і розташування об’єктів, щодо вертикалі valing = “top”, в 19-му рядку.

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

Доповнимо лівий сектор вмістом, 18-й рядок:

лівий сектор

Текст в лівому секторі. Резервуємо місце.

Що вийшло:

# 1. створення блоків сторінки

Лівий сектор збільшився в ширину, так як його вміст вимагає більшого місця. Погодьтеся, виглядає не дуже. Вносимо правки в три забарвлених шпальти ( додаємо параметри ):

width = “20%” - перший стовпець;

width = “60%” - другий стовпець;

width = “20%” - третій стовпець;

Загальна довжина таблиці 100%. Ми пропорційно розбили таблицю для найкращого відображення розмітки. Ця довжина тепер буде статичною (незмінною) :

# 1. створення блоків сторінки

Яскраві кольори ріжуть око, тому за допомогою вбудованого в браузер помічника підберемо більш приємні тони. Почнемо з лівого сектора, клацнемо по ньому ПКМ ( права кнопка миші ) і викличемо інспектор об’єктів сторінки:

# 1. створення блоків сторінки

Відкриється вікно огляду цього сектора:

# 1. створення блоків сторінки

Визначимося: велике вікно - це розмітка сторінки , маленьке, праворуч - стилі сектора або об’єкта. За замовчуванням у вікні стилів заданий параметр element.style - його ми використовуємо для своїх цілей.

Розміщуємо туди курсор, пишемо backgrond . Тут є такі ж підказки, як в текстовому редакторі. Тиснемо Tab , щоб вказати значення параметра і вибираємо відповідний колір, у мене цеbeige .

Якщо ви після цього натиснете на іконку цього кольору, стане доступним вікно вибору кольору в системі HEX і RGB :

# 1. створення блоків сторінки

Копіюємо назву кольору або коду кольору, який сподобався і повертаємося в редактор:

bgcolor = “# 7cbaec” - 16-й рядок;

Те ж саме робимо з двома іншими стовпцями і підвалом (стовпці - це):

# 1. створення блоків сторінки

Ось такий вигляд придбала моя сторінка.

Підведемо підсумки

Для чого потрібен професійний текстовий редактор?

Розкажіть про деякі можливості Notepad ++ .

Таблична верстка - як формується осередок?

Напишіть в коментар HEX -код жовтого кольору.

Підписуйтесь на ресурс Easy Dev



ЩЕ ПОЧИТАТИ