Author Topic: Kompozer to edit webpage  (Read 4006 times)

Offline goodear

  • Super Poster
  • ***
  • Posts: 210
    • View Profile
    • http://DavidRubinstein.net
Kompozer to edit webpage
« on: January 28, 2011, 11:18:16 PM »
Just wondering if anyone is familiar with Kompozer for editing text to publish webpages. I am having some difficulty with text formating using it and was wondering if someone could help me with it. Thanks.

Offline Xairbusdriver

  • Administrator
  • TS Addict
  • *****
  • Posts: 26388
  • 27" iMac (mid-17), Big Sur, Mac mini, Catalina
    • View Profile
    • Mid-South Weather
Kompozer to edit webpage
« Reply #1 on: January 29, 2011, 09:28:12 AM »
Perhaps if you give us some more details about those difficulties?
Are you referring to the html output or to how you 'tell' Kompozer to write it?

I'm sure you know that all you really need to create a web page is a simple text processor. Not a "word" processor, just an app that can create a plain text file, absolutely no text "formatting" needed or allowed. The browser determines the 'formatting' from the html tags in the text file. dntknw.gif
THERE ARE TWO TYPES OF COUNTRIES
Those that use metric = #1 Measurement system
And the United States = The Banana system
CAUTION! Childhood vaccinations cause adults! :yes:

Offline goodear

  • Super Poster
  • ***
  • Posts: 210
    • View Profile
    • http://DavidRubinstein.net
Kompozer to edit webpage
« Reply #2 on: January 29, 2011, 10:32:50 AM »
I believe Kompozer is a text processor. I use it to edit my webpages, but I am totally at sea when it comes to
paragraph alignment. As you can see on this page
http://davidrubinstein.net/UpcomingConcerts.html

I can't get the proper alignment. The Kompozer editing page adds boxes around paragraphs that I don't understand. It might also be obvious that I'm trying to do as much as possible on my own. I have tried to attach a screen shot here of what the editing page looks like.

QUOTE(Xairbusdriver @ Jan 29 2011, 10:28 AM) <{POST_SNAPBACK}>
Perhaps if you give us some more details about those difficulties?
Are you referring to the html output or to how you 'tell' Kompozer to write it?

I'm sure you know that all you really need to create a web page is a simple text processor. Not a "word" processor, just an app that can create a plain text file, absolutely no text "formatting" needed or allowed. The browser determines the 'formatting' from the html tags in the text file. dntknw.gif
« Last Edit: January 29, 2011, 10:33:50 AM by goodear »

Offline Jack W

  • TS Addict
  • *****
  • Posts: 2597
    • View Profile
Kompozer to edit webpage
« Reply #3 on: January 29, 2011, 01:04:03 PM »
A little off-subject, but are the French piano works in April by chance by Saint-Saëns?

I absolutely love his piano concerti, and they are never played enough to suit me.

Jack
« Last Edit: February 01, 2011, 02:37:36 PM by kbeartx »
Good to be Here.

My Macs: 2010 27" alum iMac 2.8GHz, Snow Leopard 10.6.8/Mavericks 10.9.5, 4GB SDRAM (Workhorse),
13” Late 2010 MacBook Pro 2.4GHz, 10.6.8, 2GB SDRAM,
(2) External HD - Firewire/USB Macally Enclosures  with 1TB Hitachi Drives,
Time Machine external drive - ditto above - 1/2 TimeMac

Offline goodear

  • Super Poster
  • ***
  • Posts: 210
    • View Profile
    • http://DavidRubinstein.net
Kompozer to edit webpage
« Reply #4 on: January 29, 2011, 03:00:38 PM »
No, I don't care much for his solo piano works but I do love his piano concerti, especially 2, 4 and 5.

QUOTE(Jack W @ Jan 29 2011, 02:04 PM) <{POST_SNAPBACK}>
A little off-subject, but are the French piano works in April by chance by Saint-Saëns?

I absolutely love his piano cencerti, and they are never played enough to suit me.

Jack


Offline Paddy

  • Administrator
  • TS Addict
  • *****
  • Posts: 13797
    • View Profile
    • https://www.paddyduncan.com
