Html, css, images import to indesign

Hi,
i have one html file with a css file and medias (images)
i need convert this file to InDesign file.
How can i do it ?
Please help. Thank you.

Easiest way is to open it in Word, save as DOCX and place that.
Don’t expect perfection.
Bob

Similar Messages

Why are images displayed in Photoshop different than the same images displayed in Indesign?

My images imported to Indesign do NOT display as the images in Photoshop.
They seem to display under different color profiles.
The images in Indesign are more desaturated than the images in Photoshop.
This is a problem because now I don't know which image appearance to trust!
How can you get the Indesign images to look like the images in Photoshop?
I use Photoshop CS4 and Indesign CS3.
I import the images from Photoshop to Indesign for exporting to a PDF as the base for Blurb printing (www.blurb.com).
I use the CMYK profile Blurb_ICC_profile.icc:
The images in PS4 are converted to Blurb_ICC_Profile (CMYK).
Both in PS4 and ID3 the color settings are
                           Working spaces:
                              CMYK: Blurb_ICC_profile
                           Color management Policies:
                               CMYK: Preserve Embedded Profiles.
The images are imported into Indesign by drag and drop from Bridge CS4. In Bridge it says that the images have color profile CMYK, Blurb_ICC_profile.
I also do get "Unsynchronized: Your Creative Suite Applications are not synchronized for consistent color." And I don't seem to be able synchronize between CS3 and CS4, or whatever. I do NOT depend on any synchronization.
The settings above should be enough to show the images consistently in Photoshop and Indesign.
SO WHY DOES IT NOT?
Should not Adobes own applications be able to keep color consistency?

Hi WA Veghe,
>First: DO synchronize, makes sure you have the same profile settings and color mange settings.
I don't seem to be able to synchronize between CS4 (Photoshop) and CS3 (Indesign).
It seems I have to do without synchronizing..
>I do not seem to find HOW you are diplaying images on you screen: with Soft proofing?
What happens if you soft proof in Photoshop and InDesign on screen: View > Proof colors. Do you proof with the same profiles, both simulate paper and black on?
I can simulate Proof Colors (working CMYK), but not simulate Paper, both in Indesign and Photoshop.
Problem is: SAME settings in Photoshop and Indesign BUT the image displayed in Photoshop is brighter and more saturated.
So which image should I correct after?
thanks for all help
/L

HTML/CSS match to InDesign layout

Hello,
I have been given the task of taking an InDesign layout from CS6, and building it in HTML/CSS. The challenging part is that it is required to be 1:1 pixel perfect. When I open it in Google Chrome–which is going to be the standard browser it’s opened in–the font raggs differently.
When I overlay a PNG of the HTML site, and a PNG from the InDesign file it is no where close to pixel-perfect. The text wrapping differently is the main issue at hand. I have tried every CSS hack possible to adjust letter-spacing and word-spacing, I've also explored Google Fonts to attempt to get a better match.
Does anyone have any experience with a similar ask? In CS6 you can’t specify type pixels, I’m not sure it would matter if you could, because it seems that InDesign is using it’s own conversion for what it considers a pixel.
Please help!!!

