Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

Разработка WEB / Лабораторная работа 2 Dreamweaver / Работаем над дизайном

.pdf
Скачиваний:
28
Добавлен:
30.05.2015
Размер:
535.61 Кб
Скачать

веб-студия

SEVIDI

разработка веб-сайтов и уроки по созданию сайтов

Урок 12

Работаем над дизайном

Мы с вами на одном из уроков познакомились с таблицами. Теперь мы умеем их создавать и форматировать, объединять и разъединять ячейки, вводить и форматировать текст. Одним словом, получили минимальный набор знаний необходимый для использования его в дизайнерских целях. Вы спросите, причем здесь таблицы и дизайн? А при том, что сегодня ни одна web-страница не создается без использования таблиц. Табличный дизайн позволяет создавать страницы, больше напоминающие печатные документы, например газеты. Они включают в себя несколько колонок с текстом, множество графических иллюстраций, линеек, и прочего к чему привыкли дизайнеры полиграфисты.

Рассказывать о табличном web-дизайне особенно нечего. Веб-страница создается на основе очень большой таблицы, в разные ячейки которой помещаются заголовок или "шапка" сайта, набор гиперссылок или полоса навигации, сведения об авторских правах и основное содержимое.

И так применим на практике то, что изучили до этого. Создаем таблицу.

 

 

 

 

 

Sevidi

 

 

 

 

 

 

ɉɪɢɦɟɧɢɦ ɤɥɚɫɫɢɱɟɫɤɭɸ ɫɯɟɦɭ ɬɚɛɥɢɱɧɨɝɨ ɞɢɡɚɣɧɚ Ɉɛɴɟɞɢɧɢɦ ɜɟɪɯɧɸɸ ɢ ɧɢɠɧɸɸ ɫɬɪɨɱɤɢ ɜ ɨɞɧɭ ɹɱɟɣɤɭ

 

 

 

я

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

д

 

 

 

 

 

 

 

 

 

у

 

 

Ɍɟɩɟɪɶ ɩɪɨɢɡɜɟɞɟɦ ɪɚɡɦɟɬɤɭ ɧɚɲɟɣ ɬɚɛɥɢɰɵ ɗɬɨ ɬɨɠɟ ɦɵ ɫ ɜɚɦɢ ɭɦɟɟɦ Ɂɚɞɚɞɢɦ ɲɢɪɢɧɭ ɬɚɛɥɢɰɵ ɩɢɤɫɟɥɟɣ ɲɢɪɢɧɭ ɫɪɟɞɧɢɯ ɹɱɟɟɤи

 

 

 

т

 

 

 

ɢ ɩɢɤɫɟɥɟɣ ɫɨɨɬɜɟɬɫɬɜɟɧɧɨ ɇɟ ɡɚɛɭɞɟɦ ɜɜɟɫɬɢ ɚɬɪɢɛɭɬɵ ɞɥɹ ɜɵɪɚɜɧɢɜɚɧɢɹ ɬɟɤɫɬɚ ɬɚɛɥɢɰɵ +70/ ɤɨɞ ɫɬɪɚɧɢɰɵ ɛɭɞɟɬ ɜɵɝɥɹɞɟɬɶ ɬɚɤ

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

е

 

 

 

 

В

 

 

 

 

1

 

 

 

 

 

 

 

яSevidi

 

 

 

 

 

 

и

 

 

 

 

 

д

 

 

 

 

 

у

 

 

Таблица примет примерно такой вид.

 

 

т

 

 

 

 

 

 

 

 

 

 

 

 

 

-

 

 

 

 

 

 

б

 

 

 

 

 

е

Здесьсбудет заголовок или шапка сайта

Здесь будет набор гиперссылок

 

 

 

 

 

для перехода между

Здесь будет полезное содержимое сайта

 

страницами сайта

В

 

 

 

 

 

Сведения о правах разработчика сайта

И так схема дизайна нашего сайта готова. Эту схему мы применим, как к главной, так и к остальным страницам нашего сайта. Наполним ячейки сайта содержимым.

Для заголовка сайта выберем картинку из знакомой нам папки images. Для этого установим курсор в строке таблицы, где будет размещен заголовок сайта и нажмем кнопку Изображение вкладки Общее панели Вставить.

Откроется диалоговое окно Выбрать источник изображения. В поле Папка найдем папку abc ->images, и выберем рисунок , нажимаем кнопку ОК. Откроется еще одно диалоговое окно Атрибуты доступности тега изображения. И здесь жмем ОК.

2

 

 

 

 

яSevidi

 

 

 

и

В окне веб-браузера это будет выглядеть ТАК.

 

д

 

у

 

 

 

 

 

Теперь давайте создадим фон в ячейке, где мы собираем я размещать гиперссылки на другие страницы сайта.

 

т

 

 

 

Для этого опять производим теже действия, что и вспервом случае. Устанавливаем текстовой курсор в поле ячейки, а дальше действуем в

несколько ином порядке. Имя фонового изо ражения-ячейки таблицы задается в диалоговом окне Выбрать исходный файл изображения,

которое мы можем открыть в поле ввода Фон, который служит для задания интернет-адреса фонового изображения ячейки, панели Cвойства .

В папке abc->images находим рисунок abc1.gifб, нажимаем ОК.

 

 

 

е

 

 

 

 

В

 

 

 

 

 

 

 

 

 

3

 

 

 

 

яSevidi

 

 

 

и

 

 

д

 

 

у

 

 

В окне веб-браузера это будет выглядеть ТАК.

т

 

 

 

 

-

 

 

 

С дизайном страницы мы разобрались. Теперь пришло время заняться наполнением главной страницы. Перенесем текст с cозданной нами

стриницы "Компания АВС", на вновь созданную главнуюстраницу сайта. Оотформатируем текст и рисунок на вновь созданной веб-странице. Как это делается, мы знаем. Приступаем к творческой работе.

 

HTML-код страницы после форматирования

 

 

б

<html>

е

<head>

 

 

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Компания АВС</title>

В

 

<style type="text/css">

 

 

<!--

 

 

.стиль2 {

 

 

color: #FF0000

 

 

}

.стиль3 { color: #FFFFFF; font: italic;

}

body,td,th {

font-family: Times New Roman, Times, serif; font-size: 16px;

color: #000000;

}

p { padding-left:5px;

}

h1 {

font-size: 36px; color: #FF0000;

}

--> </style> </head>

4

В окне веб-браузера это будет выглядеть ТАК.

<body>

 

<table width="1000" height="600" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

 

<td colspan="2" width="1000" height="100"><img src="images/abc_top.gif" width="1000" height="100"></td>

</tr>

 

<tr>

 

<td width="200" height="450" align="center" background="images/abc1.gif">Здесь будет набор гиперссылок для перехода

между страницами сайта</td>

 

<td width="700" valign="top">

 

<h1 align="center" class="стиль2">Компания АВС </h1>

 

<p><b><img src="images/abc.gif" width="41" height="41">Компания АВС — поставки электронной техники ведущих мировых

производителей.</b></p>

 

<p>В компании АВС вы всегда найдете:</p>

 

<ul>

 

<li>телевизоры</li>

 

<li>видиомагнотофоны </li>

 

<li>видеоплейеры</li>

 

<li>музыкальные центры</li>

 

<li>компьютеры</li>

 

<li>принтеры и сканеры</li>

 

<li>и другие товары.</li>

 

</ul>

 

<p><i>Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта</i>.</p>

<p>Компания оказывает <a href="122.html" target="_blank">услуги</a> по обслуживанию продаваемой электоники.</p>

<p><a href="mailto:abc@mail.ru" target="_blank">Пишите сюда</a>.</p>

</td>

 

</tr>

 

<tr>

Sevidi

<td height="50" colspan="2" align="center" bgcolor="#0000FF"><p class="стиль3"> ©Компания АВС</p></td> </tr>

</table>

</body>

</html>

