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 –Powerful fully featured extensible WYSIWYG editor with site management and support for 3 rd party tags (ASP…)
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.
Microsoft FrontPage (Con’t) Not much support for script languages Include 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
Microsoft FrontPage (Con’t) Other support features –DHTML effect –Page transitions –Hover Button –Banner Ad Manager
Microsoft FrontPage (Con’t) Microsoft FrontPage window –Similar to Microsoft Word Component Alignment options Create List Insert Indent Insert Table Insert Image Insert Hyperlink Text Styles
HTML Introduction What is HTML? HTML stands for HyperText Markup Language. It describe the contents and appearance of pages on the World Wide Web. It use pairs of opening and closing tags to describe each element on a Web page
For example, code school describes a link(URL) on the page. The tag indicates the beginning of link and 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. What is HTML?
HTML Introduction Hello World This is the test Click me
HTML Introduction (Con’t) … …
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
Form page in normal tab
View HTML code
Get help from FrontPage
Begin to design web page Create a blank page Using Frame
Page properties Background –background picture –background sound Link properties –hyperlink color –hyperlink rollover
Page properties
Add image
Picture properties Picture link