homepage Welcome to WebmasterWorld Guest from 50.19.74.67
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / WYSIWYG and Text Code Editors
Forum Library, Charter, Moderator: open

WYSIWYG and Text Code Editors Forum

    
Expression Web and CSS Styles
Is there a way to stop EW from embedding them in the head?
steve




msg:3579982
 1:36 pm on Feb 20, 2008 (gmt 0)

When I style div's using ID's EW insists in putting the declarations in the head of the document, even though I have attached an external style sheet.

I've turned in-line styles off, is there a way to to do the same for embedded styles?

 

Wlauzon




msg:3580223
 5:49 pm on Feb 20, 2008 (gmt 0)

Is the style sheet actually linked to the page?

Something like "<link rel="stylesheet" href="windsun.css" type="text/css" media="screen" />"

[edited by: Wlauzon at 5:51 pm (utc) on Feb. 20, 2008]

steve




msg:3580350
 7:41 pm on Feb 20, 2008 (gmt 0)

Yes, the actual code in the head is:-

<link rel="stylesheet" type="text/css" href="tableless.css">

If I try to add any CSS formatting EW adds something like the following on the next line:

<style type="text/css">
.style1 {
margin-left: 40px;
}
</style>

doctype is html 4.01 strict.

pageoneresults




msg:3580359
 7:49 pm on Feb 20, 2008 (gmt 0)

You're probably using the WYSIWYG functions on elements, huh?

You'll need to define all of your styles within your external stylesheet to prevent this from happening. For example, you just inserted an <h2> and now you want to give it a color (which you shouldn't be doing anyway, but this is just an example), as soon as you give it color, EWD is now going to embed a generic named class in the <head> of the document...

<style type="text/css">
.style1 {
color: #008000;
}
</style>

You'll need to be sure your Style Menu is part of your toolbar so you can easily select the styles from your external CSS file. If that menu is not showing, you're probably using the default menus which are going to generate the embedded styles. Right click your menus up top and be sure the Style Menu is selected. It may appear floating on screen at first, just drag it back up to the toolbar and put it where it is the most user friendly. I keep mine somewhat centered as I use it all the time. I've hidden the other toolbars that generate the stuff you are talking about, or most of them anyway. :)

Customizing your toolbars up there is going to be of great benefit moving forward. You can micro-manage everything and rid yourself and other users of those buttons that are going to override your external styling. You use the WYSIWYG for your common surrounding elements and then your Style Menu to style those elements as you wish. You can also use the Quick Tag Editor to add multiple styles to single elements e.g. class="tac vat blue".

<added> Be sure to remove the font, font size, align, etc. from the toolbars. You won't use those anymore with the external CSS. You'll now use a class for text-align:center, text-align:right, etc. You'll highlight your text to be aligned, go to your Style Menu and select the appropriate class. That class will be applied to the block level element you have selected. Inline styling is a bit trickier using span.class nomenclature to get it to show in the menus. It was that way in FP, let me verify, I think it is the same in EWD...

Ah-ha, they fixed it! Bravo. You used to have to prefix inline styling elements with the span. in your external stylesheet. You don't have to do that anymore. I've not been using EWD too much because they messed up a few features that I use everyday, I'm a bit upset about it but I don't mind using FP 2003, it works just fine.

steve




msg:3580934
 9:35 am on Feb 21, 2008 (gmt 0)

Thank you Pageoneresults, great explanation, I've got it now!

I was indeed trying to highlight elements and use the visual tools to style them - after all EW is a wysiwyg editor! - all MS need to do is add a where to save styles option inline/embed/external.

I've cleaned up my workspace, removing the items you suggested and rearranging the task panes. It all feels a bit alien at the moment, but I'll persevere for a while and see how it goes.

/Steve

pageoneresults




msg:3581120
 2:33 pm on Feb 21, 2008 (gmt 0)

Great! I was coming back to revisit this topic and ask if you were able to configure everything to your liking and it sounds like you are well on your way, kudos!

Now, this is an excellent topic that applies to all WYSIWYG editors. You have to remember that these programs are designed for beginners out of the box. The default settings are for the beginner and if you use them, you are going to get code that looks like it is from a beginner. :)

