第12回(1月13日) 文書処理 久野禎子.

Slides:



Advertisements
Similar presentations
コンピュータ基礎実習 ( 上級 ) 第二回 ウェブページの作成について 清水淳紀. ウェブページとは  ウェブ (Web) は正式名称を World Wide Web という。  文字や画像、動画等を簡単に扱うことができる。  [ リンク ] を介してページ同士がつながっているのが 特徴。 ページは.
Advertisements

DTP/Web パブリッシング 1. この授業について. DTP とは DeskTop Publishing ワークステイションやパソコン上の レイアウトソフトを用いて編集作業を 行い、レーザープリンターなどの高精 細な印字装置で出力し、書籍などの印 刷物を作成すること。 デスクトップ プリプレス.
1 情報処理基礎 2006 年 7 月 6 日. 2 本日の学習項目 HTML 文書の基礎知識を習得する。 ホームページ・ビルダーの基本的な使 い方を習得する。 ホームページの作成 自己紹介のためのホームページを作成する。
Word で XML マニュアルを編集 し、 XML を自動組版する 1. XML の自動組版概要 2. Word での原稿入力 アンテナハウス株式会社 2004/09/03.
XML ゼミ 独習 XML ~ 第 6 章 XHTML~ 6.1 XHTML の概要 6.2 XHTML の構造 谷津 哲平.
データベースの基礎知識 ACEESS の基本操作. データベースの基礎知識 データベース  特定のテーマや目的に毎のデータの集合体 データベースソフトウェア  データベースを作成、管理するソフトウェアの総 称 Oracle(Oracle) IBM(DB2) Microsoft(SQL Server)
看護情報セミ ナー 橋本 永吉 新井 ワードとパワーポイント 使っていますか?. Word を使う時 新規に文書を作成する ◦ 文書の形式を決める 既存の文書を編集する.
コンピュータ基礎実習 ( 上級 ) 第九回 スタイルシート 清水淳紀. はじめに  今回の内容  スタイルシート (CSS) とは何か  CSS の役割  CSS の利点  スタイルシートの基本  CSS の記入方法  基本的な CSS の例.
応用コース:ワープロを活用する WORD2000 1回目 基礎コースの復習(第1章と付録) 2回目 文字の入力(第2章と第4章)
視覚表現--CSSでwebページを自由にデザイン
2017/3/2 情報処理 第8回.
第11回JavaScriptゼミ セクション8-2 発表者 直江 宗紀.
画像展示サイト“Fragments” 『閲覧しやすさ』と『デザイン性』を両立させた Webデザイン
【2.12】文字装飾機能内部設計書
下左近研究室 ゼミ資料 ホームページの作り方(基礎編)
2017/3/7 情報処理 第8回.
CEC公開授業 Webサイト制作にチャレンジ! 2007年11月20日 於:東京都立板橋有徳高校 学校インターネット教育推進協会.
ウェブページ制作の基礎 タグの直接入力によるウェブページの制作 次のスライドへ進んだり,戻ったりしたい時は,右下のボタンをクリック。 次へ.
SlothLib.Web.
HTMLの記述と WWWにおける情報公開 遠藤
売れるためのWEBサイト構築.
CSSを利用したWebデザイン 理工学部 情報学科 3回生 喜多 亮輔.
HTML版パスファインダーの作成 CSSの利用 hp. infoseek. co. jp/cje10
ホームページの作り方.
ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko
徳山 豪 東北大学情報科学研究科 システム情報科学専攻 情報システム評価学分野
第1回 JavaScriptゼミ ・ scriptエレメント ・ 記述における諸注意 ・ 古いブラウザへの対応方法
見た目を定義する技術 CSS(スタイルシート).
専門ゼミⅠ 南ゼミ 特別授業③ 2002年6月7日 金曜日 4限目 今泉 裕隆.
Outlook メール文字化けの原因と対策
NC-2 情報通信基礎実験 WEBデザイン基礎実験 (1日目) 担当:清水,田代 副手:浦辺,石井.
WebDesigner StartGUide
サイト運営者へむけて、CMS管理画面をつかって サイト運営していく方法を紹介します。
スタイルシート C306 情報発信の基礎【第6回】.
情報伝達・WWW・ソーシャルメディア CMSとHTMLの基礎
SGMLについて 2年8組  原口 文晃.
XMLゼミ 5.1 XML文書と表示 5.2 CSS 5.3 XMLとXSL 高橋 辰裕.
※現在辻はAmazonの「この本を買った人はこの本も買っています」
第3章 第2節 ネットワークを活用した 情報の収集・発信(3) 5 表現方法の工夫
10 Microsoft Word(1) 10.1 Microsoft Word v.Xの概要 起動 終了
ホームページ作成・更新講座 夏のコンピュータ学習会 画像
HTTPとHTML 技術領域専攻 3回 中川 晃.
情報コミュニケーション入門b 第10回 Web入門(1)
情報コミュニケーション入門b 第10回 Web入門(1)
情報スキル活用 第7週 制作技術-1 情報の記述と画面のデザイン.
情報スキル活用  第5週 基礎技術-5  その2 : 他のページへのリンク.
第3章 第2節 ネットワークを活用した 情報の収集・発信(2) 4 文書の構造と表現
情報スキル活用 第8週 制作技術-2 画面の分割.
T2V技術 Web製作ラボ 5/9, 2012 hayashiLabo 11.
第3章 第2節 ネットワークを活用した 情報の収集・発信 4 文書による情報開示
情報スキル活用  第6週    基礎技術のまとめ  復習.
タグを使ったウェブページ作成 兵庫県立伊丹北高等学校 佐藤 勝彦.
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
情報コミュニケーション入門e 第11回 Part2 Web入門(1)
URLとファイルの対応 ユーザー s の Z:\www\ フォルダにある hello.html ファイル
XMLゼミ 1.3 XML文書の表示 1.4 XMLの役割 1.5 XMLとプログラミング M2 正木 裕一.
情報スキル活用 第2週 基礎技術ー2 : Webページの基本形.
情報スキル活用 第4週 基礎技術-4 : その1(タグのまとめ).
Htmlの基本.
コンピュータ プレゼンテーション.
情報コミュニケーション入門b 第11回 Web入門(2)
HP作成 そろそろまとめ編 担当:TAの人.
コンピュータ プレゼンテーション.
画像を貼る 目標:このようなページを作る.
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
独習XML ~第1章 XMLの基礎~ 1.1 XML文書の基礎 1.2 XMLとHTML
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
第14回放送授業.
情報処理基礎 2006年 6月 29日.
情報スキル活用 第6週 制作技術-1 情報の記述と画面のデザイン.
Presentation transcript:

第12回(1月13日) 文書処理 久野禎子

今日の実習:webページ作成 作ったことがない 作ったことがある ・ htmlタグを自分で書いた ・ webページ作成ツールを使った

文書処理技術 ワープロの文書処理技術 - もともと紙に印刷する文書をきちんと綺麗に  - もともと紙に印刷する文書をきちんと綺麗に  - WYSIWYG(ウィジウィグ:What You See Is What You Get )方式 で作成 Webページの文書処理技術  - ブラウザで取り扱うwebページとそのリンク機能  - マークアップ言語(html)で作成

ワープロによる文書作成: WYSIWYG方式

Webページの作成: マークアップ方式 Webページ作成には、文書マークアップ言語htmlを使って文書中に印(タグ)をつける。するとタグの働きによって文書が整形される。 タグを解釈して機能させて文書を表示させるのがブラウザソフトの役割。

(プレーン)テキストから整形文書へ プレーンテキスト hiroshima.txt WYSIWYG方式 Wordで読込む → 飾りや書式を付けて、Word形式の文書(.doc)に マークアップ方式 ブラウザで読込む → タグを記入してhtml形式のファイル(Webページのこと)に

htmlファイルを作ってみよう メモ帳(notepad)のhiroshima.txtにタグを書き込む タグは半角英数字モードで書きこむ タグを記入したら、「なんとか.htm」または「なんとか.html」というファイル名で新規保存する。   たとえば「hiroshima.html」 保存したhtmlファイルをブラウザで(ローカルファイル)表示する

htmlファイルの基本 タグは、<タグ名> そのタグ名の働きの適用範囲を囲むときは   <タグ名>・・・</タグ名> (対にしないで)単独で用いるタグもある http://home.t04.itscom.net/kuno/ko2007/html-intro/sam11.html http://home.t04.itscom.net/kuno/ko2007/html-intro/sam12.html

<html> <head> <title>ひろしま</title> </head> <body> <h1>広島の名産品</h1> <p>新宿のアンテナショップで見つけた広島の名産品を紹介します。</p> <h2>らーめん</h2> <p>ラーメンはいろいろありました。広島らーめん、尾道らーめんは有名どころだそうですね。しっかり置いてありました。</p> <p>でも私の眼に留まったのは、鞆の浦の鯛塩らーめんですかね。以前夏に鞆の浦を訪れた時は、鯛そうめん、美味しかったです。</p> <h2>瀬戸田のレモネード(粉末)</h2> <p>一番の売れ筋だそうです。ショップの前に山積みで、値段も手頃。熱いお湯で溶かして飲むのでしょうね。美容に良さそうです。</p> <h2>カープかつ</h2> <p>なんともまあ、どでかい赤い袋ですが、中は小分けになってます。多分あの有名なおたふくソースの味付きのカツなのでしょう。でもその中身は、一体何のカツかというと、、、歯ごたえあります。</p> <h2>でびら、でべら</h2> <p>カレイの干したの、と説明してもちょっと違う気がします。でびらの食べ方を知っている人は広島の人だと思います。私の家ではトンカチで叩いていました。</p> </body> </html>

Webページの飾り: cssでページ要素にスタイルを付ける CSS(直列スタイルシート)    htmlタグごとに表示の様子を統一指定することができる     +    局所的な飾り、webページ上の要素のレイアウト指定 http://home.t04.itscom.net/kuno/ko2007/html-intro/sam13.html http://home.t04.itscom.net/kuno/ko2007/html-intro/sam14.html http://home.t04.itscom.net/kuno/ko2007/html-intro/sam15.html

Webページの飾り:cssでページ要素にスタイルを付ける ● hiroshima.htmlのスタイル指定 <head> <title>ひろしま</title> <style type="text/css"> h1 { text-align: center; width: 60%; margin: 5mm auto } h1 { border: ridge blue 4px; padding: 3mm } h2 { text-decoration: underline } p { text-indent: 1ex; margin: 5px 20px } p { padding: 2mm } p { background: rgb(200,255,240) } </style> </head> ・・・

Webページ文書処理技術 htmlとWebページ検索 検索エンジンは、世界中のwebサーバマシン上に置かれ公開されているWebページのもとであるhtmlファイルを調べ、ページ中に現れる単語で検索用の索引を生成している。 <h1>などの見出しに現れる単語は検索用の索引語として的確と見なせ、重要度が増す あるページから他のページへの参照リンクがあることは参照先のページが有用であると見なす(多くの他のページから参照されるページほど重要)

マークアップ方式による文書作成 (利点)文書中にマーク(タグなどの印)が明示されるため、そのマークを利用して高度な文書処理が可能 (不利)印付けをするための知識がないと文書を作れない、出来上がりの文書の様子を見ることがWYSIWYG方式ほど容易ではない Cf. WYSIWYG方式でも(タグ方式ほど明確で容易ではないが)文書処理技術の応用例はある

アウトラインモードのWord文書生成 スタイルシートの利用 単発の文字飾りではなく、文書の要素レベルを指定し、要素レベルごとに統一した書式や飾りを付けるが可能  → 要素レベルごとの表示や目次生成が可能 書式や飾りに名前が付いている。  → 書式や飾りの統一的変更が可能

Wordからのweb文書生成 生成されるhtmlコードは過度に複雑であり、あまりお奨めしない。