初心者から上級者まで幅広く利用されているホームページ作成ソフト「ホームページ・ビルダー」。企業サイトやECサイトの制作にも利用できます。
本書はこのホームページ・ビルダーの最新版に対応、操作方法を基本から応用まで詳細に解説します。新機能「jQuery-フォトモーション」や、注目の「かんたんWordPressデビュー」によるWordPressサイト作成などにもしっかり対応。初心者から上級者まで、ホームページ・ビルダーを学ぶうえで、まさにパーフェクトな1冊です。
ホームページ・ビルダーを使う前に
ホームページの基本
ホームページ・ビルダーの概要
Windowsの画面構成−Windows 7
Windowsの画面構成−Windows 8.1
Windowsの画面構成−Windows XP
ホームページ・ビルダーの画面構成
ホームページ・ビルダーの画面操作
ホームページ・ビルダーの基本操作を確認する
column
「ホームページ」か「ウェブページ」かガイドマップ、その他のタブ
CHAPTER1 ホームページを作ってみよう
section1 白紙からホームページを作る
step 1 白紙のページを作成する
step 2 文字を入力する
step 3 入力後に段落を挿入する
step 4 段落を移動する
step 5 壁紙を設定する
step 6 ページタイトルを設定
step 7 ロゴを作る
step 8 ボタンを作る
step 9 文章やロゴなどを中央揃えにする
step 10 ホームページを保存する
step 11 ホームページ・ビルダーを終了する
section2 素材集を使って楽しいホームページに
step 1 保存しておいたホームページを開く
step 2 素材集にあるイラストを貼る
step 3 画像の大きさを変更し、中央に配置
step 4 [素材]ビューから水平線やリストマークを貼る
step 5 修正後のページを上書き保存する
section3 仕上がりを確認してサーバーに送る
step 1 プレビュー画面で確認する
step 2 ブラウザーで確認する
step 3 FTPの設定を新規に作成する
step 4 ホームページをサーバーに転送する
column
書式の区切りでも段落を変えよう
特殊な文字や記号を入力
BGM を指定する場合は
ボタンの枠と文字が合わない場合は
さまざまな保存方法
終了せずにページだけ閉じるには
「標準」モードと「どこでも配置」モード
「amana」の写真素材について
転送がうまくいかないときは
CHAPTER2 文章をデザインする
section 段落書式から始まる書式設定
step 1 段落書式で基本的なデザインを指定する
step 2 段落全体を右揃えや中央揃えにする
step 3 インデントで余白を広げる
step 4 水平線でページを区切る
step 5 段落全体を右揃えや中央揃えにする
section2 文字のデザインにこだわる
step 1 文字サイズを指定する
step 2 文字の色を変える
step 3 文字飾りを付ける
step 4 文字にルビ(ふりがな)を付ける
section3 列記する項目はリストにまとめる
step 1 リストを入力する
step 2 階層構造を持つリストを作る
step 3 説明付きのリストを入力する
step 4 リストマークを別の記号やアルファベットに変える
column
段落書式を推奨する理由
テキストファイルをホームページに読み込むには
見出しの段落に文字サイズ指定は禁物
文字サイズの呼び方は「サイズ」と「相対サイズ」があ
ホームページの色は「カラーコード」で呼ぶ
「文字飾り」と「論理強調」の違い
「フォント」で文字書式をまとめて指定
リストとして入力する利点
別のリストを続けて入力するには
階層の上げ下げは後からでもできる
リストの途中に項目を追加
リストの項目を削除
入力済みの文章をリストにする
記号や開始番号を変えるには
リストの記号に素材集のマークを使うには
CHAPTER3 表にまとめる、写真を貼る
section1 項目を表にまとめる
step 1 表の枠を挿入する
step 2 表の内容を入力する
step 3 行や列を増やす
step 4 行や列を減らす
step 5 表全体の書式を設定する
step 6 複数のセルを1つに結合する
step 7 セルを分割する
step 8 セルの色・文字の色を指定する
step 9 セル内の文字サイズを変更する
step 10 セル内の文字位置を変更する
step 11 列の幅を指定する
section2 「写真挿入ウィザード」で画像をきれいに貼る
step 1 「写真挿入ウィザード」で写真を貼る
step 2 ホームページ用に写真を加工する
section3 表を使って写真をレイアウト
step 1 レイアウト用の枠を作る
step 2 セル内に写真を貼る
step 3 列のサイズをピクセル数で指定する
column
表特有の呼び名について
セルの間を自由に行き来する
複数行・複数列を一度に追加
行や列をコピーする
表の編集は[表]ツールバーが便利
画像は著作権、肖像権に注意
ホームページ・ビルダーで扱える画像ファイル
背景を変更したら縁取りも変更
画像に文字やスタンプを重ねる
画像の左右位置を変更するには
貼った画像が気に入らないときは
写真の大きさはドラッグで微調整
貼り付け後の写真に縁取りを付ける
「代替テキスト」を指定しよう
選べる特殊効果
画像の向きを変える3つの方法
画像のトリミングや縁の透明化は「画像の編集」を使おう
CHAPTER4 リンクを張りサイトを作る
section1 ホームページやメールへのリンクを張る
step 1 サイト内のリンクを設定する
step 2 リンクの設定を確認する
step 3 ウィザードを使わずにファイルへのリンクを設定
step 4 パスワード付きのリンクを設定する
step 5 メールへのリンクを設定する
step 6 別のサイトへのリンクを設定する
step 7 ページの特定箇所をリンク先に指定する
step 8 ページ内の見出しにリンクする目次を作る
section2 ウェブサイトを管理する
step 1 ウェブサイトを新規に作成する
step 2 ビジュアルサイトビューで確認する
step 3 ビジュアルサイトビューでリンクを設定する
step 4 ビジュアルサイトビューでページを開く・閉じる
step 5 ウェブサイトを閉じる・開く
step 6 ウェブサイトのファイルをまとめて転送する
section3 サイトを自在に結ぶリンクメニュー
step 1 リンクメニューの設定を始める
step 2 リンクメニューの内容を設定する
step 3 リンクメニューの書式を変更する
step 4 リンクメニューを見やすく設定する
step 5 「サイト共通メニュー」でリンクメニューをコピー
step 6 スタイリッシュ エフェクトをページに適用する
step 7 リンクメニューの内容を書き換える
step 8 ヘッダーのロゴを修正する
step 9 スタイリッシュ エフェクトのデザインを調整する
column
プレビュー画面の操作方法
HTML ファイル以外のファイルにリンクを張る
リンクの設定を確認・修正・解除するには
ファイルを移動したらサイトを更新
リンクに問題があるときは
ビジュアルサイトビューでできる操作
転送後に実際のサイトで確認するには
決まった時間に「転送予約」
「転送対象」に含まれないファイルを送る
ファイルを個別に送るなら「ファイル転送」
スタイリッシュ エフェクトを活かす表の設定
スタイリッシュ エフェクトなら「拡大表示ボタン」が付けられる
スタイリッシュ エフェクトの応用例
CHAPTER5 HTMLとCSS について知ろう
section1 HTMLを見る・変えてみる
step 1 HTMLについて知ろう
step 2 HTMLソースを表示する
step 3 HTMLソースを書き換える
step 4 基本的なHTMLタグを覚えよう
section2 CSSを使ってデザインを変更する
step 1 CSS について知ろう
step 2 インラインスタイルシートでCSS を指定
step 3 埋め込みスタイルシートを使う
step 4 埋め込みスタイルシートを編集する
section3 外部スタイルシートファイルで複数ページをデザイン
step 1 外部スタイルシートファイルを新規に作成する
step 2 外部スタイルシートファイルでスタイルを設定
step 3 サイト全体に外部スタイルシートファイルを適用
column
HTMLやCSS での色指定
設定したCSS はどうなっている?
画面を広く使うならエディターズスタイル
適用したCSS タグを変更する
CHAPTER6 画像ファイルを準備する
section1 画像の角度・サイズの変更、色合いの補正
step 1 ウェブアートデザイナーを起動する
step 2 操作しやすい表示倍率を選ぶ
step 3 画像の傾きを補正する
step 4 必要な部分だけをトリミング
step 5 画像サイズを変更する
step 6 オブジェクトをホームページ用に保存する
step 7 画像の色合い・明るさ・鮮やかさを補正する
step 8 キャンバス全体をファイルに保存する
step 9 画像に特殊効果を指定する
section2 オリジナルのロゴやボタンを作る
step 1 ボタンの枠を作る
step 2 「ロゴの作成」機能でボタン用の文字を作る
step 3 ロゴとボタンを組み合わせる
step 4 ボタンをパーソナルフォルダへ送る
step 5 同様にほかのボタンを作る
step 6 パーソナルフォルダに入れたボタンを配置する
section3 図形を組み合わせて地図を描く
step 1 キャンバスの大きさと色を指定する
step 2 線を描く
step 3 図形を描く
step 4 オブジェクトを複製する
step 5 オブジェクトのサイズ・位置・色を変更する
step 6 文字を入力する
step 7 ウェブアートデザイナーの素材を使う
step 8 キャンバスを保存する
column
トリミングの切り口をぼかすには
適切な画像サイズとは
ホームページに貼りやすい保存方法を選ぼう
補正ダイアログの共通操作
明るさとコントラストだけなら補正は簡単
ウェブアートデザイナーで画像にフレームを付ける
効果パレットの使い方
効果パレットの[効果]タブで選べる効果
効果パレットの[写真]タブで選べる効果
効果パレットの[色調]タブで選べる効果
効果パレットの[色温度]タブで選べる効果
図形の順序を変えるには
写真と文字を組み合わせるなら「合成画像の編集」で選べる線の種類や太さ
ウェブアートデザイナーの持つ2つの顔
図形の設定は[図形の編集]ダイアログ
不規則な線や図形を描く
オブジェクトメニューで図形を編集
星形や十字型は素材から選ぼう
イメージマップにするには
CHAPTER7 画像を楽しく見せる
section1 画像をアルバムやサムネイルで表示する
step 1 「アルバム」で写真をレイアウトする
step 2 「サムネイル」を挿入する
step 3 サムネイルに説明文を付ける
section2 スライドショーで次々に画像を表示
step 1 「スライドショー」を挿入する
step 2 スライドショーの動きを確認する
section3 マウス操作で画像が変わるロールオーバー
step 1 「ロールオーバー効果」の画像を挿入する
column
アルバムに枠線や背景を設定するには
画像選択画面の画像を並べ替え
貼り付け後の画像にロールオーバーを指定する
ロールオーバー効果は画像サイズに注意
付属データはこちら
内容についてのお問い合わせは、正誤表、追加情報をご確認後に、お送りいただくようお願いいたします。
正誤表、追加情報に掲載されていない書籍内容へのお問い合わせや
その他書籍に関するお問い合わせは、書籍のお問い合わせフォームからお送りください。
本書の書影(表紙画像)をご利用になりたい場合は書影許諾申請フォームから申請をお願いいたします。
書影(表紙画像)以外のご利用については、こちらからお問い合わせください。