Jump to content

webdesign Pomoc s designem


Paulee

Recommended Posts

Dobrý den,

dostal jsem za úkol udělat jednoduchý webdesign, kde budou splněna zadaná kritéria. Jenže mě grafika moc nejde, nemám řádnou představu a webdesign mi až tolik moc neříká. Myslíte si že by se tu našla dobrá duše co by mi pomohla, či nějak nadstínila aby to vypadalo dobře?

Spoiler

<html>
	<head>

		<title> Zdravé potraviny </title>
	</head>

	<body background="https://i.ytimg.com/vi/KFNxdXEe0Ko/maxresdefault.jpg">

		<div class=pozadí>

			<center><h1>Přehled zdravých potravin</center>
			<center><h3>Ceník</center>
			<div class="protein">

     			<img src="123.jpg" alt="Zdravé potraviny" aligh="left">
     		</div>

			<div class="tabulka">
				<table align="right" border="5" bordercolor="black" bgcolor="white" cellspacing="10" cellpadding="10">
	      			<caption align="center"></caption>

	      			<tr valign="middle" align="center"><td>Produkt</td><td>Výživová hodnota</td><td>Cena</td></tr>
	      			<tr valign="middle" align="center"><td>Špaldová mouka</td><td>345kcal/100g</td><td>29,90 Kč</td></tr>
	     			<tr valign="middle" align="center"><td>Protein</td><td>113kcal/100g</td><td>199,90 Kč</td></tr>
	     			<tr valign="middle" align="center"><td>Bezlepkový ovesný chléb</td><td>376kcal/100g</td><td>28,90 Kč</td></tr>
	      			<tr valign="middle" align="center"><td>Arašídové máslo</td><td>598kcal/100g</td><td>89,90 Kč</td></tr>
     			</table>
     		</div>

     			<div class="mouka">

     				<img src="456.jpg" alt="Zdravé potraviny" align="right">
     			</div>
     		</div>
     	</div>
	</body>

</html>

<style>
div.tabulka {

	float:right;
}
div.protein {

	float:left;
	margin: 20px;
}
div.mouka {

	float:left;
	margin: 20px;

}
div.pozadí {
	height: 550px;
	background-color: powderblue;
    margin: 50px;

}
img {
	height: 200px;
	width: 200px;

}
table {
 	margin-right: center;
 	margin-left: center;
	margin: 50px;

}
</style>

 

Ještě zde přikládám dané požadavky:

Spoiler

Stránka musí obsahovat:

·         Nadpisy alespoň dvou úrovní

·         Formátování pomocí stylů definovaných v hlavičce

·         Alespoň dva obrázky (nezapomeňte je přiložit do složky s HTML souborem)

·         Tabulku s názvem a názvy sloupců (vhodně zformátujte) – velikost tabulky minimálně 3x3

·         Odkaz (nejlépe na existující webovou stránku, pokud se budete odkazovat na dokument, nezapomeňte jej přiložit do složky)

Při vytváření stránky dbejte na estetický vzhled i čitelnost. Snažte se, aby byla stránka vkusná a vypadala pěkně.

Za každou pomoc budu velmi rád. Pozadí a barvy jsou jen hrubý nástřel. Hlavně mě jde o vizualizaci.

 

Přeji hezký den.

Edited by Paulee
Link to comment
Share on other sites

  • Globální moderátor

Ok taky nejsem zadnej webdesigner ale tohle je fakt katastrofa. Zkus se inspirovat existujicimi webovkami, kde nabizeji takhle produkty. Mozna by nebylo na skodu se mrknout na nejake ty CSS frameworky, ktere ti poskytuji docela hezky zakladni kostru. 

Bootstrap, semantic UI, material,...

Link to comment
Share on other sites

Je to katastrofa, ale právě to musí být napsáno hezky ručně, bez žádných pluginu či  šíleností, hezký základy HTML a CSS. Právě proto s tím bojuju. Kdyby to takhle nebylo dané, dávno bych volil wordpress atp.

Link to comment
Share on other sites

Jsem se nudil a neměl jsem co dělat, tak proč ne.

Jak vždycky můj učitel říkal ,,Vnesený řád rovná se 50 % splněno"...
No. není to žádná sláva ale řekl bych, že to stačí :d... A i víceméně splňuje všechny podmínky. Jsem to pojmuj ve stylu Košíku.cz. Obrázky jsem si našel na googlu a uložil, tak si je pak najdi a nahraď je, plus si to pak uprav podle sebe ještě.
 

Spoiler

https://ctrlv.cz/shots/2020/04/25/l60W.png

Kód:

Spoiler

<html>
	<head>
		<title>NažerSe</title>
	</head>
	<body>
		<h1><span style="background-color: white;padding: 5px;">NAŽER<span style="background-color:red;color:white">SE</span>.CZ</span></h1>
		<h3>Ceník všech našich produktů</h3>
		<table align="center" bgcolor="white" cellspacing="35" cellpadding="35" style="font-size: 20px;box-shadow: 0 8px 50px -6px rgba(0, 0, 0, 0.9);">
	      	<tr valign="middle" align="center"><td class="bgthead"> </td><td class="bgthead">Produkt</td><td class="bgthead">Výživová hodnota</td><td class="bgthead">Cena</td><td class="bgthead">Akce</td></tr>
	      		<tr valign="middle" align="center"><td><img src="image1.jpeg"></td><td>Špaldová mouka</td><td>345kcal/100g</td><td>29,90 Kč</td><td><button>Přidat do košíku</button></td></tr>
	     		<tr valign="middle" align="center"><td><img src="image2.jpeg"></td><td>Protein</td><td>113kcal/100g</td><td>199,90 Kč</td><td><button>Přidat do košíku</button></td></tr>
	     		<tr valign="middle" align="center"><td><img src="image3.png"></td><td>Bezlepkový ovesný chléb</td><td>376kcal/100g</td><td>28,90 Kč</td><td><button>Přidat do košíku</button></td></tr>
	      		<tr valign="middle" align="center"><td><img src="image4.jpg"></td><td>Arašídové máslo</td><td>598kcal/100g</td><td>89,90 Kč</td><td><button>Přidat do košíku</button></td></tr>
     	</table>
	</body>
	<style>
		@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
		body {
			background-image: url('https://images.unsplash.com/photo-1543353071-873f17a7a088?ixlib=rb-1.2.1');
			background-color: black;
			font-family: 'Source Sans Pro', sans-serif;
			text-transform: uppercase;
			line-height: 0.8em;
			text-align: center;
		}
		.bgthead {font-weight: bold;}
		img {
			height: 50px;
			width: 50px;
			border-radius: 15px 50px 30px;
		}
		
		h1 {
			margin-top: 2%;
			color:black;
			font-size: 55px;
			font-weight: bold;
		}
		
		button {
			background-color: white;
			height: 55px;
			width: 175px;
			padding: 10px;
			border: 1px white 0.1;
			color:black;
			text-transform: uppercase;
			font-size: 16px;
			cursor:pointer;
		}
	</style>
</html>

 

 

Edited by Scydo
  • Paráda! (+1) 1
Link to comment
Share on other sites

před 10 hodinami, Scydo said:

Jsem se nudil a neměl jsem co dělat, tak proč ne.

Jak vždycky můj učitel říkal ,,Vnesený řád rovná se 50 % splněno"...
No. není to žádná sláva ale řekl bych, že to stačí :d... A i víceméně splňuje všechny podmínky. Jsem to pojmuj ve stylu Košíku.cz. Obrázky jsem si našel na googlu a uložil, tak si je pak najdi a nahraď je, plus si to pak uprav podle sebe ještě.
 

  Ukázat skrytý obsah

https://ctrlv.cz/shots/2020/04/25/l60W.png

Kód:

  Ukázat skrytý obsah


<html>
	<head>
		<title>NažerSe</title>
	</head>
	<body>
		<h1><span style="background-color: white;padding: 5px;">NAŽER<span style="background-color:red;color:white">SE</span>.CZ</span></h1>
		<h3>Ceník všech našich produktů</h3>
		<table align="center" bgcolor="white" cellspacing="35" cellpadding="35" style="font-size: 20px;box-shadow: 0 8px 50px -6px rgba(0, 0, 0, 0.9);">
	      	<tr valign="middle" align="center"><td class="bgthead"> </td><td class="bgthead">Produkt</td><td class="bgthead">Výživová hodnota</td><td class="bgthead">Cena</td><td class="bgthead">Akce</td></tr>
	      		<tr valign="middle" align="center"><td><img src="image1.jpeg"></td><td>Špaldová mouka</td><td>345kcal/100g</td><td>29,90 Kč</td><td><button>Přidat do košíku</button></td></tr>
	     		<tr valign="middle" align="center"><td><img src="image2.jpeg"></td><td>Protein</td><td>113kcal/100g</td><td>199,90 Kč</td><td><button>Přidat do košíku</button></td></tr>
	     		<tr valign="middle" align="center"><td><img src="image3.png"></td><td>Bezlepkový ovesný chléb</td><td>376kcal/100g</td><td>28,90 Kč</td><td><button>Přidat do košíku</button></td></tr>
	      		<tr valign="middle" align="center"><td><img src="image4.jpg"></td><td>Arašídové máslo</td><td>598kcal/100g</td><td>89,90 Kč</td><td><button>Přidat do košíku</button></td></tr>
     	</table>
	</body>
	<style>
		@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
		body {
			background-image: url('https://images.unsplash.com/photo-1543353071-873f17a7a088?ixlib=rb-1.2.1');
			background-color: black;
			font-family: 'Source Sans Pro', sans-serif;
			text-transform: uppercase;
			line-height: 0.8em;
			text-align: center;
		}
		.bgthead {font-weight: bold;}
		img {
			height: 50px;
			width: 50px;
			border-radius: 15px 50px 30px;
		}
		
		h1 {
			margin-top: 2%;
			color:black;
			font-size: 55px;
			font-weight: bold;
		}
		
		button {
			background-color: white;
			height: 55px;
			width: 175px;
			padding: 10px;
			border: 1px white 0.1;
			color:black;
			text-transform: uppercase;
			font-size: 16px;
			cursor:pointer;
		}
	</style>
</html>

 

 

Facka za in-line styly. 
Chtěl jsem ti dát pochvalu za používání jednotky "em", ale pak jsem si všiml, že mícháš více jednotek. Jednotky "em" používáš pouze jednou a pak všude "px".
Na prd míchat u tabulky attributy pro padding atd se styly. Proč nestylovat tabulku přímo v CSS, když už se používá?
Třída "bgthead" mi přijde dost nečitelná na první pohled, co se takhle držet konvence a použít například: "bgThead" nebo "bg-thead" nebo "bg_thead"?

Jinak importovat font ve stylech bych nedoporučoval, lepší jako link v hlavičce dokumentu. Setkal jsem se s případy, kdy IE ignoroval import fontu v CSS.

Pak jen takové doporučení, lepší je udržovat a dávat marginy zespoda, nikoli ze shora, lépe se v tom pak vyznáš, když se máš držet designu.

Pak k obrázku na pozadí. Je fajn, že je ve 4K, ale proč si má někdo v tomto případě stahovat 12MB obrázek, když má jen rozlišení 1920x1080 nebo 1280x720. Nehledně na to, že 12MB je i pro 4K web hodně, rozhodně bych to zmenšil. Takže udělat media query pro rozlišení nebo i pro retinu rovnou.

 

Taky jsem se nudil, než se mi dodělá snídaně.

  • Paráda! (+1) 2
  • Smutný 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...