When you're trying to find the perfect template for your website, you want to make sure that you have the look, feel, and functionality that is right for you. Many people browse through template catalogs looking for a specific type of template with a specific color and navigation structure. For example, a plumber might want a purple template with drop-down navigation. How many template designers would have what that plumber wanted? Not many! Here are some ways to help you focus on a template choice that will be right for you and your business.
Your first choice is to make the decision whether to use a generic html template that can be edited in any web editor (or even Notepad) or to chose a template that is made specifically for particular web editors. The most common web editors are Expression Web or SharePoint Designer (Microsoft Products) or Dreamweaver (Adobe Product). I know many of you may say that FrontPage is your program of choice, however; Microsoft stopped supporting FrontPage a few years ago and many of its proprietary functions won't view correctly in today's browsers.
So, now that you've chosen your editing program, let's pick out a template! The first thing you want to look for is the color you want your web. I use css to control color in my designs, so changing color is not hard. Go through the template choices, picking out a couple that are a pleasing color to you. If you can open your choices in different windows, then you'll be able to see the templates side-to-side to compare colors. If you absolutely must have your specific color, let me know. I can certainly help you with the hex values to change the template colors.
Layout consists of many different options, which include: the number of columns on the page, how wide/narrow is the page, location of navigation on the page and the header section consisting of a main image or no image at all. Let's break the layout down.
Columns: Do you want only one column on your pages or do you want two or three columns? Most of my templates come with a couple of different layouts, but some are made so there is only one choice of layout.
Width: The latest templates are designed at a width of 1200 pixels, some may be even larger. A 1200 pixel template will fit easily into view with the new monitors, leaving a bit of room on the side for the scroll bar and a bit of the background. Older templates, made for smaller monitors, were 750 pixels wide or even smaller. They now get lost on the larger monitors. You'll recognize the smaller width templates immediately. They look like a note card in the middle of your screen! I might be embellishing a bit, but they do look very small!
Navigation: Where do you want your main navigation structure? Remember, people don't want to have to look for it! Your viewers want the navigation to be in a consistent place throughout your web. Navigation is usually in the header area and/or in the side area (sidebar) of a web.
Choose where you want your navigation located.
Do you want a drop-down menu, a button, or a background color? Pick a template that fits your needs.
If you only have a few links, you don't need a drop-down menu.
If you have many links, you might just want a drop-down menu or few global links at the top with most of your links down the sidebar.
Header Image: Image or no image in the header: That's just personal preference!
Now is the time to pick out the main image you want to use in your template! Does it match the color of the template you chose? If not, choose another image or choose another template color! Will your image "fit" in the main image area of the template? Look at the image you like. Is it in "landscape" (wider than tall), is it in portrait (taller than wide) or is it square? You can't fit a square image into a rectangle without cutting off parts of it.
Don't have an image you like? There are a number of places to get images at a very reasonable price, such as Big Stock Photo or iStockPhoto. Image pricing varies among vendors.
Did you take your own pictures for your web? That's great! Just make sure they're clear and optimized for web viewing. Your main image is your introduction to your web. It should be crisp, clear, and interesting.
All of our templates are Mobile Optimized for Expression Web! Our Expression Web templates are all uniquely designed with plenty of extras for you to play with! All of them have dwt's and most of our templates have three or more layouts. The choices in layouts give you a variety of looks to have for your web pages. Our Expression Web templates are made to be used in Expression Web 4. They can also be edited with SharePoint Designer, but they do not have the "SharePoint" functionality included.
You will still be able to use Expression Web for a VERY, VERY long time (2020). HTML is HTML. We will still continue to sell and support our Expression Web templates. In fact, Microsoft is GIVING away Expression Web 4! Go get it now!!! You can download it from the Microsoft site here.
HTML5 works on all versions of Expression Web BUT it does not layout correctly in "Design" view in Expression Web 1-3. It works perfectly in the browser, but it just looks strange in "Design" view.
Can you use it? Absolutely! Just add your content and then preview in browser as you are working.
All of our Expression Web templates and our Generic HTML templates work perfectly in Dreamweaver. You will see "vti" files in the Expression Web version. You can delete them, ignore them (as Dreamweaver will) or you can ask us to remove them for you after purchase.
Defining Your Site You MUST define your site. If you don't define the site, Dreamweaver "thinks" that you have a bunch of files in a folder that are NOT connected.
In order to define your new site, go to "Site >New Site." A box will open for you to define the site. Choose the "Advanced" tab. Name your site in the "Site Name" box, then navigate to your new web folder. Click on open, then okay. Then choose the "Default images folder" (that's the one inside the web template) and click okay. After you've done those two steps, you can click okay. You can always come back and add the http:// address. You'll see all of your files ready to be edited.
Go to your "Templates" folder (it has the dwt's in it) and open each file. Change the footer information, "Your Name Here" (if it is text, not an image) and other non-editable regions to match your website. When you save each dwt, it automatically updates the pages connected to it. If it does not update, your site is NOT defined.
Want a new look for your web, but don't have Dreamweaver or Expression Web. No worries, our html5 generic website templates are cross-browser friendly and can be used in any html web editor, such as Coffee Cup. You can also choose to edit them with notepad or a similar program.
Html is the markup language or coding used to have content displayed on the web. The html coding tells the web, "this is a div (kinda' like a dividing box) and this is the content that goes in that div" or "this is a table and this is the content that goes into that table." It also tells the web what kind of document or "doc type" the web is. In other words, html is the guide for how things are rendered on the web.
CSS, the cascading style sheet, is the look of the web. It controls fonts, colors, location of divs. It calls in backgrounds and images. It has more to do with "style" than functionality.
Although all of our templates use html and css, our HTML5 templates use only those codes. They do not contain the proprietary functions of WYSIWYG (what you see is what you get) programs such as Dreamweaver or Expression Web. Those functions might include dwts (dynamic web templates), includes, and library items.
This is a fun little extra to play with. If you don't like the fonts we chose, just go to: Google Fonts and select the font you like. Follow the easy coding directions. You'll replace the font name in the css file under the heading (h1, h2, h3, h4 tags) and change the name in the dwt file.
The light boxes are easy to use and you can have your page really pop for your visitors. All you need to do is follow the simple directions that are on the page. You'll size each image into a small thumbnail image and a larger, viewable image. Then you just slip their names right into the code. Your light box will look professionally coded and no one will know you did it so easily!