Projekt-studieweb. Om kommunikationsteorierne. Morten, Jacob, Kristian og Cihat

Transkript

1 Projekt-studieweb Om kommunikationsteorierne Morten, Jacob, Kristian og Cihat

2 Gestaltlovene Loven om nærhed Loven om lukkethed Loven om lighed Loven om forbundethed Loven om fortsættelse Loven om figur og baggrund

3 Loven om nærhed Objekter der er nærmere på hinanden hører mere sammen, end objekter der er længere væk. Her ses hvordan loven om nærhed kan bruges. De 12 prikker til venstre virker bare som en masse prikker og man kan ved første øjekast ikke se at der er tolv. Til højre se man med det samme at der er 4 grupper med 3 i, og de fleste kan hurtigt regne ud at der er 12

4 Loven om lukkethed Objekter der er sat i kraftige rammer, hører mere sammen, end objekter der er mindre eller slet ikke rammet ind. Her er det pga. loven om lukkethed endnu tydeligere hvor mange prikker der er.

5 Loven om lighed Objekter der ligner hinanden (ved samme form, farve o.lign) hører mere sammen, end objekter der ligner mindre. Farver kan også bruges

6 Loven om forbundethed Objekter der er kraftigere forbundet hører mere sammen, end objekter der er mindre eller slet ikke forbundet. Her er loven om forbundethed brugt. Det bruges ofte når man laver mindmap.

7 Loven om fortsættelse Objekter der ligger på lige linje eller som et symbol, vil blive opfattet som den lige linje eller symbol de forestiller

8 Loven om figur og baggrund Det er nødvendigt at anvende de andre love, for at gøre seeren opmærksom på hvad der er figur og hvad der er baggrund.

9 Skitse 1: Dårlig Attention: Forside. Interest: Side 2. Desire: Resten af siderne. Action: At få læseren til at efterrette sit studieweb efter skitsen. Loven om lukkethed: Der dannes linjer mellem siderne, og de bliver derved, adskilt. Skitse 1

10 Skitse 2: Mindre god Attention: Baggrund, forside og billeder på forsiden. Interest: Teksten på forsiden. Desire: Resten af teksten og billederne. Action: At få læseren til at efterrette sit studieweb efter skitsen. Loven om figur og baggrund (og lukkethed): Her har jeg tilføjet en baggrund, men for at vise at det er min tekst og mine billeder man skal fokusere på, har jeg sat en tykkere streg om sider (lukkethed). Skitse 2

11 . Skitse 3 Skitse 3: Acceptabel Attention: Forside. Interest: Strukturen. Desire: Billederne og teksten. Action: At få læseren til at efterrette sit studieweb efter skitsen. Loven om forbundethed: Der er en streg mellem hver side, så man kan se hvilke sider/billeder der hænger sammen.

12 Skitse 4: Anden bedst Attention: Forside. Interest: Billeder. Desire: Teksten. Action: At få læseren til at efterrette sit studieweb efter skitsen. Loven om lighed: Papirene er samme farve, og de danner derved en hvis lighed. Skitse 4

13 Skitse 5: Bedst Attention: Overskrift og tabs på forside. Interest: Layout. Desire: Tabs og tekst. Action: At få læseren til at efterrette sit studieweb efter skitsen. Loven om lighed (og lukkethed): Tabs er samme farve, og der bliver derved skabt Skitse 5

14 Endelig skitse: Attention: Forside, overskrift og tabs. Interest: Logoer og layout. Desire: Tekst og tabs. Action: At få læseren til at efterrette sit studieweb efter skitsen. Loven om lighed og lukkethed: Papirene er samme farve, og de danner derved en hvis lighed. Tabs er samme farve, og der bliver derved skabt. Skitse 6

15 Det basiske <html> <head> </head> <body> </body> </html>

16 Koder til head og xhtml type <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"><html xmlns=" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="-1" /> <meta name="keywords" content="htx, komit" /> <meta name="description" content="dette er en dansk test hjemmeside, til et projekt på HTX." /> <link href="style/style.css" rel="stylesheet" type="text/css"/> <link rel="icon" href="style/htx.ico" /> <link rel="shortcut icon" href="style/htx.ico" /> <title>htx - Projektet</title> </head>

17 Begyndelse på ramme & style.css <body> <table id="tableouter" width="980" align="center"> <tr> <td> <table cellpadding="8" cellspacing="0" border="0" width="100%" align="center"> #TableOuter { border: 1px solid #cccccc; background-color: #ffffff;

