Міністерство освіти і науки, молоді та спорту України Національний університет «Львівська політехніка» Кафедра ЕОМ
Звіт до лабораторної роботи №7 з дисципліни «Глобальні інформаційні мережі» на тему: «Розробка веб-сайту для транспортної компанії» Львів – 2012 Тема: Створення індивідуального веб-сайту Мета: Ознайомитись з засобами html і css та створити веб-сайт . Під час розробки даного веб-сайту я створив декілька сторінок в текстовому редакторі Notepad++.exe з допомогою HTML 4.0 i єдиною для всіх сторінок таблицею стилів(CSS). Зображення використані при створенні сайту були оброблені за допомогою програми Adobe Photoshop. Я використав табличну верстку сторінки.
Скріншот сторінки Код сторінки <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/index.css" type="text/css"> <title>Transportation Co</title> </head> <body> <table class="gen_tbl" cellpadding="0" cellspacing="0"> <tr> <td> <table class="height"> <tr> <td id="st1"><img src="img/index/globus.png"></td> <td id="st2"><a class="logotyp">Transportation</a> <a class="logotyp2">Co.</a></td> <td class="vkladky" ><a class="vkladky" href="index.html">Home</a></td> <td class="vkladky" >/</td> <td class="vkladky" ><a class="vkladky" href=#>Site map </td> <td class="vkladky" >/</td> <td class="vkladky" ><a class="vkladky" href=#>Contacts</td> </tr> </table> </td> </tr> <tr> <td> <table class="btn_tbl" cellpadding="0" cellspacing="0"> <tr class="buttons"> <td id="at1"><a class=buttons href="index.html">Home</a></td> <td id="at2"><a class=buttons href=#>Services</a></td> <td id="at2"><a class=buttons href="schedule.html">Schedule</a></td> <td id="at3"><a class=buttons href=#>Rout maps</a></td> <td id="at4"><a class=buttons href=#>Careers</a></td> <td id="at5"><a class=buttons href="about_me.html">About me</a></td> </tr> </table> </td> </tr> <tr > <td> <table cellpadding="0" cellspacing="0"> <!--AIR--> <tr> <td width="245"> <table class="air_pic"> <tr> <td><h1 class=air>AIR</h1></td> </tr> <tr> <td class=transport>TRANSPORT</td> </tr> <tr> <td class=learn><a class=learn href=#>learn more <img src="img/index/strilka.png"></a></td> </tr> </table> </td> <!--SEA--> <td> <table class="sea_pic"> <tr> <td><h1 class=air>SEA</h1></td> </tr> <tr> <td class=transport>SHIPPING</td> </tr> <tr> <td class=learn><a class=learn href=#>learn more <img src="img/index/strilka.png"></a></td> </tr> </table> </td> <!--TRUCKING--> <td> <table class="truck_pic"> <tr> <td><h1 class="air">TRUCKING</h1></td> </tr> <tr> <td class=transport>DELIVERY</td> </tr> <tr> <td class=learn><a class=learn href=#> learn more <img src="img/index/strilka.png"></a></td> </tr> </td> </table> </tr> </table> </td> </tr> <tr> <td> <table> <!--transportation security--> <tr> <td> <table class="size2"> <tr> <td class=rec><img src="img/index/rec.png"> Transportation security</td> </tr> <tr> <td class=text>Sit amet consecteturconse ctetur adipis adipisicing elitmod eiei us mod tempor incididunt vlabore et dolore xer itation ullamco.</td> </tr> <tr> <td class=text>Sit amet conse ctetur adipis icing eiei us mod tempor incididunt vlabore et dolore exer itation ullamco</td> </tr> <tr> <td height=30><a class=read href=#> <img border=0 src="img/index/play.png"> read more</td> </tr> </table> </td> <!--online documents--> <td> <table class="tmp1"> <tr> <td class=rec><img src="img/index/rec.png"> Online Documents</td> </tr> <tr> <td class="text"><div>Sit amet consectetur adipi sicing eli eius mod tempur incididunt vlabore et dolo</div></td> </tr> <tr> <td class="space"><a class=read2 href=#><img src="img/index/plays.png" align=bottom> Lorem ipsum dolor sit amet once cte</a></td> </tr> <tr> <td class="space"><a class=read2 href=#><img src="img/index/plays.png" align=bottom> Do eiusmod tempor incididunt abore</a></td> </tr> <tr> <td class="space"><a class=read2 href=#><img src="img/index/plays.png" align=bottom> Citation ullamco laboris liquip ex</a></td> </tr> <tr> <td class="space"><a class=read href=#> <img src="img/index/play.png"> read more</td> </tr> </table> </td> <!--Representatives--> <td> <table class="size1"> <tr> <td class=rec><img src="img/index/rec.png"> Representatives</td> </tr> <tr> <td class=text>Sit amet consectetur adipisicing eiusmod tempor incididunt vlabore et dolore ex itation ullamco.Sit amet consectetur adipisicing elit eiusmod tempor incididunt vlabore et tempor incididunt vlab ore.</td> </tr> <tr> <td class=text>Sit amet consectetur adipisicing elit eiusmod tempor incididunt vlab ore et do lore itation ullamcolaboris liquip ex.</td> </tr> <tr> <td><a class=read href=#> <img src="img/index/play.png"> read more</a></td> </tr> </table> </td> </tr> </table> <tr> <td> <table> <!--transportation research--> <tr> <td><div class=bord> <table class="bord_pic"> <tr> <td class=rec><img src="img/index/rec.png"> Transportation Research</td> </tr> <tr> <td class=text>Sit amet consectetur adipisicing elitmod tempor incididunt vlabore et dolore xer itation ullamco.</td> </tr> <tr> <td class=text>Sit amet conse ctetur adipis icing eiei us mod tempor incididunt vlabore et dolore exer itation ullamco</td> </tr> <tr> <td><a class=read href=#> <img src="img/index/play.png"> read more</td> </tr> </table></div> </td> <!--Services Overview--> <td> <table class="size"> <tr> <td class=rec><img src="img/index/rec.png"> Services Overview</td> </tr> <tr> <td class=text2>Sed ut percpiticias unde omnis iste natus error sit voluptatem accusantium doloremque tium totam rem.</td> </tr> <tr> <td class=text2>Sed ut percpiticias unde omnis iste natus error sit voluptatem accusantium doloremque tium totam rem aperiam, aeque ipsa quea ab illo inventore veritatis at quasi architec to beataeo vitae dicta sunt explicabo. Nemo anim ipsam volumptatem</a></td> </tr> <tr> <td><img style="padding-left:10px;padding-right:10px;" src="img/index/man.png" align="left"><span class=read2> Sed ut percpiticias unde omnis iste natus error sit volupa tem accusantium doloremque tium totam rem.</span></a> <br><span class=text>Sed ut percpiticias unde omnis iste natus error sit volupa tem accusantium doloremque tium totam rem.</span><br> <span><a class=read href=#> <img src="img/index/play.png"> read more</span></td> </tr> </table> </td> </tr> </table> </td> </tr> <!--Footer--> <tr> <td class="bgc"> <table class=bottombtn> <tr> <td id="it1"><a class="bottombtn" href=#>Home</a></td> <td id="it3">|</td> <td id="it2"><a class="bottombtn" href=#>Services</a></td> <td id="it3">|</td> <td id="it2"><a class="bottombtn" href=#>Shedule</a></td> <td id="it3">|</td> <td id="it4"><a class="bottombtn" href=#>Rout maps</a></td> <td id="it3">|</td> <td id="it2"><a class="bottombtn" href=#>Careers</a></td> <td id="it3">|</td> <td id="it5"><a class="bottombtn" href=#>Contact us</a></td> </tr> </table> <div class="privacy">Developer [ім’я автора приховано] 2011<a class="privacy" href=#>Design Studio</a> |<a class="privacy" href=#> Terms Of Use</div> </td> </tr> </table> </body> </html> Висновок: на лабораторній роботі я навчився створювати веб-сайти засобами HTML/CSS.