1 / 19

Basic Web Design UVI CELL

Basic Web Design UVI CELL. Dave Gilliss gilliss@gmail.com. Your Web Site. What is the goal of your site? Inform Sell Display Who is your audience? Why are they coming to your site?. Brainstorming. Think of all the items that will help your site meet your objectives

kezia
Download Presentation

Basic Web Design UVI CELL

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Basic Web DesignUVI CELL Dave Gilliss gilliss@gmail.com

  2. Your Web Site • What is the goal of your site? • Inform • Sell • Display • Who is your audience? • Why are they coming to your site?

  3. Brainstorming • Think of all the items that will help your site meet your objectives • Photos of items or people • Staff bios • Hours of operation • Physical and mailing address • Phone numbers • Links to other sites • etc.

  4. Brainstorming (continued) • Try not to think in terms of “Pages” at this point • Be as specific as you can • There are NO wrong answers or items in brainstorming

  5. Information Architecture (IA) • Organize data into logical and intuitive groups • Write down all the elements and ideas from the brainstorming session on index cards or post-it notes • Move the cards around until groups are finalized • Name groups as specifically as you can • Begin gathering the actual content for each element on the cards (this can take a long time if others are responsible for content so it’s best to ask for it before you actually need it!)

  6. Best Practicesor things that I’ve learned the hard way • The homepage should always be named • default.html or • index.html • Always test to make sure these work as some web servers use a different name for the default document • Never use spaces in a file or folder name • Use “contact_page.html” or “ContactPage.html” • NOT “contact page.html”

  7. Best Practicesor things that I’ve learned the hard way (continued) • Create directories with descriptive names that are easy to understand • Such as “bios” or “StaffBios” • The default page for each directory should be named either: • default.html or • index.html • This makes it easy to give out links that bypass the homepage • www.mycompany.com/bios • www.mycompany.com/products

  8. Best Practicesor things that I’ve learned the hard way (continued) • Store images and photos in an “images” directory • Can mirror your main directory structure in a central location • /images/staff/ • Or you can store them in the sub directory of each of your main directories • /staff/images/

  9. Basic HTML Hyper-Text Markup Language

  10. Writing HTML • You can use any word processor or text editing program on a PC or Mac • Notepad • MS Word • Word Pad

  11. Saving a HTML File in Word • Using MS Word • Select “Save as” from the file menu • Save document as “Text” • Extension should always be .html

  12. Saving a HTML File in a Text Editor - Notepad • Text is already in correct format • No margin, borders, or text styles are saved in a plain text editor • No need to select “Save as” each time • Save file with .html extension

  13. HTML Text Tags • Tags are items that tell a web browser how to display information on the web page • Most tags have 2 parts • On <B> • Off </B> • The first tag (on) tells the browser to do something • The second tag (off) tells the browser to stop • The <B>will make the text bold</B> but only inside the two tags

  14. Common HTML Tags • Text tags • <B>Bold</B> • <I>Italics</I> • Layout tags • <P>Paragraph break • Leaves a space between lines of text • <BR>Line break • Any text following this tag will be on the line directly below it • <HR>Horizontal rule • Places a thin rule across the page

  15. Basic HTML Page Tags • All pages should have the <HTML> tag first and last on a page • The <Title> of the page goes next • The title is the text which will appear in the bar at the very top of the web page • A good title is very important, so be sure to make it accurate and meaningful (much more on this later)

  16. My First HTML Page

  17. My First HTML Pagewith all tags

  18. My First HTML PageResults

  19. Resources and Readings forWeek 2 http://www.wave-creative.com/cell/

More Related