Web Page Creation and Design
Answers that will help you create a web page.
What is a Web Page? What is a Web Site?
A Web page is a document written for the Internet. A Web site is the collection of the text information, graphics, sounds and animations used to create the web pages.
Why do we need a Web site for Chipola?
As an institution, our job is to recruit and inform students. Not only the ones in our area. We want to be able to make it easier on the students and parents to find information about us. People are looking at what we do and this is a way to show that we care.
What kind of information do we need to have in the site?
All kinds, from How to Apply for Admissions to Who are the new Cheerleaders. Parents want to know how their kids are doing in sports and students want to be find their assignments if they missed a class. Also staff needs to be able to find out about job vacancies and to be able to put a face on the name of a new employee. The more we have the more complete the site will be.
Who is responsible for getting the information?
We are all responsible. Every department should take responsibility for what is going on in the department. Each faculty member should be responsible for his/her site. Each club should have somebody in charge of gathering the information. If you think it is important, write about it and get it posted.
Who has authorization to update the pages?
Security levels are assigned based on the area each person is working on. For instance, if you are working on the English pages, you may not have authorization to update the baseball pages. All staff has authorization to add information, but there are restrictions on where pages can be changed or deleted.
How can I find things in the web site? What is the Site Map?
If a link is not obvious in the main page, you can either go to the Department page and follow the links there, or you can go to the Site Map. The Site Map is a collection of key words that are designed to make things easier to find. As you create, update and add things to your pages, you need to request that the Site Map be updated.
Why can't we use FrontPage anymore?
Because it has been replaced and no new updates are available from Microsoft. But we do have the FrontPage Extension still installed on the server.
Why do we use Expression Web 3?
Because it is easy to use, it automates many tasks, it keeps the directory structure intact, and you don't have to know HTML (hypertext markup language) to create a web page. Besides, it comes with the Office Suite that the college has licenses for, so we do not have to buy a new software.
We are currently using version 3; if you have any other version on your computer please contact the helpdesk to get version 3 installed.
Can I use another software to create my pages?
Yes, but make sure it keeps the path to files intact, or the directory structure will not do you any good. For example, you can create a page with Word, but it will not recognize the path if you have pictures in another directory; it wants to put all the information in one directory making things hard to manage.
Why is consistency so important?
Because it is distracting and unprofessional to see too many different style pages within the same site. This does not means that everything has to be exactly the same, but that the backgrounds and colors relate to one another.
If I want to write a page, how do I get started?
First, you need to gather the information you want to present. You need to decide if you want images, what the context will be, who are you targeting this information to. Prepare a quick sketch on paper to get an idea of how you are going to lay the information. When you think you are ready, start Expression Web 3, and click on File/New Page. *** If this is your first time using Expression Web 3, you need to open the wwwroot on the chipola3 (the W: drive) if you are creating a page for the College.
You will need to have a directory created for you if it is your page; after that, you can copy an existing page and rename the new page with the new information, just remember to change the page properties.
Can I use a document that I already have in Word or WordPerfect, or do I have to retype it?
Yes, you can copy and paste part of the documents or insert the whole document into your web page. You may have to do some clean up, but at least you will not have to retype it.
If you want to post it as a Word document, you need to remember is the person trying to link to the document will be asked a question whether to open the file or save it (do not worry, the file can not be replaced on the Internet, if a person chooses to save it, it will be on their computer). If the person trying to open the file does not have the software to open it, s/he will not be able to see the content. Also if the Word document has links on it that are not absolute links, they wont work with all browsers.
How do I format my document?
You use the standard toolbars just like you do in Word to indent, boldface, change fonts, italics, etc.
(click on picture to enlarge)
When I type, and press enter, Expression Web 3 double spaces my document. How can I get it to single space?
To single space, press the keys SHIFT ENTER at the same time.
Why do I need to worry about the size of my page?
If the page is too large, or if it has too many images, it will take too long to load. Users do not want to wait for a page to load, nor want to read large amounts of text. Sometimes the page is nothing but images, and if the user knows that, s/he may wait, but make sure it is worth the wait. Remember that some users may be using modems to travel the web.
Why does my page looks larger on some computers and smaller in others?
It depends on the resolution each person has set on the computer. Some have large fonts, others small fonts. Some people have 800x600 screen resolution and others 1024x768, you will not be able to get them all the same, but you can look for ways your page looks good in most.
Why should I set the Page Title? What is the difference between a Page Title and a Page Heading?
The Page Title (found on the Page Properties) is the information on the "Blue Line" on the top of the Browser. It is used to identify your page when it is added to the Favorites or as a Bookmark. It is also used by the Search Engines to gather information. The Page Heading is the title inside your page.
How can I create a table? How can I make the table where it will not show the lines (transparent)?
To create a table just click on the Table icon, or click on Table/Insert. You will then decide how many columns and rows you will need. To change the Table Properties, right click on the table and click on Table Properties. To center the table change the Alignment to Center. To make the table transparent change the Borders size to 0.
Table inside table.
What purpose do Horizontal Lines have? Where can I find some?
They are meant to divide information, you can add a simple Horizontal Line by clicking Insert/Horizontal Line. You can change the properties by right clicking on the line and selecting Horizontal Line Properties.
You can use graphics as your dividers and there are some in the directory called Rulers. Here are some examples:
If you find a divider you want to use please share it with everybody and add it to the Rulers directory.
Why shouldn't I underline words? What can I do to create emphasis?
When browsing the Internet, underline words mean that they are a link to another page or image. Users are used to clicking on these words, and sometimes get frustrated before realizing that they were not links. You can call attention to words by changing their color.
Why and when should I have a Last Date updated field?
The Last Date updated field should be used every time the information is time relevant. For instance when updating calendar information, you want to know when was the last time it was updated. Course Schedules, Art Series, some of these may not be accurate information after a certain date, and the user will be able to know when the page was updated. On the other hand, if the information is not supposed to change, do not add a date or the page will look outdated when it really isn't.
What is the average length of a page? Why should the page be broken down into sections?
When a user calls up a page and it takes too long to open, s/he is most likely not to wait for the information. If the page opens and it is several screens long, s/he may not read it. If s/he is trying to get just one piece of information, everything will print, upsetting the user. These are some of the reasons your pages should be limited to 2 - 3 screens long. Group relevant information together and make it user friendly. Granted there are times the page can't be shortened but it should be obvious to the user.
I spend hours looking for the especial font. Why will the font not look the same in other computers?
Fonts are not universal. Users may add or delete fonts from their computers as they please. The browser will try to display the font you selected as long as the user has it in his/her computer; otherwise, it will display a default font which most likely will be courier. If you still want to use that font on a Header for example, create it as an image so it will display the same way on all the computers, but you will need to have an image software like Photoshop, or Lview.
Why shouldn't I use ALL CAPS in my page?
You need to make the Text readable. All Caps makes text hard to read, and in the online world, all caps means that you are SHOUTING.
How do I add a Background image?
Click on Format/Background, check background image and then give the path to where the image is. Backgrounds should be added to the Backgrnd directory to make them easier to fine. If you do not know the path name, just click on Browse, and find the directory where the image is and select the image.
(click on picture to enlarge)
What is a Watermark?
It is a background image that remains static while the words seem to float over it. It works well for Internet Explorer, but will not make a difference in Netscape or Firefox.
What is the difference between *.jpg, *.gif, and *.bmp?
Depending on what are you doing with an image, you need a better resolution.
*.bmp images are great for printing, their quality is great, but they create a large file. You shouldn't use *.bmp images in the Web.
*.jpg images are usually smaller in size, they have been compressed and are good for the Web, especially pictures.
*.gif images are used if you want to create a transparent background on the image, or if you want animation.
Where can I get backgrounds or images?
Backgrounds you can get from the Backgrnd directory. For images there are a few places you may look. First go to the Pictures directory, if you are looking for a small graphic, check the Icons directory, for a specific department, you may then select that department. Because so many need to be able to find images, make sure to use readable names when adding any images.
How do I add images to my page?
Either click on the insert image icon, or click on Insert/Pictures/from file. Then select the directory by changing the entry on the Look in field and choose the image you want.
(click on picture to enlarge)
What if I have a new background or image that is not on the current site?
You will need to add it to the Backgrnd directory first, then add it to your page. When you move your page to the Internet, make sure the background image is moved to the Backgrnd directory in the Internet.
Why should I worry about what I name my images?
If you were the only one using the image it would not be an issue, but as your site grows, you may not be able to remember what image4.jpg looks like. Naming the images something logical will help you and others when browsing the Picture directory. Also when users with disabilities use "Readers" Software it will make more sense to them when trying to visualize what the image is supposed to look.
Where are the Chipola names and logos?
As was said before, some fonts may not display properly in other computers, to insure that a heading displays like you want, you can create an image of it. That is what have been done with several Chipola names. You can find them under the Pictures directory, in a directory called cjcnames. The Chipola logos are under the Pictures directory in a directory called cjclogos. New heading images can be created as they are requested.
What software can I use to resize, change or create an effect on an image?
You can use any number of programs, some are available in the Internet for free or for a trial period. LVIEW Pro is a good program for a small price; IrfanView and XnView are good programs and are free. You can also use PhotoShop if you have a license for it.
What is IrfanView and XnView?
They are free downloadable programs from the Internet that will assist you in resizing your pictures. There is a batch convertion on IrfanView if you have multiple pictures which will save you a lot of time. You can download IrfanView from: http://www.irfanview.com/ and XnView from http://www.xnview.com/en/download.html.
I have resized the image inside my page, but it is still taking too long to load; Why? (click on picture to enlarge)
The viewing size is not what you need to correct. If the image is over 90k (file size) it will take a lot longer to load than if the file size is less than 20k. When you resize the image inside you page, the browser still has to load the image and then it has the added logic to resize it.
If you do not have an image software, do not worry. Insert the image on your Expression Web page and click on Tools/Page Options; select Thumbnails then change the size of the thumbnail to a larger size (300).
Right click on the picture and then click on Auto Thumbnail. Now you will have 2 pictures, the original and a small version. If you do not want them to click on the picture to see the larger one, right click on the new picture and remove the hyperlink to the original picture.
If you have PhotoShop, XnView, IrfanView or any other image software, open your picture and resize it; save the smaller image with a different name. Then use the smaller image in you page.
With Expression Web you can resize the image to the size you want then right click on it and click RESAMPLE; this will compress the image to the size you had selected, but will overrideethe original image.the original image.
How can I make the background of an image transparent?
After inserting the image in your page, click on it to select it to open the Pictures toolbar. Click on the icon that looks like a pencil eraser, then select the area you want to "erase". This works best if the image has a solid color background. You will find that in some cases it will not work.
What is an Alternative Text on an image, and why is it so important?
It is a descriptive message that identifies a image in a web page; it was optional but will let the user know what the image is supposed to be in case s/he has the load pictures options turned off. To insert an alternative text, right click on the image select Picture Properties and add the information on the Alternative Text field.
When inserting a picture with Expression Web, it will authomatically pop up the message to add the Alt Text; do not skip this step; it is a requirement with the American Disability Act (ADA). Users with disabilities use reader programs to hear what is on the web pages; if the page have images without alternative text, all they hear is the image name, for example "image: cjc3.jpg" instead of "image: Chipola Logo".
When should I use an absolute position on a picture? Why is it best not to use it?
Absolute Positioning lets you place an image in an exact location in a page. It breaks the page into pixels and sets the image in a column/row location. It is good if you want a special layout, but most of the time the image will end up mixed up within the rest of the page. The image will not relocate if something else is added to the page, you have to manually change it and check it to make sure it is displaying correctly. If you don't have to, don't use it.
What are Thumbnails?
They are small representations of images. If an image is too large, or if you have several images you want to display, you can create thumbnails of the images. The thumbnails are usually around 2k which make them fast to load and the user can click on them to see a larger image. Expression Web takes care of creating the link between the small image (thumbnail) and the original image.
What are links? What is the difference between a Relative link and an Absolute link?
Links or Hyperlinks are keywords, phrases or pictures that when clicked will connect you to related information in the same page, in the same web site or in another web site.
A relative link or path is determined by browsing the directory structure of the site and letting the program figure out the directory levels. It may look like this:
The absolute link or path is when you give the program the entire path or location to where the information is, including the domain name. It may look like this:
Why do I need to have a link in my page to the main site, or at least to the site map?
Because the user may have got to your page via another site or from a search engine query. If there is a link to a main menu or to point to another place in your site, the user can now view the rest of your site.
What is an Intra Page link or Bookmark? How do I set a Bookmark and how do I link to it?
It is a link to somewhere within the page. You will need to decide where the bookmark is going to be. If it the beginning of a sentence, select part of the sentence, then click Insert/Bookmark the bookmark name may be the same as what you selected, or if you did not selected anything, you will need to give it a name.
(click on picture to enlarge)
Now that the bookmark is set, you can link to it. The only difference between the bookmarks and the hyperlinks is that you will be selecting the location from the bookmark section instead of the URL.
(click on picture to enlarge)
How can I create a Form? What is the best way to collect information from a Form?
To create a Form, you click on Insert/Form/Form; this will create a form field in your page. Two buttons will be automatically added to the form, the Submit and the Reset Buttons. If the web server where you are posting your pages have the FrontPage Extensions installed, you can set the form to save the information in a text file that can be imported into Access, Word, or Excel. If not, you could get the results e-mailed to you, just remember that sensitive information like social security number should not be e-mailed. Another way to use the forms is to get the users to fill the information, print it and mail it to you, just make sure to delete the Submit button.
(click on picture to enlarge)
What are Frames, and when should I use them?
Frames are a way to organize and normalize your site. They will give a consistent navigation look to your site. You can create Frames with Expression Web. The main thing to remember is that each frame is a separate page. Frames are a little tricky, so be careful when you first start using them, and keep in mind that users can not bookmark or add to the favorites the pages in the frames, and sometimes is hard to print if the user does not pay attention to the frames.
Can I use the especial effects offered in Expression Web?
Yes, no and maybe. You may use some features that will display fine in both Netscape and Internet Explorer, like the last date updated, and some Dynamic effects. Some features require the FrontPage Extensions to be in the server and without them will not work (be careful because it may look fine in you computer but will not once it gets to the server). Others will work just fine for Internet Explorer but will not for Netscape; in these cases you will have to decide if you want to leave is as is or change it.
Why is the Marquee not moving in Netscape?
The marquee is one of those effects that only work for Internet Explorer. It will look fine in your computer when previewing and if the page is open with IE, but if the page is open with older versions of Netscape, the text will not scroll. It may not be a problem unless it is obvious that it was a moving text. To solve this you can either use a java script, java applet or use animation text, which will work for most browsers.
Can I use counters in my pages?
If the server has the FrontPage Extensions installed, you should be able to use counters, but remember that not all pages need a counter.
Can I create a Bulletin Board type page?
Again, if the server has the FrontPage Extensions installed you should be able to. But bulletin boards are high maintenance, once the page is in the internet anybody can post any message s/he wants. Security becomes an issue, so be careful.
Should I have to worry about copyright issues even if the page is for the College?
Yes, even more so; the fact that Chipola is an educational institution does not exempt it from the law. Remember that just because it is in the Internet, it does not makes it public domain.
I want music on my page, how can I add it?
If you have a music file like .MIDI you can add it to your page by right clicking anywhere in you page and selecting Page Properties. Under Background sounds find the location of your file and select it. This will allow music to play if the page is viewed with Internet Explorer, it will not play in Netscape. In order to make the music play in Netscape you will have to add some HTML code to your page.
I want to update a page that is on the web, but not in my computer, how can I save it on my computer?
In order to do that, open the page you want using a browser; then go to File/Save As and save the page in the correct directory path.
* If you do not save it in the correct directory, all the links will be incorrect from then on.
If you use Internet Explorer 5.0 or greater, make sure to also select save only HTML.
(click on picture to enlarge)
What do you mean with save only HTML when using Internet Explorer?
Newer versions of I.E. try to save you time and allow you to view pages offline. When you save a page with IE and do not pay attention to the options, it will by default save the complete page, including images. The problem is that it will not keep the correct directory information for the images, IE creates its own directory for the images, and changes the path inside the pages to point to this directory.
You may not notice anything wrong until you put the page back in the Internet and none of the images show up.
How can I save an image I found on the Internet to use in my pages?
Right click on the image then select Save Image as if using Netscape or Save Picture as if using I.E. Make sure you remember where you are saving the image. If it is part of Chipola site, make sure you save it in the correct directory.
Why should I avoid spaces when naming my files and directories?
Expression Web and the Chipola web server do not have a problem dealing with spaces, but there are some browsers that will not find the information unless the users types %20 for the space character. It may be easier for the user if there are no spaces.
How can I create an Image Map?
An Image Map is an image that when clicked in certain spots will take you to another page. The following is an example of an image map; if you click on the boys basketball it will take you to the boys basketball page; if you click on the cheerleaders it will take you to the cheerleaders page, and so on.
To create the image map click on the picture to open the picture toolbar then click on the shape that will be better for your image, circle, square, or free form; outline the image and when the create hyperlink menu appears, type or browse for the URL path.
Why do I need to test my page in both Netscape and Internet Explorer?
Because even though they both interpret HTML, some tags are designed to work exclusively for one or the other. Sometimes even the font size and table appearance will differ. You will need to decide how to set your page so it will look good in both browsers; otherwise a page that looks great in one browser may not even look ok in the other.
What is a PDF file?
PDF stands for Portable Document Format. It is developed by Adobe Corporation and allows documents to displayed in various types of computers. In order to view and print a PDF file you will first need to download and install a copy of the Adobe Acrobat Reader.
How can I create a PDF file?
There are a couple of ways to create a PDF file, one is by using the Adobe writer, and another is to export a PageMaker file into a PDF file. If you need to create just one file, e-mail it to Ana in the Data Center to get it converted. If you will need to create files all the time, contact the Data Center for a Copy of the Acrobat Software (limited to the number of licenses available).
What are Java scripts?
Java Scripts, and applets are pieces of code that are inserted into the HTML. Some manipulate or transfer information, others are just used to create especial effects on the pages; like the scrolling banner in the Chipola Basketball page.
Where can I get a java script?
There are several sites in the Internet that offer free scripts. You can also get some from books; the main thing to remember is that you need to be more familiar with HTML code to be able to manipulate the scripts.
What are Search Engines, and what do they have to do with META tags?
Search Engines are sites that will help the user find the information s/he is looking for. Sometimes you have to register to be able to be found in a particular Search Engine. But just because you registered does not means that your site will be at the top of the search query. A way to ensure that your site will at least be found is by giving it a good page title and by using Meta tags. Meta tags are key words that the search engines will check when doing a query. The more the meta tags matches the user's criteria, the more likely the page will be displayed in the search result.
Now that my page is finished, how do I put it on the Internet?
If you are creating a page for the College, you will be granted authorization to a directory in W:\wwwroot . Once the changes are finished, contact Ana in the Data Center by just e-mailing her that you have made a change on your site to please move to live web.
Most of the time if a change is made on Expression Web, or you have done a Save as and added the file to the W:\ drive, the "last date modified" will be the current date and the Data Center will be moving things with the current date on it. On the other hand, if you had something on your C:\ drive and moved it to W:\, it will retain the last date modified which may have been prior to today. In those cases, remind the Data Center to move your whole folder instead of just the last file changed.
- The files are now ready to be viewed on the Internet.
How can I see if my page is being liked to another page before I delete it?
Before you delete your images or a page, you can check if it is being linked from another page by checking the hyperlinks in Expression Web.
To check the hyperlinks, open Expression Web and on the Folder list find the page or image you want to check. On the right side, there are fourt tabs (Folders, Publishing, Reports and Hyperlinks) click on the Heperlinks. It will then show you if what you have selected is being linked from somewhere else and if it links to another place also.
October 26, 2011