GregKerr.Net home link

Useful Tips

Listed below are suggestions, instructions and links that will provide solutions to many types of Web-related problems.

File Management

A pre-requisite for all web courses at PCC is an understanding of file management. If you want to learn more about file management, PCC offers the following courses: CAS 103 (Intro to Windows) or CAS 133 (Beginning Computers).

 

File Management Utility

You will need a utility program to manage the files on your local disk. For the PC, Windows built-in file management utility Computer/File Explorer is the preferred program. For the Mac, it's File Finder. To manage the files on a web server, like the webhostingforstudents.com server, you need a File Transfer Protocol utility program like Filezilla, or alternately, you can log into your webhostingforstudents.com account, and use the File Manager (which is usually inside the cPanel of your server account).

 

File Storage Hierarchy

It's important that you construct a file storage hierarchy on your USB thumb drive, complete with the necessary folders, sub-folders and files, that mirrors what you will have on your hosting server. If they don't look exactly the same, you will likely be falling into file management chaos (see below).

 

File Naming on the Web

The following are best practices for file naming on the web. These are also considered the industry standard:

 

  1. All your file AND folder names used on the web should be in lower case and have no spaces. This includes .html, .jpg, .php, .js -- in other words, ALL files and folders.

  2. Do not start names with numbers. Numbers can be used in names, but not at the beginning.

  3. index.html is a reserved file name -- this name should only be used for the home page of a website and this file automatically loads into a browser when the browser views the folder the index.html file resides in.

 

Keep in mind that "index.html" is a different name than "Index.html". The first one, in all lower case letters, is that reserved name to browsers. The second one, with the capital letter, means nothing to many browsers and will not load automatically.

 

It's also helpful to name your files with short, memorable names so that if you have to tell someone a web address that includes a file name, it will be easy to remember.

 

Instructor Note
Avoid mixed case or upper case letters in all file and folder names used on the Web. Upper case letters are frequently seen as different letters than their lower case counterparts in most operating systems.

This has major implications when you tell someone a Web address. For example, if you say an address that includes a page name, like

www.whatever.com/WhateverPage.html

you will then have to explain which letters in the page name are also upper case so it doesn't generate an error in their browser when they type it in. This makes it much harder to remember the address.

Keep it simple -- always stick with all lower case letters. It's industry standard and the best all-around approach.

 

Underscores and dashes (hyphens) can be used instead of spaces, but note that for search engine optimization purposes (SEO), underscores imply that the two words separated by them should be considered one word, whereas dashes imply the two words separated by them should be considered two words. In other words, to a search engine, "sample_site" means "samplesite", whereas "sample-site" means "sample site". So, in the search engine's database two words separated by an underscore are stored as only one word, whereas two words separated by dashes are stored as two individual words. It is preferable to use dashes instead of underscores in most cases when you are trying to improve your search engine ranking.

 

 

File Management Goodness

To be established properly files and folders should contain names that are in all lower case with no spaces.Underscores can be used, but avoid unusual characters and extra periods or punctuation in file and folder names.

 

These are proper file names:

  • whatever1.html
  • index.html
  • my-dog-genevieve.jpg

 

Folder names should not include extensions or periods. Periods in folder names may have unintended consequences when used with Web pages and Web browsers.

 

File Management Chaos

File management chaos is a disease which can infect even the most knowledgeable computer user. Don't let it infect you.

 

Examples of file management chaos are:

  1. When you say "my files just disappeared." Files are not magical -- they do not just disappear. You did something with them, you just aren't sure what you did.

  2. Sub-folders with the same name as their parent folder. In other words, you have a folder-within-a-folder that both have the same name. These are just confusing and were caused by an improper use of a file management utility program.

  3. File names that include odd symbols, spaces, extra periods or upper or mixed case are not appropriate. The following are examples of bad file names:
    • Spiffy.html
    • My cat fernando.JPG
    • I_went_to_school.Then_I_went_home.htm

    Instructor Note
    Spaces in file or folder names are particularly a problem on some operating systems (Unix and Linux are two) and with some browsers.

    Also, the use of a period in a folder name is a problem with many browsers and pages will likely not load properly because of these kinds of naming issues.

    The best idea: avoid using spaces, periods, and any other odd characters in folder names and spaces, odd characters and extra periods in file names (of course, you must use a period to separate the file name and its extension).

    Dashes and underscores are about the only symbols that are Ok to use.


  4. Any other odd, confusing and inappropriate folder or file usage or naming.

 

File management chaos will result in a deduction of points on assignments until the chaos is corrected.

 

Arrow up to top of page

Path

The improper use of a path in relative links is the number one problem students run into with their Web pages not working properly. Understanding the proper use of a path is a basic file management issue.

 

The examples below describe different paths related to this figure below.

 

Path Example for Relative Links

 

Path for Relative Links

The following examples of relative links are based on the file/folder structure in the image above. All links are inside origin.html in these examples:

  • Link (using a link tag) to origin.css

 

<link href="assets/origin.css" rel="stylesheet" type="text/css" />

 

  • Anchor (a tag) link to target.html

 

<a href="../secondary/target.html">Another Page in the Same Site</a>


    Instructor Note
    In this example above, the "../" or dot-dot-slash refers to the parent folder. To get from the origin.html file to the target.html file, the path is directed to exit the origin.html file's current folder to it's parent folder (the site root) then go down to the secondary subfolder from there.

    To exit to any folder above the current folder (i.e., it's parent folder) you must use a "../" in the path to get there.

    If you ever see a "../../" that means the path has to go up two parent folder levels from it's current folder. A "../../../" is three folder levels up, and so on...

  • Image link to pic.jpg

<img src="assets/images/pic.jpg" width="100px" height="100px"
alt="Description and keywords related to image." />

  • Anchor (a tag) link to index.html

 

<a href="../index.html">The Home Page at the Site Root</a>

or

<a href="../">The Home Page at the Site Root</a>

or

<a href="/">The Home Page at the Site Root</a>

Instructor Note
To link to an index.html page, you only need to specify the folder you want to link to since the browser will automatically open up any index.html page in a folder it visits.

To link to the site root index.html page, you only need to use a slash "/" since that is a path direction command to get to the root of the site.

 

Arrow up to top of page

Uploading

HTTP stands for hypertext transfer protocol, and it's the protocol used to view Web pages. If you want to view your files on a Web server, you must HTTP to that Web address. An address that begins with http:// allows you to view a Web page in your browser.

 

FTP stands for file transfer protocol, and it's the protocol used to upload pages to a Web server. If you want to copy or upload your files to a Web server, you must FTP to that Web address. An address that begins with ftp:// allows you to upload or download a Web page in a file management program such as Computer window (PC) or Fetch (Mac) or Filezilla (either format).

Instructor Note
There, you just read it, but I'll say it here more simply: HTTP is for viewing Web pages, FTP is for uploading Web pages.

If you attempt to view a Web page with an FTP address, it won't display the linked files. Linked files are images, your linked CSS, linked JavaScript, etc., etc., which is pretty much everything that makes your page look like it looks.

You will upload all your assignments to your hosting server or to the hosting server made accessible to you by the instructor.

 

 

Arrow up to top of page

Website Planning and Creation

Creating your own website may seem like an easy task. Creating a website for someone else, such as a friend, a family member, or a paying client, may seem more challenging. In both cases, proper planning and following the website design parts described below will make the process more manageable, efficient and professional.

 

Part 1 -- Planning & Preparation

Below is a list of four issues to address when planning a website project:

 

  1. Consultation & Contracts
  2. Timeline & Preparation
  3. Sitemap/Flowchart
  4. Outline
  5. Planning the Page Layouts

 

A. Consultation & Contracts

Questions to Identify Key Issues with Planning the Website Project

 

Whether you are creating a website for yourself or for someone else, you should be able to answer the following questions:

 

  1. What is the purpose of the site?
    List the reason you are creating the site (it could be to market yourself or your product, or it could be for a paying client, etc.).

  2. What do you want the site to accomplish?
    List the goals you have for the site. Consider starting with the phrase "For this site to be a success, it will...".

  3. Who is your target audience?
    This will likely be the most important question. Describe your audience by age, gender, socio-economic characteristics, their similar interests, and so on. Bear in mind, the website target audience isn't your client; it's their customers. You should get to know their customers well enough that you can create a customer profile or "customer story" (i.e., a fictional customer case study). Consider this example of a fictional customer story for a Honda car -- in this case, both the customer and vehicle are fictional.

  4. What opportunity or issue is your site addressing?
    If this is a website that is addressing a unique information topic, or unveiling a company for the first time, these would be relevant opportunities. In other words, consider what sets this site apart from others like it.

  5. What type of content might be included in your site?
    Describe the text, images, and media you will use on the site. For SEO purposes, coming up with a complete SEO Plan (as described in the course CAS 180 - Search Engine Optimization) is the best idea, however at a minimum, be able to list all the relevant keywords that will be included in the
    • title tag
    • description meta tag
    • keyword meta tag
    • heading tags (h1, h2, etc.)
    • alt attributes
    You may also want to address the important slogans/logos required, bottom text links (including "Terms of Use"), and whether a blog will be used or not and what content will be in the blog.

  6. List at least two related or similar sites found on the Web.

 

If this site is for a client, you should be able to answer these additional questions:

 

  1. Who are the client's major competitors and/or related sites?
    The client should know this, but you may want to do research prior to your first consultation with the client.

  2. What content and assets is the client providing, and what content and assets will the designer be responsible for?
    If the client expects you to write the content for the site, this is often considered a separate and additional service.

  3. Are there any sites out there currently that the client likes or prefers?
    Keep in mind that issues like color, look, and feel will be important to the client, but should be tempered with what the target audience might prefer.

  4. When is this site due?
    Answering this question will help you as the designer determine if it's a project you can do. You should also be able to determine the site launch date.

  5. What are the website design costs?
    You should be able to give the client a list of the following:
    • The cost in total dollars to begin the project, if any.
    • The cost in total dollars for production planning, if any. This would include creation of an outline, sitemap, layout concept, production schedule, and one or more style layouts of a probable home page.
    • The cost in total dollars for the completed site, which includes the minimum likely total cost and the maximum likely total cost.
    • An explanation of the fact that development, Web hosting, domain acquisition, etc., are separate fees.
    • The cost, likely to be in dollars per hour, for maintenance on the site.

  6. What are the total services that you would do for the client?
    Be able to list the range of work and the limits of work you will do for the client. In other words, have a concept for everything you'll do, and what you won't do, and what the finished product you will give the client.

  7. Do you have the agreement to do the work in writing?
    Whether it's a paying client, a friend, or a family member, it makes sense to have it in writing so there is no mistake about what you're doing for them, how much it will cost, and when they need to pay you. Consider (and use if you'd like) this plain English contract for Web design services.

  8. If the contract covers multiple sites for the client, you may also need to prepare a Statement of Work (SOW) for each job, either in advance or as needed. The SOW may include prices per service you offer or per site if that isn't covered in the contract.

 

B. Timeline & Preparation

Once you've agreed to do the work for the client and the contract has been signed, you should

  1. Create and give to the client a specific timeline regarding what and when the parts of the project will be completed. (If this was not already spelled out in the contract.)
  2. Gather all the assets from the client and obtain the text content if they are doing the writing.

 

C. Sitemap/Flowchart (for a website)

In the context of website design, a flowchart and sitemap are the same thing. They are a graphical display of the site structure which includes all of the pages and a concept of how they link together.

 

 

Website Sitemap or Flowchart example

Key for the Website Sitemap or Flowchart example

 

Effective sitemaps include

  • whether or not the pages are static, dynamic and/or frequently updated (since these have implications as to the design/development timeline for you the designer and your client)
  • the filenames of the pages -- this is so you can use their names in links on the first page you create prior to the pages existing yet
  • how the page might crosslink with other pages if it is not part of the main nav bar

 

Consider the Prudential Verani Real Estate example site from the book Writing for Multimedia and the Web by Timothy Garrand, Focal Press, 2006. This is the home page of that site:

 

Real Estate example site home page

 

Here is an example of a flowchart/sitemap for the real estate example site.

 

This key describes how the symbols are used on the sitemap in the example above.

 

Sitemap key

 

There are likely to be maintenance and design/development implications for pages that aren't static. These should be addressed and explained to the client.

 

D. Outline (for a website)

An outline is a planning guide for the site that is normally created after you've finished the sitemap. The outline, written in long descriptions, would include more details about the content (text, images, media) on each page of the site. It usually includes marketing concepts and reasons why images and text are used on the site.

 

Bear in mind, this is done to help guide the designer and also give information to the client prior to the website being created.

 

Here is an example of an outline for the real estate example site described in the section above. This textbook excerpt also gives more information about the elements of an outline.

 

E. Planning the Page Layouts

The following are common steps to planning your specific page layouts.

 

  1. Mobile First?
    The concept of designing the site initially so it looks good on a mobile device is referred to as "mobile first" design. This may be applicable to many sites, but perhaps not to all. A safer approach is to make the site fluid or flexible, so it looks good on a cell phone screen or a desktop and everything in between. See the topic Responsive Web Design for more ideas.

  2. Consider Other Sites that are Like Yours
    It may be helpful to research other sites that are like the one you will be creating, either in content or desired style or both.

  3. Determine your Color Scheme
    Make a list of the major colors that will be included in your site. These include colors for the page body, the heading and other fonts, and background colors of the sectioning elements.

  4. Plan your Home Page
    You should create 3 layouts for the home page since it will likely be responsive -- a mobile size layout, a tablet size layout and a desktop size layout. Either on paper, a dry erase board, or in a graphic design program like Photoshop, using the drawing tools of PowerPoint or Word, or any other line drawing program. Be sure to mark off the rectangular quandrants or zones that the page can be divided into and give those zones names. Those zones will be the divs and other sectioning elements (header, nav, footer, etc.). You will use the names you put on the zones as the div IDs. This layout is commonly referred to as a wireframe.


    This is an example of an artistic wireframe and another wireframe layout that includes pixel measurements for the divs.


    Here is a sample of dummy text also known as lorem ipsum text if you need filler text for your wireframe.


    In addition to the sectioning element names, effective Wireframes may include
    • the width and/or height of sectioning elements, especially the container width
    • amount of margin and padding of the sectioning elements
    • colors and/or the color numbers for the color scheme


    You should create one wireframe that represents all of the pages of your site. If your site has alternate layout, then you may need to create more than one wireframe to represent all the pages. In other words, if most of the pages of your site are in a two-column layout, then one wireframe should be created for those page, but if there are a few pages on your site that employ a four-column layout, then it may be necessary to create an additional wireframe layout for those pages.

 

 

 

Wireframe

 

Below is an example of an effective wireframe that includes much of the relevant information that will allow you to properly code the page:

Wireframe example

 

 

 

 

Mockup

 

Below is an example of a more detailed mockup of the wireframe above:

 

 

 

 

 

Prototype

 

Below is a prototype screenshot of the site based on the above wireframe and mockup:

 

 

Here is a link to this Bootstrap example site: http://spot.pcc.edu/~gkerr/examples/bootstrap/prototype/

 

 

 

Part 2 -- Structure

This means coding in the actual HTML of all the sectioning elements.

 

You should

 

  1. Create and save an HTML file, typically for your home page first, which you'll likely name index.html.
  2. Type in the div tags and other HTML5 sectioning tags if you are using them. Just like they are your children, give all your divs unique names (using the ID attribute in the HTML). For example, if the upper left most div will be the container for your logo, then give it id="logo" as an HTML attribute.
  3. You may want to give your divs some minimal styling at this point, such as giving them height, width, and type of positioning (relative, absolute, or fixed). This would have to be done in the CSS and is NOT recommended at this stage (See "Part 4 -- Style" below).
  4. Double-check the accuracy of your coding to ensure that all your tags are nested properly, closed, and include proper grammar.

 

For the wireframe model show just before the Part 2 heading, this is it's page structure in the HTML:

 

HTML structure for wireframe example

 

Part 3 -- Content

At this stage, you should add all the content to the structure you created in Part 2.

 

Content includes

  1. All the text for the page, including the title text, and any meta keywords or descriptions used for SEO.
  2. The navigation bar text which should be in an unordered list.
  3. All the images including the logo and social media icons, and the image alt text.
  4. Placeholders for images that don't currently exist, but that will be added to the page later or for slideshows and other JavaScript animation you'll add later.
  5. Video and audio files, if applicable.
  6. Animation files or code, if applicable.

 

All content should be added prior to proceeding to Part 4 -- Style. If you do not add all the content before you begin styling the page, it is likely you'll have to go back and forth between Part 3 and Part 4, making the work take twice as long (at least) to create the page.

 

Part 4 -- Style

After adding content, you can create the CSS, and you should save the .css file and establish a link to your HTML immediately.

 

The best order to doing your style is debatable, however, the following order makes sense and is a good model to follow:

 

  1. Paste a reset CSS into your main stylesheet. Then identify the area below this as your Global Style and start with...

  2. Tag selectors (these are going to apply the bulk or general rule of your style) following this order
    1. * (asterisk), if applicable
    2. body
    3. h1
    4. h2
    5. Other heading tags h3-h6, if applicable
    6. p
    7. ul, ol and li
    8. a and related pseudo-class (and remembering to keep it in order of a:link, a:visited, a:hover, a:active)
    9. div or span tags that you plan to style in bulk
    10. em, strong
    11. any other tags that you plan to use frequently and which will require style

  3. ID selectors or sectioning element tag selectors that make up your structure
    • Place these in order as they appear from top to bottom, left to right in the HTML

  4. Descendant selectors
    • These should be placed after the div ID selectors or sectioning tag selectors they belong to.

  5. Class selectors (best to use as exceptions, highlights and emphases on the selectors you created earlier)
    • Give these unique and memorable names that indicate their functional use and NOT their style. A good name is ".copyright" if it will be applied to the paragraph that contains the copyright text. A bad name is ".redfont" since you may decide that the paragraph you are using .redfont for as emphasis will be changed to a different color later.

  6. Once your Global Style is complete (everything above), identify the final area of the sheet as Responsive Style. Create the CSS3 media query sections of your stylesheet as relevant for a responsive/mobile friendly design.


 

Part 5 -- Scripting

This part is about putting JavaScript on the page for various features or animations, such as a rotating image slideshow or an accordion menu. It also relates to connecting a form to a server-side script like PHP, etc. This tends to be complicated since it may involve programming although frequently the code already exists out there so it may just be a matter of code-lifting and placing it properly within the HTML.

 

It's likely you'll want to do this on a page-by-page basis later, however, if you know the site is going to have the same script on every page (like for a local search engine, Google analytics code, an HTML5 shiv, etc.) then do this on your template page at this stage. Include client-side scripts (JavaScript), Spry (or other AJAX), and set your form actions to whatever server-side script files they will be referring to. You may also want to create and test the server-side scripting files at this point especially if they provide password protection or a site search feature to your home page.

 

Once you have a well structured and well styled home page, you can make copies of it for your other pages. Then all you'll have to do is make changes the content. Voila!

 

Part 6 -- Testing & Revision

Be sure to do some or all of the following tests or research on your site to determine its effectiveness and usability:

 

  1. Test the navigation bar and other links throughout the site.
  2. Usability tests with multiple people including those unfamiliar with the site who are in the target audience.
  3. Performance tests include speed and server accessing benchmarks.
  4. Analytics and who the visitors are and where they are coming from.
  5. Search engine ranking.

 

After testing, you will likely have to revise the website to improve its effectiveness.

 

 

Arrow up to top of page

Domain Registration and Web Hosts

 

Register your Domain name

The first step is to decide what your website domain name will be. This is your website address or URL. This is one of the most important parts to the website creation process because you want people to come to your site and without a good domain name, your website traffic can be negatively impacted. The following list gives some tips on selecting a good domain name:

 

  1. Brainstorm the 5 Top Keywords
    • When you first begin your domain name search, it helps to have 5 terms or phrases in mind that best describe the domain you're seeking. Once you have this list, you can start to pair them or add prefixes and suffixes to create good domain ideas. For example, if you're launching a mortgage related domain, you might start with words like "mortgage, finance, home equity, interest rate, house payment" then play around with them until you can find a good match. Having popular keywords for you site as part of your domain name is good SEO (Search Engine Optimization) practice. Search Engines like sites that have keywords in the URL (as long as it makes sense to make them part of the URL!) A good example would be acmemortgage.com because the keyword mortgage is part of the URL. A poor example would be acmemortgagelendingequityhomeloans.com because while it is full of keywords, it is obvious that the URL would be impossible to remember and is stuffed with too many keywords.

  2. Make the Domain Unique
    • Don't choose a domain that is simply the plural, hyphenated, or misspelled version of an already established domain. You want people to remember your site accurately without having to remember what the correct "misspelling" might be. If acmemortgage.com is already taken, don't pick acmemortgages.com as your domain. It's too easy to get confused between the two. You want your site visitors to come to your site - not your competitor's.

  3. Try to pick Dot-Com Domains
    • Most people who use the web still make the automatic assumption that .com is all that's out there. If acmemortgage.com is taken, selecting acmemortgage.net may seem like a good solution, but this will lead to customer confusion and many of your potential customers may end up at the wrong website. If the .com version of your domain is unavailable, you should consider a different domain name all together rather than just using the .net version. It's also a good idea to register several different domains if they are all available, such as acmemortgage.com, acmemorgage.net, acmemortgage.org, etc. You can redirect them all to one site so that whatever is typed in by the customer, they will end up at your site.

  4. Make it easy to type and remember - and keep the name short!
    • You don't want to be the company with the terrific website that no one can ever remember to tell their friends about because they can't remember the domain name. Short names are easy to type and easy to remember.

  5. Create and fulfill expectations
    • When someone hears about your domain name for the first time, they should be able to instantly and accurately guess at the type of content that might be found there. That's why domain names like hotmail.com, careerbuilder.com, autotrader.com, and webMD.com are such great ones. You know what's going to be at the site before you get there. Others such as Monster.com, Amazon.com, and Zillow.com required a lot of branding and marketing in the beginning because of their un-intuitive names.

  6. Set yourself apart with a brand
    • Using a unique moniker is a great way to build additional value with your domain name. A "brand" is more than just a combination of words. Mortgageforyourhome.com is not as compelling as lendingtree.com.

  7. Reject hyphens and numbers
    • Both hyphens and numbers make it hard to give your domain name verbally to someone and it makes it hard to remember and difficult to type. It is much easier to tell someone to visit "acmemortgage.com" vs. telling them to visit "acme dash mortgage.com" (acme-mortgage.com)

 

For more information and tips on picking a good domain name, visit: http://www.quickonthenet.com/features/How-to-Choose-a-Domain-Name-for-your-Website.cfm

 

You can register your name through any domain name registrar who then registers it with ICANN. You can find out if your domain name is available by going to http://www.whois.com/. You can also register your domain here for around $10.00 per year. However, you can usually register your domain with the same company that provides your hosting service. This is not required, but it does make the process a little easier and it will also make it easier to track renewal dates if everything is in one place. Some choices used by PCC students are webhostingforstudents.com (this is recommended by PCC's web program and it is less expensive than most), godaddy.com, and many others.

Instructor Note
Take time to select a good domain name! It's tough to change it once it's established!

 

Select a Web Host and Register for an Account

A Web Host is where your site will reside. The files that make up your site need to be put on a web server - somewhere. It is likely that you do not have the expertise (or desire) to set up your own web server, so it makes sense to find a reputable web host to store your site files. There are thousands of web hosts out there and selecting one can seem like a daunting task. There are several things to consider when selecting a web host:

 

  1. Fees, contracts, payment options
    • Free host providers are nice, but they often impose advertising images or banners on your pages.
    • Consider the price and payment options. Can you sign up for a multi-year contract? Are you locked into the contract once you sign up? What are the renewal options? Some providers give free access for a year, and then the following year you get locked into a very expensive plan.

  2. Storage space and bandwidth
    • Consider how much storage space and bandwidth you will have. If you are creating a site with a lot of graphics and images, you will need more storage space. Bandwidth needs to be considered if there is going to be a lot of traffice to your site.
    • Your site should be up 99% of the time. You don't want to select a web host that is always crashing.

  3. Customer Reviews
    • Read the Customer reviews. Word-of-mouth is always the best factor to rely on to know if a web host is reliable.

  4. Technical Support
    • And, most important: Consider their Technical Support. Take some time to physically call them. Don't email them, or do an online chat - actually pick up your phone and give them a call. You can learn a lot by making a phone call. How long does it take for someone to answer? Can you understand the rep? Are they friendly? Can they answer your question, or do they have to transfer you to someone else? It's almost a sure-fire guarantee that at some point, your site will have technical difficulties and you want to be sure that you can get support when needed.

Instructor Note
Call your potential web host to gauge their level of customer service.

 

Some Web Hosts that Past Students Have Recommended

 

 

Arrow up to top of page

SEO

Search Engine Optimization (SEO), which basically means designing a site to be ranked well by search engines, is one of the primary challenges faced by Web designers. Here are some useful tips to optimize a website for good search engine placement:

  1. Have a relevant title on all your pages: site name on home page, different titles on other pages.
  2. Use relevant alt text on all your pictures.
  3. Do not use hidden text: text the same color as background, div with visibility: hidden property or display: none, or have text placed outside of normal browser window.
  4. Straight-forward HTML links are preferable, not Javascript or Flash links.
  5. Avoid duplicate content: Google and other search engines take into account the number of links pointing to your page to determine how important your web page is. If you have identical content appearing on two different pages on your website, some sites will link to one page while others will link to the alternate page. The result is that neither of those pages will be regarded as very important in the search engine's index since you have effectively halved the links pointing to your article.
  6. Validate your HTML and CSS.
  7. If you use Meta tag descriptions, try not to make them sound too generic:
    http://www.thesitewizard.com/sitepromotion/meta-description-tag-problems.shtml
  8. Use real URL links as opposed to Dynamic URL links:
    http://www.searchtools.com/robots/goodurls.html
  9. Avoid frames.
  10. Use real headings with h1 through h6. It's also best to try to have only one h1 tag per page and have it at the top of the page.
  11. Get linked to.
  12. Write good, clear content without typos.

 

To learn more about Search Engine Optimization (SEO), you can read this article Search Engine Optimization (SEO) Tips and check out the following links:

 

 

To target Google directly for optimization, consider the information at the following link:

 

Arrow up to top of page

Dynamic vs. Static Web Page Design

Below is the way web pages were first designed. They were static and content, structure and style were all part of the HTML script. Style was contained within <font> tags (never ever use these again!).

 

Phase 1

 

Below is a newer model for static web pages. The style, contained in a CSS file, is separate from the HTML.

 

Phase 2

 

Below is the dynamic model. Both style and content are separate from the HTML and can be called on command through a combination of client-side and server-side scripts. Front-end frameworks can be used to construct static sites very quickly. Examples of complex static site frameworks are Bootstrap and HTML5 Boilerplate.

 

Phase 3

 

This is a common model used in Content Management Systems (CMS's) like WordPress and Drupal. They archive their blog and other content in a database, and call it to a web page using server-side scripts when requested by the user's browser (in other words, when the user goes to the page of a CMS site).

 

This is also necessary in e-commerce applications when orders are being placed and monetary transactions are being made online. All the transactions are recorded in the database. These kinds of systems also provide additional security for the purchaser at the point of the database.

 

It should be noted that Javascript is used on both static and dynamic sites.

 

The major difference between static sites and dynamic sites tends to be site load-time in the browser. Because static sites are not utilizing server resources as heavily or calling the server as often, they tend to load considerably faster than dynamic sites.

 

 

Arrow up to top of page

HTML and XHTML

HTML and XHTML are the languages used to construct Web pages. They are really the same language, except that XHTML is more formal. A good analogy to understand these is that they are basically like the difference between using slang English and proper English. Slang English is like HTML, whereas XHTML is the more proper, structured version of the language.

 

In the future, it is likely that Web browsers will expect that your Web pages are designed with the proper grammar and not alternative versions of that language.

 

The main differences between XHTML and HTML are that in XHTML:

 

  1. Tags must be closed. If you start with a <p> tag, then at the end of that paragraph there should be a </p> tag.
  2. Tags must be properly nested, such as when used in lists or inline style.
  3. Tags and attribute names must be in lower case letters.
  4. All attribute values must be in quotes.
  5. A Doctype declaration should appear in the first line to clarify which version of the markup language you are using.
  6. Empty tags like <hr /> and <br /> should contain a slash at the end.

 

The mandatory minimum tags you must include in an XHTML Web page are the following:

 

<html>
<head>
</head>
<body>
</body>
</html>

 

When you start a new Web page in Dreamweaver, it gives you these tags along with a Doctype, <meta> tag and <title> tag.

 

While not absolutely required, the <title> tag should be embedded within the head section and is important to most Web designers.

 

Arrow up to top of page

Linking

Absolute Links

Absolute links are links to Web pages outside your site. These should always include the full URL, including the http part. For example: http://www.pcc.edu

 

Relative Links

Relative links are links to your own pages in your own site.

 

To create functional relative links in Dreamweaver, be sure to:

  1. Always operate in a defined site in Dreamweaver (i.e., green folders, not yellow ones in the Files panel) when attempting to make relative links.
  2. Save the Web page you are working on and give it a name and location in your defined site BEFORE attempting to establish relative links.

 

More information regarding the use of relative and absolute links is here on the CompuGoddess site.

 

Link Usage

If you are linking to a site outside yours, you must use an absolute link. You will also probably want to target "_blank" along with the absolute href because this will open up a new browser window/tab leaving your site open to the user still.

 

Instructor Note
The link to an external site with a target blank would look like this:


<a href="http://www.pcc.edu" target="_blank">PCC</a>

 

"_blank" opens a new window or tab (note the underscore notation that precedes the "blank".

"_self" forces the page into the current window, regardless of whether the browser would open it in a new tab/window or not.

 

If you are linking to pages on your own site, here are reasons to use relative links:

  1. Dreamweaver keeps track of your links so that if you move pages or change filenames within your site definition (green folders) in the File Panel, Dreamweaver automatically updates them all across your entire site.
  2. Absolute links will automatically cause some browsers (or some customized settings on browsers) to open up new browser windows/tabs. Imagine if every page on your site was absolute linked in these browsers -- you'd have a new tab generated every time the user went to a new page on your site!
  3. When a user clicks on an absolute link, this causes many browsers to reload the target page, regardless of whether you have recently been to that page or not. This in turn causes more work for your server, and a slower load time for your pages for your users. This is potentially a major concern for larger sites that have a lot of user traffic.
  4. It is still considered industry-standard to use relative links from a site development perspective.

 

If you are linking to pages on your own site, here are reasons to use absolute links:

  1. Absolute links will increase inbound links (in-links) for all your pages which can improve your ranking for search engine optimization purposes. In other words, you'll have multiple URLs that are pointing to a single page as though they were from external sources. It should be noted that the SEO effectiveness of such a strategy is not easy to verify.
  2. Your site name will be repeated multiple times in the URL (as though it was another keyword), giving it an advantage with search engine optimization.
  3. You can use find/replace in Dreamweaver to change all your links from relative to absolute to relative again.
  4. Google has said in the past that relative links can be indexed incorrectly in their database because all relative links are converted to absolute links in search engine databases, which is not a problem if you're already using the full absolute link -- no conversion step is necessary in this case. Whether this is still an issue is not known.

 

Null Links

Null links are dummy links that don't go anywhere when they are clicked on, but utilize an a (anchor) tag so that it can be styled in CSS. These are sometimes used when you want to style a link, but you haven't yet created the page that it will relatively link to.

 

More relevantly, null links are utilized to link a page back to itself on the main navigational bar. In other words, if the visitor is on the Contact page already, the link to the Contact page on the main navbar can be null so it doesn't reload the Web page when the link is clicked in the browser. Primarily the link is made null so the visitor is not confused into thinking they just went to a different page.

 

To create a null link in Dreamweaver Design view, select the item (p tag, li tag, image, or selected text) you want to create a link on, then type a # sign in the Link field in the Properties panel. In the code you will see a new anchor tag with an href attribute that looks like this: <a href="#">

 

Arrow up to top of page

CSS

Style Sheets

CSS stands for Cascading Style Sheets. They are used to describe all the style that will be applied to the various elements (tags) on the HTML page. You can think of style sheets as an over-arching style template for your Web pages.

 

Style sheets come in three types:

  1. inline = style attributes are used inline with the HTML tags. For example:

    <p style="color: red">When in the course...</p>

    This would style the paragraph red, but just this one paragraph on the page. Using this type of style sheet, you would have to individually style other p tags on the page if you also want those to be red. This is an inefficient style sheet concept.

  2. embedded (internal) = style information is in a <style> tag which is nested in the <head> tag of a single Web page. For example:

    <style type="text/css">
    p {color: red;}
    </style>

    This would style all the paragraphs on this one Web page red. This is more powerful, but if you want to style all the p tags on your other Web pages using this model, then you'd have to add this code to them all. If your site contains hundreds of pages, this could take a while.

  3. linked (external) = the style is in one .css file that is linked to multiple Web pages. The link tag on the page is connected to the external file.

    In a case like this, all the Web pages in an entire site -- and there could be dozens, hundreds, or thousands! -- could be linked to this one external style sheet file. If that file contained a selector that specified the p tag was red, all the p tags throughout all the pages of the site would be styled that color.

    In Web design, this is as powerful as it gets. Your goal is to make it so all of your pages can be connected to a style sheet that contains all the style rules for your site (all pages). In this case, if you want to make a change to all the pages, you just update the style rule in the one .css file, and -- voila! -- all the pages linked to it are automatically updated.

 

Cascading

The term cascading refers to which of these takes precedence when it comes to styling a page, a line, or any other element on the page. Usually, the closer to the HTML element, the more power it has. This means that inline style will beat embedded style which will beat linked style. However, the rules that are followed regarding precedence are long and complex, and inline style is not necessarily the best choice in most cases.

 

The goal for most Web designers is to avoid using inline and embedded style, and move the style information to a separate .css file so that it can be linked to many Web pages. By linking multiple Web pages to one .css file, style changes can be made more quickly to the entire website.

 

Selectors

Embedded style and .css files contain selectors and not HTML tags. There are three different types of selectors and one combination selector as follows:

 

  1. Tag selectors are used to style all the tags on a Web page. You usually style these first and they make up your general style rules for the page since they usually have the biggest impact on the overall look of the page.

    For example, if you want to style all the paragraph or p tags on the page so they look the same, use a p tag selector.

  2. Class selectors are typically used as exceptions to various general styles on a Web page. If tag selectors are the rule, then class selectors are the exception to the rule.

    For example, if you have ten p tags on a page, and you want all but one of them to look alike, create a p tag selector to style the majority, then create and apply a class selector to the odd one in the group. Because class selectors are used as an exception, they tend to be the least frequently used selectors.

  3. ID selectors are typically used to identify divs that are used throughout a website. They are also used to identify other unique elements, such as individual form fields and individual images. They must be used only once each on a page.

    For example, if you ID a div "content", then you cannot use that ID on any other element.

  4. Descendant selectors, are not one specific selector, but a combination of selectors used to specify a particular element to style.

    For example, if you want to style all of the p tags that are nested inside a div ID'ed as "content", then you would use this selector combination (Descendant selector):

    #content p

    This is a combination of an ID selector followed by a tag selector -- they are always separated by a space. Also, the selectors on the right are always nested inside the ones to their immediate left. Consider this Descendant selector example:

    #container #nav ul li a

    This is styling all of the a tags nested inside list item tags nested inside an unordered list tag which is in turn nested inside an element (probably a div) ID'ed as "nav" which is itself nested inside an element (again, probably a div) ID'ed as "container".

 

 

What it Looks like in the HTML vs. the CSS

 

What it Looks like in the HTML How You Should Style it in the CSS Selector Type in CSS
<h1> ... text content goes here ... </h1> h1 {
    ... typographical style goes here ...
}
tag
<p class="copyright"> ... text content goes here ... </p> .copyright {
    ... typographical style goes here ...
}
class
<div id="container"> ... tags go here ... </div> #container {
    ... structural style goes here ...
}
ID
<div id="leftcol">
    <p> ... text content goes here ... </p>
</div>
#leftcol p {
    ... typographical style goes here ...
}
descendant (in this example, the combination of an ID selector and a tag selector)

 

 

Specificity

What happens when you have two style rules that seem to state opposite ideas? Which one wins? Consider this example:

 

In your style sheet, you have these two selectors

 

#content p { color: blue; }

 

p { color: red; }

 

The first selector (the Descendant) is suggested that all p tags within the div called "content" are to be colored blue, but the tag selector for all the p tags on the page says that all of them, no matter what div they are in, are to be colored red.

 

So which one gets the style?

 

The one that's more "specific" is the one that would style the element.

 

The way browsers work is that, to determine which one is being more specific, they assign a numerical value to the selectors used, with tag selectors getting a 1 point value, class selectors getting a 10 point value, and ID selectors getting a 100 point value. Descendants add all their selectors together. The highest numerical value in total for the selector or Descendant will win.

 

In the case above,

 

#content = 100 + p = 1, which is a total of 101

 

Since the other is just a p or a value of 1, then the Descendant wins, so those p tags inside div#content would be blue, but the ones outside div#content would still be red.

 

Check out this site for a really good article that explains the concept of specificity in better detail: HTML Dog: Specificity

 

 

Inheritance

Another way to style elements is to use inheritance. Meaning, give style the parent structural element rather than the child tag. This works with typographical style (explained in the topic below) but usually not structural style. In other words, if you give typographical style to the body tag, like this

body {
    font-family: Arial, sans-serif;
}

then the children, which is every text-containing tag on the page because they are all children of the body tag, will inherit this style -- they will all be styled with Arial (or other sans-serif) font.

 

Note that this can work to style several elements quickly, but be warned: inheritance is weak style. It's not specific and it can be overridden by even a tag selector. Consider this example:

p {
    color: red;
}

body {
    color: blue;
}

In this example, all the p tag text on the page will be red. Even though a p tag selector is a 1 for browser weight which is equal to the body tag selector (also a 1 for browser weight), and even though the body tag selector is listed last in order in the CSS, that doesn't matter. The p tag selector is more specific -- it's targetting the p tags directly, while the body tag can only style them if they inherit that style as the children of the body tag. Tag selectors beat inheritance in the cascading rules within browsers.

 

Here's another example (click on the link to see the resulting page from the code below):

 

HTML

<div id="leftcol">
    <p>Text here</p>
</div>

 

CSS

p {
    color: red;
}

#leftcol {
    color: blue;
}

Again, the p tag text "Text here" will be red. And again, even though it's earlier in order, and tag selectors are weaker than ID selectors, that doesn't matter. The ID selector is applied to the structural element, which can't take typographical style anyway -- div's aren't text that can be styled with font color, they're boxes. So, for that ID selector to work, there must be no other style that's affecting the p tag text -- which, of course, there is in this example.

 

To fix this kind of problem, you just need to be more specific. In this case, use a descendant selector to target the p tag to make it blue rather than red. Here's the solution for the CSS:

#leftcol p {
    color: blue;
}

 

