Уроки створення сайтів, свій сайт

Попередня ◈ Наступна

Уроки створення сайту. Пропоную Вам покрокову інструкцію по створенню найпростішого сайту з "нуля" своїми руками. В даному уроці ми будемо створювати сторінку сайту на основі жорсткого табличного дизайну.

Крок 1.Урокі створення сайта.Устанавліваем сервер на локальному комп'ютері.

Викачуємо програму Denwer3 тут. Запускаємо програму. Після нашої згоди встановити програму, з'являється DOS меню. Натискаємо Enter. Погоджуємося з Директорією установки папки (за замовчуванням C: \ WebServers). Далі тиснемо знову Enter. Вказуємо букву найменування віртуального диска - наприклад Z. Знову Enter. Вибираємо режим при якому працюватиме наш віртуальний диск. Ставимо -1. Далі Enter. Все - процедура закінчена.

Після установки Denwer на нашому комп'ютері з'явився віртуальний диск Z, де в директорії Z: \ home \ localhost \ www \ ми будемо створювати папку з нашим сайтом.

Крок 2.Урокі створення сайта.Определяем сайт в програмі Adobe Dreamweaver.

В директорії Z: \ home \ localhost \ www (або C: \ WebServers \ home \ localhost \ www \, що одне і теж) створюємо папку нашого сайту, назвавши її, наприклад «htmlsite».

Відкриваємо програму Adobe Dreamweaver, на вкладці праворуч знаходимо Менеджер сайтів.

Створюємо новий сайт. У вікні визначаємо назву сайту, папку, в якій буде розташовуватися матеріали сайту (щойно створена нами папка htmlsite. Тиснемо: Зберегти, Готово.

Крок 3.Урокі створення сайта.Определяем кодування файлів програми Adobe Dreamweaver.

На вкладці Редагування вибираємо пункт Властивості (Настройки) - Новий документ вибираємо Тип документа: HTML 4.01 Transitional, кодування Кирилиця (Windows). Код в файлі при такому виборі буде: windows-1251.

Крок 4.Урокі створення сайта.Создаем перший html-файл нашого сайту.

Створюємо новий php-файл, зберігаємо його як index.html. Це буде основний файл сайту, з якого буде відбуватися вся завантаження.

Створюємо новий CSS-файл. Зберігаємо його як «style.css». Тут будуть зберігатися стилі, які будуть надавати красу нашого сайту.

Крок 6.Урокі створення сайта.Подцепляем таблицю стилів до файлу index.php.

У файлі index.html переходимо на вкладку Дизайн (Проект). На нижній панелі вибираємо Стилі і на випадаючому списку вибираємо: Підчепити таблицю стилів, і у вікні вказуємо наш файл style.css.

Я буду створювати каркас сайту шириною 846 пікселів. Ви можете встановити будь-які свої розміри.

Отже, в файлі index.html. створюємо таблицю, що складається з 3 рядків і 1 стовпчика. Ширина таблиці в моєму випадку 846 пікселів. ОК. Вирівнюємо таблицю по центру через атрибут Вирівнювання. Ставимо фоновий колір таблиці - білий.

У файлі style.css пропишемо окантовку таблицю - каркаса сайту:

(Товщиною 1 піксель, суцільна, чорна).

У файлі index.html на нижній вкладці вибираємо table і присвоюємо клас main_border.

Пропишемо стилі для всіх тестових абзаців сайту, для чого в файлі style.css створимо стиль:

Відкриваємо програму Adobe Photoshop. Створюємо новий файл (мої розміри - 846 на 100 пікселів). Створюємо графічний малюнок з назвою сайту і доменним ім'ям (на свій смак).

Для створення футера (нижньої графічної частини сайту створюємо новий файл (мої розміри - 846 на 20 пікселів) і також створюємо графічний малюнок на свій смак.

В директорії Z: \ home \ localhost \ www \ phpsite створюємо папку img, куди зберігаємо створені в програмі шапку і футер сайту в форматі jpg. При збереженні в програмі Adobe Photoshop використовуємо меню Зберегти для Web.

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

Відкриваємо програму Adobe Photoshop. Створюємо новий файл (мої розміри - 50 на 50 пікселів). Заповнюємо його будь-яким фоном на свій смак і зберігаємо для Web як bg.jpg. в папці img.

Переходимо до програми Adobe Dreamweaver, відкриваємо файл style.css і прописуємо в ньому фоновий стиль:

Крок 10.Урокі створення сайта.Проверяем працює створюваний нами сайт.

Крок 11.Урокі створення сайта.Создаем навігаційну і контентну частини сайту.

Переходимо в середню рядок таблиці, ставимо їй вертикальне вирівнювання - по верху і створюємо в ній ще одну таблицю, що складається з 1 рядка і 2 стовпців, розміром 100%. Перший стовпець ми будемо використовувати в якості навігаційної панелі. Його праву обмежувальну рамку зрушуємо до розміру приблизно 186 пікселів. Створимо для навігаційній панелі свій стиль, назвавши його left, для чого в файлі style.css пропишемо:

(Колір фону - сірий, права рамка 1 піксель, суцільна, чорна)

Зберігаємо, переходимо на файл index.html, ставимо курсор в лівий стовпчик середньої рядки таблиці, на нижній панелі вибираємо тег нашого осередку і надаємо йому стиль left.

Навігація

Головна статті

border: 1px solid gray; / * Стиль рамки * /

width: 100%; / * Ширина меню * /

background-color: # f6f6f6; / * Фоновий колір осередки * /

margin: 8px; / * Ширина відступів * /

width: 150px; / * Ширина меню для Internet Explorer * /

font: bold 13px Verdana; / * Шрифт тексту * /

padding: 2px; / * Внутрішній отсутп тексту посилання від країв комірки * /

padding-left: 4px; / * Внутрішній отсутп тексту посилання від лівого краю осередку * /

width: 100%; / * Ширина комірки * /

color: # 000000; / * Колір тексту * /

text-decoration: none; / * Підкреслення у посилань - ні * /

border-bottom: 1px solid gray;

> Html> body #coolmenu a

background-color: #cccccc; / * Фоновий колір осередки при наведення курсору * /

color: # 000000; / * Колір тексту при наведенні курсору * /

Копіюємо HTML код і вставляємо в лівий осередок файл index.html. Перед цим вертикальне вирівнювання в цьому осередку зробити по верхньому краю. Для вставки HTML коду перейдемо на вкладку КОД і вставляємо його в рядок:

на місце параметра .

Як Ви розумієте HTML код містить посилання на сторінки сайту, як на головну - index.php, так і на інші сторінки сайту, які ми створимо пізніше. Ви можете додати як свої нові сторінки, так і змінити назви наведених тут сторінок.

Переходимо в браузер, перевіряємо. Якщо ширина меню вилазить за межі осередку, то у файлі style.css підправити процентне значення Ширини меню (width: 100%; / * Ширина меню * /), поставивши наприклад 93-95%.

Крок 13.Урокі створення сайта.Заполняем текстову частину файлу index.html.

У правій комірці таблицю робимо вертикальне вирівнювання по верху і додаємо в неї свій текст.

Крок 14.Урокі створення сайта.Перед тиражуванням сторінки index.html на інші сторінки сайту зробимо ліву навігаційну панель сайту елементом бібліотеки.

Відкриваємо програму Adobe Dreamweaver, В правій панелі вибираємо вкладку Файли - Набори (Активи). Тиснемо на значок Бібліотека. Виділяємо нашу ліву навігацію: в меню швидких тегів, натискаючи на вкладку

. Після виділення натискаємо на значок «Новий об'єкт Бібліотеки», розташований в самому низу вкладки Бібліотека (справа внизу). Даємо назву новому бібліотечному елементу (наприклад leftnav). Створений елемент бібліотеки забарвлюється відразу в жовтий колір.

Крок 15.Урокі створення сайта.Тіражіруем файл index.html на інші сторінки сайту.

Растіражіруем файл index.html на необхідне нам кількість сторінок, тобто зберігаючи його як article0.html, article1.html, article2.html і т.д. При цьому файли article0.html і lesson0.html у нас будуть містити назви-посилання на файли статей і уроків (будуть головними сторінками статей і уроків). Також з файлу index.html створимо файл about.html.

Крок 16.Урокі створення сайта.Устанавліваем посилання з навігації на новостворені файли.

Далі в файлі lesson0.html пишемо вступний текст, під ним назви уроків, опису уроків та інше. Як це зробити красиво дивись курси уроків HTML і CSS. Створюємо з назв уроків посилання на файли, таким же чином перетягуючи на них значок «Покажчик на файл».

Після того як ми встановили всі посилання, нам запропонують оновити всі файли, що містять даний бібліотечний елемент. Ми говоримо - OK.

Уроки створення сайта.Как бачите, немає нічого простішого створення сайту на HTML. Тепер нам залишиться тільки заповнити створені сторінки контентом.

1. Якщо Ви маєте намір самостійно набирати тексти «з нуля», то краще це робити відразу в програмі Adobe Dreamweaver.

2. Якщо Ви копіюєте текст з Інтернету, і у Вас в цей час немає доступу до Вашого сайту, то краще його копіювати НЕ через Microsoft Word, а через Блокнот.

3. Коли Ви набираєте текст в програмі Adobe Dreamweaver, або вставляєте скопійований текст, на вкладці Параметри вибирайте Форма - Абзац (Параграф), тобто тег

, який потім бажано перевизначити в таблиці стилів сайту - файлі style.css. Наприклад, у такий спосіб:

4. Для заголовка статті (уроку) вибираємо Формат Тема 1, або 2, або 3, Для краси бажано також в таблиці стилів перевизначити обраний Вами

,

або

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

і прописані в таблиці стилів так:

5. Для зручності читання тексту не соромтеся додавати жирний текст (кнопка B), курсив (кнопка I), підкреслення (для чого перейдіть на вкладку Код і обрамити підкреслюваний текст тегами ...), Але намагайтеся не переборщувати.

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

Схожі статті

Попередня ◈ Наступна