Agreed, it's way too optimistic. InDesign is a typographic design application, under development since 1999. Already in its very first version, its type engine came "fully grown and armed, with a shout", supporting enough advanced features to squash all but the very stubbornest competition (I'm looking at you, TeX).
HTML/CSS, on the other hand, has had problems displaying "plain text" since its very beginnings. Only the very latest version of CSS finally addresses some typographic features (probably unnecessary to add, but anyway: with mixed results for different browsers).
" ..it seems that InDesign is using [its] own conversion for what it considers a pixel", you bet it does. After all, there was a web crowd that outright demanded "pixels" to be a measurement unit in InDesign. Adobe did a have a stab at adding pixels, and if one would ask me, they did it the wrong way. But that's no fault in InDesign. ID has its roots firmly in the "real world", that is, you can design a document with a precision right up to the wavelength of visible light; and ID will happily produce output for it. Your "pixel", on the other -- Darker -- Side, "is" not a real thing. It has no width or height. If you think it does, it goes only for your screen. You may say, "but if necesasry I can hold a magnifier to my screen and count the itty bitty lights!" What if you do so, and discover that your screen does not consist of square pixels, but round ones, or hexagonal, or elongated rectangles? And any measurement would only be value for just your screen. What about mine, your bosses', or your client's?
Following John's advice, here is a list of features you would need to switch off (as most are enabled by default) before you can even think of mimicking ID's sophisticated text engine in HTML:
ligatures
alternate characters
real small capitals
tabular or oldstyle figures
.. wait -- better switch off *all* OTF features
Paragraph composer. Use the dumb One Line At A Time And We'll See How Far We Get Composer.
Language based hyphenation.
Minimum/Optimal/Maximum Word Spacing (CSS must be using this internally, else it could not show justified text; however, I don't think you can set its parameters)
Letter Spacing and Glyph Scaling (although to be fair, these seem to be already off by default).
~16 decimals of precision for every object, line width, text size, spacing, et cetera
any real-world based measurement unit.
I probably forgot a few too.
--- add.
Advanced character/class kerning
Optical kerning (not enabled by default)
-- add2.
Balance Ragged Lines (off by default; but you can't use it)
Optical Margin Alignment (as above)
Align to Baseline grid
last line indent
Align to spine
justify last line (can only be achieved with span/div tricks)
tabs
about all internal hyphenation settings (CSS allows 'none', 'manual', and 'auto')
live text color outline (I may be mistaken, but I bet if it were possible literally everybody would be using it by now -- just like the dreaded "blink" tag did, before it was deemed illegal by federal law)
skewed text. I know, nobody with a grain of sense uses it in ID.[*] Still, you can't do it in CSS so I'm gonna list it anyway.
[*] Except myself, by the way. But I don't use it willy-nilly, only after exhausting all the good and the bad options; then yes, I go for the Ugly look.
Message was edited by: [Jongware]
Message was edited by: [Jongware]

How do I look at HTML & CSS of InDesign files

I'd like to change the HTML and CSS of my pages. How can I do this? Can I do this with snippets? How can I see the HTML and CSS of my various InDesign files? Is is possible?

When you export either an EPUB or HTML file, the paragraph styles, character styles, object styles, etc. are "translated" into HTML and CSS. However, it's an imperfect process because of the differences between the two types of styling.

Image import dialog box InDesign CS4

The Image import dialog box has no "turn off" box to select after I turned it on to place a page in a PDF document. I am in Indesign CS4. How do I turn off this feature. It is showing the window now every time I import an image.
Please help.

There should be a tick box called Show Import Options
File>Place and you should see it.

Newbie Background issue (CSS + Image on top)

Hey,
Okay, so I'm working on this website in Dreamweaver, and I designed this background in Photoshop: http://img101.imageshack.us/img101/453/bg2xa.jpg
The gradient part of this background I uploaded in my CSS by importing 1px and x-repeat.
However, now the problem is that I don't know how to add those "wires" on top of my gradient background image. Is this somehow possible? Remember it's a background, so later there will be text etc. put on top.
Thanks in advance for your help!

This is the html
<!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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
This is the style
body
background-image:url(images/bck.jpg);
background-repeat:repeat-x;
background-color:#5c5c5c;
margin:0px;
padding:0px;
#wrapper
width:1024px;
height:768px;
background-image:url(images/test.jpg);
margin-left:auto;
margin-right:auto;
You create a wrapper and add you big image as the background (test.jpg). I have given it a height for illustration purposes. then your 1 px image use in your body as i think you were already doing.

Cache html signature image

Hi Apples,
In 10.5 I can drag an image to a new mail message from firefox, effectively embedding the image to my new e-mail. I can't do this is 10.4.
If I use css to code a signature, the image loads but is not cached for offline use (must be able to see the signature offline also).
I'm looking for a work around. Anyone?

Thanks for the quick reply BDAqua,
I have found an alternate way to achieve this; coding the css and html and then importing it as per the following example.
http://creativebits.org/HTMLemail_with_Mailapp_inTiger
Works a treat, works offline. Not yet tested in MS office.
Still looking for a way to stop mac mail from occasionally change it's formatting font to helvetica (niews as times new roman on a pc)

Multiple CSS image rollovers on a page

Hi there,
So, I have miraculously managed to create my first ever CSS image rollover navigation button on my webpage. This page is an online art gallery so there will be several small image rollover buttons linking to different pages of art.
My question is now that I've created one CSS rollover, do I have to create a brand new one for each additional button or is there a way to change the image and name of the existing button?
Here is my CSS and HTML for the existing image rollover:
/** Declaration for the a.singleRollover selector **/
a.singleRollover {
    display: block;
    width: 90px;
    height: 90px;
    overflow: hidden;
    text-indent: 0px;
    font-size: 0px;
    line-height: 0px;
    background-image: url(../Images/CSS%20Rollover/ButtonTOBI.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
/** Declaration for the additional states of the a.singleRollover selector **/
a:hover.singleRollover {
    background-position: 0 -90px;
    background-image: url(../Images/CSS%20Rollover/ButtonTOBI.jpg);
<div id="smallBox01a"><a class="singleRollover" title="Tobi rollover" href="Images/CSS Rollover/ButtonTOBI.jpg"></a></div>
The problem is that the background image is already set as ButtonTOBI. Is there a way to specify the image in the HTML each time individually rather than in the main a.singleRollover item? It seems very repetitive to have to go in and create lots of individual CSS rollover buttons.
Thanks in advance for any help.

Go here -
http://www.alistapart.com/articles/sprites
http://www.tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.a sp
Read about how to use a single image for all of your menu 'rollovers'. It works great!

Help with CSS image Gallery

Found this simple css image gallery. However I'm having trouble adjusting it do my needs. I ideally want to make each small image slightly bigger than currently and have 3 or 4 on each line. Also want to make the enlarged image bigger. The width would need to be around 550px.
<style type="text/css">
* This notice MUST stay intact for legal use.
* This script was created for FREE CSS Menus.
* Visit: www.freecssmenus.co.uk for more CSS.
* Also visit our Free online menu creator.
/* credits: www.freecssmenus.co.uk */
#pg { width:390px;
height:200px;
border:2px dotted #666;
padding:5px;
padding-top:15px;
#pg ul { list-style:none;
padding:0;
margin:0;
width:180px;
position:relative;
float:left;
#pg ul li { display:inline;
width:52px;
height:52px;
float:left;
margin:0 0 8px 8px;
#pg ul li a { display:block;
width:50px;
height:50px;
text-decoration:none;
border:1px solid #000;
#pg ul li a img { display:block;
width:50px;
height:50px;
border:0;
#pg ul li a:hover { white-space:normal;
border-color:#336600;
background-color:#AABB33;
#pg ul li a:hover img { position:absolute;
left:190px;
top:0;
width:auto;
height:110px;
border:1px solid #000;
#pg ul li a span {display:none}
#pg ul li a:hover span { display:block;
position:absolute;
left:5px;
top:130px;
width:350px;
height:auto;
font-size:12px;
color:#999999;
</style>
html
<div id="pg">
<ul>
<li>
<a href="css_rollover_uk_map.php">
<img src="upimage/ukmap345.jpg" alt="Css Rollover Map" />
<span>
<strong>
CSS Map.</strong>
CSS Image swap on rollover/hover. This simple display of CSS shows the versatility of Cascading Style Sheets. Remember this animation is 100% User Accessible.</span>
</a>
</li>
<li>
<a href="big_css_button.php">
<img src="upimage/bigbutton1390.jpg" alt="Large Css Button" />
<span>
<strong>
CSS Big Button.</strong>
Css buttons can be as large and as extravagant as you like. Using one image you can create simple css buttons like this. This button is still a hyperlink not just an image.</span>
</a>
</li>
<li>
<a href="menu_opacity.php">
<img src="upimage/003opacity639.jpg" alt="Css Opacity" />
<span>
<strong>
CSS Opacity Menu.</strong>
you can use styles to change the opacity of an image. This creates interesting effects when creating a menu. </span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/freemusic885.jpg" alt="Free Mp3 Downloads: Unborn Records" />
<span>
<strong>
Unborn Records </strong>
Download free mp3 music for your ipod or mp3 player. Download free music from unsigned artists</span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/trix363.jpg" alt="Visit Trix the dog at www.catandtwodogs.co.u" />
<span>
<strong>
Cat And Two Dogs </strong>
Visit my three pets at www.catandtwodogs.co.uk . This is a picture of trix, he's a border collie.</span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/colours238.jpg" alt="A picture of colours in a swirl" />
<span>
<strong>
A swirl of colours. </strong>
This is just a picture of colours in a swirl effect.</span>
</a>
</li>
</ul>
</div>

Sorry can't do this at the moment.
I've decided to switch to the JQuery Lightbox Image Gallery instead. In IE8 I get the following message:
Message: Script error
Line: 0
Char: 0
Code: 0
URI: file:///C:/Documents%20and%20Settings/User/My%20Documents/SRC12-13/all%20html%205/all%20ht ml%205/Simple-HTML-5-Template/Simple%20HTML%205%20Template/js/jquery.lightbox-0.5.min.js
My page works and my js is refenced correctly. Not sure if this is just a IE8 thing, or whether the page needs uploading to work correctly. Works fine in Chrome.
Wonder if there is a way to fix this?

Optimizing Images directly in Indesign??

Is there an option to optimizing your linked images directly in Indesign? I'm looking to select an image and have Indesign take its layout scale and apply that to the image file optimizing the linked image to constrain it's proportions to that which it is sized on the page in the layout in Indesign. I know that I'm able to have the option to edit original file and then do this sizing in Photoshop. But with hundreds of photos that have a multitude of different layouts and scales in contrast to their original files and to one another there must be a way to quickly have Indesign recognize the image's scaled size in the layout and optimize the original file to be that in proportion with its scaled size within layout, right??

When you output the file to PDF you can use the Compression Settings to automatically reduce the Resolution of the image to the size - basically it optimises the image size and resolution while making the PDF.
When you resize an image to fit a particular resolution and size in Photoshop - InDesign uses the exact same method.
The only problem with this is that when resample an image you usually need to Sharpen the image a small bit - or sometimes not at all - it's purely down to the sort of image it is - if it's a soft image then you probably wouldn't need to sharpen it, if it's a hard image with lots of detail and edge contrats then you probably would need to Sharpen the image when you resample it to a different size and resolution.
In about 10 years - I generally don't resample an image in Photoshop for output - I set the Compression settings in InDesign and let InDesign do the work - for the type of images I usually use I would never need to sharpen them as the difference is neglibile for the audience reading the material.
Howver, there are times like in Art catalogues or very high-end printing I would need to sharpen the images - and that's the only time I generally resample Images in photoshop.
There are some plugins that will do go through all the images and resample (not sure if it gives the option to add a sharpening filter?) but there are some out there - this one springs to mind
http://zevrix.com/linkoptimizer.php
But I don't think for the general public it's very important to add the sharpening filter - perhaps architecture, art, fine magazines etc where quality is an absolute must - then yes.

Using HTML component Images within a tilelist

I have a very complicated problem and I'm not sure it's even within my ability to achieve if at all but basically in my AIR application I currently have a tilelist populated by a data provider of images which are essentially thumbnail snapshots I've made of websites. When each of these images is clicked within the tilelist they take the user to that specific site. I now however want these images to be live i.e. they change as the site changes.
I've decided to use html components for all of these sites to get these images but I now want these images to be set up as a dataprovider for a tilelist. It's hard to explain so to show what I mean I've made the following code. Basically I want the 2 images/displays that are displayed within the 2 html components to be static i.e. the user can't interact with the sites through them but can simply click on them to go to the site and to be put within a dataprovider somehow that will act as the dataprovider for the imageDisplay tilelist Complicated I know but the guy I'm making the app for wants the images of sites to update themselves and this is the easiest way to do it I've heard :-
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas width="100%" height="100%">
<mx:HTML id="content1" location="http://www.adobe.com/" width="300" height="300"/>
<mx:HTML id="content2" location="http://www.google.com/" x="308" width="300" height="300"/>
<mx:TileList x="0" y="308" width="772" height="300" id="imageDisplay"></mx:TileList>
</mx:Canvas>
</mx:WindowedApplication>

To show you what I mean better here is a partial bit of my code from my existing app in which I've just used static images in the tilelists. The real app is much more advanced but this is to just give you an idea. Users can drag site icons displayed in a tilelist into their own tilelist and then click the save button so these icons will still be in their tilelist when they restart the app. I used the shared object method for this to get it to save these details. As you can see in my code starting at around line 33 I've used an array collection for this. What I need is to somehow get these html live images into that array collection as opposed to the static jpgs I have at the moment.
<?xml version="1.0" encoding="utf-8"?><mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initprofile1NewsAndSportSO();">
<mx:Script>
<![CDATA[
[Bindable][
Embed(source="assets/images/bbcnews_small.png")]
public var image5:Class;
Bindable][
Embed(source="assets/images/itv_small.png")]
public var image7:Class;
Bindable][
Embed(source="assets/images/skynews_small.png")]
public var image10:Class;
]]>
</mx:Script>
<mx:Script>
<![CDATA[
private function profile1NewsAndSportAddButtonClickHandler():void{
for each(var a:uint in profile1NewsAndSportAddLinksTilelist.selectedIndices){
if(profile1NewsAndSportLinkChoice.dataProvider != null){
if(!ArrayCollection(profile1NewsAndSportLinkChoice.dataProvider).contains(ArrayCollection(pr ofile1NewsAndSportAddLinksTilelist.dataProvider).getItemAt(a))){ArrayCollection(profile1NewsAndSportLinkChoice.dataProvider).addItem(ArrayCollection(profi le1NewsAndSportAddLinksTilelist.dataProvider).getItemAt(a));
ArrayCollection(profile1NewsAndSportAddLinksTilelist.dataProvider).removeItemAt (a);
else{profile1NewsAndSportLinkChoice.dataProvider.addItem(ArrayCollection(profile1NewsAndSportAd dLinksTilelist.dataProvider).getItemAt(a));
ArrayCollection(profile1NewsAndSportAddLinksTilelist.dataProvider).removeItemAt(a);
private function profile1NewsAndSportRemoveButtonClickHandler():void{
for each(var a:uint in profile1NewsAndSportLinkChoice.selectedIndices){ArrayCollection(profile1NewsAndSportAddLinksTilelist.dataProvider).addItem(ArrayCollection (profile1NewsAndSportLinkChoice.dataProvider).getItemAt(a));
ArrayCollection(profile1NewsAndSportLinkChoice.dataProvider).removeItemAt(a);
]]>
</mx:Script>
<mx:Script>
<![CDATA[
import mx.collections.*;
import flash.net.SharedObject;
public var profile1NewsAndSportSO:SharedObject;
private var profile1NewsAndSportaddLinksFullAC:ArrayCollection = new ArrayCollection([{link:
"www.bbcnews.com", label:"BBC News", icon:"image7", largeImage:"assets/images/bbcnews_small.png", title:"BBC News", description:"BBC News description will go here"},{link:
"www.itv.com/", label:"ITV", icon:"image5", largeImage:"assets/images/itv_small.png", title:"ITV", description:"ITV Description will go here"},{link:
"www.skynews.com", label:"Sky News", icon:"image10", largeImage:"assets/images/skynews_small.png", title:"Sky News", description:"Sky News Description will go here"}]);
private var profile1NewsAndSportaddLinksAC:ArrayCollection = new ArrayCollection([{link:
"www.bbcnews.com", label:"BBC News"},{link:
"www.itv.com/", label:"ITV"},{link:
"www.skynews.com", label:"Sky News"}]);
private function profile1NewsAndSportReset():void{resetprofile1NewsAndSportAC();
profile1NewsAndSportAddLinksTilelist.dataProvider
= profile1NewsAndSportaddLinksAC;
profile1NewsAndSportLinkChoice.dataProvider =
new ArrayCollection([]);}
private function resetprofile1NewsAndSportAC():void{profile1NewsAndSportaddLinksAC.removeAll();
for each(var obj:Object in profile1NewsAndSportaddLinksFullAC){profile1NewsAndSportaddLinksAC.addItem(obj);
private function initprofile1NewsAndSportSO():void{profile1NewsAndSportLinkChoice.dataProvider =
new ArrayCollection();profile1NewsAndSportAddLinksTilelist.dataProvider =
new ArrayCollection();profile1NewsAndSportSO = SharedObject.getLocal(
"profile1NewsAndSport");
if(profile1NewsAndSportSO.size > 0){
if(profile1NewsAndSportSO.data.profile1NewsAndSportaddList){
if(profile1NewsAndSportSO.data.profile1NewsAndSportaddList != "empty"){
var profile1NewsAndSportaddList:Array = profile1NewsAndSportSO.data.profile1NewsAndSportaddList.split(",");
var profile1NewsAndSporttempAC1:ArrayCollection = new ArrayCollection();
for each(var str:String in profile1NewsAndSportaddList){
for each(var obj1:Object in profile1NewsAndSportaddLinksAC){
if(str == obj1.label){profile1NewsAndSporttempAC1.addItem(obj1);
continue;}
if(profile1NewsAndSporttempAC1.length > 0){profile1NewsAndSportAddLinksTilelist.dataProvider = profile1NewsAndSporttempAC1;
if(profile1NewsAndSportSO.data.profile1NewsAndSportchoiceList){
var profile1NewsAndSportchoiceList:Array = profile1NewsAndSportSO.data.profile1NewsAndSportchoiceList.split(",");
var profile1NewsAndSporttempAC2:ArrayCollection = new ArrayCollection();
for each(var str2:String in profile1NewsAndSportchoiceList){
for each(var obj2:Object in profile1NewsAndSportaddLinksAC){
if(str2 == obj2.label){profile1NewsAndSporttempAC2.addItem(obj2);
continue;}
if(profile1NewsAndSporttempAC2.length > 0){profile1NewsAndSportLinkChoice.dataProvider = profile1NewsAndSporttempAC2;
else{profile1NewsAndSportReset();
private function saveprofile1NewsAndSport(event:MouseEvent):void{
var profile1NewsAndSportaddList:String = "";
if(profile1NewsAndSportAddLinksTilelist.dataProvider){
if(ArrayCollection(profile1NewsAndSportAddLinksTilelist.dataProvider).length > 0){
for each(var obj1:Object inprofile1NewsAndSportAddLinksTilelist.dataProvider){
profile1NewsAndSportaddList += obj1.label +
else{profile1NewsAndSportaddList =
"empty";}
profile1NewsAndSportSO.data.profile1NewsAndSportaddList = profile1NewsAndSportaddList;
var profile1NewsAndSportchoiceList:String = "";
for each(var obj2:Object inprofile1NewsAndSportLinkChoice.dataProvider){
profile1NewsAndSportchoiceList += obj2.label +
profile1NewsAndSportSO.data.profile1NewsAndSportchoiceList = profile1NewsAndSportchoiceList;
profile1NewsAndSportSO.flush();
]]>
</mx:Script>
<mx:Button click="profile1NewsAndSportReset()" id="reset" label="
Reset" y="5" height="25" x="5"/>
<mx:TileList id="profile1NewsAndSportLinkChoice" fontWeight="bold" dragEnabled="
true" dragMoveEnabled="true" dropEnabled="true" height="129" width="
650" top="10" left="519" columnCount="5" rowHeight="145" columnWidth="
125" backgroundColor="#000000" color="#FFFFFF"creationComplete="profile1NewsAndSportLinkChoice.selectedIndex=0"
/>
<mx:TileList id="profile1NewsAndSportAddLinksTilelist" fontWeight="bold" dragEnabled="
true" dragMoveEnabled="true" dropEnabled="true" height="129" width="
385" top="10" left="126" columnCount="3" rowHeight="145" columnWidth="125" backgroundColor="
#000000" color="#FFFFFF"creationComplete="profile1NewsAndSportAddLinksTilelist.selectedIndex=0"
/>
<mx:Button click="saveprofile1NewsAndSport(event)" id="save" label="Save Changes" x="
5" y="38" width="113" height="25.5"/>
<mx:Button x="126" y="147" label="Add" id="profile1NewsAndSportAddSelectedLinkButton" click="profile1NewsAndSportAddButtonClickHandler()"/>
<mx:Button x="519" y="147" label="Remove" id="profile1NewsAndSportRemoveSelectedLinkButton" click="profile1NewsAndSportRemoveButtonClickHandler()"/>
</mx:WindowedApplication>

Unable to install supporting objects(custom CSS/Images) through SQL

4.2.1
Hi there,
we have a Apex app which uses custom CSS/images loaded into shared objects CSS and image folders respectively. I followed the steps
http://nerd.net.au/29-apex-application-express/general-application/122-include-images-with-supporting-objects-on-apex-export-import
Now, this works fine when we manually import the application through application builder, it "prompts" if we want to install supporting objects, when yes is selected, everything gets installed.
MY problem is we have an automated patching process where the .sql application file gets installed but the supporting objects are not. So I tried bundling the supporting object as a separate .sql file but got an error
Testing options PL/SQL procedure successfully completed. declare * ERROR at line 1: ORA-20001: Package variable g_security_group_id must be set. ORA-06512: at "APEX_040200.WWV_FLOW_IMAGE_API", line 11 ORA-06512: at "APEX_040200.WWV_FLOW_IMAGE_API", line 31 ORA-06512: at
The supporting object is a button. Do I need to set the application id or security group id or something else?
begin
wwv_flow_api.g_varchar2_table := wwv_flow_api.empty_varchar2_table;
wwv_flow_api.g_varchar2_table(1) := '89504E470D0A1A0A0000000D494844520000009600000051080600000030EC5FEE000000097048597300000B1300000B1301009A9C1800000A4D6943435050686F746F73686F70204943432070726F66696C65000078DA9D53775893F7163EDFF7650F56';
wwv_flow_api.g_varchar2_table(2) := '42D8F0B1976C81002223AC08C81059A21092006184101240C585880A561415119C4855C482D50A489D88E2A028B867418A885A8B555C38EE1FDCA7B57D7AEFEDEDFBD7FBBCE79CE7FCCE79CF0F8011122691E6A26A003952853C3AD81F8F4F48C4C9BD80';
wwv_flow_api.g_varchar2_table(3) := '021548E0042010E6CBC26705C50000F00379787E74B03FFC01AF6F00020070D52E2412C7E1FF83BA50265700209100E02212E70B01905200C82E54C81400C81800B053B3640A009400006C797C422200AA0D00ECF4493E0500D8A993DC1700D8A21CA908';
wwv_flow_api.g_varchar2_table(4) := '008D0100992847240240BB00605581522C02C0C200A0AC40222E04C0AE018059B632470280BD0500768E58900F4060008099422CCC0020380200431E13CD03204C03A030D2BFE0A95F7085B8480100C0CB95CD974BD23314B895D01A77F2F0E0E221E2C2';
wwv_flow_api.g_varchar2_table(5) := '6CB142611729106609E4229C979B231348E7034CCE0C00001AF9D1C1FE383F90E7E6E4E1E666E76CEFF4C5A2FE6BF06F223E21F1DFFEBC8C020400104ECFEFDA5FE5E5D60370C701B075BF6BA95B00DA560068DFF95D33DB09A05A0AD07AF98B7938FC40';
wwv_flow_api.g_varchar2_table(6) := '1E9EA150C83C1D1C0A0B0BED2562A1BD30E38B3EFF33E16FE08B7EF6FC401EFEDB7AF000719A4099ADC0A383FD71616E76AE528EE7CB0442316EF7E723FEC7857FFD8E29D1E234B15C2C158AF15889B850224DC779B952914421C995E212E97F32F11F96';
wwv_flow_api.g_varchar2_table(7) := 'FD0993770D00AC864FC04EB607B5CB6CC07EEE01028B0E58D27600407EF32D8C1A0B91001067343279F7000093BFF98F402B0100CD97A4E30000BCE8185CA894174CC608000044A0812AB041070CC114ACC00E9CC11DBCC01702610644400C24C03C1042';
wwv_flow_api.g_varchar2_table(8) := '06E4801C0AA11896411954C03AD804B5B0031AA0119AE110B4C131380DE7E0125C81EB70170660189EC218BC86090441C8081361213A8811628ED822CE0817998E04226148349280A420E988145122C5C872A402A9426A915D4823F22D7214398D5C40FA';
wwv_flow_api.g_varchar2_table(147) := 'A514B7B6B6EA5AADA60B8582EAECEC54511471BD5EE7BEBE3EBF4E108FCA58FE9601580A68199FDAF12F8D1DDB5E3386221ADD8E3AF3CEC772A73505D60820C32BF0238E6DAF5D508DBAFFF2CFACE20C3E9A03E2789F3430B68D6DAF641BF33D8D6D63C0';
wwv_flow_api.g_varchar2_table(148) := '1ADBC68035B68D016B6C1BDBC68035B6BD46B6FF3B0074B1DD40306DC6CD0000000049454E44AE426082';
end;
declare
    l_name   varchar2(255);
begin
    l_name := 'logo.png';
wwv_flow_api.create_or_remove_file(
     p_name=> l_name,
     p_varchar2_table=> wwv_flow_api.g_varchar2_table,
     p_mimetype=> 'image/png',
     p_location=> 'WORKSPACE',
     p_nlang=> '0',
     p_mode=> 'CREATE_OR_REPLACE',
     p_type=> 'IMAGE');
end;
/

Thanks Fac586! I did follow the process on those lines and was able to successfully get the images, application installed. The CSS which just had
body {
     background-color:#000000;
}Was also applied. However, it for some reason does not work. Looks like the CSS is not getting loaded. When I delete the CSS and upload it again through the shared components->CSS folder, it works fine. Not sure what the solution is!
Oh and by the way, thanks a ton for helping everyone!
Cheers,
Ryan

Some nagging CSS image rollover questions

Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
I guess I need a good pointing to a image rollover tutorial for Horizontal inline navigation.
Many Thanks for any help. It just seems like I play a guessing game on the pixel details when I'm trying to construct these types of mavigation.
Thanks, Frank B.

brightbelt wrote:
Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
Probaby because you are not taking into account padding, borders and margins which add to the width of the container/s
brightbelt wrote:
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
Mathematicis is critical to the set up. As stated padding and borders, margins etc add to the overall width of a container. So if the containers are too wide to fit in a specific width they will be thrown to the next available space, usually to the next line.
Example: a container which is set at a specific width of 90px and has padding left and right of say 8px is really 106px wide. Therfore if you're trying to allocate space for 6 buttons where each is 90px wide and has 8px padding left/right you need to allocate a space 6 x 106px plus any borders.
brightbelt wrote:
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
Personally I would never recommend setting padding in ems. Certainly ems and px don't mix and match very well.
brightbelt wrote:
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
li's do have default padding and margins set so these need to be zeroed out.
li {
margin: 0;
padding: 0;
As an experiment copy all the code below, open a new Dreamweaver document and paste it into code view, save it to your site folder with the name navigationTest.html. Run it through a browers and see what the results are like.
<!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>Untitled Document</title>
<style type="text/css">
#navcontainer {
width: 775px;
margin: 0 auto;
background-image: url(navUp.gif);
background-repeat: repeat-y;
overflow: hidden;
#navcontainer ul {
width: 547px;
padding: 0;
margin: 0 auto;
background-image: url(navUp.gif);
#navcontainer ul li {
width: 90px;
float: left;
margin: 0;
padding: 0;
list-style: none;
#navcontainer ul li a {
background-image: url(navUp.gif);
background-repeat:no-repeat;
color: #fff;
text-decoration: none;
font-weight:bold;
width: 90px;
display: block;
text-align: center;
float: left;
border-right: 1px solid #069;
padding: 5px 0;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
</style>
</head>
<body>
<div id="navcontainer">
    <ul>
    <li><a href="index.htm" style="border-left: 1px solid #069;">Home</a></li>
    <li><a href="Contact_Us.htm">Contact</a></li>
    <li><a href="Profiles.htm">Profiles</a></li>
    <li><a href="Catalogue.htm">Songs</a></li>
     <li><a href="BBL.htm">BBL Label</a></li>
    <li><a href="Jazz_links.htm">Links</a></li>
    </ul>
</div>
</body>
</html>

CS6 default image import is different than CS5

The default image import option for CS5 was "Crop" now with CS6 it's "Bounding Box"
Any ideas on how to change the default so I don't have to keep using the dialogue box?
Thanks

I just figured it out.
I was actually replacing an image and not importing. And I was using the link button in the links window, not the Command D shortcut.
The reason I used the term "image import" in the title of my question is that the dialogue box used when replacing an image says "Show Import Options". This is where I found the Crop option and this is the procedure that would not "stick".
I remembered that I could use Command D also to replace an image and that since this is the Place keystroke then the window would give me the same option. I chose "Crop" in the dialogue box, successfully replaced the image, closed InDesign, opened InDesign, used the link button in the links window to replace my image and Voila! it stuck.
So, just in case somebody else asks, to make it stick you MUST use the Command D shortcut or the Place menu item. Using the link button in the links window will not make your choice stick.
Thanks for your help Peter, I can see now why you were pulling your hair out on this, you must have been assuming I was using the Place menu item.

HTML to Image Format

If I run this class:
import java.awt.*;
import java.io.*;
import javax.swing.*;
public class Main {
    public static void main(String[] args) throws FileNotFoundException,
            IOException {
        StringBuilder htmlCode = new StringBuilder();
        FileReader htmlFileReader = new FileReader("test.htm");
        BufferedReader htmlFileBufferedReader =
                new BufferedReader(htmlFileReader);
        String aLine;
        while ((aLine = htmlFileBufferedReader.readLine()) != null) {
            htmlCode.append(aLine + "\n");
        JFrame frame = new JFrame("test");
        frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
        JEditorPane editorPane = new JEditorPane("text/html",
                htmlCode.toString());
        editorPane.setMaximumSize(new Dimension(640, 700));
        editorPane.setSize(new Dimension(640, 700));
        editorPane.setBackground(Color.WHITE);
        editorPane.setPreferredSize(new Dimension(640, 700));
        frame.add(editorPane);
        frame.pack();
        frame.setVisible(true);
}Then the HTML file displays correctly to the screen.
How could I get it to give me an array of pixel colors or something else that I can take as an image and input into a PDF Generator like iText or PDFBox.
Also, could we get a better resolution or anti aliasing in order to make the it look better for printing?

This has been moved to the Swing forum under the title "High Resolution HTML to Image Conversion"

Html, css, images import to indesign

Similar Messages

Maybe you are looking for