Slicing to HTML struggles

Hi,
I can write code and work with databases, but for some reason I just can't slice up a .psd file and get it in to my HTML. I posted this message in the Photoshop forum but I should have posted it here as I have Fireworks CS5. I can slice simple images but right now I'm trying to figure out how to slice up this rectangular search bar that has a gradient and an input box for the user to type in keywords. If possible, please look at the attached image.
The search bar should span the width of the available space, the text should be editable and I should be able to type into the input box.   Right now it's in PSD format layered. How can I slice up this artwork in a way where I can build the HTML. Ultimately, I'd like my HTML to be something like the below and use CSS to handle the background images, etc. I just can't seem to figure how to do the Fireworks part.
<div id="searchbar">
     <div>
       <h2>Search Product Catalog</h2>
     <input class="customInput" type="text" name="searchKeywords" id="searchKeywords" />
   </div>
</div>
Any help would be huge, and I think if someone can help me I can just get it down from here on out.   I've Googled for tutorials but most are just showing how to slice, but they don't take the slice all the way to the HTML side. A few questions I constantly struggle with:
The above image has a gradient and I'm unclear on do I just take a vertical rectangle sample of it and make it repeat in CSS? Or do I export the whole gradient image?
The search input box has a background gradient. What would the file look like that I would export from my graphics program to make this work in the HTML?
The graphic has borders already in the .PSD file, should I recreate those in CSS or do I retain the borders when I export it from Fireworks?
How many slices would I need? I guess this varies?
Regards,
-ws

It would probably be easier to add the borders in CSS. If you do them with images, then you need to have a left and right edge, too. A CSS border property on the div is much easier and cleaner.
Here are some roundups of tutorials on styling forms:
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
http://www.noupe.com/php/beautiful-forms.html
http://www.smashingmagazine.com/2006/10/25/css-techniques-tutorials-layouts/ (scroll down to the form section)

Similar Messages

Slicing an image to be used in Dreamweaver html

It's been a long time since I used slicing images in Photoshop. It doesn't appear that Image Ready is there anymore. I use Photoshop CS3. I want to create a nav bar for an html email that will render correctly in Outlook 2007. It has been suggested that a sliced image could accomplish that. Is there a straightforward document that could walk me through the steps to accomplish this? Using the Photoshop "help" confuses the heck out of me.
The web version of the html email is: http://www.theshimogaproject.com/email/riverrun-guests-email.html

I'm honestly not sure what you are trying to do. The page as such could be perfectly taken and sent "as is". It doesn't seem to contain any of the usual problematic items that make MS' HTML rendering engine go whacko. In addition, it is so simple, you could convert a screenshot to a GIF and it would stil look okay. That aside, simply look up the knife tool and Save for Web and Devices in the help files when dealing with web content.
Mylenium

Open html of sliced images in template

Hi,
I have a pretty ok site with frames and I have finaly decided
to change it to a noframe site even though it works great. Everyone
is telling me to !
I have created a template from the selection in CS4.
In photoshop I sliced an image that I want as menu bar but
how do I open the "save for web" html that contains all the images?
With a frame I just open in frame but I just cannot figure it
out.
Any help is highly appreciated !
BR,
Peter

Or I am not the only one in the world that talks to thenselves.
That's not necessarily bad - unless you carry on a three-way conversation. Then its time to consider the white coat with the cuffs of the sleeves sowed in the back.
NOTE: This is meant as a Joke. (although it is true I do talk to myself from time to time. Its called thinking out loud.)

Adding "more" slices to already sliced html

Hi there,
basically, i've created a web page with a sliced photoshop
page. but now I need to add an extra button. Is there any way I can
use the already sliced page in dreamweaver and and just add a
couple more slices done in photoshop? Obviously, I need the layout
to stay the same, just have the new slices added.
Thanks a million.

There's no point in duplicating "by hand" the table structure
Photoshop
makes. I suggest you step back and look at the structure of
your design
and decide what kinds of containers the various elements
should be in.
If you are comfortable with tables, then, generally speaking,
nested
simpler tables are better than a single complex table.
<div> containers are not without their quirks, but
allow more
flexibility while developing your design if you control their
properties
with CSS, which also allows for global edits to your entire
site from a
single document if you plan it carefully.
And some kinds of content (like a top-level header,
<h1>) doesn't have
to be in any sort of container since they already have
intrinsic display
properties which you can use, or modify with CSS.
This is a huge subject. If you can, step back and get some
basic
knowledge of HTML and CSS. This is the only way you can get
in a
position to work out the best methodology for creating your
pages. You
already know that letting Photoshop do it isn't a good
method. So that's
one to check off your list.
JMS

Slicing an image to be used as a nav bar for html email

The html email that I've created renders as designed in most email clients. It doesn't in Outlook 2007. It was suggested that I slice an image for the nav bar so it displays horizontally as designed instead of vertically.
It's been a long time since I used slicing images in Photoshop. It doesn't appear that Image Ready is there anymore. I use Photoshop CS3. Is there a straightforward document that could walk me through the steps to accomplish this? Using the Photoshop "help" confuses the heck out of me and when I asked this question in the Photoshop forum, many looked at it but I've had no responses. Or could it be done in Dreamweaver somehow?
The web version of the html email is: http://www.theshimogaproject.com/email/riverrun-guests-email.html

You can't use DW to slice an image. Do you have Fireworks? It's really easy to do it in Fireworks, that's what I would use. If you need to use PhotoShop, a quick Google search, "slicing images in photoshop," return plenty of tutorials that you can choose from.

Sliced Images are Broken after Converting HTML into a PDF

I am trying to create a PDF of a webpage and after Acrobat converts it, the page is broken apart in multiple pieces. I noticed that this is happening to images that are sliced. Does anyone know how to prevent this from happening?
Thanks!

Just to clarify, I only want a PDF image of the web page -no functionality of it. The equivalent of a "print-screen" of the page without the IE window/toolbar etc. I need to have it in PDF format for printing purposes.
ASP code is also appearing in the PDF and I don't want this to occur.
Ver: Adobe Acrobat Professional
OS: WinXP Professional

Converting a Illustrator Sliced HTML Template to a Dreamweaver Template?

Has anyone had any experience with this?
If so, does it work for BC? I am curious if I can even do this.

I have read online FireWorks is the best for slicing a website template or photoshop. Which do you guys reccommend? Also, I do have FW, if I use this to slice a web template out of it... is this compatible with BC?

How to send HTML email with variable substitution in the email body section?

Does anyone have some scripting examples that create a HTML formatted e-mail with the ability to have some fields be variables?
I'm familiar with updating a XML document using a template file and the "keyword transform" function in the script.
(Like setting an emergency close for a queue for example)
I've also successfully written a script that sends an e-mail with a .wav file attachment. I think I have the basics down on the e-mail part.
Using the keyword transform gives me an xml document that shows the tags as well as the desired variable. Functional but not very attractive
The issue I'm really struggling with is the formatting of the e-mail body.
Is there a way to have a "prettier" document with some basic HTML tags that allow the same function?
For example I'd like a sentence in the body of the e-mail to say
"Call received from number <VariableOfCallingNumber> at <TimeVariable>
I can do this in the subject easily enough but adding together some strings and variables.
I could do the same thing in the e-mail body DOC[], but as I understand it, I could only get 1 line so it would be pretty limited
Can anyone point me in the correct direction?
Thanks !!

sorry, not possible
http://stackoverflow.com/questions/5620324/mailto-with-html-body
https://www.google.com/search?rlz=1C1CHFX_enUS566US566&{google:acceptedSuggestion}oq=mailto+with+mime+type&sourceid=chro…

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

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

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

</body>
</html>

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

HTML DB Select Statement in HTML HEADER

Can I put a select statement that return a value in the HTML HEADER?
If I can How? Would point the way.
Second Question
Can I call store function from HTML HEADER? Help!

