|
Getting Started
Making Hyper Links
Working with Images
Pop Up Images
Working with Tables
Getting Started with Toko Editor
When you first open the Toko Editor it will require a username and password, these were provided in your welcome email.
After logging in, you are presented with the following type of screen;
When you highlight the pages that have editable areas in the lower left "Directory" section (Such as index.shtml which is your main page) you will see the following type of screen; This is the area that you can edit within that particular page of your site.
PLEASE NOTE: TO DROP TO A NEW LINE IN THIS EDITOR USE THE SHIFT+ENTER KEYS, ENTER KEY ALONE BEGINS A NEW PARAGRAPH AND LOOKS LIKE DOUBLE SPACED WAS USED.
After you have navigated to the areas as indicated above, please take a moment to hover your mouse over the various icons in the region titled "Area #1" (on your site, not this page) to see what each icon does.
You will find that you use a few more often then others such as the ones below;
 To Use Bold, Highlight the text you want to make Bold, click this icon.
 To Center Text, Highlight the text you want to make Center, click this icon. (Likewise to align text left or right, use the corresponding icons on either side of center.
 To change the Text Font, Highlight the text you want to make Change, click this icon, select the font.
 To insert an image, click this icon. (Click here for further instructions)
 To change the Text to Italics, Highlight the text you want to make Italics, click this icon.
 To Insert a hyperlink, Highlight the text you want to be the link, click this icon. (Click here for further instructions)
 To Change the size of the Text, Highlight the text you want to change, click this icon, select size.
 To Check spelling of the Text, , click this icon. (you may be asked to install ieSpell, it will install automatically if you select yes)
Make your changes in the white text area, format as you wish.
Preview the page to be sure it looks like you want.
Click save to publish the new info to your web page.
Making Hyper Links
A Hyperlink is the familiar text (or an image) underlined and commonly blue in color that can be clicked to take you to another page, area or web site.
At times you will want to link from your page to another site on the internet or to a page within you your site.
We recommend that if you are linking to a page outside of your web site, that you use the "Open in New Window" method as shown below so that the new page opens in a new window keeping your visitor at your site in the underlying window.
Here is how we insert a hyperlink using Toko Editor;
Select the text you want to be the Hyperlink.
Click the "Insert/Edit Link" icon.
A new window will open (If it does not, look at the top of your browser window for a yellow bar asking if popup's are ok, select always allow popup's for this site and re click the "Insert/Edit Link" icon).
Enter the URL (May be typed or copy and pasted) into the URL window as shown in the image below.
Selecting "OK" will turn the text into a Hyperlink that takes them from this page to the new page.
To see how to have the hyperlink open in a new window, see the next section below this image.
To have a hyperlink open in a new window. (useful to keep your site open when sending someone to a link/page at site other than yours OR to have a window open with an image for example.)
After filling in the URL information as in the sample above, click the "Target" tab.
The window changes to allow us to make changes to the default nature of how the hyperlink will function.
By clicking the "Target" drop down option, we select the "New Window (_blank)" option.
Click "OK" and we now have a hyperlink that will open into a new window.
Working and adding Images
Images can be easily added to your editable sections but please keep a few things in mind.
- Bigger is not always better for the web. 72DPI is the expected resolution for web images, that 8 mega pixel image will only slow the loading of your page down to a crawl and cause all the other formatting of the page to become displaced.
- The sizes that will work best for images in your editable area is 100 to 250 pixels wide. If you wish for the viewer to be able to see a larger image, add the text (Click Image to enlarge) and use the hyperlink tools as described above to open a full version of the image in a new window. You will need a small version for the web page itself and a large version to use for the hyperlink.
While jewelerssites does not provide software to edit your images your camera software most likely had a programs provided with it to edit the image sizes and such.
We also suggest Adobe Photo Shop and Adobe Photos Shop elements, Corel Paint Shop Pro.
A really great and FREE powertoy from Microsoft
for XP, Microsoft
Image Resizer Powertoy, is our chosen tool for rapid image
resizing and be downloaded here.
There is no documentation for this powertoy and it installs so
fast you may not know you have it, here is how it works.
Use windows explorer to browse to you image or directory of images. Highlight the images you wish to resize. Right click with the images highlighted. There is a new option in the context box after right clicking that is "Resize Pictures". Select that option and a window will open with the choices of a 640X480, 800X600, 1024X768, 240X320 or custom. Depending on the need for the image dictates the size we need, 100 or 150 px is a very common size for internet use. If you choose the custom size, you need only put the pixel size in the first box (it says 1200 now) and the program will keep the constraints of the proper dimensions.
After selecting "OK" The new image is is the same directory, normally at the bottom, with the original name and (custom) or something else to designate it as the new , smaller image. The original is untouched and the original size.
Now with all that said, Let's add an image.
To add and Image to the section you are editing, position the cursor to the area you want the image to display.
Click the "Image" icon and the window below will open. (If it does not, look at the top of your browser window for a yellow bar asking if popup's are ok, select always allow popup's for this site and re click the "Insert/Edit Link" icon).
At his point, we want to find and/or upload the image we wish to add to our page.
Select the "Browse Server" button
A new window opens similar to below;
Click on the folder "userimages" (yours may differ such as YourNameimages) in the Directory window on the left.
Click the "Upload" button in the File window on the right.
Yet another window opens like the one below;
Click the "Browse" button
This will open the familiar Windows Explorer window on your computer.
Browse to the directory that contains the image(s) you wish to upload.
Here is a tip, While in the windows explorer window, click the box indicated in the image below and select "Thumbnails"
You can then see the actual images you have to choose from!
Now, highlight the image you want and click the "Open" button.
This will open the window below in which we will click the "Upload" button to send the site to our server.
Now we are presented with the window that we started with as seen below.
Simply click on the name of the image we uploaded (or the image you wish to use).
This presents us with the window below which shows the image we have chosen surround by "Greek" text.
We recommend that you always fill in the "Alternative Text" field with your site name and a description of the image.
This facilitates in the vision impaired people that use special
programs to read the web site info to them to know what is there
but more importantly is used by many search engines to elevate
your placement in the search engine process and we all want
to be at the top of Goggle!
Now click the "OK" button and your image is now placed in your page.
Pop Up Images
You know how some sites have an image that you
can click on and it pops open a new window with a larger view?
Here is how you can do that.
After you have added the image as described above
we need to add larger image and a link to the popup image.
You can right click the image in Toko
Editor and select "Image Properties"
to bring up the window seen in the image below.
Browse to your larger image and select "OK",
you may need to upload the larger image as we did in the instructions
above.
(Note, the image name will be different as it is a Larger image
than the one used for the actual web page. suggested sizes
are 125 to 175 pixels for the smaller image and 350-500 pixels
for the larger image. A great way to resize your images is
wither in batches or individually with Photoshop or Photoshop
elements or using the free Microsoft Image resizing tool you
can down load at this link.
Now we want to right click the image again in Toko
Editor and this time we have a new option, "Edit Link".
After clicking the "Edit Link" option, a box pops
up like the image below.
Click the "Target" tab,Then the down arrow in the Target selection
box and select the <popup window> option.
Click the "OK" button, save your work and you are
done.
Working with Tables
You can use Tables in your editable area to help
with alignment or for design purposes.
To insert a table within your editable area, position
you cursor in the area you want the table.
Click the Table icon (see Image below)
Define how many Columns, Rows and width of border (0 for no
border) and desired width for your table. (you may use pixels
or %, 100% would make the table span the entire editable area)
Play with these setting until you can visualize what they do,
the changes will not post on your page unless you press save
button.
You have some controls of the table after it is
placed.
The Left facing triangle adds a column to the left, the right
facing pyramid adds a column on the right and the circle with
an x in between the pyramids deletes the table.
You can also edit and change the properties of
an individual cell of the table, for example add or change
the color.
To do this, place you cursor in the cell you want to edit, right
click and the fly out below will appear.
Select "Cell Properties"
By selecting the Select button next to Background
color you will be presented with a fly out offering a color
palette from which to chose you color.
Select the color you want, click OK to see you changes.
|
QUICK LINKS
