Applying inline styling using fp2003 (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

RickP -> Applying inline styling using fp2003 (11/13/2004 16:23:44)

Hi to all,

I have just bought fp2003 and searches for info thus far keep bringing me to your site - so thanks already.

I am very new to css but want to 'convert' to this method of design and have a specific question about inline styling in fp2003. I have looked at some posts here on this but don't feel that I have a conclusive answer on this yet...

In one place the following code is offered for applying inline styling (hand coding):

<span style="color:red"> Suspendisse id lacus <span>

Okay, fine, but what about wysiwyg approach in fp2003? Can I apply inline styling this way? The help menu says I should click on FORMAT > PROPERTIES and then STYLE. However, I find no STYLE option! Elsewhere it says,

"if there is no STYLE button... etc."

The instruction still didn't lead me into much, and why shouldn't there be any STYLE option when I go there?

Any help please [:D]



d a v e -> RE: Applying inline styling using fp2003 (11/14/2004 3:48:18)

i just tried it and it sooo doesn't work - it applies it to the whole paragraph. hopefully someone else knows how to do it.

it works so easily in dreamweaver - highlight and apply the css. that's it. I can't believe that this new fp still can't manage to apply inline styles ... anyone know different?

this is what i found in fp help
quote:

Select the text or paragraph that you want to apply a style to.

On the Formatting toolbar, in the Style box , click the built-in (built-in style: The formatting attributes that are available by default in the FrontPage style list.) or user-defined (user-defined style: A new style or a modification to a built-in style. User-defined styles always contain cascading style sheet formatting attributes.) character or paragraph style you want.

Notes

Character styles (character style: A combination of any of the character-formatting options that are identified by a style name.) are shown in the Style box by a small, underlined letter a in front of the style name. Use character styles when you select part, but not all, of a paragraph.




RickP -> RE: Applying inline styling using fp2003 (11/14/2004 13:16:43)

Hi Dave and thanks for your reply - albeit I am still nowhere with this!

From what I can work out (being new to both fp2003 & css - I could easily be wrong!) the pargraph you quote from the help menu is for creating an embedded style rather than an 'inline' style. There must be some way to do this without hand coding I would have thought?

Thanks anyhow



d a v e -> RE: Applying inline styling using fp2003 (11/14/2004 15:02:57)

looks like we'll have to wait for someone with more fp experience than us! but from what i can tell from it it doesn't seem possible, which frankly is pretty poor :(



jaybee -> RE: Applying inline styling using fp2003 (11/14/2004 15:21:23)

FP doesn't handle spans. If you want wysiwyg then you have to apply it to the whole thing then go into the code and cut and paste it round the bit you want and replace the <p> or whatever with a span.

That's why I hand code and just use preview to check it.

quote:

it doesn't seem possible, which frankly is pretty poor


It's a huge improvement on older versions. At least it now does something.



d a v e -> RE: Applying inline styling using fp2003 (11/14/2004 16:15:46)

it's a bit strange: it's a basic css function, and people often tout FP as being easy to use (because it's a bit like Word etc) but then when you so something like this as you would in word etc it doesn't work. it's poor.

I'm always keen to give FP a bashing (hopefully as objectively as i can;) but i certainly think it warrants it on this occasion. ok i know how to apply a span but that isn't the point. they copied pretty much everything else from dreamweaver couldn't they manage to do inline styles as well!

i don't know FP so well but is there a history style function?? or some similar thing where you could apply the style inline then copy the action and repeat it? code snippets thingies?? that might be an anwser of sorts :)



jeepless -> RE: Applying inline styling using fp2003 (11/15/2004 0:30:23)

Yes, there IS a way to insert inline styles using the "wysiwyg approach" in fp2003. In fact, there's TWO ways. The first (and easiest) way to do it is called the "Quick Tag Editor" and here's how you use it:

1. In Design View, highlight the text you wish to alter;
2. Press CTRL-Q and the "Quick Tag Editor" window will open;
3. Type your HTML code in that window (eg, "<span style=color:red>") and WITHOUT using any closing tags;
4. Then click on the checkmark symbol, the window will close and your text is modified! FP will automatically close any HTML tags for you (eg, inserts the </span> tag at the end of your highlighted text).

The other way to do it is a bit more messy, but it works for any type of markup code (asp, javascript, etc.) and FP will never mess with it.

1. Place your cursor at the beginning of the text you wish to alter - DON'T highlight it, just put your cursor in front of it;
2. Go to Insert Menu | Web Component | Advanced Controls | HTML;
3. A window then opens where you can enter the "markup" code you wish to insert (eg, "<span style=color:red>");
4. Hit the "Okay" button and FP inserts your code where you indicated (and it will NEVER modify it).
5. Then place your cursor at the end of the text you're modifying and repeat the above steps, except you insert the ending tag (eg, "</span>").

Viola! You've just applied an inline style using the "wysiwyg approach".

This second technique is called "HTML Markup Properties" in FP and can be used to insert any type code in your page. The only drawback (other than it's a lot of steps) is that FP will NOT automatically close your HTML tags or fix your code - you will have to do that yourself. Using this technique, FP will also surround your inserted code with <!--webbot--> tags so it knows never to modify what you've just inserted. You will also have to use the Preview window to see the effects since it will not show up in the Design window.

For the example you mentioned, I would definitely use the "Quick Tag Editor" since it's much easier and you will see the results in the Design window.

Hope that helps!



jaybee -> RE: Applying inline styling using fp2003 (11/15/2004 5:51:12)

Wow thanks for that, it's something I've never come across and I have to say, it's not exactly intuitive is it? And for newbies not great, it sounds like you still have to know HTML in order to type the style in.

The second option is something I'd avoid like the plague anyway as I have a thing about webbot code appearing all over the place but I'll definitely check out the first one.



jeepless -> RE: Applying inline styling using fp2003 (11/15/2004 10:29:33)

Well, to be quite honest, I didn't know that FP2003 had the "Quick Tag Editor" function either, until I went looking for an answer to RickP's original question (I found it in FP's Help section). I knew about the "HTML Markup Properties" function and have occasionally used it, but never the Quick Tag Editor. I've always inserted things like <span> tags directly into the code itself, but now that I know there's an easier way I'll definitely start using it. It's amazing what you can learn when you're looking for something else!!!

As for the second option (HTML Markup Properties) it also has its place, although probably not for tasks that the Quick Tag Editor handles better. This option makes it easy to insert such things as ASP code or javascript while in Design View, and the nice thing is that FP won't mess with it once it's inserted. It does surround it with webbots (so FP knows to leave it alone), but they're really harmless and are seen by browsers as nothing more than HTML comment tags.

Like everything else, each tool has it's place!



RickP -> RE: Applying inline styling using fp2003 (11/15/2004 11:30:39)

Hi, and thanks to all

I've just tried the quick tag method and of course it does the job, however, as has been pointed out it does still require knowledge of not only the basic code (<span style=... - fair enough) but also a ready knowledge of all the probable css styles that I might want to apply! Even if I get to grips with the fundamentals of css it still doesn't allow easy fine tuning like using the color-picker for example. But still it is a start.

Now, to hopefully put something back into the thread...

I used the keyboard shortcut for the quick tag editor but then went to look for it in the menus. It can be switched on as a toolbar (under 'view'). Once on it appears that it offers a shortcut to any tags that have been inserted into the docment ready for quick reuse.

I've also worked out that if you turn on the tag thingy, highlight a word/sentence and then select 'tag propeties' (in the tag selector dropdown menu) that you can apply an inline style (at least that is what I think it must be) to your highlighted text that way - however, it is limited to alignment, spacing, indent and does not allow colour or font size changes.

Any confirmation of the above that I am understanding this right would be further appreciated.

Still looking at this but thanks again.



RickP -> RE: Applying inline styling using fp2003 (11/15/2004 12:26:48)

Hmm, I think I've got it...

Highlight some text in a sentence
use ctrl q or the drop down button on the qte (quick tag editor) bar and select 'insert html'
type 'span' between the tags
click on the tick
now a span tag button appears on the qte toolbar
hover over it and select the drop down menu from it
now the style box appears with all the options

I'm just wondering about one thing... do I have to enter a 'class' name? It seems to work fine without using one. I assume (?) that i nly use a 'class' name if I want to reuse the particular formatting I apply???




jeepless -> RE: Applying inline styling using fp2003 (11/15/2004 15:48:22)

RickP...

I tried your approach and it's close to what you're looking for but I think it's still not the best answer. I'm still looking for a better way since I've always had to make those kind of changes directly in the code. FP doesn't seem to let you modify a phrase of text by itself, only page elements (eg, <p> or <td> tags).

When you use the "Insert HTML" command, it places both the opening and closing <span> tags BEFORE the highlighted text (and that's by design) instead of around the text. Look at your HTML code and I think you'll find that the <span> tags are sitting in front of the text you highlighted, so in effect the span doesn't do anything. At least that's how it worked for me when I tried your approach. Other than that, it sort of works but I think you'll still have to manually move the </span> tag behind the text you highlighted to actually change your text.

Are you aware that if the style you're trying to apply is already defined either in the <head> section of your page or in an attached style sheet that you can easily select that style and apply it to your highlighted text? Just define a new CSS class as follows in your <head> section:

<style type="text/css">
<!--
.red { color: red; }
-->
</style>

Then highlight your text, use the Quick Tag Editor to insert a <span> tag, then select the <span> tag from the QTE bar and select Tag Properties, then assign it the "red" class. Maybe I just did what you were trying to say, but I used a predefined class. Forgive me if I'm telling you something you already knew! I always use predefined classes since it's easier and I usually reuse them numerous times in the same page.

In answer to your other question, NO you shouldn't give your styling a class name unless you intend to reuse it, and then it needs to be in the <head> section of your page. When I tried your approach, it placed the style inside the <span> tag, but it also inserted the class name in the tag, which was meaningless since the class was not predefined. Look at your HTML code and you should see what I mean if you gave the style a class name. So giving the style a class name using your approach is unnecessary and only adds needless code.

Hope that helps....

jeepless



RickP -> RE: Applying inline styling using fp2003 (11/16/2004 3:54:19)

Hi Jeepless

re the tag insert tool - it did sometimes place the span tags together in front of the highlighted text but on other occassions it placed them neatly around my text ! Working in split view it's easy to check and if necessary just move the last tag over.

In summary of what you are saying... is it that you generally avoid all inline styling and just create a new class every time?

Don't worry about stating the obvious - I have come to understand the application of classes now but am still very new to css, so thanks for all your comments [;)]



RickP -> RE: Applying inline styling using fp2003 (11/16/2004 3:59:48)

Oh, P.S.

One little question (anyone)

The css book I am reading shows all 'declarations' ending with a semi-colon regardless of whether or not there are any others to follow - e.g.

{ color: #FFFFFF; text-decoration: none; text-align:center; }

I notice that FP excludes the final semi-colon e.g.

{ color: #FFFFFF; text-decoration: none; text-align:center }

Does it make any difference?




caz -> RE: Applying inline styling using fp2003 (11/16/2004 7:15:02)

Missing the last semi-colon will fail with the validator, but more importantly your page may not render properly in anything else but IE. It's a good habit to get into - noticing the small typos like that, well done you. [;)]



jeepless -> RE: Applying inline styling using fp2003 (11/16/2004 10:35:02)

RickP...

The styling I use on a page is often reused numerous times, so in those cases I do create a CSS class for it in the <head> section of the page. Just makes it easier and quicker to apply them. But if it's a one-time thing, then I apply them as an inline style just as you're trying to do. That's why your original question caught my eye since I've never found a way to do it through the wysiwyg approach in FP. I've always done it directly in the code. Now that I've "discovered" the Quick Tag Editor, I will probably always use it instead, but like you said it does require you to know HTML and CSS coding to get it right. It's odd that FP lets you create styles "on the fly" for page elements (eg, <p> or <td> tags), but not for selected portions of text. And that's been missing from FP since it was first released. Oh well, guess there's something to look forward to in the next version of FP (hopefully!).



RickP -> RE: Applying inline styling using fp2003 (11/16/2004 23:03:46)

Hi Everyone,

I guess that about rounds things off on this one for me. Thanks for all of your help on all points raised. [:D]

P.S. Makes a change to come to a forum where many folk seem to be in the U.K. [:D]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375