18 Start på logo og layout <table width="960" align="center" class="pagehead" border="0"> <tr valign="middle"> <td style="padding-top:0px;"> <a href="index.html"> <img src="style/logo.png" border="0"> body { background: url(body-background.png) repeat; background-color: #ffffff; A { font-family: Verdana, Arial, Helvetica, Sansserif; color: #000000; text-decoration: none; TD { font-family: Verdana, Arial, Helvetica, Sans-serif; font-size: 11px; font-weight: normal; color: #000000; vertical-align:top; img { border: none;

19 Begyndelse på undermenu <br> <div id="cfnavbar"> <ul><a href="#"> </a> <li><a href="index.html">forside</a></li> <li><a href="om_mig.html">om mig</a></li> <li><a href="om_os.html">om os</a></li> <li><a href="afleveringer.html">afleveringer</a></li> <li><a href="links.html">links</a></li> </ul></div> </table> #cfnavbar{ margin: 0; padding: 0; #cfnavbar ul{ background: url(menu1.png) repeat-x; margin: 0; padding: 0; #cfnavbar ul li a, #cfnavbar ul li span{ float: right; color: white; padding: 9px 17px; #cfnavbar ul li a:hover{ background: transparent url(menu2.png) center center repeat-x; text-decoration: underline; #cfnavbar ul li{ float: left; text-decoration: none; #cfnavbar:after{ display: inlin e; font: bold 13px Arial; width: 100%; #cfnavbar ul li span{ content: "."; display: block; height: 0; clear: both; padding-left: 0px; visibility: hidden;

20 Begyndelse på sidemenu <table border="0" width="100%" cellpadding="0" cellspacing="0"><tr><td colspan="5" style="paddingbottom:5px;"></td></tr> <td align="right" width="9"><td class="leftcolumn"> <div id="main_content_left"> <div class="content_box_header"> <div style="padding-top: 2px; verdana; color: gray; font-size: 8pt ;"> <img src="style/menuicon.png"/> Menu </style></div> </div> <div class="content_box"> <a href="index.html" style=" font-size: 8pt " >Forside</a></style><br /> <a style=" font-size: 3pt " > </a></style><br /> <a href="om_mig.html" style=" font-size: 8pt " >Om mig</a></style><br /> <a style=" font-size: 3pt " > </a></style><br /> </div> <a href="om_os.html" style=" font-size: 8pt " >Om os</a></style><br />

21 Layout til sidemenu #main_content_left { float: left; width: 150px; margin-right: 5px; #main_content { float: left; width: 480px; margin-right: 5px; #main_content_right { float: left; width: 150px;.content_box { background-image: url("menubaggrund.png"); background-repeat: repeat; text-align: left; padding: 14px; padding-top: 6px;.content_box_header { background: #CCCCCC url(sidemenustreg.png); height: 16px; color: #000000; font-weight: bold; text-align: left;.content_box_footer { background: #CCCCCC url(sidemenustreg.png); height: 16px; margin-bottom: 5px;.forside_background{ background-image: url("forsidebackground.png"); float: left; padding: 14px; padding-top: 6px; height: 450px; width: 96%;

22 Opdeling til sidemenu og brødtekst <div id="main_content_left"> <div class="content_box_header"> <div style="padding-top: 2px; verdana; color: gray; font-size: 8pt ;"> <img src="style/menuicon.png"/> Andet </style></div> </div> <div class="content_box"> <a href="afleveringer.html" style=" font-size: 8pt " >Afleveringer</a></style><br /> <a style=" font-size: 3pt " > </a></style><br /> </div> <a href="links.html" style=" font-size: 8pt " >Links</a></style><br /> <center> </center> <center> </center> <center> </center> <center><img src="style/bannertest.png" /></center> <td style="margin-right: 8px; border-right: 1px dotted #ddd; width: 8px;"></td> <td name="main"><div class="forside_background">

23 Resten af style.css #VideoContent { margin-top: 16px;.leftColumn { width: 150px; vertical-align: top;

24 Brødteksten <span style="line-height: 150%; font: normal 13px Arial;"> <b>information:</b><br> Denne hjemmeside er lavet for et projekt i Kom/IT på HTX.<br> Hjemmeside design har taget et par timer at lave, og burde fungere okay. <center> </center> Vi er tre gruppe medlemmer, og vi har alle uploadet samme design med vores eget information.<br> Pånær: Om os og forsiden.<br> <center> </center> <b>information om siderne:</b><br> På hjemmesiden kan du se information om mig, om gruppen, vores afleveringer og et par links.<br> <center> </center> 1. På forsiden kan du få et indblik i hvad du kan læse om på siden.<br> 2. Ved "om mig" kan du læse om mig.<br> 3. I "om os" kan du læse lidt om hvem vi er og hvad vi har lavet.<br> 4. I afleveringer, kan du se hvad vores gruppe har lavet i projekt dagene..<br> 5. Sidst men ikke midst kan du se diverse links til andre hjemmesider :).<br> </span>

25 Underteksten <td><table border="0" width="100%" ></table></table></td></table> <center> </center> <tr valign="bottom"> <td><table cellpadding="3" cellspacing="0" border="0" width="100%" align="center"> <tr valign="middle"> <td align="center" bgcolor="#f0f0f0"> <div style="float:center;"> Alle rettigheder er tillagt personerne bag arbejdet ;-)... </body> </html>

26 Det afsluttene resultat