>> Dreamweaver
I’ve never used it, though it has a good following.
Personally I believe you must be able to read code to debug and improve websites; no editing software or wizard can fix a buggy design or advance the use of technology. You have to be educated to make these decisions.
>> Sukkahs
Ahh, got it; nice
The website does look a bit lacking on the aesthetic – but hey, it’s functional!
OK, so you got the basic authoring setup on a budget. What you have can work just fine, although you may need to tweak some of the source code manually: No editor is perfect. The fact is – Expression Blend is the ONLY wysiwyg editor that I’ve used for UI that ever got it 99.9% right – however it’s lame on the backend and that’s why I depend in Visual Studio for validation and debug. For what you are doing, you don’t need those tools.
Tables are the way we placed objects before HTML4 and DHTML. It used to be that you couldn’t have more than 3 tables nested without the browser having an interpretation problem. I use Tables when formatting is straight-up. I use Divs when I need something a little more than what a table can give me, especially on positioning and margins and visibility.
Let’s take your requests in order:
Search Engines:
I can help you with that for free.
- Create a simple text file called robots.txt in Notepad.
- Place the empty file in the ROOT directory of your website.
- Add spiders that you want like this…
Code:
User-agent: Googlebot
Crawl-delay: 10
User-agent: msnbot
Crawl-delay: 20
To prevent a spider from crawling, add a line like this:
Code:
User-agent: careerbot
Disallow: /
On advanced websites you can get logs of the UserAgents. Spiders have a unique agent that often include links to their spider support which display more information on how to enhance or block their efforts (and 95% of them play very nice and honorable). You can learn more about how the robots.txt file works here:
http://en.wikipedia.org/wiki/Robots.txt
For myself, I disallow some robots because they hit my site 10 or 20 times a day and throw off my stats; those robots are IMO badly behaved. Then again – I’m not selling merchandise. You probably want as many hits as you can get. :wink:
Adobe Flash:
I don’t hate Flash… I just don’t use it. Often I work for
the competitor and use Silverlight and WPF. There are advantages to both as well as pitfalls. Lately I’ve been moving into HTML5 because I can perform some functions that Flash/Silverlight/WPF cannot do on
Mobile devices. HTML5 also has limitations. Again, experience and creativity will determine the best technology or combinations of technology for the right solution. Editors, such as FrontPage, Visual Studio and Dreamweaver can’t do that; they are tools – like a crescent wrench: If you don’t understand the tool, the limits and the potential, chances are the outcome will be less effective if not a mess. That’s why I learned to
read Code because I’m smarter and more creative than any editor… (
not to be confused with “compiliers” which is altogether different).
Mumbo Jumbo:
I know exactly what you mean.
Code should be clean; no extra stuff, concise, readable, and easy to support without an editor. Let’s look at your code example…
Code:
<style type="text/css"> … </style>
Perfect. Lives in the Head section. Or, it can live in a .css file (perhaps named as “sukkahs.css”?) that is referenced in the Head section as:
Code:
<link rel="stylesheet" type="text/css" href="sukkahs.css" />
FrontPage likes to create directories for storing files – and that’s OK, I do too. So if the file is located in the “styles” subdirectory, it would be referenced as:
Code:
<link rel="stylesheet" type="text/css" href="/styles/sukkahs.css" />
Having the Formatting information stored in one file is advantageous because you can reference it from other pages – making the source code of those pages smaller and easier to read, AND you have only one file to edit which will affect every page in one fell swoop. :wink:
Please allow me to comment and suggest on the next lines of code; it’s free advice meant to be helpful…
Code:
/* TEXT STYLES */
.textstyle0 {font-family:Arial;font-weight:normal;font-style:normal;font-size:15px;text-decoration:none;color:#000000;}
I’m going to rewrite this so it’s organized:
Code:
.textstyle0
{
font-family:Arial;
font-weight:normal;
font-style:normal;
font-size:15px;
text-decoration:none;
color:#000000;
}
I’m really a huge fan of Typography, and to me - having the right typeface is the difference between capturing my attention and being easy on the eyes – verses being crudely applied, unsophisticated, and repellant.
Personally I do not like
Arial for a font because it is explicitly
Microsoft, and unless it is installed on the client device their experience will be
different ("depreciated" is a kind way of saying it) than what you expected. On my website, the default base font is defined as:
Code:
font-family: "Segoe UI", Tahoma, Helvetica, Sans-Serif;
Segoe UI is the modern font associated with the “Metro” theme on Win 8 and Silverlight for the past 4 years; it’s a personal choice and not a required one.
Tahoma is also a Microsoft font that was developed specifically for the Web as a more condensed & readable version of
Verdana (also a font specifically created for the web to replace
Arial).
Helvetica is for our Mac friends; it’s a nice readable font that is preinstalled on the O/S, however Helvetica on the PC doesn’t quite look as good, so we use the others.
Sans-Serif is the catch-all font for everyone else.
Font-weight & font-style defaults to “normal” so we don’t need that. Text-decoration is used to control behavior on Anchors, so in this case all anchors within this style will not have an underline, although it does not cover pseudo effects such as hover (more below). Color is #000000, Black – which is also the default. We can rewrite the whole definition as:
Code:
.textstyle0
{
font-family: Tahoma, Helvetica, Sans-Serif;
font-size:15px;
}
Generally though, I define the font-family at the top of the CSS with a global and rely on specific declarations where we want to diverge. Example:
Code:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, input, ins, kbd, q,
s, samp, select, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, caption, table, tbody, textarea, tfoot, thead, tr, th, td
{
font-family: Tahoma, Helvetica, Sans-Serif;
}
That’s pretty much it for the Style. BODY, IMG, & #container look pretty good without diving too deeply. One comment on the a:hover – I provided an example below that shows how to use the text-decoration; during hover (mouse-over on the hyperlink) the font color is changed and the underline is suppressed.
Code:
a:hover
{
color:#3399CC;
text-decoration: none;
}
Other website comments:
I noticed that you have data missing, like pricing, handling charges, etc. Personally, I hate having prices listed on the page because it’s a maintenance item. Instead, I use a data file (or database): The page reads in the data file (or queries the database) and presents the information through a process we call “automation”. It’s easier to edit a small data file than walk through the cumbersome formatted page. Plus – we could reference the data elsewhere on another page.
For handling fees and shipping rates you can link to the Shipper and pass in three arguments into a function: Weight, Zip code, and Expediency – and in return you’ll get a Quote. It’s very common and lots of people do it. Most of the shippers will provide you with example code on how to enable the feature.
Lots to chew on. To me it's a fun puzzle... like working on a canvas and creating a favorable and lasting impression. You want people to come back and visit, like having a nice home, a comfortable place to sit and read, relaxing. You want them to order product and have that be a pleasurable experience, and share that with friends. Reading and writing good HTML is a lot like learning how to brick and mortar and paint a house. Some people can do it well, and some hire it out. I always believe in learning how to do it for myself because it’s less expensive and faster.
Best,
KF
