TYPO3
The CMS platform for my new web-project.
Now, time to learn.
After “Installing” it through my webhosts softacolous script manager.
I faced a virtual wall, also known as limited theoretical and practical programing skills.
C++, PHP. MYSQL….anyone?
Oh dear, help me choose!
Though one could always opt for both i.e use CSS for the index page cancerapps.co supported by a ”main” CMS for a sub-domain such as cancerapps.co/blog which in reality will serve as the main domain!
Hm…
Right now, I am just a few clicks away from implementing the scheme drafted above.
Thumbs up or…down?
Your opinion is appreciated.
Oh, and one last thing, follow me on Twitter I’m fun!:)
The best way to learn, is to teach. So I am going to display my interpretation of someone else`s CSS tutorial, with some minor adjustment. The original tutorial, which is one of my favorites, can be accessed HERE It is not very aesthetically satisfying, but it works.
Now come, follow me…baby steps.
First you must open Kompozer
Write a list of every element you want in your website. At the top you can put the name or concept of your page (One step behind…) and at the bottom I find it very convenient to include the date stating when the page was created/last updated. (Updated 09. August 2008 at 05.27 p.m) The time I have set is approximately two hours from now, so I intend and hope to have a somewhat functional simple website by that time.
Then the page needs an identity. It needs to get a name and be saved. Tap the “Save” button and call the page “index” put it in a folder “website” that you crate on on your desktop for the occasion. Make sure that the page is saved as an HTML-document (index.html).
Now we are geting to the fun parts, lets take control…
Tap the marker into the top line, so that it blinks among the letters making your first (and probably most important) statement. There is no need for blueing the whole thing…
With the marker safely and according to previous instructions placed in the top text of your choice, go to the toolbar were “Body Text” displays as default, give it a tap with your left mouse-pad-button, then select “Heading 1″.
Then repeat this procedure with each of the remaining stubs of text, except one crucial difference, now you select “Paragraph” instead of “Heading1″ for all of the remaining subjects. (I don’t know if its possible to just blue-mark the whole thing and make the selection only once, instead of exostingly 7 times, but I don’t know, and I am scard of what happens if I start doing things my way, not always a good idea. Better safe than sorry)
Then save the page
Now we are going to take a dive into the enchanting world of Cascading Style sheets.
Tap the pallet button to open the style sheet editor. This is your friend.
Tap the “+internal stylesheet” so it acquires a nice shade of blue, then tap the chubby yellow curved arrow above to refresh the editor. It should now look like this:
Now there will be a very interesting turn off events. The true beauty of CSS…
This move will make it possible to change the appearance of zillions of web-pages by changing only one style sheet. It is like painting one house red (the house in the external stylesheet), and just by doing that, all houses in the rest of the world with same need for paint and attatched to the same style sheet turns red. Just like that. And if you don’t like it…just change the external style sheet to a different size/color/shape, and alle the other houses of that type (defined by you) changes too. It is so convenient! Now, lets make it happen…
Tap the large Export sylesheet and switch to exported version
Type a file name like “teststyle.css” and save it in the same folder as the “index.html” file.
This “teststyle.css” is your one drug to cure all diseases. What previously just was a local paint job, is now a tool to change the world.
Bringe out your inner dictator, its time to make the rules…
Tap the “external stylesheet” in the left field, just to make sure it is selected.
Tap the Small pallet button right above. You are now in a position to lay down the law.
Make sure that the “style applied to all elements of type” is select. Tap the open field with a small arrow at the bottom of the New style rule window, and select “h1 Heading 1″. Then tap the Create style rule button to make it official.
To your left there is now a selector-area and a read disc icon which indicates that the rules you have stated are not saved yet.
The right part of the dialogue box have turned into a candy store of commands, just waiting for your stylish instructions, do whatever you want. The internett is your oyster…
The only problem is that it can be a bit difficult to force “the rules” to do exactly what you want. (I suppose it`s just a beginners problem, which can be solved by pushing all the buttons, at random….until it looks right)
Anyway, now make sure you can see the main window where you wrote your list of content. You can follow the changes real-time. Tap the Text at the top, and make these following adjustments:
- Font family: “predefined” and leave the “Arial, Helvetica, sans-serif” in the selector field.
- Color: tap the field and select a color of your choice. If you cant decide, red is always nice.
- Font size: select “0em”. then use the arrows to enlarge it to “3em”.
- Font weight: select “Bold”
Tap the Background tab at the top, choose the color field and select a color that is lighter than the one you selected for the text.
And then we concour the tab Borders
- Check that “All for sides the same” is checked”
- Choose. Top -> Style: “Solid”, Width: “1px”, Color: “a dark one”
Now we are going to set the rules for paragraphs (No need to press the OK button yet, though its tempting, restrain your lust)
- Tap the pallet button to the upper left in the CSS stylesheet window.
- Make sure the “style applied to all elements” is selected. Go down to the selection field and select “p (Paragraph)” then tap Create style rule button. And do the following adjustments by using the right side text tab, just like the previus adjustments.
-Font Family -> Predefined -> “Times New Roman”
- Font style -> “Italic”
- Color -> “Black”
- Font-size -> “1em”
Your screen should now displaysomething like this
Now there will be some advanced CSS, creating special sub-categories of styling. Gather your strenght…
Tap the pallet button, and this time select
New Style rule -> Create a new -> “Custom style rule”
- type inn “p.first” (without the quotation marks) And comfirm your choice by taping Create Style rule
Go to the Text tab and make the following adjustemts:
Predefined -> Font family -> “Arial” (dont think WHY am I doing this, it will all make sense later, just do it)
Now that’s done and dealt with, we will crate a very convenient rule for Dates (the the annual/seasonal kind)
Tap the pallet button and select
New style rule -> Create new -> “Custom style rule”
Type in “p.date” (with out the quotations) and tap the “create style rule” button.
Go to the text tab and make the following adjustments
Alignment -> “Right”
Font-size -> “0,75em”
*The spesification for Font type “Arial” is inherited form the parent rule!!
Go to the Borders tab and unchecked “All four sides use the same border size” We are not trying to make a box/frame this time.
Now you have four sides to play with. But we`ll keep it simple and go for only one skinny line…
Top -> Style “Solid”
Top -> Width “1px”
Top -> Color “One that match your heading”
THEN you can tap the OK button.
Now we have some match-making to do. The rules needs to be assigned to its partner in the HTML document. They just don’t pare up instinctively, like humans. So…
Put the marker in the first line after your heading. On the formation tool bar at the top of the page, you can now se “paragraph” in the Paragraph formating selection. Just to the right you can see a blank list field which serves as a Class specifyer.
Tap into the box and select “first” The first line will not turn bolder. Do the same for all your consecutive listed items, except the very last update date.
For the line containing the latest update date, tap in it. And in the class selector you select “date”. (contrasting previously when “first” was chosen)
Save your site, and take a look at it in a browser of your choise. If it looks something like this, you are on your very fine way to concuring the world of virutual riality…the REAL real world.
Unfortunately, I am a quitter. And making a tutorial was more time consuming and emotionaly draining than expected, so…eh, this is all there is!
Anyway, here you can have an inspirational look at my un-tutourlialized first final web site
Now, move along and create the world wide enchantng web…
Have some free usefull links on your way:
- En introduksjon til CSS (Norwegian)
OXOX
Its so typical. When something young and new try to raise up and make its mark upon this world, the old established codes of conduct does everything in their declining power to beat those Little punks down.
This very day, I made a beautiful link using Kompozer and CaScadeSeditor. It looked good, or at least that’s what I thought in the beginning. Then all of a sudden some HTML-coding comes from nowhere and defaults my link, turning it into a sick shade of purple, accompanied by a hidious underline which is impossible to remove.
HTML, I hope you are listening cause I am telling you: “you might be winning a battle, but you`r LOOSING the war” Thats right…
After some sleepless nights, pondering how to make my website by ONLY using CSS. I came to think of myself as a Cascading style sheet.
Whereever i go, I see the world with a set of rules which are specifically defined by me, and the world surrounding me is similar to the HTML/XML. No wonder people don’t get along….when everyone carry their own internal CSS style sheet which tell them how to decode the world…and there is no common identifiable syntax.
I definitely prefer the virtual world were there at lest is some degree of standard and structure. Reality just drives me crazy, cant handle it.
And, just like CSS, I also inherited some style properties from my parents. Noting to do about that…
And it is frustrating me. Trying to make an cutting-edge website, with limited programing skills..
Previously I have been somewhat successful in making websites, first with pure HTML-coding, later with Dreamweaver, and now im on the Kompozer track.
But this CSS thing, I just dont get! What is it? I WANT to push the tabel button, but at the same time…I know its wrong. Its too easy. I need to do the CSS thing, I am sure if I just get the “what I am missing” It will be an incredibly powerfull tool, and I will be able to do what EVER I want, a dictator. The web will obey my commands.
The only problem is, I just dont get it, I DONT GET IT AT ALL!!!
Help…anyone?
