Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Розробка та створення веб сайту
Інформація про навчальний заклад
ВУЗ:
Інші
Інститут:
Не вказано
Факультет:
Не вказано
Кафедра:
Не вказано
Інформація про роботу
Рік:
2024
Тип роботи:
Курсовий проект
Предмет:
Дизайн
Частина тексту файла (без зображень, графіків і формул):
Міністерство освіти і науки України
КУРСОВИЙ ПРОЕКТ
з дисципліни
«Веб - дизайн»
Тема:
«Розробка та створення веб сайту»
Зміст
Вступ…………………………………………………………………….…………3
Короткі теоретичні відомості…………………………………………...…….5
Голова документа………………………………………………………….5
Тіло документа…………………………………………………………….5
Таблиці……………………………………………………………………..6
Абзаци……………………………………………………………………...8
Розмір шрифту……………………………………………………………9
З'єднання з іншими документами……………………………………….11
Фрейми……………………………………………………………………12
Постановка задачі…………………………………………………………….12
Карта сайту……………………………………………………………………13
Побудова і реалізація сайту………………………………………………….15
Висновок………………………………………………………………………….17
Список використаної літератури………………………………………………..18
Додаток А………………………………………………………………………...19
Вступ
HTML, Hyper Text Markup Language, або, по-українськи, «мова розмітки гіпертексту », є фундаментальною, базовою технологією Інтернету. Не дивлячись на існуюче серед користувачів Всесвітньої мережі думка, що HTML є повнофункціональною мовою програмування, яка володіє практично всіма рисами, характерними для інших аналогічних мов.
Практично весь вміст web-вузлів, який відображається на екрані підключених до Інтернету комп'ютерів, є набором документів, що містять програмний код HTML.
HTML дозволяє формувати на сторінці сайту текстові блоки, включати в них зображення, організовувати таблиці, управляти відображенням кольору документа і тексту, додавати в дизайн сайту звуковий супровід, організовувати гіперпосилання з контекстним переходом в інші розділи серверу або звертатися до інших ресурсів Мережі і компонувати всі ці елементи між собою. Файли, що містять гіпертекстовий код, мають розширення .htm або .html.
HTML, Hyper Text Markup Language (мова розмітки гіпертексту) - мова, що використовується для створення документів в Інтернеті. HTML-документом називається файл, що містить код HTML. Такі документи є основним інформаційним наповненням web-вузлів, вони дозволяють відображати текст, графіку, аудіо та відеоінформацію, а також інші компоненти ресурсів Інтернету.
Однієї з основних функціональних особливостей, характерних саме для даної мови програмування, завдяки якій він і одержав свою назву, є гіперпосилання.
Гіперпосилання (Hyperlink) - базовий функціональний елемент html-доку-мента, що є реалізацією динамічного зв'язку якого-небудь об'єкту даної web-сторінки з контекстним вмістом іншого документа.
Щоб роз'яснити цей термін, приведу простий приклад. Припустимо, що створений вами html-документ включає текст, в якому зустрічається слово «гіперпосилання », а докладне розкриття цього терміну приведено в іншому документі, розміщеному в Інтернеті незалежно від першого. Перетворивши дане слово в гіперпосилання і пов'язавши її з вказаним вище документом, ви організовуєте тим самим найпростіший гіперзвязок: користувачу, охочому ознайомитися із значенням терміну «гіперпосилання », достатньо клацнути мишею на цьому слові, щоб перейти до web-сторінки з відповідними поясненнями. Слід зазначити, що як гіперпосилання може використовуватися як елемент текста, так і графічний об'єкт, а сам гіперзвязок можна встановлювати як між декількома документами, розташованими на одному фізичному сервері, так і з об'єктами, розміщеними на різних вузлах Інтернету.
На відміну від інших мов програмування, HTML - мова не трансльована, але що інтерпретується. Це означає, що для виконання готового коду його не потрібно компілювати, вбудований в спеціальне програмне забезпечення, призначене для проглядання web-сторінок, інтерпретатор «компілює » код безпосередньо в процесі відкриття документа. При цьому, знайшовши в тексті помилку, така програма не видає відповідного попередження(якщо сторінка не містить вбудованих скриптів Java), а просто ігнорує всю «помилковий » рядок.
Це слідує мати у вигляді, складаючи HTML-програму, оскільки можна ненароком пропустити «непомітну » помилку і виявити її наявність вже тоді, коли сторінка буде опублікована в Web.
1.Короткі теоретичні відомості
1.1. “Голова” документа
Для оголошення назви сторінки служать команди:
<HEAD><TITLE> текст </TITLE></HEAD>
Назва - необов'язкова частина в документі, але окрім відображення в заголовку браузера імені сторінки, може включати необмежену кількість дуже корисних META-інструкцій. Звичайно вони розташовуються між двома першими мітками <head> і <title>. META-інструкція цей стандартний опис теми документа(для пошукових систем) або ж пряма вказівка для браузера. Приклад:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html"> - інструкція дає вказівку браузеру інтерпретувати документ як HTML-текст (кодування сучасні браузери розпізнають автоматично, тому використовувати в метах параметр charset більше не рекомендується.)
Простір між закриваючими мітками </title> і </head> часто використовується для зберігання операторів JavaScript и VBScript <scripts.htm> використовуючих глобальні змінні і функції, а також при упровадженні Каскадных таблиц стилей <style.htm> або для оголошення скажемо нестандартного розміру шрифту сторінки за допомогою тега <basefont size="5">
1.2. "Тіло" документа
Основний текст сторінки знаходиться після необов'язкового заголовка, між так само необов'язковими мітками: <BODY>...тіло сторінки...</BODY>.(Сучасні браузеры самі розпізнають де кінчається заголовок і починається тіло документа... але ми, дотримуватимемо традиції побудови web сторінок)
До того ж відкриваючу мітку можна використовувати для задання кольору або шпалер для сторінки :
<BODY BGCOLOR=GREEN> - зелений колір сторінки; або
<body background=Image.gif> для використовування як шпалери, фонового малюнка, наприклад з ім'ям Image.gif
Якщо сторінка займає місця більш ніж вікно браузера, то зсовуючи смугу прокрутки ви зсовуватимете так само і шпалери. Для того, щоб вони не уповзали використовуйте наступний синтаксис:
<body bgcolor="red" background="fon.jpg" bgproperties="fixed">
В даному прикладі ще до завантаження фонового зображення (fon.jpg) сторінка матиме червоний колір (підбирається в тон фонової картинки, адже зображення може мати великий час завантаження, а може і зовсім не завантажитись при поганому зв'язку.
1.3. Таблиці
Таблиці є найчудовішою особливістю HTML. Озброївшися невеликою кількістю знань, ви зможете використовувати їх, щоб створювати вражаюче різноманітність ефектів при проектуванні сторінок. Таблиця розміщується між тегами <table>...</table> . Наприклад:
<TABLEBORDER>
<TR>
<TH> Це
<TD> приклад
<TR>
<TD> звичайної
<TH> таблиці
</TABLE>
Це
приклад
звичайної
таблиці
<TR> -Новая рядок для необмеженого числа елементів таблиці.
< TH > -Ячейка для заголовків.
<TD> -Ячейка для звичайного тексту.
ROWSPAN - задає кількість осередків з'єднаних в колонку, COLSPAN - теж, в строчку. (З об'єднанням доведеться потренуватися: при об'єднанні, осередки, що залишилися(з'єднані в одну), повинні бути пропущені тобто якщо ви оголосили, що сполучаєте 6 осередків в рядку, наступний тег осередки вноситиме дані відразу в сьомий осередок цього рядка. Теж і з колонками.)
Складніший приклад:
<CENTER> <TABLE BORDER="15" BGCOLOR="YELLOW" width="75%">
<TR> <TH> rowspan="2">В першому рядку осередків в колонку з'єднано 2 осередки заголовків. В другому рядку таблиці тег першого осередку повинен бути пропущений.
<TD bgcolor="lime"> <img src="lego.gif">
<TD>3 осередок першого рядка
<TR> <TD colspan="2">Вторая рядок таблиці теж складається з трьох осередків, але оскільки тег першого осередку пропущений через оголошення в першому рядку, а 2 останні осередки теж з'єднані в одну, то в другому рядку використовується тільки одна мітка осередку.
</TABLE></CENTER>
Дає на екрані:
В першому рядку осередків в колонку з'єднано 2 осередки заголовків. В другому рядку таблиці тег першого осередку повинен бути пропущений.
3 осередок першого рядка
Другий рядок таблиці теж складається з трьох осередків, але оскільки тег першого осередку пропущений через оголошення в першому рядку, а 2 останні осередки теж з'єднані в одну, то в другому рядку використовується тільки одна мітка осередку.
"BGCOLOR" – кольор фона- можна використовувати як для таблиці в цілому,так і для кожного осередку окремо. Це відноситься і до можливості
використовування як фон графічного файлу. Наприклад: <TD BACKGROUND="Image.jpg"> Таблиці автоматично розтягуються залежно від вмісту, але також можливе і оголошення їх розмірів. WIDTH - ширина таблиці можна у відсотках, можна в пікселях. HEIGHT-висота.(теж і до осередків)
Також таблицею можуть управляти атрибути CELLPADDING="n" - визначає відступ від вмісту усередині осередків, і CELLSPACING="n" -ширина меж між осередками -все в пікселях. (Значення BORDER проте визначає, будуть межі присутній взагалі.)
1
2
3
4
Залишається додати, що таблиця як і картинки має можливість обтікання текстом (відносного вирівнювання) при використовуванні властивості ALIGN в теге TABLE з параметрами left, right Наприклад:
<table width="100" align="right" bgcolor="lime" cellpadding="20">
<tr> <td> 1 <th><font color="blue"> 2 </font>
<tr> <td bgcolor="red"> 3 <td> 4
</table>
1.4. Абзаци
На відміну від текстових документів переривання рядків в HTML-файлах не істотні. При прогляданні HTML-джерела в текстовому редакторі обривши рядки може відбуватися в будь-якому місці, але при перегляді в браузері це переривання буде проігноровано. Замість 68 пропусків браузер покаже в тексті тільки один, так що в цьому плані особливо можете не напружуватися, якщо тільки ви не використовуєте Авторський стиль.
Розбиття документа на складові задається за допомогою таблиць, міток форматування: <p> і </p> (від paragraf) а також <br> (від break). (Окрім цього можлива вставка примусових пропусків за допомогою команди: (no break space) - для кожного пропуску.)
Звичайний текст рекомендується розташовувати в абзацах:
<p> текст</p>
В цьому випадку він буде виділений новим рядком. (Закриваючий тег необов'язковий. У випадку якщо він пропущений, наступний абзац почнеться з наступною відкриваючою мітки <P>, проте його вживання іноді доцільне, наприклад для переривання вирівнювання)
Редагування тексту усередині абзацу може проводиться із застосуванням Логічних і Фізичних стилів форматування, причому Фізичні стилі для Чайника як бальзам на душу... Логічні - же вимагають чималого досвіду в обігу з різними браузерами.
Величезне значення в HTML має нагоду вирівнювання. Наприклад наступний рядок: <P ALIGN="CENTER"> Вирівнювання по центру</P> видасть на екрані :
Вирівнювання по центру
Для align допустимі значення: "сеnter", "right" і "justify"(рівномірний розподіл по всій довжині рядка. тільки для тексту). За умовчанням, браузер сам рівняє всі елементи по лівому краю. Вирівнювання може застосуються до тегам: <p>,<table>, до картинок і заголовків .
Так-же в HTML існує спеціальний тег вирівнювання: <сеnter>...</center> . Все що розташовано між цими мітками буде вирівняно так, як і по команді <p align="center">
1.5. Розмір шрифту
Для виділення заголовків в тексті існує мітка <Hрозмір>...заголовок...</H Hрозмір > (від head- голова). Де розмір заголовка міняється від 1 до 6 в порядку убування.(1- найкрупніший) Наприклад заголовок цього параграфа в HTML виглядає так:
<h4>розмір шрифта</h4>
Приведений тег виділяє свій заголовок відступом рядків. До нього можна застосовувати вирівнювання:
<h5 align="right">Заголовок п'ятого рівня</h5> (Закриваючий тег обов'язковий.)
Розмір шрифту в решті тексту задається за допомогою команд <font size="n"> ... </font> Теги можуть бути вкладені один в одного в нескінченній кількості. (не забувайте тільки їх правильно закривати!) Значення для n можуть лежати в межах від 1 до 7 за збільшенням розміру шрифту (протилежно розмірам заголовків) наприклад:
<p align="center"> <font size="5">Розмір шрифту = 5</font></p> .
Також можливе завдання розміру шрифту щодо шрифту "за умовчанням" у вигляді: size=+2 або size=-1. Звичайний «експлорерівський» розмір це 3, але у кожного користувача можуть бути і свої настройки. Розмір шрифту "за умовчанням" для конкретної сторінки можна задати тегом <basefont size=5> -розташованним в голові <head.htm> сторінки, для установки даного розміру відповідно рівному 5 (якщо у Вас Гігантоманія).
Для тексту знаходиться в кожному з осередків таблиці <table.htm> слід застосовувати власний тег <FONT>(це торкається і кольору <color.htm> шрифту)
Розміщення тексту буває і зовсім без міток, в цьому випадку стає неможливим його вірівнювання <p.htm> (що у принципі буває і непотрібне), а шрифт приймає розмір відповідний <font size="3">.
Кольор шрифта <color.htm> задається параметром color="кольор <colors.htm>" наприклад:
<font color=green size=+2>Размер шрифту = 5 </font>
видасть той же рядок що і в попередньому прикладі, тільки зелену. (кінцево якщо у Вас за умовчанням не вибрано 7 розмір шрифту ;-)
(Черговість в завданні параметрів будь-кого тега неважлива.)
1.6. З'єднання з іншими документами
Browser виділяє кольором або підкресленням ключові слова, що є зверненням до документа, або до частини документа позначеної «закладкой». Ця видима частина посилання - вказівник, що дозволяє натисненням однієї клавіші миші швидко переміщатися від одного документа до іншого. Прихована частина посилання -адресна, дає інструкцію самому браузеру і описує адресу ресурсу.
Наприклад: Ссылка на Main.htm <приклад> -це видима частина посилання. В текстовому редакторі дане посилання може виглядати так:
<а HREF="Main.htm">Ссылка на Main.htm</A>.
Тут ключові слова Посилання на Main.htm є гіперпосиланням на файл лежачий в тій же директорії, що і поточний документ. Посилання на файл NJStats.htm, що лежить у вкладеній теці AtlanticStates можна описати використовуючи слеш:
<а HREF="AtlanticStates/NJStats.htm">New Jersey</A>
Це так звані відносні посилання - даючі адреси ресурсів знаходяться на одному комп'ютері. Ви також можете використовувати абсолютне ім'я файлу (повна мережна адреса) ніби:
<а href="http://www.Atlantic.com/AtlanticStates/NJStats.htm"> New Jersey</a>
Посилання які ви даєте на документи знаходяться в мережі повинні бути абсолютними. Всі внутрішні посилання (забезпечуючі роботу вашої сторінки) повинні бути відносними, що б уникнути постійних виправлень сторінки при перенесенні її в іншу теку.
Гіперпосилання можна давати не тільки на зображення і текст, а абсолютно на будь-які файли. Наприклад якщо ви хочете розмістити у себе посилання на піратський архів з грою Doom2 що знаходиться в одній директорії з вашою сторінкою то пишіть приблизно так: <а href="doom2.zip">Doom2</a> В цьому випадку браузер відкриває вікно з питанням про збереження даного файлу на диску користувача.
1.7. Фрейми
Подібно таблицям <table.htm> фрейми ділять екран браузера на частини. Відмінність полягає в тому, що сторінка містить фрейми, взагалі не є сторінкою, оскільки не має тіла тобто тега BODY. В ній повинні розташовуються теги FRAMESET які створюють розмітку для завантаження на екран одночасно декількох WEB-сторінок. Ліва частина цього підручника що містить зміст є фреймом в який постійно завантажена самостійна сторінка -contents.htm Правий фрейм завантажується різними документами залежно від викликаного гіперпосилання. Розглянемо приклад фреймового документа:
<html><head>
<title>Main_document</title>
</head>
<FRAMESET COLS="300,*">
<FRAME SRC="aaa.htm" name="frame_a">
<FRAMESET ROWS="50%,*">
<FRAME SRC="bbb.htm" name="frame_b">
<FRAME SRC="ccc.htm" name="frame_c">
</FRAMESET>
</FRAMESET>
</html>
Схема фреймового документа
1фрейм
2фрейм
3фрейм
Перший тег <frameset cols="300,*"> ділить вікно браузера на дві колонки розмір першої з них 300 пікселів, розмір другий (*) - все місце, що залишилося. Тег <frame src="aaa.htm" name="frame_a"> містить посилання на документ який завантажуватиметься в перший фрейм і одночасно привласнює самому фрейму ім'я, по якому надалі можна буде завантажувати в нього інші сторінки, даючи на них гіперпосилання з параметром target="frame_a" Наприклад щоб дати посилання з frame_a на документи які повинні мінятися в frame_b потрібно розташувати в frame_a сторінку містить приблизно наступне:
<а href="EEE.htm" target="frame_b">Документ ЕЕЕ</a>
<а href="uuu.htm" target="frame_b">Документ UUU</a>
Тег <frameset rows="50%,*"> ділить другу колонку на дві подовжні смуги по 50% кожна. Якщо при складанні обох значень результат нерівний 100%, то браузер сам розрахує розміри фреймів пропорційно заданим значенням. Наступні два тега задають імена і URL для кожної з одержаних смуг по черзі. frameset вимагає закриваючого тега на відміну від frame. Якщо в теге frameset одночасно використовуються обидва параметри cols і rows то створюється проста фреймова сітка :
<frameset cols="33%,33%,33%"
rows="50%,50%">
<frame name="fr_1" src="a.htm">
<frame name="fr_2" src="b.htm">
<frame name="fr_3" src="c.htm">
<frame name="fr_4" src="d.htm">
<frame name="fr_5" src="e.htm">
<frame name="fr_6" src="f.htm">
</frameset>
Схема фреймовой сетки:
1фрейм
2фрейм
3фрейм
4фрейм
5фрейм
6фрейм
2. Постановка задачі
Використовуючи навички та знання з курсу «Веб дизайн», розробити та реалізувати сайт на вільну тему. Сайт повинен містити не менше десяти сторінок, які включають в себе використання фреймів, таблиць та основних тегів форматування шрифту.
3. Карта сайту
Головна сторінка
Історія компанії Subaru
Тест-драйв
- Сімейний автомобіль. Тест-драйв Subaru Legacy Wagon 3.0R
- Новий курс. Тест-драйв Subaru B9 Tribeca
- Майже спорткар. Тест-драйв Subaru Outback
Основні моделі
- Subaru Forester
- Subaru Impreza
- Subaru Legacy
- Subaru Outback
- Subaru Tribeca
Інші моделі
- Subaru Baja
- Subaru G3X Justy
- Subaru R1
- Subaru Traviq
4.Побудова і реалізація сайту
Головна сторінка index.html має такий вигляд.
Для опису сторінок, таких як: Тест драйв, Основні моделі та Інші моделі я використовував iFRAME.
Ресурси iFRAME знаходяться в корневому каталозі ../iFRAME/.
Приклад сторінки з iFRAME.
Ресурс iFRAME тест драйву Subaru Legacy
Підменю основного меню сторінки виглядає так.
Висновок
При виконані даної курсової роботи, я освоїв і закріпив практичні навички створення ї проектування веб сторінки.
Завдяки HTML мові, я запрограмував і створювати веб сторінку, яка містить сімнадцять сторінок, які включають в себе використання фреймів, таблиць та основних тегів форматування шрифту. Інформація для сторінки взята з різних сайтів, присвячених автомобільному концерну Subaru. На сайті ви можете знайти багато цікавої інформації, щодо цієї марки.
Список використаної літератури
http://netagent.chat.ru/html - “Первые шаги. Учебник по HTML”
http://netagent.chat.ru/html - “Практическое руководство по HTML”
Дмитрий Козловский. “Быстро и легко создаем Web-сайт”
http://subaruwrc.info
http://impreza-wrx-style.com/
http://www.drive.ru/
http://www.info-subaru.ru
Додаток А
HTML-код головної сторінки index.html
<html>
<head>
<title>Subaru</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr height="150">
<td colspan="2" align="left" style="padding-left:20" class="bg"><img src="images/shapka.gif"></td>
</tr>
<tr>
<td width="250" valign="top">
<a href="index.html" class="menu">Главная страница</a> <br>
<a href="history.html" class="menu">История Subaru</a> <br>
<a href="test.html" class="menu">Тест драйв</a> <br>
<a href="mainmod.html" class="menu">Основные модели</a> <br>
<a href="othermod.html" class="menu">Другие модели</a> <br>
</td>
<td valign="top" class="text">
<span class="title">Автомобили Subaru</span><br><br><br>
Добро пожаловать на сайт, посвящённый автомобилям Subaru. На сайте вы сможете
найти историю крупного промышленного концерна Fuji Heavy Industries Ltd. Да,
именно этого концерна, потому как Subaru является зарегестрированной
автомобильной маркой этого концерна.<br>
Также на сайте собрано несколько Тест-драйвов автомобилей Subaru. По моему мнению, чтобы узнать автомобиль лучше и получить о нём наиболее точные данные необходимо проверить
его самому. И узнать насколько соответствуют действительности те данные, которые указаны в паспорте автомобиля Subaru. Если у вас просто нет на это времени, то вы можете
просто прочитать результаты проводимых тест-драйвов и сделать соответствующие выводы для себя.<br>
Также на сайте вы найдёте описание большинства моделей Subaru. Вы сможете прочитать интересные статьи, которые помогут вам узнать об автомобилях Subaru много интерестных
фактов. Также вы сможете посмотреть их фотографии. <br><br>
<table align="center">
<tr>
<td><img src="images/03-8.jpg"></td>
<td><br><img src="images/03-5.jpg"></td>
<td><br><br><img src="images/03-10.jpg"></td>
</tr>
</table>
</td>
</tr>
<tr height="30">
<td colspan="2" align="right" class="copyright">Курсовая работа</td>
</tr>
</table>
</body>
</html>
HTML-код сторінки історії компанії Subaru history.html
<html>
<head>
<title>Subaru</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr height="150">
<td colspan="2" align="left" style="padding-left:20" class="bg"><img src="images/shapka.gif"></td>
</tr>
<tr>
<td width="250" valign="top">
<a href="index.html" class="menu">Главная страница</a> <br>
<a href="history.html" class="menu">История Subaru</a> <br>
<a href="test.html" class="menu">Тест драйв</a> <br>
<a href="mainmod.html" class="menu">Основные модели</a> <br>
<a href="othermod.html" class="menu">Другие модели</a> <br>
</td>
<td valign="top" class="text">
<span class="title">История Subaru</span>
<br><br><br>
Subaru – это автомобильная торговая марка крупного промышленного концерна Fuji Heavy Industries Ltd. Автомобили – далеко не единственная сфера деятельности FHI; кроме них, FHI занимается авиационной техникой, железнодорожным транспортом, (………текст історії……….). Отличительными чертами Subaru можно уверенно назвать такие фирменные разработки, применяющиеся теперь во всем мире, как полный привод (который до сих пор остается торговой маркой Subaru), оппозитные двигатели и монококовая конструкция кузова. Ну и, конечно же, высокое качество и незаурядность автомобилей, демонстрирующих отличные характеристики как в повседневном использовании, так и в автоспорте.<br>
</td>
</tr>
<tr height="30">
<td colspan="2" align="right" class="copyright">Курсовая работа</td>
</tr>
</table>
</body>
</html>
HTML-код сторінки тест драйву Subaru Legacy з використанням iFrame test.html
<html>
<head>
<title>Subaru</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr height="150">
<td colspan="2" align="left" style="padding-left:20" class="bg"><img src="images/shapka.gif"></td>
</tr>
<tr>
<td width="250" valign="top" nowrap>
<a href="index.html" class="menu">Главная страница</a> <br>
<a href="history.html" class="menu">История Subaru</a> <br>
<a href="test.html" class="menu">Тест драйв</a> <br>
<ul>
<li><a href="iframe/legacy.html" target="frame">Legacy</a></li>
<li><a href="iframe/outback.html" target="frame">Outback</a></li>
<li><a href="iframe/tribecab9.html" target="frame">Tribeca B9</a></li>
</ul>
<a href="mainmod.html" class="menu">Основные модели</a> <br>
<a href="othermod.html" class="menu">Другие модели</a> <br>
</td>
<td width="100%" valign="top" class="text">
<iframe height="100%" width="100%" frameborder="0" marginheight="0" marginwidth="0" name="frame" src="iframe/test_main.html" scrolling="auto"></iframe>
</td>
</tr>
<tr height="30">
<td colspan="2" align="right" class="copyright">Курсовая работа</td>
</tr>
</table>
</body>
</html>
HTML-код iFrame-сторінки тест драйву Subaru Legacy Legacy.html
<html>
<head>
<title>Subaru</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="../style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="text">
<span class="title">Антисемейные ценности - Тест-Драйв Subaru Legacy Wagon 3.0R</span><br><br><br>
<img align="left" src="../images/legacy.jpg"><br>
И это семейный автомобиль? <br>
(………текст тест драйву………)
Только… Если решите покатать семью на трехлитровой Legacy, запаситесь гигиеническими пакетиками – им самое место в сеточках на спинках передних сидений.<br>
Все же этот автомобиль исповедует явно не семейные ценности.<br>
</div>
</body>
</html>
Файл, котрий служить для опису стилів style.css
body {margin:0px; padding:0px;}
.bg
{
background: url(images/body.gif) repeat-x #FFFFFF
}
body
{
font-size: 12px; font-family: Verdana; text-align:justify;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #99CCFF;
scrollbar-shadow-color: #99CCFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-arrow-color: #99CCFF;
scrollbar-track-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
}
.text
{
font-size: 12px;
color: #585F4D;
text-decoration: none;
text-align:justify;
padding: 10px 20px 20px 20px;
}
.title {
font-weight: bold;
font-size: 12px;
color: #585F4D;
}
.copyright
{
font-size: 10px;
padding: 0px 0px 0px 20px;
}
img
16.05.2018 23:05-
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора