Slicing and optimising a template in PS CS3?

Hello, I am just working on a website design in photoshop but now I would like to slice and optimize the template in imageready but I've just noticed that ImageReady is not available any more? Could someone please suggest how I can slice the design up without using ImageReady? Would I need to use fireworks? Does anybody know where I can read some tutorials?
Thank you, Ryan

Photoshop CS3 is capable of slicing. You will find the slice tool in the tool bar.
Silk

Similar Messages

Slicing and optimising form ps to dw.

hello forumers.
id like to know since i like to design,would it be wise to do my layouts,btn,banners etc etc in ps and then export them to dreamweaer for further
functions?what are the pros and cons for this method?i seem to be getting too confused designing in dreamwevaer i cant place images and text where i want,but in ps i can design as i like.
thank you

Use your graphics apps for images only.
Use DW to build your HTML/CSS code and menus.
Image based menus suck and they're a real chore to change later when your site changes. Use CSS styled list menus instead. DW F1 (help) Spry vertical or horizontal menus.
It is very helpful to start new projects with a pre-built CSS layout. Give some thought to how you want your web pages to display before you dive in to the deep end.
Liquid (% based),
Fixed-width (px based)
Elastic-width (em based);
1-column, 2-column, 3-column or grid style. Choosing the right layout initially will greatly simplify placement of your page elements later.
New DW CS5 CSS Layouts -
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
EZ-CSS Layouts
http://EZ-CSS.org
Project Seven CSS Templates -
http://www.projectseven.com/products/
Creating your first web site in DW CS5 -
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

PLEASE HELP - Problem with 2 column fixed template in Dreamweaver CS3

I am trying to create a website using the 2 column fixed, right sidebar, header and footer html template in Dreamweaver CS3. I tried putting a picture in the right side bar as well as with in the main content or left portion of the page, and neither picture is showing up when I view it in any of the browsers I'm using.
I've made some minor changes in colors and sizing, but other than that no other changes. The pic I put in for the header is showing up just fine though.
Any help or advice to solve this issue would be greatly appreciated.
Thanks!!

Here is the base Dreamweaver code including the pic references that I'm trying to show on either side - when the browser opens, it only shows a blank space where the pics should be... let me know what you think. Thanks!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Temp Home</title>



<style type="text/css">

</style></head>
<body class="twoColFixRtHdr">
<div id="container">
<div id="header">
    <h1>Header</h1>
</div>
<div id="sidebar1">
    <h3>Sidebar1 Content</h3>
    
    <p>Right Side Bar Content - - -    </p>
    <p>Inserted pic below here</p>
    <p><img src="/images/Syntergy5.jpg" width="123" height="105" /></p>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>

    <p> </p>
</div>
<div id="mainContent">
    <h1> Main Content </h1>
    
    <p>Main Content - - </p>
    <p>inserted pic below here:</p>
    <p><img src="/images/Kelly1.jpg" width="285" height="236" /></p>
    <p> </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero. </p>
    
    <p>
      
    </p>
</div>
<br class="clearfloat" />
<div id="footer">
    <p>Footer</p>
</div>
</div>
</body>
</html>

Sliced and imported photoshop layout into dreamweaver