All the programs I utilize allow me to customize the toolbars almost to the nth degree. With FP and EWD, advanced users need to reconfigure their workspace to be more in tune with their working environment. This is where many, many people have missed the boat and you hear all the bad stuff about WYSIWYG.

If the program is properly configured out of the box for your editing environment, a WYSIWYG like EWD is going to be a production powerhouse for you, I guarantee it! Yes, I'd put a personal guarantee on that one because I know, I've done it and I've helped many others reconfigure their workspace to do the same. Once you start right clicking those menus, adding and removing buttons, you find all sorts of stuff that you didn't know existed. And, you now find that you can get rid of and add stuff that you really need like the Style Menu. That's the first thing anyone needs to add if they are using an external CSS file.

The other thing I'd like to mention about external CSS is that the goal is not to have to add classes to individual elements within a surrounding div that is styled to begin with. You want your code to be as free of possible from additional markup. All of your primary block level and inline elements should be styled from the external CSS, that way you are not using your Style Menu that much, just the WYSIWYG for your primary block level and inline elements, those that don't generate embedded styles e.g. <h>, <ul>, <ol>, <dl>, <b>, <i>.

I'll share some quick tips with you when you come back for some more. :)

There are a set of buttons up there that are killer when it comes to creating nested lists. I can build a popout dropdown CSS menu in minutes using FP/EWD and the nesting function of the list elements. It is a true sight to behold while working in split view. You're watching your code input in the top pane, and you're watching this nested list develop below in the preview pane. All this is done through input, hitting Enter, input, hitting Enter, perform a nest, more input, hitting Enter, etc... It is really that simple once you've preconfigured everything the way "it should be".

steve




msg:3581175
 3:36 pm on Feb 21, 2008 (gmt 0)

I've been playing with divs.

Once they are defined in the external style sheet, you can change their size, margins and padding in visual mode and the changes are made to the style sheet for you.

Very handy for quickly building layouts :-)

Your comments about EW being configured for beginners are spot on, but having browsed through my local book shop so are all the books. What's really needed are some advanced books, which rather than focusing on creating your first website or learning CSS with EW explain how to really make it earn its keep.

My simple discovery above will I am sure save me hours of painfully tweaking layouts. Theres got to be loads more, like your nested menu which perhaps you would share?

<edit>

I've just found something else which is very useful.

If EW does create an embedded style, and you have an external style sheet attached. In the manage styles pane you can drag the style into your style sheet.

[edited by: steve at 4:24 pm (utc) on Feb. 21, 2008]

pageoneresults




msg:3581236
 4:23 pm on Feb 21, 2008 (gmt 0)

Theres got to be loads more, like your nested menu which perhaps you would share?

Hehehe, don't get me started now. I've perfected the nested list element in FP and EWD. If you have your buttons and CSS configured properly, it's just a matter of opening a new page, positioning your cursor where you want the list to appear, click the "Bullets" button (its the one that has the three squares and lines suffixing the sqaures), that starts your <ul> or unordered list. That button and the other list item buttons will remain in your toolbar. Those work from the external stylesheet and the global styles applied to that particular element or that <div> surrounding the elements.

<ul>
<li>List Item 1</li>
<li>List Item 1A</li>
<li>List Item 1B</li>
<li>List Item 1C</li>
<li>List Item 2</li>
<li>List Item 2A</li>
<li>List Item 2B</li>
<li>List Item 2C</li>
<li>List Item 3</li>
<li>List Item 3A</li>
<li>List Item 3B</li>
<li>List Item 3C</li>
</ul>

Once you've got your first level of the list set up, including all your "nested" sub-levels which you won't see yet because you haven't created them, you can now start the process of nesting. All you've done to this point is created a full list of the items that need to be in the list. Here comes the fun part. Next to that "Bullets" button are two buttons labeled Decrease Indent and Increase Indent. When used in conjunction with list elements, this is where you perform your nesting routines. When used by themselves, they create the <blockquote> element.

