PDA

View Full Version : Buying Dreamweaver Extensions


EFL
05-12-2008, 12:00 AM
I need an extension that enables me to wrap my CSS tags. My style rules are set in a related style sheet e.g. <link type="text/css" rel="stylesheet" href="efl.css">. Using the Dreamweaver interface as it is, I can wrap a bold tag around my own class tag, e.g. <b><span class="efl1">My</span> <span class="efl2">Text</span></b>. However, I need to wrap my own tags in a nested format, e.g.
<span class="efl4"><span class="efl3"><span class="efl1">My</span> <span class="efl2">Text</span></span></span>

Dreamweaver comes very close to doing this, but it's properties' interface is designed for one CSS tag per block of text. However, it displays nested tags as they appear in IE and allows you to wrap it's own tags around your css span tags.

Is an extension the best way to solve this problem? If so, what is the best way to go about getting a custom extension? I have contracted computer services on freelance.com in the past. I want to deal with someone who knows the simplest solution to this problem.

d a v e
05-12-2008, 07:22 AM
just combine the properties of the multiple classes into one new one and apply that to the span

Cary
05-12-2008, 08:05 AM
You can also use multiple classes within a single span like below, but Dave's suggestion is much better.

<span class="efl4 efl3 efl1 efl2">Text</span>

pete
05-12-2008, 08:08 AM
.. <span class="efl4"><span class="efl3"><span class="efl1">My</span> <span class="efl2">Text</span></span></span>

I don't see the need for this type of class attribute nesting. If it were me I would do the following:

<span class="efl4"><span><span>My</span> <span>Text</span></span></span>and CSS


.efl4 {
// first span
}
.efl4 span {
// second nested span
}
.efl4 span span {
// third nested span
}
and so on. I can only assume you are using nested spans to hold background images to create a CSS box with images or something along those lines such as rounded corners etc? Ideally your HTML should be describe the pages structure and not be used for style, that is what CSS is for, so avoid nesting too much unless you have no choice.

d a v e
05-12-2008, 09:22 AM
Cary - doesn't IE6 have problems with multiple classes? or am i getting confused ;)

EFL
05-12-2008, 10:15 AM
I am nesting tags because I am using CSS to color code text. I need to underline individual words with one color and then underline groups of words with another color. My class attributes look like the following.

efl1 { border: 2px solid #ff0000;border-right-width:0px; border-left-width:0px;border-top-width:0px;}

efl2 { border: 2px solid #0000ff;border-right-width:0px; border-left-width:0px;border-top-width:0px;}

efl3 { border: 1px solid #ffffff;border-right-width:0px; border-left-width:0px;border-top-width:0px;}

efl4 { border: 2px solid #00ff00;border-right-width:0px; border-left-width:0px;border-top-width:0px;}

There is no way around nesting tags. Nested tags do not display in firefox. I can only view my color-coded html in IE, but they also display in the Dreamweaver WYSIWYG window.

Cary
05-12-2008, 10:20 AM
Dave, you may be right. I've never tried this.

pete
05-12-2008, 10:34 AM
EFL, can you post up a page with this working exactly how you want it to and indicate which browser to view in.

I just ran a quick test in FF and by adding the !important declaration to the border colours I think I have it as you intended but until I get an exact idea of what you are wanting this to look like I can't move on with this.

Post a screenshot if its easier.

EFL
05-12-2008, 10:51 AM
http://www.freewebs.com/teflteacher/images/css.jpg

pete
05-12-2008, 11:29 AM
There won't be an extension to do what you want and using DW design view will probably guarantee to mash your span tags to bits. The only way to get what you want is to hand code it, it will take a while though, this took me about 10 minutes but you can see it is achieving what you want:

http://69.5.28.129/dwclub/span-nested.htm

Unfortunately it will be a nested span solution, not ideal but probably the best and only way to go.

pete
05-12-2008, 11:37 AM
Cary - doesn't IE6 have problems with multiple classes? or am i getting confused ;)

IE6 handles multiple classes as expected apart from in situations as outlined here http://www.quirksmode.org/css/multipleclasses.html, see the last rule.

So for IE6 as long as you are aware of that then you can create unique class names for multiple classes to avoid this bug.

d a v e
05-12-2008, 02:14 PM
that's what i was thinking of ;)

EFL
05-12-2008, 03:47 PM
Thanks Pete. I've never installed Dreamweaver Extensions, but my understanding was that they allowed developers to extend the Dreamweaver interface to add new functions. So, I was thinking that I could contract a developer to program a new extension for my nested tags. Please confirm that you are saying that such an extension is not possible to program and not merely that one does not currently exist.

Also, I wonder if there is any way to modify my currect style class definitions to get them to work in FireFox. Note that in my example one group of text has three underlines. In IE, you can add as many underlines as you want by simply nesting them along with white spacer underlines. The white spaces add the same sort of padding or margins that your style rule does.

.wrapper_red_dotted {
border-bottom:2px dotted red!important;
padding-bottom:3px!important;
margin-bottom:2px;
display:inline;
line-height:29px!important;
}

It appears that FireFox needs a class to be defined with unique line-height attributes in order to act as either a second or third underline. If that's true, then I would need to make major modifications to my style classes and html files in order to get them to work in FireFox.

d a v e
05-12-2008, 04:03 PM
you could set an x-repeated background image with the correct number of lines in it in the span and just use one class - a gif say 10px wide with the 3 lines made in an image editor.

domedia
05-12-2008, 04:33 PM
what dave said.

EFL
05-12-2008, 05:03 PM
@Dave - are you suggesting that I change my style rules to use images? Something like, ...

.red_dotted { background: white url(red_dotted.gif);
background-repeat: repeat-x }

and that I get around nesting them by creating unique images for all the line style combinations that I would need.

.black_solid_red_dotted { background: white url(black_solid_red_dotted.gif);
background-repeat: repeat-x }

.black_solid_cyan_dotted_red_dotted { background: white url(black_solid_cyan_dotted_red_dotted.gif);
background-repeat: repeat-x }

I wouldn't expect the browser to be able to print those kind of styles. I stopped using background colors in my style rules because they wouldn't print.

d a v e
05-12-2008, 05:08 PM
what are you using those styles for?
all this is a bit of a shot in the dark without a url to look at and an explanation of why these visual and print styles are so important ;)

domedia
05-12-2008, 05:10 PM
I wouldn't expect the browser to be able to print those kind of styles. I stopped using background colors in my style rules because they wouldn't print.
Web pages don't print with backgrounds for good reason.
If a print stylesheet will not do, provide a pdf instead. But omitting a certain style because it does not print makes no sense. Print is secondary on web pages.

domedia
05-12-2008, 05:12 PM
and that I get around nesting them by creating unique images for all the line style combinations that I would need. this sounds weird.. Why would you have so many (and even three lines) styles for links?

EFL
05-12-2008, 05:46 PM
I am using the CSS border style to teach grammar. Single level underlines identify the part of speech of individual words. Secondary underlines indentify how phrases and dependent clauses form single parts of speech. The color-styles also distinguish what part of a sentence a part of speech is functioning as, e.g. subject or object.

So far, I have only displayed files from my hard drive on a large screen in a classroom. I hope to post my grammar online in a couple of months. Some grammatical classifications are actually a little controversial. I want to provide a tool for students and teachers to code their own text using my style sheet.

I can't expect them to hand code the text. If I had an extension for Dreamweaver, I would make it available for free online and encourage teachers to use Dreamweaver, if they wanted to use my grammatical color-code.

domedia
05-12-2008, 06:35 PM
Sounds like an interesting application.

Keep in mind the usability issues you might encounter by not restricting underlines to links:
http://www.useit.com/alertbox/20040510.html

pete
05-12-2008, 06:50 PM
Thanks Pete. I've never installed Dreamweaver Extensions, but my understanding was that they allowed developers to extend the Dreamweaver interface to add new functions. So, I was thinking that I could contract a developer to program a new extension for my nested tags. Please confirm that you are saying that such an extension is not possible to program and not merely that one does not currently exist.


It is possible to create a DW extension to do what you want, you would presumably select the text and apply the styles, it would be up to the DW Ext to insert the span tags and apply the styles to those tags. The problem might be that because there are nested spans you will have a problem selecting and getting the Ext to understand which span tags are selected, this is especially true for removing and modifying span tags and classes.

You should probably contact a DW Extension developer and see what they can do for you. I used to dabble in writing basic extensions myself but haven't done so for many years now, I was also a beta tester for www.projectseven.com DW extensions. Here is a list of extension developers http://www.dwfaq.com/resources/extensions/default.asp although I believe this is somewhat old. You could always email Angela of dwfaq.com and ask her, she is an extension developer herself and knows others.

If you have the funds available and want a top notch job doing then contact Massimo Foti see his site www.massimocorner.com he is one of the original DW Extenstion developers.

pete
05-12-2008, 06:55 PM
Also, I wonder if there is any way to modify my currect style class definitions to get them to work in FireFox. Note that in my example one group of text has three underlines. In IE, you can add as many underlines as you want by simply nesting them along with white spacer underlines. The white spaces add the same sort of padding or margins that your style rule does.

.wrapper_red_dotted {
border-bottom:2px dotted red!important;
padding-bottom:3px!important;
margin-bottom:2px;
display:inline;
line-height:29px!important;
}

It appears that FireFox needs a class to be defined with unique line-height attributes in order to act as either a second or third underline. If that's true, then I would need to make major modifications to my style classes and html files in order to get them to work in FireFox.

Mine worked in FF and IE because I played around with them in IE, I develop on my Mac and use FF, I then made adjustments for them to work in IE. The line-height was my work around to get them to work x-browser, I'm not sure if there is a better way, probably not, but you should put aside an hour or so to run some tests and see which works the best.

Background images as others here have stated are a good idea but they won't print. What you are trying to do is quote unique, therefore you probably won't find any ready made or off the shelf solutions. Good luck with this project though, I hope it works out for you.

d a v e
05-12-2008, 10:05 PM
if you did use background images (or even just plain coloured backgrounds like background:#333) then just have a simple set of instructions for users to turn on 'print background images/colours' in their particular browser. that way you could use a single class for each type and have a combination of coloured text over a coloured background, and even a bottom/surrounding border for a third level of meaning

it's a little bit of a manual way of doing it but it would save a lot of time and trouble otherwise?!