| Author |
Message |
   
Admin
| | Posted on Saturday, April 05, 2003 - 11:25 am: |   |
Setting Up Emage If you haven't downloaded emage and installed it yet then please do so here. http://www.v-methods.com/emh/index.html If you haven't downloaded WSFTP_LE and installed it yet then please do so here. ftp://ftp.ftpplanet.com/WS_FTP/ws_ftple.exe Open your emage program and you will see the screen below. Now in your toolbar at the top right you will see a yellow folder icon that I circled in red below.
Click on the folder icon and this is where you can set the directory to where your emage files(photo album) will be placed after you created your album. The only line you need to change from the default value is the top line if you would like your album's folders and files to be place somewhere else. I have mine going to my c drive at C:/Documents and Settings. I did not change any of the other boxes below. Your's should read the same for simplifying this tutorial.
Admin |
   
Admin
| | Posted on Saturday, April 05, 2003 - 12:06 pm: |   |
Making an Album Click on the add files icon that I have circled below. Now choose which files (images) you would like to add to your photo album. These files may come from any folder or any drive on your computer. The files may come from different folders. You may choose any quantity of files you wish.
Now that you have chosen your files your screen should look like this.
Here is where you may choose the style of your photo album. I have shadows.htm selected but if you would like to select a different style then click on the select template icon I have circled below.
Now you are ready for the software to generate your album. Click on RUN at the top then click on GO
Your album has now been created and organized for you to upload to your website. Don't expect to see your album appear after you created it with emage. Remember your album has only been created on your computer and not on your webspace. Remember where your album was created. This is very important. Your folders and files that emage created for you reside in the directory you specified at the beginning of this tutorial. If for some reason you can not find these files you can do a search for index00.htm on your hard drive. Here are the names and explanations of the folders and files emage has created. If any or part of these folders and files are missing then your album will be incomplete. Folder name: images This is where emage copied all your full size images you selected and made copies of them and then placed them in this folder. Folder name: thumbs This is where emage create thumbnail size photos of your full images and placed them here in this folder Index00.htm This is the template(album cover) that you selected linking your photos and thumbnails together. The possibilities are endless when it come to customizing your album. You should practice making several albums with different templates before trying to customize your albums. Later in this tutorial I will explain some ways to customize your albums.
Admin |
   
Admin
| | Posted on Sunday, April 06, 2003 - 06:58 am: |   |
Customizing Your Template The template is the style sheet(album cover) that you chose at the beginning. Any template can be cutomized before you make an album and saved to the folder on your hard drive that contains the templates for emage. Custom templates can be created and posted right here for others to use or customize further. When editing templates this must be done with a text editor such as notepad. If you try to use MS Word then you will corrupt your template because of the formatting properties word embeds into the template. Let us now choose a template to edit BEFORE we make an album. First choose your template you wold like to edit by clicking on the template selection icon I have circled below. Choose classic1.htm
Now click on the icon to the right that brings up this template automatically in note pad.
On your screen you will now have the classic1.htm template in notepad. It should look like this.
Admin |
   
Admin
| | Posted on Sunday, April 06, 2003 - 07:15 am: |   |
Before we start are editing of our template let's review a few html meanings that we will see. <!-----anything inbetween these simples will not be seen-this is usally done to insert copyrights or notes----> <img src="url of photo"> this indicates the placement of a image in the template. <a href="url of link"> this indicates the linking properties of a image or text. Like clicking on a thumbnail to link to a full image photo. Or click on a text link to go to a website. <hr> this indicates the placement of a solid line. You can specify its properties after it as shown in the template. <table> this indicates the placement or arrangement of how things look. These will change the appearance of the template so they are best left alone. <body text="#000080" bgcolor="#C0C0F0" link="#3000C0" vlink="#000080"> the first property text will change the color of the text, the second bgcolor will change the background color, the third link will change the color of the text for hyperlinks, the vlink is for visited links. These are the numerical values of colors to show exact colors. You made also change them to this for more generic colors. <body text="black" bgcolor="white" link="blue" vlink="green"> or what ever colors you choose. <b> means bold lettering and this turns it off </b> <center> this centers something and this turns it off</center> Notice you must use the turn off symbol / at the end of where you want the formatting to stop. If you don't turn it off then it will apply to the whole template.
Admin |
   
Admin
| | Posted on Sunday, April 06, 2003 - 07:54 am: |   |
Below is the classic1.htm template. I will insert my notes in red. Since every symbol means something be careful what you omit. The original template I have posted in black. <html> \red below is the software copyright. THis will not show in your album.} <!-- E-Mage for Web template. (C)2002 V-Methods Software --> <head> This is where you can change the default value that is displayed on your browsers tab <title>Gallery %PageIndex%</title> <style type="text/css"> these are comments regarding fonts and size. Note the are inside of the <!---> tags. They will not show. To make these properties apply we would have to remove the <!--- before and the ---> after it. <!-- body { font-size: 90%; font-family: Verdana, Arial, Helvetica; } td { font-size: 60%; font-family: Verdana, Arial, Helvetica; } a { text-decoration: none } --></style> </head> This defines the colors of the template <body text="#000080" bgcolor="#C0C0F0" link="#3000C0" vlink="#000080" alink="#8080E0"> This centers everything under the <center> tag. <center> This is our album heading. This is where the simple shadows was inserted in the shadow template. You can call your album anything you wish just type in your name inbetween <h1> and </h1> To change the font size of your heading you could use <h2> OR <H3> OR so forth. <h1>Gallery %PageIndex%</h1> This is defining the properties of the thumbnail tables (the table your thumbnail photos will be inserted into) <!-- Thumbnail table --> <table border=1 cellpadding=0 cellspacing=5 bordercolor="#8080C0"> <!--EM LOOP Count=3--> <tr> <!--EM LOOP Count=4--> <td align=center> <table border=0 cellpadding=0 cellspacing=0> <tr><td align=center><a href="%Image.URL%"> </a></td></tr> <tr><td align=center><a href="%Image.URL%">%Image.Name% %Image.Width%x%Image.Height%</a></tr></td> </table> </td> <!--EM NEXT--><!--EM END--> </tr> <!--EM END--> </table> <!-- Navigation links --> <!--EM IFNOT FirstPage--><a href="%PrevPage%"><b>PREV</b></a><!--EM END--> <!--EM IF MiddlePage--> | <!--EM END--> <!--EM IFNOT LastPage--><a href="%NextPage%"><b>NEXT</b></a><!--EM END--> This is where the name emage is inserted into your album. This can be removed or changed to say created by ej or whatever. To remove it completely delete everything in green to replace the text just delete the link which is <a href="http://www.v-methods.com" target=_blank>and type your name in place of E-Mage For Web <hr size=1 width=30% color="#000080"> <font size=1>This page created by <a href="http://www.v-methods.com" target=_blank><b>E-Mage For Web</b></a></font>. </center> </body> </html> The world is not going to end if you make a mistake. Simply replace the edited template with a copy of the original and your back to way things where before trying to edit. I make so many mistakes when trying something new but I learn from them. I look for patterns and try to copy them. I experiment. This is the fun of learning. I like the freedom of being able to express myself with my own web space. Imagine being told what you could or couln't plant in your garden. It would get boring real fast. Make sure you click save in notepad in order to save your changes. If you have a problem with editing a template post your whole template so others can help. Have a cool template that you made? Share it with us.
Admin |
   
Admin
| | Posted on Monday, April 07, 2003 - 05:14 pm: |   |
Macros Each image can be described by a set of parameters. They may be its number, dimensions measured in pixels, file size in bytes, and some other possible values. To automate calculating and inserting these values you can use macros. Macro is an identifier bracketed in '%' signs. It can be inserted in every point of a template. During interpreting, the macro will be replaced by corresponding to a current image value. Images %Image.Index% Global number of an image. Count starts from the number one. %Image.IndexP% Image number on the current HTML page. Count starts from the number one. %Image.URL% URL of a big image (relative or complete, depending on the program's settings). Ordinary usage of it is in href attribute of the <a > tag. %Image.Name% Name of a big image without file path and extension. Can be used, for example, inside <a > tag's name attribute. %Image.NameExt% Same as %Image.Name% but with file extension. %Image.Width% Width of large image in pixels. %Image.Height% Height of large image in pixels. %Image.Size% Size of large image file in bytes. %Image.SizeK% Size of large image file in kilobytes. %Image.Comment% One-line comment for an image. All carriage returns will be replaced by spaces. Can be used, for example, in alt attribute of <img> tag. %Image.CommentBR% Comment for an image. If there were any carriage returns, they are replaced by <br> tag. Thumbnails %Thumb.URL% URL of thumbnail (preview image) associated with a big image. Generally used in src attribute of <img> tag. %Thumb.Width% Width of thumbnail in pixels. %Thumb.Height% Height of thumbnail in pixels. %Thumb.Size% Size of thumbnail file in bytes. %Thumb.SizeK% Size of thumbnail file in kilobytes. %Thumb.MaxWidth% Peak thumbnail width. %Thumb.MaxHeight% Peak thumbnail height. %Thumb.MaxWidthP% Maximal thumbnail width on current HTML page. %Thumb.MaxHeightP% Maximal thumbnail height on current HTML page. Pages %PageIndex% The current page number. Count starts from 1. %PageCount% The total number of HTML pages. %PrevPage% Relative URL of the previous page. Generally used in href attribute of the <a > tag to make references to the previous page. %NextPage% Relative URL of the next page. Generally used in href attribute of the <a > tag to make references to the next page. %FirstPage% Relative URL of the first page. %LastPage% Relative URL of the last page. %Images.Count% The total number of images. %Images.CountP% The number of images on the current HTML page. Date and Time %Now.Date% The current date in default system format. %Now.Time% The current time in default system format. %Image.Date% The date of creation or the last modification of the image. %Image.Time% The time of creation or the last modification of the image. Special %Version% Version of E-Mage for Web
Admin |
|