Using the slicing tool for Web output

New Here ,
May 17, 2021 May 17, 2021

Copy link to clipboard

Copied

I have a simple artboard that is divided into 10 slices...

Screen Shot 2021-05-17 at 5.00.40 PM.png

 

To create the export the slices for Web, I choose "Save for Web (Legacy"

Choose output to be in JPG

And when I hit the preview table the output isn't in table format. See below...

What am I doing wrong?

 

 

<html>
<head>
<title>Art & Illustration</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div style="position:absolute; left:0px; top:0px; width:371px; height:187px;">
<div style="background-image:url(Untitled-1_01.jpg); position:absolute; left:0px; top:0px; width:150px; height:187px;" title="">
</div>
<div style="background-image:url(Untitled-1_02.jpg); position:absolute; left:150px; top:0px; width:221px; height:104px;" title="">
</div>
<div style="background-image:url(Untitled-1_03.jpg); position:absolute; left:150px; top:104px; width:221px; height:17px;" title="">
</div>
<div style="background-image:url(Untitled-1_04.jpg); position:absolute; left:150px; top:121px; width:221px; height:16px;" title="">
</div>
<div style="background-image:url(Untitled-1_05.jpg); position:absolute; left:150px; top:137px; width:221px; height:14px;" title="">
</div>
<div style="background-image:url(Untitled-1_06.jpg); position:absolute; left:150px; top:151px; width:129px; height:36px;" title="">
</div>
<div style="background-image:url(Untitled-1_07.jpg); position:absolute; left:279px; top:151px; width:19px; height:36px;" title="">
</div>
<div style="background-image:url(Untitled-1_08.jpg); position:absolute; left:298px; top:151px; width:20px; height:36px;" title="">
</div>
<div style="background-image:url(Untitled-1_09.jpg); position:absolute; left:318px; top:151px; width:18px; height:36px;" title="">
</div>
<div style="background-image:url(Untitled-1_10.jpg); position:absolute; left:336px; top:151px; width:35px; height:36px;" title="">
</div>
</div>
</body>
</html>

TOPICS
Draw and design, Tools

Views

115

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 17, 2021 May 17, 2021

Copy link to clipboard

Copied

Tables in web design are a thing of the past. They are not used anymore.

 

Back in CS3 (and maybe a couple versions after that) you could configure the output HTML. You can't do that anymore. The only way to get the HTML at all is to copy it from that browser preview. The HTML that Illustrator generates has been deprecated for years, so they just abandoned doing it at all and you are basically stuck with the most modern HTML code it was ever capable of.

 

Use a web editor to code the HTML.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 18, 2021 May 18, 2021

Copy link to clipboard

Copied

LATEST

Thank you!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines