Welcome Guest ( Log In | Register )

Outline · [ Standard ] · Linear+

 Software to simplify html/java scripts codes, Removing thoz unneccessary attributes

views
     
TSGyokumen_Koushu
post Mar 25 2006, 11:01 AM, updated 19y ago

To hell with circumstances; I create opportunities!
******
Senior Member
1,217 posts

Joined: Sep 2004
From: 127.0.0.1



Software to simplify html/java scripts codes
Removing thoz unneccessary attributes


Hi all, i wld like to know if there are stuff like dat is ever existed.
First of all, i wld like to tell ya guyz bout my scenario here:

I have created a webpage oni solely using photoshop. It'll generate da html codes for ya after you've done a final task .....which is slicing every pixels in ur masterpiece. All u have to do is jz copy + paste thoz markup codes to ur clipboard.

But da problem i've experienced here is dat da codes generated are a lil complicated and even lotsa unneccessary attributes in certain tags are included.

Let's say <table width=0 height=0></table>
I jz wanna remove thoz width + height. Check out da examples on da purple highlights in da 1st screenshots i've posted. Say, simply plain as if human-writen in notepad. Any software can do this, plz dun posts thoz silly replies suggestin like y nt remove it urself manually ?! Thx in advance.
______________________________________________________________________

Another q's regarding PS [Offtopic !!]:
Some problems regarding slicing in photoshop CS2 (Strictly to thoz pros to reply):

As u knew dat every pixels gotta b sliced in order for PS to convert them in markups in table tags.

There's auto-slicing which will automatically fill in all of rest of the pixels dat u've not user-sliced them urself. As a result, thoz auto-sliced pixels are generated in markup as table tags using "blank spaces" gif. Any solutions not to use them but still can managed to retain da exact position of all da layers .....in other words, displays da same thing in da browser ?

Check out thoz texts highlighted in yellow on da 1st screenshot.
Den da frame highlighted in da 2nd screenshot.

user posted image
user posted image

This post has been edited by Gyokumen_Koushu: Mar 25 2006, 11:12 AM
asellus
post Mar 25 2006, 11:12 AM

#gompusas
Group Icon
Elite
4,541 posts

Joined: Jan 2003
From: BSRPPG51 Access Concentrator


Don't remove those tags, unless you know what you are doing. From all the entries, only the attributes for the <body> tag can be safely removed, probably. The ones with spacer.gif should not be removed.
TSGyokumen_Koushu
post Mar 25 2006, 11:28 AM

To hell with circumstances; I create opportunities!
******
Senior Member
1,217 posts

Joined: Sep 2004
From: 127.0.0.1



QUOTE
Don't remove those tags, unless you know what you are doing. From all the entries, only the attributes for the <body> tag can be safely removed, probably. The ones with spacer.gif should not be removed.


It seems u dun reli quite get wat i meant. But neway thx 4 ur reply. Probably ?!
I noe dat thoz lame body tags attribute can b removed easily, 101% guarannteed can b removed wit no probs.

2nd, i noe dat they can't be remove jz like dat.
Oh c'mon man, da ps generate thoz as "spacing alignments" like wat v did in "conventional div @ paragraph alignin in plain html"
In short, messing wit thoz means messing da ur alignments in ur notepad.

In a nutshell - well, i'll tried to summarize them to eng:-

