zh-TW /css/eflyer_gray.xml Web Page Design Guideline Introduction Eflyers or Declarations ─ The Two Basic Layouts What's in the Main Content How to edit an XML file? Install WampServer (Apache, PHP, and MySQL) File Structure vs. Site Map Few things to know to be a good xml writer Few extra things to know when editing a calendar Few extra things to know when editing an event Introduction The new 2008 facelift adopt the XML and XSLT technology as the main design trend. Since the business logic and presentation display are separated, XML is very friendly for non-technic user to crate a new web page or modify an existing one. Non-technic people do not need to touch the presentation rules, .xsl files. Of cause, certain rules still need to follow. Eflyers or Declarations ─ The Two Basic Layouts Before you start please decide what layout you are plan to have. Eflyers are used to boradcast emails to members. Declaractions are used for regular web pages which has common header, top menu, side bar, and footer. Eflyer Page:

<?xml version="1.0" encoding="big5"?>

<== define the xml file encoding; this has to be big5 even for English language

<?xml-stylesheet href="/xsl/eflyer.xsl" type="text/xsl"?>

<== select the eflyer presentation

				
<page>

<== define the main root of the xml file; DON'T CHANGE!


  <currLang>zh-TW</currLang>

<== define the page language: zh-TW or en

	
  <layout>
    <title>美國菩提學會 ─ 宗薩欽哲仁波切開示</title>

<== define the page title used by the browser

  </layout>

  <embeddedcss>/css/eflyer_yellow.xml</embeddedcss>

<== define a eflyer presentation template; two templates have been created: eflyer_yellow.xml and eflyer_gray.xml; more can be created as needed.


  <header>美國菩提學會邀請您 ~</header>

<== define the header


  <mainContent>
   .....  (same as Declaration)

<== define the main contents

  </mainContent>
  
  <footer>

<== define the footer

		<mbs></mbs>

<== display mbs' contact information

		<mla></mla>

<== display mla's contact information (option; comment it if no need for this eflyer)

  </footer>
	
</page>

Declaration Page:

<?xml version="1.0" encoding="big5"?>

<== define the xml file encoding; this has to be big5 even for English language

<?xml-stylesheet href="/xsl/declaration.xsl" type="text/xsl"?>

<== select the declaration presentation

				
<page>

<== define the main root of the xml file; DON'T CHANGE!


  <currLang>zh-TW</currLang>

<== define the page language: zh-TW or en

  <currMenuPos>classes</currMenuPos>

<== define the first level position in the top menu

  <currSubmenuPos>zw</currSubmenuPos>

<== define the second level position in the top menu

	
  <layout>
    <title>美國菩提學會 ─ 首頁</title>

<== define the page title used by the browser

  </layout>

  <css>

<== define the layout style

    <filename>/css/newcss.css</filename>

<== template for the common area: header, top menu, footer, and side bar

    <filename>/css/declare_white.css</filename>

<== select a declaration presentation template; two templates have been created: declare_white.css and declare_event.css; more can be created as needed.

  </css>

  <mainContent>
    ..... (same as Eflyer)

<== define the main contents; header, footer, menu and side bar are handled in declaration.xsl

  </mainContent>
	
</page>

What's in the Main Content

<headline1>

<headline2>

<headline3>

<quoteBlock>

is used to display a quotation from a book by some author. This block is similar to textBlock except it can handle the subtitle, from, and by elements. Depending on the css file you choose, the quotation may align in center or left. Varied background color and font color are also available when using different css file.

<blockTitle>

is used to display the title of the block. It is bold in light burgundy by default. Adding

id

attribute places an anchor at the declared position. This is the same as <a name="abc"> in html. Adding

style

attribute changes the default style settings.

<subtitleLeft> or <subtitleCenter> or <subtitleRight>

<by>

<from>

<textBlock>

<blockTitle>

is used to display the title of the block. It is bold in light burgundy by default. Adding

id

attribute places an anchor at the declared position. This is the same as <a name="abc"> in html. Adding

style

attribute changes the default style settings.

<textContent>

<listContent>

is used to display list. The default is unordered list with square bullet. Adding

start

attribute, the list becomes an ordered list. The default ordered list using decimal value for numbering. The style of bullet or numbering can be changed by adding the

style

attribute.

<listContent>

--> display unordered list with square bullet

<listContent start="1">

--> display ordered list starting from 1

<listContent style="list-style:circle;">

--> display unordered list with circle bullet

<listContent start="3" style="list-style:upper-alpha;">

--> display ordered list with upper-alpha C

<list>

<tableContent> or <tableContentHeadAndBorder>

<rowContent>

<col>

<importantBlock>

is used for important notes. The font weight is bold. The font color is burgundy.

<imageBlockLeft>

places enclosed image to the left of the page. The width of the image has to be specified due to the bug of IE6.

<imageBlockRight>

places enclosed image to the right of the page. The width of the image has to be specified due to the bug of IE6. How to Edit an XML File? Preparing an XML File Editor The xml file is just a regular text file. Theoretically, you can use any text editor to edit the xml file. However, since our website is a Chinese website, the XML editor must be able to support big5 encoding. Don't ask me how it works. I studied some and still don't quite understand. I just tried and then checked if the xml file can be displayed eventually.

Personally, I use Macromedia Dreamweaver as my editor. I did try some free xml editors and found "Peter's XML Editor" is the best among all (I checked four or five editors). It has both tree view and regular source view for xml content. You can also locate your files from its tree structure file display pane. It also provides a preview feature which unfortunately we cannot use it due to our own file structure. To preview an xml file locally, please install Apache web server on your PC.

To download the "Peter's XML Editor". Please go to the following website and click the download link. Although the designer has stopped supporting this editor, the editor itself has been well written and is a very user friendly tool.

http://www.iol.ie/~pxe/ Some Rules About an XML File The html file is a loose xml file. In fact, a lot of websites are using xhtml which is extactly an xml file. For those of you don't know anything about html nor xml, four terminologies you have to know: tag --- a text surounded with < and > e.g. <mainContent> a closing tag is text surrounded with < and > and prefixed with a '/'. eg. </mainContent> element --- an opening tag and a closing tag together form a complete element. The name of an element is the text in the opening tag. e.g. mainContent in the <mainContent>...</mainContent> element. attribute --- the characters of an element; e.g. In <menu id="newsletters">, id is an attribute of the menu element. value --- the value of an element which is everything surrounded by the opening and closing tags. e.g. "Hello world!" is the value of <mainContent>Hello world!</mainContent> element. The following are few import rules that we have to follow when editing an xml file. More rules are listed in w3schools for your reference. All XML elements must have a closing tag. --- Has to be either <aaa></aaa> or <aaa/>. XML tags are case sensitive. --- <aaa>, <Aaa>, and <aAa> are three different elements in xml, XML elements must be properly nested. --- Has to be <aaa><bbb><ccc></ccc></bbb></aaa> and cannot be <aaa><bbb><ccc></bbb></ccc></aaa> XML documents must have a root element. --- "<page>" is the chosen root element in our xml files. XML attribute values must be quoted. --- attribute value has to be surrounded by the double quotes ("). File Structure vs. Site Map

base/

- the base directory (e.g. c:/wamp/mahabodhi/)

index.php

is used to access the new home page from base path.

css/

- all css files

declare_event.css

is used with newcss.css; for event and home page display

declare_white.css

is used with newcss.css; for most pages other than events

eflyer_gray.xml

is used for eflyer in the gray tone

eflyer_yellow.xml

is used for eflyer in the yellow tone

eflyer_blue.xml

is used for eflyer in the blue tone

flyout_ie.css

is a special dropdown menu style; It is only used for ie6

newcss_ie.css

is used with the declare_xxx.css; It contains the display styles for header, footer, top menu and side bar.

en/

- all English xml

includes/

- files to be included by php

MM_XSLTransform/

MM_XSLTransform.class.php

is used to transform xml with the associated xslt.

js/

- the javascript files

show_hide_div.js

is used in calendar to pop up more information of an event when mouse over.

xsl/

- the presentation files

calendar.xsl

is used by all calendar pages (calendar/*.xml)

classes.xsl

is only used by the classes summary page (classes/summary.xml); All study group pages are using declaration.xsl file.

contactus.xsl

is only used by contact us page (about/contactus.xml)

declaration.xsl

is used by any non-eflyer page that has no exceptions.

document.xsl

is an include file. Most xsl files include this file. It handles the presentation of the main content.

document_inline.xsl

is an include file similar to document.xsl. It is derived from document.xsl and is only included by the eflyer.xsl. The stylesheets are transferred in inline format instead of linked externally. This is because most web email servers ignore all the linked stylesheets and/or embeded stylesheets. Only inline stylesheet is preserved. In order to have seamless appearence when send an eflyer via email, we CANNOT simply link the external css. First of all, the traditional css file is now presented in xml. And then, this .xsl file places all the style delared in the xml file into the inline format.

eflyer.xsl

is used by eflyer pages; Unlike declaration.xsl, it doesn't have side bar nor the top menu. The header and footer are also handled in different way.

events.xsl

is used by all event pages (events/*.xml)

index.xsl

is only used by the home page (index.xml)

navigation.xsl

is an include file. All xsl file must include this file. It handles the presentation of the header, footer, top menu, and side bar.

zh-TW/

- the Chinese version

index.xml

is the home page

navigation.xml

is an include file. All xml files refer to this file.

about/

- all pages under 關於

calendar/

- all pages under 活動月曆

classes/

- all pages under 讀書會

community/

- all pages under 社區服務

downloads/

- all pages under 下載

eflyers/

- all eflyer pages

events/

- all pages under 活動資訊

libray/

- all pages under 藏書

newsletters/

- all pages under 菩提會訊

offrecord/

- all pages not to be accessed by the public

recipes/

- all pages under 創意廚房

resources/

- all pages under 資源

teachers/

- all pages under 師長檔案

en/

- the English version
Its subfolders are the same as zh-TW.

photos/

- the images used by a specific xml file
Its subfolders are the same as zh-TW.

images/

- the images shared by all xml files Install WampServer (Apache, PHP, and MySQL) 1. Install WampServer Please go to http://www.wampserver.com/en/download.php and click on DOWNLOAD WampServer 2.0. I found this website provided the easiest way to install Apache, php, and MySQL all in one. I installed an older version a year ago. Unlike others, I didn't do anything to make it work. I set my WampServer directory to 'wamp'. 2. Start WampServer Locate the Start WampServer Icon from your desktop and double click it to start the Apache web server. You should see a half circle white icon (meter) in your task bar (on the right of the very bottom line in your screen). Meter icon with some red inside means the services are stopped. Meter icon with some yellow inside means the services are starting. Meter icon with all white inside means the services are running normally. 3. Create a Sub-Directory Named 'mahabodhi' Under C:/wamp Create a new folder named 'mahabodhi' under c:/wamp. Copy the files listed in the File Structure vs. Site Map to this new folder. You don't have to copy all the xml files. But files with file extension other than .xml should be copied. 4. Create a Virtual Host to Simulate http://mahabodhi.org Open file C:/wamp/bin/apache/apache2.2.8/conf/httpd.conf with Nodepad. Press ctrl-F to find "httpd-vhosts.conf" in the file Uncomment "#Include conf/extra/httpd-vhosts.conf" by removing the '#' sign to include the Virtual Host configuration. Open file C:/wamp/bin/apache/apache2.2.8/confextra/httpd-vhosts.conf with Nodepad. Add the following declarations to the end of file

<VirtualHost *:80>
  ServerAdmin webmaster@mahabodhi
	DocumentRoot "c:/wamp/mahabodhi/"
	ServerName  mahabodhi
	ErrorLog "c:/wamp/mahabodhi/_logs/error.log"

  <Directory "c:/wamp/mahabodhi/">
    Options All
    AllowOverride All
    order allow,deny
    allow from all
  </Directory>
</VirtualHost>

5. Let Windows OS Know About This Too Open "C:\WINDOWS\system32\drivers\etc\hosts" with Notepad (this file has no file extension). Add a line "127.0.0.1 mahabodhi" at the end of the file. From now on you can test your changes locally by opening a web browser (ff, ie,...) first. Type in "http://mahabodhi/index.php" or "http://mahabodhi/zh-TW/index.xml" to access the home page. To access other xml files please refer to File Structure vs. Site Map. The base path is "http://mahabodhi" for your local web server and "http://mahabodhi.org" is still used to acesss your remote web server. Few things to know to be a good xml writer Use '&' for '&' symbol; use '<' for '<'; use '>' for '>' Don't use '<' or '>' in your content; especially '<'; '<' is a special character to all xml and html file. It is a symbol to tell browser that a tag is starting. Don't leave unnecessary space or new line in your content. They might show when browser interprets your xml file. It is hard for me to explain this. So just leaving no extra space or new line is the best rule to follow. Indent your xml tag in a nice way; it helps you to spot the uneven tags; I set my indentation to 2 blank spaces; Be consistent with your punctuation. If content is Chinese please use Chinese punctuation. Unlike html, xml is a strict language. The tag HAS TO be closed! Two way to do this: <tag>....</tag> (tag with value) or <tag/> (tag without value). If you are using an xml editor, the editor should take care this for you. Don't use   in your content; the xml interpreter don't recognize ' '; Very sad! Place your file in the proper folder. This help others to find the file and understand the site quickly. Few extra things to know when editing a calendar Copy an old calendar file, place it to the proper folder (year), and then rename it to the proper name (month) Replace the old currMonth.xml under the calendar folder with the the new latest calendar. This is a duplicated copy. Since the latest calendar is referred by several pages, it is better to have one fix place and name for those pages to refer to. Update the previous month's calendar file so it can link to this newly created calendar. Few extra things to know when editing an event