Digital Scrapbook Work Tips 
  • The big picture: We are using Expression Web 4 to create a local web site on the hard drive of our computer. When we are satisfied with a portion of it, we upload that portion to the Yahoo web server using 'secure ftp" as provided by the FileZilla app. Future additions or modifications are incrementally added to the web server as appropriate.
     
  • Initially bring in files from your external USB drive using Windows Explorer to copy them to the appropriate sub folder of the local copy of the website on your hard drive. Then do all of your other file work (adding new files, renaming, copying and moving) from INSIDE  Expression Web 4. All digital scrapbook files and folders will be found as sub-folders to the Photoweb_Y\marks folder.
     
  • Starting Expression Web 4:  ...Site > Open Site > marks
    • Expression Web is a free download from Microsoft.  Get it here.
    • If you ever re-install it, Do Site > Manage Sites List to add  the c:\marks local site. (You only have to do this once.)
       
  • Adding a photo:
    • With the template of your choice (appropriately copied and renamed according to final use) displayed in the Design View of the main editing window, place the cursor where you want the new photo to appear, then use EW4's Insert Picture from File button.
       
  • Check Progress
    • Frequently hit the Save All button then the Preview in Internet Explorer button at upper left  to see how a change you just made will look in a browser.
    • To test hyperlink operation, have the desired starting page displayed in the main working panel, then hit the Preview button.
    • Hit to kill the preview display and return to EW4 editing display. Make sure the Design tab is selected at the bottom of the main window
       
  • Adding a new blank page:
    • In Site View with cursor in the folder where you want to create the new page. Right-click > new > HTML
    • Edit content as desired using row of buttons at upper right in EW4.
    • Provide a link to it from an existing page using EW4's Insert Hyperlink button.
       
  • Page Layout:
    • Just start typing on a page like you would in Microsoft Word using the buttons at upper right for formatting, OR...
    • Use the Insert Table button to obtain a grid of cells where you can control placement of text and photographs.
      • Right click the table >  Table Properties or Cell Properties  to fine-tune it
      • If you want the cell borders to be visible, set border size > 0 in table properties,
    • Put the cursor in the lower right cell of the table and repeatedly press TAB to extend the table downward.
    • You can delete rows in a table or the entire table by right-clicking the table, then select operation as desired.
    • If you want a long page of larger photos, one above the other, just start with a blank HTML page and insert photos and a caption below each of the photos. If you want more placement control use the grid provided by the tables feature. Remember that tables can be nested by inserting a new table inside a single cell of an existing table.
       
  • Adding a new album of existing scrapbook images
    • The folder is already set up for you.
    • Copy the AlbumTemplate.html file from the MarksTemplates folder to this new folder
    • Edit file name (e.g. FamilyAlbum2014.html) and the title in the page as required
      • Right click > Page Properties, set title to something like "Family Album 2014".
    • Copy pre-edited thumbnail and full size JPG images to this folder
    • Insert thumbnail JPG images on this album index page.
    • Add text next to the thumbnail.
    • Edit hyperlinks for the thumbnail and for the text that point to the full size scrapbook page image
    • Preview to make sure it works properly.
       
  • Adding a NEW album of NEW events (paper scrapbook does not exist)
    • Create a new folder if necessary.
    • In the folder, create a new blank page to hold full size photos of the new event
    • Edit a hyperlink on the album page thumbnail   to point to this new page.
       
  • Misc Tips
    • In Site View, look to upper right of working window for the folder icon to move UP one level 
    • If later when viewing the Yahoo-hosted site, it appears that recent changes did not "take" hit F5 to refresh, thus forcing a new retrieval from the server instead of displaying from local cache.
    • A high level start page is ALWAYS named index.html.  This is the page to be displayed by default when the link clicked on ends at the folder name in which this index.html file resides. e.g. kjfphotos.com/marks will display the file named index.htm that is found in the marks folder.
    • For full screen display, 700x700 for single page and 1400x700 for double page layouts seems about right for display on today's typical 900x1440 monitor. Long HTML pages consisting of multiple single or double-page layouts, one above the other in a single column table of centering-horizontal-alignment cells seem to work quite well. (Use FullSizeCenterTemplate.html)
    • As an alternative to viewing the website on the Internet, you can double click the ...marks\index.html folder on your hard drive and view it locally without an internet connection. 
    • To distribute an additional copy of your scrapbooking web on a thumbstick or DVD, copy the "marks" folder and all subfolders to the thumbstick or DVD. Double-click the index.html file to display the start page. 
       
  • Publishing to the Yahoo server
    • Use a separate program "FileZilla" to publish (copy the files from the local computer to the Yahoo server using the file transfer protocol (ftp)).
    • File > Site Manager > Connect...... Enter password for server.  You will be placed in the marks subfolder on both the local computer and the Yahoo web server.
    • Find each new or modified file or folder in the bottom left panel the display, right-click > Upload.  Go through them all. You can select a single file for upload or an entire folder.
      • Press CTRL-O to highlight lines in color to help you locate and verify new or modified files and folders. Green indicates that that file has a NEWER time stamp, and yellow indicates that that file or folder is not yet present on the server. You will want to upload both green and yellow highlighted files and folders. (It's a good idea to precede CTRL-O with F5 to refresh file time stamp data.)
    • If you are uploading a MODIFIED file that already exists on the server in an earlier version, a dialog box will pop up stating that "The Target File Already Exists"  and requests your desired action. Answer Overwrite.
    • When all new and modified files have been copied to the server, exit FileZilla and browse to the site on the Internet to verify correct operation of new content.
    • Filezilla re-installation instructions are found here.

  • Transparent GIF files with EW4:
    • Use Insert Picture to place a GIF image on the current page. (One possibility to get and place the GIF image is to use the Windows Snipping Tool to copy a portion of the display to the clipboard, then paste it into the HTML page being edited with EW4.
    • View > Toolbars > Picture to make sure the Pictures toolbar is visible
    • Click the GIF image to select it
    • Press the “Set Transparent Color button on the Pictures toolbar (14th button from the left).Click the eraser head on the background color you want to make transparent.   Then click outside of the box of the image being operate on and you're done.

  • Create multiple hyperlink hotspots on a single image
    • Make sure that you have the named hotspot destination html pages saved in their proper location in a website folder on your hard drive. They don't need to be finished pages at this point but you will need to be able to point to them when you configure the hotspots on the image
    • View > Toolbars > Picture to make the Pictures toolbar visible.
    • Left click the image on the page that you want to add hotspots to.
    • "Mouse over" the buttons at the right end of the Pictures toolbar to find and select the hotspot shape (rectangular, circular, or polygon) that is suitable for your first hotspot. 
    • Drag/draw the selected shape at the proper place on the image
    • Select the desired destination page for the current hotspot when prompted.
    • Repeat for all remaining hotspots.
    • Note that when viewing a page that has hyperlinked hot spots in a browser , the cursor image becomes a hand when mover a valid hotspot region. Note also that the configured destination page name appears appears in small text at lower left when you hover over a hotspot
    • Note also that you could if desired use this technique to make a menu out of a .jpg file that includes text and images. (e.g. "Click here to view more Birthday Party pictures!")
 
  • Creating a Picasa Collage
    • Start Picasa, then... File > Add Folder to Picasa.  Select the folder on your hard drive containing candidates for the collage and change the Red X near it to a circular blue arrow.  This will make that folder's contents visible to Picasa. Note that Picasa will not modify your original images in any way.
    • Menu: Create > Picture Collage...
    • Arrange images as desired. Click an image then drag the handle in and out to resize, or up and down to rotate, or drag the entire image to rearrange. Right-click image for further options.
    • Additional collage options are available in the panel at left. Note that you can use the eye dropper to create a background color compatible with colors in one of the images.
    • When you are satisfied with the layout click the  Create Collage button near the bottom of the left-hand panel, This will create a high resolution JPG file of the collage in Picasa's work area in your Pictures Library.
    • Copy or move it to your desired final location.
    • You may want to resize it to something around 1000 pixels wide before publishing it to your webserver to avoid wasting bandwidth and/or hard drive space.
    • Example
FileZilla - Initial Setup

Yahoo Hosting requires that Secure ftp instead of plain, unencrypted ftp be used to transfer files to and from the servers. Many ftp clients today are not secure, but FileZilla is one that is, and moreover is open source and free. (Just be sure you are alert and DO NOT accept the several crapware apps that try to sneak into your PC along with the FileZilla installation!)

If you have to re-install Filezilla, use File > Site Manager configure the General and Advanced tabs as per the screen shots below before you actually try to connect to the server. No configuration changes are required to the Transfer Settings and Charset tabs.


Video Content tips

The easiest way to add video content to your website is to host the video files on YouTube and simply point to them from thumbnails or hyperlinks on your separate website pages.

Make sure you VERIFY the email address you registered at YouTube with or you with be limited to a maximum length of 15 min for uploaded files. 

You want your video files formatted as .mp4 or .m4v for YouTube compatibility. If you are starting from a DVD format with multiple .vob files in a VIDEO_TS folder use a program like Handbrake (free) to convert the DVD files to a single .mp4 or .m4v file. 

In YouTube, use the UPLOAD button at upper right to initiate the upload process. It takes about 30 min for a 30 min video. While it is uploading complete the title, description and other fields that are being displayed on your monitor**.  When the upload and processing is complete, you will be offered several thumbnails from which to choose one that will represent your video on your YouTube channel page.  After processing finishes make sure your video plays properly when selected. 

Now add the ability to start the video playing from a link on your web page:  To obtain the hyperlink you will use at your website, position the video in YouTube at the point where you want it to start playing (typically at the beginning), right-click the video and select "Copy video URL at current time". The link is now on your clipboard ready to be pasted as desired in your website page content editor program.

** Click on your profile icon then "Creator Studio" on your video listing page (upper right) to edit these fields in the future.