web-dev-qa-db-ja.com

初めてのウェブサイトのサポートが必要です！

これは、HTMLとCSSを使用して作成する最初のWebサイトです。本当に学習しているのですが、間違ったコードを書く前にいくつかの質問に答える必要があります。

最初に、サイトについて計画しているデザインについて少し紹介するので、同じページにいます。これは、ALOTを読むためのコンテンツが多いWebサイトで、約52の記事が含まれます。デザインの上部に固定ナビゲーションがあります。ホームページは序文から始まり、その下には見出し、主な引用、詳細なリンクを含む記事モジュールのコレクションがあります。ビデオの同じ概念の下に、私の主なフーターがあります。これはホームページ用です。

質問1：マークアップ内で一度同じフォーマットを保持するために自分のコンピューターで書いた記事を取得するにはどうすればいいですか？そうでない場合は、pタグで手書きで書いた52の記事のそれぞれをマークアップする必要があります、強力なタグなど。記事の長さを考えると、このようなことを行うことはできません。もっと良い方法はありますか？

質問＃2：レイアウトにパーセントを使用し、フォントなどにemを使用することにしました。各記事モジュールブロックの間にマージンスペース（空白）を作成しようとしていますが、実際の数値ではなくパーセントを使用しているため、その方法について混乱しています。

質問＃3：この時点で、これまでのhtmlとcssを確認し、コードが大きくなる前に行う変更についてアドバイスしてください。

最後にコード：

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>

私のすべてのCSSは現在reset.cssにあります：

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

v2.0 | 20110126ライセンス：なし（パブリックドメイン）* /

html、body、div、span、applet、object、iframe、h1、h2、h3、h4、h5、h6、p、blockquote、pre、a、abbr、acronym、address、big、cite、code、del、dfn、 em、img、ins、kbd、q、s、samp、small、strike、strong、sub、sup、tt、var、b、u、i、center、dl、dt、dd、ol、ul、li、fieldset、フォーム、ラベル、凡例、表、キャプション、tbody、tfoot、thead、tr、th、td、記事、脇、キャンバス、詳細、埋め込み、図、figcaption、フッター、ヘッダー、hgroup、メニュー、nav、出力、Ruby、セクション、要約、時間、マーク、オーディオ、ビデオ{margin：0;パディング：0;ボーダー：0;フォントサイズ：100％;フォント：継承;垂直方向の整列：ベースライン。 }/*古いブラウザのHTML5表示ロールリセット* /記事、脇、詳細、figcaption、図、フッター、ヘッダー、hgroup、メニュー、nav、セクション{display：block; } body {行の高さ：1; } ol、ul {リストスタイル：なし; } blockquote、q {quotes：none; } blockquote：before、blockquote：after、q：before、q：after {content： '';内容：なし; } table {border-collapse：collapse;ボーダー間隔：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。）書いた52の記事について、PDF記事のコピーをリンクして、それで完了できます。これにより、モバイルデバイスの設計と互換性の問題が発生する可能性がありますが、お勧めしません。より良い方法があるかもしれませんが、私は弾丸を噛んでコーディングをするだけです。最初の記事が完了すると、残りはそれをテンプレートとして使用し、はるかに高速になります。

Q2。）サイジングに関する質問については、少し調査する必要があります。パーセント値をマージンとして使用できます。設計と間隔のガイドもたくさんあります。 http://www.adamkaplan.me/grid/ これは、数日前に見つけたレスポンシブデザインテクニックの非常に優れたチュートリアルです。

Q3。）特定のコードに問題がある場合は、投稿してください。誰かがそれを確認します。メモを付けずにページ全体をレビューするように誰かに依頼することは困難です。コーディングし続けるだけで、コードを作成すればするほど、修正できる小さな間違いを見つけることができます。退屈ですが、プロセスの一部です。

1
Matt

http://Word2cleanhtml.com これは、あなたの記事をWord文書からhtmlに変換するサイトです。私はそれを広範囲にテストしたことはありませんが、私がやった小さなテストではうまくいきました。これにより、その面での時間を節約できます。

1
Mike Kostrey