 画像の挿入・・・オリジナル画像でページをデザインするここでは、「Microsoft Excel 2010」をグラフィックエディタとして使っています。 |
|||||||||||
| [進む↓] | |||||||||||
|
■ 画像（図形）の挿入 Excelファイル「magicworld.xlsx」を開いてください。Microsoft Excel 2007 以上が必要です。 下線付き青色文字列↑の上（指マーク）でクリック  ［開く（ファイルは自動保存されません。）］リンクを設定するボタンを追加 ボタンのデザインは、リンク先のページをイメージしたものにしましょう。 TOPページ「index.html」を編集します。 コピー 図のように、「Excel」のシート［ボタン］から図形（ハート）をコピー  貼り付け 図のように、文字列「kantan01」の末尾［End］で「改行[Enter]」 ［編集］→［貼り付け］  リンクの挿入 上の文字列と同じリンクを設定します。 貼り付けられた図形を選択→［挿入］→［ハイパーリンク］→「ハイパーリンクの挿入」  「ファイル、Webページ」の「現在のフォルダー」から、［k01.html］を選択→［OK］ 保存（埋め込みファイルの保存） 貼り付けた画像をサイトに保存するために、一旦ファイルを保存しましょう。 ［保存]→「埋め込みファイルの保存」  ［画像ファイルの種類］→「GIF」のまま［OK］または［キャンセル］  →  ［名前の変更］→ここでは「K01」にする（拡張子は「画像ファイルの種類」で自動的に記述される） 画像の名前を、ページ名を含む連番としています。 「image」を「エクスプローラー」で開きましょう。  サイト内の画像用フォルダ「image」に保存されました。  続けて、図のようにボタンを配置し、リンクを設定します。  注！ この操作は当方の環境では安定して行うことができませんでした。そのため一つずつ［保存］を確認しながら行っています。 この問題を解決するには Excelファイルを「名前を付けて保存（ここではサイト内のフォルダ「資料」に保存）」したうえで上記の操作を行ってください。 結果を「エクスプローラー」で確認  同様にボタン「図形（太陽）」を配置し、リンクを設定します。  結果を「エクスプローラー」で確認  |
|||||||||||
| [戻る↑][進む↓] | |||||||||||
|
■ サイト内の画像をページに挿入 「k01.html」を開いてください。 画像の挿入（ファイル「」image」から） 図のカーソル位置で、［挿入］→［画像］→［ファイルから］  サイト内の画像用フォルダ「image」から、編集中のページの名前がついた画像「k01.gif」を選択→［挿入］ 上書き［保存］しておきます。  同様に他のページにも、ページの名前がついた画像を配置してください。    |
|||||||||||
| [戻る↑][進む↓] | |||||||||||
|
■ 他のページを編集 ページごとのコンテンツを掲載するスペース（セル）を用意します。「k01.html」を開いてください。 図のカーソル位置で改行  見出し このページで紹介するマジックのタイトル「一円玉の消失」を入力→「見出し 3」  行,セルの削除,挿入 クリックして二段目のセルをアクティブにする ［テーブル］→［削除］→［行の削除（［セルの削除］も同じ）］  行（セル）が削除され、次の行（セル）がアクティブになっています。 ［テーブル］→［挿入］→［上の行］  行が挿入されました。図ではクリックして、挿入された行に移動しています。  |
|||||||||||
| [戻る↑][進む↓] | |||||||||||
|
■ Excelで作成した画像をページに挿入 引き続き、「k01.html」を編集します。 セルのプロパティ ［テーブル］→［テーブルのプロパティ］→［セル］  「セルのプロパティ」→「横位置［左］」→［OK］ 図では「準備するもの↓」と入力して「改行［Enter］」しています。  Excelファイル「magicworld.xlsx」を「名前を付けて保存（ここではサイト内のフォルダ「資料」に保存）」したうえで操作を行ってください。 図としてコピー 図のように、「Excel」のシート［一円玉の消失］から画像を[図としてコピー]  シートは、ページに掲載する記事の原稿として作成しています。 貼り付け ［編集］→［貼り付け Ctrl+V］  保存（埋め込みファイルの保存） 画像を張り付けたファイルを［保存］しようとすると、「埋め込みファイルの保存」ダイアログが開きます。 ［保存]→「埋め込みファイルの保存」  ［名前の変更］→ここでは「k01_01」にする（拡張子は「画像ファイルの種類」で自動的に記述される） 画像の名前を、ページ名を含む連番としています。 サイト内の画像用フォルダ「image」に保存されます。  |
|||||||||||
| [戻る↑][進む↓] | |||||||||||
| ■ ページの編集 引き続き、「k01.html」を編集します。 画像に続けて文章を記述→「改行［Enter］」、続けて「改行［Enter］」で空白行、続けて文章を記述→「改行［Enter］」、画像の貼り付け  「パネル」を隠すと「編集領域」が広くなります（［現在のワークスペースのリセット］で元に戻る）。  テーブル（行,セル）の挿入 記事の記入スペースに一行追加します。 ［テーブル］→［挿入］→［下の行］  セルのプロパティ 挿入されたセルは元のプロパティを引き継いでいます。「レイアウト」の「横位置」を中央にしましょう。 挿入された「行（セル）」の上で右クリック→［セルのプロパティ］  CSSで「table」の「text-align」を［center］に設定しています。「セルのプロパティ」で「横位置」を［標準］に戻せば「中央」に表示されます。 追加したセルに「つづく」と入力して「見出し 3」を設定しています。  |
|||||||||||
| [戻る↑] | |||||||||||
|
【 トップへ｜目次へ｜前へ←｜→次へ｜この章の始めへ 】 HaraHara WebSite
Copyrightc 2017 SAKAEPC |
