MoogaOne
<1. > 1. MoogaOne... 1 2. MoogaOne... 1 3.... 1 4.... 1 5.... 2 6.... 2 <2. > 1.... 2 2.... 2 3. Template.htm... 2 4. index.htm... 4 [ ]... 4 5.... 4 6.... 6 7.... 6 8.... 6 [Template.htm Template-e.htm ]... 7 <3. > 1.... 7 2. Template.htm... 7 [2 ]... 8 3.... 8 [ ]... 9 4.... 9 [ ]... 10 <4. > 1.... 10 [ ]... 10 [ ]... 11 <5. css > 1. Template.css css... 11 2. css... 12 3. HTML css... 12 [css ]... 12 4. MoogaOne... 13 <6. > 1.... 15 2. change_text... 16 3. MoogaOne... 16 4. ID CLASS... 17 5.... 17 6.... 18 7.... 20 MoogaOne... 23
<1. > MoogaOne MoogaOne MoogaOne URL MoogaOne http://mook.mook.to/moogaone/index.htm 1. MoogaOne MoogaOne css HTML css MoogaOne MoogaOne HTML css HTML css MoogaOne css MoogaOne MoogaOne MoogaOne 2. MoogaOne MoogaOne ReadMeFirst.txt MoogaOneManual.doc HTMLAndCSS.doc HTML css index.htm index-e.htm index.css css Template.htm Template-e.htm Template.css css TwoColumns.htm 2 TwoColumns-e.htm 2 TwoColumns.css 2 css MoogaOneLibrary.png png MoogaOneLibrary.gif gif Triangle.png png Triangle.gif gif spacer.gif 3. MoogaOne 4. MoogaOne UNICODE (UTF-8) UNICODE PC 1
MoogaOne HTML html htm HTML htm UTF-8 META UTF-8 5. MoogaOne MoogaOne 6. MoogaOne MoogaOne MoogaOne MoogaOne MoogaOne Design Concept by MoogaOne 1. <2. > PC MoogaOne [ ] [ ] NotePad WordPad HomepageBuilder DreamWeaver 2. Illustrator FireWorks.jpg.gif.png 60 300 Illustrator, FireWorks MoogaOne MoogaOneLibrary.png index.htm 3. Template.htm Template.htm Template.htm (a) <META NAME="Author" CONTENT=" "> <META NAME="Author" CONTENT="Taro YAMADA "> 2
(b) <TITLE> </TITLE> <TITLE> </TITLE> (c) <IMG CLASS="TopBanner" SRC="../ ">../.gif.png.jpg <IMG CLASS="TopBanner" SRC="../ MoogaOneLibrary.gif "> (d) <A HREF=" URL"> </A><SPAN> </SPAN> URL URL <A HREF="http://www.donzoko.ac.jp/"> </A><SPAN> </SPAN> (e) <A HREF=" URL"> </A><SPAN> </SPAN> (d) (f) <A HREF="../SiteMap/index.htm"> </A><SPAN> </SPAN> <A HREF="../Contact/index.htm"> </A><SPAN> </SPAN> (g) <A HREF="../index-e.htm">English</A> (h) <DIV CLASS="Bottom"> <P> - TEL: FAX: FAX email: <A HREF="mailto:e ">e </A></P> <ADDRESS>Copyright (C). All rights reserved.</address></div> <DIV CLASS="Bottom"> <P> 123-4567 4-26-1-17-6 TEL: 0422-00-0000 FAX: 0422-00-0001 email: <A HREF="mailto: matuyama@moogaone.ac.jp">matuyama@moogaone.ac.jp</a></p> <ADDRESS>Copyright (C) MoogaOne Library. All rights reserved.</address> </DIV> Template-e.htm 3
4. index.htm index.htm 2.-2. Template.htm (a) (h) index-e.htm MoogaOne HTML <DIV CLASS="Banner"> </DIV> <DIV CLASS="Bottom"> </DIV> <DIV CLASS="Alpha"> </DIV> <DIV CLASS="Beta"> </DIV> <DIV CLASS="Gamma"> </DIV> 3 <DIV CLASS="Block"> </DIV> HTML <H2> </H2> <LI> </LI> <DIV CLASS="Block"> <H2> </H2> <UL CLASS="Menu"> <LI> 1 <LI> 2 <LI> 3 </UL> </DIV> 5. http://www.slis.keio.ac.jp/~ueda/univlibguide/toppageguideline.html 4
http://www-lib.icu.ac.jp/ (a) (b) (c) (d) (e) (f) (g) (h) 6. 5
<H2> </H2> <H2> </H2> <H1> </H1> <DIV CLASS="Block"> <H2> </H2> <UL CLASS="Menu"> <LI> 1 <LI> 2 <LI> 3 </UL> </DIV> 7. 2.-5. (a) (h) <LI> <DIV CLASS="Block"> <H2> </H2> <UL CLASS="Menu"> <LI> <LI> <LI> </UL> </DIV> 4. 6. index.-e.htm 8. 1 1 Map Calendar CheckOut 6
Template.htm Template-e.htm Template.htm Templatee.htm Template.htm Template.css HTML HTML 1. <3. > Template.htm Template-e.htm 2. Template.htm Template.htm index.htm index-e.htm 7
2 Template.htm index.htm index.htm 1 2 (a) <IMG CLASS="TopBanner" SRC="../MoogaOneLibrary.gif">../MoogaOneLibrary.gif../ 2 SRC="../../ DonzokoUnivLibrary.gif" (b) <A HREF="../index.htm"> </A> >../index.htm../ 2 HREF="../../index.htm" 2 2 1 <DIV CLASS="BreadCrumb"> <A HREF="../../index.htm"> </A> > <A HREF="../index.htm"> </A> > </DIV> (c) <A HREF="../../SiteMap/index.htm"> </A><SPAN> </SPAN> <A HREF="../../index-e.htm">English</A><SPAN> </SPAN> <A HREF="../../Contact/index.htm"> </A> 3. <TITLE> </TITLE> <TITLE> </TITLE> 8
MoogaOne 1 <DIV CLASS="Lead"> </DIV> <DIV CLASS="Block"> </DIV> 2 <DIV CLASS="Banner"> </DIV> <DIV CLASS="Bottom"> </DIV> Lead 1 Block 4. (a) Lead Lead <H1> </H1> 3.-3. <P> </P> <DIV CLASS="Lead"> <H1> </H1> <P> 4 </P> </DIV> (b) Block Block 9
css <FONT> <B> <BR> css <CENTER> <BLOCKQUOTE> <TABLE> <TR> <TD> 1. <4. > css URL 2 URL URL 1 2 2 2../ 1 / 1 10
css css 1. Template.css css <5. css > MoogaOne Template.css Template.htm Template.css Template.css Template.css Template.css css css css HTML css css HTML Template.css css 2 css 11
Template.css css HTML css MoogaOne css css Template.css css Template.css P{ font-size:85%; line-height:150%; } css P{ font-size:80%; } css 80% line-height:150%; Template.css line-height:150%; css 2. css css Notepad.css css 3. HTML css HTML Template.css css HTML css <LINK REL="stylesheet" HREF=" css.css" TYPE="text/css"> <LINK REL="stylesheet" HREF="Calendar.css" TYPE="text/css"> css css../ Template.htm css IBM HomepageBuilder <LINK REL="stylesheet" HREF="Template.css" TYPE="text/css"> <LINK REL="stylesheet" HREF=" css.css" TYPE="text/css"> 1 <LINK REL="stylesheet" HREF="../Template.css" TYPE="text/css"> <LINK REL="stylesheet" HREF="../ css.css" TYPE="text/css"> 12
4. MoogaOne MoogaOne HTML (a) Template.css Menu [HTML] [ ] <UL CLASS="Menu"> <LI> <LI> <LI> </UL> 1 [HTML] <P> </P> <UL CLASS="Menu"> <LI><A HREF="http://www.moogaone.com">MoogaOne.com</A> </UL> [ ] (b) MoogaOne <TABLE><TR><TD> Template.css [HTML] <TABLE> <CAPTION> </CAPTION> <THEAD> <TR> <TH></TH> <TH>1999 </TH> <TH>2000 </TH> <TH>2001 </TH> <TH>2002 </TH> <TH>2003 </TH> 13
</TR> </THEAD> <TBODY> <TR> <TD> </TD> <TD>250</TD> <TD>254</TD> <TD>256</TD> <TD>259</TD> <TD>259</TD> </TR> </TBODY> </TABLE> [ ] 1 <TABLE> 1 <TD> 1 1 <TH> <CAPTION> <CAPTION> <THEAD> <TBODY> <TH> (c) <H1><H2><H3><H4> MoogaOne Template.css <H1> <H2> <H3> <H4> css <H1> <H2> Lead Block <H3> css Template.css <H3> color:#633; [HTML] <H1>Lead </H1> <H2>Block </H2> <H3> </H3> <H4> </H4> [ ] 14
<6. > 1. HTML HTML [ ] 1. 2. [ ] [ ] [ ] OK 3. [ ] [ ] [ ] [ ] 4. [ ] [ ] [ ] 5. [ ] (a) [ ] [ ] [ ] </LI> [ ] </LI> (b) [ ] [ ] [ ] <DIV 3 [ ] <DIV <DIV> 3 <DIV> (c) 15
[ ] <DIV CLASS= Service > [ ] <UL CLASS= Menu > <DIV CLASS= Service > <UL CLASS= Menu > (d) ^p [ ] </DIV>^p<DIV [ ] </DIV>^p^p<DIV </DIV> <DIV> 2. change_text chenge_text UFT-8 MoogaOne 3. MoogaOne MoogaOne #003399 #6666ff #ccccff #666633 #000000 #ffffff #0000ff #800080 #cccccc #666666 <H2> Block <H1> Lead News <H3> 16
4. ID CLASS css HTML ID css # CLASS css. 2 MoogaOne CLASS. 5. MoogaOne MoogaOne (a) Spacer.gif Spacer.gif ALT <BODY> <IMG SRC="Spacer.gif" WIDTH="1" HEIGHT="1" CLASS="Jump" ALT=" "> <A HREF="#1"><IMG SRC="Spacer.gif" WIDTH="1" HEIGHT="1" ALT=" "></A> <A HREF="#2"><IMG SRC="Spacer.gif" WIDTH="1" HEIGHT="1" ALT=" "></A> <A HREF="#3"><IMG SRC="Spacer.gif" WIDTH="1" HEIGHT="1" ALT=" "></A> <DIV CLASS="Block"> <H2> <A NAME="3"><IMG SRC="Spacer.gif" WIDTH="1" HEIGHT="1" ALT=" "></A> </H2> <P> <IMG SRC="Spacer.gif" WIDTH="1" HEIGHT="1" ALT=" "></P> </DIV> (b) <BODY> <A HREF="#0"><IMG SRC="../Spacer.gif" WIDTH="1" HEIGHT="1" CLASS="Jump" ALT=" "></A> <DIV CLASS="Lead"> <H1><A NAME="0"> </A></H1> <P> MoogaOne </P> </DIV> 17
Jump <A> </A>.Jump{ display:block; margin:0; padding:0; } (c) http://w3.icu.ac.jp/lib/calendar/text/2006/index.htm (d) IBM HomepageReader IBM (e) MoogaOne ColorAccess http://suginy.no-ip.com/labo/labo.html 6. MoogaOne (a) [ ]-[ ]-[ ] 18
(b) vs. (c) 2.-4. 2.-4. 19
(d) Google 1 2 MoogaOne MoogaOne 1 1 1 NewPage MoogaOne (e) 7. Homepage Usability: 50 Websites Deconstructed. Jakob Nielsen, Marie Tahir (New Riders Press, 2001) Web Jakob Nielsen 50 20
, http://www.slis.keio.ac.jp/~ueda/univlibguide/toppageguideline.html HTML Web (, 2002) css 2005 2,, 2004 css Web (, 2002) HTML+CSS Web (, 2003) HTML css HTML css U-Site http://www.usability.gr.jp/index.html IID Jakob Nielsen HTML, 2001 css css 21
, 2005 css 2 3 MoogaOne 2005 4 6 181-8585 3-10-2 TEL: 0422-33-3668 FAX: 0422-33-3669 email: matuyama@icu.ac.jp URL (MoogaOne): http://mook.mook.to/moogaone/index.htm URL (ICU ) : http://www-lib.icu.ac.jp/index.html 22
MoogaOne MoogaOne HTML css MoogaOne 2006 2 16 6-2. change_text 2005 7 11 Template.ccs <TABLE><TH><TD> <TABLE> css 5-4-(b). 2005 6 29 6-3. MoogaOne Lead Block News #ccccff 2005 6 28 2005 6 15 css 2005 6 8 6-5. 2005 6 3 MoogaOne HTML MoogaOneLibrary.gif MoogaOne HTML META GENERATOR <META NAME="GENERATOR" CONTENT="IBM WebSphere Studio Homepage Builder Version 9.0.2.0 for Windows"> 2005 6 1 1-6. 2-1. 23