Создадим вторую страничку сайта —Услуги. Для этого создадим новый файл servis.html. Перенесем в него HTML-код первой странички, за исключение текста и создадим в ней первую гиперссылку на Главную страницу сайта. В ячейке, где будут располагаться гиперссылки, пишем слово Главная. Далее выделяем его и открываем диалоговое окно Выбрать файл поля Ссылка панели Свойства. Находим файл, в котором

задана главная страница, в нашем случае это файл index.html и нажимаем ОК. В чейке справа пишем заголовок страницы "Услуги компании"

и переносим на страницу текст с ранее созданной страницы. Cохран м стран цу.

 

я

В окне веб-браузера это будет выглядеть ТАК.

и

 

Создадим третью страницу сайта — Ссылки. Для этого создадим новый файл ssilki.html. Перенесем в него HTML-код первой странички, за

 

 

 

 

 

д

исключение текста и создадим в ней первую гиперссылку на Главн ю страницу сайта и вторую на вторую страницу сайта — Услуги.

HTML-код страницы должен быть такой:

 

 

у

 

 

т

 

 

 

 

 

 

<html>

 

 

 

с

 

 

 

 

-

 

<head>

 

 

 

 

 

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Ссылки</title>

 

 

б

 

<style type="text/css">

 

е

 

 

<!--

 

 

 

.стиль1 {

В

 

 

 

color: #0000FF

 

 

 

}

 

 

 

body,td,th {

font-family: Times New Roman, Times, serif; font-size: 16px;

color: #000000;

}

p { padding-left:5px;

}

h1 {

font-size: 36px; color: #FF0000;

}

.стиль3 { color: #FFFFFF; font: italic;

}

.стиль4 { color: #770000;

font-weight: bold;

}

--> </style>

5

</head>

<body>

<table width="1000" height="600" border="0" align="center" cellpadding="0" cellspacing="0"> <tr>

<td colspan="2" width="1000" height="100"><img src="images/abc_top.gif" width="1000" height="100"></td> </tr>

<tr>

<td width="200" height="450" background="images/abc1.gif" valign="top">   <a href="index.html" target="_blank" class="стиль4">Главная</a><br>

  <a href="abc_serv.html" target="_blank" class="стиль4">Услуги</a> </td> <td width="700" valign="top">

<h1 align="center" class="стиль1">Ссылки</h1>

<p>Компания поддерживает отношения со следующими Интернет-ресурсами:</p> <ul>

<li><a href="http://www/" target="_blank">Веб-студией Sevidi</a></li> <li><a href="http://localhost/">Сайтом о сайтах</a> </li>

</ul>

</td>

</tr>

<tr>

<td height="50" colspan="2" align="center" bgcolor="#0000FF"><p class="стиль3"> ©Компания АВС</p></td> </tr>

</table>

</body>

</html>

В окне веб-браузера это будет выглядеть ТАК.

Можете создать еще несколько страниц, для закрепления пройденного материала и создать на этих страницах гиперссылки. А мы вернемся к главной странице нашего сайта и создадим там тоже гиперссылки или маленькое меню.

Напишем в ячейке слева два слова: Главная, Услуги, Ссылки. Выделим их в порядке очередности и создадим ссылки на соответствующие страницы.

HTML-код страницы должен быть такой:

 

 

 

 

 

Sevidi

<html>

 

 

 

 

 

 

<head>

 

 

 

 

 

 

 

<meta http-equiv="Content-Type" content="text/html; charset=windowsя-1251">

<title>Компания АВС</title>

 

 

 

 

 

и

 

<style type="text/css">

 

 

 

 

 

 

<!--

 

 

 

 

 

 

 

 

 

 

д

 

.стиль2 {

 

 

 

 

 

color: #FF0000

 

 

 

 

 

}

 

 

 

у

 

 

body,td,th {

 

 

 

 

 

font-family: Times New Roman, Times, serif;

т

 

 

 

font-size: 16px;

 

 

 

 

 

 

 

 

с

 

 

 

color: #000000;

 

 

 

 

 

}

 

 

 

 

 

