Προς το περιεχόμενο

Template σε ιστοσελίδα

pbp

Από τον pbp
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

SlackulatoR Grand Master

SlackulatoR

Δημοσ.
Δημοσ.

Αν δουλέψω με iframes με την css τι γίνεται ?

Το css του αρχείου που περιέχει τα iframes μπορεί να αναφερθεί σε elements του αρχείου που περιγράφει το iframe ?

 

Φορτώνει και η css μαζί με το αντίστοιχο html. 

Αν για παράδειγμα στο header.html έχεις κάνει link ένα css αρχείο θα φορτώσει κανονικά. Επίσης θα φορτώσει αν χρησιμοποιήσεις <style></style> μέσα στο head.

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
pbp Mentor

pbp

Δημοσ.
  • Μέλος
Δημοσ.

και κάτι ακόμα..
Άμα έχω

<p><a href="aaa.html">aaa</a></p>

μέσα στο iframe μου ανοίγει ο σύνδεσμος μέσα στο iframe.
Εγώ θα ήθελα να ανοίγει μέσα στο παράθυρο που περιέχει το iframe :/

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
SlackulatoR Grand Master

SlackulatoR

Δημοσ.
Δημοσ.

και κάτι ακόμα..

Άμα έχω

<p><a href="aaa.html">aaa</a></p>

μέσα στο iframe μου ανοίγει ο σύνδεσμος μέσα στο iframe.

Εγώ θα ήθελα να ανοίγει μέσα στο παράθυρο που περιέχει το iframe :/

 

Δοκίμασε αυτό, βάλε μέσα στο head του header.html π.χ:

<base target="_parent" />

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
migf1 Mentor

migf1

Δημοσ.
Δημοσ.

και κάτι ακόμα..

Άμα έχω

<p><a href="aaa.html">aaa</a></p>
μέσα στο iframe μου ανοίγει ο σύνδεσμος μέσα στο iframe.

Εγώ θα ήθελα να ανοίγει μέσα στο παράθυρο που περιέχει το iframe :/

 

 

Μπορείς στο κάθε σου iframe να ορίσεις ένα name ή ένα id attribute (το name είναι πιο συμβατό νομίζω) το οποίο κατόπιν το χρησιμοποιείς ως target attribute στα anchor elements σου.

 

Π.χ. στο index.htm έχεις...

...
<iframe src="menu.htm"></iframe>
...
<iframe src="content.htm" name="content"></iframe>

Και στο menu.htm έχεις...

...
<a href="content.htm" target="content">Home</a>
<a href="http://insomnia.gr/" target="content">Insomnia</a>
...

ή για να μην το γράφεις συνέχεια, μπορείς να το ορίσεις ως default target στο head section του menu.htm (ή όποιου άλλου αρχείου σου)...

<!-- menu.htm -->
<head>
	...
	<base target="content"> 
</head>

Από εκεί και πέρα, αν δεν σε χαλάει που έχουν γίνει obsolete στην HTML5, μπορείς εναλλακτικά να χρησιμοποιήσεις framesets και frames, μαρκάροντας τα αρχεία σου ως HTML 4.01.

 

Δεν ξέρω αν έκανα καλά, αλλά σου έφτιαξα πολύ πρόχειρα το layout που ζήτησες, χρησιμοποιώντας framesets+frames (χωρίς να ξέρω αν επιτρέπεται να τα χρησιμοποιήσεις κι εσύ).

 

Ελπίζω να μην το παραδώσεις ως δικό σου, αλλά να το χρησιμοποιήσεις σαν βάση για να φτιάξεις κάτι όντως δικό σου.

 

index.htm

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Sample layout using html 4.01 frames</TITLE>
	<link type="text/css" rel="stylesheet" href="style.css">
</head>

<frameset rows="64px,*,48px" frameborder="0">
	<frameset id="header">
		<frame src="header.htm">
	</frameset>
	<frameset cols="150px,*">
		<frame id="id-menu" src="menu.htm">
		<frame id="id-content" name="content" src="content.htm" scrolling="yes" >
	</frameset>
	<frameset id="footer">
		<frame src="footer.htm">
	</frameset>
</frameset>

<noframes>
	<body>
		<p>This page uses frames, but your browser doesn't support them.</p>
	</body>
</noframes>
</html>

 

 

header.htm

 

 

<html>
<head>
	<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body class="header">
	<h1>header</h1>
</body>
</html>

 

 

menu.htm

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
	<link type="text/css" rel="stylesheet" href="style.css">
	<base target="content"> 
</head>
<body class="menu">
	<h2>Menu</h2>

	<a href="content.htm">Home</a>
	<a href="http://bing.com/">Bing</a>
	<a href="http://insomnia.gr/">Insomnia</a>
	<a href="http://www.lipsum.com/">Lorem Ipsum</a>

</body>
</html>

 

 

content.htm

 

 

<html>
<head>
	<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body class="content">

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan mi eu dignissim fringilla. Aliquam vitae est ultricies, ultricies sem eu, vestibulum risus. Praesent ut dui dictum, condimentum dui eget, lobortis est. Vivamus sit amet nibh id nulla commodo vulputate. Donec dignissim eleifend lectus, a fringilla libero lacinia et. Etiam ac hendrerit arcu. Donec congue elit at lacus iaculis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut aliquet turpis vel accumsan posuere. Quisque nulla enim, blandit a odio a, ultricies dapibus velit. Aliquam commodo risus id dui adipiscing facilisis. Nulla quis rutrum odio.</p>

	<p>Aliquam ut dignissim felis, sed tincidunt ante. Nunc adipiscing ligula eget dolor adipiscing, iaculis tempor sem lobortis. Integer imperdiet mauris vel ligula fermentum, aliquam consequat metus gravida. Nullam quis diam eget tortor placerat dignissim. Phasellus volutpat ultricies arcu in sollicitudin. Nunc non dui nunc. Nunc volutpat justo dapibus, luctus diam quis, facilisis eros.</p>

	<p>Etiam bibendum nisi at dolor placerat, sit amet malesuada diam ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus dui elit, facilisis eget faucibus vitae, tempor suscipit nisl. Sed tempus lacinia ipsum, quis molestie lacus consectetur et. Pellentesque non aliquam libero. Sed ac turpis id ipsum aliquam tempor sit amet in dolor. Nullam laoreet eros dui, vel congue lectus sagittis in.</p>

	<p>Sed porta consectetur arcu, sit amet tincidunt ligula pretium nec. Fusce dignissim auctor posuere. Maecenas semper sollicitudin sem, eget fermentum nisi gravida eget. Ut tempus, purus id euismod egestas, lacus massa sagittis enim, et bibendum justo odio quis risus. Praesent tincidunt aliquam tellus at scelerisque. Pellentesque ut dolor semper sapien imperdiet consequat sed nec lorem. Nam consequat dolor id turpis dapibus aliquet. Aliquam quis hendrerit lacus, non convallis leo. Pellentesque ut blandit tellus. Sed sodales nunc ante, in cursus massa tempus non. Nam aliquam commodo magna quis vehicula.</p>

	<p>Nunc vel augue porta, accumsan urna rutrum, ultricies lorem. Etiam sagittis, leo non dictum mollis, dui justo luctus nunc, in auctor risus mauris in ligula. Nunc eu nunc odio. Aliquam et felis suscipit, laoreet purus in, luctus odio. Quisque lobortis aliquet iaculis. Nunc augue nisl, pharetra id lorem eu, ultricies interdum turpis. In eget risus neque. Aliquam erat volutpat. Donec venenatis est et augue ullamcorper mattis. Ut ultrices pellentesque tellus, at faucibus sapien ultrices sit amet. Vestibulum posuere neque vitae ornare varius. Maecenas et commodo neque. Sed gravida, nibh in dignissim consectetur, odio orci ultrices nulla, ut rutrum tortor felis id orci. Sed et ornare lorem.</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec magna ac nisl lacinia volutpat id et nisl. Curabitur in nunc condimentum, tempus justo vitae, egestas neque. Quisque eget est accumsan, laoreet mauris ac, pretium arcu. Praesent ornare in sem in condimentum. Suspendisse potenti. Aliquam iaculis bibendum faucibus. Ut id euismod odio. Morbi vel nisl pharetra ante fermentum facilisis. Nunc porta, sapien at iaculis eleifend, orci lacus volutpat dui, at elementum mi mauris semper enim. Duis ultrices eget quam in pharetra. Nulla facilisi. Quisque vitae orci ultrices urna sodales faucibus. Nunc gravida eleifend sem, in aliquet felis gravida sit amet. Fusce eu dui nec lectus adipiscing mattis. Cras dapibus augue sed erat vestibulum aliquet vitae a urna.</p>

	<p>Mauris elementum ipsum nec sem tempor luctus. Praesent vitae semper risus. Cras venenatis nunc velit, sed scelerisque velit elementum sit amet. Nulla pulvinar erat vitae arcu varius pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus fringilla nisi id auctor tincidunt. Aliquam ac purus ac lorem dictum varius. In vulputate tellus vel diam tincidunt tincidunt. Aliquam vitae urna ultricies, molestie diam vel, pretium purus.</p>

	<p>Sed sagittis libero eu risus egestas egestas. Mauris libero tellus, varius sodales sapien molestie, tristique mattis lectus. Pellentesque lobortis dui orci, a dictum ipsum fringilla sed. Vestibulum a nulla urna. Nunc viverra sapien rutrum tempor faucibus. Praesent aliquam mi vel augue dapibus, sit amet aliquet felis consectetur. Fusce vitae lobortis sem. Aenean sed magna in eros venenatis gravida. Cras mollis lorem et orci egestas euismod. Etiam tellus justo, posuere sed sem sit amet, vulputate vestibulum massa. Proin quis mi eu quam feugiat ornare. Vivamus a tristique mauris. Morbi vel lacus quis risus vehicula placerat ut ut urna. Morbi semper ut mauris id feugiat. Pellentesque sem risus, lacinia id laoreet sed, congue vitae velit. Cras vestibulum mauris egestas, tempus dui at, euismod nisl.</p>

	<p>Morbi quis hendrerit enim. Maecenas adipiscing, ligula quis elementum viverra, tellus lorem condimentum est, et egestas nunc massa vitae mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras bibendum consectetur lacus, at aliquam lectus pretium vel. Pellentesque aliquet a est et blandit. Fusce blandit metus vel iaculis cursus. Etiam sed ante a lorem molestie ornare. Fusce dictum dolor arcu, at consectetur libero porttitor nec. Suspendisse tincidunt bibendum lorem ut suscipit.</p>

	<p>Nam ut luctus eros. Nulla placerat sollicitudin pretium. Vivamus non consequat libero. Mauris laoreet sollicitudin ultricies. Duis ut dolor velit. Etiam pretium justo non libero tristique rutrum. Proin massa odio, consectetur a elementum in, placerat vitae mi. Sed feugiat scelerisque urna facilisis molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut consequat porttitor tempus. Aenean scelerisque lectus a ipsum iaculis, id viverra metus dictum. Nullam varius suscipit metus. Cras sed porta quam. Suspendisse a consectetur eros, at lacinia libero.</p>

	<p>Nulla facilisis diam a blandit aliquet. In non odio nec erat dictum rhoncus. Sed eget enim ac velit tempus dictum a eget dui. Aenean ut eros tellus. Nullam ac leo ante. Nullam pretium faucibus placerat. In hac habitasse platea dictumst. Pellentesque iaculis molestie dui, sed dignissim dui ullamcorper ut.</p>

	<p>Vestibulum non sem eros. Mauris ultrices nulla non eros commodo elementum. Proin dignissim massa ac turpis porttitor, a commodo erat gravida. Sed pretium faucibus libero, sed fermentum ipsum malesuada vel. In eros ligula, vulputate vel venenatis sed, ullamcorper id massa. Nunc lacus dolor, rhoncus vel purus in, aliquam tincidunt nulla. Donec nibh justo, porta et placerat vitae, porta sit amet leo. Cras dapibus feugiat leo. Aliquam nec arcu ut mauris tincidunt varius eu a massa. Proin aliquam arcu quis mauris dignissim, et tincidunt justo facilisis.</p>

	<p>Aenean a vulputate nibh. Morbi dignissim eu orci sit amet ultricies. Nulla quam ipsum, luctus eu semper et, dignissim ut ligula. Mauris auctor neque quis libero sollicitudin porta. Curabitur orci mauris, rhoncus a cursus eu, consequat quis eros. Duis aliquam orci id odio mattis aliquet. Pellentesque laoreet sapien sed lectus fringilla, eu facilisis nisl accumsan. Nam et aliquet ipsum. Vestibulum volutpat nisl in pretium mattis. Proin a tempor risus. Mauris ac lobortis erat, pulvinar suscipit ipsum. Phasellus lectus arcu, semper egestas ultricies vel, egestas eu augue. Nulla ullamcorper quis risus non lobortis. Morbi molestie ac justo mollis faucibus. Donec vehicula fringilla semper.</p>

	<p>Praesent dignissim sollicitudin odio, vitae tempor sem venenatis id. Pellentesque tempor fringilla suscipit. Donec blandit eleifend augue sed ullamcorper. Ut pulvinar est erat, nec tincidunt erat pharetra at. Integer vel enim mattis nunc imperdiet pharetra vitae ornare felis. Cras at aliquam lectus. Donec eget odio metus. Morbi tempor est felis, ac dapibus metus fermentum nec. Duis eget iaculis sem, non suscipit lorem. Ut dui neque, egestas ut lorem quis, rutrum cursus risus. Ut egestas convallis velit, vitae gravida purus mattis id.</p>

	<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tellus neque, tristique ut mi at, sagittis volutpat diam. Quisque aliquam odio vel fermentum scelerisque. Nunc laoreet arcu quis justo ultricies iaculis. Pellentesque tempus felis urna, in ornare lacus sagittis congue. Nunc eget nisl ante. Sed scelerisque augue ultricies leo tincidunt, ac cursus leo tincidunt. Vivamus adipiscing tincidunt molestie. Etiam est diam, blandit eget ultrices ac, viverra vitae diam. Cras a ligula malesuada, aliquam nulla scelerisque, venenatis nunc. Etiam iaculis posuere euismod. Nam fringilla ipsum sed mi molestie vestibulum. Donec id risus porttitor, congue orci ac, tempor arcu. Cras imperdiet ac erat eu venenatis. Mauris ut sagittis felis. Maecenas consequat leo ut lobortis aliquam.</p> 
</body>
</html>

 

 

footer.htm

 

 

<html>
<head>
	<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body class="footer">
	<p>footer</p>
</body>
</html>

 

 

style.css

 

 

body {
	font-family: arial;
	color: black;
}

frameset, frame{
	border: none;
	overflow: hidden;
	margin:0;
	padding:0;
}
frame#id-menu,
frame#id-content {
	overflow: auto;
}
.header,
.footer {
	text-align: center;
	background-color: lightgrey;
}
.header {
	font-size: 125%;
	font-weight: bold;
}
.footer {
	font-size: 2em;
}
.menu {
	color: white;
	background-color: grey;
}
.menu a {
	display: block;
	color: #ddd;
	text-decoration: none;
	margin-bottom: 0.5em;
}
.menu a:hover {
	color: cyan;
	text-decoration: underline;
}
.content {
	text-align: justify;
}

 

 

  • Like 1
Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
migf1 Mentor

migf1

Δημοσ.
Δημοσ.

:)

 

Με HTML5 δεν θα έχεις πρόβλημα, γιατί μαρκάρεις με DOCTYPE όσα αρχεία θέλεις να γίνονται rendered από τους browsers ως HTML 4.01.

 

Όμως όπως είπαμε από την αρχή, τα frames/iframes είναι παμπάλαια τεχνική με αρκετά προβλήματα. Δεν υπάρχει σύγχρονο site που να φτιάχνει με αυτά το layout του (και πολύ καλά κάνει :) ).

 

Δεν βλάπτει να τα ξέρεις, αλλά θα σου πρότεινα να φυλάξεις τη... δίψα σου για όταν θα μπείτε σε PHP ;)

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
pbp Mentor

pbp

Δημοσ.
  • Μέλος
Δημοσ.

Αυτά τα έτοιμα templates που έχει το Microsoft Expression Web είναι της προκοπής?
Το DWT αρχείο σε τι χρησημεύει ? Βασικά απ ότι βλέπω επαναλαμβάνεται πολύ ο κώδικας σε εκείνα :/

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...