Transcript ExpressionWeb初期設定とdiv

Expression Web
自分のサイトの使い方
ページレイアウトの作成1
1
Webページの３大技術
（プログラム）
• HTML
Webページの構造を担当（建物なら基礎、柱、壁、
部屋割りなど。）
• CSS
デザイン（色と形の詳細）を担当
• JAVASCRIPT
主に動きを担当
最低でもHTMLとCSSの知識がなければ、一般的
なWEBページは作成できない。ExpressionWebで
はこの３つを作成できる（ほかのプログラムも作
成できる）。
2
画面レイアウトの確認
3
パネルメニューの
設定確認
• 画面レイアウトが異なる
場合は、パネル設定を
確認する。以下を選択
する。
1.
2.
3.
4.
5.
タグプロパティ
CSSプロパティ
スタイルの適用
スタイルの管理
ツールボックス
4
自分のサイトの使い方
• サイトーサイトを開く
ファイルー開くではないので注意
• 場所 に以下を入力する。すべて半角英数と
する。
http://web7.mejiro.ac.jp/14a3304/学籍番号
以降常にこの方法でサイト制作を行う。
5
DOCTYPEとスキーマの変更
•
•
•
ツールーページ編
集オプションー作成
を開いて行う。
HTML・CSSともに異
なるバージョンがあ
るので、注意する。
続けてCSSの設定も
行う
6
CSSの手動設定
• CSS(スタイル）
を手動摘要に
変更する
• 自動のままだ
と大量にCSS
が自動作成さ
れ、わかりに
くいため
7
Divの挿入（headder）
• ツールボックスの<div>をダブルクリック
• スタイルの管理から 新しいスタイル
• 以下のように設定
8
ファイルの確認
• 現在無題_1.html と 無題_1.css の2つの
ファイルができている
• ファイル名の右上の*（アスタリスク）は変更内
容が保存されていないことを示している
• それぞれ以下のファイル名で 名前を付けて
保存する。すべて半角英数。
index.html
main.css
9
スタイルパネルに
main.cssが表示される。
プレビューには設定された
スタイルが表示される
10
画像管理用フォルダ作成
• フォルダ一覧のURL部分で右クリックー新
規ーフォルダ
• moto_gazouフォルダ と gazouフォルダ を
作成
• 今後オリジナル画像は moto_gazouフォルダ
に、加工したものはgazouフォルダに入れる
11
ロゴファイルの保存
1. ロゴを作成したワードを開き、ロゴをコピー。
2. ExressionWebの画面のheadder部分をクリックして、貼
り付け
3. ファイルを上書き保存
4. 埋め込みファイルの保存 で、ファイルの種類をgifか
PNGに変更
5. ｌogoというファイル名にし、保存先をmoto_gazouフォル
ダに変更
6. フォルダに保存されたか確認
7. 今後ロゴのサイズ変更などを行った場合には、ロゴの
ファイル名を変えて（smallｌogoなど） gazouフォルダに
入れる。オリジナル画像を取っておかないとあとで困
る場合が多いので。
12
Headder以外のレイアウトを作成
1.
2.
3.
ツールボックスで<div>をダブルクリック
スタイルの管理で 新しいスタイルの作成
今度はmain.cssというスタイルシートができているので先ほどと設定が異
なる
4.
#contents、#sidebar、#footerについても同様の手順で作成する。今は縦
に並べたままにしておく。
13