Need a good liquid layout tutorial

Hi,
Im starting a page which I plan to use a liquid layout. I think I would use the three column layout (middle widest) and I would like to have an image situated in the right column. When the browser window shrinks, i would like this image to basically stay in its spot so Im guessing I would have to resize it or something. Im not totally sure. I found a tutorial the other day which showed what to do with your images. This tutorial made three different sizes of a single image to accommodate different resolutions. This is what i am going to need
Can anyone point out a good tutorial that would have this information? Ive looked everywhere and cant seem to find one that has images involved
Thanks in advance

I don't think you need 3 separate images, if you are using a liquid or flexible layout, the image will adjust within the layout as will all the other content.
Here's an Adobe tutorial on liquid layout:
For a tutorial on fluid layouts
http://www.adobe.com/devnet/dreamweaver/articles/bk_dwcs4_mastering_css/bk_dwcs4 _mastering_css_04.pdf
and another from alistapart:
http://www.alistapart.com/articles/negativemargins/
Faux column technique:
http://www.alistapart.com/articles/fauxcolumns/
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://twitter.com/nadiap

Similar Messages

Need free good tutorial

Hi
I need a good tutorial about setting up flv playlist, with
thumbnails, full
screen button opltion and all thins in progressive download
mode
is there something like this for free?
thanks

Hi
Go to
here scroll thru the Archive
list you'll find what ya need.
Hope it helps

Need assistance with a liquid layout

