ホームページ >ウェブフロントエンド >CSSチュートリアル >最初のウェブサイトを9つの理解しやすい手順で設計およびコーディングする
最初のウェブサイトを9つの理解しやすい手順で設計およびコーディングする
- Joseph Gordon-Levittオリジナル
- 2025-03-01 10:07:08303ブラウズ
1。 タイトルとヘッダーの編集
oknoは多くのHTMLデザインコードを提供していますが、このチュートリアルではindex-onepage-personal.htmlファイルに取り組んでいます。これは、初心者が取り組むためのシンプルなWebサイトデザインコードテンプレートです。 OKNO zipフォルダーを抽出した後、崇高なテキストとブラウザで開きます。崇高なテキストでは、ウェブサイトのデザインのためにサンプルHTMLコードを編集することができ、ブラウザではリアルタイムの変更が表示されます。一番上の行は、暗い背景に対する明るいロゴ用です。一番下の行は、明るい背景に対する暗いロゴのためです。これは、ブランディングがページに表示されることを確認するためです。
IMG
フォルダーにロゴのコピーを配置します<!-- Logo --><br> <a class="logo-wrapper" href="index.html"><br> <img class="logo logo-light lazy" src="/static/imghwm/default1.png" data-src="assets/img/logo-light.png" alt="最初のウェブサイトを9つの理解しやすい手順で設計およびコーディングする"><br> <img class="logo logo-dark lazy" src="/static/imghwm/default1.png" data-src="assets/img/logo-dark.png" alt="最初のウェブサイトを9つの理解しやすい手順で設計およびコーディングする"><br> </a><br>Assets
フォルダー内にあります。 Webサイトのデザインコード（
logo-light.pngandlogo-dark.png）のファイル名を変更して、ロゴのファイル名を一致させます。ここで何を変更できますか？背景画像とアバターを交換できます。また、名前、役職、専門分野、およびその他の情報を追加することもできます。 bg-imageimgタグから背景写真を編集できます。背景写真のsrc属性、画像を見つける場所を確認できます。 FinderまたはFile Explorerで、Assets＆gt;に向かいます。
img＆gt; 写真
写真フォルダーに入れてください。次に、 col-md-9セクション / homeコメント内のh1タグの名前を変更します。これらは、各href属性内の各dtタグ内のddタグ内のddタグ内のddタグで定義されます。 CVをダウンロードできるようにするには、HREF属性を追加します。 WebサイトデザインのサンプルHTMLコードの行は次のようになりました。今のところ、ボタンからファイルを開くことができることに注意してください。しかし、あなたのウェブサイトが公開されると、訪問者はあなたの履歴書をダウンロードすることができます。 サンプルHTMLコードに提供するサービスをWebサイトデザインに追加しましょう。このセクションまたはその他のセクションの名前をステップ1で変更した場合、チュートリアルの残りの部分をフォローすることができます。必ずH5タグを変更してください。これはあなたが提供するあらゆるサービスにすることができます。次の行で、i タグでサービスの簡単な説明をしてください。この例では、divの下に強いタグを使用します。 aria-valuenow属性内およびdiv 内で。最初の行を使用すると、日付を編集できます。次の行は、教育または実務経験のタイトル用であり、最終行は場所です。したがって、NASAで3か月のロケットサイエンスコースを共有したい場合は、次のようにコードを編集します。これらの引用には、私たちがそのまま残す特別なフォーマットがあります。私たちがやろうとしているのは、強力な 証言を与える人のヘッドショットがある場合は、セクション / worksコメントに追加し、メディアアイテムコメントを追加します。おなじみのコードラインで写真を変更できます。この行を読んだ場合、worksフォルダー内に写真を用意する必要があることがわかります。また、ファイル名を変更して、当社のウェブサイトがどの写真を使用するかを知る必要があります。 これらの変更を加えて保存しましょう。ブラウザをリフレッシュして写真を表示します。 写真の上にホバリングすることで特別な効果があることに気付くかもしれません。写真に示されているプロジェクトの簡単な説明を残すことができるように見えます。このHTML Webページテンプレートを最大限に活用し、簡単な説明を追加しましょう。 プロジェクトを特徴とするWebページへのリンクを備えたHREF このWebデザインプロジェクトのHTMLコードに連絡先情報を設定する時です。これは、Webデザインコードで簡単に完了するための簡単なステップです。 セクション /コンテンツコメント内で、アドレス、電話番号、メールアドレスを追加します。プレースホルダー内にあるものを編集して共有する連絡先情報の種類を自由に変更してくださいタグ内にある属性。まだ！ PHPファイルを非常に簡単に編集する必要があります。 FinderまたはFile Explorerで、 contact-form.phpファイルを開きます。 属性の下で、共有するウェブサイトへのリンクを サインアップをクリックすることにより、訪問者がそのウェブサイトにアクセスできます。このテキストを必要なものに変更できます。次の2つのリスト項目についてこのプロセスを繰り返します。 このチュートリアルで使用したWebテンプレートが気に入ったら、Envato要素でさらに多様性を見つけることができます。あなたにはたくさんの現代的な選択があり、あなたはそれらをoknoと同じくらい簡単に編集することができます。以下は、envato要素で見つかったいくつかのオプションをいくつか紹介します。 ASTER：Creative Portfolio＆Agency HTMLテンプレート Webデザインのコーディングがあまり知らない場合でも、Asterは見事なWebサイトを作成できます。このHTMLテンプレートは、Webデザインコーディングの素晴らしい例です。デジタルポートフォリオやクリエイティブエージェンシー用に作られています。 17を超える内部ページから選択できるホームページサンプルが5つ以上あります。コードはクリーンでコメントされており、アスターはウェブサイトをコーディングする最も簡単な方法の1つになります。 Webデザインのコーディングの学習？これは、ハイテクスタートアップに最適なHTML Webページテンプレートです。 AppStormは、ソフトウェアを促進することで設計されています。レイアウトは非常にモダンで機能的であり、モバイル用に作られています。 3つの異なるホームページのデザインとカスタマイズオプションから選択して、完璧な外観になります。 AppStormは、新しいアプリまたはSaaS製品のWebサイトをコーディングする最も簡単な方法です。 Jadusona：ecommerce Baby Shop Bootstrap4テンプレート あなたが初心者であるか、コードを経験しているかにかかわらず、常に新しいことがあります。ビデオチュートリアルやガイドを見つけて、並べてYouTubeチャンネルをチェックしてください。コードを含む何百ものビデオチュートリアルが利用可能です。コードビデオガイドプレイリストをチェックしてください。見つけられるものをご覧ください： Envato TutsのWebサイトには、書かれたチュートリアルガイドとコースもあります。以下は、最初から始めることができるいくつかです。 今日、あなたはウェブテンプレートでウェブサイトのコーディングを開始する方法を学び、いくつかの優れたテンプレートオプションを調べました。 Webデザインテンプレートは、HTMLを簡単にしたい場合、または初心者や専門家向けのクイックWebデザインを必要とする場合に最適です。 サブスクリプションでEnvato Elementsからより便利なWebデザインテンプレートを見つけることができます。 ThemeforestからさらにHTML Webページのテンプレートがあります。メンバーシップなしで購入できます。 より多くのWebページの設計に興味がある場合は、サイトとYouTubeチャンネルでより多くのチュートリアルを見つけることができます。 3。サービスセクション
<!-- Logo --><br> <a class="logo-wrapper" href="index.html"><br> <img class="logo logo-light lazy" src="/static/imghwm/default1.png" data-src="assets/img/logo-light.png" alt="最初のウェブサイトを9つの理解しやすい手順で設計およびコーディングする"><br> <img class="logo logo-dark lazy" src="/static/imghwm/default1.png" data-src="assets/img/logo-dark.png" alt="最初のウェブサイトを9つの理解しやすい手順で設計およびコーディングする"><br> </a><br>
<div class="col-sm-4"><a href="assets/cv/my-resume.docx" download class="btn btn-primary btn-filled btn-block">Download CV</a></div><br>
タグにバックトラックします。これがどのように機能するかを確認するためにGoogleにリンクしてみてください。
<!-- Logo --><br> <a class="logo-wrapper" href="index.html"><br> <img class="logo logo-light lazy" src="/static/imghwm/default1.png" data-src="assets/img/logo-light.png" alt="最初のウェブサイトを9つの理解しやすい手順で設計およびコーディングする"><br> <img class="logo logo-dark lazy" src="/static/imghwm/default1.png" data-src="assets/img/logo-dark.png" alt="最初のウェブサイトを9つの理解しやすい手順で設計およびコーディングする"><br> </a><br>
。次に、Sublime Textで <div class="col-sm-4"><a href="assets/cv/my-resume.docx" download class="btn btn-primary btn-filled btn-block">Download CV</a></div><br>
シンボルに置き換えます。この変更により、
完了です！おめでとうございます。手順に従って、WebサイトをWebテンプレートでコーディングしてください！このプロセスにより、自分やクライアントのためのサイトを作成する場合は、時間を大幅に節約できます。ご覧のとおり、それはウェブサイトを構築する最も簡単な方法の1つです。 Envato要素から素晴らしいHTML Webページテンプレートを見つけました
2。 AppStorm：App Startup Template
Jadusonaは、最小限で使いやすいeコマースのWebサイトです。赤ちゃんと子供の製品を披露するために使用するさまざまなページデモがあります。 Jadusonaの機能のおかげで、オンラインベビーショップの準備を整えます。
完全なレスポンシブデザイン
物理的な履歴書を補完するか、エリカを履歴書します。このオンラインランディングページは、訪問者にあなたとあなたのスキルについてすべてを伝えるのに最適な場所です。 Erikaでサービス、ポートフォリオなどを披露してください。 Retina-Ready、Cross-Browser互換性があり、応答性が高いため、訪問者はどのデバイスからも閲覧できます。基本的に、Erikaは個人のWebテンプレートのダウンロードから必要なものすべてです。このテンプレートを使用して、Webデザインのコーディングを開始してください！ 5。 Emily：個人的なブログHTMLテンプレート
エミリーに値するプラットフォームをコンテンツに与える。この個人的なブログHTML Webページテンプレートには、サイトを構築するための14を超えるHTMLページが付属しています。そのデザインは完全に応答性が高く、クロスブラウザー互換性があるため、訪問者はどのデバイスでもブログを楽しむことができます。 HTMLコードのWebデザインについて学びたい場合は、エミリーのようなプロジェクトがそれがどのように行われるかを示します。上記のWebデザインテンプレートは、今日オンラインで見つけることができる初心者向けの最良のWebデザインの例の一部です。クリーンコードでプレミアムオプションをご覧になりたい場合は、Envato Tutsチームのこれらの記事をご覧ください。 envato tutsのコードについて詳しく知ります
コードの世界を探索し続けてください！
以上が最初のウェブサイトを9つの理解しやすい手順で設計およびコーディングするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。