5-2サーバーの契約、ドメイン取得

ドメインの取得し、サーバーをレンタルしましょう。 ドメイン取得方法 ドメイン管理会社は、大きく実績があるところを必ず選んでください。 ドメイン管理会社のサーバーが止まると、サイトが表示されなくなります。 ドメインは、どの国の会社で取得してもほとんど変わりがないので、日本のドメイン会社をお勧めします。 日本でのドメイン管理会社 ・お名前 com レンタルサーバー契約 レンタルサーバー会社と契約しましょう。 レンタルサーバー会社は、無数にありますが、...

6-1自分のサイトを作ろう!

今まで学んだことを生かし、LESSON-1の手順に沿って自分のサイトを制作していきましょう 1.目的の設定 あなたはどんなサイトが作りたいですか? 学校紹介のサイト(コーポレートサイト) 趣味の二胡を販売するサイト(ショッピングサイト、ブランドサイト) 上海のお得なレストランなど情報発信のサイト(ポータルサイト) ※教科書として中国語語学学校のサイトを作ることにしましたが、みなさんはこれにならって自分の作りたいサイトを作成して下さい。 ターゲットユーザー決めよう 上海にいる駐在員、またはその家族、奥様...
7-1webデザイン

7-1webデザイン

webサイトをデザインする前に デザインを始める前にwebサイトデザインの作り方基本をおさらいします。 下記ソフトの何を使用してデザインしても構いません。 ただし、コーディングを他の方に依頼する等の場合はファイル形式を合わせる必要もあり、シェアの多いphotoshopでの作成が望ましい。 Illustrator(本来は印刷用のソフト、web制作もできなくはないが効率は悪い。ただし直感で使用できる使いやすさがあるため、印刷物デザインからのデザイナーの人気は高い。起動、保存が遅いなどのストレスもあり)...
7-2 スライスツール

7-2 スライスツール

パーツごとに保存する デザインが完成したらそれをパーツごとに保存します。 先に学んだとおり、パーツ一つ一つを保存するのもいいのですが、今回はphotoshopのスライスツールを使用し効率よく保存します。 スライスツールを使ってサイト全体図からパーツを保存 → photoshopでデザインを開きます。(.aiデータは書き出し → 72ppi、jpgで保存して開く) → ツールボックスからスライスツールを選択 → スライスしたいパーツ箇所をドラッグして選択 → スライスの上で右クリック → スライスオプションを編集をクリック →...

8-1コーディング

htmlで組み立てる デザインパーツが仕上がったら材料をhtmlに挿入してコーディングしていきます。 文章がまだ仕上がっていない場合は仮文章で配置します。 → dreamweaverを起動 → 新規サイトを定義参考lesson1 → imagesフォルダを作成、もしくはphotoshopからスライスを書き出し → index.htmlを作成し材料を挿入。htmlタグでマークアップしていく <h1><p> タグや <ul> リストなど、コンテンツに直接関わる HTML タグ  HTML...

9-1SEO対策

seo 検索エンジン最適化 (英: Search Engine Optimization, SEO:サーチ・エンジン・オプティマイゼーション) 検索結果でより上位に現れるようにウェブページを書き換えること。 または、その技術のこと。 検索エンジンの検索結果が上位、特に1ページ目に表示されるかどうかということは、顧客を呼び込めるかどうかに関わる、極めて重要な問題です。...

9-2ファビコン

ファビコンの設置 ファビコンとはタイトル横に表示されるアイコンのことです 大手のサイトは大体設定しています ファビコン Favorite icon(フェイバリット・アイコン)という英語の語句を縮約したもの ファビコンの作成 → イラストレーター等で正方形GIFイメージを作成 → ファビコン生成サイト(http://www.htmlkit.com/services/favicon/)にアクセス ※他のサイトを使用しても構いません。「ファビコン 生成」で検索 → Source Image:...

10-1その他htmlサイトでできること

静的なhtmlサイトは完成したと思います。 基礎コース最後の回では質問などをして疑問の残らないようにして次のステップに進んでください。 この回ではその他できる事を簡単に見ていきます。 JavaScript JavaScriptは、プログラムを記述するための言語のひとつで、動きのあるサイト作成に役立ちます。 JavaScript を始めるのに特別なソフトは必要ありません。通常の HTML ファイルと同様、ソースコードに書き込んでいけばいいだけです WEBデザイナーはプログラマーではないので既存のプログラムをカスタマイズして設置します...

j-1クリックで画像を大きく-colorbox-

デモページ jQuery 様々な処理を短く簡単に書ける jQueryを読み込む → 新規ファイル(colorbox.html)を開き<head>部分に記述 [html] <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script> [/html] →...

j-2マウスオーバーで画像の上に文字-slidemoji-

デモページ jQuery 様々な処理を短く簡単に書ける jQueryを読み込む → 新規ファイル(slidemoji.html)を開き<head>部分に記述 [html] <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script> [/html] → htmlに記述 [html]...

j-3クリックで画像をグループ分け-framework-

デモページ jQuery 様々な処理を短く簡単に書ける jQueryを読み込む → 新規ファイル(sort.html)を開き<head>部分に記述 [html] <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script> [/html] →...

j-4まとめる

世界を旅するカメラマンさんのサイト jQuery 様々な処理を短く簡単に書ける 先ほどのsort.htmlにcolorboxを追加 → sort.htmlを別名保存(sort++.html) → jquery.colorbox.jsを読み込む[download id=”3″](済) → htmlに記述 [html] <script> $(document).ready(function(){ //Examples of how to assign the ColorBox event to...

j-5モーダルウィンドウ

モーダルウィンドウ クリックすると表示される子ウィンドウ。また、一度開いたダイアログボックスを閉じるまで、他の操作をでき なくする CSS Modal demo ・・・シンプルでクール jsをつかわず、cssのみでできる Pop Easy Demo ・・・ポップでキュート CSS Modal → 新規ファイル(modal.html)を作成 → modal.cssを読み込む[download id=”12″]...

j-7入力フォームが空のときに入力案内を表示

htmlにテキストボックスを挿入 → index.html(新規ファイル)を開く → テキストフィールドを挿入・・・挿入→ フォーム→ テキストフィールド → inputタグ内で半角スペース→ value → 表示したい文字をいれ、JavaScript部分をinputタグ内に書き込む onFocus=”HideFormGuide(this,’表示したい文字’);”...

j-9動きのあるアコーディオン

htmlでリストデザインしておく。全体のul クラスは accordion 親リストタイトルは段落とspanで囲む ↓ リストデザインはcss等で完成させておく ↓ jqwery本体読み込み ↓ jsの読み込み <script> $(‘.accordion p’).click(function() { $(‘.accordion p’).removeClass(“selected”).next().slideUp();...