1. Розробка елементів програми
Безпосередньо роботу над створення сайту почала з планування робочої області у програмі Adobe Dreamweaver. Так робочу зону було розбито на 2 зони. Це дало змогу краще орієнтуватися у робочому просторі та слідкувати за ергономічними та іншими нормами майбутнього сайту. Кожна зона має своє конкретне місце і призначення. Крім того було створено файл index.html який є основним.
1.1 Підготовка графічних елементів
Далі у програмі Adobe Photoshop я створила графічні елементи мого майбутнього сайту: задній фон, шапку сайту, рамку для основного тексту та інше.
На шапці сайту або як її ще називають header будуть розміщенні посилання для переходу по основним розділам (Рис.1.1.)
Рис. 1.1. Шапка сайту.
Коли всі елементи сайту були підготовлені, приступила до безпосередньої верстки.
1.2 Створення розділів сайту
HTML-документ є текст, в який окрім звичайного тексту включені спеціальні послідовності символів, — теги. Тег починається символом < і закінчується символом >. Теги використовуються програмами відображення HTML-документів для форматування тексту у вікні перегляду (самі теги не відображуються).(Рис. 1. 2.)
Рис. 1.2. Html код сторінки.
Набирається HTML-текст звичайним способом. Теги можна набирати як прописними, так і рядковими буквами. Проте, щоб краще була видна структура документа, рекомендується записувати всі теги рядковими (великими) буквами. Наступне, на що треба звернути увагу — програми відображення HTML-документів ігнорують "зайві" пропуски і інші "невидимі" символи (табуляція, новий рядок). Це означає, що для того, щоб фрагмент документа починався з нового рядка, в кінці попереднього рядка треба поставити тег <hr>, а щоб між рядками тексту з'явився порожній рядок, в HTML-текст потрібно вставити два тега <hr> підряд.
Працюючи з HTML-редактором в програмі Adobe Dreamweaver, в процесі набору HTML-тексту можна побачити, як виглядатиме текст, що набирається. Для цього треба з панелі інструментів слід вибрати команду «Просмотр в браузере» або гарячою клавішею F12, що дозволить продивитися документ у браузері Google Chrome.
Далі поетапно створила всі розділи сайту та задала переходи між ними.
1.3 Розробка завдання
Завдання:
Напишите сценарий, который позволяет выбрать фоновое изображение для таблицы, содержащей рисунок. Изменение фона выполняется выбором переключателя цвета из таблицы, содержащей список заливок фона. Требуется предусмотреть возможность изменения толщины рамки таблицы для того чтобы создать выпуклость изображения.
Код :
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>КУРСОВАЯ</title>
<link href="my.css" type="text/css" rel="stylesheet">
<script>
function arr(){
if (document.getElementById('bord').value!='') document.getElementById('table1').border=document.
</script>
</head>
<body style="margin:0 auto;width:900px;padding:0;background-color:#d2d2d2">
<table border="0" cellspacing="0" cellpadding="0" width="900" style="background-color:#383838" >
<tr>
<td >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="320" height="240">
<param name="movie" value="music.swf">
<param name="quality" value="high">
<embed align="right" src="music.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="60" height="35"></embed>
</object>
</td></tr></table>
<div style="clear:both"></div>
<div id="header" align="center" style="background-color:#383838;margin:0 auto; padding:0">
<a href="index2.html" ><img src="nav_index.png" style="border:0;margin-top:-10px"></a>
<a href="task.html"><img src="nav_task.png" style="border:0;margin-top:-10px"></a>
<a href="gallery.html"><img src="nav_gallery.png" style="border:0;margin-top:-10px"></a>
<a href="author.html" ><img src="nav_author.png" style="border:0;margin-top:-10px"></a>
</div>
<div style="clear:both"></div>
<div id="content">
<p>Задание:</p>
<p>Напишите сценарий, который позволяет выбрать фоновое изображение для таблицы, содержащей рисунок. Изменение фона выполняется выбором переключателя цвета из таблицы,содержащей список заливок фона. Требуется предусмотреть возможность изменения толщины рамки таблицы для того чтобы создать выпуклость изображения.</p>
<br>
<form>
Введите толищину рамки в пикселях: <input type="text" id="bord"><br>
Выбирите номер изображения для фон таблицы: <select id="img1">
<option value="">Нет</option>
<option value="images/1.jpg">1</option>
<option value="images/2.jpg">2</option>
<option value="images/3.jpg">3</option>
</select>
<br>
Выбирите цвет фона таблицы: <select id="img2">
<option value="">Нет</option>
<option value="#fff">Белый</option>
<option value="#000">Черный</option>
<option value="#383838">Темно-серый</option>
</select>
<br>
<input type="button" value="Выбрать" onClick="arr()">
<input type="button" value="Сбросить" onClick="res()">
</form>
<br>
<table id="table1" border="0" cellspacing="0" cellpadding="0" width="100%" height="100" style="background-color:#383838" >
<tr>
<td id="td1" align="center" valign="center"><span style="color:#fff">Чередниченко Валерия</span>
</td>
</tr>
</table>
</div>
Рис. 1.3. Вигляд завдання