Outline of this page
| Contents |
|---|
| Create favicon.ico |
| Test page for layout |
| Formatting of HTML files |
| Color setting |
| Jump menu in page |
Create favicon.ico
Webmaster created favicon of WANtaroHP with the image of my dogs 'Luke' and 'Mick.' Background color of brown and white of character color are image of 'Luke' and character 'M' means 'Mick.'
Favicon was created using following commands of ImageMagick.
convert -trim -background none -fill white -font c:\Windows\Fonts\timesbd.ttf -pointsize 14 label:M test0.png convert -size 16x16 canvas:brown test1.png composite -gravity center test0.png test1.png test2.png convert test2.png -colors 256 favicon.ico
- In file 'test0.png', white character 'M' is saved as a transparent image by '-background none.'
- In file 'test1.png', background image with brown color is saved.
- By superimposing 'test0.png' and 'test1.png', 'test2.png' is created.
- Finally, setting the color mode to 256-mode, result file 'favicon.ico' can be obtained.
And following sentence is inserted in each page's header, favicon can be shown.
<link rel="shortcut icon" href="favicon.ico">
Test page for layout
If you press below button, you can see the test page shown the layout of WANtaroHP.
In test page shown below link, left part for menu (navi area) is colored yellow, and right part for main contents (main area) is colored aqua for good understanding.
'CSS file' is shown in below link.
| Filename | Description |
|---|---|
| cstest.txt | css for test page |
Formatting of HTML files
Actual pages are created by following method.
- First, create 'original HTML files' which are not decorated as shown below.
- Next, make 'formatted HTML files' using formatting program by Fortran.
<html>
<body>
..... .....
(contents)
..... .....
</body>
</html>
Formatting program by Fortran and input data files are shown in below links. These are for English pages.
| Filename | Description |
|---|---|
| f90_HP5set.txt | f90 program for formatting (actual extension is '.f90') |
| inp_flist.txt | input file for page title |
| inp_foot.txt | input file for information of footer |
| inp_head.txt | input file for information of header |
| inp_link.txt | input file for information of jump in page |
| inp_menu.txt | input file for information of menu (navi part) |
| inp_com.txt | input file for information of comment (navi part) |
'Comment' is included in only '(e)index.html.'
Color setting
Color setting of webpage is carried out using following Fortran program.
Output of this program (f90_css_color.f90) is CSS files (csmainE.css, csmainJ.css) for English and Japanese.
| Filename | Description |
|---|---|
| f90_css_color.txt | f90 program for color setting (actual extension is '.f90') |
| inp_css_col.txt | input file for color setting |
| inp_css_src.txt | input file of model CSS |
| csmainE.txt | css for English pages with aqua color (actual extension is '.css') |
| csmainJ.txt | css for Japanese pages with gray color (actual extension is '.css') |
- Output of this program is CSS files (csmainE.css, csmainJ.css) for English and Japanese. They are shown above section.
- Deferences between English CSS file and Japanese CSS file are used font and color arrangement.
- Regarding font-family, tahoma is used for English pages and meiryo is used for Japanese pages.
- Regarding colors, kinds of aqua are used for English pages and kinds of gray are used for Japanese pages.
Jump menu in page
Jump menu in page consists of following items.
| En : mainpage | Jumps to English mainpage |
| Ja : mainpage | Jumps to Japanese mainpage |
| Top | Jumps to top (header) of the page |
| Bottom | Jumps to bottom (footer) of the page |
Jump menu in page is created using following method.
- Creates the png image including transparent characters
- Arranges png images in a horizontal line using the tag of <li>. Arrangement of images is done using 'css.'
- When mouse hovers on image, background-color is changed from gray to black. As a result, the color of characters are changed from gray to black.
- In case of making a small image including characters like this case, the characters on png image are clearer than they on gif image in my sense.
Images including transparent characters are created using following procedure.
- Draw the black characters on the white background using -monochrome.
- Change the character color from black to transparent using -transparent.
- Change the background color from white to lightyellow using -opaque.
Commands for ImageMagick to create png images are shown below.
set font=c:\Windows\Fonts\arialbd.ttf set col=lightyellow convert -monochrome -size 95x16 -background white -fill black ^ -font %font% -pointsize 12 -gravity center -raise 3 label:"En : main page" png_test01.png convert -fuzz 50% -transparent black png_test01.png png_inp.png convert -fill %col% -opaque white png_inp.png png_inlinkGOE.png convert -monochrome -size 95x16 -background white -fill black ^ -font %font% -pointsize 12 -gravity center -raise 3 label:"Ja : main page" png_test01.png convert -fuzz 50% -transparent black png_test01.png png_inp.png convert -fill %col% -opaque white png_inp.png png_inlinkGOJ.png convert -monochrome -size 55x16 -background white -fill black ^ -font %font% -pointsize 12 -gravity center -raise 3 label:"Top" png_test01.png convert -fuzz 50% -transparent black png_test01.png png_inp.png convert -fill %col% -opaque white png_inp.png png_inlinkT.png convert -monochrome -size 55x16 -background white -fill black ^ -font %font% -pointsize 12 -gravity center -raise 3 label:"Bottom" png_test01.png convert -fuzz 50% -transparent black png_test01.png png_inp.png convert -fill %col% -opaque white png_inp.png png_inlinkB.png