Use Tables for Image Layout?

I'm in the process of learning HTML and putting together some
sites. The book I'm reading is several years old but is very
thorough. It suggests taking slices from a page mockup in PS/IR,
optimizing (saving only the images, not code), then re-assembling
it by writing the code that puts it all together in tables.
Is this an outdated/"bad" way to accomplish this? If so, what
is the "best"/recommended way for slice-based graphic layout? Keep
in mind I'd like to us image maps later to create links and
rollovers.
Thanks!

"afriendofcheese" <[email protected]> wrote
in message
news:fs0nd8$gbv$[email protected]..
> I'm in the process of learning HTML and putting together
some sites. The
> book
> I'm reading is several years old but is very thorough.
It suggests taking
> slices from a page mockup in PS/IR, optimizing (saving
only the images,
> not
> code), then re-assembling it by writing the code that
puts it all together
> in
> tables.
> Is this an outdated/"bad" way to accomplish this? If so,
what is the
> "best"/recommended way for slice-based graphic layout?
Keep in mind I'd
> like
> to us image maps later to create links and rollovers.
> Thanks!
I'm not a fan of sliced-image layouts, but yes, that's just
the way I'd do
it. I'd slice the page mockup myself and then place it into a
table with the
right number of rows and columns with as minimal and clean
HTML as
possible.
Patty Ayers | Adobe Community Expert
www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate
Worksheet

Similar Messages

"Use presets for responsive layout" not working in Chrome

I am building a responsive website. I am going to have parts of the website animated using Edge Animate. I will make the animation and then insert it into a div in the responsive website I am building.
The Adobe Edge animation has a width of 100%, so that it resizes according to the area that it occupies the full width of the div no matter how wide that div may be in px.
It is all working fine, but:
I have an image in the Edge animation that is center aligned. It must stay center aligned no matter what width the animation ends up being.
Within Adobe Edge, in Properties, in Position and Size, there is a option where, if you hover your mouse cursor over the top right button a tool tip says "Use presets for responsive layout"
With the image on the stage selected, I can click on the "Use presets for responsive layout" button and then choose "Centre background Image".
It works perfectly in all browsers accept Chrome (even IE is playing ball this time). In chrome the width of the image stretches out as the div stretches out..
The "Centre background Image" setting says that it won't scale the image. But in Chrome it does.
What can I do to "tell" Edge Animate to center the image but not scale it in the Chrome browser?
I can see that in the image properties it is set to Background image x axis and y axis 50%. And the width is set to pixels. But in Chrome, the image stretches.
If you go to http://www.brainstormadvertising.co.uk/demo/services.html you will see what I mean. The circle image is centering BUT stretching in chrome browsers while centering nicely and NOT stretching in other browsers.

Thank you for your reply Josh. But the point of this setting in Edge Animate is that you can set it up that the background image is center aligned and does not scale. Yet it produces code that gives the width as 21.72%.
A little further along I see background-size: 48px; . This is correct.
So all the browers are reading background-size: 48px; as the scale measurement but Chrome is reading the width only, not the background-width. So this "Use presets for responsive layout" works in all browsers except chrome.
I don't know how to change that code after the artwork has been published. I can see the code using Firebug, but where do I change it in my code on my computer before uploading to the server?
I have reported this bug to Adobe.
Please see the attachment. You can see where all the settings are made and where I am getting a problem.

Table for image controlling in PD infotypes

Hello,
Please, we need to know if there is any table for image controlling in PD infotypes. In PA table is: T588M.
Thank you

Sorry,
I've not come across one in the 10 years that I've been working on SAP.
J

Best Practices for image layout and positioning using anchored frames in Framemaker 10

Hi,
I'm looking for the best practices in how to layout my images in Framemaker 10 so that they translate correctly to Robohelp 9. I currently have images inside of Anchored frames that "Run into" the right side of my text. I've adjusted the size of the anchored frame so that my text flows correctly around the image. Everything looks good in Framemaker! Yeah! The problem is that when I link my Framemaker document to Robohelp, the text does not flow around my image in the same manner. On a couple of Robohelp screens the image is running into the footer. I'm wondering if I should be using tables in Framemaker in order to get the page layout that I'm looking for. Also, I went back and forth...is this a Framemaker question or is this a Robohelp question. Any assistance would be greatly appreciated.

I wish I could offer some advice, rather than simply adding to your question. I think there is something odd that happens with anchored frames.
I have been going through fits trying to figure out why the placement of my graphics shifts when I run them through Frame 10-to-RoboHelp 9 conversion. The placement in our books is flush left to the body text area. However, when they convert, some are flush left, some are centered, and a very few are flush right. My boss is very unhappy with me, as I have been unable to figure out why this is happening. I didn't create these files, so I don't know if it's something that goes back to how the graphics were initially imported. But I can't figure out why everything looks right in Framemaker, with the frame attached to an anchor tag, etc. but the placement goes hinky when they convert.
Any insights are appreciated. I'm wondering if it's going to come down to deleting them and recreating the graphic frame.

Can we use fill for images???

All
Had a question regarding changing images dynamically.
Here's my requirement .I have an image and i need to change the color of the image dynamically when the user select different colors from the color pallete.
I don't want to create have like 100 images and use those based on what the user selected.
Can we achieve this in javaFX where i fill the image with a different color .Something like how we would use the "fill" attribute for circles and rectangles to fill in colors.
Please help me out.
Thanks

You can also use Blend, it works well to colorize black & white images, for example.
I played a bit with rakeshmenonp's code:
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.*;
import javafx.scene.effect.*;
import javafx.scene.Group;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.layout.*;
def img = Image {
    url: "file:///E:/Documents/Perso/Images/KM200.png"
def imageViewCA = ImageView {
    image: img
    effect: ColorAdjust {
        brightness: 0.0 // -1 to 1
        contrast: 1     // 0.25 to 4
        hue: -0.7       // -1 to 1
        saturation: 1.0 // -1 to 1
def imageViewBL = ImageView {
    image: img
    effect: Blend {
        mode: BlendMode.SCREEN
        topInput: Flood {
            paint: Color.BLUE
            width: img.width
            height: img.height
def imageViewOrig = ImageView {
    image: img
def imageGroup = Group {
    content: [
        ImageView {
            image: img
        Rectangle {
            opacity: 0.5
            fill: Color.RED
            width: img.width
            height: img.height
Stage {
    scene: Scene {
        content: [
            Tile {
                columns: 2
                content: [ imageViewOrig, imageViewCA, imageViewBL, imageGroup ]
}

How do i use numbers for image gallery and arrows?

Hello there,
I'm hoping someone can advise me on the best possible way.
I would like to use numbers to help the user navigate through the image gallery i'm creating and arrows on either side of an image (one image viewed at any one time). I have attached an image of what i'm trying to acheive. I feel like the arrows will help aid the user to navigate and the numbers will inform them on the number of images to view.
I have so far created the site with a template (logo and nav bar) and child pages for: home/about/work/contact.
Hope to hear from someone soon.
Nicola

With so many pre-built image galleries available to you, there's no reason to re-invent the wheel.
CSS Image Viewer (view source to see the code)
http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml
jQuery slideViewer 1.2
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html
57 + Image Gallery, Slideshow & Lightbox solutions
http://www.1stwebdesigner.com/css/57-free-image-gallery-slideshow-and-lightbox-solutions/
In addition to the ones above, log-in to Adobe's Widget Exchange with your Widget Browser
http://labs.adobe.com/technologies/widgetbrowser/
    * jQuery Cycle Widget
    * Lightbox Gallery Widget
    * Spry Content Slides
    * Spry Image Slideshow
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Desktop Office Integration - How to use Weblinks for Images in linkserver?

Hello experts,
I want to add an image from the internet (e.g. Link: www.images.de/image.jpeg) to the linkserver in order to paste it in my word document. As I know it should be possible to do so with the link server. I tried it before with business documents "BDS" and it works fine. But in my opinion this place is not the best place to store pictures. So I want to use the pictures, which are currently stored in our portal and are available via weblink.
So, actually, I have to give the information about the link to the link server method "add_binary_item", but with something like that "http://www......" it doesnt work! Do I have to enter a prefix or something like this???
I hope someone could help me with that issue.
THanks and regards,
marcus

Hello,
I did it and it works fine!
But I had to use the BDS Business Document Service with Class cl_bds_document_set.
So I used the method "get_with_url" to get the url from the document/picture.
After that I cann add a binary item with the URL and it works fine if my pictures are stored in BDS.
But that is not what I want to do. I want to store the pictures in my mime repository for example. Are there any other possibilities to do that? Or is Desktop Office Integrations supporting just documents/pictures which are stored in BDS???
Regards, Marcus
Edited...........................................................
In best case I am able to user internet urls for the pictures. So "http://www.xcxy.de/picture.jpeg", but with this URL information it doesn´t work!
So, my question is if I have to add a prefix or something like this in order to use weblinks.
Edited by: Marcus Findeisen on Apr 19, 2011 9:16 AM

Using tables for my design

hey.
Ive been making this website today, trying to base it around
other fansites..
I cannot put anything in the middle, unless i use ap div
which i dont want 2 use because there handy but cr@p.
refer to my site,
www.habboradio1.com/test
as you will see there is nothing in the middle, i cant really
explain but hopefully you should get me

That's not where OP wants the text, though, I don't think.
The question was
regarding content in the white area in the middle of the
bottom table, no?
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
==================
"(_seb_)" <[email protected]> wrote in message
news:f8ss8v$3vb$[email protected]..
> Murray *ACE* wrote:
>>> I cannot put anything in the middle, unless i
use ap div which i dont
>>> want 2
>>> use because there handy but cr@p.
>>
>> Not when used wisely/properly.
>>
>> Make your table containing the navigation have three
columns instead of
>> two. Place your content into the center column.
>>
>
> what about using <td align="center"> ?... that
would center your text in
> the blue bar.
> if you will have several navigation buttons in that bar,
make a new column
> for each, and use
> align="center" in each td, or style your table td
(assuming the blue bar
> is its own table) as such:
>
> .navTable td{
> text-align:center;
> }
>
> and apply the class to your table as such:
>
> <table class="navTable">
>
> --
> seb ( [email protected])
>
http://webtrans1.com | high-end web
design
>
> An Ingenious WebSite Builder:
http://sitelander.com

Is it possible to use airplay for image and sound via bluetooth speaker for sound?

I want to play my presentations using airplay, and it works perfectly, but i tried to use my bluetooth speakers at the same time and it doesn't seems possible! Each time i choose the bt speaker on system preferences it disconnects the airplay. Any suggestion?

Hello, you'd need another Router, or at least a different range of IPs on the Router for Wired & Wifi, or at the very least specifically mount Windows® shares by IP.
10.5.x/10.6.x/10.7.x instructions...
System Preferences>Network, click on the little gear at the bottom next to the + & - icons, (unlock lock first if locked), choose Set Service Order.
The interface that connects to the Internet should be dragged to the top of the list.

Is there any way to avoid a huge memory spike when using CGContextDrawImage for a high resolution image?

Hi,
I'm trying to fix the orientation of an UIImage in my app (iPad 2, iOS 7). I'm using the method described here: https://gist.github.com/alex-cellcity/1531596, but a huge memory spike appears when CGContextDrawImage is called. The image size I'm trying to fix is 2848x4288.
Anybody knows any algorithm to avoid this huge spike?
Thanks,
Roberto.

While I never done iOS code it appears that the code you link to basically does the following:
takes a large image A
generates a transformation matrix by doing rotation in 90 degree increments and by mirroring
creates a large image B
draws image A into B using the transformation matrix
releases memory for image A
goes on using image B
This results in a memory peak as you have two large images in RAM, until image A gets deallocated, which can't be done until B has been drawn.
I can see two possible solutions to this, both which probably require you to explicitly modify individual pixels:
1) Try to simplify the solution - if 180 degree rotation and mirroring is enough to solve your image issues, then a simple in-place (same bitmap) pixel swap could be done.
2) Find more memory - if you need 90, 270 or arbitrary degrees of rotation as well, you could instead keep either image A or B on disc.
Keep image A on disc: read pixels from disc and place appropriately in image B. This may require you to first load image A and write it back to disc as ARGB data (one byte for each color) for easy access.
Keep image B on disc: get pixel from image A and place it at the right location in image (file) B - this will require pre-creating a file of the correct size for Bs ARGB data and then moving the insertion point for writing around. When done dealloc image A and load image B.
Keep image A and B on disc: combine using disc for image A and B - this will minimize RAM usage but will probably be the slowest solution and will increases disc (SSD/flash) load and wear.

Using Tables

I've been looking at source code for various websites to get an idea how others are making their pages. On this "Eventbrite" page (which is set in my browser for Minneapolis), I see they are using tables. I'm not asking whether tables are good or bad, but I thought if possible it was better to not use them. It appears on this page they make sense since they are inside divs, and the info in the table is fairly consistent from event to event. I mean it would be easy to change the text. I think this is what Nancy O. was suggesting in an early thread, use a table when a table makes sense. What are your thoughts on using tables on a page like this?
http://www.eventbrite.com/

Tables are perfectly suited to tabular data, event calendars, recipes, etc... There's nothing wrong with using tables when you need them. Just don't use them for page layouts.
Nancy O.

Tables for migo

tell me the useful tables for doing bdc for migo.urgent

See this tabels:
EKBE
EKBZ
where BWTYP = 'F'.
Regards,
Naimesh Patel

Best Practice for Image placement and Anchored Frames for use in Robohelp 9

Hi,
I'm looking for the best practices in how to layout my images in Framemaker 10 so that they translate correctly to Robohelp 9. I currently have images inside of Anchored frames that "Run into" the right side of my text. I've adjusted the size of the anchored frame so that my text flows correctly around the image. Everything looks good in Framemaker! Yeah! The problem is that when I link my Framemaker document to Robohelp, the text does not flow around my image in the same manner. On a couple of Robohelp screens the image is running into the footer. I'm wondering if I should be using tables in Framemaker in order to get the page layout that I'm looking for. Also, I went back and forth...is this a Framemaker question or is this a Robohelp question. Any assistance would be greatly appreciated.

I think Jeff is meaning this section of the RoboHelp forums:
http://forums.adobe.com/community/robohelp/robohelp_framemaker

Radio group with URL for image in a table

I'm trying to display some text and an image for a radio group so the form looks like
(*) text for item 1 {image for item 1}
( ) text for item 2 {image for item 2}
( ) text for item 3 {image for item 3}
I've found these:
Re: Is it possible to display an image instead of button in a radio group?
How to show image in radio group ?
It looks like all I have to do is create a LOV that looks like:
SELECT {complex stuff that generates the text string, img tag, and URL for image}
,DB_PK
FROM dynamic_view_for_lov -- public synonym
But, my images are stored in a table.
I have been able to create an IR using the "Column Format=BLOB" method.
The SQL for the report looks like:
select
db_pk, display_text, image_len, image_clob
from dynamic_view_for_lov -- public synonym
And the Number/Date Format for the IMAGE_LEN column is:
IMAGE:DYNAMIC_VIEW_FOR_LOV:IMAGE_BLOB:DB_PK::::::Inline:Download
My question: How do I create the URL for the img tag for the LOV?
many thanks
MK

MikeKutz wrote:
I think Homer Simpson said it best: Doh!
For the person in the future, you have to 'fake create' the Automated Row Fetch process.
The get_blob_file_src gets all the information from that Process and the column name of the Item Type that is on the same page.
I forgot where I read about that trick.
Basically, you create the Automated Row Fetch process, then 'disable' it.
Same thing with the required Item Type. Create it as a "File Type", just to tell APEX that it comes from a Database Column,.... then change it to a 'hidden' type.
You don't have to "fake' it if the application already contains the file upload item and ARF. The assumption is that the application will contain these components in order to maintain the BLOBs and you'll just reference the functional ones.

Anchor link only for image in table header for sorting

Hi,
I need to implement sorting functionality for datatable.
for sorting header of the table column will have image along with header text.
for this i am using <h:commandLink> and <h:graphicImage>.
But i am getting behaviour as anchor link for both text and image.
deserved behavior for this is only ofr Image.
If any one implemented the same ..please help me
Regards

Try:
Sub ClearKeepWNext()
Dim Tbl As Table, i As Long
For Each Tbl In ActiveDocument.Tables
With Tbl
    .Range.ParagraphFormat.KeepWithNext = False
    For i = 1 To .Rows.Count
      With .Rows(i)
        If .HeadingFormat = True Then
          .Range.ParagraphFormat.KeepWithNext = True
        Else
          Exit For
        End If
      End With
    Next
End With
Next
End Sub
If the tables only have a single heading row, you could instead use:
Sub ClearKeepWNext()
Dim Tbl As Table
For Each Tbl In ActiveDocument.Tables
With Tbl
    .Range.ParagraphFormat.KeepWithNext = False
    With .Rows(1)
      If .HeadingFormat = True Then
        .AllowBreakAcrossPages = False
      End If
    End With
End With
Next
End Sub
Cheers
Paul Edstein
[MS MVP - Word]

Use Tables for Image Layout?

Similar Messages

Maybe you are looking for