Kompozer to edit webpage
« Reply #5 on: January 29, 2011, 03:48:37 PM »
David, looking at the code, you've got all sorts of div tags in there that you don't need - plus a lot of other stuff that may be left over from things you had on the page in the past and changed. The page itself actually loads more or less ok in both Safari and Firefox, but clearly looks out of whack within Kompozer.

You haven't got a cascading style sheet (which might make things a little easier), so styles are applied inline for the most part - and there's a whole lot of stuff there that doesn't belong. I'm not sure where some of those tags came from in the first place (the <big> ones for instance), since Kompozer doesn't use that sort of antiquated tag anymore, from what I can see.

I would strongly suggest that you start looking at the pages in both the split view and the code/source view that Kompozer offers, and also, click on the HTML tags button on the lower right side so that you can see the tags being applied to each bit of text. That will give you a good sense of where all the stuff is that you can remove.

I'd remove ALL the <big> <small> etc. tags and use the paragraph and header tags to control your text sizes. For instance - on "David Rubenstein" all you need is the h1 tag and the color specified - not all that stuff that is there now. After removing all the extraneous tags there now (leave the color specification - ONE of them - you've got two on that particular bit of text for different colors of blue) then click on the dropdown that will say "body text" and select "H1" - voila. This will give you the default header size, which should be fine. For your subheads, do the same, using H2 or H3 when appropriate.

It might be faster to copy out the text (use design view, so all you get is the text) and put it into a new page in Design view in Komposer and reapply the styles. That would also eliminate all the unnecessary extra divs you've got there, which are screwing up the alignment somewhat.

I've done that quickly with the Upcoming Concerts page - you can check it out here and look at the source code in Safari or Firefox (View->View Source) and feel free to copy and paste the code into Komposer to use.

EDIT 2017 - Pages have been removed long ago...sorry...

Nonworking links removed...

I added a width to the maincontent div to keep it a reasonable width - I set it at 780, but you may want it smaller for pages with paragraphs of text. I also centered that maincontent div by applying margin-left/margin-right "auto" which will keep the div centered on the page no matter how wide the browser window is. Since these styles are all internal (on the page) you can simply change the maincontent one as needed - for left aligned text, for instance, you would change "text-align: center" to "text-align: left"...

Hope that helps.

There are a bunch of fairly simple things you could do to make the pages a little better - add navigation to all (rather than just the link to the home page) and perhaps a border and some further text styling. But the basics are pretty straightforward if you can see what I've done, compared to the code that is there now.
« Last Edit: April 02, 2017, 09:45:26 AM by Paddy »
"If computers get too powerful, we can organize them into committees. That'll do them in." ~Author unknown •iMac 5K, 27" 3.6Ghz i9 (2019) • 16" M1 MBP(2021) • 9.7" iPad Pro • iPhone 13

Offline jcarter

  • TS Addict
  • *****
  • Posts: 5808
    • View Profile
    • http://www.jcarter.net/ourdogs/muffinpage.html
