1. Web Design ITM 2010 Tutorial 2 Prepared by Wang Shiyu

2. Add image Picture property Picture link

3. Image properties

4. Add image with link Add text onto the image Make particular place be hyperlink

5. Add table Why is table needed? Tables enable to organize data into columns and rows. Information can be organized very well. Tables can be used to control the detailed layout of a page. Each rectangle in a table is called “cell”.

6. Add table Built by your Own

7. The size of table The position of table Add table

8. Table properties

10. Cell properties

11. Table’s toolbar Alignment: Right Width: 80%

12. Align in different ways: Top, Center Vertically, Bottom Change the size of table

13. Add caption at the top of the table: Table -> Insert -> Caption Table caption

14. Import text and table You can import all the Microsoft Office text generated by Word and the table generated by Excel Copy/paste your text/table into the FrontPage Change the word file from.doc to.html, also it can change excel file from.xls to.html  File->Save as  In Type  choose the type of web page(.html or,htm) Import file Insert  File

15. Add link Create link between pages without frame Highlight the text chosen for the link Add link or edit link property Create link in the frame For newsgroup: news://news.cuhk.edu.hk/cuhk.ie.itm2010 ~~~~~~~~~~~~~ ~~~~~~~~~~~ server name group name

16. For the mail link

17. mailto:sywong1@ie.cuhk.edu.hk sywong1@ie.cuhk.edu.hk

19. Add video and audio Insert audio Background Audio file (Show link, then click) Insert video Show in page Video file (Show link, then click) e.g c:\windows\clock.avi

20. Insert audio into background

21. Show video in page

22. Change the video properties Note: can’t display in IE Same as audio

23. Add the appearance in video/picture Position of the picture/video

24. Add Video and Audio link file Just web address and file name