Solved

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

Posted on 2009-05-06
11
1,314 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction When sharing photos, especially via e-mail, the large resolution images that most cameras take today make for extremely large file sizes. The time required to upload these files to forums, send in e-mails, post to blogs or even placi…
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…
In this tutorial viewers will learn how to create a postcard text effect in Photoshop and get an introduction to Layer masks Use magic wand to select the "inner" part of the letters: Create a new layer and fill the selected area with black: Go back …
In this tutorial viewers will learn how to increase their history states in Photoshop To undo more than one history state, use Ctrl + Alt + Z, not just Ctrl + Z: View the History window by going to Window > History: The default number of history sta…

708 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

11 Experts available now in Live!

Get 1:1 Help Now