Fonts and Images not working

[fotowolf]

See http://www.wolfphoto.x10hosting.com/Intro.html for actual site.

Created a site locally on hard drive using iWeb '08 in Snow Leopard OS. Exported to a folder using iWeb. Used Cyberduck to upload files to x10 server. Started by only uploading Intro and Safari sections (other links will not work). Unfortunately, fonts and images not appearing as they did in iWeb. Confirmed that all images, pages, etc. are in the public folder. Also confirmed that images do work when I (temporarily) got rid of the index.html file and clicked on each image to confirm they work. Don't understand why images aren't showing or why the text that is showing up isn't in the font/size that I had it in using iWeb. Very new to website creation so any advice is welcome! I've attached a screen shot of how it should look in hopes that it will help explain the difference between what I'd like to see vs. what is currently appearing (actual site).

Thanks in advance for your time.

 

[adamparkzer]

The font discrepancy is likely caused by font incompatibility among computers. If the computer that you are viewing the website from does not have the particular font installed, it merely reverts to a default font that it knows it can display.

As for the missing image, did you check and see if your images were uploaded in the proper directory, and that all files are properly named (checking for case-sensitivity)?

 

[Gouri]

You have to place all images in corresponding folders like

intro_files, SAFARI_files,....


Then it will work check the paths for each and every images files then upload them accordingly.

 

[diabolo]

can you link me to "IMG_3654-1.jpg"

because right now you have the image path set to:
http://www.wolfphoto.x10hosting.com/Intro_files/IMG_3654-1.jpg

is this correct?

 

[fotowolf]

Wow, thanks everyone for your speedy replies. Images are now working! As to the font problem... text/fonts are being viewed on the same macbook pro that created the website in iWeb so wouldn't that mean that I have the fonts installed on my computer? That said, seeing as though I'm not sure if all viewers will have the same fonts installed as I do, should I turn the navigation section of the site (where the fonts are) into a collection of hyperlinked images? Thanks again everyone.

 

[adamparkzer]

Wow, thanks everyone for your speedy replies. Images are now working! As to the font problem... text/fonts are being viewed on the same macbook pro that created the website in iWeb so wouldn't that mean that I have the fonts installed on my computer? That said, seeing as though I'm not sure if all viewers will have the same fonts installed as I do, should I turn the navigation section of the site (where the fonts are) into a collection of hyperlinked images? Thanks again everyone.

Check the URLs of your Javascript too, I think you may be using Javascript to integrate the fonts into your website.

 

[fotowolf]

I'm sorry but I don't understand what you mean. Still very new to website creation and don't know what javascripts are. Could you be more specific/ speak in simple terms? Apologize for my ignorance.

 

[adamparkzer]

I'm sorry but I don't understand what you mean. Still very new to website creation and don't know what javascripts are. Could you be more specific/ speak in simple terms? Apologize for my ignorance.

Make sure that these Javscripts are pointing to the real Javascript files:

    <script type="text/javascript" src="[URL="http://forums.x10hosting.com/view-source:http://www.wolfphoto.x10hosting.com/Scripts/iWebSite.js"]Scripts/iWebSite.js[/URL]"></script>
    <script type="text/javascript" src="[URL="http://forums.x10hosting.com/view-source:http://www.wolfphoto.x10hosting.com/Scripts/iWebImage.js"]Scripts/iWebImage.js[/URL]"></script>
    <script type="text/javascript" src="[URL="http://forums.x10hosting.com/view-source:http://www.wolfphoto.x10hosting.com/Intro_files/Intro.js"]Intro_files/Intro.js[/URL]"></script>

As of right now, they're pointing to 404 error pages.

 

[fotowolf]

Adam, I didn't have a SCRIPTS folder in my public folder so I created one and put the .js files that you indicated into it. It does not look like it changed the font issue. What am I missing? Thanks.

 

[adamparkzer]

Adam, I didn't have a SCRIPTS folder in my public folder so I created one and put the .js files that you indicated into it. It does not look like it changed the font issue. What am I missing? Thanks.

I still see a 404 error page when trying to access your .js files. Did you check for case-sensitivity?

 

[Danielx386]

In regard to the font issue, like Adam said before, not every computer will have the same fonts installed.

 

[Gouri]

Adam, I didn't have a SCRIPTS folder in my public folder so I created one and put the .js files that you indicated into it. It does not look like it changed the font issue. What am I missing? Thanks.