p {

 

 

-

 

 

 

padding-left:5px;

 

б

 

 

 

 

}

 

 

 

 

 

h1 {

е

 

 

 

 

 

font-size: 36px;

 

 

 

 

 

color: #FF0000;

В

 

 

 

 

 

 

}

 

 

 

 

 

 

.стиль3 {

 

 

 

 

 

 

color: #FFFFFF;

 

 

 

 

 

 

 

font: italic;

 

 

 

 

 

 

 

}

 

 

 

 

 

 

 

.стиль4 {

 

 

 

 

 

 

 

color: #770000;

 

 

 

 

 

 

 

font-weight: bold;

 

 

 

 

 

 

 

}

 

 

 

 

 

 

 

--> </style> </head>

<body>

<table width="1000" height="600" border="0" align="center" cellpadding="0" cellspacing="0"> <tr>

<td colspan="2" width="1000" height="100"><img src="images/abc_top.gif" width="1000" height="100"></td> </tr>

<tr>

<td width="200" height="450" background="images/abc1.gif" valign="top" > <a href="index.html" class="стиль4">Главная</a><br>

<a href="abc_serv.html" target="_blank" class="стиль4">Услуги</a><br> <a href="ssilki.html" target="_blank" class="стиль4">Ссылки</a></td> <td width="700" valign="top">

<h1 align="center" class="стиль2">Компания АВС </h1>

<p><b><img src="images/abc.gif" width="41" height="41">Компания АВС — поставки электронной техники ведущих мировых

6

производителей.</b></p>

<p>В компании АВС вы всегда найдете:</p> <ul>

<li>телевизоры</li> <li>видиомагнотофоны </li> <li>видеоплейеры</li> <li>музыкальные центры</li> <li>компьютеры</li> <li>принтеры и сканеры</li> <li>и другие товары.</li> </ul>

<p><i>Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта</i>.</p> <p>Компания оказывает <a href="abc_serv.html" target="_blank">услуги</a> по обслуживанию продаваемой электоники.</p> <p><a href="mailto:abc@mail.ru" target="_blank">Пишите сюда</a>.</p>

</td>

</tr>

<tr>

<td height="50" colspan="2" align="center" bgcolor="#0000FF"><p class="стиль3"> ©Компания АВС</p></td> </tr>

</table>

</body>

</html>

В окне веб-браузера это будет выглядеть ТАК.

И так сайт создан. Для того чтобы его увидели, сайт необходимо опубликовать на веб-сервере. Мы уже занимались этим на первом цикле

занятий. Регистрация и публикация сайта проходила вручную. А теперь мы это сделаем с помощью Dreamweaver.

 

 

 

 

 

яSevidi

 

 

 

 

и

 

 

 

д

 

 

 

у

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

е

 

 

 

 

В

 

 

 

 

 

7

Здесь будет набор гиперссылок для перехода Здесь будет полезное содержимое сайта между страницами сайта

 

 

 

 

 

я

 

 

 

 

и

 

 

Сведения о правах разработчикаSevidiсайта

 

 

 

д

 

 

 

у

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

е

 

 

 

 

В

 

 

 

 

 

8

Здесь будет набор гиперссылок для перехода Здесь будет полезное содержимое сайта между страницами сайта

 

 

 

 

 

я

 

 

 

 

и

 

 

Сведения о правах разработчикаSevidiсайта

 

 

 

д

 

 

 

у

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

е

 

 

 

 

В

 

 

 

 

 

9

10
©КомпанияияАВС
уд т Веб
информации о наличииSevidiтовара перейдите в соответствующий раздел сайта.
обслуживанию продаваемой электоники.

Компания АВС

Компания АВС — поставки электронной техники ведущих мировых производителей.

Здесь будет набор гиперссылок для перехода между страницами сайта

В компании АВС вы всегда найдете:

телевизоры

видиомагнотофоны

видеоплейеры

музыкальные центры

компьютеры

принтеры и сканеры и другие товары.

Для получения дополнительной

Компания оказывает услуги по

Пишите сюда.