KevinBurke
asked on
How do I make my sliced photoshop web template 'liquid' in Dreamweaver CS3?
We have designed a web page in photoshop CS3 and we want the site to be liquid in the sense that if we add more content to the page, the whole page will expand to accommodate this. We tried opening a Dreamweaver liquid template but found it limiting as our page is quite detailed with lot's of slices, and we found it problematic to import all the images/slices into the template as it had far less slices. IS IT POSSIBLE TO ADD THE CSS THAT ALLOWS THE DREAMWEAVER TEMPLATE TO BE LIQUID TO OUR TEMPLATE?
I can send a jpeg of our page design if required.
I can send a jpeg of our page design if required.
Philip_Spark
Please do
KevinBurke,
Not every template can be liquid, but most can be. Post your site design, and if possible your CSS & HTML code.
Cheers,
LHerrou
Not every template can be liquid, but most can be. Post your site design, and if possible your CSS & HTML code.
Cheers,
LHerrou
ASKER
I've attached an unsliced low res jpeg so you can see the design. I've also added the CSS :0)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kevinburkeguitar</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="site_layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #666666;
}
-->
</style>
<link href="site_content.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- ImageReady Slices (Kevinburkeguitar.psd) -->
<div id="site_layout">
<table width="976" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="3" rowspan="3">
<img id="stripey_guitar" src="images/stripey_guitar.jpg" width="148" height="170" alt="stripey_guitar_guitar_lessons_stockport" /></td>
<td colspan="19">
<img id="kevinburkeguitar_logo" src="images/kevinburkeguitar_logo.jpg" width="708" height="115" alt="kevinburkeguitar.com_guitar_lessons_stockport" /></td>
<td rowspan="3">
<img id="kevin_burke_live_picture_banner" src="images/kevin_burke_live_picture_ba.jpg" width="119" height="170" alt="kevin_burke_live_picture_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="115" alt="" /></td>
</tr>
<tr>
<td colspan="6" rowspan="2">
<img id="kevinburkeguitar_04" src="images/kevinburkeguitar_04.jpg" width="84" height="55" alt="" /></td>
<td rowspan="6">
<img id="about_me_guitar_knob" src="images/about_me_guitar_knob.jpg" width="95" height="92" alt="about_me_guitar_knob_guitar_lessons_stockport" /></td>
<td rowspan="6">
<img id="kevinburkeguitar_06" src="images/kevinburkeguitar_06.jpg" width="22" height="92" alt="" /></td>
<td rowspan="6">
<img id="youtube_guitar_knob" src="images/youtube_guitar_knob.jpg" width="95" height="92" alt="youtube_guitar_knob_guitar_lessons_stockport" /></td>
<td rowspan="6">
<img id="kevinburkeguitar_08" src="images/kevinburkeguitar_08.jpg" width="19" height="92" alt="" /></td>
<td colspan="2" rowspan="6">
<img id="myspace_guitar_knob" src="images/myspace_guitar_knob.jpg" width="95" height="92" alt="myspace_guitar_knob_guitar_lessons_stockport" /></td>
<td rowspan="6">
<img id="kevinburkeguitar_10" src="images/kevinburkeguitar_10.jpg" width="22" height="92" alt="" /></td>
<td rowspan="6">
<img id="facebook_guitar_knob" src="images/facebook_guitar_knob.jpg" width="95" height="92" alt="facebook_guitar_knob_guitar_lessons_stockport" /></td>
<td colspan="4">
<img id="kevinburkeguitar_12" src="images/kevinburkeguitar_12.jpg" width="180" height="29" alt="" /></td>
<td rowspan="2">
<img id="kevin_burke_live_picture_banner014" src="images/kevin_burke_live_picture-14.jpg" width="1" height="55" alt="kevin_burke_live_picture_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="29" alt="" /></td>
</tr>
<tr>
<td rowspan="5">
<img id="kevinburkeguitar_14" src="images/kevinburkeguitar_14.jpg" width="25" height="63" alt="" /></td>
<td colspan="2" rowspan="3"><img id="blog_link" src="images/blog_link.jpg" width="127" height="47" alt="blog_guitar_lessons_stockport" /></td>
<td rowspan="5">
<img id="kevinburkeguitar_16" src="images/kevinburkeguitar_16.jpg" width="28" height="63" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="26" alt="" /></td>
</tr>
<tr>
<td colspan="9">
<img id="green_line_under_guitar" src="images/green_line_under_guitar.jpg" width="232" height="6" alt="green_line" /></td>
<td colspan="2" rowspan="4">
<img id="kevinburkeguitar_18" src="images/kevinburkeguitar_18.jpg" width="120" height="37" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt="" /></td>
</tr>
<tr>
<td colspan="7" rowspan="2">
<img id="mailing_list" src="images/mailing_list.jpg" width="192" height="23" alt="mailing_list_guitar_lessons_stocport" /></td>
<td rowspan="44">
<img id="green_verticle_line" src="images/green_verticle_line.jpg" width="6" height="824" alt="green_virticle_line_mailing_list_submit_arrow_guitar_lessons_stockport" /></td>
<td rowspan="3">
<img id="kevinburkeguitar_21" src="images/kevinburkeguitar_21.jpg" width="34" height="31" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="15" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img id="kevinburkeguitar_22" src="images/kevinburkeguitar_22.jpg" width="127" height="16" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img id="kevinburkeguitar_23" src="images/kevinburkeguitar_23.jpg" width="13" height="62" alt="" /></td>
<td colspan="3" rowspan="2">
<img id="mailing_list_email_entry_white_box" src="images/mailing_list_email_entry_wh.gif" width="168" height="25" alt="mailing_list_email_entry_white_box_guitar_lessons_stockport" /></td>
<td colspan="2" rowspan="2">
<img id="kevinburkeguitar_25" src="images/kevinburkeguitar_25.jpg" width="11" height="25" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td colspan="15" rowspan="39"><div id="site_content">This is kevinburkeguitar.com</div></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img id="mailing_list_text_block" src="images/mailing_list_text_block.jpg" width="138" height="37" alt="mailing_list_text_block_mailing_list_submit_arrow_guitar_lessons_stockport" /></td>
<td colspan="3">
<img id="mailing_list_submit_arrow" src="images/mailing_list_submit_arrow.jpg" width="41" height="37" alt="mailing_list_submit_arrow_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="37" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="private_guitar_tuition_link" src="images/private_guitar_tuition_link.jpg" width="192" height="28" alt="private_guitar_tuition_link_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="28" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="kevinburkeguitar_30" src="images/kevinburkeguitar_30.jpg" width="192" height="4" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="products_link" src="images/products_link.jpg" width="192" height="26" alt="products_link_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="26" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="kevinburkeguitar_32" src="images/kevinburkeguitar_32.jpg" width="192" height="5" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="forum_link" src="images/forum_link.jpg" width="192" height="26" alt="forum_link_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="26" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="kevinburkeguitar_34" src="images/kevinburkeguitar_34.jpg" width="192" height="4" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt="" /></td>
</tr>
<tr>
<td colspan="6">
<img id="free_guitar_lessons_header" src="images/free_guitar_lessons_header.jpg" width="191" height="22" alt="free_guitar_lessons_header_guitar_lessons_stockport" /></td>
<td>
<img id="kevinburkeguitar_36" src="images/kevinburkeguitar_36.jpg" width="1" height="22" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="riff_of_the_week_link" src="images/riff_of_the_week_link.jpg" width="192" height="23" alt="riff_of_the_week_link_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt="" /></td>
</tr>
<tr>
<td colspan="6">
<img id="the_basics_link" src="images/the_basics_link.jpg" width="191" height="24" alt="the_basics_link_guitar_lessons_stockport" /></td>
<td>
<img id="kevinburkeguitar_39" src="images/kevinburkeguitar_39.jpg" width="1" height="24" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="technique_link" src="images/technique_link.jpg" width="192" height="23" alt="technique_link_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="kevinburkeguitar_41" src="images/kevinburkeguitar_41.jpg" width="192" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td>
<img id="kevinburkeguitar_42" src="images/kevinburkeguitar_42.jpg" width="1" height="22" alt="" /></td>
<td colspan="5">
<img id="scales_link" src="images/scales_link.jpg" width="190" height="22" alt="scales_link_guitar_lessons_stockport" /></td>
<td>
<img id="kevinburkeguitar_44" src="images/kevinburkeguitar_44.jpg" width="1" height="22" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="chords_link" src="images/chords_link.jpg" width="192" height="23" alt="chords_link_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="arpeggios_link" src="images/arpeggios_link.jpg" width="192" height="21" alt="arpeggios_link_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt="" /></td>
</tr>
<tr>
<td colspan="6" rowspan="2">
<img id="rhythm_link" src="images/rhythm_link.jpg" width="191" height="24" alt="rhythm_link_guitar_lessons_stockport_kevin_burke_guitar" /></td>
<td>
<img id="arpeggios_link049" src="images/arpeggios_link-49.jpg" width="1" height="1" alt="arpeggios_link_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td>
<img id="kevinburkeguitar_49" src="images/kevinburkeguitar_49.jpg" width="1" height="23" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="lead_link" src="images/lead_link.jpg" width="192" height="22" alt="lead_link_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="songs_link" src="images/songs_link.jpg" width="192" height="24" alt="songs_link_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="riffs_link" src="images/riffs_link.jpg" width="192" height="22" alt="riffs_link_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="theory_link" src="images/theory_link.jpg" width="192" height="24" alt="theory_link_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="kevinburkeguitar_54" src="images/kevinburkeguitar_54.jpg" width="192" height="5" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="resources_header" src="images/resources_header.jpg" width="192" height="20" alt="resources_header_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="kevinburkeguitar_56" src="images/kevinburkeguitar_56.jpg" width="192" height="2" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="blank_tab_sheets" src="images/blank_tab_sheets.jpg" width="192" height="22" alt="blank_tab_sheets_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt="" /></td>
</tr>
<tr>
<td colspan="6" rowspan="2">
<img id="blank_chord_sheets" src="images/blank_chord_sheets.jpg" width="191" height="22" alt="blank_chord_sheets_guitar_lessons_stockport" /></td>
<td>
<img id="blank_tab_sheets060" src="images/blank_tab_sheets-60.jpg" width="1" height="1" alt="blank_tab_sheets_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td>
<img id="kevinburkeguitar_60" src="images/kevinburkeguitar_60.jpg" width="1" height="21" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="neck_diagram" src="images/neck_diagram.jpg" width="192" height="25" alt="neck_diagram_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="25" alt="" /></td>
</tr>
<tr>
<td colspan="6">
<img id="blank_neck_diagram" src="images/blank_neck_diagram.jpg" width="191" height="22" alt="blank_neck_diagram_guitar_lessons_stockport" /></td>
<td>
<img id="kevinburkeguitar_63" src="images/kevinburkeguitar_63.jpg" width="1" height="22" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="miscellaneous_header" src="images/miscellaneous_header.jpg" width="192" height="26" alt="miscellaneous_header_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="26" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="kevinburkeguitar_65" src="images/kevinburkeguitar_65.jpg" width="192" height="2" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="choosing_a_guitar_link" src="images/choosing_a_guitar_link.jpg" width="192" height="23" alt="choosing_a_guitar_link_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt="" /></td>
</tr>
<tr>
<td colspan="6">
<img id="choosing_an_amplifier_link" src="images/choosing_an_amplifier_link.jpg" width="191" height="22" alt="choosing_an_amplifier_link_guitar_lessons_stockport" /></td>
<td rowspan="3">
<img id="kevinburkeguitar_68" src="images/kevinburkeguitar_68.jpg" width="1" height="46" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt="" /></td>
</tr>
<tr>
<td colspan="6">
<img id="kevinburkeguitar_69" src="images/kevinburkeguitar_69.jpg" width="191" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="6">
<img id="gear_reviews_link" src="images/gear_reviews_link.jpg" width="191" height="23" alt="gear_reviews_link_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="gallery_link" src="images/gallery_link.jpg" width="192" height="21" alt="gallery_link_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt="" /></td>
</tr>
<tr>
<td colspan="7">
<img id="contact_me_link" src="images/contact_me_link.jpg" width="192" height="24" alt="contact_me_link_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt="" /></td>
</tr>
<tr>
<td colspan="7" rowspan="3">
<img id="parchment_bottom" src="images/parchment_bottom.jpg" width="192" height="111" alt="parchment_bottom_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="90" alt="" /></td>
</tr>
<tr>
<td colspan="6" rowspan="2">
<img id="main_page_black_background075" src="images/main_page_black_backgrou-75.gif" width="285" height="21" alt="main_page_black_background_guitar_lessons_stockport" /></td>
<td colspan="5">
<img id="copyright_kevin_burke_footer" src="images/copyright_kevin_burke_foote.gif" width="225" height="19" alt="copyright_kevin_burke_footer_guitar_lessons_stockport" /></td>
<td colspan="4" rowspan="2">
<img id="main_page_black_background077" src="images/main_page_black_backgrou-77.gif" width="267" height="21" alt="main_page_black_background_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="19" alt="" /></td>
</tr>
<tr>
<td colspan="5">
<img id="main_page_black_background078" src="images/main_page_black_backgrou-78.gif" width="225" height="2" alt="main_page_black_background_guitar_lessons_stockport" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="135" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="30" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="34" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="95" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="22" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="95" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="19" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="20" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="75" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="22" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="95" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="25" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="119" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="28" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="119" height="1" alt="" /></td>
<td></td>
</tr>
</table>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
We originally sliced the photoshop template following an online youtube tutorial. We were unaware that we were working in tables in dreamweaver and thought that we were applying css to our various sliced images. We chose to slice them as according to the tutorial it allows greater freedom once in dreamweaver. Were we wrong to do this? Or should we have used less slices instead?
So far we do not have a preference as to how to work in dreamweaver, all we have is a template created in photoshop, and a large lack of knowledge in dreamweaver.
Going back to the photoshop document, what would you recommend we do to bring it into dreamweaver to make it as easy as possible for us to create a webpage from?
So far we do not have a preference as to how to work in dreamweaver, all we have is a template created in photoshop, and a large lack of knowledge in dreamweaver.
Going back to the photoshop document, what would you recommend we do to bring it into dreamweaver to make it as easy as possible for us to create a webpage from?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Not being a Dreamweaver user, I can't give you direction on that - I am a purist, hand-coding HTML and CSS. Philip_Spark's walk-through's look like a great start. I agree on doing the navigation with pure CSS and background images, it'll be a lot simpler and less code once it's done.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Thanks! Looks like the original author hasn't been back to the thread.