website vragen ?

Status
Niet open voor verdere reacties.
D

djbosanac

Gebruiker
Lid geworden
13 aug 2008
Berichten
293
Hallo,,


Ik wou graag wat vragen stellen over het maken van een website html/css.
Ik ben nu op school bezig voor een project die na de vakantie klaar moet zijn.

We hebben al de basis gehad van html/css, nu is het zo ja ik moet laten zien wat ik als ICTer later ga doen.

Nu weet ik al wat ik moet gaan zeggen etc.
Maar nu komt het moeilijkste gedeelte.

Ik wil zeg maar photoshop/html/css gaan combineren, dus echt een volledige website gaan bouwen. Ik heb nu dus al op good-tutorials.com zitten kijken voor wat photoshop websites. En een paar tutorials gevolgd, en ik moet zeggen het is best wel goed gelukt. Maar nu wil ik dat dus met html/css gaan bewerken.

Nu is mijn vraag hoe doe je dat? wat kan je het beste doen etc?
We moeten het via notepad++ doen, en dan later lokaal via WAMP gaan draaien?

Dus als er genoeg web- ontwikkelaars zijn, die me ook echt willen helpen met dit projectje van me ? dan zou ik dat zeer op prijs stellen.

Alvast bedankt voor jullie medewerking.


MVG
Djbosanac
 
ik zal kijken, misschien helpt het,
Ben er nu mee bezig, mja sommige dingen willen maar niet lukken ...
 
Hoi djbosanac,
mja sommige dingen willen maar niet lukken ...
Klik om te vergroten...
Als je vertelt wat die "sommige dingen" zijn (wat heb je precies gedaan,wat mislukt er, en waar denk je dat het aan ligt?) ... dan zouden hier misschien wat hints kunnen komen!

Ben je soms begonnen met een Photoshop-ontwerp, dat je na slicen door Photoshop hebt geëxporteerd als html-pagina?
Zeker als je nog niet zo ingevoerd bent in html en css, levert dat geheid problemen op: omdat zo'n ontwerp nogal star is en/of waanzinnig veel slice-partjes oplevert.

Dan zou ik eerder omgekeerd te werk gaan. D.w.z.: in Notepad++ een model maken van de pagina, met randjes (borders) om de verschillende onderdelen. Als je daar dan tijdelijk je hele Photoshop-ontwerp als één achtergrond-image achter zet, zie je vanzelf waar de uitsnedes in je afbeeldingen moeten komen > waar achtergrond-afbeeldingen nodig zijn, waar je een knop wilt hebben, enz.
Dan kan je een screenshot van het totaal maken, en met de maten daarvan de onderdelen in Photoshop opknippen in los te gebruiken stukjes. Waarschijnlijk heb je dan ook veel minder partjes nodig.
Want de Photoshop-slicer weet niet wat jij van plan bent, en jij wel. ;)

Wat algemene tips bij het klussen:
  • Altijd van boven naar beneden werken, en dan van links naar rechts. Dan kom je nooit voor verrassingen te staan als <div>'s groter of kleiner moeten worden door hun inhoud.
  • Meer in de Golden Rules of CSS, 5 jaar oud maar nog steeds geldig. :)
Met vriendelijke groet,
CSShunter
 
wat bedoel je met slicen csshunter.
Ik ben nog een noob in alles.

Hier een voorbeeld ervan:
voorbeeldbg.png

Zoals je ziet, het ziet er nog niet mooi uit, ik moet nog goed leren photoshoppen en dergelijke.
Daarnaast is die tentoonstelling een grote header, dus daar kan ik via notepad++ ook niks aan doen, om erin te schrijven.

htmlgv.png


Code: 
body
{
	background-color: black;
}
li
{
	color: black;
	display: inline;
	font-size: 23px;
}
ul
{
	color: white;
	margin-left: 190px;
}
ul.tweede
{
	text-decoration: none;
}
a
{
	width:120px;
	font-weight:bold;
	font-weight:normal;
	font-family: Georgia;
	padding:12px;
	color: white;
	text-transform:uppercase;
	text-decoration: underline;
}
img.cp
{
	float: right;
	margin-right: 190px;
	margin-left: 2px;
}
div.header
{
	
}
h1
{
	color: white;
}
h2
{
	color: white;
	margin-left: 190px;
}
h3
{
	color: white;
	margin-left: 190px;
}
h4
{
	color: white;
	margin-left: 190px;
}
p
{
	color: white;
	margin-left: 190px;
	margin-right: 190px;
	font-size: 12pt;
	padding-top: 2px;
}

Wat me niet lukts tot nu toe is, om de 2de lijst in plaats van naast elkaar, onder elkaar te doen.
ik probeerde een class aan te maken, maar het werkt niet..
 
Hoi djbosanac,
wat bedoel je met slicen csshunter.
Klik om te vergroten...
Ah, slicen ("sneetjes van maken") is een techniek die een grote afbeelding opdeelt in allerlei partjes, die op een html-pagina gebruikt kunnen worden. Daar zitten een aantal valkuilen aan vast. Maar jij doet het gelukkig niet, dus heb je geen last van die valkuilen. Dan kan je wat ik over slicen zei weer vergeten!

=====
... tentoonstelling een grote header, dus daar kan ik via notepad++ ook niks aan doen, om erin te schrijven.
Klik om te vergroten...
Toch wel. :)
Als je in de header-<div> iets wilt schrijven, moet je even dit hoofdstukje (en de voorbeelden daarvan) doornemen.
  • Terzijde: als je een img in de html plaatst (als voorgrond-afbeelding, zoals nu), dan kan je er niet in schrijven; maar dan moet je wel altijd de breedte en hoogte opgeven om niet voor verrassingen te komen staan.
=====
Wat me niet lukt tot nu toe is, om de 2de lijst in plaats van naast elkaar, onder elkaar te doen. ik probeerde een class aan te maken, maar het werkt niet..
Klik om te vergroten...
Aha. Dan kijken we even naar je code:
  • Normaal gesproken staat een <ul><li> lijstje altijd vanzelf onder elkaar.
  • Wat heb je gedaan?
  • Voor de eerste serie ben je daarvan afgeweken door daarvoor iets anders op te geven in de css.
  • Hoe heb je dat gedaan?
  • Door aan alle <li>'s die afwijking op te dragen.
  • Maar voor de tweede serie wil je dat niet.
Dus wat doe je?

Met vriendelijke groet,
CSShunter
_________
PS:
Een text-decoration (onderstreping, bv. van links) moet toegepast worden op een element dat een text is. Jij hebt het toegepast op een <ul>, en dan werkt het niet. Want de eigenschap wordt niet doorgegeven aan de <a>'s die in die <ul> zitten: de text-decoration wordt niet "geërfd". Dat komt omdat links <a> altijd vanzelf een onderstreping krijgen, tenzij je opdracht geeft aan bepaalde <a>'s om dat niet de doen.

Ook schrijf je ul.tweede. Dat betekent: een <ul> met de class-naam "tweede". Maar die is er niet! Die class zit aan de <div> vast, en niet aan de <ul>.
Als je de tweede <ul> wilt bereiken, moet het zijn: .tweede ul {...}. Dat betekent dan: de <ul> die volgt op een element met de class "tweede", en dan kan je aan die <ul> opdrachten geven.
 
Ik heb een beetje de stappen gevolgd van de websites die je me gaf, en wat tips van school en overige sites opgevolgd.

dit is het resultaat:
Code: 
*

{
	padding : 0;
	margin : 0;
}

body
{
	background-color: black;
}

div.center 
{
	width : 908px;
	margin : 0px auto;

}
ul
{
	padding : 0;
}
ul.menu
{	
	margin: 10px 0px;
	text-align:center;	
}

ul.menu li
{
	color: black;
	display: inline;
	font-size: 23px;
	color: white;
	padding : 5px;
	font-family: Lucida Console;

}
ul.menu a
{
	padding : 0;

}
ul.menu a:hover
{
	border-bottom : 1px solid white;
	
}

a:hover
{
	color: white;
}
ul.litwee li
{
	display: block;
	color: white;
}
a:link
{
	text-decoration: none;
}
ul.litwee
{
	font-family: arial;
	margin: 30px 0px;
}
h1
{
	color: white;
	text-align:center;
}
h2
{
	color: white;
}
h3
{
	color: white;
}
h4
{
	color: white;
}
p
{
	color: white;
	font-size: 14pt;
	padding-top: 2px;
	margin: 15px 0px;
}
div.tweede
{
	text-decoration: 
}
a
{
	width:120px;
	font-weight:bold;
	font-weight:normal;
	font-family: Georgia;
	color: white;
	text-transform:uppercase;
	text-decoration: underline;
}

Ziet er zo uit.:
voorbeeldbg.png


Code: 
<!doctype html>
<html>
	<head>
		<title>De tentoonstelling</title>
		<link href="stylesheet.css" rel="stylesheet" type="text/css">
	</head>
<body>
	<div class="center">
		<ul class="menu">
			<li><a href="home.html">Home</a></li>
			<li><a href="over.html">Over Mij</a></li>
			<li><a href="portfolio.html">Portfolio</a></li>
			<li><a href="links.html">Links</a></li>
			<li><a href="extra.html">Extra</a></li>
		</ul>
				<div class="header"> 
					<img src="header.jpg">
					<h1>welkom op de tentoonstelling van J Hasanovic</h1>
				</div>

	
<p>Vandaag laat ik jullie zien, wat de IT (Informatica Technologie) nou echt in houd.
We gaan het hebben over bepaalde aspecten binnen het vak ICT, en wat je ongeveer kan verwachten als een ICT'er. 
Ik zal in het kort even vertellen wat de computer in het algeen is.
Daarna ga ik het een kort stukje vertellen over Wat een ICT'er doet in zijn dagelijkse leven.</p>

<h4>Kies uit de volgende categorieën</h4>

	<ul class="litwee">
		<li><a href="decomputer.html">De Computer</a></li>
		<li><a href="hetwerk.html">Het werk</a></li>
		<li><a href="Hardware.html">Hardware</a></li>
		<li><a href="Software.html">Software</a></li>
		<li><a href="ietsanders.html">Iets ander dan ICT</a></li>
	</ul>


</div>




























</body>
</html>

Het is nog niet helemaal wat het moet zijn, maar op de goede weg.
Ik heb dit alleen vandaag nog zo uitgewerkt, dus moet er alleen nog voor gaan zitten, om het uit te bereiden, enz beter te worden.
 
Mooi! Dat ziet er een stuk beter uit! :thumb:

Tipje. - Op dit moment heb je alles in de <div class="center"> staan.
Is niet fout (correcte html, beter dan de <center>, en werkt goed).
Maar alles van de pagina staat ook al in de <body>.
Dus als je ..., dan kan je die hele <div class="center"> rustig missen!
 
ik zal kijken, want nu heb ik ook geen last er meer van met die dubbele lijsten <li> die werken nu ook apart, moest wel veel aanpassen daar en veel bij voegen, maar het werkt wel ja.

Alleen de design BG, zou beetje anders kunnen alleen weet niet hoe en wat je er aan kan doen
 
Je zou misschien iets kunnen doen met de nullen en enen van de computertaal, bv. die gebruiken als herhalend background-image van de <html>-tag. Dan kan het zo'n soort effect geven, wat het net iets sprankelender maakt.
 
ja dat ziet er inderdaad veel mooier uit, alleen enig idee hoe dat gedaan is?
want zo ver ben ik nog niet met het maken van desigsn, of het toevoegen van zo iets, ik ken alleen nog de basis...
 
enig idee hoe dat gedaan is?
Klik om te vergroten...
Jawel: dan teken je in Photoshop een afbeelding van ongeveer 100x100px, waar de nullen en eentjes in zitten. Die herhaalt zich automatisch horizontaal en verticaal, als je 'm in de achtergrond in een laag "onder" de <body> zet, d.w.z. vastknoopt aan de <html> (want daar zit het <body> element in, dat zelf een zwarte achtergrondkleur heeft).
Het kan in de css simpel als volgt:
Code: 
html {
	background: url(bitjes.png);
	}
Succes!
CSShunter
 
ik heb geprobeerd om zo te doen wat jij zei, alleen het is niet helemaal gelukt.
Ik krijg namelijk van die rare verschijnselen te zien, ik heb wat aangepast maar het is zeg maar de foute kant op gegaan, en weet niet wat ik moet doen om het recht te zetten, ik heb namelijk nu maar 1 of 2 stylesheets gebruikt, omdat het makkelijker is, maar ja nu werkt alles door elkaar, en weet niet waar de fouten nu allemaal in zitten.

Heb je een privé adres waar je op bereikbaar bent, zodat je daar kan helpen,, ??
 
hoe is het mogelijk om een scrollbar te maken, heb namelijk een te lange webpagina nu, waardoor het niet overzichtelijk is..
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan