web-dev-qa-db-fra.com

Besoin d'aide avec le premier site web jamais!

C’est le premier site Web que je réalise avec HTML et CSS. Vraiment, je suis en train d'apprendre au fur et à mesure, mais j'ai besoin de réponses à quelques questions avant d'écrire pour du code incorrect.

Tout d’abord, une petite introduction sur le design que j’avais prévu pour le site, nous sommes donc sur la même page. Ceci est un site Web lourd en contenu pour BEAUCOUP de lecture et contiendra environ 52 articles. La conception aura une navigation fixe sur le dessus. La page d'accueil commencera par une introduction et ci-dessous, une collection de modules d'articles contenant un en-tête, une citation principale et un lien en savoir plus, sous le même concept pour les vidéos, puis pour mon créateur principal. Ceci est pour la page d'accueil.

Question n ° 1: Comment puis-je obtenir les articles que j'ai écrits sur mon ordinateur pour conserver le même formatage une fois à l'intérieur de mon balisage, sinon je dois annoter chacun des 52 articles que j'ai écrits à la main avec des balises p , tags forts, ect .. et je ne peux pas l'image de faire une telle chose compte tenu de combien de temps les articles sont. Y a-t-il un meilleur moyen?

Question n ° 2: J'ai décidé d'utiliser des pourcentages pour la mise en page et des ems pour les polices et autres. J'essaie de créer un espace de marge (espace blanc) entre chaque bloc de module d'article, mais je ne comprends pas comment procéder car j'utilise des pourcentages et non des nombres réels.

Question n ° 3: À ce stade, veuillez consulter mon code html et css jusqu'à présent et me conseiller sur les modifications à apporter avant que mon code ne devienne trop volumineux.

Enfin le code:

HTML:

    <!doctype html>

    <html>
    <head>
<!--[if lt IE 9]>
    <script src="html5shiv/dist/html5shiv.js"></script>
<![endif]-->
<meta charset="UTF-8">
<title>The Sea Of Glass | A Biblical Understanding of Life</title>
<link rel="stylesheet" href="css/reset.css" type="text/css">
    </head>
    <body>
<div class="wrapper">
    <header>
        <h1>The Sea Of Glass, <span class="sub-title">a biblical understanding of        life</span></h1>
        <nav>
            <ul>
                <li><a href="#home-page" class="current-link">Home</a>        </li>
                <li><a href="#articles">Articles</a></li>
                <li><a href="">Videos</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </nav>
    </header><!-- end header -->

    <div id="main-content-wrapper">

        <div id="modules-wrapper">
            <h3>On God</h3>
            <section class="article-module">
                <h4>Statement of Beliefs</h4>
                <blockquote cite="articles/statements-of-beliefs.html">
                    <p>
                        <em>There is NOTHING that a man can do to open anyone’s mind to truth That is Yah’s job!</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/statements-of-beliefs.html">Read More</a>
                </footer>
            </section><!-- end .article-module -->
            <section class="article-module">
                <h4>Article Name</h4>
                <blockquote cite="articles/name">
                    <p>
                        <em>Main Quote Will Go Here</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/name">Read More</a>
                </footer>
            </section><!-- end .article-module -->
            <section class="article-module">
                <h4>Article Name</h4>
                <blockquote cite="articles/name">
                    <p>
                        <em>Main Quote Will Go Here</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/name">Read More</a>
                </footer>
            </section><!-- end .article-module -->

            <h3>On Man</h3>
            <section class="article-module">
                <h4>Article Name</h4>
                <blockquote cite="articles/name">
                    <p>
                        <em>Main Quote Will Go Here</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/name">Read More</a>
                </footer>
            </section><!-- end .article-module -->
            <section class="article-module">
                <h4>Article Name</h4>
                <blockquote cite="articles/name">
                    <p>
                        <em>Main Quote Will Go Here</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/name">Read More</a>
                </footer>
            </section><!-- end .article-module -->
            <section class="article-module">
                <h4>Article Name</h4>
                <blockquote cite="articles/name">
                    <p>
                        <em>Main Quote Will Go Here</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/name">Read More</a>
                </footer>
            </section><!-- end .article-module -->


            <h3>Consitutional Awareness</h3>
            <section class="article-module">
                <h4>Article Name</h4>
                <blockquote cite="articles/name">
                    <p>
                        <em>Main Quote Will Go Here</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/name">Read More</a>
                </footer>
            </section><!-- end .article-module -->
            <section class="article-module">
                <h4>Article Name</h4>
                <blockquote cite="articles/name">
                    <p>
                        <em>Main Quote Will Go Here</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/name">Read More</a>
                </footer>
            </section><!-- end .article-module -->
            <section class="article-module">
                <h4>Article Name</h4>
                <blockquote cite="articles/name">
                    <p>
                        <em>Main Quote Will Go Here</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/name">Read More</a>
                </footer>
            </section><!-- end .article-module -->

            <h3>Videos</h3>
            <section class="video-module">
                <h4>Name of video</h4>
                <p>My embeded video will go here</p>
            </section><!-- end .video-module -->
            <section class="video-module">
                <h4>Name of video</h4>
                <p>My embeded video will go here</p>
            </section><!-- end .video-module -->
            <section class="video-module">
                <h4>Name of video</h4>
                <p>My embeded video will go here</p>
            </section><!-- end .video-module -->
        </div><!-- end #modules-wrapper -->
        <footer class="main-footer">
            Here lies the footer of the website
        </footer>
    </div><!-- end #main-content-wrapper -->
