How To Prepare Your Digital Pictures
In Web Pages

As most of you, I'm not an expert in whipping up webpages (except in my fast and cheesy way), and I really don't have so much time to piddle around with this task forever. However, because I create all these webpages to help with my webrankings, I'll put a little more time and effort into it than most people.

I created this page as a continuation of my How to Resize Digital Camera Pictures page, which I created to help my friends with their pictures. This previous page will explain how to quickly rotate, resize and compress your digital pictures so that you can upload them to the web for your friends to view. Otherwise, if you're like most people who just upload very large picture files that take a long time to download and view, and to some website which automatically creates small thumbnails for you, a website which often requires the viewer to register with them and is slow to navigate, most people just wont bother to take the time to view your beautiful pictures. If you want to show your friends your valued pictures and keep them up to date concerning your life, you should take the time to prepare them properly and make it easy for them to view them. It really does not take that long once you get the hang of it. Because I make a lot of these pages for my travel Europe site, I have tweaked out a quick approach to whip such pages together.

I like to use FrontPage for dummies, as I like to call it. It is like Word and you can work with it quickly. It should come with every installation of Microsoft Office. I will explain the entire procedure from beginning to end, assuming that you do not know anything about this stuff.

• In Frontpage, create a blank new file (most of the time you can work just like if in Word). Save the file and give it an appropriate name (more tips below). If you plan to have several web accounts, you should create a parent directory/folder for each. If you plan to make a lot of webpages, you should organise them logically into subfolders. For example, "travelling", or "family". In each of these subfolders you can create other subfolders, perhaps according to years etc. Whenever naming folders or files, it is better to separate-words-with-a-dash, otherwise once uploaded to the web spaces get converted%to%percentage%symbols and it looks goofy.

• Right click with your mouse somewhere in the page and press Page Properties. Here you can set the background and text colour and other things. Once you have created a template or style that you like, you can open a previous page that you made and Save As to keep the same settings.

• Write any text that you will want in your webpage. You can also write it in Word, if you are used to special formatting shortcuts, and then copy/paste your text into your FrontPage document. Most of the formatting should be retained. Otherwise, the FrontPage also uses the standard dictionary, and you can see the squiggly lines under words which have been mispelt.

