Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

How do I make my sliced photoshop web template 'liquid' in Dreamweaver CS3?

Posted on 2009-05-06
11
1,320 Views
Last Modified: 2013-12-02
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
Comment
Question by:KevinBurke
  • 3
  • 2
  • 2
  • +2
11 Comments
 
LVL 18

Expert Comment

by:Philip_Spark
ID: 24317661
Please do
0
 
LVL 38

Expert Comment

by:lherrou
ID: 24317703
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
 

Author Comment

by:KevinBurke
ID: 24317948
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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 38

Accepted Solution

by:
lherrou earned 64 total points
ID: 24318145
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
 

Author Comment

by:KevinBurke
ID: 24318553
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
 
LVL 18

Assisted Solution

by:Philip_Spark
Philip_Spark earned 62 total points
ID: 24318752
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
 
LVL 38

Expert Comment

by:lherrou
ID: 24318831
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
 
LVL 3

Assisted Solution

by:DragKng
DragKng earned 62 total points
ID: 24332024
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
 
LVL 2

Assisted Solution

by:miyosia
miyosia earned 62 total points
ID: 24431697
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
 
LVL 3

Expert Comment

by:DragKng
ID: 25045021
Thanks!  Looks like the original author hasn't been back to the thread.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Add text with photoshop 6 60
Change the text in Photoshop 6 80
Font Type used in Photoshop 5 67
Photoshop 4x6 printing difficulty 7 78
When designing and editing page layouts in inDesign, fonts can become messy without the help of paragraph styles. How many times have you re-read through a document you created and noticed a sentence in the middle of a paragraph happened to be a dif…
Read about why website design really matters in today's demanding market.
In this tutorial viewers will learn how to select a color range in Photoshop and how to easily apply them to multiple projects. Open an image for editing in Photoshop: Open the select Color Range Selection tool by going to Select > Color Range: Sele…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question