[preview] design
Ik heb een design in elkaar geknutseld en voordat ik overga tot slicen en coderen wilde ik graag weten van jullie (het kritische oog) wat jullie er van vinden.
Ik sta natuurlijk helemaal open voor kritiek! But be nice to me :p
Het is nu enkel een .jpegje en het doel was: simpel en kleurvol
www.joshuaboyd.nl
het basis idee heb ik niet veel veranderd ik heb het alleen wat zachter gemaakt, iets vriendelijker. zie maar wat je er aan hebt...
Gewijzigd op 01/01/1970 01:00:00 door bart van der veen
Ik mis een pagina kop en het content gedeelte is ook niet uigewerkt. Eigenlijk dus alleen een header die er opzich goed uitziet maar enigzins aan de grote kant is.
Voor de rest wel aardig maar niet bijzonder. De foto ziet er trouwens nogal 'gemaakt' uit.
Hoop dat je er iets mee kunt.
Wellicht willen jullie/wil jij ook mijn site even beoordelen:
http://www.rechtenstudent.net/masta/masta.php
Erg mooi contrast dat zwart en geel ook erg scherp allemaal. Ben een tikkeltje jaloers ;)
Hij zet het menu op de afbeelding. Ik zou hem eronder houden. Is mooier en duidelijker.
Ik vind het kleurige wel iets hebben, spreekt aan. Waarvoor zijn die bolletjes achter het menu?? Dat is me een beetje onduidelijk.
Er mist wel iets denk ik tussen de foto en je menu. Als je die oranje balken aan de zijkant weghaalt en deze onder de foto plaatst? Of iets dergelijks. Je moet een beetje proberen.
Wat ik van Bart wel goed vind is dat hij een 'top' heeft. Bij jou is dit open. Lijkt net of het niet af is.
Welk lettertype gebruik je voor de tekst. Let er wel op dat het een lettertype moet zijn die door browsers wordt ondersteund, dus arial, verdana, tahoma oid
Mini-instructie:
zie rechtsboven de binnenkant van de groene lijn: die gaat van zacht ineens naar scherp (zie je het, bijna helemaal bovenaan).
Verder zou ik de lijnen misschien niet helemaal laten overvloeien naar het witte, maar misschien toch iets door laten schemeren.
Goede progressie! En bedankt voor jouw reactie op mijn ontwerp.
Ik zal hieronder de code posten die ik heb geschreven. Alleen werkt hij niet volledig, ik krijg de linker sidebar en de rechter sidebar niet werkend..
Ik heb al enkele tutorials doorgespit maar ik mis denk ik toch nog de essentie van het css coderen.
styles.css
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
body {
margin: 0;
padding: 0;
text-align: center;
}
#whole{
width: 100%;
margin: 0 auto 0 auto;
}
#sidebar_leftcorner {
margin_top: 0 px;
background: #FFF url('layout/sidebar_leftcorner.gif') no-repeat;
}
#sidebar_left {
margin-top: 52px;
width: 55px;
background: #FFF url('layout/sidebar_left.gif') repeat-y bottom;
}
#container {
width: 810px;
margin: 0 auto 0 auto;
text-align: left;
}
#header {
height: 51px;
background: #FFF url('layout/header_top.gif') repeat-x bottom;
}
#logo {
height: 225px;
background: #FFF url('layout/logo.gif') bottom;
}
#navbar {
height: 30px;
background: #FFFFFF bottom;
}
#content {
height: 400px;
background: #FFFFFF bottom;
}
#footer {
height: 46px;
background: #FFF url('layout/footer.gif') repeat-x bottom;
}
[/CODE]
En dan heb ik hier de index.html pagina:
index.html
[CODE]
<html>
<head>
<title>
Joshua Boyd's Persoonlijke Website
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="whole">
<div id="sidebar_leftcorner"></div>
<div id="sidebar_left"></div>
<div id="container">
<div id="header"></div>
<div id="logo"></div>
<div id="navbar">NAVBAR</div>
<div id="content">CONTENT</div>
<div id="footer"></div>
</div>
<div id="sidebar_rightcorner"></div>
<div id="sidebar_right"></div>
</div>
</body>
</html>
[/CODE]
HELP
margin: 0;
padding: 0;
text-align: center;
}
#whole{
width: 100%;
margin: 0 auto 0 auto;
}
#sidebar_leftcorner {
margin_top: 0 px;
background: #FFF url('layout/sidebar_leftcorner.gif') no-repeat;
}
#sidebar_left {
margin-top: 52px;
width: 55px;
background: #FFF url('layout/sidebar_left.gif') repeat-y bottom;
}
#container {
width: 810px;
margin: 0 auto 0 auto;
text-align: left;
}
#header {
height: 51px;
background: #FFF url('layout/header_top.gif') repeat-x bottom;
}
#logo {
height: 225px;
background: #FFF url('layout/logo.gif') bottom;
}
#navbar {
height: 30px;
background: #FFFFFF bottom;
}
#content {
height: 400px;
background: #FFFFFF bottom;
}
#footer {
height: 46px;
background: #FFF url('layout/footer.gif') repeat-x bottom;
}
[/CODE]
En dan heb ik hier de index.html pagina:
index.html
[CODE]
<html>
<head>
<title>
Joshua Boyd's Persoonlijke Website
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="whole">
<div id="sidebar_leftcorner"></div>
<div id="sidebar_left"></div>
<div id="container">
<div id="header"></div>
<div id="logo"></div>
<div id="navbar">NAVBAR</div>
<div id="content">CONTENT</div>
<div id="footer"></div>
</div>
<div id="sidebar_rightcorner"></div>
<div id="sidebar_right"></div>
</div>
</body>
</html>
[/CODE]
HELP
Gewijzigd op 01/01/1970 01:00:00 door Joshua
en dit is zoals het er uit moet gaan zien
www.joshuaboyd.nl
Gewijzigd op 01/01/1970 01:00:00 door Joshua
begin groot en ga steeds meer gedetailleerd te werk.
Bijvoorbeeld:
Begin met de afmetingen van de site. Gecentreerd of niet?
Daarna globaal indelen: header, content, footer bijv. incl afmetingen.
Daarna weer opdelen: heeft content bijv kolommen?
Dit werkt het beste, wanneer je een foutje tegenkomt is dit makkelijker te herkennen en verbeteren. En het werkt gewoon het makkelijkste.