5 Replies Latest reply: Nov 14, 2012 8:02 AM by tylonrobinson RSS

    Adobe Creative Suite Confusion. Want to Create a Website

    LS8 9KN Community Member

      I am so confused by all the information or should I say I am overwhelmed. I am wanting to create a website. I have an idea of the layout of the website. It is basically using a PNG image that I had created as the background. Some rounded rectangle shapes which I need to add (Dont know how to do). I will be using a top naviagtion all text with one button dropdown menu and a header footer and a sidebar. I am so confused with CSS,what it is and why I need it etc. I dont know which tools in the creative suite I need. How is fireworks used. I have seen tutorials where people make sites in photoshop and then take to dreamweaver but I have been told the coding isnt clean. I just need some advice as what to do and where to start. I think it is because there are too many tools. I would purchase additional software if it meant my job is easier but again the coding needs to be clean.

        • 1. Re: Adobe Creative Suite Confusion. Want to Create a Website
          martcol Community Member

          Are you planning on just building one site?

           

          If that's the case and I were you, I'd have a look at using Wordpress.  Find yourself a theme and go from there.

           

          HTML/CSS, FW and DW are great fun but it's a lot to learn.

           

          Martin

          • 2. Re: Adobe Creative Suite Confusion. Want to Create a Website
            LS8 9KN Community Member

            Hi, the Creative Suite Package wasnt cheap so I am planning to do this as a career. Can you give some tips as where I would start. I guess I am asking what I need to use first. I am guessing fireworks but I have purchased a subscription for lynda.com and I am looking at the CSS tutorials. It seems I cant make the shapes in dreamweaver. I just dont know where to begin

            • 3. Re: Adobe Creative Suite Confusion. Want to Create a Website
              martcol Community Member

              OK, so Creative Suite is real beauty and such fun.  If you are going to master Dreamweaver you need to put most of your energy first off into learnign HTML and CSS.  Without at least a working knowledge of HTML and CSS Dreamweaver will hurt you, nip and bite you again and again!  The more you know about HTML/CSS the easier DW becomes.  I use Photoshop, Illustrator and Dreamweaver most out of CS and find the first two easier to work out because of my understanding of digital imaging.  However, Dreamweaver was difficult until I started becoming more familiar with HTML/CSS.  On top of that, you might like to think about some other scripting languages like Javascript and PHP but I reckon you can get by with a little knowledge there because so much of that stuff is available off the web.

               

              Personally, I don't do well with video tutorials.  I get too easily distracted.  I prefer books.  David Powers has written some very well regarded books but there are many others.

               

              Online resources are pletiful and w3schools is a good place to start.  Adobe's own tutorial stuff is great too.  With web design and development you will find that there are heaps of resources (and opinions) out there and maybe, the best thing to do is to build your own site.

               

              With regards your statement, "I can't make shapes in dreamweaver" maybe you should find out a bit more about the DOM, document flow, and the box model.  In my head, you don't make shapes with Dreamweaver.  A web page is a series of elements (in general terms, boxes) that you code up with HTML and style or manipulate with CSS and maybe, javascript.  A web page is nothing like a printed page.

               

              Take this tiny snippet of code:

               

              <body>

              <div id="wrapper">

              <h1>A Header or Title</h1>

              <p>A paragraph of some meaningless text</p>

              <h2>A Meaningless Subheading</h2>

              <p>A second paragraph of some meaningless text that relates to the meaningless subheading</p>

              </div>

              </body>

               

              That code would render in the browser fine enough.  It's a <div> containing a title(<h1>) two small paragraphs (<p>) and a subtitle (<h2>).

               

              Once you have your page structure, you apply CSS to each element as you need it.  You can postition them in a rudimentary way with padding and margin and in more complex ways with float or more cautiously, with position.  You can add background images, borders, color, and all kinds of fancy things and until you do, each element will just render one after the other, down and accross the page according to the content.

               

               

               

              Martin

              • 4. Re: Adobe Creative Suite Confusion. Want to Create a Website
                LS8 9KN Community Member

                Thank you for the detailed reply. It seemed I jumped in without knowing exactly what I am doing. I used to use Serif Webplus for website designing. It is a good product but the coding is not clean and I am a SEO personel so I need clean coding for the engines to pick up the site. I do appreciate the reccomendations to David Powers books. I will take a look and in the Adobe shop. I personally find tutorials more useful as they are intereactive and I can follow along. With a book I will analyse too much information and then begin. I think the best thing to do at this point is signup with Lynda and go through all the CS5 web tutorials. Thanks again

                • 5. Re: Adobe Creative Suite Confusion. Want to Create a Website
                  tylonrobinson Community Member

                  martcol wrote:

                   

                  OK, so Creative Suite is real beauty and such fun.  If you are going to master Dreamweaver you need to put most of your energy first off into learnign HTML and CSS.  Without at least a working knowledge of HTML and CSS Dreamweaver will hurt you, nip and bite you again and again!  The more you know about HTML/CSS the easier DW becomes.  I use Photoshop, Illustrator and Dreamweaver most out of CS and find the first two easier to work out because of my understanding of digital imaging.  However, Dreamweaver was difficult until I started becoming more familiar with HTML/CSS.  On top of that, you might like to think about some other scripting languages like Javascript and PHP but I reckon you can get by with a little knowledge there because so much of that stuff is available off the web.

                   

                  Personally, I don't do well with video tutorials.  I get too easily distracted.  I prefer books.  David Powers has written some very well regarded books but there are many others.

                   

                  Online resources are pletiful and w3schools is a good place to start.  Adobe's own tutorial stuff is great too.  With web design and development you will find that there are heaps of resources (and opinions) out there and maybe, the best thing to do is to build your own site.

                   

                  With regards your statement, "I can't make shapes in dreamweaver" maybe you should find out a bit more about the DOM, document flow, and the box model.  In my head, you don't make shapes with Dreamweaver.  A web page is a series of elements (in general terms, boxes) that you code up with HTML and style or manipulate with CSS and maybe, javascript.  A web page is nothing like a printed page.

                   

                  Take this tiny snippet of code:

                   

                  <body>

                  <div id="wrapper">

                  <h1>A Header or Title</h1>

                  <p>A paragraph of some meaningless text</p>

                  <h2>A Meaningless Subheading</h2>

                  <p>A second paragraph of some meaningless text that relates to the meaningless subheading</p>

                  </div>

                  </body>

                   

                  That code would render in the browser fine enough.  It's a <div> containing a title(<h1>) two small paragraphs (<p>) and a subtitle (<h2>).

                   

                  Once you have your page structure, you apply CSS to each element as you need it.  You can postition them in a rudimentary way with padding and margin and in more complex ways with float or more cautiously, with position.  You can add background images, borders, color, and all kinds of fancy things and until you do, each element will just render one after the other, down and accross the page according to the content.

                   

                   

                   

                  Martin

                  you should also check out youtube. there are a lot of tutorials on there on all the adobe products and probably css too. you can pause and copy the steps in the tutorials too! great place to start as well, for real for real.