Just nu i M3-nätverket
Gå till innehåll

Skapa sida efter bild HTML5


r0ad

Rekommendera Poster

Hej!

 

Jag har aldrig jobbat i HTML 5 och har fått en uppgift av en arbetskollega att göra en väldigt SIMPEL sida (ser det ut att vara enligt bilden) i HTML 5 men har aldrig använt det.

 

webutv.png

 

Någon som kan ge mig en hand och försöka skapa själva "skalet" för hemsidan?

Tack på förhand.

Länk till kommentar
Dela på andra webbplatser

Just HTML5 syntaxen för sidan kan se ut så här.

<!DOCTYPE html>
<!--[if lt ie 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if ie 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if ie 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt ie 8]><!--> <html class="no-js"> <!--<![endif]-->
   <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       <title>Exempelsida</title>
       <meta name="description" content="">
   </head>
   <body>
	<section id="wrapper">
		<h1>Webbutveckling 1: Diagnos</h1>
		<div class="aside">
			<h4>Syften</h4>
			<ol>
				<li>Punkt 1</li>
				<li>Punkt 2</li>
				<li>Punkt 3</li>
			</ol>
			<p>
				<img src="bilden.jpg" alt="bild på en glad gubbe" />
			</p>
		</div>
		<p class="ingress">Denna ingress är fetstilad</p>
		<p>Stycke habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		<p>Nytt stycke habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		<p>Ytterligare stycke habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	</section>
   </body>
</html>

 

Sedan utseendet förändrar man med hjälp av CSS (Stilmallar). Där definierar man hur olika objekt ska se ut; t ex hur bred en viss sektion ska vara och vilken färg och storlek det ska vara på text och rubriker.

 

Jag har inte använt någon av de föreslagna verktygen, men skulle nog rekommendera Expression Web.

 

 

Vad är det just med HTML5 du behöver? Ser inget HTML5-specifika funktioner med den design bilden visar.

Länk till kommentar
Dela på andra webbplatser

Just HTML5 syntaxen för sidan kan se ut så här.

<!DOCTYPE html>
<!--[if lt ie 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if ie 7]> 		<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if ie 8]> 		<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt ie 8]><!--> <html class="no-js"> <!--<![endif]-->
   <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       <title>Exempelsida</title>
       <meta name="description" content="">
   </head>
   <body>
	<section id="wrapper">
		<h1>Webbutveckling 1: Diagnos</h1>
		<div class="aside">
			<h4>Syften</h4>
			<ol>
				<li>Punkt 1</li>
				<li>Punkt 2</li>
				<li>Punkt 3</li>
			</ol>
			<p>
				<img src="bilden.jpg" alt="bild på en glad gubbe" />
			</p>
		</div>
		<p class="ingress">Denna ingress är fetstilad</p>
		<p>Stycke habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		<p>Nytt stycke habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		<p>Ytterligare stycke habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	</section>
   </body>
</html>

 

Sedan utseendet förändrar man med hjälp av CSS (Stilmallar). Där definierar man hur olika objekt ska se ut; t ex hur bred en viss sektion ska vara och vilken färg och storlek det ska vara på text och rubriker.

 

Jag har inte använt någon av de föreslagna verktygen, men skulle nog rekommendera Expression Web.

 

 

Vad är det just med HTML5 du behöver? Ser inget HTML5-specifika funktioner med den design bilden visar.

 

 

 

Jag bugar och bockar för koden!

Jag vet inte riktigt, men det skulle skrivas i HTML 5 och det var tydligen väldigt, väldigt viktigt.

 

Det är några problem jag har, jag får inte min class: "aside" till att bli avlång och lägga sig på sidan liknande på bilden. Hur skriver jag detta? Jag är verkligen inte bra på detta men jag behöver hjälp. Fick ett tips om att göra den till en "box" eller "låda" för att sen kunna flytta runt den med align och margin. Samma med själva huvudfönstret för att få ordning på allt.

Länk till kommentar
Dela på andra webbplatser

Jag bugar och bockar för koden!

Jag vet inte riktigt, men det skulle skrivas i HTML 5 och det var tydligen väldigt, väldigt viktigt.

 

Det är några problem jag har, jag får inte min class: "aside" till att bli avlång och lägga sig på sidan liknande på bilden. Hur skriver jag detta? Jag är verkligen inte bra på detta men jag behöver hjälp. Fick ett tips om att göra den till en "box" eller "låda" för att sen kunna flytta runt den med align och margin. Samma med själva huvudfönstret för att få ordning på allt.

 

Jo, det brukar heta så. Men vad är syftet med att ha det i HTML5?

 

Man får komplettera med CSS för att det ska se ut på ett visst sätt, som jag skrev.

Typ så här:

	<style type="text/css">
		html{font: normal normal 1em/1.5}
		body{padding:20px; font-size:0.8em;}

		h1 {border-bottom:3px solid #ccc;padding-bottom:10px}
		p.ingress {font-weight:bold}

		#wrapper {padding: 0 20px; border: 1px solid #999; width:800px;overflow:hidden}
		div.aside{float:right; background-color: #f5f5f5; padding:0 10px;width:200px; margin: 0 0 10px 10px; }
		div.aside p img {width:150px; height:150px; background-color:#eee;}
	</style>

Länk till kommentar
Dela på andra webbplatser

Jo, det brukar heta så. Men vad är syftet med att ha det i HTML5?

 

Man får komplettera med CSS för att det ska se ut på ett visst sätt, som jag skrev.

Typ så här:

	<style type="text/css">
		html{font: normal normal 1em/1.5}
		body{padding:20px; font-size:0.8em;}

		h1 {border-bottom:3px solid #ccc;padding-bottom:10px}
		p.ingress {font-weight:bold}

		#wrapper {padding: 0 20px; border: 1px solid #999; width:800px;overflow:hidden}
		div.aside{float:right; background-color: #f5f5f5; padding:0 10px;width:200px; margin: 0 0 10px 10px; }
		div.aside p img {width:150px; height:150px; background-color:#eee;}
	</style>

 

Jag löste situationen galant då jag använde Dreamweaver CS5 där HTML5 redan fanns. Gjorde om din kod lite och sen så fixade det sig med all hjälp som finns i programmet så jag lyckades helt enkelt göra en CSS fil och rätta till alla problem.

 

Tack så hemskt mycket Jonas!

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...