静的コンテンツの挿入

www.altova.com すべてを展開/折りたたむ このトピックを印刷 前のページ 1つ上のレベル 次のページ

ホーム >  クイックスタートチュートリアル >

静的コンテンツの挿入

静的コンテンツとは、XML ソースから得られるコンテンツとは違い、デザイン内に直接入力または挿入されるコンテンツのことです。 SPS デザインには様々な静的コンポーネントを配置することができます。このチュートリアルセクションでは、以下の静的コンポーネントを挿入します:

 

イメージ
水平線
テキスト

 

静的イメージを挿入する

挿入する静的イメージは、 (マイ) ドキュメントフォルダー以下の : C:\Documents and Settings\<username>\My Documents\Altova\StyleVision2019\StyleVisionExamples\Tutorial\QuickStart\NewsItems.BMP で、ドキュメントのヘッダーとして使用されます。以下の操作により、このイメージをドキュメントの先頭へ挿入することができます:

 

1.newsitemsnewsitem の開始タグの間にカーソルを配置します(以下のスクリーンショットを参照)。

 

TutQS_DesView_InsertImage

 

カーソルが newsitems 要素の内側、かつ newsitem 要素の外側に配置されます。そのため、newsitems 要素が処理される際に、1度だけ挿入されます(スキーマ内では newsitems 要素が1度だけ定義されているため)。

2.カーソル位置で右クリックして、挿入 | イメージ を選択します。イメージの挿入ダイアログが表示されます(以下のスクリーンショットを参照)。

 

TutQS_Dlg_InsertImage

 

3.静的タブにて絶対パスのチェックボックスをクリックして、NewsItems.BMP参照ボタンから選択します。
4.「OK」 をクリックして完了します。

 

HTML プレビューが以下のように表示されます:

 

TutQS_HTML_HeaderImage

 

水平線を挿入する

以下の操作を行うことで、ドキュメントのヘッダーとドキュメントのボディーの間に水平線を挿入します:

 

1.先ほど挿入した静的イメージの直後にカーソルを配置します。
2.その位置で右クリックして、 挿入 | 水平線を選択します。水平線が挿入されます。

 

水平線のプロパティを以下の方法でセットします:

 

1. デザインビューにて水平線が選択されている状態で、 プロパティ サイドバー にあるラインコンポーネントを選択し、プロパティの HTML グループを開きます。
2.水平線に対して color と size プロパティをセットします。
3.デザインビュー にてラインが選択されている状態で スタイル サイドバー にあるラインコンポーネントを選択し、プロパティのボックスグループを開きます。margin-botton プロパティの値に 12pt をセットします。
4.HTML プレビューにて出力を確認します。

 

各ニュースアイテムの最後に水平線を挿入することにします。newsitem 要素にある終了タグ直前にカーソルを配置することで、各 newsitem 要素の終端にラインが表示されるようになります。ラインの size プロパティに単位無しの数値を入力することで、水平線の太さを変更することができます(プロパティサイドバーにてラインを選択し、size の値に例えば 3 を入力してみてください)。

 

静的なテキストを挿入する

実は (XML ソースから)動的なコンテンツを挿入するセクションで Enter キーを押下することで、改行という静的なテキストが既に追加されています。このセクションでは、静的テキストとしてデザイン内に文字を追加します。

 

ここまでデザインした SPS の出力結果は、以下のようになります:

 

TutQS_HTML_Lines

 

dateline 要素内に date 要素と place/@city ならびに place/@country 属性のコンテンツが(空白スペース無しに)出力されている点に注目してください。空白スペースは静的テキストとしてデザインに追加することができます。デザインにて、date 要素の直後にカーソルを配置して、コロンとスペースを入力します。その後、@city 属性の直後にコンマを入力します(以下のスクリーンショットを参照)。

 

TutQS_DesView_StaticTextDateline

 

出力は以下のようになります:

 

TutQS_HTML_DatelineFormatted1

 

dateline 出力にてコロンとコンマ、そしてスペースが表示されます。これらテキストアイテムは、全てデザインへ直接挿入されたテキストアイテムです。

 

静的テキストを更に追加します。デザインにて、"Source: " というテキストを source 要素の開始タグ直前に入力します。

 

TutQS_DesView_Source

 

静的なテキストをフォーマットする

静的なテキストをフォーマットするには、目的のテキストをハイライトして、ローカルのスタイルプロパティを指定します。デザインにて入力した "Source: " というテキストをハイライトします。 スタイル サイドバー にて、1 テキストコンポーネントを選択します。以下のスクリーンショットにあるように、プロパティの font グループを展開して、font-style プロパティにて italic オプションを選択します。(下のスクリーンショット) 。

 

TutQS_Styles_Source

 

静的テキスト(ここでは "Source: ")がデザインにてイタリック状態になります:

 

TutQS_DesView_SourceItalic

 

HTML プレビューの出力は以下のようになります::

 

TutQS_HTML_StaticContent

 

ソースアイテムと水平線アイテムの間にある垂直のスペースが狭すぎると思える場合、デザインにてソースと水平線の間に(Enter キーを押下することで)空の行を挿入してください。

 

操作が終わった後に、ファイルの保存を行います。

 

このセクションでは、静的コンテンツの挿入とフォーマット方法について学習しました。次のセクションではCSS を使用することにより、デザインコンポーネントをフォーマットする方法について学習します。

 

 


(C) 2019 Altova GmbH