1. Creating Websites Design & Publish
Our final task in learning how to best present data is creating websites. Certainly web sites have become one of the primary means of sharing information, both personal and professional. This is also true for non-profit organizations that need to reach clients, sponsors, and the community at large and, of course, for local governments, which are moving more and more towards sharing information with citizens via websites.
Design & Publish

2. Creating a Website What you’ll need: Content elements for your site
Text, images, backgrounds, etc.
Software to create the site
HTML editor or WYSIWYG program
A web server to “host” your site
Gatorlink space on plaza
An internet connection & FTP software to transfer your site to the host location
WS-FTP, FileZilla, CoreFTP, etc.
You can download all of the software you need from the Internet; you can use the programs available to you in the UF computer labs; or, you can buy the UF Software CD that comes with all the software you need in one location.

3. Basic Steps
Design, Create, Publish

4. Creating a Website Design the Site Create the Site Publish the Site
Content
Layout
Appearance
Create the Site
HTML
WYSIWYG
Publish the Site
Save or FTP to server
FTP to server
There are three basic steps in the process of sharing information through web sites. First, you must design the site. You need to consider the content that you need to present, the best layout choices for presenting that information, and the overall appearance of the site – which, of course, should be designed to coordinate with any organizational logos, colors, fonts, etc.
Next, you’ll actually create the site. This can be done by writing HTML code, or by using a WYSIWYG program that converts your choices to HTML.
Finally, you have to “Publish” your site to the web, either by saving it to the organization’s server or using FTP to send the file to the web server that will “host” the page.

5. Designing a Website
Purpose, Content, Layout, Appearance

6. Designing a Web Site What are the goals / purposes of the site?
Who is your intended audience?
Content
Gather all of the information in one folder
Consider the types of information (text, numeric data, maps, calendars, images, etc.)
Group this content by topic
These will become ‘pages’ in your site
Presenting information with a web site starts much like presenting information with a report or a presentation. You should begin the design phase by asking yourself what the site needs to do – what is its purpose; what information does it need to convey; does it need to be interactive; what goals should the site accomplish? Next, ask yourself who your intended audience is. Even though sites often come to have unexpected audiences (that’s a big side-effect of the web), you should design with your primary audience in mind.
Next, consider all of the content that needs to go into the site to accomplish the goals and serve the purposes you just laid out. Gather all of that together in one place and make some lists. Group together information by topic or goal.

7. Designing a Web Site Layout
Structure your site layout to best match the content
Draw it on paper first (or create a mock-up in Word)
Home page: basic overview
Pages for each group of content information
Draw a box for each page
Create a navigation scheme to tie all pages together
You should design your “Site map” or layout based on the content lists that you made.

8. Designing a Web Site Appearance
Consistent with other organizational materials
Audience appropriate
Clear, uncluttered, user-friendly
Make information easy to find & understand
Use a unified theme (color, font, graphics)
Align elements on the page
Group elements in a visually appealing way

9. Creating a Website HTML & WYSIWYG
Once you’ve properly designed your site and gathered all of your content together, you can move to the creation phase.
HTML & WYSIWYG

10. Creating a Website Requires HyperText Markup Language (HTML)
Write HTML code using a text editor
Create in a web editing program that converts your WYSIWYG page into HTML for you
A hybrid of these – most HTML text editors now incorporate both code writing & WYSIWYG elements (DreamWeaver, SeaMonkey, KompoZer, Nvu, etc.)

11. Creating a Website Two Parts to a Web “Site”: The Local Site
Collection of files on a ‘local’ computer (your files on your computer)
Created first
The Remote Site
Collection of files on the ‘remote’ web server that hosts your site
You upload your site files from your local computer to the remote site

12. HTML

13. UF Website
This, of course, is what the UF home page looks like.

14. UF Website HTML
And this is the HTML code underlying that same page. If you choose the “View” menu on your web browser, and then choose “Page Source” you can look at the HTML code for most sites on the Internet. Its an interesting way to learn about writing code.

