Introduction to Multimedia Lecture #5 Setting up a Website Working with DW Instructor: Mohamed MAGANGA

gif How to start your design: Each webpage must have the same look

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

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

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 Dreamweaver Dreamweaver MX Dreamweaver MX for Dreamweaver Dreamweaver CS3 Dreamweaver CS4 Dreamweaver CS5 (latest one) More powerful, more features Style Sheet access improvements

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 Document Window Area where you build Your webpage (add text, images and other elements) Site Panel Property Inspector panel

Dreamweaver Windows/Panels Document window The actual working environment where you are entering text, images to build your web page Site Panel folder that you are currently working on Gives filenames, path directory etc. Property Panel  Characteristics of objects/text that you have inserted ie. Size, color, text font etc.

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 key to make panel appear and disappear. To close a panel simply click of the panel, and select “Close panel” Drag panel and lock it into place Show / Hide Panels

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

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 index.html Website for organization Polar bear site All webpages stored on H: polarbears Homepage or Splash page

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

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: To view another webpage within the site, the URL address would be:

Creating a New Site 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 ALWAYS DO THIS: You must identify to Dreamweaver 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

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 Which url site would show the webpage? a) b) c)Both (a) and (b) Example: If the file Services.html was uploaded to panther

Entering Text Paragraph break Leaves a blank line between lines Press Line break no space between lines Press 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)

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

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.

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

http :// ent/advising/index.html Important: when printed Identity Page Title property

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

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

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

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

Download time of page 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 Benchmark ________ ________ ________ sec

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

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. ”

Creating Links You can create a link: 1. 1.To another web page within your site 2. 2.To another website on the Internet To an address Creating an Image Hyperlink 5. 5.Create multi- links within an image (image map) 6. 6.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)

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

#2 Hyperlink to a page on the Internet You can type URL address directly Must start with ___________________ ex. Opens in a new window Set to ____________

#3 Hyperlink to an address 1.Select the text that you want to turn into a hyperlink. 2.From the menu, select Insert > Link Or enter directly

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

#5 Creating an Image Map 1.Select the image 2.In the Property Inspector, type a descriptive name in the Map field. 3.Click on a drawing tool. Draw an area on the image using the tool. 4.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. Aka… _________ _______, _________

#6 To jump to a specific spot Links – Within a Web Page/ or to another page 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. 2-Step Process (1) Create the anchor (2) Create the link to the anchor Aka… “anchors” ”targets” “bookmarks”

/index.html (1) Create the anchor (2) Link to the anchor 1 2 ashley #ashley #6 To jump to a specific spot

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

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

640 x x x 800 Table Width: Expressed as % - covers a percentage of screen How do you know your resolution? Start - Control Panel Display Settings Stretch

Table Width: Fixed - table width is fixed on screen 640 x x x 800 How do you know your resolution? Start - Control Panel Display ideal

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

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 %

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

Table – Merging & Splitting Cells Provides a more flexible table layout for presentation purposes 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. Split icon Merge icon

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 1. Click anywhere on table 2. Right-click and select Table >Select Table 3. Property Inspector reflects table properties. Then set property values accordingly.

Cell properties 1. Select cell(s) you wish to change its property 2. In Property Inspector (expand box), and select desire feature you wish applied. 1/ 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

Web Publishing Once your pages are ready, you must upload (transfer) the pages to your server with Secure Shell Client Or Can transfer directly from within Dreamweaver

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

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