Introduction to Multimedia Lecture #5 Setting up a Website Working with DW

1. A Vision of Students Today Introduction to MultimediaLecture #5Setting up a WebsiteWorking with DW Instructor: Mohamed MAGANGA

2. How to start your design: Each webpage must have the same look https://www.microsoft.com/mspress/books/sampchap/6403/0-7356-18607-04.gif http://usability.coi.gov.uk/themes/page-layout/assets/images/1a-1.jpg

3. Things to Remember, especially for Assignments Keep the menu in the same place on every page. (either the top or the left, it is up to you) Should not have to scroll horizontally Keep the colours consistent on every page Keep the layout fairly consistent on every page Should always have a way to get home Long pages should have a “Back to Top” button

4. Web Page File Names - Each webpage will have an extension of either : .html, .htm(Hypertext Markup Language) • .htm - DW versions prior to version 8 • .html – DW 8 version and later uses this extension • The code is what the browser uses to display the webpage on your screen .shtml • “Server Side Includes” means that html document has special commands for the server to process ie. Other data to pull in from server, counter processing etc. • “please parse this file before displaying it in the browser since it contains server commands • .php, .asp, .cgi extra stuff that is brought in also from the server, allows for use of data in a database on the server, more complex form manipulation. asp is a Microsoft technology

5. Dreamweaver versions Dreamweaver is a web page editor & site management tool • WYSIWYG interface – much easier to work with • Create and edit pages • Link them easier • Site management: Organize files/folders, Moving files, rearranging pages, and updating links very easy • Dreamweaver 1 - 1997 • Dreamweaver 4 - 2000 • --------------------------------------- • Dreamweaver MX - 2002 • Dreamweaver MX for 2004 - 2003 • Dreamweaver 8 2005 • Dreamweaver CS3 • Dreamweaver CS4 • Dreamweaver CS5 (latest one) • More powerful, more features • Style Sheet access improvements

6. Document Window Area where you build Your webpage (add text, images and other elements) Dreamweaver Screen PANELS: Provide you with commands/properties & characteristics of the current object or task you are busy with • Can move them around on the screen (click and drag) • Most common floating panel is the Property Inspector Site Panel Property Inspector panel

7. Documentwindow The actual working environment where you are entering text, images to build your web page SitePanel folder that you are currently working on Gives filenames, path directory etc. Dreamweaver Windows/Panels PropertyPanel • Characteristics of objects/text that you have inserted ie. Size, color, text font etc.

8. Show / Hide Panels • The side panels always stay on • To activate the Property Inspector/ Site window • From the menu bar, select Window > Properties • From the menu bar, select Window > Files • To hide/show panels • Press <F4> key to make panel appear and disappear. • To close a panelsimply click of the panel, and select “Close panel” • Drag panel and lock it into place

9. Design layout & File Organization Navigation Style Your Choice !! Be consistent Banner Menu Colors

10. Website for organization Polar bear site All webpages stored on H: polarbears index.html Homepage or Splash page • All webpages pertaining to a website are stored in a folder on your computer called “polar” • Dreamweaver refers to this folder as a “site”(DW associates a descriptive name with the folder name as identified through steps of Manage Sites) • First webpage is usually called “index.htm” or .html

11. Links for the simple structure • Assume the domain name for this site is: ArcticAnimals.org • Thus the website would be: • http://www.ArcticAnimals.org • To get to the polar bear web site, you could type: • http://www.ArcticAnimals.org/polarbears OR • http://www.ArcticAnimals.org/polarbears/index.html • To get to the habitat page you would type: • http://www.ArcticAnimals.org/polarbears/habitat.html

12. Why is it important that you call the homepage “index.html”? • Once you transfer your files to a server into a folder called “polarbears” , the URL address will depend on which server you upload it to. For example: • http://publish.uwo.ca/~vtryphon/polarbears • www.uwo.ca/polarbears • www.brescia.uwo.ca/polarbears To view another webpage within the site, the URL address would be: http://publish.uwo.ca/~vtryphon/polarbears/habitat.html www.uwo.ca/polarbears/habitat.html www.brescia.uwo.ca/polarbears/habitat.html