Now you highlight those <li>'s that need to be nested at the second, third, fourth or however many levels down you are going. You click the "Increase Indent" button (the second button in the series which has a blue arrow pointing right suffixed by lines). You'll notice that those list items <li> just indented and the bullet disappeared (FP only, EWD immediately goes to second level). Okay, this is Step 1 of creating the nest, you are not done yet because one more click of the "Increase Indent" button will now add your second level bullets (FP only). In plain view, you'll see the default list style elements such as discs, squares, open discs, etc. You'll see the nesting hierarchy. All of that will change once your global styles get applied to the list. And, that is the fairly tough part which I'll address toward the end of this reply. Here's an example of what the first nested level might look like in code mode.

<ul>
<li>List Item 1
<ul>
<li>List Item 1A</li>
<li>List Item 1B</li>
<li>List Item 1C</li>
</ul>
</li>
<li>List Item 2
<ul>
<li>List Item 2A</li>
<li>List Item 2B</li>
<li>List Item 2C</li>
</ul>
</li>
<li>List Item 3
<ul>
<li>List Item 3A</li>
<li>List Item 3B</li>
<li>List Item 3C</li>
</ul>
</li>
</ul>

Now that you've created your second level, its time to add a third level. From that second level list of <li>s, you highlight the ones that are to become the third level and perform the same routine. Click once, then twice (FP only) which will give them the default third level list style which again is going to be controlled at the external CSS file. Unfortunately at this point, the level of complexity goes beyond WYSIWYG and we now have the CSS rules to work with. I was lucky to have worked with SuzyUK a few years ago on a CSS menu system using the .htc solution from Peterned. I've been using that ever since and it works flawlessly with FP and EWD once you set everything up. Understanding the CSS is the really tough part. The nesting of the lists is simple. Now, getting them to perform in a dropout/dropdown UI is tricky. :)

You can also structure your lists semantically which is always the recommendation. Use the appropriate list item for the job. The <ul> element is just one of many list items that you can use. There is the <ol> or Ordered List element. The <dl> or Definition List element. Nested <h> elements within the lists, all sorts of "deep" stuff. All of those can be accessed through the default buttons and menus that you have left after preconfiguring your application to work in your environment.

[edited by: pageoneresults at 4:15 pm (utc) on Feb. 22, 2008]

pageoneresults




msg:3582139
 4:10 pm on Feb 22, 2008 (gmt 0)

If EW does create an embedded style, and you have an external style sheet attached. In the manage styles pane you can drag the style into your style sheet.

Ya see, I didn't even know that! But, be careful here. Your stylesheet can grow fairly quickly if you are not keeping a close eye on it. Also, embedding styles in the <head> that only apply to that page may be the better option since they are for that page only. Its the "reusable" styles that need to be in the external.

You're probably going to find all sorts of neat stuff now that you've discovered the power of the toolbars. It has been a few years since I've done a full blown "learn the program" routine. That's when I go through each and every menu, option, etc. and test them one by one to see what they do and don't do. I've done this with FP numerous times over the years, that is how you "learn the program". There are a lot of drag and drop features available that are just fine to utilize and generate valid markup if your workspace is configured properly. :)

netmeg




msg:3582343
 7:24 pm on Feb 22, 2008 (gmt 0)

The only thing that keeps me from using EW exclusively is that darned BOM issue with PHP sites. I've seen all the fixes, and tried everything, and they simply don't work in every instance. Is there *any* chance of Microsoft actually fixing this, or are they just going to keep their head in the sand?

steve




msg:3584259
 9:15 pm on Feb 25, 2008 (gmt 0)

When I style div's using ID's EW insists in putting the declarations in the head of the document, even though I have attached an external style sheet.

So I've finally figured out how to get the styles into an external stylesheet!

In the bottom right hand corner right click style application and set it to manual. In view/tool bars deselect 'style application'.

In visual mode highlight the item you want to style and click 'new style' in the apply style pane. A new window pops up, create your style and select 'define in existing style sheet' then click OK.

Then while the item is still highlighted, click on the newly created style in the apply style pane.

Job done the item is styled and the CSS rule is in the external stylesheet.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / WYSIWYG and Text Code Editors
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved