HTMLとCSSの基本ができたので、実際のWebサイトを作成するためにその知識を実際に使用する方法を調べます。今日は、最初から最後までサイトを作成するプロセスをご覧ください。
このレッスンでは、Photoshop（または他のアプリケーション）にサイトレイアウトをまとめる方法を知っていると思います。幸いなことにそうでない場合私たちはすでにそれをカバーしていますだからあなたは追いつくことができます。
Webサイトを作成するだけではありません。あなた（または他の誰か）がいくつかの基本的なデザインスキルを持っている必要があります。 Web用のグラフィックを準備する方法を知る必要があります。また、完成したサイトを展開するには、Webサーバーに関するいくつかの基本的なことを知る必要があります。私たちはそれをすべて4つの大きなタスクに分けて、プロセス全体を通してあなたを連れて行きました。
ちなみに、デモWebサイトのソースコードを使用したい場合は、ここからダウンロードしてください。
デザイン
技術的または芸術的にWebサイトを設計する方法については説明しません。 （私たちはすでにそれをやっています。）サイトのデザインをすでに把握する必要がありますが、コードに翻訳する方法を見つけ出す前に、話す必要があることがいくつかあります。
まず、知っておくべき最も重要なことは、フォントの選択肢がオンラインで制限されていることです。使用できますが@font-faceCSSのルール外部ロードフォントを使用すると、これは古いブラウザーによってサポートされていません。また、このタグで特定の書体を使用する権利が必要になる場合があります。そうは言っても、あなたできる@font-faceを使用して、Web上の限られたフォントの選択の問題を解決しますが、その世界に飛び込む準備ができていない場合は、まだWeb Fontsサービスを使用する必要があります。WebType（使用によっては無料になる可能性があります）またはWebセーフフォントに限定してください。どのフォントがWebセーフですか？ Times New RomanとArialは最も一般的なオプションですが、ほとんどのオペレーティングシステムには、Webセーフと見なされる他のいくつかの組み込みフォントが付属しています。これらには、Tahoma、Verdana、Lucida Grande、Gill Sans、Trebuchet MS、Courier New、Georgiaなどのフォントが含まれます。追加のオプションを探している場合は、Webセーフフォントを検索してください。
第二に、何がイメージになるのか、何がそうでないかを考慮する必要があります。 HTMLとCSSは画像で使用していた複雑なことの多くを処理できるため、現在、あなたは本当に複雑なグラフィックや写真以上の画像を使用する必要はありません。たとえば、メニューは、順序付けられていないリストを持つCSSで非常に簡単に作成できます。一般に、テキストを画像としてレンダリングする必要はありませんが、それを行う必要がある状況がある場合があります（たとえば、テキストがグラフィックと組み合わされている場合）。
最後に、どの画像が実際の画像として表示されるか、DIVの1つの背景として検討する必要があります。これをどのように決定しますか？画像の上にあるテキスト（メニューなど）がある場合は、答えがあります。画像は背景になります。これが重要である理由は、テキスト、画像、またはコードの後半で追加するもので飾られていないことをエクスポートする必要があるためです。それを理解したら、次のステップ（「準備」）にアクセスして、必要な画像をコーディングしてエクスポートするためのレイアウトの準備について説明します。
準備
まず、デザインを測定します。これはあなたが一般的にやりたいことです前にレイアウトを開始しますが、コーディングを開始するにはこれらの特定の測定が必要なので、今すぐ知っておく必要があります。すべての小さな測定を知る必要はありませんが、メインのレイアウト構造の測定値を知る必要があります。たとえば、ページの左側とページの右側がある場合、それぞれの幅（および高さは変化しない場合は高さ）を知っておく必要があります。また、それらの間の間隔の幅と、結合されたすべての幅の総幅を知る必要があります。デザインがグリッドに非常に基づいており、すべてとうまく並んでいる場合、サイトのヘッダーもこの幅になる可能性があります。基本的に、サイト上のすべての主要な要素の寸法を知る必要があります。あなたもマイナーなものを知る必要がありますが、それはあなたが始めるために必要な情報ではありません。
測定値を取得したら、画像のエクスポートを開始できます。多くの場合、HTMLとCSS（およびそこに行きたい場合はJavaScript）でデザインのほとんどを再現できるため、非常に多くの画像をエクスポートする必要はありません。ただし、エクスポートする必要があるいくつかの画像については、JPEGとPNGのいずれかを選択する必要があります。画像が複雑である場合、写真や、多くの色と広い音色のイラストなど、ファイルサイズの観点からJPEGを使用すると、一般的に良くなります。簡単な画像がある場合、または画像に透明な背景があることが必要な場合は、24ビットのPNGファイルとして保存する必要があります。
Photoshopから24ビットのPNGを保存している場合は、Photoshopがそれを無視することを知っているため、ファイルメニューから「WebのSave for Web」を選択する前に背景レイヤーを非表示にする必要があります。
画像を保存すると、それらを置くためにどこかが必要になります。このため、開発を開始したら他のファイルをたくさん持っているので、今すぐサイトの整理を開始する必要があります。より複雑なサイトを作成している場合は、モデルビューコントローラー（MVC）アーキテクチャですが、単純なサイトを扱っているだけなので、サイトのルートディレクトリに次のディレクトリを作成することをお勧めします。
CSS
画像
スクリプト
それが明らかでない場合、あなたはあなたの画像をに保存しますimagesディレクトリとCSSスタイルシートcssディレクトリ。scriptsディレクトリは、JavaScriptファイルや、サイトを開発するときに使用する可能性のあるその他のスクリプトを保存できる場所です。
ルートディレクトリでは、index.html開発に備えてファイル。 index.htmlとは何ですか？ HTMLファイルが1つしかなく、MyDoc.htmlと呼ばれたとしましょう。サイトをホストしていたWebサーバーにアップロードした場合、mywebsite.comに誰かがMywebsite.comにアクセスしたときはいつでも、アップロードしたファイルのディレクトリリストを取得するか、まったく何もありません。使用index.htmlファイル名が、誰かがその特定のディレクトリにアクセスした場合にそのファイルを表示する必要があることをWebサーバーに指示します。あなたが置いたらindex.html誰かがhttps://mywebsite.com/imagesにアクセスしたときはいつでも、その中に含まれるHTMLのレンダリングが表示されるだろうindex.html。基本的に、index.htmlファイルは表示するデフォルトのHTMLであるため、常に必要になります。
発達
これで、過去2つのレッスンで学んだスキルと、Web開発を学び続けるにつれて獲得した追加のHTMLおよびCSSスキルを使用してサイトを開発します。 HTMLとCSSの基本をほとんどカバーしてきたので、ここで言うことは他に多くありません。最初の2つのレッスンを再ハッシュするのではなく、サイトのためにサイトの開発を開始する前に知っておくべきいくつかの余分なことを調べ、このレッスンのために作成したデモサイトのソースコードを提供します。
Doctype
HTMLドキュメントをレッスン1で作成する際に、HTML構造の基本に焦点を当てましたが、ベストプラクティスの一部ではありませんでした。 HTMLドキュメントの最上部に追加したいことの1つは、そのDoctypeです。あなたはできるWikipediaのDoctypeについてもっと学びましょう、しかし、それは基本的に、「これらは私がHTMLドキュメントに従っているルールです」という文書タイプの宣言です。これは、各Doctypeでルールが少し異なるため、コードを検証する必要がある場合（間違いを犯したかどうかを確認するために）重要です。 Doctypeに固執しない場合、問題を引き起こす可能性があるため、これはさらに探索したいものです。今のところ、Doctype宣言がどのように見えるかを簡単に見てみましょう。
ソースコードをご覧ください
ビデオで見ることができるように、ドロップシャドウや丸い角などの楽しいCSSテクニックを使用しました。これらのテクニックをさらに調査したい場合は、デモサイトのソースコードをダウンロードしますCSSを見てください。 HTMLとCSSの基本を把握したら、新しいことを学ぶ最良の方法は、他のWebサイトのソースコードを見ることです。 PHPなどのサーバーサイドプログラミング言語で作成されたサーバー側のコードを見ることはできませんが、Webページを参照してブラウザの「表示」メニューから「ソースを表示」を選択するだけで、HTMLソースコードを表示できます。 （別のメニューにない限り、通常は「表示」にあります）。 LifeHackerなど、多くのコンテンツを持っている大きなサイトは、必ずしも見られる良いモデルではありません。ここに表示されるHTMLコードの多くは、サーバー側のPHPコードによって生成されます。一般的に、コードは静的であることが多いため、小規模なサイトを見ることで詳細を学ぶことができます。
サイトの開発が完了したら、サイトを展開する時が来ました。
展開
Webサイトが終了したら、展開する必要があります。これは、多くの場合、Webサーバーにアップロードする以上のものではありません。通常、FTPまたはSFTPでこれを達成するので、それを行うにはアプリケーションが必要になります。私たちは使用しています送信ビデオで、しかしサイバーダック両方のMacで実行される無料のファイル転送アプリですそしてWindows。必要なのは、FTPを介してWebサーバーに接続するために、ファイル転送アプリケーションを使用することです。そこから、ファイルをWebサーバーにコピーするだけで、すぐにWebサイトで表示できるはずです。
もちろん、これを行うにはWebホストが必要になりますが、明日の夜にお手伝いします。乞うご期待！
