HTMLWebPageDesignx
Download
Report
Transcript HTMLWebPageDesignx
HTML
and
Designing Web Pages
At its creation, the web was all about
– Web pages were clumsily assembled
– Web sites were accumulations of hyperlinked documents
or coherence.
Then, designers took over, with the focus being on
, rather than information content.
– Some sites became “too fancy” and the fancy graphical
features became
, standing
between the user and what they really wanted.
Fancy graphics wasted l
(a business
expense that also frustrated users when sites began to load
SLOOOOOOOOWLY.
Now, web design is seen as a craft, rather than an art.
takes precedence over form and
.
– Your site
. It is perfectly fine
to use the same features that other sites use. Your site and
its navigation need to make sense to users of the site.
HTML:
A
language of “
how
web page.
” that indicate
on a
–D
indicates how it should be displayed
Bold,
italic,
underlined
In table
In a
bulleted list
or
numbered list
: it just
Hyperlinks to Other Locations
<a
href=“http://www.ksu.edu”>text</a>
– Hyperlink to an
<a
href=“filename.htm”>text</a>
– Hyperlink to
Hypertext
link that allows
you
– <a href=“mailto:[email protected]”>text</a>
Images and Backgrounds
<img
src=“dog.jpg”>
<img src=“dog.gif”>
– Places image on web page
Extension is usually jpg or gif
<body
background = “purple.jpg”> .......…
</body>
– Places a background that is on your disk onto
your page
– The background command
. The
background is an attribute of the body
Table Tags
<table>
Defines or creates a table
– <table>………</table>
<
Creates a
within a table
<
within the table.
– <tr><td>…….</td></tr>
R
begin and end with the <tr> </tr>command
C
with the <td> </td> command
Designing Web Pages
Users
about the “newest technology” and
they may not want new features. Content is the key to
attracting viewers and getting them to return back to
your web site.
Users want:
–T
–C
– Navigation that helps them
Users don’t want:
–
–
–
–
Bugs (
)
T
(what else might be wrong with the company?)
O
content
Hypertext links
Web Page Design Mistakes
Making it difficult to distinguish text from the surrounding background.
– Light text and dark background or dark text with light background.
Underlining text that is not hypertext:
Don’t just say “
Don’t open
Try to avoid using Flash and making your page move. It distracts and
annoys users. Flash should not be used to “jazz” up a page. If your content
is boring, rewrite text to make it more compelling and hire a professional
photographer to shoot better photos.
Don’t create a web site that only works in a given platform. It should work in
. You can’t control how a user has set up their
web browsing software. They may even be using an out-of-date browser.
Don’t let your content became static.
”. Indicate what
at the end of the link.
(except for pdf files or other application files)
It
. Avoid
Designing Good Web Pages for a Business
If you design a web page that needs a plug-in, be sure you make it
easy for users to download a copy.
The most important part of a Web site is its
. Once you have
content, or at least a very clear idea of what content you will have,
the next step is to organize the content so it will be easily and
intuitively accessible to your audience.
– Structure the page to facilitate
(most users
). Use groupings and subheadings.
– Structure your page logically so that its structure makes sense.
– No important information should be more than
from the home page: each mouse click costs
Use hypertext links to other documents to
Make it easy for visitors to
(mouse) clicks away
– phone numbers, email addresses and your physical mailing address
Designing Good Web Pages for a Business
Do the same as everybody else: if most big web sites do something
in a certain way, then follow along since users will expect things to
work the same way on your site (
).
The contents of a Web site will, or should, change constantly.
Visitors should feel that the your site will hold something new for
them each time they visit. G
again and again.
Create a working prototype and TEST, TEST, TEST, TEST your site.
– Just because something works on your computer doesn’t mean it will work on the server.
– Test using
browsers. Don’t assume everyone is
using your browser or the most up-to-date version.
You don’t want your site to look bad or not work for a potential customer.
– T
with at least two of these: Internet Explorer,
FireFox, Safari, Google Chrome, Opera, (the more the better)
What is the lifespan of your site? If you are promoting an event, what
happens to the site (or on the site) once the event is over?
Designing Good Web Pages for a Business
P
. T
and
. If the spelling and grammar is
bad on a web site, it is a NEGATIVE reflection on the company,
When creating a web site for a “real/actual” business,
DO NOT DOWNLOAD IMAGES OR COLORS ON WEB SITES
THAT ARE COPYRIGHT PROTECTED.
– You will be in violation of copyright laws.
Product photos are perfectly fine, but too many results in a cluttered
look. If needed, create an additional picture page.
– You might even use thumb-nail images that can be clicked on for a larger image
or additional images
– Lots of images (or large images) can cause your site to load sloooooooooowly.
– Make sure that you upload ALL of the images referred to in your code.
T
, and then
The next site will show you many elements that
you DO NOT WANT TO INCLUDE on your
own web site. Expect 2-3 questions on your
first exam regarding these items.
Things You Don’t Want to Do on
Your Web Pages
http://www.jaydax.co.uk/tutorials/webdesign/bad
pageguide/badpgguide.html
Use both Internet Explorer and FireFox to view site.