webdesign Pomoc s designem

Paulee · 25. Duben, 2020

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>

Spoiler

https://ctrlv.cz/lpjw

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 25. Duben, 2020 by Paulee

HighPrint · 25. Duben, 2020

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,...

Paulee · 25. Duben, 2020

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.

Scydo · 25. Duben, 2020

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čí ... 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

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 25. Duben, 2020 by Scydo

Fakerko_ · 26. Duben, 2020

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čí ... 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

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ě.

Paulee · 26. Duben, 2020

Děkuju vám moc oběma, pomohli jste mi. Teď si s tím už jen trošku vyhraju a bude to paráda.

Sign In

webdesign Pomoc s designem

Recommended Posts

Paulee 16

Link to comment

Share on other sites

HighPrint 177

Link to comment

Share on other sites

Paulee 16

Link to comment

Share on other sites

Scydo 397

Link to comment

Share on other sites

Fakerko_ 197

Link to comment

Share on other sites

Paulee 16

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Komunita

Informace