1. 4.1. Опис структури сайту
2. 4.2. Основні принципи створення макета сторінок
3. 4.3. огляд HTML
4. 4.3.2. Основні елементи
5. 4.3.2.1. гіперпосилання
6. 4.3.2.2. текстові блоки
7. 4.3.2.4. списки
8. 4.3.2.6. об'єкти
9. 4.3.2.8. таблиці
10. 4.3.2.9. форми

Анотація: Дане практичне заняття висвітлює питання розробки статичних сторінок Веб-сайту з застосуванням HTML і CSS, а також налагодження CSS за допомогою інструментів розробника в IE8.

Мета практичного заняття: Основна мета даного заняття - створити статичний макет сайту на прикладі Інтернет-магазину, тобто задати структуру сайту, задати розмітку основним сторінкам і шаблонами, а також визначити необхідні CSS-класи, а також розглянути використання для цих цілей Microsoft Expression Web 3 і Microsoft Visual Studio 2008 Expression Web.

Файли до практичного заняття Ви можете завантажити тут .

4.1. Опис структури сайту

Структура розроблюваного сайту представлена ​​на Мал. 4.1 .

Мал.4.1.

Структура сайту інтернет-магазину AdventureWorks

Сайт складається з наступних сторінок:

• головна сторінка (default.html);
• про компанію (about / default.html);
• контакти (contact / default.html);
• продукти (products / default.html);
• карта сайту (site_map / default.html).

Крім сторінок, в сайт включений файл, з описом динамічного веб-шаблону (master.dwt), папка "images", що містить зображення, які використовуються на сайті (в деяких інших папках також присутні папки "images" з картинками, наприклад, в products розташовуються всі картинки продуктів), а також папка "styles", що містить використовувані в сайті CSS файли.

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

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

4.2. Основні принципи створення макета сторінок

Щоб витримати стиль, простіше спочатку розробити шаблон сторінки. Шаблони зручні тим, що більшість сторінок верстають за подобою однієї сторінки майже автоматично. Структура шаблону складається з елементів, які повинні бути присутніми на всіх сторінках сайту. Наприклад, меню навігації, назва теми, поле введення інформації, форма пошуку, контактна інформація. Меню навігації зручніше розташувати у верхній або в лівій частині сторінки.

Як технології для розробки шаблону можна використовувати Dynamic Web Templates (DWT), про яку буде розказано нижче. Також в наступних заняттях буде розглядатися технологія Master Page. Звичайно, можна підтримувати шаблон руками, копіюючи код з нього в кожну сторінку, однак це незручно.

Перейдемо до створення зовнішнього вигляду Веб-сторінок.

Почнемо з головної сторінки. Традиція оформлення головної сторінки прийшла з поліграфічного дизайну. У книзі або журналі є функціональна необхідність присутності обкладинки. Обкладинка - "особа" книги. Головну сторінку сайту також можна порівняти з "особою" інтерактивної мультимедійної книги - вона визначає образ всього сайту.

Існує два основних види домашніх сторінок: презентаційна і інформаційна. Презентаційна сторінка створюється для не дуже великих вузлів, вона красиво оформляється, часто майже цілком складається з графіки та має малу кількість посилань. Така сторінка, як правило, повинна міститися на екрані. Інформаційна сторінка, навпаки, створюється з використанням мінімуму графіки і містить велику кількість інформації. Багато відомих Веб-сайти не соромляться "роздувати" її до 3-х і більше екранів. Її головне завдання - продемонструвати відвідувачеві велика кількість інформації на вузлі і надати все найактуальніше.

Незалежно від виду домашньої сторінки існує кілька основних правил її організації:

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

Сторінка- шаблон, зазвичай містить такі елементи (див. Мал. 4.2 ):

• меню навігації по темам;
• логотип;
• тематична графіка;
• назва сторінки;
• основна область;
• координати;
• шапка;
• підвал.

Шаблон типової сторінки інтернет-сайту

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

4.3. огляд HTML

4.3.1. Структура HTML-документа

HTML - це тегів мову розмітки документів, тобто будь-який документ на мові HTML являє собою набір елементів, причому початок і кінець кожного елемента позначається спеціальними позначками, званими тегами. Регістр, в якому набрано ім'я тега, в HTML значення не має. Елементи можуть бути порожніми, тобто не містять ніякого тексту та інших даних (наприклад, тег перекладу рядка <br>). В цьому випадку зазвичай не вказується закриває тег, хоча краще використовувати <br/>. Крім того, елементи можуть мати атрибути, що визначають будь-які їх властивості (наприклад, розмір шрифту для тега <font>). Атрибути вказуються в відкриваючому тезі. Ось приклад частини розмітки HTML-документа:

