Sélectionner une page


Le développement Web est un domaine dans lequel vous devez vous tenir au courant des dernières technologies et techniques pour être au sommet de votre forme. Et ce n’est pas étonnant – c’est un domaine qui évolue à un rythme incroyable. La norme actuelle sera obsolète dans quelques années seulement.

Mais les changements ne viennent de nulle part. Les premiers utilisateurs utiliseront ce que nous utiliserons chaque jour dans quelques années. L’une de ces technologies est HTML5 – la nouvelle version du langage de base du web.

Aujourd’hui, nous en faisons un HTML5 Modèle Web qui utilise certaines des nouvelles fonctionnalités de CSS3 et jQuery scrollTo Brancher. Étant donné que HTML5 est toujours en cours d’élaboration, vous pouvez éventuellement télécharger un Version XHTML le gabarit Ici.

Étape 1 – La conception

Chaque processus de conception commence par une idée initiale sur laquelle vous construisez plus tard. À ce stade, les concepteurs travaillent généralement avec des programmes tels que Photoshop pour travailler sur les détails et voir comment tout cela s’intègre.

i1.png

Ensuite, la conception est codée à la main en utilisant HTML et CSS qui vont de pair. L’arrière-plan, les couleurs et les polices ne sont plus édités en détail, mais la zone de contenu est travaillée en détail.

Étape 2 – HTML

C’est le bon moment pour remarquer HTML5 est toujours au travail. Cela restera probablement comme ça jusqu’à environ 2022 (Je suis absolument sérieux). Cependant, certaines parties de la norme sont complètes et peuvent être utilisées aujourd’hui.

Dans ce tutoriel, nous utiliserons certaines des balises introduites avec cette nouvelle version de HTML:

  • Entête – renferme votre en-tête de page;
  • Bas de page – renferme votre pied de page;
  • section – regroupe le contenu en sections (par exemple zone principale, barre latérale, etc.);
  • éléments – sépare les articles individuels du reste de la page;
  • ne sont pas – contient votre menu de navigation;
  • numéro – comprend généralement une image qui sera utilisée comme illustration pour votre article.

Ceux-ci sont utilisés exactement comme vous le feriez avec des divs normaux. A la différence que ces balises organisent votre page sémantiquement. En d’autres termes, vous pouvez présenter votre contenu d’une manière qui rend le contenu de votre page plus facile à identifier. En conséquence, des services comme les moteurs de recherche vous apporteront des visiteurs plus ciblés, augmentant vos ventes (et même les leurs).

Il y en a cependant quelques-uns Implications en utilisant HTML5 aujourd’hui. L’un des plus remarquables est la famille de navigateurs IE qui ne prend pas en charge ces balises (mais elles peuvent être corrigées avec un simple fichier d’inclusion JavaScript). Pour cette raison, votre décision de migrer vers HTML5 doit être basée sur l’audience de votre site Web. Et c’est uniquement à cette fin que nous publions un version XHTML pure également ce modèle.

template.html – section d’en-tête

<!DOCTYPE html> <!-- The new doctype -->

<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Coding A CSS3 &amp; HTML5 One Page Template | Tutorialzine demo</title>

    <link rel="stylesheet" type="text/css" href="https://tutorialzine.com/2010/02/styles.css" />

    <!-- Internet Explorer HTML5 enabling script: -->

    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <style type="text/css">

            .clear {
                zoom: 1;
                display: block;
            }

        </style>

    <![endif]-->

</head>

Vous pouvez remarquer le nouveau à la première ligne, qui indique au navigateur que la page a été créée à l’aide de la norme HTML5. C’est aussi beaucoup plus court et plus facile à retenir que l’ancien doctype.

Maintenant que vous avez défini le codage et le titre du document, nous allons ajouter un fichier JS spécial qui permettra à Internet Explorer (n’importe quelle version) de restituer correctement les balises HTML5. Cela signifie à son tour que lorsqu’un visiteur utilise IE et a JavaScript désactivéla page affichera tout foutu. Pour cette raison, en fonction de votre public cible, vous devez envisager la version XHTML standard de ce modèle, qui fonctionnera en n’importe quel navigateur et est publié ici gratuitement pour tous nos lecteurs.