Hi,
I made some posts yesterday about a liquid layout. I got a couple tutorials to go with but Im pretty lost. I designed my index page and now I need hand turning into a liquid layout. I have a very wide bg image, can it still be done with that? Also, I would like the building in the bottom right corner to stay in that position (to match up with the sun rays). Any help would be much appreciated.
Thanks in advance
<!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=iso-8859-1" />
<title>Hurry Print Imaging</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="background">
<div id="col1"> </div>
<div id="col2"><div id="logodiv" align="center"><img src="images/logo.png" alt="HurryPrint" longdesc="index.html" />
<div id="logotabdiv"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Location','','images/Location-DOWN.png',1)"><img src="images/Location-UP.png" width="85" name="Location" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Equipment','','images/Equipment-UP.png',1)"><img src="images/Equipment-DOWN.png" width="85" name="Equipment" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','images/Services-UP.png',1)"><img src="images/Services-DOWN.png" width="85" name="Services" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('History','','images/History-UP.png',1)"><img src="images/History-DOWN.png" width="85" name="History" /></a></div>
<div id="maincontenttabs"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Newsletters','','images/location/newsletters-UP.png',1)"><img src="images/location/newsletters-DOWN.png" alt="Inkjet" width="75" height="16" name="Newsletters" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Floorplan','','images/location/floorplan-UP.png',1)"><img src="images/location/floorplan-DOWN.png" alt="Colour" width="75" height="16" name="Floorplan" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Map','','images/location/map-UP.png',1)"><img src="images/location/map-DOWN.png" alt="Binding" width="75" height="16" name="Map" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','images/location/contact-UP.png',1)"><img src="images/location/contact-DOWN.png" alt="Docutech" width="75" height="16" name="Contact" /></a></div>
<div id="maincontent">
<br /><br />
<img src="images/hp-header.png" alt="HurryPrint" />
<br />
<p>Hurryprint has been upholding a longstanding family tradition for the last two decades by being a leader in providing innovative, quality printing. Owned and operated by Jamie Hurley since 1981, Hurryprint has earned a reputation for producing high quality work with quick and efficient turnaround.
At Hurryprint, we look forward to the future with enthusiasm, and eagerly anticipate providing our customers access to the most up-to-date electronic printing equipment. We are confident in our ability to supply our customers with the highest quality output available for their documents. By providing the necessary information and resources to facilitate digital file transfer, we will be constantly helping our clients to find new ways to express their thoughts and ideas in bold and creative ways.</p>
<img src="images/future-text.png" alt="At Hurry Print, the future is exciting" /> </div>
</div>
</div>
<div id="col3"><div class="buildingdiv"> </div>
</div>
<div id="footer"><img src="images/footertext.png" alt="Footer Text" /></div>
</div>
</body>
</html>
body {
    background-color:#32b8d3;
    margin:auto;
img {
    border:none;
#background {
    margin: auto;
    background-image:url(../images/bg.jpg);
    background-repeat:no-repeat;
    width:1024px;
    height:621px;
    border:#FFFFFF 2px solid;
#col1
    float: left;
    width: 20%;
    margin-left: 4%;
#col2
    float: left;
    width: 46%;
    margin-left: 4%;
#col3
    float: left;
    width: 20%;
    margin-left: 4%;
.buildingdiv {
    background-image:url(../images/building.png);
    width:196px;
    height:107px;
    margin-left:-30px;
    margin-top:410px;
#logodiv {
    position:relative; /* take out if needed */
    z-index:1;
#logotabdiv {
    margin-top:-15px;
    position:relative;
    z-index:-1;
#maincontenttabs {
    margin-top:20px;
#maincontent {
    margin-top:-5px;
    background-image:url(../images/blue-box.png);
    width:396px;
    height:351px;
    background-repeat:no-repeat;
    font-family:Arial, Helvetica, sans-serif;
    font-size:9pt;
    color:#0a3f8f;
#maincontent p {
    padding-left:10px;
    padding-right:10px;
#footer
    clear:both;
    margin-top:85px;
    text-align:right;
    float:right;
h2, p
    margin-left: 7px;
    margin-right: 7px;

Hey guys, I still need some help with my layout if anyone is willing. My code stands as it did yesterday. Didnt make any ground last night. Im starting to wonder if liquid layout is even the way to go. Thanks again in advance
body {
    background-color:#32b8d3;
    margin:auto;
    max-width:64.00em;
    max-height:38.81em;
img {
    border:none;
#background {
    /*margin: auto;*/
    background-image:url(../images/bg.jpg);
    background-repeat:no-repeat;
    width:1024px;
    height:621px;
    border:#FFFFFF 2px solid;
    bottom:15%;
    right:15%;
#col1
    float: left;
    width: 20%;
    margin-left: 4%;
#col2
    float: left;
    width: 46%;
    margin-left: 4%;
#col3
    float: left;
    width: 20%;
    margin-left: 4%;
.buildingdiv {
    background-image:url(../images/building.png);
    width:196px;
    height:107px;
    margin-left:-15%;
    margin-top:201%;
#logodiv {
    position:relative; /* take out if needed */
    z-index:1;
#logotabdiv {
    margin-top:-3%;
    position:relative;
    z-index:-1;
#maincontenttabs {
    margin-top:5%;
#maincontent {
    margin-top:-1%;
    background-image:url(../images/blue-box.png);
    width:396px;
    height:351px;
    background-repeat:no-repeat;
    font-family:Arial, Helvetica, sans-serif;
    font-size:9pt;
    color:#0a3f8f;
#maincontent p {
    padding-left:3%;
    padding-right:3%;
#footer
    clear:both;
    margin-top:8%;
    text-align:right;
    float:right;
body>
<div id="background">
<div id="col1"> </div>
<div id="col2"><div id="logodiv" align="center"><img src="images/logo.png" alt="HurryPrint" longdesc="index.html" />
<div id="logotabdiv"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Location','','images/Location-DOWN.png',1)"><img src="images/Location-UP.png" width="85" name="Location" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Equipment','','images/Equipment-UP.png',1)"><img src="images/Equipment-DOWN.png" width="85" name="Equipment" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','images/Services-UP.png',1)"><img src="images/Services-DOWN.png" width="85" name="Services" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('History','','images/History-UP.png',1)"><img src="images/History-DOWN.png" width="85" name="History" /></a></div>
<div id="maincontenttabs"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Newsletters','','images/location/newsletters-UP.png',1)"><img src="images/location/newsletters-DOWN.png" alt="Inkjet" width="75" height="16" name="Newsletters" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Floorplan','','images/location/floorplan-UP.png',1)"><img src="images/location/floorplan-DOWN.png" alt="Colour" width="75" height="16" name="Floorplan" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Map','','images/location/map-UP.png',1)"><img src="images/location/map-DOWN.png" alt="Binding" width="75" height="16" name="Map" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','images/location/contact-UP.png',1)"><img src="images/location/contact-DOWN.png" alt="Docutech" width="75" height="16" name="Contact" /></a></div>
<div id="maincontent">
<br /><br />
<img src="images/hp-header.png" alt="HurryPrint" />
<br />
<p>Hurryprint has been upholding a longstanding family tradition for the last two decades by being a leader in providing innovative, quality printing. Owned and operated by Jamie Hurley since 1981, Hurryprint has earned a reputation for producing high quality work with quick and efficient turnaround.</p>
<img src="images/future-text.png" alt="At Hurry Print, the future is exciting" /> </div>
</div>
</div>
<div id="col3"><div class="buildingdiv"> </div>
</div>
<div id="footer"><img src="images/footertext.png" alt="Footer Text" /></div>
</div>
</body>
</html>

Sizing confusion with Liquid Layout

Hello,
I am attempting my first site. I have read the Dreamweaver CS3 Missing Manual (and done the tutorials), so I have a grasp of Dreamweaver and it's powers, but by no means do I consider myself anything but a beginner.
I have chosen to create a liquid 2 column layout with header and footer using Adobe's layouts to get a handle on the basics. When it opens, it's default 100% size in DW is 969x530. When I shrink the browser, it shrinks too, which I know is obviously the nature of a liquid layout.
This is my question: how am I supposed to size my banner and images in Photoshop or Fireworks to fit into this layout if the sizing changes whenever I change my browser size? Do I use the default Adobe gave me and size my images around that, or should I make my document size smaller, say to 795x470 (832x624 maximized)?
Thanks for any help. This question may seem easy, but it's stopping me continuing on with the site.
Jen

You need to make your banner liquid as well, like the other gentleman said.
What might help to understand how this is done is by looking at websites the have liquid banners. Here's a web site I finished a few weeks ago:
www.aplusoutdoorcinema.com
If you right click on the marquee and choose view image, you will see that the main graphic is a fixed size. Then if you right-click on the stars to the right of the marquee and in the menu choose view background image, you will see a graphic of stars. This graphic is repeated diagonally across the banner (repeat-x). I used a min-width to keep the moon from crashing into the marquee (unfortunately, IE6 does not recognize the min-width property).
Often the background image that repeats across a banner is only 1 pixel wide if its just a color. My background image in the example I gave is wide because I needed a variety of stars
Here's a simpler example on CSS Zen Garden:
http://www.csszengarden.com/?cssfile=017/017.css
If you are not acquainted with CSS Zen Garden, it's a showcase for CSS sites and it also invites anyone to download the XHTML or the CSS. So you can download the css on this site, examine the code, and see how they did it.
If you read David McFarland's book, you are off to a great start.
Good luck,
John

Trouble with liquid layout...

Hi,
I am trying to layout a site with CSS in a liquid style. This
is the first time im using a liquid layout and find it pretty
confusing.... The site is
here. The problem im currently
having is the block of text and image in the main content area (in
white with the guy with the megaphone) looks different in Internet
Explorer and Firefox and i cant work out why this is. Firefox
places it higher up the page and explorer places it lower down the
page....
How can i get them to be the same distance from the top? Any
ideas?
Thanks....

Hello
You should validated your code. I think one of your problems
is that you might have a missing </div> tag. There are one or
two other easily repaired problems highlighted in the validator. I
think the bottom of your page needs to look like this:
<div id="footer">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">lessons</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">resources</a></li>
</ul>
</div>
</div>
</body>
</html>
If you want your page centered, you're missing margin: 0
auto; in your CSS for #wrapper; like so:
#wrapper {
background-color:#FFFFFF;
max-width:1000px;
min-width:810px;
padding:10px;
text-align:left;
width:90%;
margin: 0 auto;
You need to think whether using relative positioning is a
good idea if you don't need it. If you need to fiddle about with
placement of elements in your page I'd suggest researcing the float
property and the Box Model. There's plenty out there to read.
I add the caveat that I am clinging by my fingernails to the
level slightly above "Novice." I don't use relative positioning for
example, because I don't understand it!
Kind regards
Martin

Liquid Layout - aspect ratio of background

I am working on a new site with a liquid layout and I havent been able to find a way to keep the aspect ratio correct with the different sizes.
I wish it was as simple as
bgimg1._width = Stage.width;
bgimg1._height = Stage.height;
the image size im working with is 990x600 for a 1024 display.
I would like the image to be centered and never to have empty area, so if it needs to it would strech past the sides. Any help is really appriecated.
Thanks,
Randy

when you create the symbol, make sure that 0,0 is not the top left, but the center. for example in your case, the location of this image symbol would be -495 for x, and -300 for y coordinates.
Now that the image symbol is centered for itself, it is now time to center it on the stage. You can do that be finding out the center of the stage which is half of that.
Now you can set the coordinates of the symbol equal to the center of stage.
example, myPic.x = Stage.width/2.
Great, the symbol is now always centered. But how to make it scale? It depends on how you want it to scale. Scale when resizing the webpage, or just scale to fit once?
If it is just to scale to fit once, you can just play with the values until it fills the screen by setting myPic.scaleX = 1.2; //or greater. Have to do scaleY too.
If you are trying to make the background scale dynamically, you would first need to create a listener that will detect the change of the stage.
Inside that change handler, you can set the scale of the symbol based on how much the stage has changed. The stage would only change if the html wrapped around it is set to scale.
Hope this helps.

Help with spry menu bar in liquid layout

I need help getting a spry menu bar with a 6-item list to stay in place in a liquid layout. Trying to get it horizontally under the header image. I am new to web design (new to html and code: reading books, searching web, and doing tutorials for many hours now), using CS4, working on a mac. You can view my trial page on cc-tn.com. I would appreciate any help offered!

Problem stems from the fact that your page is looking for files contained on your local hard drive instead of the web site.
<script src="file:///Macintosh HD/Users/Allison/CC Web/Templates/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///Macintosh HD/Users/Allison/CC Web/Templates/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
In addition, the links to PDF files are pointing to your local hard drive.
p><a href="file:///Macintosh HD/Users/Allison/CC Web/Documents/Foundations_one-page_green.pdf">Foundations</a> is a grammar-stage program for students K4 through sixth grade. Parents attend morning classes with their children as trained tutors model the tools of learning facts from a variety of interesting subjects. Students also participate in science and fine arts projects and practice public speaking each week.</p>
<p><a href="file:///Macintosh HD/Users/Allison/CC Web/Documents/Essentials-One-page.pdf">Essentials</a> is a dialectic-stage program for students in third through sixth grade. Trained tutors model the dialectic tools of learning in English grammar, writing, and math drills. Emphasis is placed on the development of writing skills that will enable students to become effective communicators through the written word. Classes meet in the afternoon following lunch.</p>
<p><a href="file:///Macintosh HD/Users/Allison/CC Web/Documents/Challenge_one-page.pdf">Challenge A & B</a> are dialectic-stage programs for seventh and eighth graders. Emphasis is placed on group discussion as students become more independent learners. Students focus on logic and debate.</p>
Did you define a local site folder in DW before you began this project? Without this critical first step, DW cannot correctly manage assets for you.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Flex 3 AIR Liquid layout

Hai Freinds,
I have issue on Flex AIR liquid layout, actually i have an
WindowedApplication in which i have VBox(width:955, height:600) and
so on.., but i need it to be liquid layout, It could be great
helpful if any body help me
Thank you

Hai Freinds,
I have issue on Flex AIR liquid layout, actually i have an
WindowedApplication in which i have VBox(width:955, height:600) and
so on.., but i need it to be liquid layout, It could be great
helpful if any body help me
Thank you

Liquid layout CSS

Hello,
I want the content part of my website run the length of the
borwser but have the page background at the top and bottom of
content. (basically have the webpage appear as a banner the middle
of the screen ontop of a tiled bakground)
I have been experimenting and found if I put the left margin
-10pixels that side of the webpage appears as desired (body div
meets edge) but I can not work out how to make the right side do
the same.
Can some one suggest a tutorial that would help me with this
layout or offer me some helpful advice.
Thank you,
Shontelle

Liquid Layouts (% based) are not the easiest bad boys to work with. They become an unruly mess on ultra wide and ultra narrow displays.
Example of the Ugly. Resize viewport to 400px.
http://alt-web.com/TEMPLATES/3-col-liq-layout.shtml
The solution. http://alt-web.com/TEMPLATES/3-col-semi-liq-layout.shtml
Add min- and max-widths to your body. This is called a semi-liquid layout.
Nancy O.

Hi all ,i need a good documentation for a beginner in WORK FLOW ?

hi all ,
i need a good documentation for a beginner in WORK FLOW ?
please,try to send the attached documents as much as u can apart from giving the weblinks ?
hope you will send it soon ....
thanks & regards
vishnuvardhan k.v.

Hi
Developing a simple application using steps "User Decision" and "Mail"
Basic terminology used in the workflow:
The workflow definition is the set of rules that determine the path that the process takes. For example, how a purchase requisition is processed, from the initial request to the creation of the purchase order
A Workflow Instance, which is often simply referred to as the workflow, is a single workflow run. For example, the processing of a single purchase requisition for computers.
The Tasks are the steps in the process, which have to be performed either by people or automatically by the software. For example, to check for the availability of the spare computers in the company.
A Work item is the task instance that is performed as a single workflow step. For example, check that there are no spare computers available in the company.
Agents are the people who process the tasks (via the work items). For example, requisitioner and a member of the purchasing department.
Container is the place where all the data used in the workflow is collected.
Binding is the set of rules that define which data is passed to which part of the process.
Building a simple workflow application
The central tool for creating, displaying and processing a workflow is the workflow builder (Transaction SWDD). Within the workflow builder you can create all components of a workflow, including all the containers you need for getting the data from one step to another.
Generally, most of the workflows are started by an event (for example, when a material is created or when a new purchase requisition arrives). You define which data from this event needs to be passed to the workflow via binding.
However you can also start any workflow directly. Let us create a simple workflow and start the workflow directly, using the testing tools.
Call transaction SWDD. When the workflow builder is called for the first time, a newly created initial workflow definition appears or else last created workflow appears. In such cases you can opt to create a new workflow by pressing Create New Workflow(ctrl + shft + F5). The following screen appears.
The initial workflow screen has the following parts:
a. The start of the workflow definition, indicated by .
b. The end of the workflow definition, indicated by .
c. The area in which you insert the new workflow definition is indicated by .
Now select the undefined step and select Create step or double click the undefined step. Now among the different steps chose the User Decision by double clicking on it.
Developing a simple application using steps "User Decision" and "Mail"
Previous
Now enter the title for the user decision Please make a decision. Also enter the decision texts as Approve and Reject. On pressing enter, the outcome values default to the Decision texts but you can specify your own names, if desired. Now we need to select the agent. Agent is the person to whom the work item needs to be sent.. Since this is just a beginning, we would hardcode the user name. Select the User from the drop down list and enter the user name to whom the work item needs to be sent. In general, this type of agent assignment is not done. Agents are generally assigned using the expression, agent assignment rule or organization object (job, position etc.).
Now select Transfer and to graphic button. Following screen appears:
Now we need to include a mail step to be sent to the requestor. Now select the line Approve and do a right click. Different options on shown on the context menu. Select Create.
Now select the step Send Mail from the list.
Developing a simple application using steps "User Decision" and "Mail"
...Previous
Now enter the subject and the body of the message for the mail to be sent.
Do not change the recipients. Our mail is intended for the persons who triggered this workflow. &_WF_INITIATOR& contains the value who executed the workflow. Since this is a test object, we are using &_WF_INITIATOR&. But we wouldnt be using this variable in real time scenarios. We would discuss about this in the coming documents.
Now select Transfer and to graphic button.
A popup appears requesting for the abbreviation and the name for this task. Enter the same and press enter.
Now enter the package as local object and press enter.
Follow the steps 5 through 9 for the step Reject. The following screen appears:
Press SAVE to save the workflow application. You need to enter an abbreviation and name for your workflow as shown below. You can change any of these at any later point. After saving, a number is assigned to your workflow starting with WS, as shown below.
Developing a simple application using steps "User Decision" and "Mail"
...Previous
To execute the workflow, activate it by choosing the activate button.
Test the workflow by choosing Test. The following screen appears.
Now choose Execute to start the workflow.
Now the recipient would receive a work item in his SAP® inbox (Transaction SBWP).
Now execute the work item by pressing Execute. The following screen appears:
Choose one among Approve or Reject as part of the user decision. He can select the third option to retain the work item in his inbox and make the decision later. Now suppose that the recipient has chosen one of the first options. Now a mail would be sent to the requestor with the status of his request.
Creating a Container element
This document details about creation of a container element in workflow and using it in the step "Mail".
Pre-requisites:
It is assumed that the reader of this Tutorial is aware of creating a workflow definition with the step Mail. If not, please go through the document on creating the same available, by clicking here.
Steps:
1. Create a workflow definition using the transaction SWDD.
2. Lets create a container element for Carrier id. Click on the Workflow Container on the left side of the screen (as shown in the screenshot below):
3. Now double-click on Double-Click to Create
4. Enter the details pertaining to CARRID here.
5. Click on tab Properties and select Import.
6. Click on Confirm (Enter).
7. Now the element created could be seen on the left side, below the Workflow Container.
Creating a Container element
Previous
1. Create a Mail step by double-clicking on Undefined step in the workflow.
2. Enter the recipient details in the Recipients box.
3. In the subject line, enter Carrid value entered is: and click on Insert Expression.
4. Select the element Carrid from the list.
5. Similarly enter the content in the Body area.
6. Save and activate the application.
Testing the Workflow application:
7. Test the workflow by clicking F8.
8. Enter the value of the Carrid as shown above and press execute.
9. A mail would be sent to the recipient mentioned earlier with the carrid value entered.
Condition Step
Agenda:
This document details about the steps Condition.
Pre-requisites: It is assumed that the reader of this document has a preliminary understanding of workflow and has worked with the container elements earlier. If not, please go through the first two Tutorials of workflow available in this site. (More details)
Procedure:
1. Create a new workflow definition.
2. Create a container element, CARRID (as demonstrated in tutorial 2).
3. Now click on undefined step and create the step Condition.
4. Enter the step name of your choice.
5. We would have the following condition here:
If carrid = AA.
Do this.
Else.
Do this.
Click on Click here to create a new condition. Following screen appears.
Double click on Carrid. Next click on = and enter the value AA in the constant field and press ENTER.
Enter the outcome names of your choice as shown above.
Click on Transfer and go to graphic.
As shown above, there are two branches here. One navigates to true, if CARRID = AA else the control takes the branch False.
Test the above scenario by inserting mail steps in the above 2 branches and by passing different CARRID values.
Condition Step
Agenda:
This document details about the steps Multiple Condition.
Pre-requisites: It is assumed that the reader of this document has a preliminary understanding of workflow and has worked with the container elements earlier. If not, please go through the first two Tutorials of workflow available in this site. (More details)
Procedure:
1. Create a new workflow definition.
2. Create a container element, CARRID (as demonstrated in tutorial 2).
3. Now click on undefined step and create the step Multiple Condition.
4. Enter the step name of your choice.
5. We would have the following condition here:
If carrid = AA.
Do this.
Elseif carrid = AH
DO this.
Elseif carrid = SQ
Do this.
Else.
Do this.
Select the CARRID using the F4 help for the comparison basis field.
Enter the values of the carrid under the Comparison values with the corresponding outcome name (of your choice)
Double click on Carrid. Next click on = and enter the value AA in the constant field and press ENTER.
Click on Transfer and go to graphic.
As observed above, there are different branches for each value of CARRID mentioned above.
Test the above scenario by inserting mail steps in all the branches and by passing different CARRID values.
Using "Container Operation" step
Agenda: Usage of step Container Operation.
Pre-requisites: It is assumed that the reader of this tutorial has worked in the concepts that are dealt in earlier tutorials. (click here for more details)
Scenario: In this tutorial, we would deal about how to work with the step Container Operation with an example of calculating the available seats by subtracting occupied seats from the maximum seats at the workflow level.
Procedure:
1. Create a new workflow definition using the transaction SWDD.
2. Create two container elements MaxSeats, Occ_Seats with the import property set. You can use the reference fields sflight-seatsmax, sflight-seatsocc for this.
3. Create another container element AvailableSeats without setting either import or export property as this is calculated within the workflow and used within the workflow. You might use any of the above reference fields as data types.
4. Define a new step Container Operation in the workflow definition by double-clicking on the Undefined step.
5. In this step, we would calculate the available seats from the max seats and seats occupied.
I would recommend entering all the container elements from the F4 help instead of typing them manually.
6. Return to the main screen.
7. Create a mail step after this to send the available seats information.
8. Test the above functionality by passing some values to the maximum and the seats occupied.
9. Result would be as follows:
Triggering Events Programmatically
Purpose: This document details the procedure in triggering the business object events programmatically.
Pre-requisites: It is assumed that the reader of this document is aware of the business object concepts and good in ABAP.
Procedure:
In this document, we would take an example of the business object BUS1001006 (Material) and the event CREATED. In general, this event is triggered whenever a material is created using a standard procedure like MM01 or any others. Now we would trigger this event from our own programs.
Following are the screenshots of the business object BUS1001006 and the event CREATED. Go to transaction SWO1 for more information of the business object.
Double-clicking on the key field parameter gives you technical information of the field.
In order to trigger an event programmatically, we would use the function module SWE_EVENT_CREATE.
Following is the sample code to trigger the events programmatically:
REPORT ZDEMO_TRIGGER_EVENT.
DATA: KEY LIKE SWEINSTCOU-OBJKEY.
KEY = '1163'. Material Number (hard-coded)
CALL FUNCTION 'SWE_EVENT_CREATE'
EXPORTING
objtype = 'BUS1001006'
objkey = KEY
event = 'CREATED'
CREATOR = ' '
TAKE_WORKITEM_REQUESTER = ' '
START_WITH_DELAY = ' '
START_RECFB_SYNCHRON = ' '
NO_COMMIT_FOR_QUEUE = ' '
DEBUG_FLAG = ' '
NO_LOGGING = ' '
IDENT =
IMPORTING
EVENT_ID =
TABLES
EVENT_CONTAINER =
EXCEPTIONS
OBJTYPE_NOT_FOUND = 1
OTHERS = 2
IF sy-subrc <> 0.
MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
ELSE.
WRITE 'Event Triggered'.
ENDIF.
COMMIT WORK.
In order to test whether the event is getting triggered or not, we can make use of Event Trace. Switch on the event trace using the transaction SWELS.
Press Switch On.
Now execute the program developed earlier. Now switch-off the event trace using the same transaction SWELS.
Now go to transaction SWEL. Here you can list out the events triggered in the particular period of time. Here is the event-trace list:
Deadline Monitoring in SAP Workflow
A major advantage of workflow is the ability to monitor the workflow steps according to a predefined schedule. Following are different deadlines that can be monitored against each workflow step:
Requested Start
Latest Start
Requested End
Latest End
In this example, we will define a deadline to the User Decision example created earlier (click here). Following is the screenshot of the application developed using the User Decision example:
We would extend this example to the deadline monitoring.
In the User Decision step, click on the latest end tab.
By default, No deadline monitoring is active (as seen in the above screenshot).
Choose the Work Item Creation from the list box.
After selecting Work Item Creation, chose an offset of 5 minutes. This means that the work item must be executed within 5 minutes of the creation, if not this would trigger.
Deadline Monitoring in SAP Workflow
Enter recipient details to whom the message to be escalated, if the work item is not executed with in 5 minutes after work item creation.
Save and activate the workflow definition.
Testing the workflow application:
Execute your workflow.
Check for the work item in the SAP Inbox. This time do NOT execute the work item.
Wait for the deadline to be triggered. After that, a deadline message is delivered to the recipient mentioned in the Latest End tab. See the screenshot below.
Dont worry if the deadline message doesnt appear immediately after 5 minutes. This depends on various factors including how the deadline monitoring program is scheduled and also on the availability of the background processors.
Use SWWA to check how the deadline monitoring program is scheduled in program.
For example, assume that our work item has been created at 09:10 hrs and the deadline message is expected to trigger at 09:15 hrs. From the above screenshot, it is understood that the background program is scheduled to execute for every 3 minutes. Assume that the last run of the program is at 09:14hrs and the next run is expected at 09:17hrs. So even our deadline expires at 09:15, the deadline message would appear only at 09:17hrs after execution of the background program.
Some more points
In our above example, we have used the deadline on the Work Item creation time. i.e., 5 minutes after creation time, the deadline message would be sent. Now we would check the other option Expression. Here we can mention the date and time, when the deadline message should appear irrespective of the work item creation date/time.
As seen in the above screenshot, we can provide the target date and time by which the task should be finished. Container elements could be used in this case. Please refer to our example on creation of container elements (click here).
Personal Substitute in Workflow
Requirement: Need to have at least one substitute who can act upon work items in your absence.
Important: The appointed substitute would be able to see all your work items. A substitute cannot be assigned for only particular area of organization or any other item. So need to ensure that the substitute have the necessary authorizations to act upon the work items.
Procedure:
1. Go to SAP Business Work Place (TCode: SBWP)
2. Now from the menu bar, select Settings à Workflow settings à Maintain Substitute
3. Highlight/Select the name on the window, in this case SAPDEV02 and click on Create Substitute.
4. List of users available in the system are displayed.
5. Select the required substitute user name. Following screen appears.
Validity field describes about the period in which the setting would be active. Note that the dates on the screen would range from the current date to 31st Dec 9999.
Regarding the checkbox Substitution active, it is advised to leave this checkbox unchecked for system performance reasons. A check in this box indicates that the substitution is permanent and if left unchecked it is treated as as-needed. A permanent substitute will automatically receive the primary users work items in their own box. In the case of as-needed, substitute must manually adopt the work items from the primary users inbox.
6. Save the entries
7. Click Enter to leave the screen.
Adopting a Substitute in Workflow
If you have been designated as an as-needed substitute, you must manually adopt the substitution. If you are designated as a permanent substitute, the work items would automatically appear in the inbox.
Before adopting a substitution, there are 19 work items in the inbox. See the screenshot below:
To adopt a substitution, select Settings à Workflow settings à adopt substitution.
Select the corresponding User-id (if you have been assigned as a substitute for multiple people, then this option would allow you to select the user name of whom you would to check the work items)
The corresponding users work items would appear in our inbox now.
You can end the substitution, by selecting settings à Workflow settings à End substitution.
Note: Substitutes can only adopt work items that are directly routed to the person for whom they are a substitute. If you are a substitute for a user (SAPDEV02) who has been made a substitute for another user (SAPDEV01), you will only see work items for user SAPDEV02 and not of the user SAPDEV01.
Notification of Work Items via e-Mail
SAP provides us with a facility of notifying the user via the email address of your choice when there are any pending work items in the SAP Inbox..
1. Go to Transaction SO13.
2. Click on Automatic Forwarding tab.
3. Click on Create icon .
4. Enter the details in the above screen.
5. Click ENTER to complete the entries.
6. Now the notification would be received at the provided email address if there are any pending work items in the inbox.
Filtering the Work Items in the SAP Inbox using BADI
This document details about the procedure in filtering some of the work items from the SAP inbox using a BADi.
Following is the screenshot of the SAP inbox, before implementing BADi:
The BADi that is used in filtering the work items is WF_BWP_SELECT_FILTER. To implement the BADi, go to transaction SE18. From the menu, select Implementation à Create. (See the screenshot below)
Enter the implementation name and press ENTER
Enter any meaningful short text for the implementation and click on the tab Interface
The implementing class, ZCL_IM_BWP_SELECT_FILTER, is automatically proposed. Double click on the implementing class name.
You are now navigated to the class builder. Now double-click on the method name shown on the screen (see the snapshot below)
Now let us filter out the work items belonging to the task TS2000066. See the code below:
Activate the method and also the implementation. In the state of active, you wouldnt be able to make any changes. To make any changes, we need to deactivate it and then make the changes.
Now check the inbox and would notice that the work items related to that task are no more appearing.
To notice the differences, try activating and deactivating the BADi implementation.
Workflow tutorials with step-by-step and with screenshots are available at http://www.****************/Tutorials/Workflow/Workflow.htm
http://help.sap.com/saphelp_erp2005vp/helpdata/en/42/c14a9b55103116e10000000a1553f7/frameset.htm
http://help.sap.com/saphelp_erp2005vp/helpdata/en/c5/e4a930453d11d189430000e829fbbd/frameset.htm
http://www.sapgenie.com/workflow/
http://www.sap-img.com/workflow/sap-workflow.htm
http://help.sap.com/saphelp_47x200/helpdata/en/3d/6a9b3c874da309e10000000a114027/frameset.htm
http://help.sap.com/printdocu/core/Print46c/en/data/pdf/PSWFL/PSWFL.pdf
http://help.sap.com/saphelp_47x200/helpdata/en/4a/dac507002f11d295340000e82dec10/frameset.htm
http://www.workflowing.com/id18.htm
http://www.e-workflow.org/
http://web.mit.edu/sapr3/dev/newdevstand.html
http://www.sap-basis-abap.com/wf/sap-business-workflow.htm
https://forums.sdn.sap.com/click.jspa?searchID=791580&messageID=2857887
https://forums.sdn.sap.com/click.jspa?searchID=791580&messageID=2855919
https://forums.sdn.sap.com/click.jspa?searchID=791580&messageID=2735228
http://help.sap.com/printdocu/core/Print46c/en/data/pdf/BCBMTWFMSTART/BCBMTWFMSTART.pdf
http://help.sap.com/printdocu/core/Print46c/en/data/pdf/BCBMTWFMDEMO/BCBMTWFMDEMO.pdf
http://help.sap.com/printdocu/core/Print46c/en/data/pdf/BCBMTWFMPM/BCBMTWFMPM.pdf
http://help.sap.com/printdocu/core/Print46c/en/data/pdf/PSWFL/PSWFL.pdf
debug a workflow.
This has a step by step procedure :
http://fuller.mit.edu/workflow/debugging.pdf
www.erpgenie.com/sap/workflow/debugging.htm
http://www.erpgenie.com/workflow/debugging.htm?2b5de440

Liquid Layout does not work with extreme long pages

(Solution at the end)
Hi there.
I have a layout for iPad with a width of 1024 and variable height.
I now need an alternative layout for iPad HD. So I try to use liquid layout to alternate my layout to 2048 width and height x 2.
The maximum size in InDesign is 15552px. So I managed to get all my SD layouts below 7776px.
to sum things up:
iPad SD: 1024x7776
transform into
iPad HD: 2048x15552
Problem is, in this case the option to scale everything automatically gets completely ignored.
Another layout, which uses only text and no images, boxes or multimedia gets transformed correctly.
Does anybody have a tip for me how I can work around it?
Thanks in advance.
p.s.: Adobe, please increase the maximum sizes for documents
Solution:
Aaaand I just got it. Specify a new preset for your document-sizes: 2048x15552. Now if you use the page tool just click the new (in my case) "iPad HD" and choose liquid layout: scale.
Works like a charm

I am using Automator to find files with the .pages
extension and then copy them to another folder, which
lists the copied Pages files by name but with Zero
KB! The files will not open - error: the index.xml
file is missing.
Any ideas on how to get a Pages file to copy with
Automator?
Hi Kurt
To answer the title of your message: no, Pages does not work with Automator.
But that's not really what you're asking. You really want to know how to copy Pages documents using Automator.
To help you we need to know what Actions you're using in Automator and the parameters you're using eg the Filter Finder Items action (using a pages file extension) and the Copy Finder Items actions. Pls let us know how you're doing this and we'll try to help.
Thanks.

Widget slide show and liquid layout

I am trying to use the widget slide show in a liquid layout and I need the slideshow to resize. I used the width 100% and tried the height set to auto but the image hight does not resize. how do I get the slideshow to resize both height and width.

I'm not entirely certain the slideshow widget is scalable. Many of them are not.
You can try adding this to your CSS code:
img {max-width: 100%; height: auto !important;}
If that fails, you might want to switch to a fixed-width, centered layout. Liquid layouts are very tricky to work with.
Alternatively, you could look for a jQuery slideshow that does support % widths -- although these carry the potential for distorting your images if the aspect ratio is not maintained.
Nancy O.

How do I create a Full Width Photo for a Liquid Layout - CS3

Greetings & Help!
I'm trying to create a full width photo layout without the
photo's being tall.
Exactly as the following websites - which all seem to be
using the same size of photo or very close to it.
This site is static with full width photos that are not tall.
http://www.jenniferhandyproperties.com/selling
This site is static for the most part and full width photos
that are not tall
http://www.gnvpartners.com/web/
This site is Flash with full width photos that are not tall.
expodesigncenter
I would love to create a flash site just like expo but at
this point I would settle for a static photo with the same size
being the same on each page.
Also I would like my site to be a liquid layout so the photo
and everything else (text, Links etc) on the page flows correctly.
The problem...
I'm trying to use photo's from Istockphoto.com. The size of
the photo's they offer are
425 x 282 px (5.9" x 3.9")
849 x 565 px (11.8" x 7.8")
1698 x 1131 px (5.7" x 3.8")
I'm selecting horizontal photo's. I do not know how to match
the same width, height and appearence as the websites I mentioned
above.
If I choose a photo that fits the width then the length is
too long. Also if I choose a large photo and have to crop it then
most of the detail of the photo is lost.
I'm attempting to create a mock-up for my web in Fireworks
CS3 and after search Adobe and www I came across the mock up should
be 1004px which would end up being 1024 with vertical scroll bar
and small margins.
I also have Photoshop & Flash CS3 but should mention (if
you haven't already guess it by now) I am a rookie when it comes to
creating a website.
So if you can offer a solution in "Non-Tech Terms" I would
appreciate it.
Thank you in advance for your time.

Greetings & Help!
I'm trying to create a full width photo layout without the
photo's being tall.
Exactly as the following websites - which all seem to be
using the same size of photo or very close to it.
This site is static with full width photos that are not tall.
http://www.jenniferhandyproperties.com/selling
This site is static for the most part and full width photos
that are not tall
http://www.gnvpartners.com/web/
This site is Flash with full width photos that are not tall.
expodesigncenter
I would love to create a flash site just like expo but at
this point I would settle for a static photo with the same size
being the same on each page.
Also I would like my site to be a liquid layout so the photo
and everything else (text, Links etc) on the page flows correctly.
The problem...
I'm trying to use photo's from Istockphoto.com. The size of
the photo's they offer are
425 x 282 px (5.9" x 3.9")
849 x 565 px (11.8" x 7.8")
1698 x 1131 px (5.7" x 3.8")
I'm selecting horizontal photo's. I do not know how to match
the same width, height and appearence as the websites I mentioned
above.
If I choose a photo that fits the width then the length is
too long. Also if I choose a large photo and have to crop it then
most of the detail of the photo is lost.
I'm attempting to create a mock-up for my web in Fireworks
CS3 and after search Adobe and www I came across the mock up should
be 1004px which would end up being 1024 with vertical scroll bar
and small margins.
I also have Photoshop & Flash CS3 but should mention (if
you haven't already guess it by now) I am a rookie when it comes to
creating a website.
So if you can offer a solution in "Non-Tech Terms" I would
appreciate it.
Thank you in advance for your time.

FAQ: How can I make my Flash Catalyst application scale/use a liquid layout?

Flash Catalyst CS5 currently only supports applications with fixed dimensions. Custom components you create in Catalyst have absolute sizing.
If you want to experiment with creating resizable applications (liquid layouts) and components in a preview of the next version of Flash Catalyst, codenamed "Panini", you can find more information here:
Introducing Adobe Flash Catalyst "Panini"
Download Adobe Flash Catalyst "Panini"
Adobe Flash Catalyst "Panini" help
Keep in mind that Flash Catalyst "Panini" preview is meant for exploration and testing, not real production. If you are doing real production work, here are some options that work with Flash Catalyst CS5 and Flash Builder:
Liquid Layouts
If you are building an application that requires relative constraints, you can take the FXP file from Flash Catalyst into Flash Builder, and apply constraints there so that your components resize according to your application dimensions.
For more info, see this Help topic:
Using constraint-based layouts in Flash Builder
SWF Scaling
If you want your swf to scale, without relative constraints, there's a simple way to make that work in Builder as well. Simply save out your FXP file from Flash Catalyst and import it into Flash Builder. Open up the "Main.mxml" file. Remove the width and height attributes on the Application tag, and add the attribute:
preinitialize="systemManager.stage.scaleMode='showAll'
The entire Application tag should look something like:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:d="http://ns.adobe.com/fxg/2008/dt"
                  xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
                  xmlns:ATE="http://ns.adobe.com/ate/2009"
                  xmlns:ai="http://ns.adobe.com/ai/2009"
                  xmlns:flm="http://ns.adobe.com/flame/2008"
                  xmlns:lib="assets.graphics.*"
                  xmlns:components="components.*"
                  backgroundColor="#FFFFFF"
                  preloaderChromeColor="#FFFFFF"
                  preinitialize="systemManager.stage.scaleMode='showAll'"
                  >
There are a couple other scale modes you may want to try, such as "exactFit", which are outlined at the below link:
Flash Stage Scale Modes
Finally, you will have to adjust the object embed code in your html page to set the size of your swf.
Original discussion here

you can`t. allow your application internet access without the network admin defining an exception for it specifically.
If you have admin rights use the router`s/proxy`y configuration software to allow an exception.

Liquid Layout crashing InDesign CS6

I was using liquid layout - pinning a graphic- and when I tried to resize, the whole program crashed.   Every time I try to resize - on any page in the doc, it crashes the program.
InDesign CS6.   Liquid page rule: controlled by master [which is object based].   Objects move with page.
I've tried everything, for hours now.   I have no idea why it was fine, then all the sudden it's broken.
Very frustrated.

How would you go about exporting your alternate layout alone for print?

Need a good liquid layout tutorial

Similar Messages

Maybe you are looking for