Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1331
  • Last Modified:

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.
0
KevinBurke
Asked:
KevinBurke
  • 3
  • 2
  • 2
  • +2
4 Solutions
 
Philip_SparkCommented:
Please do
0
 
lherrouCommented:
KevinBurke,

Not every template can be liquid, but most can be. Post your site design, and if possible your CSS & HTML code.

Cheers,
LHerrou
0
 
KevinBurkeAuthor Commented:
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>

Open in new window

Kevinburkeguitar.jpg
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
lherrouCommented:
Here's the issue. You are doing this in Tables, and should be using CSS. First of all, CSS separates your content from your style, so in the long run it will make it easier to make tweaks to the style. Second, using CSS won't trap you into cell sizes as much, so you can have a more liquid site without having to do funny hacks. Third, it will be better in the long run for your SEO efforts.

The main fix is to make the parchment tiling downwards behind the menu, so that you don't have to do all those crazy table cells. Then put the menu in a single DIV (or cell, if you just have to stick to tables) and get rid of this craziness: <td colspan="15" rowspan="39">.

A good CSS/HTML programmer can probably do it all, using your template, in a couple of hours.
0
 
KevinBurkeAuthor Commented:
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?
0
 
Philip_SparkCommented:
Here's a walkthrough that may be of use or worth a look, it doesn't explain everything for your situation but  the gist might be helpful.

http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

http://css-tricks.com/video-screencasts/2-converting-a-photoshop-mockup-part-2-of-3

http://css-tricks.com/video-screencasts/3-converting-a-photoshop-mockup-part-3-of-3/

Your navigation seems pretty simple and would be adaptable to do with pure CSS and background image
0
 
lherrouCommented:
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.

0
 
DragKngCommented:
Agree with the above, you shouldn't need any "slices" really, just a jpg of the top part (logo), which you can set as a background, one arrow .gif and then the four  "knobs".

Use the two-column fluid layout (with header) and maybe footer too?

Set the jpg to  be the back ground of the header in your properties bar.  Then use the list item technique above to style your menu on the right hand side. Just place your email box above the list below.

why make one yourself when the code is everywhere - here is a site with a list of menus to choose from CSS and HTML provided
http://www.dynamicdrive.com/style/csslibrary/category/C2/ 

follow the tutorials linked above for the knobs... that's a longer explanation.
0
 
miyosiaCommented:
Slicing is good to give you baseline on how you can position each image object as HTML. But I agree with using CSS instead. What I usually do is identify first elements that you can tile, and you can load them as background using CSS which also helps in reducing download time since the image size is small. Once you have identified the tiled images you can start layouting them in HTML. Do not worry yet about the other objects in your page. Test if they will fill up all the areas in your page as you resize the browser window. You can tile the body - the cream portion and the black portion horizontally as your main background, as well as your header - you can choose the rightmost pixel going down (vertically upto the green portion) as your header background. so when the window width is larger than the header image, it will give you this feathered look at the end of your header image and the dark area fills up the rest of the page.

Then you can start filling up your page with the other images, say menu buttons. You can either insert them using  or tables. Well looking at your page since they are fixed on the left side (therefore no need for these to move around the page no matter what the window size is, you can use html tables for these.

as for the round buttons beside the blog, you can save them as .png to retain transparency and lay them out using
0
 
DragKngCommented:
Thanks!  Looks like the original author hasn't been back to the thread.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now