template.html – partie du corps

<body>

    <section id="page"> <!-- Defining the #page section with the section tag -->

    <header> <!-- Defining the header section of the page with the appropriate tag -->

        <h1>Your Logo</h1>

        <h3>and a fancy slogan</h3>

        <nav class="clear"> <!-- The nav link semantically marks your main site navigation -->

            <ul>

                <li><a href="https://tutorialzine.com/2010/02/#article1">Photoshoot</a></li>
                <li><a href="#article2">Sweet Tabs</a></li>
                <li><a href="#article3">Navigation Menu</a></li>

            </ul>

        </nav>

    </header>

Ici, nous utilisons le nouveau section Balises qui divisent votre page en sections sémantiques distinctes. Extrême est que #Section latérale qui est défini sur une largeur de 960px dans la feuille de style (une largeur assez standard pour les écrans d’ordinateur plus anciens). Ceci est suivi de la balise d’en-tête et de la balise de navigation.

Noter la href Attributs des liens – la partie après le symbole de hachage # correspond à ça JE VOUDRAIS de éléments nous voulons faire défiler jusqu’à.

template.html – Article

    <!-- Article 1 start -->

    <div class="line"></div>  <!-- Dividing line -->

    <article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->

        <h2>Photoshoot Effect</h2>

        <div class="line"></div>

        <div class="articleBody clear">

            <figure> <!-- The figure tag marks data (usually an image) that is part of the article -->

                <a href="https://tutorialzine.com/2010/02/photo-shoot-css-jquery/">
                    <img src="https://tutorialzine.com/img/featured/641.jpg" width="620" height="340" /></a>

            </figure>

            <p>In this tutorial, we are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis .... </p>

        </div>

    </article>

    <!-- Article 1 end -->

Le balisage ci-dessus est partagé par tous les articles. La première est la ligne de démarcation (la meilleure solution sémantique serait un


ligne, qui a le rôle supplémentaire d’un séparateur logique en HTML5, mais malheureusement il est impossible de styliser entre les navigateurs, alors restons avec DIV). Ensuite, nous avons le nouveau éléments Jour, avec un Identifiant uniquequi est également utilisé par la navigation Faites défiler la page.

À l’intérieur, nous avons le titre de l’article, deux paragraphes et le nouveau numéro Balise qui dénote l’utilisation d’images dans l’article.

template.html – pied de page

        <footer> <!-- Marking the footer section -->

            <div class="line"></div>

            <p>Copyright 2010 - YourSite.com</p> <!-- Change the copyright notice -->
            <a href="https://tutorialzine.com/2010/02/#" class="up">Go UP</a>
            <a href="https://tutorialzine.com/" class="by">Template by Tutorialzine</a>

        </footer>

    </section> <!-- Closing the #page section -->

    <!-- JavaScript Includes -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
    <script src="script.js"></script>

    </body>

</html>

Après tout, nous les avons Bas de page Jour qui fait exactement ce que vous voulez qu’il fasse. Au bas de la page se trouvent le reste des éléments JavaScript qui ajoutent que bibliothèque jQuery et le scrollTo Plug-in que nous utiliserons dans les prochaines étapes.

i2.png

Étape 3 – CSS

Puisque nous utilisons HTML5, nous devons prendre des mesures supplémentaires avec le style. Les balises introduites dans cette nouvelle version de HTML n’ont pas encore reçu de style standard. Cependant, cela peut être facilement corrigé avec quelques lignes de code CSS, et la page fonctionne et ressemble à ce qu’elle est censée:

styles.css – Partie 1

header,footer,
article,section,
hgroup,nav,
figure{
    /* Giving a display value to the HTML5 rendered elements: */
    display:block;
}

article .line{
    /* The dividing line inside of the article is darker: */
    background-color:#15242a;
    border-bottom-color:#204656;
    margin:1.3em 0;
}

footer .line{
    margin:2em 0;
}

nav{
    background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
    padding:0 5px;
    position:absolute;
    right:0;
    top:4em;

    border:1px solid #FCFCFC;

    -moz-box-shadow:0 1px 1px #333333;
    -webkit-box-shadow:0 1px 1px #333333;
    box-shadow:0 1px 1px #333333;
}

nav ul li{
    display:inline;
}

nav ul li a,
nav ul li a:visited{
    color:#565656;
    display:block;
    float:left;
    font-size:1.25em;
    font-weight:bold;
    margin:5px 2px;
    padding:7px 10px 4px;
    text-shadow:0 1px 1px white;
    text-transform:uppercase;
}

nav ul li a:hover{
    text-decoration:none;
    background-color:#f0f0f0;
}

nav, article, nav ul li a,figure{
    /* Applying CSS3 rounded corners: */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

Nous devons essentiellement arrêter cela affichage Valeur des nouvelles balises aussi bloquercomme vous pouvez le voir sur les premières lignes. Après cela, nous pouvons les styliser comme des divs normaux.

Nous concevons les lignes horizontales, les articles et les boutons de navigation, ces derniers étant organisés sous forme de liste non ordonnée dans le ne sont pas Étiqueter. Ci-dessous, nous attribuons le Rayon du bord Propriété pour quatre types d’éléments différents à la fois, ce qui économise beaucoup de code.

styles.css – Partie 2

/* Article styles: */

#page{
    width:960px;
    margin:0 auto;
    position:relative;
}

article{
    background-color:#213E4A;
    margin:3em 0;
    padding:20px;

    text-shadow:0 2px 0 black;
}

figure{
    border:3px solid #142830;
    float:right;
    height:300px;
    margin-left:15px;
    overflow:hidden;
    width:500px;
}

figure:hover{
    -moz-box-shadow:0 0 2px #4D7788;
    -webkit-box-shadow:0 0 2px #4D7788;
    box-shadow:0 0 2px #4D7788;
}

figure img{
    margin-left:-60px;
}

/* Footer styling: */

footer{
    margin-bottom:30px;
    text-align:center;
    font-size:0.825em;
}

footer p{
    margin-bottom:-2.5em;
    position:relative;
}

footer a,footer a:visited{
    color:#cccccc;
    background-color:#213e4a;
    display:block;
    padding:2px 4px;
    z-index:100;
    position:relative;
}

footer a:hover{
    text-decoration:none;
    background-color:#142830;
}

footer a.by{
    float:left;

}

footer a.up{
    float:right;
}

Dans la deuxième partie du code, nous appliquons un style plus détaillé aux éléments. UNE largeur pour le page Section a flotter Propriété pour le numéro Balise et styles pour les liens dans le pied de page. Certains styles ne sont pas inclus ici mais vous pouvez les voir dans styles.css.

Passons maintenant à l’étape suivante.

i3.png

Étape 4 – jQuery

Pour améliorer le modèle, nous créons un effet de défilement fluide une fois qu’un lien de navigation est cliqué scrollTo Plug-in jQuery que nous avons inclus sur la page précédente. Pour que cela fonctionne, il suffit de parcourir les liens dans la barre de navigation (et le lien UP dans le pied de page) et d’attribuer un événement onclick qui déclenchera cela $ .srollTo () Fonction définie par le plug-in.

script.js

$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */

    $('nav a,footer a.up').click(function(e){

        // If a link has been clicked, scroll the page to the link's hash target:

        $.scrollTo( this.hash || 0, 1500);
        e.preventDefault();
    });

});

Notre modèle est maintenant terminé!

Emballage

Dans ce didacticiel, nous avons utilisé les nouvelles capacités sémantiques de HTML5 pour concevoir et coder un modèle Web d’une page. Vous pouvez l’utiliser gratuitement, à la fois personnellement et commercialement, à condition de laisser le backlink intact.

Si vous aimez ce tutoriel, assurez-vous de le lire notre flux Twitter Nous partageons également les derniers et meilleurs liens de conception et de développement.





Source link

Recent Posts