<P> Текст між двома тегами - відкриває і закриває. </ P> <a href="http://www.example.com"> Тут елемент містить атрибут href. </a> А ось приклад порожнього елемента: <br >

Кожен HTML-документ, який відповідає специфікації HTML будь-якої версії, має починатися з рядка декларації версії HTML <! DOCTYPE>, яка зазвичай виглядає приблизно так:

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">

Якщо цей рядок не вказана, то домогтися коректного відображення документа в браузері стає важче.

Далі позначається початок і кінець документа тегами <html> і </ html> відповідно. Усередині цих тегів повинні знаходитися теги заголовка (<head> </ head>) і тіла (<body> </ body>) документа.

4.3.2. Основні елементи

Теги та їх параметри нечутливі до регістру. Тобто <A HREF="http://msdn.com"> і <a href="http://msdn.com"> означають одне і те ж.

В останніх версіях HTML практично у кожного тега величезне число необов'язкових параметрів - зазвичай не менше 15.

4.3.2.1. гіперпосилання

<A HREF="filename" target="_self"> текст посилання </A>

• Атрибут HREF задає значення адреси документа, на який вказує посилання.
• filename - ім'я файлу або адреса в Інтернеті, на який необхідно послатися.
• текст_ссилкі - текст гіпертекстового посилання, який буде безпосередньо показаний в HTML-документа.
• TARGET - задає значення вікна або фрейму, в якому буде відкритий документ, на який вказує посилання. Можливі значення атрибута:
• _top - відкриття документа в поточному вікні;
• _blank - відкриття документа в новому вікні;
• _self - відкриття документа в поточному фреймі;
• _parent - відкриття документа в батьківському фреймі Значення за замовчуванням: _self.

4.3.2.2. текстові блоки

• <H1> ... </ H1>, <H2> ... </ H2>, ..., <H6> ... </ H6> - заголовки 1, 2, ... 6 рівня.
• <P> - новий абзац. Можна в кінці абзацу поставити </ P>, але це не обов'язково.
• <BR> - новий рядок. Цей тег не закривається (тобто не існує тега </BR>).
• <HR> - горизонтальна лінія.
• <BLOCKQUOTE> ... </ BLOCKQUOTE> - цитата. Зазвичай текст зсувається вправо.
• <PRE> ... </ PRE> - режим preview. В цьому режимі текст полягає в рамку і ніяк не форматується (тобто теги, крім </ PRE>, ігноруються, і переклади рядка ставляться там, і тільки там, де вони є в оригіналі).
• <DIV> ... </ DIV> - блок (зазвичай використовується для застосування стилів CSS).
• <SPAN> ... </ SPAN> - рядок (зазвичай використовується для застосування стилів CSS).

4.3.2.3. форматування тексту

• <EM> ... </ EM> - логічний наголос (зазвичай відображається курсивним шрифтом).
• <STRONG> ... </ STRONG> - посилене логічний наголос (зазвичай відображається жирним шрифтом).
• <I> ... </ I> - виділення тексту курсивом.
• <B> ... </ B> - виділення тексту жирним шрифтом.
• <U> ... </ U> - підкреслення тексту.
• <S> ... </ S> - закреслений текст.
• <BIG> ... </ BIG> - збільшення шрифту.
• <SMALL> ... </ SMALL> - зменшення шрифту.
• <SUB> ... </ SUB> - підрядковий текст.
• <SUP> ... </ SUP> - надрядковий текст.
• <FONT параметри> ... </ FONT> - завдання параметрів шрифту:
  • COLOR = color - завдання кольору. Колір може бути заданий в шістнадцятковій формі як #rrggbb (перші 2 шістнадцятиричні цифри задають червону компоненту, наступні 2 - зелену, останні 2 - синю) або назвою;
  • FACE = шрифт змінює шрифт;
  • SIZE = розмір змінює розмір шрифту. Розмір від 1 до 7, стандартний за замовчуванням 3. (Є багато способів змінити стандартний розмір для даної сторінки.);
  • SIZE = + розмір або SIZE = -розмір - розмір задається в порівнянні зі стандартним. Наприклад, +2 означає розмір на 2 більше стандартного.

