×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

*
*
*
*

Thanks. We have received your request and will respond promptly.

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Imageready button (slice a) displays in another slice (slice b)

thread905-1483986

Imageready button (slice a) displays in another slice (slice b)

Imageready button (slice a) displays in another slice (slice b)

(OP)
On the same web page, I am trying to get a link, from a button in the top horizontal bar to display the location of that link, on the same page in the area below that bar that would be known as the "parent" window.  

My problem is how to designate that the link opens in that area.  The button is known as slice #6 and the area below is known as slice #22.  I can't seem to make the link placed in slice #6 actually display the results in slice #22.

Please see the URL provided in the attachment to this post for page example.  This a real estate web site and I want the button shown as "MLS search"(slice #6) to display the results in the big empty area below (slice #22).  I understand frames in dreamweaver, but don't see how you designate that in photoshop/imageready.  Notice when you click the link now it just opens in a new page and I want it to open on the same page in the designated area.  What am I missing here??

ANY help is greatly appreciated!

RE: Imageready button (slice a) displays in another slice (slice b)

This is not an Image Ready problem but a HTML one. You would need to edit the frames code manually to achieve this.

I would have it opening a new page anyway and avoid frames for this task.

Keith
www.studiosoft.co.uk

RE: Imageready button (slice a) displays in another slice (slice b)

(OP)


It's a real estate site that requires the agent's picture and info remain on the left at all times.  There is no choice.  The info has to display as indicated.  

RE: Imageready button (slice a) displays in another slice (slice b)

Whichever way you do it, you will have to manually edit the html.

First you need to create a frame set with a header, left column and main body. Each area should be given a different name. 'Header','column' and 'main' would do. Create separate pages for each area. To change the contents of 'main' from within 'header' set a target='main' to the menu link.  

Keith
www.studiosoft.co.uk

RE: Imageready button (slice a) displays in another slice (slice b)

(OP)

you said:  First, create a framset...

..in which program?  Photoshop or Imageready?  I don't see the option to create a frameset in either program.

thanks for your assistance.

RE: Imageready button (slice a) displays in another slice (slice b)

As I said in my first post, this is not an Image ready problem it is a basic html problem and you have already answered your own question.

CODE

I understand frames in dreamweaver
I would advise you to design your site in HTML and not build it with Photoshop or Image Ready, these are both very good image maniulation tools but they are not web site creation tools.
Your home page is far too wide for the standard monitor width, and if you put the search form into the main panel it will make it even wider. Visitors do not like horizontal scrolling and it should be avoided.

 

Keith
www.studiosoft.co.uk

RE: Imageready button (slice a) displays in another slice (slice b)

(OP)

The whole reason for this is to upgrade to the advanced look that Photoshop/imageready provides over Dreamweaver.

The site already exists w/frames at http://www.nickburkehomes.com.  

Compare to the re-design example at:
http://www.nickburkehomes.com/newindex6.html

On the page that we would want the listings to appear at
http://www.nickburkehomes.com/mylistings.html, if you click MLS search you will see that the page that displays looks nothing like the overall look of the site (its a PHP program), hence the need for frames.

I was trying to redesign the site using photoshop (isn't this the cadillac of design?) because of the rollover links that you can make and other advanced techniques.  I was not aware you could not do something seemingly as simple as making a link redirect into a space on the same page.  (like when using frames)

You say "both very good image maniulation tools but they are not web site creation tools."  I'm not sure how you can say that when a large portion of the functions of both programs are for exactly that, web page design.  Slices, rollover links, even dozens and dozens of buttons to choose from for page design.  You can even choose .jpeg or .gif when optimizing the page so it will load faster and of course it tells you exactly how fast each slice will load based on the format choosen.

I'm just saying..........both are clearly used for this purpose.  Additionally, one cannot be used without the other when designing a web page.

I will consider a non-frames design.

thanks for your time and help.

cheers



 

RE: Imageready button (slice a) displays in another slice (slice b)

CODE

I will consider a non-frames design
Good move

CODE

isn't this the cadillac of design
No!
Photoshop is my favorite picture editing tool but it is not for creating whole web sites. You mention the fact that it can produce HTML elements for web page design, these elements are used as seperate entities, building blocks if you like to create a page. There are many other programs out there which pretend to create web pages, MS Word, MS Excel, Publisher etc. but the pages they produce are usually bloated code based on old technology
You are also missing a very important point here and that is how search engines see graphic sites. Your site made up of pictures appears to have no content, to a search engine so its' rankings will suffer. A site made up of relevant text will always rank higher.
I have done a quick mock up of your page using CSS and individual images. Compare the amount of source code in your page with that.
 

Keith
www.studiosoft.co.uk

RE: Imageready button (slice a) displays in another slice (slice b)

(OP)
blushing
and so alternative text is not sufficient to make up for the balance which is too heavy on graphics. (hadn't put alt text in yet)  

I was made to believe you could do it all with photoshop/imageready.  Now i see your point and do I appreciate your having made it!!! My site looked purty though didn't it!  Your mock up has made it clear to me, thank you
(OMG, i have photoshop OCD....LOL)

Actually, I am relieved, this answers a lot of other questions...

So what i should be doing is making JUST my buttons and certain graphics in photoshop, but not whole pages.

That's what sux about web design, you never know it all!

thank you
thank you
thumbsup2

 

RE: Imageready button (slice a) displays in another slice (slice b)

Same goes in all walks of life but for me the fun part is learning new ways of doing things. I spent many years designing websites using tables and it was a hard habit to break when CSS came along.
Photoshop and Image Ready are great tools if you accept the fact that they cannot do everything. The page code which Image Ready produces is sometimes very useful even if it does use tables for layout. I designed a site recently which uses a coloured spotlight effect to highlight each top menu item. After creating the slices and sorting out the layers etc. I just pasted the rollover code into a page and the header section was sorted. There are no tables on the rest of the site at all.

On a personal design note, I would tend to use smaller pictures and fonts in the left column and menus, they tend to just look neater.

Good luck with your venture.

Keith
www.studiosoft.co.uk

RE: Imageready button (slice a) displays in another slice (slice b)

(OP)

I think i need more than luck and you have put me on the path in the right direction.

As a last suggestion, on the mock up you created, what did you do, create the buttons in photoshop and put it all together with CSS?

I don't know CSS, but I have a feeling you are going to tell me to learn it.  Any ideas on how to go about this?

I have also book marked your site.  I may be in need of your services in the future.  thanks again and have a great day!
 

RE: Imageready button (slice a) displays in another slice (slice b)

CODE

what did you do, create the buttons in photoshop and put it all together with CSS?
The backs of the buttons are created with Photoshop and the appearance of the text in normal and hover states are controlled with CSS.

The easiest way to learn CSS is to have a go and see what happens. A good starting point is the tutorial at w3schools (link below) but it is a steep learning curve.

Tek-tips forum - HTML, XHTML & CSS (Cascading Style Sheets) is a good place to ask questions but be sure to do some homework first and try to solve any problems you have yourself. If you hit a problem, do a search to see if the problem has been asked before. Looking at other people's questions also helps.

CSS is best described as formatting and positioning areas of the screen (DIVS) in relation to each other.

This is the style sheet I created for the example, it was called style.css and is referred to in the header of the index page.

CODE

.fullpage{
    width:990px;
    height:900px;
    background-color:#d78a02;
}

.lcol{
    width:322px;
    height:900px;
    float:left;
}

.mainbody{
    width:658px;
    height:900px;
    line-height:15px;
    font-size:12px;
    font-family: Verdana, sans-serif;
    text-decoration: none;
    font-weight:normal;
    font-style:normal;
    text-align:center;
    padding:10px;
    color: #777777;
    float:left;
    background-image: url("pagback.jpg");
}
.mainbody a{
    font-size:12px;
    font-family: Verdana, sans-serif;
    text-decoration: none;
    font-weight:bold;
    font-style:normal;
    color: #123456;
}
.mainbody a:hover{
    font-size:12px;
    font-family: Verdana, sans-serif;
    text-decoration: none;
    font-weight:bold;
    font-style:normal;
    color: #f00;
}
.mainbody h1{
    font-size:16px;
    font-weight:bold;
    letter-spacing:4px;
    color: #74a9ce;
}
.mainbody h2{
    font-size:12px;
    font-weight:bold;
    color: #000;
}

.mainbody h4{
    font-size:12px;
    font-weight:bold;
    color: #000;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #ddd;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #ddd;
    
}

.mainbody i{
    font-size:10px;
    font-weight:normal;
    color: #666666;
    font-style:italic;
}

.button{
    height:25px;
    width:120px;
    float:left;
    margin-left:5px;
    padding-top:4px;
    text-align:center;
    background-image: url("but1.jpg");
}
.button a:{
    font-size:12px;
    font-family: Verdana, sans-serif;
    text-decoration: none;
    font-weight:normal;
    font-style:normal;
    color: #FFF;
}
.button a:hover{
    font-size:12px;
    font-family: Verdana, sans-serif;
    text-decoration: none;
    font-weight:bold;
    font-style:normal;
    color: #f00;
}
.panel{
    width:600px;
    height:184px;
    padding:20px;
    background-image: url("panel.jpg");

}
If you match the areas of the screen with the command in the stylesheet, you can change values and see what happens.

(Before you change anything - make at least 1 back up!!!!!)
Good luck

Keith
www.studiosoft.co.uk

RE: Imageready button (slice a) displays in another slice (slice b)

(OP)
I will use your example above as a starting point to learn CSS.  However, this is way beyond my understanding and the learning curve does seem steep.  You have been very generous with your time and I am grateful.  I will review the sources you have given and hopefully make some sense of it!  thanks very much, you have helped me move past my hurdle, right into a road block LOL.  It's a good thing, I was wasting way too much time trying to make photoshop do 'everything'.  

T.H.A.N.K  Y.O.U!

 

RE: Imageready button (slice a) displays in another slice (slice b)

It gets easier but as you progress you just do more complicated things.

Keith
www.studiosoft.co.uk

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login
Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close