14 Replies Latest reply on Jun 6, 2010 4:13 PM by teresamoore

    Early retirement or learn CSS QUICKLY?

    teresamoore

      I'm a school and small business webmaster who has just been forced to migrate from CS3 to CS5.  The site I have been working for the past 2 years was easily designed in (you guessed it) basic HTML with tables.  I'm bright enough, I suppose, but CS5's complete focus on CSS is kicking my tail.  When I opened my tables-based site in the new program, I couldn't even change the font size or the text colors without skewing everything else on the page.  I have updates to do that I've easily done without much thought for all these past months and so I guess now I need to learn a new way of doing things in a HURRY!

       

      At first I tried to turn CSS off, but no luck.  Then, I researched CSS for the three days, listening to and reading one tutorial after another.  I understand that CSS controls the APPEARANCE of my pages.  I am more a WYSIWYG person although I can write basic HTML.  Everything I came across on the 'net tells me how to write code, not how to put together my pages in design view.

       

      I have used CS5's examples to no end, but when I change the background of the sidebar1, it changes the background in all the page elements.  When I bold a particular bit of text, it bolds all the text on the page.  When I delete everything and add a new element, I can't move it around.  I can't confidently drag pictures into my pages anymore.  I have downloaded one CSS template after another but I can't edit them in the way I want.  I thought of using an open-source editor that was more basic than CS5 but I've been with Dreamweaver since MX and I hate to give it up.

       

      I just want a simple three-column liquid with a header and footer.  I want the header and footer to be one color, the sidebars another color and the main content pane to be a third color.  Then, I want to be able to add text and links to all this. This has never been hard until now.

       

      I've never posted in a forum before, so you can guess the extent of my frustration.  I am ashamed to say that I must need step-by-step instruction but I can't find a suitable tutorial on the web.  I have designed three other sites (for three other customers) and these are backlogged in their debut because I find CS5 and CSS difficult to substitute for what I've been doing for years.  Could someone here please point me to a proper learning exercise that will get me up to speed quickly? Preferably one that says click here and do this....

       

      Or, you could just recommend that I retire.  LOL.

       

      Help, please!

        • 1. Re: Early retirement or learn CSS QUICKLY?
          EagerBob Level 2

          You say you were forced to CSS because yo migrated from CS3 to CS5

          but the reason Dreamweaver has changed is because the web has changed.

          And as it is evolving all the time, and will further evolve in the future, you will have to learn some new skills if you want to keep on being a webmaster.

           

          I think learning CSS is not that hard if you do it step by step. If you can write basic HTML
          you can go from there and learn to master CSS without too much trouble. Truth is, your HTML will be simpler than what you wrote before.Your websites will become better too if you learn to build them according to webstandards. They will work better across different browsers and they will also be easier to maintain.

           

          I'd say forget about "dragging pictures" and design view but learn to build a site in code view instead. It is not that hard and it will give you a better understanding of what is going on.

           

          Personally I never use design view myself. I hardly use any commands from the toolbar. I work in code view or splt view and check my pages in a browser that I keep open.

           

          when I change the background of the sidebar1, it changes the background in all the page elements.  When I bold a particular bit of text, it bolds all the text on the page.

          This has to do with CSS selectors. By using the right selectors you can target the right elements in your page. Understanding how to use selectors is essential to write efficient CSS. This is very much what learning CSS is about.

           

            When I delete everything and add a new element, I can't move it around.  I can't confidently drag pictures into my pages anymore.  I have downloaded one CSS template after another but I can't edit them in the way I want.  I thought of using an open-source editor that was more basic than CS5 but I've been with Dreamweaver since MX and I hate to give it up.

          Forget about dragging elements around, that won't work. You do not have to switch to an other editor than DW, if you work in code view you'll have everything you''ll find in a good text-editor plus all the benefits of DW: code-hinting, code-validation,  templates, site-management etc.

           

          Working in code view might seem daunting at first but (for me al least) it is the best way to learn and understand HTML and CSS.

           

          I learned it myself after resisting it for a long time, during a period that I was forced to sit at home, recovering from illness. I found that if you give it some time (which I had plenty) that it is, in the end, not so hard. (although you WILL scratch your head every now and then)

           

          I bought some books, read them and followed the examples that were given. Books I can recommend are: CSS, the missing manual written by David Sawyer McFarland and Dreamweaver, the missing manual by the same writer.

           

          CSS, the missing manual, is the best book of the two to learn CSS since it concentrates on just the CSS instead of going into all the Dreamweaver details. The book is also half the size of Dreamweaver, the missing manual, so it is a bit easier to swallow.  Highly recommended and probably better for you than tutorials since you'll go step by step instead of searching all over the web for tutorials which may or may not suit your level of experience. The book is also well written and fun to read.

           

          I'd say go for it!

           

          (you can always retire...)

           

          Message was edited by EagerBob: corrected some typo's

          • 2. Re: Early retirement or learn CSS QUICKLY?
            hans-g. Adobe Community Professional & MVP

            Hi,

             

            I can understand your frustration, but always a light will be found at the end of every tunnel!

             

            In the large range of the Internet you could click here for example:

            http://matthewjamestaylor.com/blog/perfect-3-column.htm

            and then here

            http://alt-web.com/

            and all will get better, definitely!

             

            And finally, how about to send us a link to your website, then we could talk in a more specific way.

             

            Hans-G., permanently searching so too!

            • 3. Re: Early retirement or learn CSS QUICKLY?
              mhollis55 Level 4

              Oh heck. Just retire.

               

              I'm not serious.

               

              Here's what I have learned.

               

              I inherited a site that is all tables. Old Skool. Client totally LOVED the site and it's really not accessible or modern standards compliant. I offered the client a complete redesign of the website. He hated it! Back to square one.

               

              You can do tables under CSS. But all of the things you used to use tables for need to be styled in CSS. Frankly, there is a real need for tables in modern website design and one of the best applications is tabular data. I also use tables for things like hours of operation, price lists, contact forms and other fun stuff.

               

              What you do is you style the tables in your style sheet. So, if you are using a table to describe a navigation column down the left side, the background (or background color) you are using needs to be set up in your style sheet. Show us your website and we'll show you how to take the table you're having problems with and style it using CSS.

               

              Then, you'll learn CSS.

               

              Frankly, I would have tried to stick with Dreamweaver CS3, which also allows you to style anything and everything in CSS. Then, once I had a general idea of how to set styles in style sheets, done the transition to CS5 with that knowledge. I'm going to hazard a guess that the biggest problems you are having have to do with the changes between Dreamweaver CS3 and Dreamweaver CS5. And for that, I would change the default Split View back to vertical from Horizontal and get used to using the Dreamweaver's styling and inspection panes to set things up.

              • 4. Re: Early retirement or learn CSS QUICKLY?
                Zabeth69 Level 5

                Nothing wrong with tables, especially if you have inherited the site. If you're building new, CSS is the way to go...tables are for data.

                 

                Costly to change radically. Can be styled with CSS more easily than inline, in fact. If a site is built in tables, don't change it structurally, change it stylistically and gradually.

                 

                Make copious use of Search and Replace in Entire Local Site to get rid of local styling and apply specific CSS.

                 

                Split screen rocks. Set it to vertical, code on left and Live View on the right. Then you see "in real time" what your changes do.


                You will (and may already) love the dependent files being accessible without going to the Files Panel.

                 

                Don't retire! We need you!

                 

                Regarding CS3 vs CS5: use the latest and the greatest and you do the appropriate adapting. The best support will be for the most recent version, because as we all learn it, we want someone to teach it to and reinforce our own understandings.

                 

                Beth

                 

                Message was edited by: Zabeth69

                • 5. Re: Early retirement or learn CSS QUICKLY?
                  M.R.Biesheuvel Level 3

                  Well wathever you do don't retire...

                   

                  Maybe an idea. Webassist offers CSS sculptor wich is a nice extension to dreamweaver and you can design al sorts of pages with. And in the learning proces these designs also give a good example how to use css.

                   

                  So you can design and learn at the same time......

                  • 6. Re: Early retirement or learn CSS QUICKLY?
                    Richard_vav Level 3

                    I know what you mean, the first site I created was all done using tables and a few years ago when I upgraded from macromedia dreamweaver to adobe cs3,  i decided it was time to start from scratch with the website and create it using css, it took some time to get used to, I'm still not 100% confident but I have figured most of it out and the website does what is was supposed to do and looks great.

                     

                    May I suggest you pay a visit to the adobe tv website, they have some great videos which talk you through all the aspects of dreamweaver.  The following link is for a learn dreamweaver cs5 video that is about using the css property inspector to create and modify css styles for individual components without affecting the entire page or site, unless you want to of course.

                     

                    http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs08-controlling-css-from-the-property-ins pector

                    • 7. Re: MOVE OVER OLD WOMAN, or, how to move elements
                      teresamoore Level 1

                      Hello from h*ll...

                       

                      In regards to my forays into CSS, first I want to thank everyone for their helpful tips.  I looked at every link and bought the books recommended.  I'm now on my second reading of Getting Started with CSS, attempting to make it make some sense.

                       

                      Boy, CSS took the WYSIWYG right out of it, didn't it?  Whew!  I'm trying, though, and have only told the three schools I serve that they MIGHT have to find someone else to do this.

                       

                      I can't show you my original sites as recommended because the State Dept of Ed has the server down for summer maintenance.  The sites aren't much but they mean a lot to the students and faculty that look at them every day.  I liked the one recommendation here that I just leave the sites as they are for now and gradually ease them into CSS.  I tried that but in CS5, I can no longer change the background colors of my cherished tables.  LOL.

                       

                      I did find the holy grail layout VERY HELPFUL.  I fiddled around with it while reading the book and I've made progress.  I'm actually able to change the colors and fonts and have a minimal understanding of the elements.  But...sorry it took so long to get around to my question...I simply don't understand the concept of positioning.   Fixed, absolute, from Venus or Mars...one site I read said the x/y positioning coordinates are set along a z axis.  Well, that certainly made things clearer, particularly since I majored in Shakespeare in college and not astronomy.  The positioning is relative to to edges of the browser window?  If that's the case, how do I measure?  I have rulers on in Dreamweaver.  Does the ruler read in pixels?  Looked like inches to me.  So if I created a new box and I measure the distance from each edge of the window to where I want the box to go, and then adjust the values in the box properties, will that put the box where I want it?

                       

                      As it is, I'm stuck with just the fixed layout in the example that I'm using.  I can't add or take anything away from it.  When I actually put in a new div and named it picturebar, it looked awful so I took it out and was left with a white band runing through the content box and errors about extra white space.  I was never able to get rid of the white space, so I had to open up another template and start from scratch for the hundreth time.

                       

                      Now I know it's not ya'll's job to teach me to use Dreamweaver or CSS.  But the budget doesn't include classes or the fancy CSS Sculptor.  It only included this danged copy of CS5 because the copy of CS3 was installed on too many computers and when my mobo died, I couldn't reinstall CS3.  I feel bad because the kiddies are waiting for the honor roll to be posted as soon as the server comes back online Monday.  Some of them will share my disappointment, I expect.

                      • 8. Re: MOVE OVER OLD WOMAN, or, how to move elements
                        Ben M Adobe Community Professional

                        You could post your website to a free host for the time being if you wanted us to take a look at how the code is coming along in the browser.  There are still a few around and we can ignore the ads with no problems.

                         

                        As far as positioning goes, it is more important to pick up what the types mean rather than to worry about laying things out to absolute positions.  What happens if you position things to a particular point on the screen in will be in that same point on every screen, but accessibility will be difficult and also with higher resolution monitors you will end up creating whitespace that does not benefit your site.  The basics you need to know are Absolute, Relative and Fixed.  Fixed is typically used when you have an element that you want to stay on the page when it scrolls.  The best example of this is http://store.apple.com .  Try to configure a Mac (the computers not the iPods or Pads).  On the right you will see the summary stays on the page.  They have modified things a little with the scripts they are running but essentially that is fixed.

                         

                        Absolute and relative are not fixed on the page regardless.  If you position something using relative it will stay within the flow of the document.  Absolute will position things to a pixel/percentage in relation to the outermost container.  For instance, imagine you have 2 boxes.  You have one box 500x500 px positioned absolutely with positions top:0 and right:0 .  That will put it at the top right of your page.  Now you have a div inside that positioned absolutely 300x300 with top:0 and left: 0.  This box will not appear on the left side of the browser, but yet it will be at the top of the browser window because of the 0 on its attribute and the 0 on the outer container, and then it will be 500px from the right hand side of the browser window because the container it is in is 500px wide and positioned to the right.

                         

                        The third point you bring up about positioning is the z-index.  This is just one of those old fashioned line graphs.  You have an X-axis, horizontal, and a Y-axis, vertical.  The Z-axis only states which item shows on top in case you wanted to position layers on top of one another.  Think of it like the layers panel in Photoshop or InDesign.  The higher the item is on the layers panel (greater the Z-index) the higher it is on the page in relation to other elements.  This only affects fixed and absolute elements because relative elements follow the flow of a page like 2 table cells next to one another whereas fixed and absolute can overlap.

                         

                        The following is a quick tutorial that will show you and let you play with examples of each of those: http://www.w3schools.com/css/css_positioning.asp

                        • 9. Re: Early retirement or learn CSS QUICKLY?
                          teresamoore Level 1

                          Okay, the State Dept has the server back up and here's one of the sites.  Please understand that the inconsistent formatting (bold at times and not bold at others) is because I unfortunately saved some edits to the site with CS5 before I realized I couldn't turn CSS off.  Lots of the paragraph text is not supposed to be bold but I couldn't figure out how to change it when all I did before was turn bold off.  Several of the headings are naked (not bold), because something turned that off.

                           

                          http://www.alex.k12.ok.us/

                           

                          Please be kind.  I make a little money off this every month and the kids love it.  And, hey, I got almost 26,000 hits in one school year, that from a school with only 400 kids.

                           

                          How can this be dragged into 2010 with CSS that won't allow me to even get consistent paragraph styles?  All the incomprehensible reading I've done is showing.  Paragraph styles?  LOL.

                           

                          The Old Woman

                          • 10. Re: Early retirement or learn CSS QUICKLY?
                            teresamoore Level 1

                            http://www.alex.k12.ok.us/css%20index.html

                             

                            Okay, here's the draft css page.  I didn't put the honor roll in this version.  My kid didn't make Superintendent's anyway, only Principal's.

                             

                            Obviously, I can't have the picture bar that's at the top of my original page.  I guess we'll have to live with the white space below sidebar2.  As I understand it, the colors only extend the length of the box.  I can deal with all those things.  What I need, though, is a way to make the text consistent.  The first heading "News and Announcements" should be 16 point Verdana.  All the other headings should be 14 point Verdana.  The paragraph text should be 12 point Verdana and should start immediately under the heading with no extra line.  The only way I can apply formatting to the headings and paragraphs is to separate them with at least one line. When I change the paragraph formatting, it reduces the size of the headings.  HMMMM....

                             

                            These school sites change often, so I have to be able to add pictures and text with some confidence. All three school sites are exactly alike, only the colors are different.  So when I get a workable template, I'll have to go to work changing all 40 pages of each site.  SIGH!  By the way, all three school use nothing but IE7 and I previewed everything (before CS5's live code view, of course) in Firefox, which is the only browser I use.  I validated all my tables code in the original site and it passed with flying colors in all browsers except IE6, which I don't give a hoot about.  I alternate Windows XP dual-booted with Windows 7 on my Intel Board, Safari on my Mac, and the newest distro of Ubuntu Linux on my trash machine and have never seen a problem with the original site except for a reversion back to Times New Roman in Linux when I used a really exotic font.

                             

                            As I mentioned before, I can't go back to CS3.

                            • 11. Re: Early retirement or learn CSS QUICKLY?
                              teresamoore Level 1

                              Oh, and one more thing for ya'll to roll yer eyes about when you read this on the rapidly approaching Sunday morning:  I used several scripts in my HTML table pages.  Can I still use these in a CSS page?  Are there special formatting rules about scripts too?

                              • 12. Re: Early retirement or learn CSS QUICKLY?
                                Ben M Adobe Community Professional

                                I'll take some time to take a look at your 2 pages this morning and you should be able to keep your pictures at the top like you had.  A couple quick things before I go in depth on this that jump out at me.

                                 

                                The CSS.  When you have styles on a page that you are going to use more than once, your best bet is to click on the CSS tab in the Properties window (typically at the bottom).  Then highlight the text you want to modify and choose Edit Rule to create a new rule for CSS.  This will open up the New CSS Rule window where you should select a "class" most of the time because classes can be used as many times as you need on a page.  Then when you type the name of the rule you will get a window that shows you a bunch of options of how to style the text.  The advantage to this is that you get to name the class something meaningful and when you want to use it on the page, instead of choosing the styles again (ie: bold, underline, font-size 14px) you can go to that CSS tab and from the Drop-Down for Targeted Rule you can choose to Apply Class .yourclassname.

                                 

                                Otherwise what ends up happening is DW creates classes called .style## where ## is a sequential number.  And you ended up with a lot of nested style classes being applied when they were not meant to be.  In particular I am looking at Line 136.

                                 

                                With regards to your scripts, there should be no reason why you would have to abandon them.  If you have a concern about a specific script if you could post which one it is on a particular page I could take a look at it.

                                • 13. Re: Early retirement or learn CSS QUICKLY?
                                  Ben M Adobe Community Professional

                                  Ok, as promised I did a thorough look through your page.  Just for reference so we don't have to scroll through everything:

                                   

                                  Original Page - http://www.alex.k12.ok.us/index.html

                                  Your CSS Page - http://www.alex.k12.ok.us/css%20index.html (spaces in names can become issues with certain things, best to use letters, numbers and _ in names instead of spaces)

                                  Proposed CSS Page - http://parkwaygaming.com/alex/index.html

                                   

                                  First off, you gave me an excuse to try BrowserLab for the first time.  It seems to work, ok...

                                   

                                  Anyways.  I did a couple things and I'll explain the how and why are can take what you need (source files included although I would need an email address to send them to).

                                   

                                  -First the logo, traced into Illustrator and placed into Photoshop file for web production.  The Illustrator file turns the logo into Vector art (vector is done via math formulas whereas Photoshop is based on pixels so you can transform vector art into any size/resolution you need).  Took your artwork from current website with the collage (largest image available) and placed it to fill the space a little more.

                                   

                                  -Next is the menu on the left.  Mouseover color changes were making your page look dark like the top black background.  Removed that and added the logo to a gradient background.  Then for the a:hover in CSS I used a background image with a positioning set to center and no-repeat put on to ensure it's only in the middle of the link and shows up once.

                                   

                                  -Back to my previous post with DW styles, I modified the CSS document with some additions and comments as to what I added.  I removed pixel based font sizes.  Primarily because I don't know your audience and what resolution they are using.  Also for accessibility purposes, I set the sizes to be relative to the browser settings (em) rather than defined sizes (px) because as the resolution goes up those pixels get smaller and smaller and vice versa.

                                   

                                  -With regard to your font sizes changing there is an important item in DW that was introduced in CS4 that you should pay attention to. At the bottom of the design window.  You will see something like <body>... and other tags following that.  By selecting that it will select the proper part of the code that you need to edit.  What it sounds like is happening is that although it appears you are highlighting one portion of text you have actually highlighted more which is why they put the links at the bottom to help out Design View.

                                   

                                  -The question in the middle about ordering media. This is just an example to help you out with spacing and drawing people's attention.  Just by changing the margins and putting a simple border around a box you can draw attention to the media.  It makes it an easier read on the user rather then just long paragraphs.

                                   

                                  -Next to show you that old styles still exist, I used a table to show the board members title and name.  Quick simple and the easiest way to show this data.

                                   

                                  Now I didn't get a chance to look more in depth at options for your pictures or things like that but I think this should give you a good start.  There isn't too much to do with stretching the sides unless you run a ton of modifications to the code which can make things really confusing.

                                   

                                  Lastly, there are some tricks with the Spry Data Sets that you could use to make inserting data to certain pages much easier (this was introduced in CS4).  Otherwise, with editing news and other items you are very close to looking into CMS' (Content Management Systems).  However, that would require server-side scripting that would vary based on your server (ie: PHP or ASP with mySQL or MS SQL database).  All of this really depends on your needs and what gets updated and how often and by who.

                                   

                                  Making it into a template shouldn't be too bad.  Just add editable regions where the comments inside the sidebar1, content, and sidebar2 divs.  Then save as a template.

                                   

                                  This is probably a lot for you to take in so I'll stop there for now.  If you have questions feel free to post back or PM me.

                                  • 14. Re: Early retirement or learn CSS QUICKLY?
                                    teresamoore Level 1

                                    SnakEyez02:  Thank you so much.  You have really gone above and beyond.  The kids thank you as well.  Several of them have already looked at your effort and gave it a big thumbs up.  Would you let me put a line on the site about the work you have done to help us?  Kids need to know that people from all over help one another.  Perhaps just give me your first name and where you're from when you send me the source files. My email is tamoore24@sbcglobal.net.

                                     

                                    Your template will allow me to have a working example from which to learn.  That's what I really needed.  When I add more links to the nav, I'll just use your formatting and everything should come out okay.  I am well versed in creating templates.  That didn't change much over versions of Dreamweaver.  I have been studying madly and had figured out some of what you mentioned in your previous posts.  I think I've got a basic understanding of the concept of CSS, with lots of help from you, which is WAY more than I had when the weekend started.  I'm generally a pretty quick study and, just as people here told me, I found myself spending a lot of time puzzling over the code and began changing it with what I had learned.

                                     

                                    Lastly, there are some tricks with the Spry Data Sets that you could use  to make inserting data to certain pages much easier (this was  introduced in CS4).  Otherwise, with editing news and other items you  are very close to looking into CMS' (Content Management Systems).   However, that would require server-side scripting that would vary based  on your server (ie: PHP or ASP with mySQL or MS SQL database).  All of  this really depends on your needs and what gets updated and how often  and by who.

                                     

                                    Feel free to make any suggestions about how you think I should proceed.  Remember, though, that I am the only person who edits the sites and therefore my time is limited.  I generally update the site twice a week during football season and once a week after that.  The State Dept of Ed told me only basic HTML sites were allowed on the server.  I can use javascript and simple flash.  No flash-based sites or anything like that so I suspect I'm fairly limited in what I can do.

                                     

                                    I do have another question...I previewed my CSS in live view and Firefox as I was fidding around with it.  After I sent the page to you, I thought to look at the page in IE8, which I never use. Sure enough, there were problems:  IE8 put extra white space on the right side of the page and the bottle.  Because of this, the first thing I did with your new template was to open it in IE8.  No white space.  How did you get rid of it?  I expect I'll need to know that when I start from scratch and add a two-column liquid to my other sites.

                                     

                                    Again, thanks so much.  Please send me the source files so I can continue your design.  You don't know how much you've helped.