Web Site Publishing

1
Web Site Publishing

• An introduction to designing and producing
  web-sites

2
Targets for this week

• Understand how web-sites are constructed.
• Understand the role of HTML. ?
• Understand the role of a web browser (Internet
  Explorer). ?
• First use of specialist web site production
  software - Macromedia Dreamweaver
• Produce ideas for web-site/slideshow coursework.

3
Previously.

• First use of specialist web site production
  software - Macromedia Dreamweaver
• Created folder to store web-site - root folder.
• Created home page for site index.htm
• Changed font colour, font size, background colour

4
Targets for today

• Change fonts - understand possible problems.
• Set up additional pages in site.
• Add simple text links from home page to other
  pages.
• Check links work by previewing site in browser.
• Create images folder for site.
• Create simple logo and insert on home page.
• Understand problems with scaling images.

5
Web Site Production Software Options

• 1. Text Editor
• e.g. MS Notepad
• The original way that web pages were (and still
  are)
• created. BUT - need to understand HTML.
• 2. Every day Applications Software
• - Word Processor (e.g. MS Word)
• - DTP (e.g. MS Publisher)
• Ok for very small sites, but not designed for
  this purpose.
• 3. Specialist Web Design Software
• - MS Front Page
• - Macromedia Dreamweaver.
• Provide specialist web-site utilities e.g spot
  broken links.

6
Before you start....

• File Extensions
• .DOC - MS Word
• .XLS - MS Excel
• .TXT - simple text file
• .HTM or .HTML - web page
• Often Windows hides these from you. Show them by
  changing your folder options
• Make sure this box is un-ticked

7
Web Site Production Practical (1)

• Web Pages using a Text Editor
• Run All programsgtAccessoriesgtNotepad
• Type in HTML code.
• Save as page1.htm
• Double click on the saved to display it in web
  browser (Internet Explorer).

8
Web Site Production Practical (2)

• Web Pages using MS Word
• Create blank Word document
• Type in text and insert graphic
• Use Save as web page option to save as
  page2.htm
• Double click on saved page2.htm to display page
  in Internet Explorer

9
Web Site Production Practical (3)

• Web Pages using MS Publisher
• Use Web site wizard
• Choose a design
• Create menu page two others
• Create links on menu page
• Preview site in Internet Explorer

10
DREAMWEAVER - SKILLS CHECKLIST

• Create a new web
• Change text appearance
• Change page background
• Insert graphics onto a page
• Create internal hyperlinks to other pages in
  your web-site
• Use spellchecker
• Rename pages and graphics files

11
DREAMWEAVER - SKILLS CHECKLIST (2)

• Create Flash buttons/text
• Create external hyperlinks to other web-sites
• Verify hyperlinks
• Use tables to produce pages with more complex
  layouts

12
Advantages of using a Web Design Package

• Allows you to put together a web page/site
  without knowing HTML.
• Updates hyperlinks automatically when filenames
  are changed.
• Shows the download time for each page.
• Tells you about any broken hyperlinks.
• Easy to produce navigation bars and roll over
  buttons.
• Displays the structure of your site and the links
  between pages.
• Easy to create the tables needed for complex
  layouts.
• Allows you to see/edit the HTML that makes up
  each page.

13
WEB SITE PRODUCTION PROBLEMS

• 1) Problems with web page layout
• Need to use tables to create anything but the
  simplest layouts.
• 2) Problems with graphics
• Need to use graphics package to optimise
  graphics for use in web-site.