Gå til innhold

Hvordan"spice" opp designet mitt?

Tinmar

Anbefalte innlegg

Tinmar

Tinmar

Skrevet
Skrevet (endret)

Hei!

 

Lager nettside som et K&H-prosjekt og lurte på om noen hadde noe forslag til hvordan jeg får "spicet" opp utseende litt. Læreren mente at det ble litt firkantete og kjedelig noe jeg kan si meg enig i.

 

Har såvidt begynt på siden, men jeg lurte på om noen kunne gi meg litt inspirasjon til teknikker ol for å få meg "på gli".

 

Jeg har bestemt meg for å ha et tradisjonelt design med menyen på venstre side. Hvis noen vil overbevise meg til noe annet så versågod :)

 

Her er siden hostet opp på en webhost.

 

HTML og CSS

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
	<title>Martins nettside</title>
	<link rel="stylesheet" type="text/css" href="web.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="Min første nettside som jeg lager i et Kunst- og håndverksprosjekt">
</head>

<body>
	<div id="navigation">
		<ul>
			<li><a href="index.html">Hjem</a></li>
			<li><a href="om meg.html">Om meg</a></li>
			<li><a href="kogh.html">Kunst- og håndverk</a></li>
			<li><a href="linker.html">Linker</a></li>
		</ul>
	</div>

	<div id="header">
		<h1>Martins nettside</h1>
	</div>

	<div id="content">
		<div id="innhold">
			<p><a href="#header">Til toppen</a></p>
		</div>

		<h2>Hva er dette?</h2>
		<p>Dette er en side som jeg lager i forbindelse med et kunst- og håndverksprosjekt. Foreløpig er det ikke så mye innhold her, men det kommer etter hvert.</p>


	</div>



</body>

</html>

 

body {
background: white url(http://www.free-graphics.com/backgrounds/lightgrey/9.jpg) repeat center
}

#header {
margin-left: 12em;
border: 1px solid black;
background: blue;
}

#navigation {
float: left;
top: 0;
left: 0;
width: 12em;
background-color: #333;
height: 50em
}

#navigation ul {
margin-top: 10em;
list-style: none;
}

#navigation ul a {
background: #17a;
color: white;
text-decoration: none;
margin: 1em 1em 0 0;
}

#navigation a:hover {
		background: #28b;
	}

#content {
padding: 2em;
margin-left: 14em;
margin-top: 2em;
margin-right: 2em;
background-color: #aaf;
}

#innhold {
margin-top: 1em
margin-right: 1em

 

index.html

web.css

Endret av Tinmar
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Tinmar

Tinmar

Skrevet
  • Forfatter
Skrevet (endret)

Tenkte kanskje folk kunne lime den inn i notisblokk el jeg. Bedre nå? Skal også se om jeg finner noe plass å legge opp siden og får til å gjøre det. Noen som vet om noen gratis plass å legge opp siden?

Endret av Tinmar
Lenke til kommentar
Tinmar

Tinmar

Skrevet
  • Forfatter
Skrevet (endret)

Skjønte hva du mente, men hadde ikke fikset plass til å laste opp da. Nå kan du finne "siden" her. Dessuten trenger du ikke en webserver for å se filene. Det går også an å åpne de i en helt vanlig nettleser via "åpne fil" :)

 

Tenkte kanskje ikke at denne regnes som websidekritikk siden siden langt ifra er ferdig og er helt elendig :p

Endret av Tinmar
Lenke til kommentar
lassejl

lassejl

Skrevet
Skrevet

Hadde jeg hvert deg hadde jeg heller spicet ned designet. Når du bruker 7 forskjellige farger på et så enkelt oppsett ser det ikke bra ut. Bruk få, enkle farger som passer sammen, og bruk de konsekvent, ikke bare klæsh en her og en der. Det patternet i bakgrunnen vill jeg fjernet fort som fy. Samtidig ville jeg endret fonten (Times New Roman er IKKE pent). Fjern også bakgrunnsgreia på sidebaren, da det nå ser ut som om man har markert teksten hele tiden, veldig plagsomt. Bilder/grafikk er noe som fort drar opp inntrykket på siden din. Har du photoshop så bruk det, kan du det ikke leser du feks tutorials og lærer deg forskjellige teknikker og lag noe eget som du kan putte på siden som en header for eksempel. Annet enn det vil jeg anbefale deg å se på nettsider du er inne på, se hva som er pent og ikke pent, hva som fungerer og ikke fungerer. Men i begynnelsen ville jeg prøvd å holdt meg til noe enkelt, less is more som det heter.

 

Skal alikevel ha skryt for ryddig og bra kode. Lykke til videre!

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...