View
23
Download
1
Category
Tags:
Preview:
DESCRIPTION
A Vision of Students Today. Introduction To Multimedia Lecture #5b Setting up a Website Working with DW Instructors: Mohamed MAGANGA. 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. - PowerPoint PPT Presentation
Citation preview
Introduction To Multimedia
Lecture #5bSetting up a
WebsiteWorking with DW
Instructors:
Mohamed MAGANGA
http://usability.coi.gov.uk/themes/page-layout/assets/images/1a-1.jpg
https://www.microsoft.com/mspress/books/sampchap/6403/0-7356-18607-04.gif
How to start your design:How to start your design:
Each webpage must have the same look
Things to Remember, especially Things to Remember, especially for Assignmentfor Assignment
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 1 - 1997Dreamweaver 4 - 2000---------------------------------------Dreamweaver MX - 2002Dreamweaver MX for 2004 - 2003Dreamweaver 8 2005Dreamweaver CS3 Dreamweaver CS4 Dreamweaver CS5 (latest one)
More powerful, more featuresStyle 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 WindowArea 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 <F4> 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
• 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 structureLinks 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
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/polarbearswww.uwo.ca/polarbearswww.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
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 existBut never worked with files in DW
File Names
Rules for File Names
1. Do not use spaces in your file names and folders (even though Word files allow it!) facts and stats.html vs factsandstats.html
2. 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) http://www.uwo.ca/industry/services.html
b) http://www.uwo.ca/industry/Services.html
c) Both (a) and (b)
Example:
If the file Services.ht
ml was uploaded
to panther
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)
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://www.brescia.uwo.ca/current/advising/index.html
Important:when printedIdentity
Page Title property
Formatting text
Control:a) Headers ie. H1, H2, H3, H4, H5, H6
(predefined approximate sizes and bolds text)
b) Text color ie. Blue, green, red,…..c) Text size ie. 8 px, 10 px or 8pt, 10 pt, 12 pt,…n
d) Font type ie. New Times, Verdana,…
e) Special effects ie. Bold, italics, underline, superscript, subscript etc
Headers
Text Color
Text Size
Font typeSpecial 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 fieldto 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 fieldand 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
IMPORTANTIMPORTANT
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 ??
@28.8K ________ sec
@56K ________ sec
@128K ________ sec
Image Attributes
Once image is inserted, click on it and then you can control attributes through Property Inspector panel
SizeAlignmentSpace
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. To another web page within your site
2. To another website on the Internet http://www.uwo.ca
3. To an e-mail address mailto:johndoe@uwo.ca
4. Creating an Image Hyperlink
5. Create multi- links within an image (image map)
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)
#2 Hyperlink to a page on the Internet
You can type URL address directly
Must start with ___________________
ex. http://www.uwo.ca
Opens in a new window
Set to ____________
#3 Hyperlink to an e-mail address
1. Select the text that you want to turn into a hyperlink.
2. From the menu, select
Insert > E-mail Linkjohndoe@uwo.ca
mailto:johndoe@uwo.ca
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”
http://www.thedancemovement.ca/faculty/index.html
http://www.thedancemovement.ca/
faculty/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 anchor2
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 480
800 x 600
1024 x 800
Table Width: Expressed as % - covers a percentage of screen
How do you know your resolution?
Start - Control Panel
Display Settings
Stretch
Stretch
Str
etc
hS
tretc
h
http://www.largnet.on.ca/
Table Width: Fixed - table width is fixed on screen
640 x 480
800 x 600
1024 x 800
How do you know your resolution?
Start - Control Panel
Display
http://www.largnet.on.ca/
ideal
Inserting a Table
1. Click at point where you want table to appear
2. From menu select Insert >Table
3. In the Insert Table dialog box, enter # of rows and columns.
4. 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 table2. Right-click and select Table >Select Table3. Property Inspector reflects table properties.
Then set property values accordingly.
Cell properties
1. Select cell(s) you wish to change its property2. In Property Inspector (expand box), and select
desire feature you wish applied.
1/2 3 5 4
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 Clienthttp://www.uwo.ca/its/doc/hdi/infoservices//ssh-telnet.html
Or
Can transfer directly from within Dreamweaver
Help with Assignment 3 …and more
1. Draw a layout of your website using tables
(use fixed 780 pixels for width)
Dreamweaver TipsDreamweaver 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
Recommended