Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.
-
Upload
samson-malcolm-adams -
Category
Documents
-
view
218 -
download
0
Transcript of Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.
![Page 1: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/1.jpg)
Web Design ITM 2010
Tutorial 1
Prepared by Wang Shiyu
![Page 2: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/2.jpg)
A good web site
Brief theme Good structure (easy to navigate)Small size(easy to load)
![Page 3: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/3.jpg)
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…)
![Page 4: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/4.jpg)
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.
![Page 5: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/5.jpg)
Microsoft FrontPage (Con’t)
Not much support for script languagesInclude <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
![Page 6: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/6.jpg)
Microsoft FrontPage (Con’t)
Other support features– DHTML effect– Page transitions– Hover Button– Banner Ad Manager
![Page 7: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/7.jpg)
Microsoft FrontPage (Con’t)
Microsoft FrontPage window– Similar to Microsoft Word
Component
Alignment options
Create List
Insert Indent
Insert TableInsert Image Insert Hyperlink
Text Styles
![Page 8: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/8.jpg)
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
![Page 9: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/9.jpg)
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.
What is HTML?
![Page 10: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/10.jpg)
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>
![Page 11: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/11.jpg)
HTML Introduction (Con’t)
<html> … </html>
<title> … </title>
<body> … </body>
<a href://”…”> … </a>
<img src:”…” width=“1” height=“30%”>
<table bgcolor=“#FFFFFFF> … </table>
![Page 12: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/12.jpg)
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
![Page 13: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/13.jpg)
Form page in normal tab
![Page 14: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/14.jpg)
View HTML code
View HTML code
![Page 15: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/15.jpg)
Get help from FrontPage
![Page 16: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/16.jpg)
Begin to design web page
Create a blank pageUsing Frame
![Page 17: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/17.jpg)
![Page 18: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/18.jpg)
![Page 19: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/19.jpg)
![Page 20: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/20.jpg)
Page properties
Background– background picture – background sound
Link properties– hyperlink color– hyperlink rollover
![Page 21: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/21.jpg)
Page properties
![Page 22: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/22.jpg)
![Page 23: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/23.jpg)
Add image
![Page 24: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/24.jpg)
Add image
Picture propertiesPicture link
![Page 25: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/25.jpg)
![Page 26: Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.](https://reader035.fdocuments.us/reader035/viewer/2022062423/56649e4a5503460f94b3e362/html5/thumbnails/26.jpg)