1 / 26

Web Design ITM 2010

Web Design ITM 2010. Tutorial 1 Prepared by Wang Shiyu. A good web site. Brief theme Good structure (easy to navigate) Small size(easy to load). Commercial tools. Microsoft FrontPages Simple. WYSIWYG, Easy to learn Macromedia Dreamweaver

steffi
Download Presentation

Web Design ITM 2010

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. Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu

  2. A good web site • Brief theme • Good structure (easy to navigate) • Small size(easy to load)

  3. Commercial tools • Microsoft FrontPages • Simple. WYSIWYG, Easy to learn • Macromedia Dreamweaver • Powerful fully featured extensible WYSIWYG editor with site management and support for 3rd party tags (ASP…)

  4. Microsoft FrontPage • Menu for changing text styles. • Header tags • List tags • Alignment • Menu for creating tables, forms, frames, etc. • Menu for inserting images, hyperlinks with http, mailto, https, etc.

  5. Microsoft FrontPage (Con’t) • Not much support for script languages • Include <MARQUEE> tag which is only supported by Microsoft Internet Explorer • Text inside Marquee element scrolls slowly across screen • Have to type in complete script in JavaScript or VBScript

  6. Microsoft FrontPage (Con’t) • Other support features • DHTML effect • Page transitions • Hover Button • Banner Ad Manager

  7. Insert Image Insert Hyperlink Component Insert Table Text Styles Alignment options Insert Indent Create List Microsoft FrontPage (Con’t) • Microsoft FrontPage window • Similar to Microsoft Word

  8. HTML Introduction • What is HTML? HTML stands for HyperText Markup Language. Itdescribe the contents and appearance of pages on the World Wide Web. It use pairs of opening and closing tagsto describe each element on a Web page

  9. What is HTML? For example, code <a href=“http://www.cuhk.edu.hk">school</a> describes a link(URL) on the page. The <a href…> tag indicates the beginning of link and </a> indicates the end of the link. If you design pages in FrontPage, you don‘t need to know any HTML or DHTML; because it is a WYSIWYG(所見即所得) design tool that can automatically generate the HTML code.

  10. HTML Introduction <html> <body> <p>Hello World</p> <p>This is the test</p> <p><a href="http://course.ie.cuhk.edu.hk/~itm2010">Click me</a></p> </body> </html>

  11. HTML Introduction (Con’t) <html> … </html> <title> … </title> <body> … </body> <a href://”…”> … </a> <img src:”…” width=“1” height=“30%”> <table bgcolor=“#FFFFFFF> … </table>

  12. HTML Introduction (Con’t) Note: You are recommended to put all files which are linked to your web such as image, web, music into the same folder. In another word, they can belong to separate sub-folder, but this folder must belong to the same root. In this way,you can move your work easily

  13. Form page in normal tab

  14. View HTML code View HTML code

  15. Get help from FrontPage

  16. Begin to design webpage • Create a blank page • Using Frame

  17. Page properties • Background • background picture • background sound • Link properties • hyperlink color • hyperlink rollover

  18. Page properties

  19. Add image

  20. Add image • Picture properties • Picture link

More Related