Kompozer to edit webpage
« Reply #6 on: January 29, 2011, 04:59:17 PM »
Hi Paddy,
I enjoyed your change in the code for his page, Im taking coding classes from scratch, no DW, nothing but hand coding(Jim's suggestion), and I learned a lot from your instructions too.
Thanx,
Jane

PS watch out that I dont run some of mine by you for help, like this one,
http://www.jcdouglass.net/yellow-labs/riley-lilly.html

Offline Paddy

  • Administrator
  • TS Addict
  • *****
  • Posts: 13797
    • View Profile
    • https://www.paddyduncan.com
Kompozer to edit webpage
« Reply #7 on: January 29, 2011, 05:04:38 PM »
The code is clean and it validates, Jane...so is there something you want to change or do differently? smile.gif
"If computers get too powerful, we can organize them into committees. That'll do them in." ~Author unknown •iMac 5K, 27" 3.6Ghz i9 (2019) • 16" M1 MBP(2021) • 9.7" iPad Pro • iPhone 13

Offline goodear

  • Super Poster
  • ***
  • Posts: 210
    • View Profile
    • http://DavidRubinstein.net
Kompozer to edit webpage
« Reply #8 on: January 29, 2011, 05:26:16 PM »
I'm checking this right now...thank you so much. Let's see how far I can get with it. What I don't understand is where is all that stuff that doesn't belong there coming from. That's a rhetorical question...lemme see if I can remove it.

QUOTE(Paddy @ Jan 29 2011, 04:48 PM) <{POST_SNAPBACK}>
David, looking at the code, you've got all sorts of div tags in there that you don't need - plus a lot of other stuff that may be left over from things you had on the page in the past and changed. The page itself actually loads more or less ok in both Safari and Firefox, but clearly looks out of whack within Kompozer.

You haven't got a cascading style sheet (which might make things a little easier), so styles are applied inline for the most part - and there's a whole lot of stuff there that doesn't belong. I'm not sure where some of those tags came from in the first place (the <big> ones for instance), since Kompozer doesn't use that sort of antiquated tag anymore, from what I can see.

I would strongly suggest that you start looking at the pages in both the split view and the code/source view that Kompozer offers, and also, click on the HTML tags button on the lower right side so that you can see the tags being applied to each bit of text. That will give you a good sense of where all the stuff is that you can remove.

I'd remove ALL the <big> <small> etc. tags and use the paragraph and header tags to control your text sizes. For instance - on "David Rubenstein" all you need is the h1 tag and the color specified - not all that stuff that is there now. After removing all the extraneous tags there now (leave the color specification - ONE of them - you've got two on that particular bit of text for different colors of blue) then click on the dropdown that will say "body text" and select "H1" - voila. This will give you the default header size, which should be fine. For your subheads, do the same, using H2 or H3 when appropriate.

It might be faster to copy out the text (use design view, so all you get is the text) and put it into a new page in Design view in Komposer and reapply the styles. That would also eliminate all the unnecessary extra divs you've got there, which are screwing up the alignment somewhat.

I've done that quickly with the Upcoming Concerts page - you can check it out here and look at the source code in Safari or Firefox (View->View Source) and feel free to copy and paste the code into Komposer to use.

http://paddyduncan.com/david.html
I added a width to the maincontent div to keep it a reasonable width - I set it at 780, but you may want it smaller for pages with paragraphs of text. I also centered that maincontent div by applying margin-left/margin-right "auto" which will keep the div centered on the page no matter how wide the browser window is. Since these styles are all internal (on the page) you can simply change the maincontent one as needed - for left aligned text, for instance, you would change "text-align: center" to "text-align: left"...

Hope that helps.

There are a bunch of fairly simple things you could do to make the pages a little better - add navigation to all (rather than just the link to the home page) and perhaps a border and some further text styling. But the basics are pretty straightforward if you can see what I've done, compared to the code that is there now.
« Last Edit: February 01, 2011, 02:40:19 PM by kbeartx »

Offline goodear

  • Super Poster
  • ***
  • Posts: 210
    • View Profile
    • http://DavidRubinstein.net
Kompozer to edit webpage
« Reply #9 on: January 29, 2011, 05:38:00 PM »
I have applied your formatting to the page and it now looks perfect. But I'm going to study your comments more closely to see where I have been going wrong. Thank you so much.

QUOTE(Paddy @ Jan 29 2011, 04:48 PM) <{POST_SNAPBACK}>
David, looking at the code, you've got all sorts of div tags in there that you don't need - plus a lot of other stuff that may be left over from things you had on the page in the past and changed. The page itself actually loads more or less ok in both Safari and Firefox, but clearly looks out of whack within Kompozer.

You haven't got a cascading style sheet (which might make things a little easier), so styles are applied inline for the most part - and there's a whole lot of stuff there that doesn't belong. I'm not sure where some of those tags came from in the first place (the <big> ones for instance), since Kompozer doesn't use that sort of antiquated tag anymore, from what I can see.

I would strongly suggest that you start looking at the pages in both the split view and the code/source view that Kompozer offers, and also, click on the HTML tags button on the lower right side so that you can see the tags being applied to each bit of text. That will give you a good sense of where all the stuff is that you can remove.

