Last edited:
Asking: please can YOU review my new home page?.....thanks.
- Thread starter ranuce40
- Start date
- Messages
- 3,295
- Reaction score
- 227
- Points
- 63
It looks good, but...
There are some pretty big problems with the page that aren't apparent just looking at it. Part of that is Dreamweaver's fault. Your page is using the image slicing and MM_SwapX JavaScript functions from Dreamweaver for the main menu buttons. That can be (and should be) entirely replaced by CSS. Doing that will also allow you to set a focus state in addition to the hover state so that people who aren't using a mouse/trackball/trackpad (particularly people using the keyboard or voice commands) can also see what's in focus.
You have many small CSS and JavaScript files. That means lots of HTTP requests to load the page. All of those small files should be combined into as few large files as you can manage — ideally, one CSS and one JS file, but there can be legitimate reasons for breaking the files up (such as to make sure that jQuery or another popular library is loaded and cached separately).
You're missing a doctype declaration and using a bgcolor inline value for the body element. That (along with the MM_Swap stuff) leads me to believe that you're using an older version of Dreamweaver (CS3 maybe?). Just be aware that the HTML it creates may not display the way you want it to in all browsers, and that you are relying on backwards-compatibility features of the browser. If you can update your DW version, that's great. If not, you will probably want to familiarize yourself with HTML 5 and CSS 3 so that you can use Dreamweaver to do most of the heavy lifting, then go through the source and update to HTML5/CSS3. You may even find it easier to prototype quickly in Photoshop then hand-code the HTML, skipping Dreamweaver altogether, once you get the hang of it. The problem isn't so much HTML and CSS (although the CSS may need vendor prefixes that have been replaced with W3C standard properties) as it is trying to integrate any JavaScript into the page; many of the older JS hooks have been deprecated so they won't work with new-style HTML documents, and most of the new JS won't work in a "use the old way of displaying HTML" browser environments.
No big emergency or anything. Like I said at the top, it looks good and it works. It's just not going to work well going forward into the future, so you're going to want to bring things into 2015 rather than leave them in 2005. The hard part is effective design; coding that design really isn't that hard as things go, and you can take your time learning it.
There are some pretty big problems with the page that aren't apparent just looking at it. Part of that is Dreamweaver's fault. Your page is using the image slicing and MM_SwapX JavaScript functions from Dreamweaver for the main menu buttons. That can be (and should be) entirely replaced by CSS. Doing that will also allow you to set a focus state in addition to the hover state so that people who aren't using a mouse/trackball/trackpad (particularly people using the keyboard or voice commands) can also see what's in focus.
You have many small CSS and JavaScript files. That means lots of HTTP requests to load the page. All of those small files should be combined into as few large files as you can manage — ideally, one CSS and one JS file, but there can be legitimate reasons for breaking the files up (such as to make sure that jQuery or another popular library is loaded and cached separately).
You're missing a doctype declaration and using a bgcolor inline value for the body element. That (along with the MM_Swap stuff) leads me to believe that you're using an older version of Dreamweaver (CS3 maybe?). Just be aware that the HTML it creates may not display the way you want it to in all browsers, and that you are relying on backwards-compatibility features of the browser. If you can update your DW version, that's great. If not, you will probably want to familiarize yourself with HTML 5 and CSS 3 so that you can use Dreamweaver to do most of the heavy lifting, then go through the source and update to HTML5/CSS3. You may even find it easier to prototype quickly in Photoshop then hand-code the HTML, skipping Dreamweaver altogether, once you get the hang of it. The problem isn't so much HTML and CSS (although the CSS may need vendor prefixes that have been replaced with W3C standard properties) as it is trying to integrate any JavaScript into the page; many of the older JS hooks have been deprecated so they won't work with new-style HTML documents, and most of the new JS won't work in a "use the old way of displaying HTML" browser environments.
No big emergency or anything. Like I said at the top, it looks good and it works. It's just not going to work well going forward into the future, so you're going to want to bring things into 2015 rather than leave them in 2005. The hard part is effective design; coding that design really isn't that hard as things go, and you can take your time learning it.
)
- Messages
- 3,295
- Reaction score
- 227
- Points
- 63
That's one CSS and one JS file; you can't glue the two of them together. All you need to do there is to copy all of the stuff that is in separate files now into one single file — copy the contents of all of your CSS files into one file, and copy all of the contents of all of your JS files into another file. Then change the HTML of your page to request only the one consolidated CSS file using a single <link rel="stylesheet" href="path/your_css_filename.css" type="text/css"> and all of your JS using one <script src="path/your_js_filename.js"></script>. It's best practice to put your <script> low on the page (just before the end of the body) and put your style link as high as possible in the head, just after any charset you may be using, so that the browser doesn't have to wait too long to figure out how to render the page.
This forum is not a good place for basic CSS education; there is a lot of info already out there on the web. You should find some excellent tutorials if you search for CSS :hover selector and CSS :focus selector. Since there are several of them, you should be able to find an explanation that makes more sense if you get lost with the first one or two (and they'll be in several different languages as well, so if Spanish is easier or clearer, you should be able to find tutorials in Spanish).
This forum is not a good place for basic CSS education; there is a lot of info already out there on the web. You should find some excellent tutorials if you search for CSS :hover selector and CSS :focus selector. Since there are several of them, you should be able to find an explanation that makes more sense if you get lost with the first one or two (and they'll be in several different languages as well, so if Spanish is easier or clearer, you should be able to find tutorials in Spanish).
Zenax
Active Member
- Messages
- 1,377
- Reaction score
- 4
- Points
- 38
Just to add my two penny's worth to the convo. I like the initial landing page. I would perhaps work on image optimization. A fantastic background image used, however even on my fast internet connection, it took about 15-20 seconds to sharpen up. Also for me, I would do away with Dreamweaver, as I believe it will do you better in the long run, to understand how the different languages interact together.
As for CSS tutorials, even though its in English, css-tricks.com is a fantastic website to get some tips and tricks on how to achieve certain elements.
As for CSS tutorials, even though its in English, css-tricks.com is a fantastic website to get some tips and tricks on how to achieve certain elements.
displaya
New Member
- Messages
- 5
- Reaction score
- 1
- Points
- 3
Very nice. I don't need to understand the text to say that.