Q1: Any software to delete thoz attributes i meant ?
Q2: Is there any ways to code em not using spacer.gif ? [Nt whether it's save to delete them anot ? (which is definetely not). Oni thoz ppl dat design wp wit PS noes dis ...
sunsuron
post Mar 25 2006, 01:24 PM

Regular
******
Senior Member
1,334 posts

Joined: Nov 2004



The HTML auto-generated by Photoshop are meant to be edited. In the software developer point of view, they can not come with a software product that satisfy all the need so they came with the general solution which is in the end require you the webpage developer to finally edit the source manually. Yes. I said manually again even you hate it for there is no such thing as auto-remove tag attributes except Edit-->Find & Replace available in any good HTML editor such as Macromedia Dreamweaver.

You should know that these attributes come with purpose. You said it is unnecessary. I said, it's depend. That's why assellus brings the word 'probably' in the first place.

Knowing what you want for the final output of your page is based on how good you know HTML and not how good you know photoshop or else. You are the web page developer, you should master both. That might do pain in the ass but hey, who doesn't.

Saying that, before you decided to remove those attributes, here are a good explaination for leftmargin, topmargin, marginheight, marginweight, cellpadding, cellspacing.

http://www.htmlcodetutorial.com/document/_..._TOPMARGIN.html
http://www.htmlcodetutorial.com/tables/index_famsupp_29.html

When you know how these attributes works, then you can decide freely whether these attributes are necessary or not. Then you can start removing it, manually or Edit-->Find & Replace.

As for the second scenario, if you don't like spacer.gif, you can use CSS
CODE

<!-- with non breaking space -->
<td style="height:33px; width:1px;">&nbsp;</td>

or
CODE

<!-- without non breaking space -->
<td style="height:33px; width:1px;"></td>

or if it's still doesn't fix, just remove every <td> ... </td> tag that contains the spacer gif and see how it goes. smile.gif
shockw@ve
post Mar 25 2006, 03:04 PM

d[-_-]b
Group Icon
VIP
1,889 posts

Joined: Jan 2003
-moved from Software to Codemasters-

asellus and sunsuron has explained it pretty clearly. You're probably better off editing the code manually rather than finding a software to perform miracles.

N u cld probably get ppl to understnd u better by not typing like this as it's nt ezly readable. Thx.
asellus
post Mar 25 2006, 03:12 PM

#gompusas
Group Icon
Elite
4,541 posts

Joined: Jan 2003
From: BSRPPG51 Access Concentrator


RAD tools like Dreamweaver and ImageReady use the spacer.gif for ease of use of WYSIWYG table design. Some browser has problems rendering the tables if the spacer.gif is removed. The whole spacer.gif thing can be removed if you are skillful in designing websites without aids of WYSIWYG tools.

The removal of items you wants can be automated with advanced search tools in Dreamweaver. Still has to be done manually.
TSGyokumen_Koushu
post Mar 25 2006, 09:24 PM

To hell with circumstances; I create opportunities!
******
Senior Member
1,217 posts

Joined: Sep 2004
From: 127.0.0.1



QUOTE
When you know how these attributes works, then you can decide freely whether these attributes are necessary or not. Then you can start removing it, manually or Edit-->Find & Replace.

As for the second scenario, if you don't like spacer.gif, you can use CSS
CODE

<!-- with non breaking space -->
<td style="height:33px; width:1px;">&nbsp;</td>

or
CODE

<!-- without non breaking space -->
<td style="height:33px; width:1px;"></td>

or if it's still doesn't fix, just remove every <td> ... </td> tag that contains the spacer gif and see how it goes.


1st of all, thanks alot for "deep" explaination. Really appreciate that.
Gee, im still new in this kind of stuff. Therefore, thought there's a simplifer markup generator out there which is up for grab.
Cz da code generated in photoshop is totally different from others [seen only ...never really get a hold on any of those s/w]

Wat's da difference between da css table column style with @ without nbsp ? Well, this IS somethin that i really wanna hear .....after ur long lecture. lol

FYI, im studyin in e-commerce .....jz started my 3rd sem which has this WPD subject. However, we were restricted to use only text-editor ....html/xhtml/css and javascript only. But wanna try my luck to design em using PS then only find "those s/w i meant earlier".
So u shld know by nw, i guest -dat im new in PS and html. Html jz so-so. Whereas for PS, only learnt 3 days by watching video tutorials. Da main reason i wanna use PS, is coz it stresses on designs and i wanna insert thoz javascript animations rollover.

Guest i've gotta edit em all by myself.
Thx neway. I'll pm ya if i need any help.


silverhawk
post Mar 25 2006, 10:07 PM

I'm Positively Lustrous
Group Icon
Elite
4,738 posts

Joined: Jan 2003


Designing in PS is not a bad thing. Just don't use it to generate code.

The reason &nbsp; is added is because some browsers will not render the cell if there is nothing in it. That's why we add the &nbsp;. However it sometimes breaks the layout because the space taken by &nbsp; is bigger than expected. That's why spacer.gif is often used instead... its result is more consistent.

All that said, you SHOULD NOT be using tables to layout the page. CSS should take control of how your page is presented. Your html should only contain the structure of the content.
TSGyokumen_Koushu
post Mar 26 2006, 12:41 AM

To hell with circumstances; I create opportunities!
******
Senior Member
1,217 posts

Joined: Sep 2004
From: 127.0.0.1



QUOTE
Designing in PS is not a bad thing. Just don't use it to generate code.

The reason &nbsp; is added is because some browsers will not render the cell if there is nothing in it. That's why we add the &nbsp;. However it sometimes breaks the layout because the space taken by &nbsp; is bigger than expected. That's why spacer.gif is often used instead... its result is more consistent.

All that said, you SHOULD NOT be using tables to layout the page. CSS should take control of how your page is presented. Your html should only contain the structure of the content.


Okie ...got it - bout da nbps thingy.
PS codes indeed are all tables .....to layout every single pixels in da doc.
U've mentioned not to use PS to generate codes. Can ya plz tell me more bout dis ? Den how am i supposed to get thoz codes ?

Well, i jz started in PS and normally jz export those layers + slices ......in layer coms to files. Savin html and images. So wat's da way not to use PS to generate thoz codes ? FYI, i've not finished my video tutorials yet. ^^
Jz till slicing and linking everything.
silverhawk
post Mar 26 2006, 01:24 AM

I'm Positively Lustrous
Group Icon
Elite
4,738 posts

Joined: Jan 2003


There are probably faster methods... but being someone who's a veteran MS paint user before switching to Photoshop i manually slice and extract images i need. Some background images don't have to take up the full width, you can just slice a small portion out and repeat it.

As for not using tables, that's a difficult area i must say. Doesn't hurt to learn though smile.gif
Take some time to read the links in here: http://css-discuss.incutio.com/?page=CssLayouts

This would mean you type out the xHTML yourself and also the CSS.
A good CSS reference: http://www.w3schools.com/css/css_reference.asp

I will not lie to you, this method takes more effort to learn. Its a little less intuitive, but once you understand it ,its way more flexible than table layouts. Not to mention its the right way to design a website. When i write the article on why its the right way to design websites... i'll link it here for you.
TSGyokumen_Koushu
post Mar 26 2006, 11:29 AM

To hell with circumstances; I create opportunities!
******
Senior Member
1,217 posts

Joined: Sep 2004
From: 127.0.0.1



QUOTE
There are probably faster methods... but being someone who's a veteran MS paint user before switching to Photoshop i manually slice and extract images i need. Some background images don't have to take up the full width, you can just slice a small portion out and repeat it.

As for not using tables, that's a difficult area i must say. Doesn't hurt to learn though smile.gif
Take some time to read the links in here: http://css-discuss.incutio.com/?page=CssLayouts

This would mean you type out the xHTML yourself and also the CSS.
A good CSS reference: http://www.w3schools.com/css/css_reference.asp

I will not lie to you, this method takes more effort to learn. Its a little less intuitive, but once you understand it ,its way more flexible than table layouts. Not to mention its the right way to design a website. When i write the article on why its the right way to design websites... i'll link it here for you.


Den wat's da "probably faster methods" ? lol
My dis sem is only 7 weeks long ...nw already week 4.

Well, slicing + extraxting only thoz needed [gif/jpeg]. Dat's exactly what i had in mind. But my command in html n css is poor. Moreover, i really hate aligning them via table tags. Therefore, didn't really use dat way as i nvr did knew css can align em =/ (seriously ......jz learnt basic text layout)

U wldn need to tell me that .....lol
It'll really sore my eye to read all those. Dat's why i've learnt from video tutorials. Step-by-step,fast n interactive. Jz fnsh dled one.

In a nutshell, wat u guyz really meant by "da rite way to align layouts" is using css. Lotsa forumer said doin ways wit my newbie method is not rite but didnt tell wat is rite. Thx alot. Err, hw bout dis ....seems dat u r a pro, can ya help me with my assignments [all in psd] ? lol

Btw, out of curiosity, any software aligns layout wit css ?
No wit html tables.
silverhawk
post Mar 26 2006, 12:51 PM

I'm Positively Lustrous
Group Icon
Elite
4,738 posts

Joined: Jan 2003


As far as i know, there is no software that can align your layout with CSS because aligning with css is a little harder. For tables they can create rows/columns based on how you slice.. aligning with CSS isn't like that.

CSS alignment is more like having boxes and positioning them. You can either make them overlap, place them side by side etc. So as you can see, the very concept of it is different.

No, i will not do your assignment for you. I will help guide you but i will not do it for you.
TSGyokumen_Koushu
post Mar 26 2006, 02:58 PM

To hell with circumstances; I create opportunities!
******
Senior Member
1,217 posts

Joined: Sep 2004
From: 127.0.0.1



QUOTE
As far as i know, there is no software that can align your layout with CSS because aligning with css is a little harder. For tables they can create rows/columns based on how you slice.. aligning with CSS isn't like that.

CSS alignment is more like having boxes and positioning them. You can either make them overlap, place them side by side etc. So as you can see, the very concept of it is different.

No, i will not do your assignment for you. I will help guide you but i will not do it for you.


Den guest "if" i really wanna design sites for long term, den i'll reli gotta resort to css.
Hey, chill bro. Jz kd. Err, tho im a newbie ...im not a noob, handing my entire masterpiece to u - jz to align biggrin.gif


r4ydc24
post Mar 27 2006, 09:49 AM

Level of Noobness
******
Senior Member
1,067 posts

Joined: Nov 2004
From: Puncak Jalil


gez wat i did last tym when I first found out about the spacer.gif? i generated the HTML via photoshop, and re-coded a new page wif the same structure of the auto-generated one, but without the spacer.gif. itz a lot of work,man, believe me. but, itz worth trying for curious ppl lyk me. aahahahah
crynobone
post Mar 29 2006, 02:38 PM

1'm n0t @ n00b n0t y3t @ 1337
*******
Senior Member
2,811 posts

Joined: Jan 2003
From: Somewhere in middle earth


From my personal experience, spacer only happen when you didn't slice each column properly. If it happen to me, I would just go back and adjust the slice until the i got a clean html file without any spacer.

But nowaday, I just created the html and mod the table into DIV for pure CSS html page.

 

Change to:
| Lo-Fi Version
0.0179sec    0.45    5 queries    GZIP Disabled
Time is now: 29th March 2024 - 06:11 AM