Graphic experiment: Difference between revisions

From rejetto wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 31: Line 31:
</div>
</div>
<div><font size=1 color="#000000" face="Verdana"><br></font></div>
<div><font size=1 color="#000000" face="Verdana"><br></font></div>
===Tables===
These are great for attaching text to images, but not yet understood. This provides basic information:
[[http://meta.wikimedia.org/wiki/Table]]
{|
| A || B
|-
| C || D
|}
But what PHnote wants is all the first column cells merged (and containg an image), with say 6 cells in the second row. See save Options
{|
|-
| cell codes go here
|- more cells in the same row here
| cells in the next row go here
|}
<html><head><title>x</title>
</head>
<body bgcolor="#ffffe8" leftmargin=5 topmargin=5 rightmargin=5 bottommargin=5>
<font size=2 color="#000000" face="Arial">
<div><font size=3 color="#ffffff" face="Verdana"><b>Using Tables</b></font></div>
<div><font color="#000000" face="Verdana"><b>Tables are indispensable</b></font><font color="#000000" face="Verdana"> tools when it comes to formatting text and objects in a structured way while maintaining flexibility. You can do wonderful things with tables, such as creating various forms, and even build good-looking websites without learning any HTML code.</font></div>
<div><font color="#000000" face="Verdana">TexNotes Pro offers some very advanced table editing options. </font></div>
<div><table width="100%" border=0 cellpadding=4 bordercolor="#000000" cellspacing=0>
<tr valign=top>
<td bgcolor="#ffcc00"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana"><b>Inserting Tables</b></font></div>
</font>
</td>
</tr>
</table>
</div>
<div><font color="#000000" face="Verdana">You can insert a table by using the </font><font color="#000000" face="Verdana"><b>Insert Table</b></font><font color="#000000" face="Verdana"> command on the </font><font color="#000000" face="Verdana"><b>Insert</b></font><font color="#000000" face="Verdana"> menu, or simply clicking the </font><font color="#000000" face="Verdana"><b>Insert Table</b></font><font color="#000000" face="Verdana">&nbsp; </font><img border=0 width=35 height=22 src="img1.jpg"><font color="#000000" face="Verdana"> button on the </font><font color="#000000" face="Verdana"><b>Insert</b></font><font color="#000000" face="Verdana"> toolbar.</font></div>
<div><font color="#000000" face="Verdana">By default, the </font><font color="#000000" face="Verdana"><b>Insert</b></font><font color="#000000" face="Verdana"> toolbar is situated at the bottom of this canvas area.</font></div>
<div><table width="100%" border=1 cellpadding=4 bordercolor="#000000" cellspacing=0>
<tr valign=top>
<td><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana"><br></font></div>
</font>
</td>
<td><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana"><br></font></div>
</font>
</td>
</tr>
<tr valign=top>
<td><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana"><br></font></div>
</font>
</td>
<td><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana"><br></font></div>
</font>
</td>
</tr>
</table>
</div>
<div><font color="#000000" face="Verdana">If you accept the default definitions in the </font><font color="#000000" face="Verdana"><b>Insert Table </b></font><font color="#000000" face="Verdana">dialog box, the table above is placed on the canvas. When inserting tables you can specify some of the table properties immediately, such as the number of columns and rows, and the layout. </font></div>
<div><font color="#000000" face="Verdana"><br></font></div>
<div><font color="#000000" face="Verdana">The default table layout is</font><font color="#000000" face="Verdana"><b> Size table to fit window</b></font><font color="#000000" face="Verdana">, which means the table resizes itself to fit the window as the canvas size is changed. If you choose </font><font color="#000000" face="Verdana"><b>Autosize</b></font><font color="#000000" face="Verdana">, the table automatically resizes when you change various cell or table properties. For example, if you change the right column of cells, the table adjusts itself to accommodate the new cell sizes. You can also choose to </font><font color="#000000" face="Verdana"><b>Size table manually</b></font><font color="#000000" face="Verdana">.</font></div>
<div><font color="#000000" face="Verdana">You can select tables in the same way as selecting lines or paragraphs of text. The table below can be created either by pasting the example shown above (twice), or by inserting a resizing table with eight rows and two columns.</font></div>
<div><table width="100%" border=1 cellpadding=4 bordercolor="#000000" cellspacing=0>
<tr valign=top>
<td colspan=3 bgcolor="#ccffcc"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">These two cells have been joined together and filled with color. To join two neighboring cell, select the cells and click </font><font color="#000000" face="Verdana"><b>Merge Cells</b></font><font color="#000000" face="Verdana"> on the table format toolbar.</font></div>
</font>
</td>
</tr>
<tr valign=top>
<td bgcolor="#c0c0c0"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana"><br></font></div>
</font>
</td>
<td colspan=2 bgcolor="#ffffff"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana"><br></font></div>
</font>
</td>
</tr>
<tr valign=top>
<td rowspan=2 bgcolor="#def5f8"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">You can merge cells horizontally as well as vertically.</font></div>
</font>
</td>
<td bgcolor="#ffffdd"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">Split cells any way you wish using </font><font color="#000000" face="Verdana"><b>Split Cells</b></font><font color="#000000" face="Verdana"> situated on the table format toolbar.</font></div>
</font>
</td>
<td bgcolor="#ece1f4"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">Use the </font><font color="#000000" face="Verdana"><b>Split</b></font><font color="#000000" face="Verdana"> dialog box to specify the number of split rows and columns.</font></div>
</font>
</td>
</tr>
<tr valign=top>
<td colspan=2 bgcolor="#ffe9d2"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana"><b>Split</b></font><font color="#000000" face="Verdana"> and </font><font color="#000000" face="Verdana"><b>Merge</b></font><font color="#000000" face="Verdana"> cells opens a whole new world of design, so you can produce the forms and layouts you want.</font></div>
</font>
</td>
</tr>
</table>
</div>
<div><font color="#000000" face="Verdana">To insert additional row of cells, place the cursor in the last cell and click </font><font color="#000000" face="Verdana"><b>Insert Row Below</b></font><font color="#000000" face="Verdana"> situated on the </font><font color="#000000" face="Verdana"><b>Table Format</b></font><font color="#000000" face="Verdana"> toolbar. To have cells inserted at the top, place the cursor in one of the cells at the very top of the table. </font></div>
<div><font color="#000000" face="Verdana">After you've inserted a table, you can also change the column widths by sliding the ruler markers. </font><img border=0 width=270 height=20 src="img2.jpg"></div>
<div><font color="#000000" face="Verdana">When you do this, you'll find it works much better if you avoid selecting (highlighting) cells or the complete table. Simply click inside the table or cell first, and then drag the slider.</font></div>
<div><table width="100%" border=0 cellpadding=4 bordercolor="#000000" cellspacing=0>
<tr valign=top>
<td bgcolor="#ffcc00"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana"><b>Tools Table panel and Table Format toolbar</b></font></div>
</font>
</td>
</tr>
</table>
</div>
<div><font color="#000000" face="Verdana">When working with tables, most users find it helpful to have the </font><font color="#000000" face="Verdana"><b>Tools Table</b></font><font color="#000000" face="Verdana"> panel and/or the </font><font color="#000000" face="Verdana"><b>Table Format</b></font><font color="#000000" face="Verdana"> toolbar visible.</font></div>
<div><table width="65%" border=0 cellpadding=4 bordercolor="#000000" cellspacing=0>
<tr valign=top>
<td width=208><font size=2 color="#000000" face="Arial">
<div align=center><font color="#000000" face="Verdana"><b>Tools Table</b></font><font color="#000000" face="Verdana"> panel</font></div>
</font>
</td>
<td width=200><font size=2 color="#000000" face="Arial">
<div align=center><font color="#000000" face="Verdana"><b>Table Format</b></font><font color="#000000" face="Verdana"> toolbar</font></div>
</font>
</td>
</tr>
<tr valign=top>
<td width=208><font size=2 color="#000000" face="Arial">
<div align=center><img border=0 width=201 height=469 src="img3.jpg"></div>
</font>
</td>
<td width=200><font size=2 color="#000000" face="Arial">
<div align=center><img border=0 width=27 height=402 src="img4.jpg"></div>
</font>
</td>
</tr>
</table>
</div>
<div><font color="#000000" face="Verdana">You can open the </font><font color="#000000" face="Verdana"><b>Tools Table </b></font><font color="#000000" face="Verdana">panel</font><font color="#000000" face="Verdana"><b> </b></font><font color="#000000" face="Verdana">from the Tools menu, or use the&nbsp; </font><img border=0 width=23 height=26 src="img5.jpg"><font color="#000000" face="Verdana"> button.</font></div>
<div><font color="#000000" face="Verdana">Note that the </font><font color="#000000" face="Verdana"><b>Table Format</b></font><font color="#000000" face="Verdana"> toolbar is only visible if you have selected to display </font><font color="#000000" face="Verdana"><b>Table Tools</b></font><font color="#000000" face="Verdana"> from </font><font color="#000000" face="Verdana"><b>Show Toolbars</b></font><font color="#000000" face="Verdana"> in the </font><font color="#000000" face="Verdana"><b>View </b></font><font color="#000000" face="Verdana">menu. It is only active (the buttons are not grayed-out) when the cursor is in a table cell.</font></div>
<div><font color="#000000" face="Verdana"><br></font></div>
<div><table width="100%" border=0 cellpadding=4 bordercolor="#000000" cellspacing=0>
<tr valign=top>
<td bgcolor="#ffcc00"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana"><b>Inserting Tables</b></font></div>
</font>
</td>
</tr>
</table>
</div>
<div><table width="100%" border=0 cellpadding=4 bordercolor="#000000" cellspacing=4 bgcolor="#2d6f93">
<tr valign=top>
<td bgcolor="#00ccff"><br>
</td>
<td bgcolor="#ffffff"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">Play with the table border width, spacing, and color fill to achieve different looks.</font></div>
</font>
</td>
<td bgcolor="#ffff99"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">Play with the cell's border-width, spacing, coloring and padding for more looks.</font></div>
</font>
</td>
</tr>
<tr valign=top>
<td bgcolor="#99ccff"><br>
</td>
<td bgcolor="#c0c0c0"><br>
</td>
<td bgcolor="#ff99cc"><br>
</td>
</tr>
<tr valign=top>
<td bgcolor="#ccffcc"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">Delete individual borders by using the table's properties tools.</font></div>
</font>
</td>
<td bgcolor="#ffffff"><br>
</td>
<td bgcolor="#ffffff"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">Change individual cells border color. To change multiple cell border colors, select them.</font></div>
</font>
</td>
</tr>
<tr valign=top>
<td bgcolor="#cc99ff"><br>
</td>
<td bgcolor="#ffffff"><br>
</td>
<td bgcolor="#ffffff"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana"><br></font></div>
<div><font color="#000000" face="Verdana"><br></font></div>
</font>
</td>
</tr>
</table>
</div>
<div><font color="#000000" face="Verdana"><br></font></div>
<div><table width="100%" border=0 cellpadding=4 bordercolor="#000000" cellspacing=0>
<tr valign=top>
<td bgcolor="#ffcc00"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana"><b>Example</b></font></div>
</font>
</td>
</tr>
</table>
</div>
<div><font color="#000000" face="Verdana">This example shows how to place text and images on a page in a way that would not be possible with the standard text formatting options. Start by inserting a new table with two columns and one row.</font></div>
<div><font size=4 color="#ffffff" face="Verdana"><b>MY GRAND TITLE</b></font></div>
<div><table width="100%" border=0 cellpadding=4 bordercolor="#000000" cellspacing=2>
<tr valign=top>
<td width=137 bgcolor="#e6e6e6"><font size=2 color="#000000" face="Arial">
<div align=center><img border=0 width=128 height=128 src="img6.jpg"><br>
<font color="#000000" face="Verdana">John Lennon</font></div>
</font>
</td>
<td bgcolor="#f8f8f8"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana"><b>First</b></font></div>
<div><font color="#000000" face="Verdana">After inserting this table, some of the table and cell borders are deleted to better merge with the page. </font></div>
<div><font color="#000000" face="Verdana"><br></font></div>
<div><font color="#000000" face="Verdana">Cell background color fill is used to emphasize certain areas.</font></div>
<div><font color="#000000" face="Verdana"><br></font></div>
<div><font color="#000000" face="Verdana">Vertical and horizontal cell spacing is set to 2 pixels, with 4 pixels cell padding.</font></div>
</font>
</td>
</tr>
</table>
</div>
<hr noshade size=5 color="#b48dbc" >
<div><table width="100%" border=0 cellpadding=4 bordercolor="#000000" cellspacing=1>
<tr valign=top>
<td width=137 bgcolor="#fff9ff"><font size=2 color="#000000" face="Arial">
<div><table width="100%" border=0 cellpadding=4 bordercolor="#000000" cellspacing=2>
<tr valign=top>
<td bgcolor="#fff0ff"><font size=2 color="#000000" face="Arial">
<div align=right><font color="#000000" face="Verdana">History</font></div>
</font>
</td>
</tr>
<tr valign=top>
<td bgcolor="#fff0ff"><font size=2 color="#000000" face="Arial">
<div align=right><font color="#000000" face="Verdana">His Work</font></div>
</font>
</td>
</tr>
<tr valign=top>
<td bgcolor="#fff0ff"><font size=2 color="#000000" face="Arial">
<div align=right><font color="#000000" face="Verdana">Fan Club</font></div>
</font>
</td>
</tr>
</table>
</div>
<div><font color="#000000" face="Verdana"><br></font></div>
<div align=right><img border=0 width=127 height=138 src="img7.png"></div>
<div><font color="#800000" face="Verdana">Images are positioned using </font><font color="#800000" face="Verdana"><b>Insert Picture</b></font><font color="#800000" face="Verdana"> on the </font><font color="#800000" face="Verdana"><b>Insert</b></font><font color="#800000" face="Verdana"> toolbar. It's normally found at the bottom of the canvas area.</font></div>
<div align=right><font color="#800000" face="Verdana">Experiment </font></div>
<div align=right><font color="#800000" face="Verdana">with </font></div>
<div align=right><font color="#800000" face="Verdana"><b>Advanced Properties</b></font><font color="#800000" face="Verdana">.</font></div>
</font>
</td>
<td bgcolor="#ffffff"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">This could be the start of a quickly produced,simple, web page. </font></div>
<div><font color="#000000" face="Verdana"><br></font></div>
<div><font color="#000000" face="Verdana">All that remains is to add other pages and link them together.</font></div>
<div><font color="#000000" face="Verdana"><br></font></div>
<div><font color="#000000" face="Verdana">The paragraph background color option is used for the text </font><font color="#000000" face="Verdana"><i>MY GRAND TITLE</i></font><font color="#000000" face="Verdana">, and the horizontal divider line.</font></div>
<div><font color="#000000" face="Verdana"><br></font></div>
<div><font color="#000000" face="Verdana">Place the cursor on the title and click the </font><font color="#000000" face="Verdana"><b>Change Paragraph Indents, Tabs, Borders and Background button on</b></font><font color="#000000" face="Verdana"> the paragraph format toolbar. </font></div>
<div><font color="#000000" face="Verdana"><br></font></div>
<div><font color="#000000" face="Verdana">Then click the </font><font color="#000000" face="Verdana"><b>Background</b></font><font color="#000000" face="Verdana"> tab and selected purple. </font><br>
<font color="#000000" face="Verdana">Set background padding to 4 pixels for all sides so that the </font><font color="#000000" face="Verdana"><i>My Grand Title</i></font><font color="#000000" face="Verdana"> text has a small edge margin.</font></div>
<div><font color="#000000" face="Verdana"> </font></div>
<div><font color="#000000" face="Verdana">See </font><a href="Tables.html"><font color="#0000ff" face="Verdana"><u>Change Paragraph Indents, Tabs, Borders and Background</u></font></a><font color="#000000" face="Verdana"> for more information.</font></div>
<div><font color="#000000" face="Verdana"><br></font></div>
<div><font color="#000000" face="Verdana">The alternative is to insert a table with one column and one row, without any table cell borders, or with the table and cell borders set to the same color. </font></div>
<div><font color="#000000" face="Verdana">Then insert a thick horizontal line break and change its color to purple. To change the horizontal line break color, place the cursor on the horizontal line break, right click, and then choose from the </font><font color="#000000" face="Verdana"><b>Properties</b></font><font color="#000000" face="Verdana"> menu. </font></div>
<div><font color="#000000" face="Verdana"><br></font></div>
<div><font color="#000000" face="Verdana">The main body area is built by inserting a table with 1 row and 2 columns. </font><br>
<font color="#000000" face="Verdana">In the left column, another table is inserted with a 3 row and 1 column layout. </font><br>
<font color="#000000" face="Verdana">Use </font><font color="#000000" face="Verdana"><b>Table Properties</b></font><font color="#000000" face="Verdana"> to adjust the table and cell borders, fill colors, cell spacing, padding and background fills.</font></div>
</font>
</td>
</tr>
</table>
</div>
<div><table width="100%" border=0 cellpadding=4 bordercolor="#000000" cellspacing=0>
<tr valign=top>
<td bgcolor="#ffffff"><font size=2 color="#000000" face="Arial">
<div><font size=1 color="#000000" face="Verdana">You could insert a footnote or copyright notice here.</font></div>
</font>
</td>
</tr>
</table>
</div>
<div><table width="100%" border=0 cellpadding=4 bordercolor="#000000" cellspacing=0>
<tr valign=top>
<td bgcolor="#ffcc00"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana"><b>More Examples</b></font></div>
</font>
</td>
</tr>
</table>
</div>
<div><font color="#000000" face="Verdana"><b>You can do so much more with tables in TexNotes Pro: </b></font></div>
<div><table width="100%" border=1 cellpadding=4 bordercolor="#000000" cellspacing=0>
<tr valign=top>
<td colspan=3 bgcolor="#333399"><font size=2 color="#000000" face="Arial">
<div><font color="#ffffff" face="Verdana"><b>TABLE</b></font></div>
</font>
</td>
</tr>
<tr valign=top>
<td bgcolor="#969696"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">Column 1</font></div>
</font>
</td>
<td bgcolor="#969696"><font size=2 color="#000000" face="Arial">
<div align=center><font color="#ffff00" face="Verdana"><b>Column 2</b></font></div>
</font>
</td>
<td bgcolor="#969696"><font size=2 color="#000000" face="Arial">
<div><font color="#0000ff" face="Verdana"><b>Column 3</b></font></div>
</font>
</td>
</tr>
<tr valign=top>
<td bgcolor="#969696"><br>
</td>
<td bgcolor="#969696"><br>
</td>
<td bgcolor="#969696"><br>
</td>
</tr>
<tr valign=top>
<td bgcolor="#969696"><br>
</td>
<td bgcolor="#969696"><br>
</td>
<td bgcolor="#969696"><br>
</td>
</tr>
<tr valign=top>
<td bgcolor="#969696"><br>
</td>
<td bgcolor="#969696"><br>
</td>
<td bgcolor="#969696"><br>
</td>
</tr>
</table>
</div>
<div><font color="#ffff00" face="Verdana"><b><br></b></font></div>
<div><table width="100%" border=0 cellpadding=4 bordercolor="#000000" cellspacing=1>
<tr valign=top>
<td colspan=4 bgcolor="#417ba7"><font size=2 color="#000000" face="Arial">
<div><font color="#ffffff" face="Verdana"><b>TABLE</b></font></div>
</font>
</td>
</tr>
<tr valign=top>
<td width=92 bgcolor="#5b95bf"><font size=2 color="#000000" face="Arial">
<div><font color="#ffffff" face="Verdana">Column 1</font></div>
</font>
</td>
<td width=165 bgcolor="#5b95bf"><font size=2 color="#000000" face="Arial">
<div><font color="#ffffff" face="Verdana">Column 2</font></div>
</font>
</td>
<td width=67 bgcolor="#5b95bf"><font size=2 color="#000000" face="Arial">
<div><font color="#ffffff" face="Verdana">Column 3</font></div>
</font>
</td>
<td width=149 bgcolor="#5b95bf"><font size=2 color="#000000" face="Arial">
<div><font color="#ffffff" face="Verdana">Column 4</font></div>
</font>
</td>
</tr>
<tr valign=top>
<td width=92 bgcolor="#ffcccc"><br>
</td>
<td width=165 background="img8.jpg"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">Apply background image to a cell.</font></div>
</font>
</td>
<td width=67 bgcolor="#effcc7"><br>
</td>
<td width=149 bgcolor="#d5df97"><br>
</td>
</tr>
<tr valign=top>
<td width=92 valign=top bgcolor="#f0e1ff"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">;Align to Top</font></div>
</font>
</td>
<td width=165 valign=middle bgcolor="#daf8a3"><font size=2 color="#000000" face="Arial">
<div align=center><font color="#000000" face="Verdana">Align to Middle</font></div>
</font>
</td>
<td width=67 valign=bottom bgcolor="#c5fafe"><font size=2 color="#000000" face="Arial">
<div align=right><font color="#000000" face="Verdana">Bottom</font></div>
</font>
</td>
<td width=149 bgcolor="#ffcc99"><font size=2 color="#000000" face="Arial">
<div><img border=0 width=32 height=32 src="img9.png"><font color="#000000" face="Verdana"> Insert image. You can't insert an icon file in a cell.</font></div>
</font>
</td>
</tr>
<tr valign=top>
<td width=92 bgcolor="#d0f5f9"><br>
</td>
<td width=165 bgcolor="#ccffff" background="img10.png"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">Apply background color as well as an image. Image is semi-transparent to show the color in the background.</font></div>
</font>
</td>
<td width=67 bgcolor="#ffe1f0"><br>
</td>
<td width=149><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">Transparent cells allow the background to show through.</font></div>
</font>
</td>
</tr>
</table>
</div>
<div><font color="#000000" face="Verdana"><b><br></b></font></div>
<div><font color="#000000" face="Verdana">Insert an image in a cell, and fill cell with an image-based background, are two different operations and produce two different results.</font></div>
<div><font color="#000000" face="Verdana">To fill the above cell with color and a semi-transparent image, first fill the cell with a color. Then open the </font><font color="#000000" face="Verdana"><b>Table and Cell Properties</b></font><font color="#000000" face="Verdana"> dialog box and select the </font><font color="#000000" face="Verdana"><b>Cells</b></font><font color="#000000" face="Verdana"> tab:</font></div>
<div><img border=0 width=430 height=228 src="img11.jpg"></div>
<div><font color="#000000" face="Verdana">You can then click the </font><font color="#000000" face="Verdana"><b>Picture</b></font><font color="#000000" face="Verdana"> button and use </font><font color="#000000" face="Verdana"><b>Open</b></font><font color="#000000" face="Verdana"> in the next dialog to select a suitable image.</font></div>
<div><font color="#000000" face="Verdana">The above dialog box is also displayed if you click </font><font color="#000000" face="Verdana"><b>Advanced Properties</b></font><font color="#000000" face="Verdana"> in the </font><font color="#000000" face="Verdana"><b>Tools Table</b></font><font color="#000000" face="Verdana"> panel.</font></div>
<div><table width="100%" border=0 cellpadding=4 bordercolor="#000000" cellspacing=0>
<tr valign=top>
<td bgcolor="#ffcc00"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana"><b>Form Example</b></font></div>
</font>
</td>
</tr>
</table>
</div>
<div><font size=3 color="#ffffff" face="Verdana"><b>GENERAL WEB-SITE RECORDS FORM</b></font></div>
<div><table width="100%" border=0 cellpadding=4 bordercolor="#000000" cellspacing=0 bgcolor="#276fa3">
<tr valign=top>
<td width=87 bgcolor="#ecf4ff"><font size=2 color="#000000" face="Arial">
<div align=right><font color="#000000" face="Verdana">Directory:</font></div>
</font>
</td>
<td width=208 bgcolor="#ffffff"><br>
</td>
<td width=49 bgcolor="#ecf4ff"><font size=2 color="#000000" face="Arial">
<div align=right><font color="#000000" face="Verdana">Date:</font></div>
</font>
</td>
<td width=133 bgcolor="#ffffff"><br>
</td>
</tr>
</table>
</div>
<div><table width="100%" border=0 cellpadding=4 bordercolor="#000000" cellspacing=1 bgcolor="#2d6f93">
<tr valign=top>
<td bgcolor="#e9e9f3"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">Page Description</font></div>
</font>
</td>
<td bgcolor="#e9e9f3"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">URL</font></div>
</font>
</td>
<td bgcolor="#e9e9f3"><font size=2 color="#000000" face="Arial">
<div><font color="#000000" face="Verdana">URL</font></div>
</font>
</td>
</tr>
<tr valign=top>
<td bgcolor="#ffffff"><br>
</td>
<td bgcolor="#ffffff"><br>
</td>
<td bgcolor="#ffffff"><br>
</td>
</tr>
<tr valign=top>
<td bgcolor="#ffffff"><br>
</td>
<td bgcolor="#ffffff"><br>
</td>
<td bgcolor="#ffffff"><br>
</td>
</tr>
<tr valign=top>
<td bgcolor="#ffffff"><br>
</td>
<td bgcolor="#ffffff"><br>
</td>
<td bgcolor="#ffffff"><br>
</td>
</tr>
<tr valign=top>
<td bgcolor="#ffffff"><br>
</td>
<td bgcolor="#ffffff"><br>
</td>
<td bgcolor="#ffffff"><br>
</td>
</tr>
<tr valign=top>
<td bgcolor="#ffffff"><br>
</td>
<td bgcolor="#ffffff"><br>
</td>
<td bgcolor="#ffffff"><br>
</td>
</tr>
<tr valign=top>
<td bgcolor="#ffffff"><br>
</td>
<td bgcolor="#ffffff"><br>
</td>
<td bgcolor="#ffffff"><br>
</td>
</tr>
<tr valign=top>
<td bgcolor="#ffffff"><br>
</td>
<td bgcolor="#ffffff"><br>
</td>
<td bgcolor="#ffffff"><br>
</td>
</tr>
</table>
</div>

Revision as of 07:26, 24 October 2006

This is what ph is trying to achieve:

Error creating thumbnail: Unable to save thumbnail to destination




<img border=0 width=153 height=250">

to file
All options are written to a file. (This file is named HFS.ini).
to registry (current user)
All options are written to the current user's registry. (This should work on all versions of Windows.)
to registry (all users)
All options are written to the current user's registry. (This is essentially an XP feature.)
Clear options and quit
The current options are discarded, no options are saved, and HFS shuts down. The next time HFS starts, it uses the default options, or the current settings in HFS.ini.
Auto-save options on exit
Normally, you should make sure that this is checked. It means your saver will look exactly the same when you re-start it.
Auto-save every:
Set this if you wish to ensure that your settings are saved within a specific time interval. The method used depends on whether you have selected "registry" or "file" above.


Tables

These are great for attaching text to images, but not yet understood. This provides basic information: [[1]]

A B
C D

But what PHnote wants is all the first column cells merged (and containg an image), with say 6 cells in the second row. See save Options

cell codes go here
cells in the next row go here

<html><head><title>x</title> </head> <body bgcolor="#ffffe8" leftmargin=5 topmargin=5 rightmargin=5 bottommargin=5>

Using Tables
Tables are indispensable tools when it comes to formatting text and objects in a structured way while maintaining flexibility. You can do wonderful things with tables, such as creating various forms, and even build good-looking websites without learning any HTML code.
TexNotes Pro offers some very advanced table editing options.
Inserting Tables

You can insert a table by using the Insert Table command on the Insert menu, or simply clicking the Insert Table  <img border=0 width=35 height=22 src="img1.jpg"> button on the Insert toolbar.
By default, the Insert toolbar is situated at the bottom of this canvas area.




If you accept the default definitions in the Insert Table dialog box, the table above is placed on the canvas. When inserting tables you can specify some of the table properties immediately, such as the number of columns and rows, and the layout.

The default table layout is Size table to fit window, which means the table resizes itself to fit the window as the canvas size is changed. If you choose Autosize, the table automatically resizes when you change various cell or table properties. For example, if you change the right column of cells, the table adjusts itself to accommodate the new cell sizes. You can also choose to Size table manually.
You can select tables in the same way as selecting lines or paragraphs of text. The table below can be created either by pasting the example shown above (twice), or by inserting a resizing table with eight rows and two columns.
These two cells have been joined together and filled with color. To join two neighboring cell, select the cells and click Merge Cells on the table format toolbar.



You can merge cells horizontally as well as vertically.

Split cells any way you wish using Split Cells situated on the table format toolbar.

Use the Split dialog box to specify the number of split rows and columns.

Split and Merge cells opens a whole new world of design, so you can produce the forms and layouts you want.

To insert additional row of cells, place the cursor in the last cell and click Insert Row Below situated on the Table Format toolbar. To have cells inserted at the top, place the cursor in one of the cells at the very top of the table.
After you've inserted a table, you can also change the column widths by sliding the ruler markers. <img border=0 width=270 height=20 src="img2.jpg">
When you do this, you'll find it works much better if you avoid selecting (highlighting) cells or the complete table. Simply click inside the table or cell first, and then drag the slider.
Tools Table panel and Table Format toolbar

When working with tables, most users find it helpful to have the Tools Table panel and/or the Table Format toolbar visible.
Tools Table panel

Table Format toolbar

<img border=0 width=201 height=469 src="img3.jpg">

<img border=0 width=27 height=402 src="img4.jpg">

You can open the Tools Table panel from the Tools menu, or use the  <img border=0 width=23 height=26 src="img5.jpg"> button.
Note that the Table Format toolbar is only visible if you have selected to display Table Tools from Show Toolbars in the View menu. It is only active (the buttons are not grayed-out) when the cursor is in a table cell.

Inserting Tables


Play with the table border width, spacing, and color fill to achieve different looks.

Play with the cell's border-width, spacing, coloring and padding for more looks.




Delete individual borders by using the table's properties tools.


Change individual cells border color. To change multiple cell border colors, select them.






Example

This example shows how to place text and images on a page in a way that would not be possible with the standard text formatting options. Start by inserting a new table with two columns and one row.
MY GRAND TITLE
<img border=0 width=128 height=128 src="img6.jpg">
John Lennon

First
After inserting this table, some of the table and cell borders are deleted to better merge with the page.

Cell background color fill is used to emphasize certain areas.

Vertical and horizontal cell spacing is set to 2 pixels, with 4 pixels cell padding.


History

His Work

Fan Club


<img border=0 width=127 height=138 src="img7.png">
Images are positioned using Insert Picture on the Insert toolbar. It's normally found at the bottom of the canvas area.
Experiment
with
Advanced Properties.

This could be the start of a quickly produced,simple, web page.

All that remains is to add other pages and link them together.

The paragraph background color option is used for the text MY GRAND TITLE, and the horizontal divider line.

Place the cursor on the title and click the Change Paragraph Indents, Tabs, Borders and Background button on the paragraph format toolbar.

Then click the Background tab and selected purple.
Set background padding to 4 pixels for all sides so that the My Grand Title text has a small edge margin.
See <a href="Tables.html">Change Paragraph Indents, Tabs, Borders and Background</a> for more information.

The alternative is to insert a table with one column and one row, without any table cell borders, or with the table and cell borders set to the same color.
Then insert a thick horizontal line break and change its color to purple. To change the horizontal line break color, place the cursor on the horizontal line break, right click, and then choose from the Properties menu.

The main body area is built by inserting a table with 1 row and 2 columns.

In the left column, another table is inserted with a 3 row and 1 column layout.

Use Table Properties to adjust the table and cell borders, fill colors, cell spacing, padding and background fills.

You could insert a footnote or copyright notice here.

More Examples

You can do so much more with tables in TexNotes Pro:
TABLE

Column 1

Column 2

Column 3











TABLE

Column 1

Column 2

Column 3

Column 4


Apply background image to a cell.



;Align to Top

Align to Middle

Bottom

<img border=0 width=32 height=32 src="img9.png"> Insert image. You can't insert an icon file in a cell.


Apply background color as well as an image. Image is semi-transparent to show the color in the background.


Transparent cells allow the background to show through.


Insert an image in a cell, and fill cell with an image-based background, are two different operations and produce two different results.
To fill the above cell with color and a semi-transparent image, first fill the cell with a color. Then open the Table and Cell Properties dialog box and select the Cells tab:
<img border=0 width=430 height=228 src="img11.jpg">
You can then click the Picture button and use Open in the next dialog to select a suitable image.
The above dialog box is also displayed if you click Advanced Properties in the Tools Table panel.
Form Example

GENERAL WEB-SITE RECORDS FORM
Directory:


Date:


Page Description

URL

URL