15. Creating a Site with HTML
Works on a series of coded ‘tags’
Tags tell the program how to format pages, text, etc.
HTML tags are presented inside of <angle brackets>
Any tag you open <p> must also be closed </p>
Text that falls between these tags should be in a single line with no hard returns (it will wrap)

16. Creating a Site with HTML
HTML coding for a web site begins by specifying the document type, opens a basic html tag, and then structures the basic set-up for the page. It notes the script type, the content type, and adds any formatting notes. Any CSS specifications (or template constructions appear) at the top as well.
The title of the page that appears in the browser window goes between title tags, and the header for the site goes in the header tags. The main ‘body’ of the page goes between the body tags. Only the content between the body tags actually appears on the page when displayed on the Internet.
Notice that much like our program coding in SAS, HTML editors typically color-code your program to help you avoid errors. And, much like SAS, forgetting to close tags is one of the more typical errors that people make.

17. Creating a Site with HTML
Sets of tags establish the structure of the page and format the properties of both the page and page contents:
Page Structure Elements
Page Layout Elements
Text Layout Elements
When other programming languages are used they’re placed in <script> tags
Java, Flash, etc.

18. Creating a Site with HTML
Using HTML, you construct each page of your site & then link the pages together on the home page
You begin by structuring the layout of the page with layout elements
Often using tables (based on your ‘site map’)
Design the parameters of the columns and rows for a structure (‘div’) that will hold your contents
Add the content
Format individual elements (if different from overall design elements noted at start)

19. Creating a Site with HTML
For example, this page is laid out with tables – it’s in your sample folder. (Discuss elements.)

20. Creating a Site with HTML

21. Creating a Site with HTML
TIP: Good way to learn…
Find a site that you like, copy the source code (“View”  “Page Source”)
Paste the code into your HTML editor
Change it to use your elements (pictures, text, etc.)
Or, modify parts of the structure and see how it changes
Create a basic WYSIWYG page & switch to “code” view
Try to make changes using code instead of “design view”

22. WYSIWYG
“What You See Is What You Get”

23. WYSIWYG Programs What You See Is What You Get
Function like typical text editing programs – software allows you to add text, images, tables, etc.
The software then converts to HTML for you
Higher-end programs (like DreamWeaver):
“Standards compliant”
Allow for both static & dynamic pages
Show design, HTML, and preview pages
More basic programs (like Publisher):
May have coding errors & issues (not the most efficient use)
Typically only static pages
Typically show design & preview

