Solved

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

Posted on 2009-05-06
11
1,317 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Change background with Photoshop 3 60
Looking for font BAU LF Bold 3 103
Adobe Acrobat Pro: How to remove layers? 7 94
Text Transformation using ActionScript 3 5 115
In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
The ability to automatically add page numbers to a layout is one of the many easy, convenient features InDesign has to offer. There are many reasons why you would want to automatically generate page numbers in your next project, so whether it’s a ma…
In this tutorial viewers will learn how to correct colors in Photoshop using the Levels adjustment Open a photo for editing in Photoshop: Begin by creating a new adjustment layer by going to Layer > New Adjustment Layer > Levels: Select "OK" on the …
Make a selection using the pen tool to trace the selection. Then alter the color of the selection by using the color balance option in Adobe Photoshop.

895 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now