Thread

Im reading the tutorials, learning html and css, so far this is what i figured out: I create a static html page thru html code, then i give it style thru css code, then I put all this together in EE and thru EE tags it makes my page dinamic, am I right?

Well yes, the short answer is a definite resounding yes! 😉

If you need more help as you go along just give us all a holler and we will see what we can do for you.

Welcome to ExpressionEngine by the way 😉

Best wishes,

Mark

these tutorials assume a pretty good working knowledge of XHTML/CSS.  If you aren’t comfortable editing CSS selectors, using div tags, or don’t know how to use the W3C CSS and (X)HTML validators then this tutorial series may not be for you.  A good share of the issues I’ve worked through with people using this series are straight HTML or CSS related - missing div tags, extra spaces in CSS files, etc - so the more comfortable and experienced you are at solving those problems the easier it will be to make the jump to ExpressionEngine.

so its really necessarily to have skills on xhtml and css before you go EE ?
any good xhtml & css tutorial ?

Hi again,

You don’t have to know XHTML and CSS to the nth degree but if you are designing a html site in any CMS then you are going to need to know the basics at least. No CMS will place the code in for you so having a good understanding of it before you dive head first into ExpressionEngine will definitely help out here.

I’ve never used these but it might be a good place to start :

HTML CSS Beginners Guide - Sitepoint
Looks long but also very comprehensive by the looks of things

W3 Schools - Learn XHTML

World Wide Web Consortium Links

All in all though if you want to code a site then you are going to need to know about markup languages before starting out in ExpressionEngine or you may get out of your depth very quickly.

Hope some of those links help you out.

Best wishes,

Mark

and what about using Dreamweaver as HTML editor and web designer?

That’s entirely up to the individual. Myself personally I don’t use these types of programs as I just see them as bloat-ware and they always want to mess with my code. I simply code by hand. Perhaps not something for the beginner (depends on the person though) but right for me.

There is a thread on here about Panic - Coda which is a very good program as it is quick, simple to use and still powerful.

It is entirely up to you though as to which program you decide to use to code your sites in. Myself I design wire-frame layouts first of all in InDesign and then take these across to Photoshop to ‘flesh’ them out and then hand code the XHTML / CSS for the pages. I can then take the code that I have once I am happy with it all (and it all validates strict!! 😉 ) and place it into the different ExpressionEngine templates that I need for my site.

It’s really really good to sit down first without touching any programs at all and just take a few hours to write down everything that you wish for your site to achieve, what pages you need, what type of page they will be and how it will all link together. This really does help in the long run as you can always go back to it for reference.

Hope that helps a bit.

Best wishes,

Mark

and what about using Dreamweaver as HTML editor and web designer?

Not exactly my weapon of choice. And you still have to manually insert the EE tags in the code.

If you are new to CSS layouts, your best bet would be to find a solid layout and tweak that.
I’ve always had great luck tweaking this basic 2-column layout.
The Center link there goes to a tutorial article for the layout.
In fact I have used this layout so many times, I should ask Roger’s permission to be able to write-up a todo list to converting this to a layout and add some styles and url backgrounds for certain elements using CSS image-replacement techniques.

I’ve shared this with others who would rather just use Dreamweaver to create the CSS, they wind up with a mess by not understanding how to keep the CSS simple.

Of course you can always find CSS open source/free templates pretty much ready to go, with some visual styling already. The beginner usually goes that route a couple times or so, too. 😊

-ty

If you are new to CSS layouts, your best bet would be to find a solid layout and tweak that.
I’ve always had great luck tweaking this basic 2-column layout.
The Center link there goes to a tutorial article for the layout.
In fact I have used this layout so many times, I should ask Roger’s permission to be able to write-up a todo list to converting this to a layout and add some styles and url backgrounds for certain elements using CSS image-replacement techniques.

I’ve shared this with others who would rather just use Dreamweaver to create the CSS, they wind up with a mess by not understanding how to keep the CSS simple.

Of course you can always find CSS open source/free templates pretty much ready to go, with some visual styling already. The beginner usually goes that route a couple times or so, too. 😊

-ty

How can I download that layaout?

You don’t download that one, there are no images, so you just go to code view, control + U in firefox win and copy the code, then paste it into a template. I do use a Wysiwyg editor to have a visual view, paste the code in then start adding backgrounds. For elements with an IR technique.
You can build the layout using dreamweaver if you like that, place the images in an EE folder,etc.

I had to google this, I guess it’s the Phark method of CSS image replacement I ‘ve always used, the negative text-indent is the important bit, it essentially yanks the text way, way to the left:
#header {
text-indent: -9999px;
background: url(/EE/images/whatever/H1sample.gif);
height: 25px;
}
There are variables for the image path, this one would be considered hard-coded.

It’s really really good to sit down first without touching any programs at all and just take a few hours to write down everything that you wish for your site to achieve, what pages you need, what type of page they will be and how it will all link together. This really does help in the long run as you can always go back to it for reference.

Probably the single most important advice that I would also give to a beginner.  Too many people see this kind of thing as trivial, but I find it invaluable to have a throughly planned out website in advance.  It frees up your creative energies and probably results in a more focused, better executed site.

Good advice Mark 😊

Thanks VB I probably got off track, going the road I was heading down, you’ld need a photoshop comp to work from, it get’s pretty involved. There’s lot’s of great templates to customize, go with those, learn as you go.

Yep I would definitely stand by what I said before.

No offence to yourself tzCodehead but I think that just downloading something that someone else has already written, no matter how clean / neat the code is, if you don’t understand it then it will just become even more confusing.

That having been said the write up for that layout is pretty thorough so would be of a good help to a lot of people. I still think learning from the very very basics is good though as it will give a more thorough standing in the future. It may take longer at the beginning but will ensure that you don’t get lost somewhere down the line with something very basic.

Just my 2 penneth worth though. Good find on that template though 😊

Best wishes,

Mark

It’s really really good to sit down first without touching any programs at all and just take a few hours to write down everything that you wish for your site to achieve, what pages you need, what type of page they will be and how it will all link together. This really does help in the long run as you can always go back to it for reference.

Probably the single most important advice that I would also give to a beginner.  Too many people see this kind of thing as trivial, but I find it invaluable to have a throughly planned out website in advance.  It frees up your creative energies and probably results in a more focused, better executed site.

Good advice Mark 😊

Excellent advice! :coolsmile:

I also advise using a project management tool to organize your workflow (not EE related) and keep you focused on the important bits as you fill in the pieces.

I’ve never used Gantt Project (GANTT charts are workflow charts), but it looks really cool, and it also appears to be free:

http://ganttproject.biz/

I go by a simple rule: If it’s easy for the client, it’s hard for the person making it easy. This is inversely proportional; ie, the “easier” it is for the client, the harder it is to realize for the coder, and vice-versa. We get paid to make it look easy, but usually the time and effort to get there is completely hidden.

“Overnight” success is hardly ever! 😊

now Im learning xhtml and css, its fun, but now I think if I should make a web by hand before going CMS, I mean isnt that the real way to learn, making the web by hand?