I have a report screen that has Delete button. Each record on the screen has a checkbox
What I would like to do is:
when the user puts a check in the checkbox and click the Delete button. a message will pop up and ask "Are you usre?" If the user click Yes then the system will check for child record. If there no No child record go head delete the record. If there is a child record then another message pop up and ask "This Schedule is currently active. Do you really want to delete this." If the user answers Yes then it will delete both parent and child records. If the user answer no then no record will be deleted.
I have been struggle with this in HTML DB for a bit, but I did not find the solution yet. Please Help!!!!

Fireworks HTML aligning problem

Hi, i'm having problems with aligning Fireworks HTML objects
with either an image set as a background or a regular image.
I built a layout on fireworks, which I then cut into 4 parts.
Banner, Nav bar (which will be linked to named anchors on
dreamweaver), body (which will hold the main content), and footer.
I created a table in Dreamweaver. The top row has no colomns. It
holds the banner. The second row has 2 colomns. One for the nav bar
to the left, and one for the body to the right. The bottom row has
no colomns. It holds the footer. The banner and nav bar were
imported as Fireworks HTML since they are complete with slices and
everything. I was hoping to add content to the body and footer
using Dreamweaver, so I imported those as Background Images for
those particular cells since the only way to write on top of an
image is if it is set as a background. The nav bar I imported from
Fireworks HTML seems disconnected from the rest of the website.
There is a small 1pixel space between the nav bar, and the body to
its right, and also between the nav bar and the banner. Also, the
banner seems to be aligned maybe 1 or 2 pixels more to the left
than the body. It seems like the Fireworks HTML I imported wont
aligne itself perfectliy with the rest of the website. Is there any
way to fix this?

"quixx" <[email protected]> wrote in message
news:f3vnm6$i79$[email protected]..
> It seems like the Fireworks HTML
> I imported wont aligne itself perfectliy with the rest
of the website. Is
> there
> any way to fix this?
Yes, build the whole page in DW itself, don't export the html
generated from
Fireworks.
From what you describe it would be a straight forward process
in DW. Create
your tables with enough cells/rows to create either the nav
and then the
content area in DW and then insert your sliced images into
the cells as
needed.
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au

Tiling or slicing large images in tables? Completely outdated?

I'm working through the XHTML tutorials on Lynda.com
The instructor does a demo of slicing a large image with sections that have animated .gifs. He slices the static portions and slices the animated portions and then combines them in a 3 slice x 3 slice table.
He says "I still prefer to do this with tables, since it's what it was designed for."
I know tables are outdated, but I'm not sure if it's in all respects. Like if I was going to do a data table, I certainly would use tables...
Im not sure when this video was made, but is it still in practice and a good practice?
He then shows a similar demo of how to combine slices using CSS. Is this outdated too? Are people still slicing large images?

Unlike print design where everything is static and unchanging, web pages need to be flexible and web accessible to accommodate all users, displays and devices.
Image slices have their plusses and minuses. Occasionally, you may need them to create a flexible container that resizes to content.
     3 image slices in a CSS layout ~
     http://alt-web.com/DEMOS/Image-slices-in-a-CSS-based-layout.shtml
That said, you can add visual interest to web pages without a lot of images using CSS.
     2-image web page design ~
     http://alt-web.com/TEMPLATES/2-image-web-design.shtml
Finally, have a look at CSS Zen Garden where the power of CSS is demonstrated.
Each page contains identical HTML markup but with wildly different styles.
Hopefully this will inspire you to move away from tables and use CSS for primary layouts.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How to display a text file in a html page?

I have written a servlet that executes a batch file whose output is saved to a txt file. I am attempting to display content of the text file as a html page from the servlet but am struggling I have attempted to read the file and output it as shown below but it is not displaying the correct data
Appreciate some help
Thanks in advance
Amjad
Runtime r = Runtime.getRuntime();
Process p = r.exec("C:\\Condor\\test\\QueStatus.bat");
PrintWriter out;
String title = "Que Status";
response.setContentType("text/html");
out = response.getWriter();
FileReader fr = new FileReader ("C:\\Condor\\test\\output.txt");
for (int chr = fr.read(); chr != -1; chr = fr.read()){
out.print(chr);
}

Couple of things. First you should search the forums for how to properly exec a dos batch file. There are some problems you may run into especially with io. I suspect you may not actually be running that batch file at all.
I would test outputing a text file separately from execing the batch file.
Here is some code so you don't have to output 1 char at a time. Setting the content length and closing the output stream might help.
File downloadFile = new File("c:\\blah\\blah\\blah");
response.setContentLength((int)downloadFile.length());
response.setContentType("text/html");
ServletOutputStream out = response.getOutputStream();
FileInputStream fis = new FileInputStream(downloadFile);
byte[] buffer = new byte[1024];
int bytesRead;
while ((bytesRead = fis.read(buffer)) != -1) {
out.write(buffer, 0, bytesRead);
fis.close();
out.close();

How can I embed a HTML document onto my webpage?

What I am trying to do: I am trying to make an image that has links to urls from different parts of the image.
What I have done so far: I have built a photoshop image to embed on my webpage, following the instructions offered by many online forums, but cannot actually embed it as it isn't a url.
Firstly, I sliced up an image, adding url's and alt tage etc to each slice. Then I did:
File > Save for web > (Prest: JPEG High) > Save > (entered my file name) Format: HTML and Iamges > Save
When I locate my file where I saved it, it has been saved as a Chrome HTML Document, but I can't then embed this on my website, using the 'embed code' tool I normally use. I presume this is because it doesn't begin with http:// ?
Here is the HTML document I have made: file:///C:/Users/Daniel/Desktop/UK%20map%20interactive/Afternoon/UK-map-locations.html
(If you can see this) This is the image I want and the links are working too but it's getting this onto an existing webpage.
Other pages I have seen have talked about iamge maps, but I take it using the slice tool is better for what I am trying to acheive?
Any suggestions/help would be greatly appreciated.

One: Users can't see links on your local desktop. You would have to upload the files somewhere. Two: Images generally don't contain links. URLs are meta information build around the image in HTML. Three: Because of the previous point, whether you use sliced images or an image map doesn't matter, if you have no way of inserting the information into the native HTML structure of the web pages. If at all, you would open the HTML file in a suitable editor like Dreamweaver (or even a basic text editor) and copy&paste it into the web page sourcve code, but you'd still have to upload the image(s). The rest we can't know. You have not provided any link to the web site or told us which hosting provider you use. From your description it sounds like one of those "free" providers that restrict user's options to customize to the bare minimum and the rest is based on templates and plastered with advertising. In any case, the solution is not in Photoshop and you would have to read up on web design basics, HTML, CSS and al lthat on a more general level or review your hosting provider's guides on how to set all this up.
Mylenium

Please help me! I am struggling with the mesh tool!

So I want to make this chair look like it does in the picture, but I cant! There is a chapter in my Illustrator CS3 book explaining how to use gradient mesh and mesh tool, but it doesnt help me at all. I am clueless! The tutorial says that I can create points in the mesh simply by clicking with the mesh tool within an object, but when I try to do that, the pointer is "crossed out". I can only add extra points on lines or edges, but not on empty space within an object. What gives? Why is it that others can do it an I cant? Forgive me if I sound a little too upset, but I've been struggling with this for days and I cannot find an answer.
In this tutorial right here: http://www.layersmagazine.com/illustrator-gradient-mesh-tool.html the guy just clicks in empty spaces creating intersections. In my case it is impossible.
PS: Please look at an attached file and tell me what would be the best way to go about coloring this chair. Maybe I am doing this completely wrong? (I only started learning illustrator about 5 weeks ago)
Sorry for the background template being of poor quality, but this was taken from a book and scanned, so it's the best I could do.

You know something I think there should be a behavioral change in this case. To my way of thinking this option should automatically be disabled if you select the Mesh tool. If for some reason you want the mesh tool not to behave the way there might be a toggle or a double click to get the preferences for the tool 's behavior itself. I can see where this behavior can be useful but there needs to be a toggle.
Selecting the anchors for adding color with out accidentally creating a new mesh division is good thing but you need to be able to work both ways.
What do you think Scott Weichert you use the tool extensively, am i wrong?

Slicing to HTML struggles

Similar Messages

Maybe you are looking for