Під час відображення веб-сторінок браузер розміщує елементи на екрані один за одним у тому порядку, в якому вони записані у HTML-документі. Для позиціювання елементів розроблено спеціальні засоби мови HTML, проте часто для цього використовують таблиці. На веб-сторінці створюють таблицю без рамок і у її комірки поміщають різні об'єкти.
Розмістимо назви класів по діагоналі так, як це показано в табл. 2.6, але самої таблиці на веб-сторінці відображати не будемо.
Таблиця 5. Таблиця, в якій інформація розміщується по діагоналі
<HTML>
<TITLE>Приклад позиціювання</TITLE>
<BODY>
<TABLE>
<TR>
<TH>Групи КТ</ТН>
<TD></TD><TD></TD><TD></TD><TD></TD><TD></TD></TR>
<TR>
<TD></TD><TD>1КТ11</TD><TD></TD><TD></TD><TD></TD><TD></TD>
</TR>
<TR>
<TD></TD><TD></TD><TD>2КТ11</TD><TD></TD><TD></TD><TD></TD>
</TR>
<TR>
<TD></TD><TD></TD><TD></TD><TD>1КТ12</TD><TD></TD><TD></TD>
</TR>
<TR>
<TD></TD><TD></TD><TD></TD><TD></TD><TD>2КТ12</TD><TD></TD>
</TR>
<TR>
<TD></TD><TD></TD><TD></TD><TD></TD><TD></TD><TD>1КТ13</TD>
</TR>
<TR>
<TD></TD><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD><TD>1КТ13</TD>
</TR>
</TABLE>
</BODY>
</HTML>
На рис.6 показано, який вигляд має цей HTML-документ у вікні браузера.
Рис. 6. Позиціювання елементів на веб-сторінці за допомогою таблиці
Комірки таблиці можна заповнювати не лише текстом, а й зображеннями, іншими таблицями та рухомими рядками. Текст або зображення всередині комірки може бути гіперпосиланням.
Наприклад:
<TD><A HREF="lib.html">2КТ13</A></TD>
Вправа 2.
Розробимо веб-сайт, на головній сторінці якого в кутах уявного трикутника будуть розміщені три гіперпосилання на сторінки про навчальні заклади. Кожне посилання пов'язане з файлом, в якому міститься інформація про навчальний заклад.
1. Визначте структуру головної сторінки сайту за допомогою табл.6.
Таблиця 6. Структурна таблиця головної сторінки сайту
НОВОВОЛИНСЬКИЙ ЕЛЕКТРОМЕХАНІЧНИЙ КОЛЕДЖ
| Спеціальності | Обслуговування комп’ютерних систем і мереж |
| Економіка підприємства | |
| Монтаж і експлуатація електроустаткування підприємств і цивільних споруд | |
| Обслуговування та ремонт електропобутової техніки | |
| Монтаж і експлуатація електроустаткування підприємств і цивільних споруд |
2. Підготуйте текстове наповнення для веб-сторінок, які пов'язані гіперпосиланнями з головною сторінкою.
• Веб-сторінка про спеціальність КТ.
• Веб-сторінка про спеціальність ЕП.
• Веб-сторінка про спеціальність Е.
• Веб-сторінка про спеціальність ЕМ.
• Веб-сторінка про спеціальність ТМ.
3. Розробіть HTML-код відповідних сторінок, скориставшись текстовим редактором Блокнот (Notepad).
4. Запишіть HTML-код для веб-сторінки про спеціальність КТ і збережіть цей файл як 1.html.
<HTML>
<TITLE>Спеціальність КТ</TITLE>
<BODY BGCOLOR=CYAN><BASEFONT SIZE=6 COLOR=olive>
<Н1 ALIGN=CENTER><FONT FACE="Monotype Corsiva">
Обслуговування комп’ютерних систем та мереж</FONT></Н1>
<Р>Студенти цієї спеціальності …..</Р>
</BODY>
</HTML>
5. Запишіть HTML-код для веб-сторінки про спеціальність ЕП і збережіть цей файл як 2.html.
<HTML>
<TITLE>Спеціальність ЕП</TITLE>
<BODY BGCOLOR=CYAN><BASEFONT SIZE=6 COLOR=olive>
<H1 ALIGN=CENTER><FONT FACE="Monotype Corsiva">
Економіка підприємства</FONT></Н1>
<P>Студенти цієї спеціальності …</P>
</BODY>
</HTML>
6. Запишіть HTML-код для веб-сторінки про спеціальність Е і збережіть цей файл як 3.html.
<HTML>
<TITLE>Спеціальність Е</TITLE>
<BODY BGCOLOR=CYAN><BASEFONT SIZE=6 COLOR=olive>
<H1 ALIGN=CENTER><FONT FACE="Monotype Corsiva">
Монтаж і експлуатація електроустаткування підприємств і цивільних споруд</FONT></Н1>
<P>Студенти цієї спеціальності …</P>
</BODY>
</HTML>
7. Запишіть HTML-код для веб-сторінки про спеціальність ЕМ і збережіть цей файл як 4.html (аналогічно як попередні)
8. Запишіть HTML-код для веб-сторінки про спеціальність ТМ і збережіть цей файл як 5.html.
9. Запишіть HTML-код для головної сторінки та збережіть цей файл як index.html.
Для позиціювання гіперпосилань на головній сторінці використайте табл.6 її межі мають бути невидимі.
На рис.7 показано головну сторінку сайту, на якій міститься інформація про спеціальності НЕМК.
Рис. 7. Головна сторінка сайту, на якій міститься інформація про спеціальності НЕМК.
10. Відкрийте у вікні браузера головну сторінку створеного веб-сайту, клацніть одне з гіперпосилань, і на екрані відобразиться інформація про вибраний спеціальність.
11. Клацніть кнопку Назад на панелі інструментів браузера. Після цього знову відобразиться головна сторінка, на якій можна вибрати інше гіперпосилання.
Дата добавления: 2015-07-11; просмотров: 376 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Колірне оформлення таблиць | | | Фрейми, їхні теги й атрибути |