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!
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)
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)
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)
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)
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)
CODE
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)
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
CODE
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)
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
RE: Imageready button (slice a) displays in another slice (slice b)
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)
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
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
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");
}
(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)
T.H.A.N.K Y.O.U!
RE: Imageready button (slice a) displays in another slice (slice b)
Keith
www.studiosoft.co.uk