Now, all the p tags within div#leftcol are being styled blue, so that text would be blue.

 

So, to avoid weak style (inheritance), just be specific, which often means using descendant selectors.

 

 

 

Arrow up to top of page

Typographical Style vs. Structural Style

Most CSS properties fall into two general style areas: typographical and structural. This means that some style is meant to style text while other style is meant to style div tags and other structural elements.

 

Typographical Style

Typographical style is meant to alter the fonts (typography) on a page. In essence, this type of style styles the text. The following is a list of CSS properties that are relevant to typography:

 

  • font-* (anything that begins with font-)
  • color (this is for font color only)
  • text-align

 

The elements (HTML tags) this style is meant to affect are all text-containing tags. This is as opposed to tag-containing tags (many of which are structural tags). All of the following tags are intended to contain text directly, and all text should be placed in these types of tags. In other words, don't place text directly into a div tag. Always place it in a p tag or other text-containing tag, which is then placed in the div. The list of text-containing tags is as follows:

 

  • p
  • h1, h2, h3, h4, h5, h6
  • li (note that the li is a text-containing tag, whereas the ul and ol tags are tag-containing tags)
  • label
  • td
  • dt, dd (note that the dl tag is a tag-containing tag)
  • pre

 

Structural Style

Structural style is meant to alter structural tags or those tags that are boxes on the page. The following is a list of CSS properties that are relevant to structure:

 

  • width
  • padding
  • margin
  • float
  • clear
  • display

 

