スケルトンハウス‐きまぐれCafe

生活とビジネス

そのときの思いや状況で、いろいろなことを話し合ってきた喫茶店。きまぐれに、思いつくままに・・・

印刷ボタンを付ける/HPBでWebページ作成

2013-09-28 08:47:07 | デジタル・インターネット

  ブラウザの印刷機能である、「ファイル(F)「印刷(P)」の操作をしなくても、ページ内に印刷ボタンを設置して印刷できるようにしようと思いました。



21_insatsubotanb



<方法1>

1.
HTMLに“印刷ボタン画像(別途作成しておく)”もしくは「印刷」文字列を追加する。



22_html01



2.〔印刷ボタン〕画像もしくは「印刷」文字列にリンクを挿入する。



23_prink01



3.「リンクの挿入(L)」をクリックして表示される「属性」画面の「ファイル名(N)」に「javascriput:print();」と入れ、〔OK〕ボタンをクリック



24_rinksetei



4.プレビュー画面で実行すると、印刷ウィザードが表示される



25_pwizard




<方法2>

  画像や文字列にprintのスクリプトへのリンクを挿入せず、〔印刷ボタン〕を付けるには、HTMLに以下の通りボタンの挿入と印刷スクリプトを記述する。

 

    <input type="button" value="印刷"
    onclick="window.print();">

HTMLソースと編集画面>ボタンが作成されている。



31_html







  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

地球の水

2013-09-21 09:08:53 | 本、雑誌とCD、DVD

    824日付け朝日新聞の“be”に掲載されていた『ののちゃんのDO化学』・「地球の海はどうできたの?」を読んでいて、若い頃に読んだ本を思い出しました。



Nono2



  『ののちゃんのDO化学』では、四十数億年前の太陽系の成り立ちにおいて、岩石原始惑星の衝突によって形成された、水と氷を全く含まない地球に、火星と木星の間にある小惑星帯から来た氷微惑星が衝突し、温暖な地球で蒸発も凍結もせずに水として存在するようになったと説明しています。


  私が思い出した本は
1975年(昭和50年)に発行された、高橋実氏〔財団法人電力中央研究所経済研究所理事待遇・高橋研究室長(当時)〕の著書『灼熱の氷惑星』で、地球の水のルーツに関する“高橋仮説”を著したものです。この本は今も私の書架にあり、再度読まれる日をまっているかのようです。



Shakunetsunokoriwakusei



    書  名 : 灼熱の氷惑星
    著  者 : 高橋 実
    発行所 : 原書房
    初版発行:
1975227


  高橋仮説では水の塊である“天体
M”が地球を掠め、その時地球に置いていった水が地球上の水になったというものです。
  人類震撼のノンフィクション、科学的仮説ですが、受け止める人によっては壮大なSF(宇宙科学小説)のようにも思えることでしょう。











  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

ロールオーバー・タブメニューの作成/HPBでWebページ作成

2013-09-14 09:00:18 | デジタル・インターネット

 カーソルをプロットした時と、そうでない時のタブの色・形が変わるメニューを作ります。
 マウスが上に来た時に、別々の画像(下記の2つの画像)を切り替えて表示させてロールオーバー効果を出す方法です。



 以下のようなタブメニューを作ります。



 先ず、TOPページの「.html」ファイルを作成します。
 このとき、タブのリンク先として「NEWS」「Q&A」と記述しているページは、それぞれの「.html」ファイルを作成した後、そのファイル名に変更します。
 作成するタブは以下の通りとします。

   TOP   NEWS   Q&A

1.タブにする画像の作成

 先ず、「画像1」、「画像2」のJPGファイルをペイントで作成しておきます。
 大きさは、幅150px、高さ35pxとします。
 更に、タブメニューの背景に挿入する幅が900pxの「画像1」と同じボタンを準備します。

2.HTMLの記述

 HPBを起動し、HTMLソースを以下のように記述します。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<link rel="stylesheet" href="tubmenu.css" type="text/css">
<link rel="stylesheet" href="centre.css" type="text/css">
</head>
<body style="border-width : 2px;">
<div class="box1" style="background-color : transparent;background-image : url(sample21.jpg);border-style : none;border-color : transparent;">
  <ul>
    <!-- ↓リストここから↓ -->
    <li><a href="リンク">TOP</a></li>
    <!-- 項目1 -->
    <li><a href="リンク">NEWS</a></li>
    <!-- 項目2 -->
    <li><a href="リンク">Q&A</a></li>
    <!-- 項目3 -->
  </ul>
  <!-- ↑リストここまで↑ --><img src="gazo2" alt=""><!-- 画像読み込み --></div>
<div class="box2">ここにコンテンツを入れる。<br>
</div>
<p><br>
</p>
</body>
</html>

3.スタイルシート(CSS)の記述

 「スタイルシートマネージャで編集」でcssファイルを追加(ここでは、「user」と名付け)し、次のように記述します。

@charset "Shift_JIS"
/* リスト全体 */
ul {
  width: 450px;  /* リスト全体の幅 */
  height: 35px;   /* リスト全体の高さ */
  list-style-type: none;
  list-style-position: outside;    /* リストマークを消す*/
  text-align: center;  /* 文字を中央設定 */
  font-size: 120%;   /* 文字を大きくする設定 */
  font-weight: bold;  /* 文字を太くする設定 */
  line-height: 180%;  /* 行の高さを調整 */
  margin-top: 0px;   /* ページ上部からの空白を無くす */
  padding-left:0;       /* タブメニューを左端から開始 */
}

/* 各項目 */
li
   {
     width:150px;       /* 項目の幅 */
     height:35px;        /* 項目の高さ */
     float:left;           /* 各項目を左側から回り込み */
}

/* リンク部分 */
a {
      display: block;   /* リンク範囲をブロックに変換 */
      width: 100%;    /* リンク範囲(幅)をリスト項目範囲全て */
      height: 100%;   /* リンク範囲(高さ)をリスト項目範囲全て */
      background-image : url(sample11.jpg);   /* リンク範囲の背景画像設定 */
      background-repeat: no-repeat;   /* 背景画像繰り返し表示しない */
      color: rgb(199, 254, 158);   /* リンク文字色 */
      text-decoration:none;   /*文字の下線を無くす */
}

a:link {
          color: rgb(0, 204, 0);   /* まだ見ていないリンク色 */
}

a:visited {
              color: lime;           /* 既に見たリンク色 */
}

a:hover {
             background-image : url(sample12.jpg);     /* マウスが上に来た時の背景画像設定 */
             color: green;         /* マウスが上に来た時の文字色 */
}

/* リンク部分 */
img
   {
    display:none;       /* 画像2を表示しない */
}

 常に「画像1」が表示されており、カーソルをプロットした時だけ表示される「画像2」は非表示としておき、プロットされたときに「画像1」と入れ替わるように記述しています。
 「画像2」は、「画像1」の後ろに隠れています。



3.bodyの大きさを900pxとして、各項目が中央に集まるように設定します。
 cssファイルを追加(ここでは、「centre」と名付け)し、次のように記述します。

@charset "Shift_JIS";

 /*要素リセット*/

body,p,div,ul,li,table{
 margin : 0;
 padding : 0;
}

body
{
  width:900px
  margin-left:auto;
  margin-right:auto;
}

box1
{
  width:900px
  margin-left:auto;
  margin-right:auto;
}

box2
{
  width:900px
  margin-left:auto;
  margin-right:auto;
}


これで完成です。

04_kansei

ブラウザでの表示です。

05_kansei_blouzer






  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

アドビリーダーでPDFからワードやエクセルに変換

2013-09-07 09:28:20 | デジタル・インターネット

    20121015日より提供が開始されたAdobe Acrobat Pro XIおよびReader XIは、WindowsMicrosoft Office 2010以降)がシームレスに利用できるように開発されているとのことです。
     Adobe Reader XIでは、年間1,600円の「Adobe Export PDF」又は年間6,900円の「Adobe CreatePDF」のどちらかの有償オンラインサービスを契約すれば、Adobe Acrobat Pro XIと同等に、レイアウト、書式設定および表はそのままの状態で、PDFファイルをMicrosoft Worddocx)、Excelxlsx)、リッチテキスト(RTF)ファイルとして書き出すことができます。

    ADOBE ACROBAT.COMサイトで利用申し込みをします。



Acrobatcom




【関係サイト】

  ○
Adobe ExportPDF その他のサービス

  ○
Adobe ExportPDF & CreatePDF
         
価格・機能表

  ○
Adobe ExportPDF Word











  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする