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

sliceitup · Jun 30, 2008

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 · Jun 30, 2008

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

http://www.studiosoft.co.uk

sliceitup · Jun 30, 2008

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 · Jun 30, 2008

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

http://www.studiosoft.co.uk

sliceitup · Jun 30, 2008

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 · Jun 30, 2008

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

http://www.studiosoft.co.uk

sliceitup · Jun 30, 2008

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 · Jul 1, 2008

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

sliceitup · Jul 1, 2008

:~/
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 · Jul 1, 2008

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

http://www.studiosoft.co.uk

sliceitup · Jul 1, 2008

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 · Jul 1, 2008

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

sliceitup · Jul 2, 2008

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 · Jul 2, 2008

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

Keith

http://www.studiosoft.co.uk

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

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

sliceitup

Technical User

audiopro

Programmer

sliceitup

Technical User

audiopro

Programmer

sliceitup

Technical User

audiopro

Programmer

sliceitup

Technical User

audiopro

Programmer

sliceitup

Technical User

audiopro

Programmer

sliceitup

Technical User

audiopro

Programmer

sliceitup

Technical User

audiopro

Programmer

Similar threads

Part and Inventory Search

Sponsor