Printable View
I have a web site that I have created and have the Home page and all roll-overs working beatifully (thanks Xara!) but I need to open my new pages in an IFrame and don't see any Hep files or Tutorials on ow to do this. Can anyone please point me in the right direction? TIA
Xtreme 4 can export designs as a website using absolute positioning .css and HTML. It is not really a HTML editor with all of the freedom and functions of purpose built HTML editors. It has no code view and does not enable creation of frames etc.
However, that said - there are methods you can use to include some of the things that Xtreme is not (yet) designed for.
Inline Frames was covered recently in a thread here.
Thanks sledger, I appreciate it. I had found that thread and tried to do that, but I must be missing something or not understanding the steps involved.
First, I did create my entire "Home" page, and it works/looks awesome, but then when I click on my roll-overs, of course they are pointing to a URL that either hasn't been created yet, or isn't linked yet to the page.
I then open my HTML - what I am a little confused about is do I need to put the Iframe into my default.htm file(I am presuming this is the case) and point it to my second page's URL or do I put the Iframe in my second page and "point" to the Home page? Obliviously I've never worked with Irames before. I am a .net/.aspx developer by trade and they don't recommend using Iframes...
So I put in a path to my second page that points to my local host so that I can test this. The problem that I am having with the steps in that thread is that I only have one place in the HTML where there is: <a name="HomeFrame" ><img src="default.htm_files/2.png" border="0" alt=""... and I have 8 roll-over buttons! I can see where my roll-over that I put the path to my local host is: .../My Documents/My Pictures/Web Design/Journey-Belize/JBTemplatetestfiles.htm_files/altunha.htm')" style=..."
So I am a little confused as to where to insert the Iframe. That's what I could use some help on... Any help would be much appreciated.
Basically, once you have followed the 'placeholder' idea as explained in the other thread, you need to insert the <iframe tag and appropriate attributes to replace (most of) the placeholder image code.
This is how I would do it.
For example:
<a name="HomeFrame"><img src="default.htm_files/2.png" border="0" alt="" style="left: 21px; top: 36px; width: 751px; height: 401px; position: absolute;"/></a>
Is replaced with:
<a name="HomeFrame"><iframe name="inlineframe" src="otherpage1.htm" frameborder="0" alt="inline frame" scrolling="no" style="left: 21px; top: 36px; width: 751px; height: 401px; position: absolute;"/></iframe></a>
You must retain style= etc so that the frame remains in the correct poistion on the page.
Once you have this inserted as shown, any links which are required to load into the inline frame must use the target attribute TARGET="inlineframe" in order to load the source into the inline frame space.
For example:
<a href="otherpage2.htm" target="inlineframe">
( The iframe name attribute can be whatever you like, just make sure that the links that you want to show in the iframe use this name in their target= )
As far as all your mouse-overs are concerned, I'm afraid I can't follow what you are saying well enough to provide a response...
What I mean is that I have 8 oll-overs, all with different URL's but I only see 1 place with the <a name> tag and am confused as to why there aren’t 8 of them. Did I possibly do something wrong when I created my "Home" page, where it did not generate a <a name> tag for them?Quote:
As far as all your mouse-overs are concerned, I'm afraid I can't follow what you are saying well enough to provide a response...
When I created them, I linked both the buttons and the roll-overs to the associated URL for each page by clicking on the button/rollover, going to Utilities, Web Address and typing in the URL in the URL Box. In the Target frame box, I put the name of the frame on my home page and saved and exported, but it only created the one <a name> tag, which happens to be for the home page (not for any of the buttons/roll overs) thus my confusion.
I thought you linked the "Home" page to point to the URL that you want to pt in that frame - am I way off base? What am I missing?
Thanks very much for your help, I truly appreciate it
No idea - can you possibly attach your .xar file?Quote:
Originally Posted by Coleen
The target frame name should be the <iframe name="name" and not the <a name="name" which you used when you named the placeholder.Quote:
Originally Posted by Coleen
However this isn't done in Xtreme, it's done by hand when editing the source later (and after exporting from Xtreme)
Inline frames are used to load an external resource into the host page so that it appears to be part of the host page.Quote:
Originally Posted by Coleen
Yes, I know/understnd that - I guess I am having trouble explaining myself (I am having trouble typing too - bad cold lots of cough syrup so I'm a little...off -sorry)Quote:
Inline frames are used to load an external resource into the host page so that it appears to be part of the host page.
Okay my .xar files are attached - the main page is "Journey-Belize" the roll-over page is altunha. Your help is so appreciated (especially since my mind is a littel foggy with the cough syurp rightnow...)
Thanks Coleen I've had a quick look and will find some time to try to explain a bit later.
However I can say from looking at your files that you have not quite grasped how inline frames need to work. :)
One other thing. You have used non-web-fonts throughout. As you have grouped most of them, they will be exported as images (necessary in order for them to show as you want) this will make your site much bigger in terms of kilobytes. Best to stick with standard web fonts and use pixel sizes rather than points. Easier for your visitors to read also :)
Also remember that any photos which are not specifically name JPEG will be exported as (larger kb sized) PNG
Your site (only exporting NewJourneyBelize.xar so far) is almost 1mb when exported to html, so will take a little while for poeple on slow dial-up connections.
Currently all images you have showing on the page are exported as PNG.
There are three images exported as JPG but they don't actually appear on the page (33/38/16) as they are concealed under the top right three images.
As I'll need more time to understand your files, I'll save further comment until later.
Oh Steve, you are a dear - thank you! See, learning all this stuff while trying to put together a site for a client isn't exactly how I wanted to learn, but I am finding that once i understand the way it's supposed to work, that I will definitely be purchasing it. I just wanted to make sure I can use it/do what I need to do with it first...and it's a learning experience coming from .net.
Okay, I will go back and make sure that all my images (including the collage) are saved as .jpg's and double check that I have all the objects grouped. I used that font because it was what the client had on her business cards, and she wanted to stick with it, personally, I would ave used Tahoma or Arial,or even Ludicia Script. Maybe I can convince her to let me change it - thanks for the heads-up on it.
I ran a tutorial I found on the web about Iframes, and I think I m understanding it better now, and will work on it tomorrow to. This cold is kicking my butt and I'm off to bed at 8:00!
Thanks again for all of your help!
For the money, Xtreme cannot be beaten. Of Xtreme usefulness to have. I use it daily for one thing or another.Quote:
Originally Posted by Coleen
Many other benefits include continued free support ;)
Okay, I am working on this problem again. I was able to get an iFrame to work in a new HTML document, but am still a little confused on 1 thing...
What I don't understand is how to create the iframe for all 8 buttons. In other words, I have this bit of code in my default HTML:
I am able to get the iFrame (in my test HTML pages) to insert in the correct "frame" but how do I insert the other pages into this frame on the click of the other roll-overs?Code:<iframe src="altunha/altunha.jpg" style="left: 163px; top: 300px;
width: 621px; height: 389px; position: absolute;"
scrolling="no" name="myInlineFrame"
frameborder=no>Put Altun HA text here for no image browsers</iframe>
Thanks for any help, it is much appreciated.
This is impossible.Quote:
I am able to get the iFrame (in my test HTML pages) to insert in the correct "frame" but how do I insert the other pages into this frame on the click of the other roll-overs?
What do you mean it's impossible? Maybe I'm not making myself clear. On each rollover button, you have a hyperlink to another HTML page - right? How do I get each of the HTML pages to display in the iFrame when clicked on?
Tell the link that it's target frame is myInlineFrame (what you called it in your example). There's a control for this in the dialog box where you specify what URL to load when you click a link.
Then when the link is clicked it will load in your iframe.
Of course, I'm saying this having just hand written an HTML file with an iframe and a link (I don't use Xara for web pages) so I'm only presuming that this will work for a xara generated page, but I can't see why it wouldn't.
To follow on with what Odat has stated. An IFrame can be the 'target' for a link.
Better information than I can give is at:
http://htmlhelp.com/reference/html40.../a.html#target
Not impossible.Quote:
Originally Posted by covoxer
See attached zip example (basic basic basic).
One thing I discovered though (which may be what John is referring to) in the Web Address dialogue 'Target Frame' field, entering the name of your iframe doesn't work as expected. In other words, although Xtreme allows you to enter a unique name in the Target Frame field, the TARGET=name is NOT added to the exported html anchors.
In other words, you also need to do this manually in the source.
John, can you fix this please :)
Note: I see Odat and Bill have also answered and confirmed that it should work.
My zipped example will show that it *does* work.
Extract and load index.htm into your browser (ignor IE7 warnings)
Thank you so much Odat, Soquili & Steve - I truly am extremely grateful for your help! I will try/check out your suggestions. Sorry If I am having trouble explaining myself, half a bottle of cough syrup will do that to a person! ;)
When I say impossible I mean impossible.
Steve, your example is omitting the key feature here, the rollover effects. Correct me if I'm wrong, but Coleen wanted rollover buttons to switch the iframe. Right?
And all rollover object links are implemented with JS which only recognizes 2 destinations - this window or the new one. Actually, there are two separate scripts for this purpose. No support for iframes.
So, as I say, it is impossible to easily implement this idea as described.
As to the fixes. These are not fixes but implementation of the new feature. I can't say if it will be implemented and when. I only tell that it is impossible now. Though it may be possible in the indeterminable future.
Yes that is correct John, I want to link the iFrame to the click of the roll-over. However, I have seen sites that do both! Evidently they create a variable in the JavaScript and tie each page to the variable. Unfortunately, I am not proficient enough in JavaSript and haven't a clue how to do this.
So, the next best thing, I guess is to create a separate page for each "Item" that was to go in my iFrame. The only problem is that it makes it so that all the logos and graphics have to load on the click of every button! What a waste of resources!
I did, however get Steve's demo working for my "Home" page, but had not moved on to trying to link the next button to the iFrame. So, thanks for the heads-up John, I am sure I would be very frustrated trying to do this and not being able to get it to work.
I guess the other thing to do is change my roll-overs to be hyperlinks instead. Hmmm, how to make my hyperlink have the graphic embedded in it? Well, I'm off to explore my options - maybe between Xara (for the great graphics) and .Net I can get what I want...
Thanks guys!
Coleen,
Well, I'm sure you did. But I doubt they were made with Xtreme. ;)Quote:
However, I have seen sites that do both!
Of course, it is possible to improve existing script to support this feature, and it is possible that this will be implemented in the following version. But I can't promise this now.
Yes, that's how it is supposed to be.Quote:
So, the next best thing, I guess is to create a separate page for each "Item" that was to go in my iFrame.
Well, not necessary. If you have common elemnts in multiple pages, and they are pixel aligned within your design, there is a high chance that they will be exported as a single image for all pages. In this case they would be opened from the browsers cache making no waste of resources.Quote:
The only problem is that it makes it so that all the logos and graphics have to load on the click of every button! What a waste of resources!
If you have no rollover effects in your document, then all links applied to images are exported as anchor elements. If you have at least one rollover in your document, all images are exported with JS links. All text links are always exported as anchors.Quote:
Hmmm, how to make my hyperlink have the graphic embedded in it?
That is a much, much better way of doing it. Navigating in iframes has many drawbacks and is not a good idea unless you have special, unusual requirements.Quote:
the next best thing, I guess is to create a separate page for each "Item" that was to go in my iFrame.
Assuming they're common elements, they'll be cached, you won't get more than a flicker of page updating. This is how 99% of the web already works, you don't have to worry about it.Quote:
The only problem is that it makes it so that all the logos and graphics have to load on the click of every button
I do have many common elements in all my pages for this site - the "Header/Logo" section, the button menus across the top and down the side - the only thing that changes for each page is a section about 600X400 pixels, so having it "flicker" when reloading is undesireable.
I could go back and re-do the whole thing in .Net only using the exported graphics - but I don't want to re-write the entire site. Live and learn...I use .Net for a reason, but absoluely LOVE the ease of Xara to do the graphic design! It makes it so that not only can I create a web-site, I don't spend my valuable time messing with crappy software like PSP!
So, my next project (which will actully be MY site) will be a compilation of gaphics created in Xara, and .ASPX/HTML & VB code. At least it is now fun to create graphics - not a chore!
Thanks for everyone's help :)
Sounds like it will show only for about 75% of visitors. ;)Quote:
So, my next project (which will actully be MY site) will be a compilation of gaphics created in Xara, and .ASPX/HTML & VB code.
What do you mean by "flicker"? Firefox reads common graphics from cache and I don't normally see common graphic elements flicker when moving between pages. IE6 flickers occasionally but most of the time it does not.Quote:
Originally Posted by Coleen
It is common for every page to refer to the same graphic files for common elements. This allows the browser to display from cache when the page changes. Those few people who change their default browser cache settings to check for newer versions each time the page is visited will see a flicker.
Why?Quote:
Sounds like it will show only for about 75% of visitors.
I intend to create my graphic design (such as my logo) in Xara and export it as a .jpg to display on my site. I don't intend to write my entire web site using Xara's export to HTML function...so why wouldn't my site be viewable by 25% of the public? .Net dispays just fine using Firefox - I've tested it!
When moving from page to page, there is "white" space as it loads each page, if it does cache the graphics - when I click on any page in the HTML site built by Xara, I get a "flicker" of white as the next page loads. It is obvious that there is a page change. If you know why this is happening or how to fix it I would really appreciate it! Thanks,Quote:
What do you mean by "flicker"?
That depends on your internet connection speed, your browser cache settings and the performance of your hardware.
I get no white flicker with any Xtreme built site I have tested.
Try mine if you like. The common graphics appear static while the next page loads the unique elements.
No flicker?
...or indeed any other page not built by Xara. The browser renders web pages progressively (bit-by-bit) as it receives them, rather than waiting for everything to arrive before drawing anything. There may be more or less flicker on cached pages depending on the browser (eg. Firefox flickers less), but this is how everyone is used to the web working. Don't get hung up on it!Quote:
click on any page in the HTML site built by Xara, I get a "flicker" of white as the next page loads.
Sure, you can try to defeat progressive rendering using iframes or some heinous JavaScript hack, but in the end you'll only be making the experience of using the site worse by breaking the standard navigational tools.
In Opera web browser, there is a page loading setting which allows you to basically (in effect) switch off the progressive loading.
'Redraw when loaded' allows the page to display instantly once all page elements are downloaded.
Of course this means that you are looking at the referring page a bit longer than you would otherwise expect while the next page loads in the background.
But there certainly no white flicker whatsoever on any page ever when using this feature (even those you have never visited before!)
(I don't use it - but it's an available setting :))
I guess the reason I have "issues" with the flicker/white page before next page loads - is because the header, main photos, buttons and all graphic content is the same - there is only 1 portion of each page that changes, so I am not pleased with the "flicker", but the site itself (IMO) looks great!
Thanks for everyone's help, advice and information - it really is appreciated!