I'd remove ALL the <big> <small> etc. tags and use the paragraph and header tags to control your text sizes. For instance - on "David Rubenstein" all you need is the h1 tag and the color specified - not all that stuff that is there now. After removing all the extraneous tags there now (leave the color specification - ONE of them - you've got two on that particular bit of text for different colors of blue) then click on the dropdown that will say "body text" and select "H1" - voila. This will give you the default header size, which should be fine. For your subheads, do the same, using H2 or H3 when appropriate.

It might be faster to copy out the text (use design view, so all you get is the text) and put it into a new page in Design view in Komposer and reapply the styles. That would also eliminate all the unnecessary extra divs you've got there, which are screwing up the alignment somewhat.

I've done that quickly with the Upcoming Concerts page - you can check it out here and look at the source code in Safari or Firefox (View->View Source) and feel free to copy and paste the code into Komposer to use.

http://paddyduncan.com/david.html
I added a width to the maincontent div to keep it a reasonable width - I set it at 780, but you may want it smaller for pages with paragraphs of text. I also centered that maincontent div by applying margin-left/margin-right "auto" which will keep the div centered on the page no matter how wide the browser window is. Since these styles are all internal (on the page) you can simply change the maincontent one as needed - for left aligned text, for instance, you would change "text-align: center" to "text-align: left"...

Hope that helps.

There are a bunch of fairly simple things you could do to make the pages a little better - add navigation to all (rather than just the link to the home page) and perhaps a border and some further text styling. But the basics are pretty straightforward if you can see what I've done, compared to the code that is there now.


Offline jcarter

  • TS Addict
  • *****
  • Posts: 5808
    • View Profile
    • http://www.jcarter.net/ourdogs/muffinpage.html
Kompozer to edit webpage
« Reply #10 on: January 29, 2011, 05:38:22 PM »
Hi Paddy,
Thank you!  
I really dont need to change stuff, though Im learning CSS and its a bit confusing when I get into more complex stuff.
Validating is a problem with me on my newer pages.
I would LOVE to learn how to make photo pages with this, Ive tried tables, and more, but I guess the way to do it is to stick with this code, modify it and add more images.
A classmate helped me do this page, and we had a fun time with it, and he has changed and modified his pages, and created some really lovely albums, and told me to do the same.
http://www.jcdouglass.net/maine/maine.html
Jim said once you get  something you really like, use it, and modify it with different images and text.
Save everything you really like and just build upon it! Dont struggle with making new stuff that is difficult.
I have Dreamweaver, but there are no updated classes in it, so Ive not used it for a while, but I do LOVE the split screen.
Jane

Offline Paddy

  • Administrator
  • TS Addict
  • *****
  • Posts: 13797
    • View Profile
    • https://www.paddyduncan.com
Kompozer to edit webpage
« Reply #11 on: January 29, 2011, 07:48:12 PM »
For photo albums, I love JAlbum. There are some really wonderful albums that people have created. it's great - you can use the skins as is, or if you do know HTML & CSS, you can start playing.

http://jalbum.net

I used it for embedded albums when I redid the site for Point o' Vue this fall:

http://www.pointovue.com/photos.php

CSS is really straightforward for the basics, but man it can get pretty complicated when you start really digging in.

Whenever I'm intrigued by something, I look at the source code.

The other day it was this:

http://veerle.duoh.com

http://veerle.duoh.com/css/master.css eek2.gif

Ok then...way out of my league!!!
"If computers get too powerful, we can organize them into committees. That'll do them in." ~Author unknown •iMac 5K, 27" 3.6Ghz i9 (2019) • 16" M1 MBP(2021) • 9.7" iPad Pro • iPhone 13

Offline Xairbusdriver

  • Administrator
  • TS Addict
  • *****
  • Posts: 26388
  • 27" iMac (mid-17), Big Sur, Mac mini, Catalina
    • View Profile
    • Mid-South Weather
Kompozer to edit webpage
« Reply #12 on: January 29, 2011, 08:48:04 PM »
That's not exactly what I would suggest for starting to learn CSS. It's probably unique to the site. There is an awful lot of high targeted declarations that may not make much sense in any other site. For example:
CODE
#thedeck p.via a:link
assigns values for the properties of the "link" behavior of a link but only in "thedeck" ID inside a paragraph (p) with a class of "via." Possibly something like this:
CODE
<div id="thedeck">
    <h2>The Deck</h2>
    <script type="text/javascript" src="http://connect.decknetwork.net/deckVP_js.php?12963541057527"></script>
    <p>
        <a href="http://decknetwork.net/">Ads via The Deck</a>
    </p>
