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

Question

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

sliceitup (TechnicalUser)

(OP)

30 Jun 08 13:49

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!

audiopro (Programmer) · Answer 1 · 2008-06-30 14:26:58

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

sliceitup (TechnicalUser) · Answer 2 · 2008-06-30 14:35:09

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.

audiopro (Programmer) · Answer 3 · 2008-06-30 15:13:02

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

sliceitup (TechnicalUser) · Answer 4 · 2008-06-30 15:24:30

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.

audiopro (Programmer) · Answer 5 · 2008-06-30 15:51:08

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

sliceitup (TechnicalUser) · Answer 6 · 2008-06-30 16:19:02

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

audiopro (Programmer) · Answer 7 · 2008-07-01 04:27:31

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

http://www.studiosoft.co.uk/nick/

sliceitup (TechnicalUser) · Answer 8 · 2008-07-01 10:07:45

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

audiopro (Programmer) · Answer 9 · 2008-07-01 10:42:07

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

sliceitup (TechnicalUser) · Answer 10 · 2008-07-01 13:13:55

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!

audiopro (Programmer) · Answer 11 · 2008-07-01 14:31:24

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

http://www.w3schools.com/Css/default.asp

sliceitup (TechnicalUser) · Answer 12 · 2008-07-02 10:38:37

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!

audiopro (Programmer) · Answer 13 · 2008-07-02 10:48:11

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

Keith
www.studiosoft.co.uk

Come Join Us!

Posting Guidelines

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