24. WYSIWYG Programs DreamWeaver (Adobe) Free / Shareware Software
On the UF network in UF computer labs (CSE, etc.)
Free 30-day trial at the Adobe website
Free / Shareware Software
KompoZer (on CLASnet,
SeaMonkey, including Composer ( project.org/)
Nvu (
Main differences: interface & templates

25. KompoZer
… & SeaMonkey Composer

26. User Guide

27. KompoZer
If you’re using SeaMonkey, or other WYSIWYG programs that come with built-in browsers, you may have to access the Composer page by choosing new Composer page from the File Menu.
Notice that we still have tabbed viewing options like we did in DreamWeaver – we’ll design in the “Normal” view, but you can view the HTML tags, the Source Code, and see a Live Preview of your site by changing tabs.

28. KompoZer
You’ll notice a basic menu bar at the top, with familiar titles – File, Edit, View, Format, Table, Help.
Below that is the “composition toolbar” with buttons to help with site design, and then two Formatting toolbars. As with the text editors we’ve learned this semester, you can typically use either a toolbar button or make a choice from the drop-down menus to perform an action.
On the left-hand side is the “Site Manager” pane which you can choose to show or not in the “View” menu. This works like the Files/Assets pane in DreamWeaver to help you quickly access the files associated with your site.

29. Creating a Web Site with KompoZer
Start a new page by:
Selecting “File” then “New”
Clicking the drop-down on the “New” button
Multiple pages will open as tabbed windows (or you can choose to open a new window)

30. Name & Save Your Page
Switch views by clicking on the “Source” tab. You’ll see the tags for “title” – go ahead and give your page a name. When you return to the “Normal” view, you’ll see your page title now appears in the tab.
Let’s also show good form and save our page before we go any further. Choose File, “Save As” and then Browse to your folder (or create a folder) with all of your web site content. You typically want to give your home page a short name with all lower case letters. In most settings, your main page is called “index” or “default” because that’s what search engines and browsers will call up by default if someone searches for say, a business name, and finds a partial match for you. That won’t be the case here, because you’re on a shared server, so you can name it what you like. It’s best not to have spaces and be simple.

31. Working with Text Text can’t be “imported” but you can cut/paste
Text typed directly in the KompoZer page defaults to “body” text
To change this, select the text and choose a standard element format from the drop-down

32. Working with Text
Format text using the ‘Format Menu’ just as you would in a word processing program
Fontface
Size
Style
Color
Alignment
Use the Format toolbar to format text, just as you would in a word processing program.

33. Working with Text You can add bulleted lists and numbered lists
To format these lists, choose “List Properties” from the “Format” Menu
Make changes using the dialog box
You can also “indent” and “outdent” text from the toolbar
Lists …
Since the “tab” key doesn’t have a function in HTML formatting, to indent text, you’ll need to use the “indent” button on the toolbar. To “outdent,” or move text back to the margin, use the opposite button.

34. Adding Images Accepts gif, jpg, & png
Save your page before adding images
Click the “Image” button
In the Image Properties dialog box, choose the image from “Image Location”
Click “Open”
Add a description in “Alternative Text”
If you’ve saved the files you want to use to your web folder, it should be easy to find them now. Browse for the image and click “Open.”

35. Modifying Images To resize your image: Click the image
Resize using handles
Click the “Image” Button
On the “Dimensions” tab you can resize the pixels

36. Modifying Images To Align the Image: Click the image
Click the “Image” Button
On the “Appearance” Tab, choose an alignment from the drop-down

37. Using Tables
Tables were once the preferred means for constructing web site layouts
Can cause some users issues with graphics, etc. (scrolling, spacing, etc.)
Have been replaced by CSS
Still some debate about preferred methods
Still a good way to format portions of a page
Allow you to arrange content (especially text) in an orderly way with a fixed appearance
Choose whether to show table borders

38. Using Tables To Insert a Table Click the “Table” Button
Choose “Precisely” and enter the number of rows & columns
Specify the width of the table (or leave blank for fluid movement)
If you don’t want the table border to show enter “0,” otherwise enter the border width in pixels

39. Modifying Tables
Right Click inside the Table & Choose “Table Properties”
Can control Table or Cell properties
Text alignment & wrap
Cell spacing
Background color
Table alignment (on the page)

40. Links Links provide the main means of navigating web sites
Move quickly from one place to:
Another place on the same page
A different page on the same site
A page on an external site
May be attached to any element on a page
Usually use a few words of text or an image that a user can click on to activate the link

41. Creating Links To Create a Link: Highlight the text for the link
Click the “Link” Button
Enter the page location (URL), a file to link to, etc. in the box
Select OK
Your text becomes a link

42. Creating Links
Notice, in your HTML tags that your linked element now has an “A” for “Anchor” denoted.

43. Special Links:
Highlight the name (or other text) to add an link to
Click the “Link” Button
Add the address to the link location
Check “The above is an address”
This adds the ‘mailto:’ command to the front of the link command

44. Anchors: Linking within a Page
‘Named anchors’ act as a type of bookmark defining a particular place on a page
Links can jump to these bookmarks
These types of links help users move around your web site
For example, an Anchor can be placed at the bottom of page that will move a user to the “Top of the Page” with a single click
Two Step Process: Create the anchor then create the link

45. Creating Anchors Place your cursor where you want the anchor
For example, the top of the page
Click the “Anchor” Button
In the Named Anchor Properties box, type a unique name for the anchor
Click OK
An Anchor Icon appears

46. Linking to Anchors To Link to an Anchor Go to where the link be added
For ex: the bottom of the page
Enter the text to display
Highlight the text & click the “Link” Button
Your named anchors appear in the drop-down
Choose & click OK

47. Appearance: Backgrounds, Colors
You can also adjust:
The background colors or images for your site (sometimes called wallpapers)
The normal, active, and linked text colors
Choose “Page Colors and Background” from the Insert Menu

48. Modifying the Page Appearance
To adjust colors, just click on one of the color boxes and you’ll get a dialog box like the one shown here. You can specify an exact color with its “hex” color code, or you can choose from the predefined colors.
To choose an image as a background, browse from your file list in the “Background Image” box.

49. CSS: Cascading Style Sheets
Style sheets control how elements of the page appear on screen, to print, etc.
“Elements” = parts of the page structure, like headings & paragraphs
“Style” = aspects of presentation, like font (face, size, color), background color, alignment, borders, etc.
Classes
Define styles & apply them selectively to only some elements
“Class” = a style that can be applied as & when you choose
Most people who write their own code, or use a hybrid program to do at least some coding, control their page appearance through CSS. I’m mentioning it since KompoZer does provide some basic CSS capabilities now, but I don’t expect any of you who don’t already dabble in web site construction to bother with this.

50. Cascading Style Sheets
You can access the CSS dialog box by clicking on the CSS icon – it looks like a painter’s palette. Notice there are tabs for various elements. The main tab, “General,” allows you to specify whether you’re creating a style for all elements of a certain type (for example, all heading2’s), or whether you’re only applying the style to a selected class.
You save your rules so that you can apply them later as well.

51. Example
Preview and Save your work.

52. Publishing Your Site
FTP to the Internet

53. Publishing Your Website
Once your site is complete, it must be “Published” and up-loaded to an Internet server to appear on-line
You need a server to ‘host’ your site
Easiest to use Gatorlink
You need an FTP software program to transfer your site & all its components from your ‘local site’ to the ‘remote site’ on the Internet
KompoZer: has a built in Publishing function
MS Publisher files must sent with FTP to plaza.ufl

54. Publishing Your Site: KompoZer
After saving your local site, Click the “Publish” Button
Enter a Site Name
Enter a Page Title
The File Name is your local, saved file
Mark that you want to “Include images and other files”

55. Publishing Your Site: KompoZer
In the Settings Tab:
Enter the URL for your ‘homepage’:
The publishing address begins with the ftp command:
ftp://plaza.ufl.edu
Enter your Gatorlink username & password
Click “Publish”

56. Your Site is Sent to Plaza
Your URL is:

57. Publishing with FTP Software
FTP software connects your local computer to a host computer that houses your Internet files
Most FTP programs will show your local site on the left hand side and your remote site on the right hand side
First, set-up your FTP connection:
Enter information on your ‘host’ (plaza.ufl.edu)
Enter your username & password (Gatorlink)
When an FTP session is active you can transfer files from your local computer to your remote host site

58. Using WS-FTP Enter a Profile Name (i.e. “Gatorlink”)
Enter plaza.ufl.edu in the “Host Name/Address” box
Select UNIX (standard) or Automatic Detect in the “Host Type” box

59. Using WS-FTP Enter your Gatorlink ID in the “User ID” box
Enter your Gatorlink Password
Leave the “Account” and “Comment” boxes empty

60. WS-FTP

61. Using FileZilla
File Menu, Choose “Site Manager” then “New FTP site” (Change to Gatorlink)
Enter plaza.ufl.edu in the “Host” box
Enter your Gatorlink user name in the “User” box
Choose “Normal”
Click “Connect”
A pop-up box will ask for your password to connect

62. FileZilla
drag & drop

63. Publishing Your Site
FTP all files associated with your site to the remote server
You should then be able to view your site in a web browser: