Hpage
Download as PPT, PDF•0 likes•297 views
H-PaGe is a PHP program for generating dynamic web pages on the fly from a specification file. It allows separating a website's design from its content so pages do not need to be created physically. Websites generated by H-PaGe have a standardized structure including pictures, menus, and contents specified in a configuration file called "web.config". This file defines elements like the color scheme, images, and menu items for the site.
Hpage
- 1. H-PaGe (Home Page Generator) Svetoslav Nikolov (http://svetoslavnikolov.wordpress.com)
- 2. Background (why) • The structure of the DTU web pages is quite complicated (http://www.oersted.dtu.dk) • The designer must replicate the menu for each web page. • The idea – keep them separate. The designer just writes the content.
- 3. What is H-PaGe • H-PaGe is a program for generating dynamic web pages. • Written in PHP. • Pages do not exist physically. • Created on the fly from a specification.
- 4. Structure of Ørsted’s Pages • Pictures: – Upper left and right – Middle left and right – Lower left. • Menus: – Top. – Left. – Bottom. • Contents
- 5. Structure Of a Web Site • Here ”web site” means a place to which we return when we click on a button ”home”. For example Ørsted’s site. • The personal web sites are located at: http://www.oersted.dtu.dk/personal/$USER
- 6. Directory Structure Each web site has one ROOT DIRECTORY and a number of sub-directories root_dir sub_dir_1 sub_dir_2 sub_dir_3 The ”root_dir” for the personal pages is on the web server under: /home/$USER/2www/
- 7. Create Web Page With H-PaGe 1. Obtain the distribution of H-PaGe. 2. Copy ”index.php” to the root directory, for example in ”/home/$user/2www/”. 3. Specify your web site in the file ”web.config”. Give color scheme, names of pictures, etc. ”web.config” is in the same directory as ”index.php” 4. Create the files with the contents for each of the web pages in your web site.
- 8. What Is ”web.config”? • ”web.config” is a file with commands to the server defining the looks and the structure of the web site. • ”web.config” is created with a text editor. For example Word Pad or NEdit. • The file looks like this: <? // This is a comment # This is also a comment /*This is also a comment*/ set_style(’green.css’); // This is a command. ?>
- 9. Define Color Scheme The color scheme is defined with a command set_style <? set_style(’name_of_style.css’); ?> Possible options are: • green.css, red.css, blue.css, lila.css, cyan.css, brown.css These files define not only the colors, but also the font names, sizes, etc.
- 10. Specify Images Images are added by the command add_image. <? //add_image(’position’,’file’,’descript’,’link’); add_image(’upperright’,’dtu_logo_ur_green.gif’, ’DTU’, ’http://www.dtu.dk’); add_image(’middleright’,’~/pictures/sn_name.png’, ’SN’); add_image(’menu_line’,’.pictures/line_blue.gif’); ?>
- 11. The Images upperleft upperright (600 x 20) middleleft middleright (151 x 72) (600 x 72) menu_line (130 x 3) or (130 x 1) lowerleft (151 x 72)
- 12. Create Menus H-PaGe was initially developed to create the menus automatically from the directory structure. /31000 --+-- /Slides +-- /Notes Home +-- /Exam Slides Notes Exam ../31000 contains: index.php, web.config
- 13. Expected Files In the root directory, say, 31000, it is expected to have ”index.php”, ”web.config”. In the rest ot the directories, ”index.php” expects to find a file with a name ”main.html”, or ”main.htm” or ”main.txt”. If you make sub-directories, they will appear as sub-menus. Only the menu on the left can be created like this.
- 14. Other Menus top left bottom
- 15. Specifying Menus In web.config Items in the mennu can be added to the web site from web.config using the command add_menu. <? //add_menu(’position’,’text’,’directory’,’file’) // Absolute web address add_menu(’top’, ’DTU’, ’http://www.dtu.dk’); // Specify only directory add_menu(’bottom’, ’Pictures’,’./pictures’); // Specify directory and file add_menu(’left’,’Links’, ’./’, ’links.html’); ?>
- 16. Other Commands show_updated(’true’); set_substitute(’true’ | ’false’); add_bottom_text(’Some text instead of menu’); set_title(’Some title for the page’); Some Browser – Title of page http://www.oersted.dtu.dk bottom_text Last updated: 1 Jan 1970
- 17. The Contents The contents are simple html files. Usually their name contents is ”main.html” if you work with directory structure. These files can be created with any editor – text or web editor. They can even be simple text files without any HTML formatting.
- 18. Things To Remember • All links are relative to the root directory, not to the current file with contents. • Do not use any formatting on the page like ”background color”, ”text color”, etc. The CSS files take care of it. • Make pages as simple as possible.
- 19. Let’s Do It !
- 20. Simple HTML • Header1 (title) <h1> Some text </h1> • Header2 (section) <h2> Section name</h2> • Header3 (sub-section) <h3>Sub-section name</h3>
- 21. Simple HTML • Link: <a href=”http://www.dtu.dk”> DTU </a> • Itemized list (with bullets): <ul> <li> Item text </li> <li> Item text </li> </ul>
- 22. Simple HTML • Enumerated list: <ol> <li> First item </li> <li> Second item </li> </ol> • New paragraph: <p> Some text