View
7
Download
0
Category
Preview:
Citation preview
تصميم صفحات الويب التفاعلية
By Eng. Aws Nabeel
Email: aws@du.edu.om
http://www.aws-nabeel.com
2
HTML TEXT FORMATTING ELEMENTS <h2>HTML <small>Small</small> Formatting</h2> (Small Text)
<h2>HTML <mark>Marked</mark> Formatting</h2> (Highlighted Text)
<p>My favorite color is <del>blue</del> red.</p> (Deleted Text)
3
HTML CONT.<img src= "pic1.jpg" alt=“yahoo.com" width="104" height="142">
4
HTML STYLING<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
5
HTML TEXT COLOR<!DOCTYPE html><html>
<body> <h1 style="color:blue">This is a heading</h1> <p style="color:red">This is a paragraph.</p></body>
</html>
6
HTML TEXT FONTS<!DOCTYPE html><html>
<body> <h1 style="font-family:verdana">This is a heading</h1> <p style="font-family:courier">This is a paragraph.</p></body>
</html>
7
HTML TEXT SIZE<!DOCTYPE html><html>
<body> <h1 style="font-size:300%">This is a heading</h1> <p style="font-size:160%">This is a paragraph.</p></body>
</html>
8
HTML TEXT ALIGNMENT<!DOCTYPE html><html>
<body> <h1 style="text-align:center">Centered Heading</h1> <p>This is a paragraph.</p></body>
</html>
CASCADING STYLE SHEETS (CSS)
10
WHAT IS CSS?
Cascading Style Sheets (CSS): is a simple mechanism for adding style (e.g. fonts, colors, layouts) to Web documents.
Styles provide powerful control over the presentation of web pages.
11
STYLE SHEETA style sheet consists of a set of rules.Each rule consists of one or more selectors and a declaration block.
A declaration block consists of a list of declarations in curly braces ({}).
Each declaration consists of a property, a colon (:), a value, then a semi-colon (;).
12
STYLE SHEET SYNTAX EXPLAINED
selector propert
yvalue
rule
13
BASIC CSS SYNTAXCSS Syntaxselector {property: value;}
14
THREE DIFFERENT SCOPES OF CSS
Localconfined to a single element (tag)
Internalaffect elements in an entire page
Externalcan affect multiple pages
15
LOCAL STYLE SHEET Example
<h1 style="color:white; background:orange; font-weight:bold;">Internal Style Sheet Applied to Header 1</h1>
16
INTERNAL STYLE SHEETHow to create?
Put <style> </style> tag between <head> and </head> tags of your HTML page
Use type attribute to indicate the style sheet type, usually type=“text/css”
Specify a default style sheet language for the whole document by<meta http-equiv="Content-Style-Type" content="text/css" />
Put your set of style sheet rules in between <style> and </style> tags
17
EXTERNAL STYLE SHEETAn external style sheet is simply a text-only file that contains only CSS rules.
How to link to external style sheet?<link href=“URL of CSS File" rel="stylesheet" type="text/css" />
18
CSS USING DREAMWEAVER
Using Page properties
How to Modify the CSS Rule “Important”
Create your own CSS ClassCool Thing ;).
19
CREATING A CSS-BASED LAYOUT
Using AP DIV Tag
Using DW
20
USING PREBUILT LAYOUT IN DWExploring the prebuilt layouts.Using the prebuilt layouts.
21
SPRAY MENU IN DWAdding a menu bar.Customizing the Spry menu bar.
Recommended