Так наприклад:

Сигналом до початку атаки є <U> три </ U> <FONT SIZE = "+ 2"> великих </ FONT> <FONT COLOR = "green"> зелених </ FONT> свистка.

Створить приблизно наступний текст:

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

4.3.2.4. списки

<UL> <LI> перший елемент </ LI> <LI> другий елемент </ LI> <LI> третій елемент </ LI> </ UL>

створює список:

• перший елемент
• другий елемент
• третій елемент

Якщо замість <UL> (ненумерований список) поставити <OL> (нумерований список), список вийде нумерованим:

1. перший елемент
2. другий елемент
3. третій елемент

4.3.2.6. об'єкти

• EMBED - вставка різних об'єктів: не- HTML документів та media-файлів.
• APPLET - вставка Java-аплетів.
• SCRIPT - вставка скриптів.
• OBJECT - також використовується для вставки різних об'єктів, наприклад додатків Silverlight.

4.3.2.7. зображення

• IMG - вставка зображення (Цей тег не закривається);
  • SRC - ім'я або URL;
  • ALT - альтернативне ім'я (відобразиться, якщо в браузері заборонити відображати картинки);
  • TITLE - короткий опис зображення (відобразиться при наведенні курсору на картинку);
  • WIDTH, HEIGHT - розміри (якщо не збігаються зі справжніми розмірами картинки, то зображення "розтягнеться" / "стиснеться");
  • ALIGN - задає параметри обтікання текстом (top, middle, bottom, left, right);
  • VSPACE, HSPACE - задають розміри вертикального і горизонтального простору навколо зображення.

приклад:

<IMG SRC = url ALT = "текст" TITLE = "текст" WIDTH = "розмір (пікс,%)" HEIGHT = "розмір (пікс,%)">

Зображення можна зробити посиланням:

<A HREF=url> <IMG SRC = url> </A>

4.3.2.8. таблиці

• TABLE - створення таблиці. Параметри тега: o
  • BORDER - товщина розділових ліній в таблиці; o
  • CELLSPACING - відстань між клітинами. o
• CAPTION - заголовок таблиці (цей тег необов'язковий).
• TR - рядок таблиці.
• TH - заголовок стовпця таблиці (цей тег необов'язковий).
• TD - елемент таблиці.
• height - висота таблиці.
• width - ширина таблиці.

Так наприклад:

<Table border = "0" cellpadding = "4" cellspacing = "0"> <tr> <th scope = "col" style = "width: 30%"> Кількість на & nbsp; складі </ th> <th scope = " col "style =" width: 70% "> Назва продукту </ th> </ tr> <tr> <td> 191 </ td> <td> Mountain Tire Tube </ td> </ tr> <tr> < td> 184 </ td> <td> Patch Kit / 8 Patches </ td> </ tr> <tr> <td> 175 </ td> <td> Water Bottle & nbsp; & mdash; 30 & nbsp; oz. </ Td> </ tr> <tr> <td> 161 </ td> <td> Road Tire Tube </ td> </ tr> <tr> <td> 110 </ td> <td> Fender Set & nbsp; & mdash; Mountain </ td> </ tr> </ table>

Створить таблицю, зображену на Мал. 4.3 .

У тега TABLE є ще параметр CELLPADDING. Він визначає відстань в пікселях між рамкою комірки і її вмістом. Інший параметр тегів TABLE, TR, TH, TD - ALIGN. Він визначає вирівнювання. Можливі значення - center (по центру), left (по лівому краю), right (по правому краю).

Параметр ALIGN в TD або TH визначає вирівнювання для вмісту всередині даного осередку, в TR - для вмісту всіх осередків рядка, TABLE - для самої таблиці на сторінці. Для кожного осередку береться вирівнювання з TD або TH, якщо воно не задано - з TR, якщо і воно не задано - по центру для TH або по лівому краю для TD.

Незакриті теги TD, TR і TH призводять до некоректного відображення, особливо при роботі з вкладеними таблицями.

4.3.2.9. форми

• FORM - створення форми.
• INPUT - елемент введення (може мати різні функції - від введення тексту до відправки форми).
• TEXTAREA - текстова область (многострочное поле для введення тексту).
• SELECT - список (зазвичай у вигляді меню, що випадає).
• OPTION - пункт списку.