13. Creating a New Site ALWAYS DO THIS: You must identify toDreamweaver • the folder where your website will be stored • performed through Manage Sites New site No files exist yet but will be creating them Folder/files exist But never worked with files in DW Note: You can only work on one site at a time(but you can switch between sites but must close each site before you open the next

14. File Names Rules for File Names • Do not use spaces in your file names and folders (even though Word files allow it!) facts and stats.html vs factsandstats.html • Do not use capital letters in your file/folder names(due to case sensitivity on some servers ie. Panther)Factsandstats.html vs factsandstats.html Example: If the file Services.html was uploaded to panther • Which url site would show the webpage? • http://www.uwo.ca/industry/services.html • http://www.uwo.ca/industry/Services.html • Both (a) and (b)

15. Entering Text Paragraph break • Leaves a blank line between lines Press <Enter> Line break • no space between lines • Press <Shift><Enter> • Automatic line wrapping • The width of your paragraph depends on the width of the Web browser window (unless text is entered into a table or using CSS style sheets)

16. View Layouts • Design View: - shows the WYSIWYG view • Split: - combo of both views (Design and Code) • Code View: – shows your HTML code

17. To Preview a webpage in a Browser • You can see how your page will appear online by previewing it in a web browser. It assumes that you have a browser or browsers installed on your computer. Preview icon You must always preview in as many browsers & different versions Ie. Internet Explorer, Firefox, Netscape etc.

18. Page Title property • Associates a general description of what webpage is all about -- an identity • Displays title on first line (title bar) when page is opened in browser window Importance:when printed (see next slide) Information Technology Services, the University of Western Ontario

19. Page Title property Important: • when printed • Identity http://www.brescia.uwo.ca/current/advising/index.html

20. Formatting text REVIEW: • Color: hexadecimal vs RGB web safe pallette • Size: Pixels vs points • Font Type: Serif vs. Sans-serif Control: • Headers ie. H1, H2, H3, H4, H5, H6 (predefined approximate sizes and bolds text) • Text color ie. Blue, green, red,….. • Text size ie. 8 px, 10 px or 8pt, 10 pt, 12 pt,…n • Font type ie. New Times, Verdana,… • Special effects ie. Bold, italics, underline,superscript, subscript etc Headers Font type Text Size Special Effects Text Color

21. Indenting Paragraphs • Can indent/outdent a paragraph to make it stand out. • Beware: if text separated by break lines Hi-light text or place cursor in the paragraph. Click indent or outdent icon in Property Inspector as many times to indent text over.

22. Page Properties: Changing the Background Color • For variety, you can change the background color of your Web page TIP: When starting a webpage, set the properties • To set a Background color • From menu, click on Modify > Page Properties • Click on Background fieldto open color menu. Select color and click OK. • To set a Background image • From menu, click on Modify > Page Properties • Click on Browse button beside the Background Image fieldand select the file. Click OK.

23. Graphics • Enhances the appearance of a web page • Images can be obtained from scanner, digital camera, clipart, images from internet • Common universal image formats • .gif – clipart • .jpg –photo • .png • Lower download times • Use smaller sized graphics • Resize a larger image in a graphics pkg rather than in Dreamweaver • Any resizing you do within Dreamweaver will not affect the download speed • Optimize: color resolution, compression will affect quality and size IMPORTANT IMPORTANT

24. Download time of page Benchmark ?? See status bar Total size of page appears in Kilobytes (includes text and images) • Estimated download time • To view/change speed • From menu select Edit>Preferences>Status bar @28.8K ________ sec @56K ________ sec @128K ________ sec

25. Image Attributes • Once image is inserted, click on it and then you can control attributes through Property Inspector panel Sharpen,contrast, crop Alignment Size Space around image Border Alternative text

26. Alternative Text • Displays text associated with the image • if using a text only browser • may display while graphic is loading • when mouse passes over the graphic • To meet Barrier Free Access" which is the initiative to make sure information, by those with those with disabilities requiring special software to "read" the information. ”

27. Creating Links You can create a link: • To another web page within your site • To another website on the Internet http://www.uwo.ca • To an e-mail address mailto:johndoe@uwo.ca • Creating an Image Hyperlink • Create multi- links within an image (image map) • To jump to a specific spot (other than beginning of the webpage) within a web page (setting bookmarks,anchors,targets) You can LINK to files of type: • Other html files(.htm, .html) • Proprietary software: Word, Excel, etc. • Images (.gif, .jpg etc) • Acrobat Reader files (.pdf)

28. #1 Hyperlink to a page within your website Or on the Internet Point to the file

29. #2 Hyperlink to a page on the Internet Opens in a new window Set to ____________ You can type URL address directly Must start with ___________________ ex. http://www.uwo.ca

30. #3 Hyperlink to an e-mail address • Select the text that you want to turn into a hyperlink. • From the menu, select • Insert > E-mail Link johndoe@uwo.ca Or enter directly mailto:johndoe@uwo.ca

31. #4 Creating an Image Hyperlink • Select the image that you want to turn into a hyperlink. • In the Property Inspector, by the Link field, click on the folder. • Select proper path directory and then highlight the file to link to and then click Select. • Notice that the image is now a hyperlink.

32. #5 Creating an Image Map Aka… ________________, _________ • Select the image • In the Property Inspector,type a descriptive name in the Map field. • Click on a drawing tool. Draw an area on the image using the tool. • In the Property inspector, Click on the folder beside the Link field, and proceed to indicate the file that the link will be associated with this hotspot.

33. #6 To jump to a specific spot Links – Within a Web Page/ or to another page Aka… “anchors””targets” “bookmarks” 2-Step Process (1) Create the anchor (2) Create the link to the anchor • To link to another spot within a web page or to a specific spot on another webpage • Useful when a page is very long and you want to jump to different sections of the SAME webpage or to a spot on a different webpage other than the beginning. http://www.thedancemovement.ca/faculty/index.html

34. #6 To jump to a specific spot 2 (2) Link to the anchor 1 (1) Create the anchor ashley #ashley http://www.thedancemovement.ca/faculty/index.html

35. #6 To jump the Top of The Page 1 top Predefined anchor#top BUT…. 2 Back to Top (2) Link to the anchor #top

36. Tables • Organize content into columns and rows by inserting tables Control web page layout and customize effects

37. Table Width:Expressed as % - covers a percentage of screen How do you know your resolution? Start - Control Panel Display Settings Stretch Stretch 640 x 480 Stretch 800 x 600 Stretch 1024 x 800 http://www.largnet.on.ca/

38. Table Width:Fixed- table width is fixed on screen How do you know your resolution? Start - Control Panel Display 640 x 480 ideal 800 x 600 1024 x 800 http://www.largnet.on.ca/

39. Draw a layout of your website using tables (use fixed 780 pixels for width)

40. Inserting a Table • Click at point where you want table to appear • From menu select Insert >Table • In the Insert Table dialog box, enter # of rows and columns. • Set the table width in terms of pixels or %

41. How to Select a Table • Place your mouse over one of the table’s cell grids and once you observe a red outline, single-click • Notice the Property Panel will reflect the table properties

42. Table – Merging & Splitting Cells • Provides a more flexible table layout for presentation purposes Split icon Merge icon Merging cells • Highlight the cell(s) that you wish to merge. • On Property inspector, click on Merge icon. Splitting cells • Highlight the cell that you wish to split. • On Property inspector, click on Split icon. A pop up box asks whether you are splitting into rows or columns and how many.

43. Table properties You can control: • Layout – center, left, right, justify • Width – size of table (pixels, percent) • Cell Padding – the space around the contents of each cell • Cell Spacing – the space between each cell in a table • Borders - size (value 0 = invisible), color Click anywhere on table Right-click and select Table >Select Table Property Inspector reflects table properties. Then set property values accordingly.

44. Cell properties You can control:(applied to one cell or a group of cells) • Horizontal alignment – text is center, left, right • Vertical alignment – text is aligned at top,middle,bottom • Width & Height of cell – as pixels, percent • Cell border – color (note: Table border must be >0) • Background color - color of a cell or set of cells 1/2 3 4 5 Select cell(s) you wish to change its property In Property Inspector (expand box), and select desire feature you wish applied.

45. Web Publishing Once your pages are ready, you must upload (transfer) the pages to your server with Secure Shell Client http://www.uwo.ca/its/doc/hdi/infoservices//ssh-telnet.html Or Can transfer directly from within Dreamweaver

46. Draw a layout of your website using tables (use fixed 780 pixels for width)

47. Dreamweaver Tips Web pages will NOT format as precisely as something like a MS Word document to be printed because everyone’s resolution is different and screen size is different. Design a “general” webpage and then save it and make copies for each page in your site and add the content to the copies Don’t forget to make an images folder! Put your images in the folder BEFORE you start adding them to your page. Try previewing your page in more than one browser It is easier to create the top level folder and subfolders first and then point Dreamweaver to that folder Always use lower case names with no spaces for all folder and all file names