First, I am a newbie to all of this web design stuff and
coding and dreamweaver. I wanted to create my first website so here
I am. I went through 2 different tutorials (youtube and on
lynda.com) I created a layout in photoshop and I also sliced it. I
imported it into dreamweaver (CS3 by the way).....I somewhat
understand what I am doing. I did all the defining a site and I
clicked on the content box that I sliced and deleted it and
inserted a div / added the image that go there, then I made that
area editable. The layout I imported I saved it as a
template.Anyway, so basically I am clicking on each sliced area,
deleting it, and inserting a div there. No problem. Now, the sliced
areas that has about, home, contact, etc.....those I needed to make
as links/clickable images. So, before performing the delete then
inserting a div part.....I first clicked on the sliced area then at
the bottom of the screen, where it says link, I did a point to
file, basically linked it. Now, when I preview it in the browser,
it displays boxes around the sliced navigation menu, which it is
nit suppose to. see here is a screen shot...
http://i36.tinypic.com/2eowewm.jpg
What did I do wrong? Why is it showing up in a table when I
didn't create it in a table? How can I remove that purple looking
table border?
Also, when I go to each of the sliced navigation menu, then
delete it and insert a div..... the image there...it will not let
me turn it into a link.
How do I turn my sliced navigation menu images into links. I
know I am doing something wrong but just don't know what it is. Is
there a code I can use or am I suppose to modify or insert
something? and how do I remove the box from around it?
What is an easy way? Is there a tutorial out there?
I want my layout to look like what I mocked up in photoshop.
Is there a way I can create the same layout in dreamweaver? The
problem isn't the background, it's trying to get the pink area in
the center of the lalayout. I didn't know how to do that so thats
why I tried the way of creating it in photoshop.
Please help

> youtube and on lynda.com
Regardless of what these tutorials lead you to believe, it is
the WRONG
approach. Read this to get some perspective -
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"missdrika" <[email protected]> wrote in
message
news:[email protected]...
> First, I am a newbie to all of this web design stuff and
coding and
> dreamweaver. I wanted to create my first website so here
I am. I went
> through 2
> different tutorials (youtube and on lynda.com) I created
a layout in
> photoshop
> and I also sliced it. I imported it into dreamweaver
(CS3 by the
> way).....I
> somewhat understand what I am doing. I did all the
defining a site and I
> clicked on the content box that I sliced and deleted it
and inserted a div
> /
> added the image that go there, then I made that area
editable. The layout
> I
> imported I saved it as a template.Anyway, so basically I
am clicking on
> each
> sliced area, deleting it, and inserting a div there. No
problem. Now, the
> sliced areas that has about, home, contact,
etc.....those I needed to make
> as
> links/clickable images. So, before performing the delete
then inserting a
> div
> part.....I first clicked on the sliced area then at the
bottom of the
> screen,
> where it says link, I did a point to file, basically
linked it. Now, when
> I
> preview it in the browser, it displays boxes around the
sliced navigation
> menu,
> which it is nit suppose to. see here is a screen shot...
>
>
http://i36.tinypic.com/2eowewm.jpg
>
> What did I do wrong? Why is it showing up in a table
when I didn't create
> it
> in a table? How can I remove that purple looking table
border?
>
> Also, when I go to each of the sliced navigation menu,
then delete it and
> insert a div..... the image there...it will not let me
turn it into a
> link.
>
> How do I turn my sliced navigation menu images into
links. I know I am
> doing
> something wrong but just don't know what it is. Is there
a code I can use
> or am
> I suppose to modify or insert something? and how do I
remove the box from
> around it?
>
> What is an easy way? Is there a tutorial out there?
>
> I want my layout to look like what I mocked up in
photoshop. Is there a
> way I
> can create the same layout in dreamweaver? The problem
isn't the
> background,
> it's trying to get the pink area in the center of the
lalayout. I didn't
> know
> how to do that so thats why I tried the way of creating
it in photoshop.
>
> Please help
>

DW 8 Templates in Dreamweaver CS3

Greetings,
I am currently working with a Dreamweaver template (Version
8) and I have recently installed Dreamweaver CS3 to check it out. I
wanted to update several pages with the updated template in CS3,
but when I tried, I got an error related to nested editable
regions. I checked out my code, and cleaned it up (it is strict
xhtml 1.0) and tried again. I didn't get the error, but none of the
pages are updated. Does somebody know why this could happen?

If you have made changes to a template page and those changes
are not
propagated to the respective child pages then only one of two
possibilities
exist:
1. Your changes were made to EDITABLE regions in the template
files, or
2. The site cache is corrupted, and can be fixed by using
SITE | Advanced >
Recreate Site Cache
Might one of those be the cause?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Melissa_Serrano" <[email protected]> wrote
in message
news:f7gk2r$k45$[email protected]..
> Greetings,
>
> I am currently working with a Dreamweaver template
(Version 8) and I have
> recently installed Dreamweaver CS3 to check it out. I
wanted to update
> several
> pages with the updated template in CS3, but when I
tried, I got an error
> related to nested editable regions. I checked out my
code, and cleaned it
> up
> (it is strict xhtml 1.0) and tried again. I didn't get
the error, but none
> of
> the pages are updated. Does somebody know why this could
happen?
>

Viewing new template in dreamweaver cs3 reverst to front page ??

When i save a new template in Dreamweaver CS3 and then try to preview in IExploer it asks me "do you wnat to open or save this file? when i select either it reverst to my old MS Front Page editor

From their website:
" Adobe Flash (version 8 or higher) is required to edit the
FLA file.
- Use the source codes at your own risk after downloading and
flashmo.com is
not responsible for any bugs or errors caused by
ActionScripts."
Do you own Flash? Are you familliar with action scripts? If
not, then you
probably want to start with a plain html template and learn
how to code html
and CSS. Flash sites look nice but they are not friendly for
Search Engines
or users who don't have flash player installed on their
system.
Here are some on-line tutorials to help you get started with
html and CSS
code:
www.w3schools.com (free)
www.Lynda.com (pay videos)
Adobe help - "Getting Started"
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"jdbcmcbride" <[email protected]> wrote in
message
news:ftr2vf$i4q$[email protected]..
> I am a first-time user of DreamWeaver and am currently
learning how to
build a
> website with the Adobe HTML article that they have.
However, I found a
flash
> template that I downloaded as it is exactly what I want
to use for my
website.
> My problem is, I don't know how to make it work.
>
> The template is located at
http://www.flashmo.com/home
and it is the one
on
> page 5 called "037 Wooden". If anyone can tell me what
to do to get this
to be
> my website, I would really appreciate it.
>

Old Templates form CS2 & CS3

Hi, is it possible to get the standard templates of Dreamweaver CS 2 & CS3? In CS4 and newer, some templates changed and old templates are not longer available.

I need it only to see the "design-structure".
In the past i have had a website with based on the tepmlate i am looking for, and i used the template without any changig of the grafik. Just quite and simple.
The design was white and. I will use it as example for my new website.
I think it was a CSS-template.
I am not interessetd in the code of the template. You are right. The code ist very old and out of date.
When i see the template, i can code it with the up-to-date-Standard.
But i have to see the template, cause i cant completly remember in my mind.
Maybe it is possible, that someone has the old CS2 and CS3 installed an can extract the old templates for me and send them via Email oder put them on a server.
I hope you unterstand what i want to say.
I´m from Germany an my english is not so good.
Greetz
Karsten

Dw8 template breaks in cs3

First of let me state that I don't like nested
templates......... I have been using DW8 to do the template work...
it validates the css and the html in the w3c validator, ( i
also have to make it accessible) , i also validated it in cs 3
which it validates... it looks fine on the web, and in DW8, but not
in cs3.... is there a reason the divs are breaking and going all
over the place? is there any bugginess I need to be aware of? (i
didn't find anything yet)
The reason we use nested templates is there are 8 or more
people working on the web, there web exp. is
greatly varying and I have enough trouble trying to keep up
with them not overwriting work (even with a message pooping up
saying it is checked out..) The problem is most of them don't do
code and they really can't make changes because of the way the divs
are all over the place.... when i detach the template however
everything is perfect... as far as I know it doesn't lose any code
when detached..... If I need to be more specific plz let me
know...

Let's see the page.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"jbmarlow" <[email protected]> wrote in
message
news:g279v1$iem$[email protected]..
> First of let me state that I don't like nested
templates......... I have
> been
> using DW8 to do the template work...
> it validates the css and the html in the w3c validator,
( i also have to
> make
> it accessible) , i also validated it in cs 3 which it
validates... it
> looks
> fine on the web, and in DW8, but not in cs3.... is there
a reason the divs
> are
> breaking and going all over the place? is there any
bugginess I need to be
> aware of? (i didn't find anything yet)
>
> The reason we use nested templates is there are 8 or
more people working
> on
> the web, there web exp. is
> greatly varying and I have enough trouble trying to keep
up with them not
> overwriting work (even with a message pooping up saying
it is checked
> out..)
> The problem is most of them don't do code and they
really can't make
> changes
> because of the way the divs are all over the place....
when i detach the
> template however everything is perfect... as far as I
know it doesn't lose
> any
> code when detached..... If I need to be more specific
plz let me know...
>

Hi I designed my website in Photoshop, sliced , and opened it in dreamweaver. I want a interactive s

Hi I designed my website in Photoshop, sliced , and opened it in dreamweaver. I want a interactive spry bar but when ever I try to insert it, I get gaps in my page.
Below is the complete code: http://www.coriemoment.com
<html>
<head>
<title>home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="auto" topmargin="auto" marginwidth="auto" marginheight="auto" margin:0;>

<table id="Table_01" width="1281" height="768" border="0" cellpadding="0" cellspacing="0">
          <tr>
                    <td colspan="6">
                              <img src="images/index_01.png" width="1280" height="220" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="220" alt=""></td>
          </tr>
          <tr>
                    <td rowspan="4">
                              <img src="images/index_02.png" alt="" width="414" height="548"></td>
                    <td rowspan="3">
                              <object width="564" height="423"><param name="movie" value="http://www.youtube.com/v/XbuQiJ6Sv_M?hl=en_US&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XbuQiJ6Sv_M?hl=en_US&version=3" type="application/x-shockwave-flash" width="564" height="423" allowscriptaccess="always" allowfullscreen="true"></embed></object></td>
                    <td colspan="3">
                              <img src="images/index_04.png" width="255" height="89" alt=""></td>
                    <td rowspan="4">
                              <img src="images/index_05.png" width="46" height="548" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="89" alt=""></td>
          </tr>
          <tr>
                    <td rowspan="2">
                              <img src="images/video_03-07.png" width="1" height="336" alt=""></td>
                    <td rowspan="3">
                              <img src="images/index_07.png" width="34" height="459" alt=""></td>
                    <td>
                              <script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
/*put your twitter id that people use to reply to you below. Mine is mhorning. If you only want to see the Tweets that you have Tweeted, then delete the part below that says- OR to:coriemoment */
search: 'from:coriemoment OR to:coriemoment',
   /*this is the duration in terms of seconds*/
interval: 30000,
   /*this is the title you want on your tweets*/
title: 'Corie Tweets',
subject: 'Send us your comments',
   /*setting width to 'auto' will adjust the width of your tweetbox to whatever is set on your div. You can change this to something like 500px if you want*/
width: 'auto',
height: 212,
theme: {
    shell: {
             /*this will change the background color of your tweetbox. It is currently yellow*/
            background: 'body p, body img, body embed, body object, body video{opacity:1 !important}',
      /*this will change the color of the text in your background*/
            color: 'fac935'
    tweets: {
             /*this will change the background color behind your tweets. It is currently white*/
            background: 'body p, body img, body embed, body object, body video{opacity:0.2 !important}',
       /*this will change the color of the text in your tweets. It is currently black*/
            color: '#000000',
       /*this will change the color of anything that is hyperlinked in your tweet. It is currently blue*/
            links: '#1985b5'
features: {
    scrollbar: false,
    loop: true,
    live: true,
    behavior: 'default'
}).render().start();
</script></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="302" alt=""></td>
          </tr>
          <tr>
                    <td rowspan="2">
                              <img src="images/index_09.png" width="220" height="157" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="34" alt=""></td>
          </tr>
          <tr>
                    <td colspan="2">
                              <img src="images/index_10.png" width="566" height="123" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="123" alt=""></td>
          </tr>
</table>

</body>
</html>

Very bad practice to just use image slices into your website.
Check out this tutorial to learn how to efficiently slice, dice and markup your design into an active HTML format - http://net.tutsplus.com/articles/news/slice-and-dice-that-psd/
Also, Spry - has been deprecated and is no longer officially supported by Adobe. http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
Consider using a jQuery menu.
-Sudarshan

How to set border lines in table and also in template in the smartforms ?

How to set border lines in table and also in template in the smartforms ?
As I have to create table with following detals
total row = 3
row1 = 3 column
row2 = 6 column
row3 = 9 column
for 2nd and 3rd row data to be fetched using coding.
so can anybody explain me what should i use
Table or Template ?
and I want the border like excel format.
Can anybody suggest me ?
Thanks
naresh

if the data is multiple i.e. line items choose table.
if the data is single i.e. fixed choose template.
Create table
> Draw u r no lines
> choose option select pattern
> select display framed patterns
Choose u r required one.
out lined, or full lined. u can choose option.
same procedure to be followed for template also.
with regards,
Kiran.G

Error while opening supplier/customer forms and payment manager templates

we are having 11.1.0.7 database and 12.1.1 E-business suite with 10.1.2.3 forms
user is getting
Error Page
You have encountered an unexpected error. Please contact the System Administrator for assistance.
while accessing supplier/customer forms and payment manager templates and this gets resolved after bouncing the application. the current instance is a staging one and this will be replicated to production so please help or suggest any solution or work around
thanks
pankaj

There should be a link on the error page for further details about the error. Can you post the contents of that error link page ?
Pl also check the Apache logs for any errors - see MOS Doc 419839.1 (How to enable Apache, OC4J and OPMN logging in Oracle Applications R12) for name and location of the Apache log files.
HTH
Srini

Allow "Signing" and "Creation of Template Pages" in Reader XI

Hi.
I have created a form in Adobe Pro XI that allows the (Reader XI) user to insert additional templates pages by clicking "button X". The form also provides the user a Digital Signature field to sign the document.
In order for the user to be able to use the Digital Signature field the file must be saved as a "Reader Extended PDF" with the "Enable More Tools" option. This however, disables the addional templates option.
Is there a way to allow for both "Signing" and "Creation of Template Pages" in a Reader document?
Thanks

Thanks GKaiseril. While I was hoping for some sort of option choice or Javascript I feared that would be the resonse.

Document Assembly and Creation of Template Pages?

What do “document assembly” and “creation of template pages” mean?
I am a print graphic designer who usually handles the printing for a particular client who does long reports. I also give them a low resolution PDF for email circulation and posting on their website. They are now want to use the PDF for other purposes such as creating PowerPoint presentations that they will do in house. Therefore they have asked me to unlock all the security options -- that quite frankly I never even dealt with. Specifically they want to “allow document assembly, commenting, signing, and creation of template pages.” Assembly, commenting and signing seem innocuous, but will document assembly and template pages have significance for me as a graphic designer? I'm not sure what these two functions are.

“document assembly” means the combination of documents.
“creation of template pages” is for the creation of template pages for forms

Editing and changing a template in Dreamweaver

Hi,
I'm using Dreamweaver, v.11.0 in Windows 7. I have a template with a bunch of web pages that use it. When I edit and save the template, it resaves all of the pages that use it (as it should). However, when someone who has used my site before opens one of those page, they get the page that has been previously cached, and they don't see the updated page or template. Is there a way to save the pages so that users will always see the up-to-date template and content?
Thanks,
Bob

Thanks Subhadeep and Murray,
This was very helpful in that I know there is nothing that can be done - except that for the most part, people will have restarted their browser and cleared the cache since the last time they visited this website. And then it should not be a problem.
Bob

I have a new laptop and I am trying to download CS3. The site on adobe gives an error message and the one I tried from this forum downloaded CS3 extended, so my serial number does not work. Does anyone have any suggestions. Regards Vicki

Hi,
I have a new laptop and I am trying to download CS3. The site on adobe gives an error message and the one I tried from this forum downloaded CS3 extended, so my serial number does not work. Does anyone have any suggestions. Regards Vicki

The trial is always extended. The serial number you enter determines whether it runs as standard or extended.
I'm getting through fine with that link, so it must be a browser issue or some such thing. Try another browser.

Slicing and optimising a template in PS CS3?

Similar Messages

Maybe you are looking for