2012年10月31日水曜日

Freeway テーブルの拡張属性3

つぎはテーブル&セルの拡張を調べてみましょう。
表組するのに便利なテーブルアイテムですが、このテーブルに関しても拡張させる事ができます。先ずはテーブルのHTMLを見てみたいと思います。
作成したのは4つの『セル』が収納されたテーブルアイテムです。


<table>と<tr>と<td>というタグで構成されているのが分かります。このtableとtrとtdはどのような意味合いを持つのでしょうか。
基本的に<table>〜</table>内に<tr>〜</tr>で表の横一行を定義して、更にその中に<th>〜</th>や<td>〜</td>でセルを定義していきます
<tr>はTableRowの略称でテーブル(表)の横方向の一行を定義します。
<td>はTabledateの略称でセルの内容がデータとなるデータセルを作成します
<th>はTableHeaderの略称でセルの内容が見出しのヘッダセルを作成します

次にテーブルを、インスペクタパレットでこのように変更しました。
HTMLを見てみました。


それでは、テーブルを拡張させてみたいと思います。テーブルアイテムを選択し、メニュー>アイテム>拡張を開きます。名前にborder、値に5と入力してみます。
プレビューをしてみると、テーブルの外枠が太くなりました。
このようにテーブルアイテムの拡張をする事が出来るのですが、セル単位での拡張も可能です。セル単位の拡張は、行に対して行う方法と、1つのセルに対して行う方法の2種類があります。まずは行に対して行う方法ですが、つまり、<tr>を拡張するという事です。
拡張したい行のセルを選び、インスペクタパレットの現在の行の項目で、拡張ボタンを選択します。

名前にbgcolor、値にredと入力します。つまり背景を赤にする、という指示です。

結果このようになりました。
HTMLを見てみると、<tr>に対してbgcolor="red"と拡張されています。<tr> とはテーブル(表)の横方向の一行を定義する。でしたね。

次に、1つのセルに対して拡張するには、テーブルセルの項目の拡張を行います。
結果このようになりました。
<td>に対してbgcolor="red"と拡張されています。


次回に続く.......



2012年10月26日金曜日

Freeway HTMLの記述を考える2

前回の続きです。
次は『拡張』に関して調べてみましょう。
『拡張』と言われると分かりにくいですが、つまりはHTMLに任意の記述を加えるという事になります。
まずは『ページ』に関して拡張させてみましょう。
ページを選択し、メニュー>ページ>拡張を開きます。(マスターを拡張させると、マスターを適用している全てのページが拡張されます)

拡張は、『名前』と『値』を入力します。この名前と値に入力した文字がどのようにHTMLに書き加えられるのか見てみましょう。挿入箇所が分かり易いように、名前=ページの拡張、値=拡張の値と入力してみました。
HTMLを見てみるとbodyタグが拡張されています。
それでは、bodyタグに書き加えられるのはどのような内容なのでしょうか?
bodyタグは、background、bgcolor、text、link、vlink属性や背景図、背景色や前景色を指定するなどの拡張が可能です。例えば、背景に画像を指定したい場合は(例)となります。この場合は名前がbackgroundで値が画像URLとなります。
続きまして、HTMLアイテムを拡張してみます。HTMLアイテムを選択し、メニュー>アイテム>拡張と選びます。HTMLアイテムの拡張には、divとdiv styleの2種類が有るのですが、まずはdivから名前と値を入力してみました。
HTMLはこうなります。
加えてdivstyleを拡張してみました。先ほどのdivとは表記の方法が違う事が分かりますね。

このdivとdiv styleに関しては、過去に取り上げているのでココでは割愛します。次回に続く.....

2012年10月23日火曜日

Freeway HTMLの記述を考える

今回はFreewayがどのようなHTMLの記述をしているかを調べてみたいと思います。
その前に、HTMLがどのような構造をしているのか知っておきましょう。

大きくは、html、head、bodyの3つのタグから構成されています。
html・・・・・HTML文書の最初に指定するドキュメント構造を表すタグです。このファイルの中身がHTML言語で記述されていることを表しています。
head・・・・・書類のタイトルや特徴等の文書情報を記述します。head部で記述される内容はブラウザ(閲覧ソフト)の本文へ表示されません。
body・・・・ブラウザ表示される部分を表わします。

それでは、FreewayのHTMLを見ていきましょう。先ずは、新規作成から何も無い状態でのHTMLを見てみました。(CotEditorでHTMLを見ています)、headタグに記述された緑文字の部分はスタイルシートですね。
それでは<body>タグ以下の変化に注目して行きましょう(bodyタグはブラウザで表示される部分を示す)

次にHTMLアイテムを配置してみました。

HTMLを見てみるとbodyタグ内にdivタグが追加されていました。




それでは、HTMLの意味についてもう少し調べていきましょう。
先ずはdivタグについてです。divの役割はたくさんの引き出しをまとめて一度に動かすことが出来るタンスに似ていることから、タンスモデルでよく説明され、引き出しにあたるpやhなどのタグを セットとして管理することが出来ます。


例_1
<div>
<h1>見出し</h1>
<p>段落</p>
</div>


また、divタグにclassやidを指定して、cssでスタイルを自在に変更することが出来ます。idとclassの役割は全く同じですが、使い方が異なります。idは1ページ内で1度しか使用できませんが、classは何度でも使用可能です。こういうと別の意味に取られるので、補足すると、id="a1"、id="a2"の二つを1回ずつ使用することはできますが、id="a1"だけを2回以上使用するのはだめということです。

一行目に
<div id="item1" style="position:absolute; left:32px; top:27px; width:244px; height:65px; z-index:1; overflow:visible">
とあります。これは絶対座標位置、HTMLアイテムの大きさ、レイヤーの階層を表しています。2行目には、
<p class="f-lp">HTMLでさらに文字を入力しました</p>とあります。この一行に、f-lpというクラスが適用されていますが、f-lpは.f-lp { margin-bottom:0px }とスタイルで定義されている事が分かります。
position:absolute・・・・・ボックス要素を絶対的な位置で配置する
z-index・・・・・重なりの順序を指定すします、値が大きいものほど上になります。
visible・・・・・指定された要素を表示します
p・・・・・Paragraphの略で、<P>~</P>で囲まれた部分がひとつの段落であることを表します。
class ・・・・・スタイルシートなどで定義したクラスに要素を関係つけるもので、複数の要素に利用することができます。




次に文字を赤色に変更してみました。
HTMLはこうなりました。<span class=>でstyle1が適用されています。スタイルを見てみると、style1にはcolor:#f00に、つまり赤色が定義されています。spanによって文字をグループ化し、style1適用されているという事になります。


さらに文字の大きさを20pxにしてみました。
そうすると、classがstyle3に変わっています。styke3の定義を見てみると、先ほどの赤色にfont-size:20pxが加わった、複合スタイルに変更されています。

改行してみました。
<br>を加える事で改行されています。

改行した文字を青色、14pxにしてみました。

<span>でグループ化され、style4のスタイルが適用されています。

何となくイメージできてきたでしょうか。文字の色や大きさなどの装飾的な部分はスタイルで定義されて、適用されているのが分かります。


今度は画像アイテムを配置してみました。

HTMLはこうなりました。ちなみに、画像アイテムで作成された文字はパブリッシュされた時点で画像へと変換されリソースフォルダに収納されます。


<img src="Resources/index1.gif" border=0 width=252 height=19 alt="画像アイテムで文字を入力しました" style="position:relative; left:1px; top:-1px; float:left">
img src・・・・・画像の収納フォルダと画像ファイル名
borde・・・・・アンダーライン。0数値なので、アンダーライン無し
width,heigh・・・・・画像アイテムの大きさ
alt・・・・・画像の代わりとなる代替文字列
position:relative・・・・・ボックス要素を相対的な位置で配置する


ちなみに絶対(absolute)と相対(relative)に関してはこちらの回答No.3がとても分かり易く解説されていましたのでリンクしておきます。
次回に続く.....


Freeway Not In Frameset Redirect

直訳すると、フレームセットを使わないリダイレクトという事になるのだが、よくわからない.......。パラメーターには転送先が入力できる。このページに移ると瞬時に転送されるのだが、フレームセットがどのような影響を及ぼしているのかは謎。

2012年10月22日月曜日

Freeway スタイルシートを拡張してみる

Freewayで書き出されたHTMLの上部にある<style type="text/css">以下文章はスタイルシートで作成したスタイルの指示箇所になります。
アクションによってはココに書き込みをする事で機能を実行するものもあります。
Freeze Form Itemというアクションもその一つです。
このアクションは、テキストフィールドがページ画面で任意のサイズにしても、プレビュー画面では半分の幅になってしまうバグ?を修正するものです

アクションを適用したHTMLを見てみると、スタイルに#TextField { height:20px;; width:155px; }と書き加えられています。これはTextFieldというアイテムに対して、height:20px width:155pxというstyle属性を加えるよ!という意味になります。




今回は、この実行命令をスタイルシートの拡張でHTMLに書き加えてみようと思います。そうすれば、アクションに頼る事無く様々な書き込みが加えられそうですね。

まずはスタイルパレットを表示して、右上の歯車のマークから新規スタイルを作成します。タグに#TextFieldtと入力し、拡張ボタンを押します。これで、TextFieldという名前のアイテムをターゲットにしたstyle属性を作成できるようになります。

新規作成で、名前と値を入力します。heightとwidthの2つを作成し数値を入力します。


OKを押すと作成したスタイルがパレットに追加されています。

最後にパブリッシュを実行すれば終了です。




2012年10月19日金曜日

Freeway タイムリダイレクト

をページに適用すると、遅延の秒数後に設定したページにリダイレクトします。

2012年10月18日木曜日

BentoのデータをCSVで書き出してphpAdmineに読み込む

Bentoで下記設定でCSVで書き出します

Freeway ポップアップウインドウで写真や動画を再生


ScriptyLightbox2というアクションを使います。

扱える形式は下記形式の写真と動画ファイルです
  • JPEG
  • PNG形式
  • GIF
  • MOV
  • M4V
  • MP4
  • SWF
サンプル

2012年10月17日水曜日

Transmit4 複数画像の一括プレビューが出来ない

Transmit4の画像サムネイルの表示不具合に関して、プレビューすると直ると分かりましたが、今度は画像を複数選択し、右クリックすると画像が一つしか選択されなくなった。そこで右クリックからではなく、メニュー>ファイル>クイックルックを実行すれば一度に複数の画像のプレビューができます。

2012年10月16日火曜日

gmail 迷惑メールの設定

Gmailでは迷惑メールの設定がなく、迷惑メールに該当するアドレスをメールの自動振り分け設定で、ゴミ箱に移すように指定します。
まず、迷惑メールに指定したいメールを開き、メールの自動振り分け設定を開きます。


アドレスでフィルターを作成します。

フィルターにかかったアドレスをゴミ箱に移すように指定します
これで、今後指定したアドレスは、自動的にゴミ箱に振り分けられます。



2012年10月15日月曜日

Freeway パブリックリンクの取得パス

パブリックリンクの取得パスです。

http://kagutan.com/ima-g/blog/polldaddy.png

サーバー内に配置した画像の直リンクのパスです。

Freeway 無料のレンタルサーバーを調べてみた

SiteMix

  1. CGI、PHPが使える
  2. 広告が表示される
  3. 1.5GB

Land.to

  1. CGI、PHPが使える
  2. 広告が表示される
  3. 100MB


FC2

  1. CGI、PHPが使えない
  2. 広告が表示されない
  3. 1GB

2012年10月12日金曜日

Freeway 画像をフェードやスライドダウンさせる

アイテムにTransition FXアクションを適用することで、アイテムに色々なアクションを適用できます。使い方はAttention FXに似るのでそちらの投稿をご参考にしてください。画像を重ねて活用すれば、徐々に画像や文字が変化して行くなどの効果が作れそう。そのときに遅延の時間設定をしておいて、効果の発動をずらしていくわけか。色々使えそう!!ループできないのが残念........

2012年10月11日木曜日

イラストレーター 1コーナーだけ角を丸める

全てパスで繋がった四角形を書いて、ハサミツーツで丸めないポイントを削除します。

ポイントを削除するとこのようになり

効果>スタライズ>角を丸めるを実行します