Case sensitive. Did you made Scripts folder or SCRIPTS folder. Both are not equal..

second thing Intro_files also contains one .js file. Did you uploaded that one too or not.

 

[adamparkzer]

In regard to the font issue, like Adam said before, not every computer will have the same fonts installed.

The original poster is trying to view the font from the computer in which he or she constructed the page.

 

[fotowolf]

I don't understand what I need to do or where I should be checking for case sensitivity. Could you please be more specific? Again, probably safe to assume I don't know anything. If you'd prefer, I can call you at your convenience.

 

[adamparkzer]

I don't understand what I need to do or where I should be checking for case sensitivity. Could you please be more specific? Again, probably safe to assume I don't know anything. If you'd prefer, I can call you at your convenience.

Case sensitivity meaning to watch out for capital and lowercase letters. SCRIPTS and Scripts is not the same thing.

Also, do not call the x10Hosting toll free line asking for me, I don't have an extension with them.

 

[descalzo]

A. Directory and filenames are case sensitive. Foo.html is not the same as FOO.html. If the file is saved as foo.HTML and the link is to foo.html, you will get a '404 File not found' error.
Standard practice is to make everything lowercase.



B. The .css file Intro_files/Intro.css is what controls the fonts and colors. It is not there (on x10). You have to upload that file too. Without that, any computer, even with all the fonts installed, will just show the default.

 

[mc se7en]

I use iWeb and I used to do this as well (use Cyberduck to upload to my old host) but now I use the built-in FTP in iWeb '09 and I've gotta say, it's worth the upgrade.

Anyway, here's the deal: Once you export your website to a folder on your hard drive, don't do anything with that folder. Don't go digging around inside it and don't go screwing around with the names of stuff. I sometimes got into trouble like what you're experiencing doing that kind of stuff. Instead, open up Cyberduck, connect to your server, go to your public_html folder and then drag the entire website folder into Cyberduck. The result should be a folder with your website's name in the public_html folder. Your site will be at www.wolfphoto.x10hosting.com and that is all you need to share with people (don't include the ending part that will say /YOURSITENAME/PAGENAME.html).

If you want to get rid of the /YOURSITENAME/ in the address, then the directions change slightly. Instead of uploading the whole folder, just open the folder (in Finder, not Cyberduck) and the select everything inside it and upload all of it to public_html.

Also, remember that capitalization is important. If the title of the page is SAFARI then when you tell people how to get there, they HAVE to type SAFARI in all caps or they won't be able to see it. If they type it in all lowercase, it's not going to work. Here's a semi-easy way to fix that:

First, you make each page title all-lowercase in iWeb. You may need to rename it to something random like "A" and then name it back to it's original name because iWeb doesn't let you change the name to the same thing with different capitalization. So, for example, change the page called SAFARI to A and then to safari.

Now for the last two steps. If you like the look of your navbar (the list of links on the left side of your website) with all the items lowercase, just skip this step. If you want your navbar to be in all-caps or you want it to be capitalized differently than what is in your page titles, follow this step.

First, create a new text box. Then type in the names of each of your pages. Adjust the text box and the font, etc to look like your navbar. When you have it looking how you want it, go to the Inspector and open the second tab. There should be a checkbox that ways "Show navbar on page" or something similar (this is NOT "Show page in navbar" but the other option). Uncheck that. Now, your page content may be moved around and thrown out of wack. That's OK, just hit "select all" (Command+A) and move everything to where you want it. Then move the newly created navbar to where you want it. Make each item in the new navbar a link using the Inspector (second-to-last tab) and point it to the appropriate page.

Now for the final, and easiest, step. When you open your pages in Safari (or whatever browser you use) you'll see that the title in the browser's title bar is all lowercase and unprofessional looking. This is the easy way to fix that.

Create a new HTML Snippet on your page. Place it in a blank area somewhere. It will be invisible, but don't but it over anything like an image or a link. Make the HTML Snippet as small as possible and then paste the following code into it and press "Apply". Be sure to replace "PAGE TITLE HERE" with whatever you want that page to be called ("Safari" for example). Also, be sure to leave the quotation marks in place. That will be the title that appears in the title bar of the browser.

<script type="text/javascript"> parent.document.title="PAGE TITLE HERE" </script>

Hopefully this should solve your problems as well as help make your site even better! Let me know if you need any extra explanations and I'll be glad to help!