Transcript p1ab56j4hl1ijnp1f8so6e16r4.pps

WEB Editing
Adobe Dreamweaver
Module 1
Web Concepts
Web Concepts (p.2)
• Key terms o Understand internet range of service o Understand client/server functionality and
relationship o Understand common terms o Understand use of primary protocols
• Identify advantages of having website
• Understand process of getting a website online
• Recognize search engine optimization
• Choosing appropriate web element
• Recognize factors that impact web page download speed
• Recognize appropriate audio, video and graphical object
• Legal issues
• Understand the term copyright and its implication
• Understand website are subjected to laws of host country
1.1 Key Terms
1.1.1 Internet range of services
Internet carries a vast range of
information resources and services,
such as inter-linked hypertext
documents, email, file transfer and
instant messaging
1.1.2 Client/Server Functionality and
Relationship (p.3)
Client is usually a browser, e.g. Internet Explorer, Google Chrome, Safari, Firefox
etc.
The web browser requests the file and a web server returns the file.
A Client makes a Request to the Server, and then the Server Carries out the
Request.
Eg. Youtube video vs WhatsApp video
1.1.3 Common Terms (p.5)
• URL (Uniform Resource Locator) - The address of a specific Website. e.g. http://www.google.com
• HTTP (Hypertext Transfer Protocol) - A set of protocols used for exchanging hypertext files on the world wide web.
• File Transfer Protocols (FTP) - A set of network protocols used for exchanging files across the internet and between
computers.
• Hyperlinks - Hyperlinks allow users to click and navigate to the specified page or URL. It could be a word, phrase or image.
• 3 Types, Absolute, Relative & Root-Relative.
• Absolute Hyperlinks provide the complete URL of the linked document, including the protocol to use. Eg. http://
www.adobe.com/support/dreamweaver/contents.html
• Relative Hyperlinks ensure links will still work if files are moved within the current site. When linking to a page within the current
site, Relative Links should be used.
• When linking between a main domain and sub domain, Absolute Links should be used.
• When Absolute Hyperlinks are used, Hyperlinks will need to be modified if your domain name is changed.
• Web Hosting
• Web hosting simply means when a client pays a fee for space on a server to store a website for internet users to view.
• Search Engine
• Search engine is a software system that is designed to search for information on the World Wide Web. The information may be a mix of
web pages, images, and other types of files
1.1.4 Understanding Primary Protocols
• Protocol : When computers communicate with each other, there needs to be a common
set of rules and instructions that each computer follows. A specific set of communication
rules is called a protocol.
• TCP/IP (The Internet Protocol) suite is the set of communications protocols used for the
Internet and other similar networks. It is commonly also known as TCP/IP named from
two of the most important protocols in it which were the first two networking protocols
defined in this standard
• Transmission Control Protocol (TCP)
• Internet Protocol (IP)
• These two protocols were developed in the early days if the Internet by the U.S. military. The purpose was to
allow computers to communicate over long distance networks.
• Hypertext Transfer Protocol (HTTP)
• Hypertext Transfer Protocol is the protocol used to transfer data over the World Wide Web. That is
why all Web site address begin with "http://".
• Whenever we type a URL into our browser and press ENTER, our computer sends an HTTP request
to the appropriate Web server. The web server, which is designed to handle HTTP requests, then
sends to us the requested HTML page.
File Transfer Protocol (FTP)
FTP is the common method of
transferring files via internet
from one computer to another
eg. Client -> server
or server -> client
1.2 Exercise (p.8)
Define Terms
1.3 Advantage of Having a Website
(p.9)
Access to a global audience
24/7 present
Audience Interactivity and Increased Customer Support
Cost benefits
1.4 Process of Getting a Website
(p.10)
Domain name
Obtaining domain name
Choose a web hosting service
Factors to consider:
• Bandwidth
• Uptime
• Cost
• Features: eg. support php, asp.net
• Space
• Support service
1.5 Search Engine Optimization
Techniques (p.11)
• Common SEO techniques
• Include Page title
• Include Meta tag
• Meta tags are snippets of text that describe a page’s content; the meta tags don’t appear on
the page itself, but only in the page’s code. We all know tags from blog culture, and meta tags
are more or less the same thing, little content descriptors that help tell search engines what a
web page is about.
• The only difference between tags you can see (on a blogpost, say) and tags you can’t see is
location: meta tags only exist in HTML, usually at the “head” of the page, and so are only
visible to search engines (and people who know where to look). The “meta” stands for
“metadata,” which is the kind of data these tags provide – data about the data on your page.
• Include Keywords in the page content
• Including a site map
• Backlinks
1.6 Choosing Appropriate
Web Elements (p.12)
1.6.1 Factors affecting the speed
Audio
File
Compression
Animation
Video
Graphic
Improving download speed of a web page
•Reducing the amount of animation and
number of images in a web page.
•Using Compressed Audio/Video files.
1.6.2 File format to optimize download speed
Web Graphics
• Images make up over 50% of the average web page.
• By choosing appropriate web-based format for our images
we can minimize their impact on webpage download
speed.
• GIFs, JPEGs, and PNGs are the formats used to display
images on the web.
Audio Files
• WAVE is the most popular uncompressed sound format on
Internet.
• MP3 format is the newest format for compressed recorded
music.
Video Files
• Video should be compressed for web display.
• Flash FLV files give the smallest file size for video.
• The best format for the web is Flash, giving an excellent
combination of compatibility, video quality, and the small
file size,
1.7 Legal Issues (p.15)
1.7.1 Copyright
• Copyright is the right of the owner to reproduce or permit someone else to reproduce copyrighted works.
• copyrightable word include:
•
•
Literary works such as articles, stories, journals
computer programs
•
•
•
•
•
•
•
Pictures and graphics
Videos and animations
Blueprints of architecture
Music and song lyrics
Plays and screenplays
Audiovisual recordings such as movies
Sound recordings
• Reproduction can include:
•
Printing a web page
• Copying the HTML, JavaScript or other code of a page
• Downloading an image on our hard drive Printing an image
• When using someone else's graphics or text on our web page, it is best to obtain permission. All we need to do is explain what we
want to use the image or text for and ask permission to use it. We usually simply send email to the copyright owner of the page we
would like permission from.
1.7.2 Website content
Website content is subject to
the laws of the country where
the website is hosted.
There is no such thing as an
“international copyright” that
will automatically protect a
work throughout the world.
There are two principal
international copyright
conventions:
• Berne Conventions for the Protection of Literary and
Artistic Works (Berne Conventions)
• Universal Copyright Convention (UCC).
1.8 Exercise (p.17)
Q1. Advantage of having a website: Clothing retail, Restaurant, Edu p.9
Q2 Choosing a webs hosting service p.10
Q3. Common video file format: refer to p.14/15
Module 2 (p.18)
Fundamentals of HTML
2.1 Understanding Basic HTML (p.19)
HTML stands
for Hyper Text
Mark-up
Language.
An authoring
language used
to create
documents for
the World
Wide Web.
2.2 Understanding the role of W3C
Consortium (p.20)
World Wide Web Consortium
(W3C) is the main international
standard organisation for the
World Wide Web.
Develop standards for the
World Wide Web.
Benefits of their
recommendations are:
• Improves Interoperability of web sites across browsers
• Enhanced accessibility
• Consistent document type declarations
Module 3 Using HTML
Hands-on: Key in the html code
Overview (p.25)
3.3.1 Hands-on: Tags for text (p.26)
3.3.2 Hands-on: Headings Tags (p.27)
3.3.3 Hands-on: Bold and Italics (p.28)
3.3.4 Hands-on: List - Ordered Lists (p.29)
3.3.4 Hands-on: List - Unordered Lists (p.30)
3.3.5 Hands-on: Adding Links (p.29)
3.4 Exercise (p.34) first.html
3.5 Exercise (p.35)
Create red.html, green.html, blue.html, purple.html
Module 4 Design (p.37)
4.1 Web site planning and design techniques
• 4.1.1 Phase I: Information gathering
• Purpose, Goals, Target audience, Content Eg. Landing page vs company
website
• 4.1.2 Phase II: Planning
• Use of site map to organize the site structure (refer to p.40)
• The site map is a list of all main topic areas of the site, as well as sub-topics,
• This serves as a guide as to what content will be on the site, and is essential to developing a
consistent, easy to understand navigational system. The end-user of the web site must be kept in
mind when designing a web site. A good user interface creates an easy to navigate web site, and is
the basis for this.
• During the planning phase, web designer will also decide what technologies
should be implemented. Elements such as interactive forms, ecommerce,
flash, etc. are discussed when planning our web site.
4.1 Web site planning and design techniques (cont’d)
4.1.3 Phase III: design
• Mobile layout vs PC
screen design and
layout consideration
• Creating a page
layout template using
wireframe design
layout, example p.42
4.1.4 Phase IV:
Development
• Create web pages and
Uploading from
computer to the web
server.
4.1.5 Phase V: Testing
4.1.6 Phase VI:
Maintenance
• Update new content
on a regular basis
• SEO (search engine
optimization):
optimization of
website such as title,
description, keywords
to help achieve higher
search engine ranking
• Adding Backlinks
Note: Registering a
Domain is advisable to
be done at early stage
4.2 Good Practice in font selection (p.45)
• 1. Use real text rather than text within graphics.
• 2. Select basic, simple, easily-readable fonts.
• 3. Use a limited number of fonts.
• 4. Ensure sufficient contrast between the text and the background.
• 5. Avoid small font sizes.
• 6. Use relative units for font size.
• 7. Limit the use of font variations such as bold, italics, ALL CAPITAL LETTERS.
• 8. Do not rely only on the appearance of the font (colour, shape, font variation, placement, etc.) to
convey meaning.
• 9. Avoid blinking or moving text.
• The best practice is to use the most readable fonts. Unfortunately this is more
• Common web font are sans-serif font such as Arial, Courier, Verdana, Helvetica
4.3 Exercise (p.47)
Site map, etc
Module 5 Using Dreamweaver (p.48)
• Introduction to Dreamweaver
• File Management
• Creating and Saving New Web Page
• Creating New Web Page Based on Template
• Adding and Editing Descriptive Page Title
• Changing Between Source Code and Design View
Modul6 Enhancing Productivity (p.61)
• Setting Basic Preferences
• Using Help Function
Module 7 Working with Text (p.67)
Insert, Editing
and Deleting Text
Understanding
and Using
Relative Font Size
Refer to
CSSp73relativeFontSize.html
Applying Text
Formatting
Refer to
CSSp74PagePropertiesFont.html
Module 8 Working with Paragraph (p.76)
• Setting Paragraph Properties
• Inserting and Removing Paragraph and Line Breaks
• Refer HTMLp79paragraphAndlinebreak.html
• Working with Lists (refer to HTMLp8p1581lists.html)
• Ordered list
• Unordered list
• Definition
Module 9 Page Formatting (p.84)
• 9.1 Setting Page Margins
• Refer to HTMLp85pageProperties.html
• 9.2 Adding Page Background
• 9.3 Setting Hyperlink Colours
9.4 Exercise (p.90)
Create web page with heading, break, format, etc
Module 10 Hyperlink
(p.91)
• Understanding Hyperlink
• Absolute and Relative Links
• Hands-on (p.96)
• Working with Text and Image Hyperlinks, Adding Email Hyperlink,
Defining Target
• Refer to HTMLp94p133link.html
• Setting Anchor Links
• Refer to HTMLp99anchorlink.html
• Image Maps
• Refer HTMLp102imageMap.html
HTML history
• Tim Berners-Lee invented the "World Wide Web" in 1989, and the Internet took off in the 1990s.
• From 1991 to 1998, HTML developed from version 1 to version 4.
• In 2000, the World Wide Web Consortium (W3C) recommended XHTML 1.0.
• The XHTML syntax was strict, and the developers were forced to write valid and "well-formed" code.
• In 2004, WHATWG (Web Hypertext Application Technology Working Group) was formed in response to slow W3C
development, and W3C's decision to close down the development of HTML, in favor of XHTML.
• WHATWG wanted to develop HTML, consistent with how the web was used, while being backward compatible with older
versions of HTML.
• In the period 2004-2006, the WHATWG initiative gained support by the major browser vendors.
• In 2008, the first HTML5 public draft was released.
• WHATWG will develop HTML as a "Living Standard".
• The WHATWG Living Standard was published in 2012, and is continuously updated.
• W3C will develop a definitive HTML5 and XHTML5 standard, as a "snapshot" of WHATWG.
• The W3C HTML5 recommendation was released 28 October 2014.
Recourses: w3schools.com
Module 11 Working with HTML5 Part 1 (p.104)
• Understanding Basic HTML5
• HTML5 Editors
• HTML5 Elements
• HTML5 Headings
• HTML5 Paragraph
• HTML5 Formatting
• HTML5 Links
• HTML5 Head
Module 11 Working with HTML5 Part 1 (p.104)
• Understanding Basic HTML5
What is HTML5?
• HTML5 will be the new standard for HTML.
• previous version of HTML, HTML 4M , came in 1999. The web has changed a since then.
• HTML5 is still a work in progress. However, the major browsers support many of the new
HTML5 elements and APIs.
• Some rules for HTML5 were established:
• New features should be based on HTML, CSS, DOM, & JavaScript
•
•
•
•
•
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to the public
Module 11 Working with HTML5 Part 1 cont’d
• HTML5 Editors
• HTML file can be created using Notepad, which is good way to learn HTML
• HTML can also be edited by professional HTML editor like:
• Adobe Dreamweaver
• Microsoft web expression
• CoffeeCup HTML editor
• New HTML5 Elements
The most interesting new elements are:
• New semantic elements like <header>, <footer>, <article>, and <section>.
• Refer to HTMLp106oldFeatures.html, HTMLp106newFeatures.html
• New form control attributes like number, date, time, calendar, and range.
• New graphic elements: <svg> and <canvas>.
• New multimedia elements: <audio> and <video>.
Recourses: w3schools.com
Module 11 Working with HTML5 Part 1 cont’d
• HTML5 Elements
HTML Element Syntax
• An HTML element starts with a start tag / opening tag
• An HTML element ends with an end tag / closing tag
• Element content is everything between the start and the end tag
• Empty elements are closed In the start tag
• Most HTML elements can have attributes
Video format and browser support
Browser
MP4
WebM
Ogg
Internet Explorer 9
YES
NO
NO
Firefox 4.0
NO
YES
YES
Google Chrome 6
YES
YES
YES
Apple Safari 5
YES
NO
NO
Opera 10.6
NO
YES
YES
Audio format and browser support
Browser
MP3
Wav
Ogg
Internet Explorer 9
YES
NO
NO
Firefox 4.0
NO
YES
YES
Google Chrome 6
YES
YES
YES
Apple Safari 5
YES
YES
NO
NO
YES
YES
Opera 10.6
Module 12 Working with HTML5 Part 2 (p.138)
• HTML5 CSS
•
•
•
•
Styling can be added to HTML elements in 3 ways:
Inline - using a style attribute in HTML elements
Internal - using a <style> element in the HTML <head> section
External - using one or more external CSS files
• Example: refer to the following html files
• CSSp141inline.html
• CSSp139insideHead.html
• CSSp142external.html
Hands-on: refer
HTMLp109video.html
Hands-on p.122-137
Module 11 Working with HTML5 Part1 cont’d
• HTML5 Headings (Type in p.122)
• HTML5 Paragraph (Type in p.122)
• HTML5 Lines (Type in p.123)
• HTML5 comments (Type in p.123)
• HTML5 Formatting (Type in p.127-128)
• Using <strong> <em> <b> <i> etc
• Using <pre> <address>
• HTML5 abbreviations (p.129)
• Refer HTMLp129abbr.html
Module 11 Working with HTML5 Part1 cont’d
• HTML5 Links (p.131)
• HTMLp94p133link.html
• HTML5 Head (p.136)
• <title > tag: define a title for a document
• <base> tag: specify a default URL or default target
• Refer HTMLp136baseTag.html
Module 12 Working with HTML5 Part 2 (p.138)
• HTML5 styles – CSS (Cascading Style Sheets)
• 3 types of CSS - External, Internal, Inline.
• Internal Style Sheet is used, when a style is being used on only one web
page within your web site.
• Refer CSSp139insideHead.html
• Inline Style is used, when a unique style is being applied for a single
occurrence.
• CSSp141inlineBackgroundColor.html
• CSSp141inlineFont.html
• External Style Sheet is used, when you want to change the look of the
multiple pages at the same time.
• CSSp142external.html
Module 12 Working with HTML5 Part 2 (p.138) cont’d
• HTML5 Image
• Refer to HTMLp146imageAlign-depreciated.html
• Refer to HTMLp146imagefloatCSS.html
• HTML5 Tables
•
•
•
•
•
•
•
HTMLp148p149table.html
HTMLp151tableNoBorder.html
HTMLp152tableheaders.html
HTMLp154tableSpan.html
HTMLp155nestedElement.html
HTMLp156cellPadding.html
HTMLp157cellSpacing.html
Module 12 Working with HTML5 Part 2 (p.138) cont’d
• HTML5 List: <OL> and <UL>
•
•
•
•
Refer to HTMLp8p1581lists.html
Refer to HTMLp161ol.html
Refer to HTMLp162ul.html
Refer to HTMLp163nestedLists.html
• HTML5 grouping tag (container) <div> and <span>
• HTML elements can be groups together with <div> and <span> element
• HTML5 block elements: examples <h1> <p> <ul> <table>
• HTML5 inline elements: examples <b> <tb> <a> <img>
Module 12 Working with HTML5 Part 2 (p.138) cont’d
•HTML5 Layout
•Using <div>
• Refer to HTMLp165div.html
•Using <table>
• Refer to HTMLp167tableSpan.html
Module 13 Table (p.169)
Create table with Dreamweaver UI
Hands-on
• HTMLp174table.html
• 13.5 Exercise (p.176) Layout web page using table
Module 14 Graphical Objects
(p.177)
Module 14 Graphical Objects (p.177)
• 14.1 Graphic File Format (p.178)
• Three graphic file formats are generally used in web pages
— GIF, JPEG and PNG. currently, only GIF and JPEG file
formats are fully supported by most browsers.
• Microsoft Internet Explorer (4.0 and later) and Netscape
Navigator (4.04 and later) partially support the display of
PNG images. Unless we are targeting our site to users with
browser that support the PNG format, use GIFS or JPEGs
for broader appeal.
Module 14 Graphical Objects (p.177)
• 14,1.1 Web Graphics
• GIF ( Graphic Interchange Format) files use a maximum of 256 colours. GIFS are the best
for displaying noncontinuous-tone images or those with large areas of flat colours, such
as navigations bars, buttons, icons, logos, or other images with uniform colours and
tones. We can create GIFS with transparent backgrounds or animated GIFS, which are a
number oof GIFS saved as a single file.
• GIF file a a loseless file in which no data is lost when the file is compressed
• The JPEG ( Joint Photographic Expert Group) file format is the superior format for
photographic or continuous-tone images, because JPEG files can contain millions of
colours. JPEG files tend to be larger than GIF and PNG files.
• JPEG file used lossy compression in which data is lost when the file is compressed
• The PNG (Portable Network Group) file format includes support for indexed-colour,
greyscale, and true-colour images, and alpha channel support for transparency. PNG is
the native file format of Adobe Fireworks.
• PNG file a a loseless file in which no data is lost when the file is compressed
Module 14 Graphical Objects (cont’d)
• 14.2 Inserting and deleting images
• Refer to HTMLp180image.html
• 14.3 Setting image properties
• 14.4 Aligning images
• 14.5 Exercise (p.186) create web page with images
• 14.6 Layout Table (p.187)
• 14.6.1 AP Div Layer
• 14.6.2 Working with AP Divs
• 14.6.3 Adding content to AP element
14.5 Exercise (p.186)
Create web page with images
14.6 Layout Table (p.187)
• 14.6.1 AP Div Layer
• An AP (absolute positioned) element is an HTML page item which can contain text, images, or
any other content that we can place in the body of an HTML document. With Dreamweaver,
we can use AP element to lay out our page. we can place AP elements in front of and behind
each other, hide some AP elements while showing others, and move AP elements across the
screen. We can place a background image in one AP element and then place a second AP
element, containing text with a transparent background, in front of that.
• When we switch into Expanded view, we can add AP Divs to our page. these layers can help
us block out our page layout. For example, we could draw an AP Dciv along the top of our
page to hold a menu, one on the right side of the page for submenus, and one next to it to
hold content It can be useful to think of the layout as floating boxes in a grid of rows and
columns.
• When we create a layout cell on out page, Dreamweaver automatically creates a layout table
as container for the cell. A layout cell cannot exist outside of a layout table.
14.6 Layout Table (p.187)
• 14.6.2Working with AP Div (p.188)
• Drawing an AP div
• Manipulate AP elements
• 14.6.3 Adding content to AP element (p.194)
14.7 Exercise (p.195)
Create web page
Module 15 Forms (p.196)
• 15.1 Inserting forms
• 15.2 Adding form element
• 15.3 Adding submit and reset buttons
• 15.4 Setting out forms using tables
• 15.5 Setting form actions
• 15.6 Exercise : Create form (p.208)
• 15.7 Automation
• 15.7.1 Library items
• 15.7.2 Templates
Module 16 CSS concepts (p.217)
• CSS (Cascading Style Sheet) overview
• CSS may be used to define background colour, font sizes, margins and indents….etc.
• CSS Provide a consistent style format to be used by a number of pages in a website, however, CSS may not
work consistently in different browsers.
• CSS Reduce the amount of file space required for the website, because the size of the HTML file can be
reduced.
• CSS Improve accessibility.
• Structure of CSS rule
• Consist of element selector, followed by one or more declarations with property:value pair.
• Sample of CSS rule
• H1 { font-size: x-large; color: blue }
• H1 { font-size: x-large; color: blue }
• H2 { font-size: large; color: black }
• H1 { font-size: small }
• Types of CSS (Cascading Styles Sheets)
• 3 types of CSS - External, Internal, Inline.
• External Style Sheet is used, when you want to change the look of the multiple pages at the same time.
• Internal Style Sheet is used, when a style is being used on only one web page within your web site.
• Inline Style is used, when a unique style is being applied for a single occurrence.
Module 17: Using CSS (p.220)
• 17.1 Creating and saving new CSS file (p.221)
• 17.2 Creating and modifying CSS rules (p.223)
•
•
•
•
•
•
17.2.1 The styles overview
17.2.2 New style (class or custom style)
17.2.3 Defining an ID
17.2.4 Redefining an HTML tag
17.2.5 Compound style
17.2.6 Modifying CSS rules
• 17.3 Attaching external CSS (p.231)