</div><!-- end .wrapper -->
    </body>
    </html>

Tous mes css sont dans reset.css en ce moment:

     /* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126 Licence: aucune (domaine public) * /

html, corps, div, span, applet, objet, iframe, h1, h2, h4, h4, h5, h6, p, blockquote, pre, un, abbr, acronyme, adresse, grand, citer, code, del, dfn, em, img, ins, kbd, q, s, samp, petit, grève, fort, sous, sup, tt, var, b, u, i, centre, dl, dt, dd, ol, ul, li, champs, formulaire, étiquette, légende, tableau, légende, tbody, tbody, tfoot, thead, article, de côté, article, de côté, toile, détails, intégrer, figure, figcaption, pied de page, en-tête, hgroup, menu, navigation, sortie, Ruby, section, résumé, heure, marque, audio, vidéo {margin: 0; rembourrage: 0; bordure: 0; taille de police: 100%; font: hériter; alignement vertical: ligne de base; }/* Réinitialisation du rôle d'affichage HTML5 pour les anciens navigateurs */article, à part, détails, figcaption, figure, pied de page, en-tête, hgroup, menu, navigation, section {display: block; } body {line-height: 1; } ol, ul {list-style: none; } blockquote, q {quotes: none; } blockquote: before, blockquote: after, q: before, q: after {content: ''; contenu: aucun; } table {border-collapse: collapse; espacement des bordures: 0; }

    /********************************* end of css reset ***************************************/

    .wrapper {
width: 90%;
margin: 0 auto;
margin-top: 2em;
background-color: #c3c3c3;
font: 100% Arial, 'Helvetica Neue', 'Lucida Grande', sans-serif; /* 16px base */
    }   
    header {
position: fixed;
top: 0;
left: 0;
width: 100%; 
background-color: red;
    }
    header h1 { 
float: left;
font-size: 1.5em;
margin-top: 8px;
padding-left: 1em;
    }
    header h1, header li { border: 1px solid black; }
    nav { 
float: right;
    }
    nav li {
padding: 1em;
margin: auto inherit;
    }
    nav li {
display: inline-block;
    }
    #main-content-wrapper {
margin-top: 3.5em;  
    }
    .intro {
background-color: blue;
width: 80%;
padding: 1em;
line-height: 1.5em;
margin: 0 auto;
    }

    h3 {
clear: left;
text-align: center;
    }

    #modules-wrapper {
background-color: green;
width: 100%;
    }

    .article-module {
float: left;
width: 33.3333333333%;
margin: ;
background-color: black;
color: white;

    }
htmlweb-developmentcsswebsite-design
2
DEdesigns57

Q1.) Pour vos 52 articles que vous avez écrits, vous pouvez simplement lier une copie PDF de l'article et en finir. Cela peut entraîner des problèmes de conception et de compatibilité pour les appareils mobiles et je ne le recommanderais pas cependant. Il y aurait peut-être un meilleur moyen mais je me contenterais de mordre la balle et de coder. Une fois que le premier article est terminé, le reste l'utilisera comme modèle et ira beaucoup plus vite.

Q2.) En ce qui concerne vos questions concernant le dimensionnement, il vous suffira de faire un peu de recherche. Vous pouvez utiliser des valeurs en pourcentage comme marges. Il existe également de nombreux guides sur la conception et l’espacement. http://www.adamkaplan.me/grid/ C'est un très bon tutoriel sur les techniques de design réactif que j'ai trouvé il y a quelques jours.

Q3.) Si vous rencontrez un problème avec un morceau de code spécifique, postez-le et quelqu'un le vérifiera. Demander à quelqu'un de passer en revue une page entière sans notes peut être difficile. Continuez simplement à coder et plus vous codez, plus vous trouverez de petites erreurs que vous pouvez corriger. C'est fastidieux mais fait partie du processus.

1
Matt

http://Word2cleanhtml.com Voici un site qui convertira vos articles en HTML à partir des documents Word. Je ne l'ai pas testé de manière approfondie, mais cela a bien fonctionné lors des petits tests que j'ai effectués. Cela devrait vous faire gagner un peu de temps.

1
Mike Kostrey