Thank you for coming back to post.
They really helped to explain where YOU are in the process and what has been done.
That makes it easier to help you to get where you need to go.
You are getting there one step at a time.
As a novice, there are some things you just don't know and those things can really mess you up!
Let me clarify a couple things and you will have the rest fall in place!
1) Using NOTEPAD. WHY? What is that about???Notepad is a tiny little file editor built into every windows machine. Many uses for this practical little wonder.
It is the perfect place to copy/paste information you need at hand and perfect place to make notes. I have a list of SHOPPING items that is temporary...Need to find something and compare prices, I paste the urls into a txt file, save that txt (text file) onto the desktop and come back to that for quick reference. Then delete when I'm done. You can paste text into it that has bolding underlines, etc, and when you copy it again from the text file, all formatting is removed. This comes in very handy. There are a TON of uses I won't go into.
For this situation, I asked you to open NOTEPAD because it is an HTML editor!
Html code does not require a special program. They come in handy (highlight codes, etc) but they are not necessary, especially for what WE want to accomplish in this task. Some people write full websites in NOTEPAD, from scratch!
Why upload the notepad file to Google when the code can be put directly in the webpage?
I asked you to paste the code <html>..given above..</html> into the white screen of NOTEPAD then save the file as
photo1.htm instead of using the default .txt file extension that NOTEPAD normally uses.
By saving the file as an .htm (or .html or .php) you have manually created a real web page!Yes... That code I gave you IS a COMPLETE simplistic web page.
The code doesn't go INTO a web page because it IS a web page all by itself! The code is just as valid as if you created it with Dreamweaver, or Google's online web builder.
The file doesn't look special but it is!
Google has no control over the formatting of this web page because YOU made it.
So in the html code you paste in, you can have instructions for transparency or anything else you want! You can call any photo into the page, use any colors YOU want (not limited to their choices) and you could even add a decription below the image on your manual web page.
You upload this file
photo1.htm to your google storage space, UPLOADED STUFF.
then what should I do with it once it's there?
You point a link to it from your main page using a text style link or a thumbnail link.
Your
photo1.htm file just sits there working for you.
This allows the browser to find a web page called
photo1.htm when you link to it.
- If you visit your existing
photo1.htm page directly You will see the default windows background (plain white). Click your toolbar at the top VIEW > SOURCE to see the web page code which includes the transparency setting.
- When someone clicks the thumbnail on your home page, the link loads that little manual web page into your iframe! And best yet, because the code says the background is transparent, you will see your normal background color around the image! Right now that means you get BLACK around the image.
- If you don't upload the
photo.htm web page file to your space, no one can find a web page called
photo1.htm because it will not exist.
- If you pasted the code into a Google webpage: 1) you would be duplicating code (since the code already creates a full webpage); and 2) you can not control the background of Google pages so it defeats the purpose.
Now as I said before, that little file is a COMPLETE WEB PAGE.
Yes, you made it in NOTEPAD.
But now that you named it with a .htm or .html or .php file extension, it can be viewed in your browser window.
You put it on your Google account so that web page can be pulled into your iframe when your thumbnail is clicked.
Remember that YOU were making it in NOTEPAD, editing the code.
But when we visit the web page in a browser, you will see the RESULT of your work, not the code itself (just like this page shows the RESULTS of the code, not the code itself).
You can edit it again in NOTEPAD if you want. Just open NOTEPAD, FILE OPEN and open the file.
Think of it like working on the back of the paper with all the notes about the project, but the front of the page has all the pictures and pretty text...the browser always shows the FRONT of the web page with the pictures, text, etc but does not show all the detailed coding....
2) Photo1.htm and photo1.htm SAME PAGE? CONFUSION!!!Ok...Granted this is very confusing.
Basic stuff: (Forgive me if you know this, just want to lay a good foundation for the rest)
Web hosts (like Google and others) have servers that hold the web pages. Servers are computers that allow the outside world to connect to them and download/upload information. Your home computer is not a server. But can be used as one if you install software that would allow me or others to connect to your machine from the outside.
Windows servers are not the same as Linux/Unix servers. Different operating systems. Very different operating systems. Won't go into why a company would choose to use one over the other. Just accept that both are used throughout the world, both are viable and acceptable. BUT very different. Your browser doesn't bother to tell you that when you connect to this forum (on samisite.com) you are visiting a LINUX server. But it will behave differently.
For YOU, the biggest difference is how web pages are named. This will be totally new to you.
Windows servers (and your home computer) will see these 7 files as the
same file:
Photo1.htm, photo1.htm, PHOTO1.htm, PHOto1.htm, PHotO1.htm, pHOTO1.htm, phOto1.htm
You can not put those seven files into the same folder on your computer. Windows will say you have that file and want to replace it with the new version because Windows is NOT case sensitive.
You can try it....
Open NOTEPAD. Type in a sentence "SAMI IS NOT CRAZY!"
File > Save As > sami1.htm (put it on your desktop for quick reference)
Then choose File > Save As > SAMI1.htm (again to same desktop area) and you will get the REPLACE FILE? box.
You can not have both sami1.htm and SAMI1.htmBUT.... This is where you get twisted up (like the rest of us)
.....
LINUX/UNIX servers will see these 7 files as the
totally different files!:
Photo1.htm, photo1.htm, PHOTO1.htm, PHOto1.htm, PHotO1.htm, pHOTO1.htm, phOto1.htm
You could have seven different web pages on your website, all spelled the same, but the CApS are DifFErent.
Linux servers will allow you to point links to each of those seven different pages, even though they carry the same name! Linux/Unix servers are CAsE SenSITive!
This can cause headaches for people that do not know about it!!!
I told you to use this code to link your content pages:
<p><a title="Click the image and see the larger one in the iframe" href="photo1.htm" target="FRAME2" alt="Click the image and see the larger one in the transparent iframe"><img tabindex="0" height="21" src="sswebdesign_194_tiny.jpg" width="70" border="0"></a> </p>
Notice that I am pointing to
href="photo1.htm" in that code. ALL
lower case letters.
I also told you to make save your NOTEPAD page as
photo1.htm , also with only
lower case letters! I made sure my instruction matched.
That should have been the end of it for you.
The images (thumbnail and larger one) are uploaded to Google.
You make a manual web page in NOTEPAD, put the image code in it, upload it, point a link to it into the iframe.
The link and the web page both lower case and match exactly.
Done.
But......You made the confusion worse than it needed to be.
You did not follow my instruction and went off to do something yourself, similar but not the same. And it went wrong. Lets dissect it so you see what went wrong and why....
I said (and provided code for each step):
You must make MANUAL web pages that will become your CONTENT pages. Takes less than 1 minute each.
Use this web page code in NOTEPAD to make very basic web pages that hold your LARGE images.
This simple web page has the style code that makes the background transparent AND calls in your large image.
Upload your images and simple web pages to your google account. Then set links to those CONTENT pages.
You said:
2)Then I uploaded it to Google in the section that says "Uploaded Stuff"
It's listed there under the name "Photo1.htm". (the confusion I have with this is that I don't know why you say to upload it here when it's code that seems to be needed on the Photo1.htm page itself). I trying to figure out why it has to be in the list.
3)I then made a new web page called photo1.htm
I told you to make a file called
photo1.htm and upload it to your website. That creates a web page called
photo1.htm.
Your #2 above says you made a file called
Photo1.htm.
WHOOPS....you did not use all
lower case as I asked. This caused major confusion because the code is looking for
photo1.htm NOT
Photo1.htm. This file would not work with the code I gave you.
Your #3 above says you then made a new web page called
photo1.htmOk....do you see that you made 2 versions of the same page? Same spelling but CAps Were Different so Linux sees this page differently than
Photo1.htm.
You should only have ONE web page called
photo1.htm, made in NOTEPAD as I instructed. No caps. The web page INCLUDES all the html coding you absolutely need (transparent background and calls in a specific larger photo) because I gave it to you that way.
REMOVE your Photo1.htm from your google account! Your
photo1.htm is correct. You made it in NOTEPAD.
Your uploaded it to your google account. GREAT! Leave it alone!
For reference, you made the content page for your first photo like this:- OPEN NOTEPAD
- Paste in this code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>photo1</title>
<style type="text/css">
body {background-color: transparent}
</style>
</head>
<body>
<img src="101-378x280.jpg" border="0" width="378" height="280" alt="Landscape 101" align="top">
</body>
</html>
File save as
photo1.htmSO .... in the end 4 lessions are learned about this project:1) NOTEPAD can be used to CREATE a web page. The full code of a web page can be just a few short lines or several thousand lines long. NOTEPAD is a great simple editor that can be used to tweak pieces of code, or the whole web page, like the content pages used in this project.
2) CODE must match file name EXACTLY. Be careful when you tweak code for ANY purpose. One tiny character out of place CAN cause the page to fail. If you point to
photo1.htm you better have a page set up as
photo1.htm Case sensitivity counts when making links, page names, file names, you name it.
Read more about proper file naming here under our website best practices.
Also, for future reference, this is a basic list of website terminology that may at some point be helpful3) You need an iframe on your main page (you have one and it works).
4) For each thumbnail/large image combination, you need matching link to content page...
- a thumbnail link that points to a content page
photo1.htm - a content page
photo1.htm ------------
- a thumbnail link that points to a content page
photo2.htm - a content page
photo2.htm ------------
- a thumbnail link that points to a content page
photo3.htm- a content page
photo3.htmTo make the process faster, copy paste and tweak in batches.MAKE YOUR THUMBNAIL LINKS: Put in your links to your manual web pages
photo1.htm,
photo2.htm, and
photo3.htm(using your code from your home page)
</p>
<center><a title="Click the image and see the larger one in the iframe" href="photo1.htm" target="FRAME1" alt="Click the image and see the larger one in the iframe"><img tabindex="0" src="http://rkartstudio.googlepages.com/101thumb.jpg" border="0"></a></center>
<p></p> Copy the code. Change the html page name and the photo to be shown.
href="
photo1.htm" becomes href="
photo2.htm"
101thumb.jpg becomes
202thumb.jpgPaste the modified code into your Google web page for your second thumbnail link.
Repeat the copy/tweak/paste again for a third thumbnail lnk....
Repeat the copy/tweak/paste again for a fourth thumbnail lnk....
MAKE YOUR CONTENT PAGES: Open your
photo1.htm file
FILE SAVE AS
photo2.htm and change the name of the photo inside it.
Save the file and upload it to Google with the image you want to appear on the page.
Open your photo1.htm file
FILE SAVE AS
photo3.htm and change the name of the photo inside it.
Save the file and upload it to Google with the image you want to appear on the page.
Please let us know if that gave you the AH HA!
moment. Let us know how it goes.
If you are still stuck, give us another post that tells us your thoughts/actions so we can direct you.