• Once you have written and proofread the text after yourself, you can start to add in your pictures. (For this point form format, I simply pressed the icon. indents a paragraph, for example. It really is for dummies, isn't it?).

• If you like to scatter your pictures throughout the text like I do, simply use tables for that. At the end of one paragraph, I press Enter to create a blank line between paragraphs. With my cursor on that blank line, I then press the icon to create a table, selecting one row of two columns. Or from the menu you can also select Table > Insert > Table, and choose how many rows and columns etc. Once you have your table, I right click into the table and select Table Properties, and in the section Borders > Size, I click the down arrow key and to get '0' for border size. This will basically make my table invisible once viewed in the browser. You can certainly choose your own formatting, if you want to show borders or background colours etc. in your table.

• Once I have created my first table, I drag across it with the mouse so that I select it (it becomes entirely black), then I copy it (CTRL C), and paste it (CTRL V) on new blank lines I create between the occasional two paragraphs. In this way I duplicate my invisible tables throughout the webpage. In these tables you will later put your pictures. You can certainly move the tables to elsewhere in the document later. Right now I am just preparing the page's "foundation", so to speak.

Now that you have prepared your basic webpage, with the interesting text describing your travel experience or whatever you want to explain to your friends (this can also be accomplished with your average blog account, such as blogger.com, but I find my approach faster, and I can manipulate with formatting more etc., not to mention that I can prepare everything offline), you want to throw in all your beautiful pictures.

• First you want to copy all your pictures from your picture folder to your offline web folder (in FrontPage's working folder, usually C:\Webshare\wwwroot\etc.). You will want to resize and alter your web pictures. By copying them you will not damage or change the originals. In the first point above you created a file name for your first page. Lets say you will be using a free webhosting account called MyPages, and you are creating a page about your trip to Mexico in 2006. You directory structure might look something like: MyPages\travel\2006\Mexico\. This is obviously entirely up to you how you organise everything, but if you plan to make a lot of pages, it is good to start organising things logically now. In this folder is where you should copy all your Mexico pictures. I usually create a subfolder 'pics', so that you could copy your pics into, for example: MyPages\travel\2006\Mexico\pics\. If you have many pictures, you can create individual subfolders named "01", "02" etc. into your 'pics' folder. It really does not matter. If your trip to Mexico was very long and you have a lot of juicy stories to tell, you might want to break up your story into several pages, such as MyPages\travel\2006\Mexico\getting-there.html, MyPages\travel\2006\Mexico\after-the-initial-shock.html, MyPages\travel\2006\Mexico\bribing-our-way-back-home.html etc.

• Now that you have copied all your pictures into an intelligently located folder, you can start playing around with them. If you make a mistake to one of them, you can go back to your MyPictures place, where you keep all your originals, and copy over top of the webfolder picture, and start again (with the one you made a mistake with). To start modifying all your pictures for the web, I like to right click on the folder and press Explore. With the new window that pops up, there is usually a tree structure on the left hand side. This usually annoys me so I press the little X at the top right of that subwindow to make it go away. I'll maximise this explore window, and then press the icon and select Thumbnails. This will show you all your pics in that folder in thumbnail form, so you have a good overview and can start to plan where to place each one of them.

• The first thing I like to do is to rotate them properly. If you see a bunch that need to be rotated clockwise, select each of them with your left mouse button while holding down the CTRL key. Once you have selected a bunch, right click one of them and then choose Rotate Clockwise. The same procedure to rotate some counter clockwise etc.

• Now you will want to view them individually. For this I like to use IrfanView (available through my Download Translation Programs site), because not only is it free, but it is super fast and has a lot of features. Click here < for details about this program <[make sure to give instructions how to set to auto open etc.].

• With the left or right arrow key (possibly also the left or right mouse button, or the space bar) while viewing it in Irfan, you can quickly peruse each picture in your folder. If you press Enter the picture will automatically fit to the size of your computer screen. If you see that you forgot to rotate some picture, you can press L to rotate left (counter clockwise) or R for right (clockwise). Obviously you will need to Save (CTRL S) the picture if you start changing it in this program in order for the changes to take effect, and generally it is better to make all your changes at once before saving it. In the previous section How to Resize Digital Camera Pictures you will find more detailed information how to resize and compress the pictures. When you see in full view a picture you think is not good enough to show your friends, you can press the Delete key and confirm the deletion. You will still see the picture after deleting it, but it will truly be gone from your pic folder. Keep in mind that you still have your originals somewhere else. Now that you have erased some pictures, if you go back to the same location with the left or right arrow key (while still in Irfan), the program will say it is no longer there. You can close the program with the ESC key and reopen it to avoid this problem.

• Now that you have erased pictures you don't want, rotated everything properly, and have a reasonably good overview of all your pictures - through the Thumbnail Explore window and by viewing them individually on screen using IrfanView - you are ready to start resizing (or cropping) them using Irfan. At this point I like to go back to my FrontPage file and start to plan which picture to place where. There might have been key points in your story that you would like to line up with the relevant pictures. I like to start there, so that the story line matches the flow of pictures, if possible. At your key points in your story line, copy one of your invisible tables. Sometimes you might make a table with 3 or 4 cells instead of 2, for smaller pictures. Everything is adjustable according to how you want to tell your story. Assuming your table has two cells, put your cursor (click in with your left mouse button) into the left or right cell, depending on where you want to place your picture (the remaining cell to be filled in with text). Press CTRL E to centre the cursor in that cell. Go back to the picture you want to put in that cell and view it with Irfan. Resize it according to the How to Resize Digital Camera Pictures instructions. You can ALT TAB to jump back to FrontPage, and then ALT TAB back to your resized picture to decide if you are happy with the size. Note that some people may have a smaller monitor than you, so if you are fortunate to be working on a large LCD screen, you should resize your FrontPage window to a smaller horizontal width. When resizing with CTRL R, if you are not happy with the size, you should CTRL Z to go back to the original size, rather than resize a resize, because resizing a resize several times can result in undesireable quality effects once you are ready to save your picture. When you are done manipulating with your picture, you can Save it. Note that you can also manipulate each picture in other ways, such as with colour hue or cropping etc. For more detailed adjustments I often like to use Corel Draw or Photoshop etc. This would require another page of explanation. With these programs you can remove someone's head and put it on a tree stump, and all sorts of other nifty stuff, and really control colours.

• Now that you have resized your pic, adjusted the brightness or contrast if you wanted to or don't know how to use your digital camera properly, you are ready to insert it into FrontPage. Simply have your cursor in the cell of your invisible table, and press the icon. The first time you will have to navigate to your 'pics' folder, but subsequent inserted pictures will always offer the same folder. Now you will see your picture in FrontPage, already sized the way it should be. You can still resize it further in FrontPage, by clicking on the picture and dragging the corners, but I would not recommend this.

• Once your picture is in the invisible table, then simply select text from surrounding areas and move it to the blank cell next to the picture. Sometimes I like to make side comments relating to the picture. You can do so under the picture itself (you might want to use SHIFT ENTER instead of ENTER when starting a new line in this case), or in a space in the adjacent cell. For such comments I like to use different formatting, such as bold, italic, and font colour dark green. All these icons you should easily find in your toolbar at the top, as if working in Word.

And that's pretty well it. May seem very complicated, but no more complicated than trying to upload these pictures into text on some blog site. It is certainly harder work than uploading your pictures to some thumbnail registration site and sending your story to your friends in an email, but if you want to present your story and increase the enjoyment for your readers, who might not bother checking out all your pictures if uploaded to the thumbnail registration site, you have to go through all this. But trust me, once you get the hang of it, it really does not take long.

To check out some pages how I organised my pictures while travelling, you can find one example through travel to Stoliv Montenegro. All my travel pages are organised this way. Sometimes you might want to change the colour background of your invisible table or cell in table to create different effects.
On my travel pages, you will also notice my Gallery pages, as I was not able to cram all my pictures with my story. It is easy to create a Gallery Page by simply creating one super long invisible table (one row with many cells) on a blank page. You can drag your mouse across several cells to select them, then choose Table > Insert > Rows or Columns to add more columns for your pictures. Jump to the next cell by pressing Tab, and then press the icon to insert another picture. You can type in the occasional comment if you like. Easy as that!

Once you have finished your pages offline, you will want to UPLOAD them to the web. For this I like to use an FTP program, such as Total Commander. Using FrontPage instead for this purpose can be an absolute migraine. With an FTP program, you can just log into your webhost < account and upload the entire folder with subfolders. I will finish working on this page another day. I have to work sometimes too y'know!

< hypermart

< print screen snapshot

< Frontpage formatting tricks...
- CTRL K links to other sites, bookmarks, New Page links etc.
- indenting paragraphs
 

More computer tips