The elements (HTML tags) this style is meant to affect are all text-containing tags. Here is a list of structural, tag-containing tags:

 

  • div
  • article
  • aside
  • details
  • figcaption
  • figure
  • footer
  • header
  • hgroup
  • menu
  • nav
  • section
  • main

 

Note that display, padding and margin can also be used with typographical elements to add space to them. The height property is also structural style although was not included in the list above because it is rarely used on structural elements if at all.

 

Usage

Some of the following rules and best practices apply to using typographical style vs. structural style:

 

  1. Don't apply typographical style to structures. In other words, if you have a p tag inside a div, like this

    <div id="leftcol">
        <p>Text here</p>
    </div>

then do NOT use CSS like this

#leftcol {
    color: blue;
}

Instead, target the specific text-containing tag with a descendant selector like this

#leftcol p {
    color: blue;
}

Note the p tag selector immediately after the ID selector -- this means all p tags within div#leftcol will be styled blue.

 

This will overcome the possibility of inheritance occurring which is described at the end of the topic above this one.

  1. Related to the issue above, when you do apply typographical style, be sure to be specific. In other words, use descendant selectors to indicate the div/structural element you want to apply it to immediately followed by the tag selector of the text-containing tag you want to specifically target. The example above demonstrates this.

  2. Only rarely apply structural style to typographical elements. For example, if you have an h1 tag touching the edge of the left side of the div it's inside, don't give it left margin to move it away. Instead, give the div left padding to push the h1 away from it. Also, any padding on the left of the div will also move any other tags away from it, including p tags, img tags, etc. This is usually what you want. It is possible that you want more indention on the h1. If that's the case, then giving it some left margin in addition to the div's left padding may be required, although, as stated, this is probably rare.

 

 

You may have noticed in the typographical and structural lists above, many tags were not included, like the a tag, the table tag, and the img tag. Those kinds of tags don't easily fall into either category (text-containing vs. tag-containing). Obviously, in those cases, you may have to use either one type of style or the other, or even a combination of those styles.

 

 

 

Arrow up to top of page

 

div Tags

div tags are the most widely used and versatile layout or sectioning element in HTML. In HTML5, div tags are still widely used, however there are new sectioning elements (header, nav, footer, aside, article, figure, main and section). You should plan to design all your Web pages with a structure composed of sectioning elements. Refer to the section in these Useful Tips: Website Design, Part 2 -- Structure for more information on the proper general use of div tags and other sectioning elements in HTML.

 

All the information listed in the topic refers to both div tags and all other HTML5 structural tags. In other words, when it says "divs" assume it means "and header, nav, footer, etc..."

 

Positioning Divs

The standard, default positioning of divs -- which is position: static -- is the most commonly used, or at least the most commonly unchanged. This is in part because positioning isn't widely understood.

 