</div>
Unfortunately, that link is not assigned a class of "via" unless that javascript is doing it by looking at the text inside the anchor tags. I have absolutely no experience with javascript, but I know it can do things like that. doh.gif On the other hand, the properties defined for "via" seem to be concerned only with the CSS3 capabilities (transition:background-color 500ms ease-in;). When you first load the page, you may be able to see the text appear only after a half second...if it had actually been assigned that class...

I doubt a CSS tutorial would ever get as complicated as that example, even if it was called "Advanced!" When I suggest finding something you like and using it, I mean something that can be easily used in most sites. Or something that is modular that can be plugged into more than one site to do something specific.

About the only thing that might be called 'modular' in that CSS is the "Reset" part. Some people (re)set almost all values to zero/none/normal/or whatever and then turn around and (re)assign the values they always want. It's mainly so they will know what values (for margins/padding/line-height/etc.) will be for all html tags.

I'm not saying the CSS is bad or that it wouldn't be useful somewhere else. I'm just saying it will take some time to be sure exactly what it actually does before you could use it safely and efficiently anywhere else. Anyone could use it, but it might get really frustrating to make the site look like anything else. eek2.gif

But, it's always good to remember, it doesn't take a Rocket Scientist to be a Brain Surgeon! laughhard.gif
THERE ARE TWO TYPES OF COUNTRIES
Those that use metric = #1 Measurement system
And the United States = The Banana system
CAUTION! Childhood vaccinations cause adults! :yes:

Offline Paddy

  • Administrator
  • TS Addict
  • *****
  • Posts: 13797
    • View Profile
    • https://www.paddyduncan.com
Kompozer to edit webpage
« Reply #13 on: January 29, 2011, 09:44:45 PM »
laugh.gif I don't think I'd suggest anyone use that particular code - or that it would be a nice place to start learning CSS, Jim!!There's stuff in there that I wouldn't touch with a ten-foot pole at the moment...text-rendering: optimizeLegibility; for instance - see: http://www.aestheticallyloyal.com/public/o...ize-legibility/

And yes - that link at the bottom of the page that says it will crash Safari...crashes Safari. tongue.gif (had to try it!)
« Last Edit: January 29, 2011, 09:47:18 PM by Paddy »
"If computers get too powerful, we can organize them into committees. That'll do them in." ~Author unknown •iMac 5K, 27" 3.6Ghz i9 (2019) • 16" M1 MBP(2021) • 9.7" iPad Pro • iPhone 13

Offline jcarter

  • TS Addict
  • *****
  • Posts: 5808
    • View Profile
    • http://www.jcarter.net/ourdogs/muffinpage.html
Kompozer to edit webpage
« Reply #14 on: January 30, 2011, 07:38:55 AM »
Hi Paddy,
Some wonderful sites you've designed!
I LOVE the Bahamas, though only set foot on Eluthera a couple of times, we rowed ashore from the boat and walked around.
Andros is our favourite, the blue holes are amazing to see, though you could not pay me to dive in them, we just snorkeled around the surface. Looking down into the crystal clear water and not seeing the bottom is eeeeeerrrrrriiiiieeee.
PointOvue sure is a pretty house, I LOVE your pictures, and its so much fun to fly around there in a small plane. Digital cameras werent around the last time we did.
Can be awfully windy there, but I see that their house is on the Atlantic side and that is a big plus during the winter months.
Oh, Im getting off the track here, but I think your pictures are just wonderful and I will have to try JAlbum again for sure.

Hi Jim,
Taking your advice and Im sticking with the easier CSS, learning slowly, but oh, it sure is fun!

And I have a JAlbum page I made many years ago, I will have to see if I can find the URL for it.
Should try more, as I hopefully can remember my user name and password in my old notebook(paper).

You two should start some on-line classes in CSS!
Jane