Salut, je suis nouveau à la programmation web. Je veux créer un gabarit de type css où toutes les pages semblent identiques sauf le contenu des pages. J'ai donc un logo et des onglets en haut où vous pouvez naviguer sur le site, mais le contenu des pages serait différent (contact, about, info.etc).modèle html page
Comment créer ce modèle?
Vous voudrez peut-être essayer de construire votre page de modèle en HTML + CSS, puis en utilisant PHP simple pour construire vos pages. Vous pouvez, par exemple, briser votre page en deux fichiers séparés:
header.php:
<!DOCTYPE html>
<html>
<head><title>Hello World</title></head>
<body>
<div id="main-content">
et footer.php:
</div>
</body>
</html>
Et puis, pour tous les fichiers qui utilisent ce modèle, vous utiliseriez quelque chose comme ceci:
<?php include("header.php"); ?>
<!--All the content of your page goes here-->
<h1>Hello World!</h1>
<p>Lorem Ipsum</p>
<?php include("footer.php"); ?>
Donc, si quelqu'un a visité le fichier précédent (disons qu'il est appelé index.php), les fichiers seraient assemblés et la sortie HTML finale ressemblerait à quelque chose comme:
<!DOCTYPE html>
<html>
<head><title>Hello World</title></head>
<body>
<div id="main-content">
<!--All the content of your page goes here-->
<h1>Hello World!</h1>
<p>Lorem Ipsum</p>
</div>
</body>
</html>
Assurez-vous que vous avez PHP en cours d'exécution sur votre serveur, ou cela ne fonctionnera pas du tout. De plus, si vous souhaitez développer votre site localement, je vous recommande d'utiliser XAMPP pour obtenir un hôte Apache local.
Ce type de solution n'est pas spécifique au php. ASP.net devrait être capable de faire la même chose pour les serveurs Windows. Et il y a toujours des inclusions shtml directes si rien sur le contenu n'est dynamique. –
Bien sûr. Je pensais que PHP était un bon exemple parce qu'il est disponible sur presque n'importe quel hébergeur et n'est pas trop difficile à apprendre. – derekerdmann
Vous avez un aperçu de certains des nombreux sites de modèles - par ex. http://www.freecsstemplates.org/ ou http://www.freecsstemplates.com/. Les chances sont que vous trouverez quelque chose près de ce que vous voulez réaliser.
Je le construis à partir de zéro – SuperString
Dans ce cas, si vous trouvez quelque chose que vous aimez, vous construisez à partir de zéro quelque chose de similaire –
Je suggère de commencer par un croquis de papier. Il suffit de dessiner des cases pour les différentes zones que chaque page aura ... comme Logo, En-tête, Contenu, Pied de page, etc. Il y a plusieurs façons d'aborder cette première étape. Here's one explanation of the gray box method.
Une fois que vous avez une idée approximative comme celle-ci, créez 1 page échantillon. Vous pouvez remplir le contenu avec lorum ipsum. Obtenez le CSS à la façon dont vous l'aimez, et assurez-vous que chaque section de la page (à peu près chaque case de votre croquis) est dans son propre div unique (id = "...").
Une fois tout cela configuré, votre fichier CSS est prêt à fonctionner.
Pour créer votre fichier HTML de modèle, prenez la page HTML sur laquelle vous avez travaillé et supprimez tout le lorum ipsum.
CSS Zen Garden est un endroit idéal pour chercher l'inspiration CSS.
Si vous êtes un débutant, je pourrais suggérer de tester Adobe Dreamweaver et d'utiliser des modèles DreamWeaver (.dwt). C'est vraiment, vraiment facile à utiliser et il vous permet de créer un fichier maître (modèle) avec des parties modifiables.
Si vous avez Visual Studio, MasterPages fait un travail similaire!
Bonne chance et bienvenue dans le monde du développement Web!
Sur la plate-forme Mac, essayez Flux - http://www.theescapers.com/. Très bel outil WYSIWYG/niveau de code, plus abordable que DW –
Si vous souhaitez démarrer rapidement le développement Web, je vous suggère de vous abonner à lynda.com. Ils ont eu beaucoup de bons tutoriels pour les différentes technologies, etc. Jetez un oeil à: http://www.lynda.com/home/ViewCourses.aspx?lpk0=118 (Et non, je ne suis pas payé par lynda.com ... :) Je trouve juste que leurs tutoriels sont un bon point de départ) –