div tags can be positioned in four ways: static, relative, absolute and fixed. The choice static is the default for all items and behaves very much like relative positioning. (If you don't include a position property for a div, the default is assumed to be position: static.)

 

Check out this div positioning example and view the embedded CSS source to understand how they work.

Instructor Note
When you view the link above, be sure to change the size of your browser window and scroll through the text to see how the three types of divs work on a page and with each other. This is a great demonstration of how they work!

Fixed positioning is a novelty (i.e., rarely used) when it comes to placing divs because fixed divs stay fixed in place in the browser window. In other words, when you scroll other content, they will still remain in place so that other content will scroll above or below them. This can pose a serious problem in a small viewport (like on a mobile device) because the fixed div will be stuck in one place and likely take up a significant portion of the viewable area on the device's browser so the user cannot see content around it.

Important characteristics:

  • Rarely used since they always stay in one place in the browser window, which was once a real problem on smaller, mobile device screens
  • Coming back into more frequent, though still uncommon, use due to responsive design (and the ability to turn it off on mobile phones)
  • Cannot be floated (because they don't interact with other divs)
  • Cannot have margin adjustments (again, because they don't interact with other divs)
  • Can use positioning properties (like z-index, top, left, etc.)

 

 

Absolute positioning is used to place divs in one immobile spot on the page. Absolute positioned divs are set outside the normal text flow of the page, thus they do not interact with each other -- they don't position off each other nor can you use margin to push one away from another. This positioning works well for fixed-height layouts. However, fixed-height layouts are very rare. Fixed-height means all the content on all the pages of a site have a set height. Bear in mind, fixed-width layouts are the dominant layouts, but fixed-height is very restricting to designers. The implication with fixed-height is that you will have the exact same amount of content (text and images) on every page, or at least very close so it doesn't leave a lot of extra space.

Important characteristics:

  • Sometimes used with background divs (ones that hold the background image, gradient image or other colors)
  • Should be rarely or never used, because the effects of this positiong can be duplicated using relative positioning with float and negative margin
  • Cannot be floated (because they don't interact with other divs)
  • Cannot have margin adjustments (again, because they don't interact with other divs)
  • Can use positioning properties (like z-index, top, left, etc.)

 

Static positioning is used to ensure divs will interact with one another so you can create flexible columns, flexible height, and use margins to push them away from one another. This is the default and most common type of div positioning used.

Important characteristics:

  • Most common type of div
  • This is the default position type and does not have to be indicated in the style with divs
  • Can be floated and cleared
  • Can have margin adjustments
  • Cannot use positioning properties (z-index, top, left, etc.) -- this is the difference between relative and static positioning

 

 

Relative positioning is used to ensure divs will interact with one another so you can create flexible columns, flexible height, and use margins to push them away from one another. The big difference between relative and static positioned divs is that you can use the positioning properties left, top and right and z-index with relative positioned objects, but not with static objects. (You can still use margin-left, margin-top, etc., with both for the same effect.) Otherwise though, the differences are very minor with these two.

Other characteristics:

  • Useful on the container div in a fixed width page layout, especially if you are using an absolute div in the background, or whenever you plan to stack this div with others (using z-index)
  • Can be floated and cleared
  • Can have margin adjustments
  • Can use positioning properties (z-index, top, left, etc.)

 

Check out this W3Schools positioning example to get a better feel for what these types will do given the same properties. For the best results, make your browser window viewport small so you can scroll the content up and down to see what happens.

 

It is industry-standard and most common to use relative or static positioning and NOT absolute positioning with your divs to avoid "the footer problem" -- this is a situation in absolute positioning in which the variable amount of content from page to page causes the footer to appear too far (or too close) to the content above it. Check out this past student project to see the footer problem with absolute positioning and be sure to click from page to page and watch the footer (where the copyright info is contained at the bottom of each page). Since this student used absolute positioning for his divs, the footer is effectively stuck in place from page to page. On pages where there is very little content, the footer seems to be very far from the divs above it. If he had used relative or static positioning instead, the footer would rise up to meet the div above it.

 

The following links can help you understand div tags and positioning better:

 

Columns with divs

Making columns with relative divs is easy. For a three column layout, here's the HTML that goes in the body section:

 

  • <div id="container">
  •    <div id="leftcolumn"></div>
  •    <div id="middlecolumn"></div>
  •    <div id="rightcolumn"></div>
  • </div>

 

Here's the minimum CSS that will make it into three columns:

 

  • #container { width: 900px; }
  • #leftcolumn { position: relative; float: left; width: 33.333% }
  • #middlecolumn { position: relative; float: left; width: 33.333% }
  • #rightcolumn { position: relative; float: left; width: 33.333% }

 

If you float each of the divs left, they will stack up next to each other, one after another. As long as their total width doesn't exceed the container, it should work perfectly. (Position set to relative is a good idea when designing sites for older browsers since they can be confused by the div's positioning if you don't state it when using the float property.)

 

Bear in mind, you can make any number of columns with this approach as long as their total width is less than or equal to their container width.

 

 

 

Problems with Table Tags for Layout

Although used prior to (and sometimes after) CSS was introduced, you should NOT use a table for layout. This isn't a typical issue anymore, however, you may run across old sites that still incorrectly use table tags for layout.

 

While the table tag may appear to be an easier structural element to layout your Web pages, there are several reasons to avoid table tags for layout.

 

Consider this long list of issues with tables:

  1. Editing the content (for example, adding or taking away some text) on tables in Dreamweaver or elsewhere usually causes the tds (cells) or rows to change size. This will then require you to fix the size, row by row, or cell by cell.
  2. Tables don't degrade gracefully (i.e., work well) on browsers that are text-only or devices like cell phones that have small screen browsers.
  3. Tables load slower than divs with CSS positioning.
  4. Positioning ability with tables is limited.
  5. Browsers inconsistently display table properties. This is an issue with divs as well, but the inconsistencies are not on the magnitude of the problems displaying tables.
  6. All the tds of the table require height and width adjustments to display content properly, otherwise tables from page to page will have different content placement. Visual consistency is not easy to maintain with tables throughout your site.
  7. Correcting the inconsistencies in table display routinely requires page by page adjustment of the tables which is time consuming.
  8. Presentational data and content are mixed in the table (not separate as they are with div tags) which means the page will load slower with table layout, and your Web page file sizes will tend to be larger.
  9. Tables load the content into the browser from left to right and top to bottom. There is no way to control the display order.
  10. There is more HTML code required to construct a table which increases your ratio of code to content on the page. This can negatively affect your search engine placement with some search engines, including Google.
  11. Tables do not print well.
  12. The Web standard layout element is the div tag, not the table tag. Modern browsers are designed to render based on Web standards.

 

In other words, if it wasn't clear from that list above, follow this one rule: don't use tables to layout your Web pages.

 

Div tags are industry-standard and you will not be taken seriously as a Web designer among your designing peers if you continue to use table tags for layout.

Instructor Note
You can still use tables, just use them for tabular data as they were intended, and not for Web page layout. I also like to use them to contain form fields on form pages because forms lend themselves to the row and column separation that tables were meant for.

 

 

Arrow up to top of page

Responsive Web Design

Responsive Web Design (RWD) is the most common, industry-standard term for designing websites so they work well on mobile devices (cell phones) and desktop computers and anything in between. The site will scale to the size of the browser window on which the site is being viewed. CSS3 media queries (@media) is the most common method of making a site responsive (scalable).

 

Here are some general principles and technical considerations you should make when creating a site with or converted a site to responsive design:


  1. Flexibility
    A common design concept is called "mobile first" meaning you should design your site with an eye to how it will look on a mobile phone browser. The assumption with mobile first being that due to the increasing number of people who will be viewing the site on a phone and possibly only on a phone, it's best to take that into account first. In principle this makes sense, however, a better practice is to design with fluidity or flexibility in mind regardless of whether you're designing mobile first or desktop first. You should always plan for how it will look on various screen sizes and include this planning in your wireframes/mockups.

  2. Break-points
    The most common three size ranges (or break-points) used in RWD CSS media queries are:

    1. Mobile size range:
      @media (max-width: 480px) { ...CSS goes here... }

    2. Tablet size range:
      @media (min-width: 481px) and (max-width: 1199px) { ...CSS goes here... }

    3. Desktop size range:
      @media (min-width: 1200px) { ...CSS goes here... }

    Regardless of the standard break-points, you should always put in break-points to suit your content. If your content is flexible throughout, you may not need any. If your content looks awkward when the screen is around 700px, then an additional break-point may need to be added there. Set your break-points and style to what works for your content, not necessarily what might be the most common size ranges.

  3. Container Max-Width should Equal Desktop Break-point Media Query
    The container max-width on your site should be equal to the desktop size range (break-point) min-width value in that media query. In other words, if your container has a maximum width of 960px, then the break-point is @media (min-width: 960px). When the container has a maximum width in pixels, it makes no sense to make the desktop break-point smaller or larger than it. If it's smaller than the container, then the container won't fit and your site will have a horizontal scrollbar. If it's larger than the container, then the container will have already locked out at the smaller size. It could be relevant if there was some other change -- like font-size -- occurring in a larger media query range, however, since most media queries adjust structural elements, then a desktop media query with a min-width larger than the container's max-width is not likely to make a difference.

  4. Include Meta Viewport
    To ensure your site works and scales properly on iDevices (Apple iPads and iPhones), don't forget to include this meta tag in the HTML head tag area on all your responsive web pages:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

  5. Remove Width and Height Attributes for Img Tags
    For all img tags in the HTML, remove the width and height attributes in the HTML. Those attributes override the CSS and your images can't be made to scale if those attributes are in there and set to pixel sizes.

  6. Set Max-Width for Images in the CSS
    In the CSS, create a tag selector to set the images and videos to a max-width of 100% and height to auto, otherwise the images and video (from video tags, not YouTube iframes) may scale to larger sizes than they were optimized for and pixelate. The selector would go in your global style area and look like this:

    img,video { max-width: 100%; height: auto; }

  7. Media Queries Below Global Style in CSS
    It's most common (industry-standard) to put your media queries below your global style in the CSS (which should, in turn, be below your reset CSS). It's ideal to include CSS comments to clarify what they are doing in your style sheet. For example, if you set one up for the mobile range to revert a two-column layout to one-column, you can indicate that in a comment.

    Also, because the media queries will often override the global style, they must be below the global style in the style sheet.

  8. Use Relative Units of Measurement Appropriately
    % units -- This relative unit of measurement should be used for the width of divs (other than the container) and other structural elements, anything that affects width like left and right margin and padding, and on the font-size applied to the body tag selector. This is important so these elements can change and adapt to the changing media query size ranges.
    em units -- This relative unit is useful for font-size on all text containing elements. It helps to use em units here so they inherit (and multiply to) the body font-size % unit.
    px units -- This fixed unit is still useful for adjustments to images (when the image isn't changing size), for top and bottom padding and margin (when the responsive adjustments don't require these to change), and to the container in the largest (desktop) media query so it can maintain a fixed size there.

  9. To Remove Elements, Use display: none;
    If you want to ensure that a video doesn't load on a mobile phone and eat up the user's data, you can put it in a div and set the div to display: none; in the mobile media query. This can be done to any tag that you don't want to display on any size range. It can also be used to display the same image in two different places -- one place when the size is mobile, the other when it's desktop.

  10. Most Common Properties in Media Queries
    The most common properties you'll use in media queries are the ones that will change from varying monitor sizes. These include:
    • width
    • margin-left
    • margin-right
    • padding-left
    • padding-right
    • float
    • clear (only when this should change)
    • font-size (only when this should change)
    • display: none;

 

 

 

Arrow up to top of page

Reset CSS and box-sizing

The purpose of using reset CSS is to remove all style that the browser uses by default to affect the web page.

 

The issue of browser default style goes back way to the 90's when style wasn't consistent from browser to browser, nor was it easy to style web pages, so browser makers agreed to start out with some built-in style. Unfortunately nowadays, that built-in style is often style you have to fight against when you style a page.

Among the default, built-in style you usually want to remove is

  • the extra margin on a page -- there is top and left margin on the body tag which makes it so a page never looks properly centered.
  • extra, but inconsistent, margin after p tags and h1, h2, etc. tags. This makes it so everything doubles spaces whether you want it to or not.
  • line-height, which is not consistent from browser to browser, some have it proportional to the size of the font, others don't specify it.
  • odd space in some browsers within tables (table and td tags)
  • size and boldness on h tags.

The reset CSS removes, or resets, all this built-in style (and more) so that all pages start with no style. This is the appropriate starting point when you are styling a page from scratch, and this is considered an industry standard, best practice.

 

You can find reset CSS by doing a quick search in Google. The Eric Meyer reset CSS is widely used although there are others and some are more extreme in how much they remove than others.

 

Usage

Copy and paste the entire reset CSS into the top of your .css file. You don't change or edit that reset style. The reset style removes all the browser default style, like margin, font-size, bold, line height, etc.



Now, if, for instance, you want to re-add margin to your h1 tag (since margin was removed in the reset style) you would put this in a new h1 tag selector in your global style (which is style you create that follows the reset style). All style that was removed that you want back, you have to re-add.



Mostly, you probably won't re-add the style that the reset removed, however, some of that removed style you may want to add back in. This may sound counter-intuitive to have to add back in something that was removed, but the issue is this: browsers like Chrome and Firefox do not agree on how much default margin to apply to web pages. They also don't agree on how much line-height (space between lines in a paragraph) to apply to paragraphs. What the reset sheet does is to remove all this so you can add in the amount you want, if you want it at all, without getting inconsistent default quantities that browsers give you.



In a perfect world, browsers wouldn't give you ANY default style at all and you would just add it yourself as needed. Since they do, it's important to reset it (with the reset CSS), then it's as though there isn't any default style so you can control it yourself.

 

The CSS box-sizing Property

Although not always dealt with in reset CSS, you may want to address the issue of box-sizing in your design. The issue is this: the default box-sizing for structural elements, like divs, nav, header, main, etc., is box-sizing: content-box; The problem with this value is that it causes padding that you add to the left and right of a div to increase the width of the div, thereby throwing off any columns or general layout width you've created in your site.

 

If you set all strutural elements to box-sizing: border-box; instead, padding is taken into account in the overall width, so it doesn't increase the width of your divs and other structural elements.

 

So, to save yourself some headache and to save yourself having to calculate padding width into your divs, you may want to add this style somewhere to the top of your stylesheet:

div, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
     box-sizing: border-box;
}

 

Note that the tag selectors in the group above identify all of the structural tags that might be affected by this issue. The best place to add this style is just after the reset CSS.

 

You'll find more information and examples about box-sizing in this W3Schools article CSS Box Sizing: https://www.w3schools.com/css/css3_box-sizing.asp

 

 

 

Arrow up to top of page

 

Hard Refresh: Problems with Links or CSS not Updating

You may have run into a situation in your browser where you made a change to links or the style (CSS) of the site, but when you refresh (reload the page) in your browser, the changes aren't there. If you ever see this kind of odd behavior, be sure to do a hard refresh (Ctrl+F5 on a PC, Cmd+Shift+R on a Mac) or, more extreme, clear the browser's history. The standard browser refresh (F5 on a PC or just the reload button) doesn't always reload the new page from the server. It may instead load the local cached version of the HTML or the CSS or both. A hard refresh will attempt to do a complete reload of the HTML page and CSS from the server.

 

This is not typically an issue with CMS's like WordPress when it comes to loading the HTML, because that's always generated by PHP, however, the CSS from WordPress may be cached, so definitely doing a hard refresh every time you update style on static or dynamic (CMS) sites is useful and the safest way to ensure you get the most current pages and style loaded.

 

Hard refresh is also referred to as bypassing the cache on your browser. Here's a Wikipedia article about this issue and the method to do it, Bypass Your Cache: https://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache

 

 

 

Arrow up to top of page

overflow: hidden vs. clear: both

When dealing with floating elements, you can quickly find that the float property can have unintended consequences to non-floating elements around it. This behavior and interaction is sometimes hard to predict. To stop elements from behaving unexpectedly from float, there are two properties that can be used: overflow: hidden or clear: both. These properties have different functions, but tend to create a similar effect.

 

 

When to use overflow: hidden

overflow: hidden is used on parent elements that have floating children.

 

In the example, below, the footer is outside the container. You could run into a problem with the footer because, although it's not inside the container, it is being affected by the floating children in the container.

 

Note that for the purposes of this example, inline style was used and divs with ID's were favored rather than all HTML5 structural elements.

 

The Problem

<div id="container">
    <div id="column1" style="float: left;width: 60%;"></div>
    <div id="column2" style="float: left;width: 40%;"></div>
</div><!-- /#container -->
<footer></footer>

 

 

Even if you clear the footer tag above, it could still be affected by the float of the children inside the container. The best solution is as follows:

 

The Solution

<div id="container" style="overflow: hidden;">
    <div id="column1" style="float: left;width: 60%;"></div>
    <div id="column2" style="float: left;width: 40%;"></div>
</div><!-- /#container -->
<footer></footer>

 

Note that when you add overflow: hidden to the non-floating parent, it can "tame" the floating children divs inside it so they don't affect its neighboring structural elements. Also, be careful because overflow has an adverse impact if you also use the height property, however, it's uncommon to use height on divs -- the best practice is to let the content in the divs control the height rather than setting a height on it. You can also use top and bottom padding on the div to give it some sense of height.

 

 

When to use clear: both

clear: both is used on lower non-floating elements that have floating neighbors above them in the HTML.

 

In the example, below, the footer is inside the container. Since the footer is inside the container and the divs above it are floating, the footer will tend to rise up to meet the top of the container, ignoring its floating neighbors.

 

Note that for the purposes of this example, inline style was used and divs with ID's were favored rather than all HTML5 structural elements.

 

The Problem

<div id="container">
    <div id="column1" style="float: left;width: 60%;"></div>
    <div id="column2" style="float: left;width: 40%;"></div>
    <footer></footer>
</div><!-- /#container -->

 

overflow: hidden has no ability to stop the inner floating children causing the footer to rise up. This is because overflow: hidden only has an effect on the parent div and any divs outside and below that div. The best solution is as follows:

 

The Solution

<div id="container">
    <div id="column1" style="float: left;width: 60%;"></div>
    <div id="column2" style="float: left;width: 40%;"></div>
    <footer style="clear: both;"></footer>
</div><!-- /#container -->
<footer></footer>

 

clear: both should be added to the non-floating element immediately below the floating elements in the HTML. clear: both cancels all affects caused by float, specifically the effect that makes a non-floating div rise up ignoring the floating ones above it. Note that clear: left; could also be used on the footer in this example, since each of the divs floating above it are float: left;

 

 

 

Arrow up to top of page

WordPress Post vs. Page

A common confusion for new WordPress users is to mistake Posts for Pages and vice versa. Here are some questions to consider:

 

  Post Page
Is the content on the page relatively static (i.e., it won't often change)?   X
Is it content that is typical of a blog? X  
Will the article be archived and remain on your site so that it can be searched for later? X  
Is this content like what you'd find on typical Contact or About pages?   X
Is the date you published the information relevant to the user or relevant to how you organize the different articles? X  
Is the article newsworthy? Does it need to be sent out in an RSS feed? X  
Does the information included in the article fall into different categories and can those categories be organized or searched for independently? Does it have to be categorized? X  
Must the layout of the content be controlled by a template?   X

 

To further confuse this issue, you can funnel your Posts through Pages. More examples of the proper use of Posts and Pages is included in CAS 111W.

 

 

Arrow up to top of page

WordPress Customizations

Customizing the templates of your WordPress theme may involve something as simple as changing a line of code in your PHP files or as complicated as creating your own page template. Keep in mind that all customizations you do, no matter how basic, are best done in the child theme.

 

Listed below are an example of various possible customizations you might make and what your best choice is:

 

Customization Example Complexity Method or Process
Change all your blog post group results pages (categories on the menu) to display full content blog posts instead of excerpts. low Edit archive.php loop to display the_content rather than the_excerpt
Change an individual blog post group results page (an individual category on the menu) to display full content blog posts instead of excerpts, but leave all the other blog post group results to display excerpts. medium Create a custom category archive page. Edit that category archive page loop to display the_content rather than the_excerpt
Alter the number or order in which blog posts group results pages display on a category archive page. medium Create a custom category archive page. Edit the category archive page loop to query the post results in different ways.
Change the order of the content displayed in a blog post. For example, move post-data to the beginning or post-meta to the end of the blog post content from its original position. medium Create a custom category archive page. Edit the PHP statements of that page to alter their order.
Create another column structure for a template. In other words, if your theme only has two column templates and you want a three column template for some of your pages/categories. high Create a new page template. This involves creating a page template from scratch, or making major corrections to a copy of an existing page template AND updating the CSS to accommodate the page template's new style.
Remove a single widget from displaying on one category archive page. low Use the inspect element feature of the browser to determine the related class attributes of the widget div, category and page. Add a line of code in the CSS to display: none on the class related to the specific widget div.
Display different widgets on the same page templates. medium to high The easiest way to do this is with a plugin like Widget Logic or Dynamic Widgets. The harder method is to create a new sidebar-(whatever).php file and create a new page template, then reference the new sidebar in the new page template. Then add widgets to the new sidebar area (Appearance -> Widgets), then assign the new template to your page by editing the page in the admin panel.
Remove content from the footer. medium Remove or alter the code of footer.php -- a backup of footer.php should be made prior to removing any PHP from that file.
Add JavaScript to the head area of all pages. low Can be done with plugins or by editing header.php
Change the default display of archive.php for all blog post group results (categories) to conform to a different template rather than Default Template. medium Copy an existing template file. Rename the copy to archive.php first ensuring that no previous customizations were made to archive.php
Alter the default display (Default Template) of pages that you cannot assign a template to in the admin panel. This includes pages like the WooCommerce products and cart pages and the bbPress forum page. medium to high Research the name of the PHP files to edit in these plugins. Move or copy these PHP files, if possible, to your child theme. May involve creating a new page template which will greatly complicate this process.

 

The table above includes just some of the many, many customizations you might want to do to your WordPress theme, and this is a very short list.

 

Before you make any customizations to templates, you should understand the template hierarchy: http://codex.wordpress.org/Template_Hierarchy

 

Briefly, the two major hierarchies are for Pages and Categories (Blog posts). This is an excerpt from the WordPress Codex showing the Page display hierarchy and the Category display hierarchy:

 

Page display

Template file used to render a static page

  1. custom template file - The Page Template (http://codex.wordpress.org/Pages#Page_Templates) assigned to the Page.
  2. page-{slug}.php - If the page slug is recent-news, WordPress will look to use page-recent-news.php
  3. page-{id}.php - If the page ID is 6, WordPress will look to use page-6.php
  4. page.php
  5. index.php

 

Category display

Template file used to render a Category Archive page

  1. category-{slug}.php - If the category's slug were news, WordPress would look for category-news.php
  2. category-{id}.php - If the category's ID were 6, WordPress would look for category-6.php
  3. category.php
  4. archive.php
  5. index.php

 

 

Arrow up to top of page

Forms

To insert a form in Dreamweaver, you can click the Forms tab, then click the Form button on the left of that toolbar to start off your form. You must always start by creating the form first in this way. This will create a red dashed box in Design view. Then you can begin to add your text fields (input tags), textarea fields (textarea tags), and all the other pulldown and check box items inside that one form tag.

 

Better still, instead of adding the form fields directly into the form tag (red dashed area), you may want to insert a table in the form area first to control the layout of the fields, then insert the fields into the table td's.

Instructor Note
It's very important to remember: a form consists of one form tag, and all of the table, input, textarea and Spry fields are nested inside that one form tag. That's ONE FORM TAG. You are doing it correctly in Dreamweaver if, in Design view, you have only one red dashed box surrounding all of the fields of the form.

Consider the disaster if you have multiple form tags. If your Submit button is in a separate form tag by itself, it has no relationship to the fields that are in other form tags. When you click that Submit button, it submits nothing.

Unfortunately, in Dreamweaver Design, if you forget to start off with a form tag, everytime you insert a field, it automatically surrounds it with a new form tag... a new form tag for EVERY field... thus making your form useless... ugh!

 

How to Make a Form Work

The CAS 111D and CAS 206 classes don't cover this in detail. In CAS 222 you will make a form actually send data.

 

The Server-Side Script topic below contains more information about this process.

 

 

Arrow up to top of page

Area Maps (aka Hotspots in Dreamweaver)

Area maps are essentially a clickable, linkable area that covers part of an image. You can place an area map over part of an inserted image to create a link from just that one section of the picture. Dreamweaver provides an easy way to use area maps or, as Dreamweaver refers to them, hotspots.

 

The hotspot tool allows you to create area maps with the mouse. To get a look at a hotspot, check out this hotspot example -- download both the hotspot_example.html file and the picture in that folder and view the Web page through Dreamweaver.

 

In the example, notice that the hotspot appears as a light blue area that covers part of the image. If you click on the hotspot, you'll see all of the coordinate points that were placed on it. This hotspot was create using the Polygon Hotspot Tool. To view all the hotspot tools, click on the image and look in the lower left section of Properties.

 

Using the rectangular and oval hotspot tools is relatively easy. You click those tools then drag the shapes into the appropriate area of the pictures.

 

The polygon tool takes a bit more practice. When using the polygon tool, you simply keep clicking to add more coordinate points -- you can as many of them as you think you need, even if you have added them into the wrong area. Once you are done adding points, click away from the picture. When you click back on the picture, then onto the hotspot area, you'll have the ability to drag the individual points around to make a custom shape.

 

Instructor Note
When using the polygon tool, your best bet is to click points either clockwise or counter-clockwise around the shape of the image section you want to cover. Don't worry if the hotspot blue shape isn't drawing correctly right away -- ignore it -- and just keep clicking around the area of the image until you have come full circle. The blue shape will eventually conform to the area of the image section you clicked around.

 

For complex shapes, you'll use the polygon hotspot tool in Dreamweaver. Be sure to click many times -- between 10 and 20 times -- so you have some flexibility to customize the hotspot shape.

 

Also, take a look at Code view on this and marvel at the number of coordinate points! And be thankful that you can do this with a mouse and not just guess at these points!

 

Finally, notice that when you click on a hotspot area that you can add a link and alt text, just like for an image.

 

 

Arrow up to top of page

Iframes

Iframes are frames that can contain another Web page. They are effectively a portal to that other page, and that other page can be on your site or someone else's. They are most commonly used to hold photo galleries or rapidly changing data from another page (like a Wordpress blog or Twitter).

 

Iframe Scrollbars

Iframes have their own scrollbars, which can be somewhat distracting. Using their own HTML attribute, scrolling, the scrollbars can be set on Yes, Auto or No.

 

If you want to force the scrollbar on the X-axis (horizontal direction) off, you either need to size the content on the containing page so that it doesn't go outside the width of the iframe -- and you can control that by placing the content in a div that's sized correctly, or you can use the following CSS to turn off the horizontal scrollbar:

 

iframe { overflow-x: hidden; overflow-y: yes; }

 

Arrow up to top of page

Video

Video has been inconsistently handled by browsers since it was introduced to them in the 1990s. Adobe's Flash player browser plug-in has helped to alleviate the problem by making desktop browsing more video friendly. YouTube also has adopted the Flash video standard on all their videos. The problem has been compatibility with mobile browsers, and Apple's decision (mostly a financial one) to not support the Flash player on mobile devices.

 

With the introduction of HTML5, newer browsers will now support video through the HTML5 video tag without the need for a video player plug-in. At the current time, the major browsers support the H.264 video codec most prominently used in the .mp4 video container file.

 

A video codec should not be confused by video container files. The container files (.avi, .flv, .mov, .mp4, etc.) contain both encoded streams of video and audio -- you can think of these container files much the same way as .zip files hold compressed files. The streams are compressed to make them smaller in size so they download faster on the Web. The term "codec" stands for compressor/decompressor and identifies in what way the video is encoded. And there are MANY different codecs out there. The four most popular, that have gravitated to the top of the browser preferred list are VP8, VP6, Theora, and H.264.

 

Video Codecs

 

The following table contains a list of the major video codecs used on the Web:

 

Video Codec Typical Audio Codec (but can be any) License Common Name Usual Container
File Extension
Theora Vorbis

Royalty-free and Open Source

Ogg

.ogv
On2 VP8 Vorbis Google acquired, but opened up as royalty-free WebM .webm
H.264 AAC Proprietary, currently royalty-free license by MPEG Group MP4 .mp4
On2 VP6, Sorenson Spark AAC Proprietary, licensed through Adobe Flash video
(and must have Flash player to play this format)
.flv

 

Of the codecs above, only the H.264 codec is supported by the major browsers. Previous versions of all the major browsers did not universally support the H.264 codec (which is contained in the .mp4 video container file). The Can I Use website lists the browser versions and which one support this and other codecs.

 

HandBrake -- this is a free application you can download and use to convert most video container files/codecs into .mp4 (MP4 video, H.264 codec). Helpful instructions are listed at Dive Into HTML5: HandBrake.

 

MP4 video can also be created by uploading a video to YouTube then capturing it back again with a Firefox plug-in. One reliable and easy-to-use plug-in for this purpose is Net Video Hunter.

 

 

Arrow up to top of page

JavaScript and Related Technologies

 

JavaScript

 

JavaScript is a scripting language (similar to a programming language) that was invented for one purpose: to manipulate the HTML and CSS as displayed by the Web browser.

 

When a browser loads a Web page that it receives from the Web server, it loads all of the HTML, CSS and JavaScript (the major three client-side languages). The browser first takes the HTML and CSS and builds the Web page. How the browser stores the Web page into its memory is as an internal model which is based on the HTML Document Object Model (DOM). In other words, the browser perceives the Web page as a static object or model that will not change -- the elements (divs, the content, even the style) are unchanging. HTML and CSS are always loaded first and at that point, will never change in appearance to the browser. This is important to consider: the browser perceives the HTML and CSS as they are, and the divs, content, and style are always that way. As part of the browser's understanding of DOM is the version of HTML and the type of tags the browser can utilize. In other words, older browsers don't know the newer HTML5 tags, so they can't fit these tags into the model, therefore they won't be able to display these elements.

 

JavaScript was invented to function after the browser loads the HTML and CSS into the browser's idea of how the page should be (its object model). JavaScript can manipulate that model -- the DOM -- after the fact. In other words, after the HTML and CSS have loaded in the browser, JavaScript can change them. It can change the size, shape, appearance or existence of divs, images and style. It can be set up to do this automatically (a rotating image slideshow), or based on user interaction (form field validation), or in other ways. JavaScript can provide interesting div and image effects on your pages that entertain or capture the attention of users and provide interesting and appealing ways of getting users to interact with your Web pages. Interactivity is a key purpose for using JavaScript.

 

To manipulate elements (divs, images, etc.) those elements must have ID's or classes -- the same way that you created them in the HTML for the CSS, as attributes like id="whatever" or class="whatever". ID is more common because JavaScript can usually only target one element based on its name (ID). This original purpose for the ID (as a target for JavaScript) was actually why the ID attribute first came about, but was co-opted for CSS because of its relevance in the Web page document.

 

In fact, JavaScript is the only thing that can change them client-side. Server-side scripts can manipulate the DOM, too, but often aren't used for that purpose. Flash animation often provides user interactivity, but requires a separate plug-in player and is not done by the browser itself.

 

JavaScript functionality is built into all major browsers (Firefox, Chrome, IE, Opera, Safari, etc.) and will function unless that feature is disabled, which is usually an option in most browsers. The problem is, it can be disabled, so those people who have chosen to disable their JavaScript functionality (about 10% of Web users do this), will not be able to see or use your JavaScript features. This may mean they don't see an image rotation slideshow or they may be able to by-pass your form validation. It's important to keep this in mind when utilizing JavaScript and it's really a good idea to use it in a way that may be important but that is optional for your page users.

 

Remember, JavaScript is client-side. Once the server serves the JavaScript to your computer, then your computer does the actual running of the JavaScript script and performs its commands in order from top to bottom in the script code. In other words, your computer (i.e., the client computer) does the heavy lifting and follows the script's commands, not the server computer. In this way, there are safety concerns with JavaScript, because, if it contains harmful commands (i.e., a virus), it would directly affect your computer, not the server computer.

 

JavaScript can be placed directly into HTML code inside a script tag, much the same way that CSS can be embedded on the page in a style tag. The script tag identifies to the browser that what's inside it is JavaScript and not HTML. JavaScript can also exist in a separate file (with a .js extension) that's connected to the HTML page by use of the src attribute inside a script tag, much the same way that an img tag uses the src attribute to pull an image into the page. Often, JavaScript used on a Web page is in both a script tag AND connected with that script tag or a separate one with the src attribute.

 

Here's an example of embedded JavaScript with the script contained in a script tag:

 

<script type="text/javascript">
    $(function() {
      $('#slideshow').cycle({
      fx: 'shuffle',
      easing: 'easeOutBack',
      delay: -3000,
      pager: '#pager',
      slideExpr: 'img',
      });
    });
</script>

 

Here's an example of linked JavaScript (the file name is jquery.cycle.all.js) using the src attribute:

 

<script type="text/javascript" src="assets/jquery.cycle.all.js"></script>

 

The script tag is usually contained in the head tag area of the Web page, but not always.

 

To learn more about the history of JavaScript click here.

 

To learn how to use Javascript try one of the useful links below:

 

There are many other websites that contain useful information about JavaScript and even free JavaScript code that you can copy and paste into your own website. Listed below are just a few of these:

 

Instructor Note
It should be noted that it's not usually illegal to take JavaScript from another page and use it in yours. JavaScript is trademarked by Oracle Corporation, but they allow anybody to use it royalty-free as long as people don't charge for the script. JavaScript programmers can charge for their time, but they can't sell their scripts unless they plan to give Oracle a share of their income from the script. Also, it would be very difficult to make JavaScript inaccessible to copying because it is client-side -- it is loaded directly onto the user's computer and the code can be accessed and viewed by anyone.

This brings up a point though: can these scripts be copyrighted? Yes and no. Because JavaScript scripts are so widely used on the Internet, they have likely been repeated or copied from one to another for years. Honestly, how many ways in JavaScript can you create an image slideshow and could you tell one programmer's code from another if they were similar? But, some JavaScript developers have tried to copyright their script and include comments in their script stating this. Their argument is that their script was so complicated to make, that they should be able to copyright it and nobody should be able to "code lift" it. To date, there have been no recorded legal actions arising from one Web designer taking JavaScript from another and using it on their own site, although it's possible that there have been "cease and desist" notices given to designers if they've been discovered.

The issue of copyright, or copyright-ability, boils down to this: if the code is complex enough to be able to determine it came from a specific developer, then it MAY be protected by copyright laws. If it's a widely used variation of JavaScript, like an image slideshow, form validation, etc., then it's not protected by copyright laws. This distinction between what are complex (non-trivial) and what are simple (trivial) uses of JavaScript has been addressed by the GNU Project, a think-tank of Web developers who are advocates of open-source, free software and sharing on the Web. This GNU article: The JavaScript Trap delves into the issue of JavaScript and copyright protection in more detail.

 

 

jQuery

 

jQuery is an open-source, online JavaScript library designed to simplify the use of JavaScript scripting across multiple browsers. Since it was established in 2006, the use of jQuery implementations has proliferated and many non-programmers have benefitted from the free and easy-to-use jQuery JavaScript on the Web. Code lifting, or taking these jQuery snippets off Web pages and putting them on your own is encouraged and widely utilized. To activate the functionality of the jQuery library features on a Web page, you must first src to one of the jQuery libraries housed on a public server. Both Google and Microsoft maintain copies of the jQuery library file.

 

Here is an example of a link to a Google jQuery library:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

 

 

For more information about jQuery, check out these links:

 

 

Behaviors

 

Dreamweaver refers to its pre-built JavaScript that you can plug into your Web page as behaviors.

 

To use these behaviors, you'll primarily be working with the Behaviors Tab under the Tag Inspector Panel. Image rollovers also create pre-built JavaScript in the HTML when they are inserted.

 

AJAX

 

AJAX, like DHTML is not a single technology, but a combination of Web technologies that enhance the dynamic (interactive) experience of Web browsing.

 

AJAX stands for Asynchonous JavaScript and XML. By using a combination of JavaScript (or other client-side scripting languages), XML (or other server-side scripting files that incorporate ASP or PHP), and an advancement in the way data can be passed between the client-side script (on the Web page) and the server-side script (on the server). The advancement is the asynchronous part of AJAX. The term asynchronous means that this data passing back and forth between the viewer's Web page and the data on the server does not have to happen at the same time, so if the server happens to be slow, the viewer can still move around on the Web page without delay.

 

To simplify this definition, it's important to understand the differences between a viewer's experience with DHTML, then with AJAX. Both DHTML and AJAX are dynamic (interactive). Consider using a form online that asks a viewer to submit their contact information to a company, then after they submit it, the company thanks them for their interest.

 

Prior to AJAX, if you were to click to send this kind of form with conventional DHTML, you would have to wait until the form was processed by the server before you received a message back from the server like "thank you for your interest!" If the server was slow, the page would likely lock the browser until processing was finished.

 

In that example, we are only dealing with very basic data, and speed is not really a big requirement; after all, you probably don't want people to surf away so quickly from your site anyway! We will be doing a form like this in class and you'll be able to experience this dynamic processing yourself. In most cases, DHTML is all you need because speed is not a factor.

 

But now consider this: what if you continuously wanted to process data back and forth from a server very quickly? Bear in mind that in DHTML, not only is it synchronous (the browser sends to the server, then the server sends to the browser, and the process repeats), but it also requires that the Web page reload in the browser to receive new data from the server. A reload will cause the screen to blink for a moment while the page loads again in the browser window.

 

Google Maps is one of the best examples of what a disaster this would be. Click the link and go to that Google Maps page. Notice that sitting in that iframe is the map and you can click and zoom around it, literally dragging the map around. If every time you clicked to zoom in, the entire page had to reload, that would make for a highly annoying experience.

 

This is the beauty of AJAX which Google Maps relies on. AJAX allows you to provide data to only one part of the page, with limited or no requirement to reload the entire page content. If you move the map around quickly enough, you'll see it redrawn content within that iframe, but the rest of the page is not affected. Also, the data that it's loading is from an XML text file, so it loads incredibly quick.

 

To learn more about AJAX, you can read the article on W3 Schools: AJAX Tutorial.

 

Check out the AjaxDaddy site for more examples of AJAX and also the code you can lift to use in your own Web pages. Also, take a look at the slide show viewer example for a non-Flash method of enhancing the interactivity of your images.

 

 

 

Arrow up to top of page

Server-Side Scripts

Server-side scripts or scripting languages are scripts that are contained in files that will execute (run) on the server and affect the behavior of the server, as opposed to client-side scripting languages like Javascript that are executed by your browser and run on your personal computer. After the server-side script file does what it needs to on the server, it sends the results back to the client-side (the Web page you are viewing in your browser).

 

Server-side scripts cause the server to spend more time dealing with their file activity, however because the scripts are executed on the server, the browser that displays the file does not need to support scripting at all. Also, because the files exist on the server and may not be directly accessible from your browser, they are more secure and can be protected from unauthorized access more easily.

 

The W3Schools.com site has this to say about Server-Side Scripts:

 

What can Server Scripts Do?

 

  • Dynamically edit, change or add any content to a Web page
  • Respond to user queries or data submitted from HTML forms
  • Access any data or databases and return the results to a browser
  • Customize a Web page to make it more useful for individual users
  • Provide security since your server code cannot be viewed from a browser

 

You can read the complete article and learn more about server-side scripts in the W3Schools article: Web Scripting.

 

The two most popular server-side scripting languages are PHP (open source) and ASP or ASP.Net (Microsoft). There are many others as demonstrated in this Web Platforms information table.

 

ASP

ASP or Active Server Pages is Microsoft's version of a server-side scripting language. You can identify ASP by the following major distictions:

  • when you can see the file names in your Web browser, ASP pages have file extensions .asp or .aspx
  • the ASP family of scripting languages is most often associated with Microsoft IIS Web Server Software and the Microsoft Windows Operating System.
  • you will see the following tags <% and %> surrounding an ASP expression, as in the following example:

    <% Response.Write "Hello World!" %>

 

PHP

PHP or PHP Hypertext Preprocessor (yes, odd that the first P stands for PHP) is an open source (free to use by anyone) server-side scripting language. You can identify PHP by the following major distinctions:

  • when you can see the file names in your Web browser, PHP pages have file extensions of .php
  • the PHP scripting language is most often associated with Apache Server Software and the Linux Operating System (since these are open source as well), but it can work on the Microsoft Windows Operating System in addition to others.
  • you will see the following tags <?php and ?> surrounding a PHP expression, as in the following example:

    <?php echo '<p>Hello World!</p>'; ?>

 

CFML

Currently an Adobe product, ColdFusion's related CFML or ColdFusion Markup Language is a server-side scripting language that you can identify by the following major distinctions:

 

  • when you can see the file names in your Web browser, CFML pages have file extensions of .cfm
  • CFML requires that the ColdFusion Server Software is installed on any number of different operating systems.
  • you will see tags that appear like HTML tags, but that include names beginning with a cf, as in the following example:

<cfset msg = "Hello World!" />
<cfoutput>#msg#</cfoutput> 

 

Use of Server-Side Scripts

You will often use a server-side script file in conjunction with a Web page HTML form. The form can send data to the server-side script file, which then processes the data to send it along to a database, back to another Web page, or out to an e-mail address.

 

 

PCC offers more in-depth courses in the use of PHP. Check the current class schedule and catalog for the most recent information.

 

 

Arrow up to top of page

Making Forms Work

To make forms work, you must have three things:

 

  • An HTML file that includes the form.
  • The PHP or other server-side script that processes the form data (this can be in a separate file or the script can be included in the HTML file).
  • A Web server that can work with your server-side script.

 

Instructor Note
The Student Web Server (SWS) at PCC is a Microsoft Windows server and can only process ASP server-side scripts, not PHP. On top of that, some of the functionality of this server has been deactivated so the scripts can't do certain things. One of the things you can't do is send email messages from the server with an ASP script. This makes it impossible to set up a contact form that sends an email message that includes the submitted data, which is usually the major activity you want a server-side script to do.

Technically speaking, the SWS doesn't have the SMTP (Simple Mail Transfer Protocol) set up, so making forms e-mail from the server doesn't work. Note that if you have your own server, SMTP must be active to make contact forms that send email messages. Free Web hosts often disable this function as well so they don't become the site of an email spammer (this is why PCC has disabled it, too). When obtaining a server host, you may want to ask them if that feature is active since it's the most likely one you'll want to use on your site if you plan to use a contact form. That feature is currently active on the webhostingforstudents.com server.

 

For most contact forms, you'll have a separate PHP file that will process your contact data. It's easier to keep the HTML and PHP in separate files so you don't get confused by the coding mix.

 

Always keep in mind, you have to work with two files: Web page file that houses the form and the server-side script file that processes the submitted form data. The browser handles the Web page form and how it captures data (client-side) and the server-side script receives the data and sends it along from the server (server-side).

 

There are two important attributes used with the HTML form tag that you need to work with, method and action:

 

  1. The method attribute can have the values "GET" or "POST". Get and post are very similar in that they both can receive data from a browser form and send that data to a server-side script and then retrieve more data back again. The major difference is how they handle that data. Get includes that data in the browser address bar, and thus in the browser history as it sends it. Post does not include the form data in the browser address bar and history. Normally, you don't want to have form data included in the browser history -- imagine if that form data included your credit card number or your social security number and you were on a public computer! This is the reason W3C recommends only using post as your method. Google uses get as their method for their search engine form. They do this for two reasons: they do want you to be able to find a search later in your browser history and because it's easier to share the search with someone if the search terms are included in the browser address bar (basically, you can make a search, then copy the address, and send it to whoever you want to send it to). For search engines, the get method is acceptable, but for all other purposes, the post method is preferred.

  2. The action attribute should include the name of the server-side script file. To make forms work, you have to reference the server-side script file in the action value -- be sure to include the location location if the server-side script file is not in the same folder as the Web page the form is on. The form on the Web page will send the data entered and submitted to the server-side script file for processing. This is why you should name the file form_processor.php or something that describes the action it's performing. It's also useful to name your server-side script file something close to the name of the HTML page the form is on, so when you look for it, it's alphabetized next to the other one. So, if your file name is contact.html, then call your PHP file contact_process.php or something like that.

 

Consider this form example with PHP processing file. Remember, you are working with two files: the HTML form and the PHP script file that processes the submitted form data.

 

Here's the HTML of that form page, form_example.html above. Feel free to copy this into an HTML color-coded Code view to examine it in Dreamweaver. Of particular importance are the method and action attributes in the form tag.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Form Example</title>

</head>

<body>

<h1>Form Example</h1>

<form name="example" method="post" action="form_processor.php">

Type your<br />

First Name:<input type="text" name="fname" size="15" /><br />

Last Name:<input type="text" name="lname" size="20" /><br />

<input type="submit" value="Submit">

</form>

<p>If you click the "Submit" button, you will send your input to a new page called form_processor.php</p>

</body>

</html>

 

Here's the PHP file, form_processor.php, that is referred to in the action attribute in the form tag above. Feel free to copy this into an HTML color-coded Code view to examine it in Dreamweaver. Note that the PHP script is placed directly into the HTML framework of this page, which is actually not required, but makes it easier to work with in Dreamweaver. Also, note that in Code view, PHP script is color-coded red. Even though the file has a .php extension, it is still dealt with like a Web page by the Web browser thanks to the doctype declaration XHTML.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Processed Response</title>
</head>

<body>
<h1>Form Processed Response</h1>

<p>Hello <?php echo $_POST["fname"]; echo " "; echo $_POST["lname"]; ?>!</p>

<p>You wonderful person, you!</p>

</body>
</html>

 

Instructor Note
Remember, even though Dreamweaver can handle copying and editing the PHP code, you can't preview or test it in Dreamweaver. PHP, as with all server-side scripts, must be uploaded to a server that allows that script to function properly -- yes, that's why they are called server-side! Netfirms.com, which is the server host for the example used above, allows PHP script. Most server hosts, such as BlueHost.com, HostGator.com, GoDaddy.com, and many others work with PHP scripts.

 

This is a very basic use of a form to send data to a server-side script file for processing.

 

A better and more useful example is in the CAS 222 Nifty Project 2. In that assignment, you create a contact form to capture and send data from a form to the server-side script and from there it will process the data and email it to a pre-established email address. Because the pre-established email address is in the .php file, it cannot be accessed by the client-side browser, so that email address will remain confidential.

 

There are many online resources to generate form HTML and the related server-side script processing files. Check out the following address for a simple form generator that automatically generates PHP server-side script code and the form HTML for the purpose of sending data by e-mail from the form:

 

AddressMunger: Contact Form Generator

 

For WordPress:

 

Contract Form 7

 

 

Arrow up to top of page

XML

 

Intro to XML

 

XML is a data storage markup language, as opposed to HTML, which is a Web page creation markup language. XML is basically a text-based database.

 

The reason why XML is relevant to understand is that it is a generic, unformatted text database. In other words, it's a file type that can be imported into various spreadsheet and database management programs, such as Microsoft Excel or Access, or exported from those and imported into other databases such as MySQL or Oracle with little conversion necessary. Unfortunately, the proprietary formats of Microsoft files, such as .xlsx and .accdb, cannot be directly pulled into Oracle databases without some kind of conversion, nor can their data be pulled into an HTML Web page easily. Most spreadsheet and database management programs allow you to save (or export) into an XML format (.xml file extension) that can be easily brought into most any programs and pulled into Web pages quickly.

 

In Dreamweaver, the process of pulling XML data into a Web page is known as binding, and it can be done with Spry features. An assignment in CAS 222 provides a useful example of how you can use an XML file.

 

About XML

 

By itself, XML is just a text document that, if properly typed, contains text data that can be read and understood based on the relationship between the tag names and the data contained within the tags.

 

This article from Developer's Tutorial has a useful overview of XML:

 

eXtensible Markup Language or XML as its commonly called is primarily used to facilitate the interchage of information between environments that are not compatible natively (that is, they don’t support each other’s default file format). An example here would be a database server that doesn’t import Access files and has its own propriety data format.

 

The key word in XML is extensible. This means that the structure of the file is left entirely up to the creator. There are simply a few rules that you must follow to create XML (one such rule being that there can be only one root element). Other than that, the end user has free reign as to the tags that he may use, attributes, etc.

 

One more thing about XML that we must understand is that there is no tag set for XML. Like HTML, which has a set of tags (<p>, etc.), XML has no pre-set tags. It is up to the end user to define tags for a file. In XML, a tag can be almost anything:

 

XML:
1. <jim>info about jim</jim>
2. <address type="home">555 Main Street</address>

 

In XML, an element is an open and close tag group including its text, like <jim>text here</jim>. An element is also referred to as a node.

 

A few more rules about XML and we will be on our way to our PHP code. XML documents must be well-formed. This means that there can be only one root element (the top most element), all child elements must be nested properly, and all elements must have end tags.

 

This is proper nesting: <p>foo<b>bar</b></p>

 

This is not proper nesting: <p>foo<b>bar</p></b>

 

Once these simple rules are understood, we can start creating a XML document that a XML parser will understand.

 

You can find more related information here:

http://www.developertutorials.com/tutorials/php/parsing-xml-using-php4-050816/page2.html

 

Also, consider this more in-depth article excerpt from IBM:

 

XML fundamentals

Some background about XML will allow you to understand its importance to the PHP developer and allow you to understand and create straightforward XML documents.

 

About XML

Extensible Markup Language (XML) is described as both a markup language and a text based data storage format, depending on who you talk to. It is a subset of Standard Generalized Markup Language (SGML); it offers a text-based means to apply and describe a tree-based structure to information. XML serves as the basis for a number of languages/formats, such as Really Simple Syndication (RSS), Mozilla's XML User Interface Language (XUL), Macromedia's Maximum eXperience Markup Language (MXML), Microsoft's eXtensible Application Markup Language (XAML), and the open source Java XML UI Markup Language (XAMJ). As the many flavors of XML demonstrate, XML is a big deal. Everyone wants to get on the XML bandwagon.

 

Writing XML

XML's basic unit of data is the element. Elements are delimited by a start tag, such as <book>, and an end tag, such as </book>. If you have a start tag, you must have an end tag. If you fail to include an end tag for each start tag, your XML document is not well-formed, and parsers will not parse the document properly. Tags are usually named to reflect the type of content contained in the element. You would expect an element named book to contain a book title, such as Great American Novel (see Listing 1). The content between the tags, including the white spaces, is referred to as character data.

 

Listing 1. A sample XML document

<books>
  <book>
   <title>Great American Novel</title>
   <characters>
    <character>
     <name>Cliff</name>
     <desc>really great guy</desc>
    </character>
    <character>
     <name>Lovely Woman</name>
     <desc>matchless beauty</desc>
    </character>
    <character>
     <name>Loyal Dog</name>
     <desc>sleepy</desc>
    </character>
   </characters>
   <plot>
    Cliff meets Lovely Woman.  Loyal Dog sleeps, but wakes up to bark
    at mailman.
   </plot>
   <success type="bestseller">4</success>
   <success type="bookclubs">9</success>
   </book>
  </books>

 

XML element and attribute names can consist of the upper case alphabet A-Z, the lower case alphabet a-z, digits 0-9, certain special and non-English characters, and three punctuation marks, the hyphen, the underscore, and the period. Other punctuation marks are not allowed in names.

 

XML is case sensitive. In this example, <Book> and <book> describe two different elements. Either is an acceptable element name. It's probably not a good idea to use <Book> and <book> to describe two different elements, as the possibility of clerical error seems high.

 

Each XML document contains one and only one root element. The root element is the only element in an XML document that does not have a parent. In the example above, the root element is <books>. Most XML documents contain parent and child elements. The <books> element has one child, <book>. The <book> element has four children, <title>, <characters>, <plot>, and <success>. The <characters> element has three child elements, each of which is a <character> element. Each <character> element has two child elements, <name> and <desc>.

 

In addition to the nesting of elements that create the parent-child relationships, XML elements can also have attributes. Attributes are name-value pairs attached to an element's start tag. Names are separated from values by an equal sign, =. Values are enclosed by single or double quotation marks. In Listing 1 above, the <success> element possesses two attributes, "bestseller" and "bookclubs". There are different schools of thought among XML developers about the use of attributes. Most information contained in an attribute could be contained in a child element. Some developers insist that attribute information should be metadata, namely information about the data, and not the data itself. The data itself should be contained in elements. The choice of whether to use attributes or not really depends on the nature of the data and how data will be extracted from the XML.

 

Strengths of XML

One of XML's good qualities is its relative simplicity. You can write XML with basic text editors and word processors, no special tools or software required. The basic syntax for XML consists of nested elements, some of which have attributes and content. An element usually consists of two tags, a start tag and an end tag, each of which is bracketed by an open <tag >and a close < /tag >. XML is case sensitive and does not ignore white space. It looks a lot like HTML, which is familiar to a lot of people, but, unlike HTML, it allows you to name your tags to best describe your data. Some of XML's advantages are its self-documenting, human, and machine-readable format, its support for Unicode, which allows for internationalization in human language support, and its stringent syntax and parsing requirements. Unfortunately, UTF-8 is problematic in PHP5; this shortcoming is one of the forces driving the development of PHP6.

 

Weaknesses of XML

XML is wordy and redundant, with the attendant consequences of being large to store and a huge consumer of bandwidth. People are supposed to be able to read it, but it's hard to imagine a human trying to read an XML file with 7 million nodes. The most basic parser functionality doesn't support a wide array of data types; therefore, irregular or unusual data, which is common, is a primary source of difficulty.

 

Well-Formed XML

An XML document is well-formed if it follows all of XML's syntax rules. If a document is not well-formed, it is not XML, in a technical sense. An HTML tag such as <br> is unacceptable in XML; the tag should be written <br /> to be well-formed XML. A parser won't parse XML properly if it is not well-formed. Additionally, an XML document must have one and only one root element. Think of the one root element as being like an endless file cabinet. You have one file cabinet, but there are few limits as to what and how much you can fit into the file cabinet. There are endless drawers and folders into which you can stuff information.

 

You can read the complete article here: XML for PHP developers

 

Uses for XML

 

You can connect or pull XML data into a Web page. The easiest way to do that is to utilize the Spry XML Binding feature in Dreamweaver (described in Calisthenics 6) to make that connection. Then, by only updating the XML document, you can update the data on the HTML page.

 

This sample Web page utilizes XML bound to the page with the Spry XML Binding feature in Dreamweaver. In this case, it's a picture gallery.

 

This sample XML document in the CAS 222 Course Files, XML Examples folder is the foundation of the content of this Web page. (Note: you can use Firefox or IE browsers to test your XML file to ensure it is well-formed.)

 

Notice that the layout of the tags follows the data storage hierarchy. In other words, it has the same layout as a database: table, record, fields. Tables contain records, and records contain fields.

 

So, the structure of all XML documents follows this hierarchy:

 

  1. The root element (the first tag that contains all the other tags) is equivalent to the table in a database. In the sample document, the table name is "gallery" so that is the root element tag name.
  2. The recurring element (the second tag that follows the root element) is equivalent to the record in a database. In the sample document, the gallery contains images. Images are the records of a gallery table, so each recurring element tag is an individual image record, so it makes sense to name it "image".
  3. The tags nested within each recurring element are equivalent to the fields in a database. Field elements, also referred to as nodes, always repeat in that order within each recurring element. In the sample document, the fields are "name", "image_source", "description" and "subjects". These describe information about each of the images in this gallery.

 

It's also important to note how each of the XML fields works in this HTML page in the sample documents:

 

  • Notice that "name" is used to construct the clickable words in the table on the right hand side of the Web page. These are used to select the images and related data that they connect to.
  • You may also notice that "image_source" is pulled into the src attribute of the img tag in the HTML. It is very easy to use relative or absolute paths within the XML field tags, and pull these into the HTML as hyperlinks, sources for images, links to CSS files, etc.
  • The "description" field is pulled into a p tag and placed below the img tag in the HTML. It's the caption for the image.
  • You can also include HTML in your XML document. Notice that "subjects" contains ul and li tags. To make this work with XML properly, the HTML tags should be placed within a CDATA notation. You can learn more about CDATA from this Wikipedia article. View the sample XML document in Dreamweaver to see the CDATA usage.

 

Consider the power and value of XML:

 

  • You create and name the tags in XML, which will help you remember which one describes which set of data you are working with. Be sure to plan ahead so you have one root element (the table), a well-named recurring element (each record), and all the field elements you need within the recurring element.
  • You are working with text data only and this can be easily edited in a text editor or Dreamweaver Code view.
  • You can copy and paste one recurring element, change the data within the field elements, and you have a new record that pulls into your Web page.
  • By just cutting and pasting the recurring elements into different orders in the XML, you change their display order in the HTML.

 

 

Arrow up to top of page

Internal Site Search

Internal search engines, or local search engines, are very important for most websites, and are vital for really big websites. If you've ever gone to a large commerce site like Amazon.com, the first place you usually go is to the search feature.

 

Internal search engines are valuable in two very important ways:

 

  1. Most obviously, they provide your visitors with an efficient way to find content on your site.
  2. They allow you to understand visitor intent, in other words, what the visitors want on your site by allowing you to track what types of topics visitors are searching for. You can use analytics programs (like Google Analytics) to track what words visitors are typing in your search engine. This, in turn, allows you to customize your pages to accommodate the most common search phrases.

 

The best internal search engines are ones you create and maintain. To do this properly, you would build a database using MySQL or some other database management system or create an XML reference file, and place in it a list of all the key search terms and a the pages they are located on. The best way to think of this is like an index in a book, but one that can be searched by typing in the topic. Your visitors type in the term or phrase, and the page or a link to the page is returned which includes the relevant topic(s). In many ways, this is like having a built-in Google search, but only for the Web pages on your site. In fact, the internal search we'll be using for Project 3 is from JavaScriptKit and it's a modified Google search that targets only your URL.

 

There are many other varieties of internal search engines out there. Some are JavaScript, but the better ones operate on the server-side using PHP, ASP, ColdFusion or some other server-side scripting language in combination with XML, MySQL, etc. Some are fairly complex to set up; others are ready-made programs that construct the script themselves. Some are free, but the better ones you have to pay for to set up your site search. The free Google one is great, but only if you have your Web pages in the Google database (or can wait a few days or weeks until they get into the Google database after you set it up).

 

Adding Internal Search

For more information, do a search on internal search engines to find out what your many options are.

 

Here is a JavaScript internal search option that utilizes the Google search engine:

 

  1. Open the page you want to put the search feature on.
  2. Create a div, preferably one you ID as "search".
  3. Copy and paste this JavaScript and form code (it's in a text file for convenient viewing) into the div#search in your page's HTML code. Note that this is a JavaScript-based search feature that references the Google search engine. It's clever and convenient but no substitute for your own server-side site search engine (say that three times fast!).
  4. Change the target domain to match yours by editing this code.

 

For the purposes of a small site that is well-indexed on Google, this Javascript will do the trick.

 

HTML5 Search Field Addition

 

The following steps will add additions to the search field that will only work in the latest browsers that support HTML5 specifications.

 

  1. In div#search in the input tag "qfront", include the placeholder attribute with a value of "Type your search here". Bear in mind, this placeholder text will only appear in the field in browsers that support it.
  2. Change the type="text" in "qfront" to type="search". This will give the search box rounded corners and an "x" in the field as you start typing in some browsers. The "x" allows you to click and clear the field.

    Instructor Note
    Some browsers, like Safari, control the style of input fields. To override this browser control, add this to your CSS for the search field (note that this is a tag selector):

    input[type="search"] { -webkit-appearance: textfield; }

  3. Save and close the page.

 

 

Arrow up to top of page

Find and Replace

Dreamweaver's Find and Replace feature is extremely powerful and can be used site-wide. In other words, you can find an element on a page and replace it with another and have it work for all pages on your site at once as long as what you are looking for exists on those pages.

 

Find and Replace will work with both Text content on the page and Source Code. For example, if you want to add a new script tag to every page on the site, go to Edit > Find and Replace..., then

 

  1. Choose Entire Site
  2. Choose Source Code
  3. In the find box, type the close of the head tag:

 

  • </head>

 

  1. In the replace box, type the new tag(s) followed by the close of the head tag: (This is an example for a script tag)

 

  • <script type="text/javascript" src="whatever.js"></script>
  • </head>

 

  1. Replace All

 

This will add that script to every head tag in your entire site.

 

Another use would be to update content, such as the copyright date on every page of the site. You could find the old year and replace it with the new year.

 

Find and Replace can be used with any code on any part of any page, so long as what you are finding exists on the page. The head and body tags will always exist in the code, so you can always find and replace something into those.

 

You'll find this to be a powerful and invaluable feature when working with large sites.

 

Arrow up to top of page

Photos and Photo Manipulation

Free Photos

Here are some sources for public domain and royalty-free photos:

 

Free public domain and royalty-free photos

 

Purchase royalty-free

 

 

General Info About Images

 

Does image PPI or DPI matter on the web? No!

 

 

Sliders

 

Pure CSS

 

JavaScript

 

WordPress Sliders

 

 

Rollovers & Rotators

 

CSS Disjointed Text/Image Rollover

It may seem amazing, but it doesn't require fancy scripting or flash to make a nice looking photo gallery. These can be done with CSS only.

 

For pure CSS image rollovers, also consider these examples in the course files.

 

JavaScript-based Image Rotators

For image rotation or randomization, JavaScript is the primary tool employed. This JavaScript image rotator that fades images and is very customizable.

 

This one is also used on the home page of this class site in the student examples section.

 

These are two examples of disjointed rollovers using JavaScript. These were done using the JavaScript swap image behavior from Dreamweaver.

 

The more easy-to-use example in the course files that was also used in an old version of the Nifty project is another good JavaScript choice.

 

 

Galleries

 

HTML Iframe Gallery

This may seem like old-school, and it is in many ways, but this may be what you are looking for in a straight-forward photo gallery. This example in the course files uses HTML only and employs the iframe concept seen in Calisthenics 3.

 

JavaScript/jQuery

Another commonly used JavaScript image gallery, Lightbox (or the newer, more enhanced Slimbox), also reside in the course files.

 

AJAX Gallery

A combination of JavaScript and XML, this one employs the XML binding process described in CAS 222.

 

Flash-based Picture Gallery

This is a free, Flash-based gallery. It's a bit more complicated to set up, but it looks great.

 

 

Arrow up to top of page

Site Testing and Tools

The following are a few interesting Web pages and articles that may help you when creating your website.

 

Minutes from the PCC Advisory Committee Meeting in 2014 (includes recommended links to important and influential websites that discuss Web Design and Development)

 

General Info about Browsers, Platform and Screen Resolutions

 

HTML Validation

 

Mobile Check

 

CSS Validation

 

Accessibilty

 

Track Statistics

 

Allowed Technology Support by Browsers

 

Responsiveness of Websites

 

 

 

Helpful Links

 

Lynda.Com Videos

If you have a Multnomah County Library card, you can get free access to Lynda.com courses. Just enter your library card number and PIN to log in. Use this link:

Lynda.Com via Multnomah County Library: https://www.lynda.com/portal/patron?org=multcolib.org

 

HTML5 and CSS

 

HTML5 Responsive Templates

 

CSS Selectors

 

JavaScript

 

Social Media Meta Tags

 

Favicons

 

Color Scheme Helper

 

Ecommerce Tools

 

Pure CSS Navigational Bars

 

Pulldown Menus in CSS Navigational Bars

You will need to download the project files linked on this page because the instructions are included in those:

 

AJAX Live Search Feature

This is a build-your-own local search engine that does a live search (i.e., shows you search results as you type them in the box). The search is based on the contents of the XML file.

 

Web Advisory Committee Recommended Sites

 

Q: Where do you post jobs (or where would you look for jobs)?
A: Some of the answers were:

 

The members of the Advisory Committee also recommended sites they frequently use to keep informed on the latest trends and what’s happening in their industry and for inspiration:

 

Dan Blaisdell (Manifest Web Design)

 

Rocco Charamella (Amalgamotion)

 

Zach Hoffman (Phoogoo)

 

Paul Irving (Insite Web Publishing)

 

Steve Potestio (Mathys + Potestio Creative Staffing)

 

Brittany Scott (Navex Global)

 

Kris Travis (Firesign Designs)

 

Tiffany Wheeler (Moda Health)

 

Arrow up to top of page