Master Page CSS
advertisement
1
เว็บไซต์ทวั่ ไปมักมีการจัดวาง (layout) ส่วนต่างๆ ดังนี ้
◦ ส่วนหัว (header) และเมนู (menu)
◦ เนื ้อหา (content)
◦ ส่วนท้ าย (footer)
มาสเตอร์ เพจ คือ เพจต้ นแบบ ซึง่ เว็บเพจใดๆ ที่มีการใช้ มาสเตอร์ เพจจะมีรูปแบบ
เหมือนกันทังหมด
้
ภายในมาสเตอร์ เพจจะมี tag <asp:ContentPlaceHolder> เพื่อบ่งบอกว่าตาแหน่งนี ้
สามารถเปลี่ยนแปลงแก้ ไขได้
2
สร้ างไฟล์ใหม่ เลือก template เป็ น MasterPage
ตกแต่งหน้ า MasterPage ตามต้ องการ
<asp:ContentPlaceHolder>
3
แบบที่ 1 สร้ างไฟล์ เว็บเพจใหม่ ขน้ึ มา
สร้ างไฟล์เว็บเพจใหม่ขึ ้นมา แล้ วเลือก Select master page
จากนันเลื
้ อกชื่อ master page ที่ต้องการใช้ งาน
4
แบบที่ 2 มีไฟล์ เว็บเพจเดิมอยู่ก่อนแล้ ว
เพิ่ม <% … MasterPageFile=“~/MasterPage.master” ... %>
ลงในบรรทัดแรกของ source page ของเว็บเพจหน้ านัน้
ลบแท็ก <!DOCTYPE>, <head>, <title>, <style>, <body>, <div>
เพื่อลดความซ ้าซ้ อนของการจัดรูปแบบ
เพิ่ม <asp:Content ID=“ProductPage”
ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> ……………….
</asp:Content> ระหว่าง source code ของเว็บเพจนัน้
5
6
สร้ างไฟล์ Style Sheet ขึ ้นมาใหม่ โดยไปที่ Project > add new item > style sheet
ไฟล์ที่ได้ นามสกุลจะเป็ น .css
7
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
8
p
{
}
color:red;
text-align:center;
font-family:arial;
CSS comment begins with "/*", and ends
with "*/"
9
is used to specify a style for a group of
elements.
This allows you to set a particular style for
any HTML elements with the same class.
defined with a "."
.center {text-align:center;} //จัดให้ กลางทังเอกสาร
้
p.center {text-align:center;} //จัดให้ กลางเฉพาะ <p>
10
The class Selector
11
The id selector is used to specify a style for a
single, unique element.
The id selector uses the id attribute of the
HTML element, and is defined with a "#".
12
13
External Style Sheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Internal Style Sheet
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Style
<p style="color:sienna;margin-left:20px">This is a
paragraph.</p>
14
used to define the background effects of an
element.
body {background-color:#b0c4de;}
The background color can be specified by:
◦ name - a color name, like "red"
◦ Hex - a hex value, like "#ff0000“
◦ an RGB value - like "rgb(255,0,0)"
15
16
By default, the image is repeated so it covers
the entire element.
body
{
background-image:url('gradient2.png');
background-position:right top;
}
17
18
19
20
21
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
22
Difference Between Serif and Sans-serif Fonts
On computer screens, sans-serif fonts are
considered easier to read than serif fonts.
23
CSS Font Families
24
p {font-family:"Times New Roman", Times,
serif;}
p.normal {font-style:normal;}
p.italic {font-style:italic;}
body {font-size:100%;}
h1 {font-size:40px;}
h2 {font-size:2.5em;} /* 40px/16=2.5em */
p {font-size:14px;}
25
26
The four links states are:
◦
◦
◦
◦
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
27
a:link {color:#FF0000;}
/* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {background-color:#FF704D;}
/* mouse over link */
a:active {text-decoration:underline;}
/* selected link */
28
29
30
31
Margin - Clears an area around the border. The margin
does not have a background color, it is completely
transparent
Border - A border that goes around the padding and
content. The border is affected by the background color of
the box
Padding - Clears an area around the content. The padding
is affected by the background color of the box
Content - The content of the box, where text and images
appear
32
border-style
33
34
The CSS padding properties define the space between the element
border and the element content.
padding:25px 50px 75px 100px;
◦
◦
◦
◦
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
padding:25px 50px 75px;
◦ top padding is 25px
◦ right and left paddings are 50px
◦ bottom padding is 75px
padding:25px 50px;
◦ top and bottom paddings are 25px
◦ right and left paddings are 50px
padding:25px;
◦ all four paddings are 25px
35
36
The CSS margin properties define the space
around elements.
37
38
39
เพิ่มคาสัง่ ด้ านล่าง ลงไปในไฟล์ .aspx ภายในแท็ก head เพื่อเรี ยกใช้ งาน
stylesheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
40
สร้ างไฟล์ master page จัดแต่งรูปแบบตามต้ องการ โดยกาหนดให้ มีสว่ นชื่อของ
เว็บไซต์ และเมนูการใช้ งาน
สร้ างไฟล์ใหม่ให้ ครบทุกเมนู แล้ วกาหนดให้ ใช้ รูปแบบจาก master page
ลิงค์เมนูตา่ งๆ เข้ ากับหน้ าเว็บเพจนันๆ
้
41
ภายในมาสเตอร์ เพจ กาหนดให้ มีการใช้ tag ต่างๆ เพื่อแบ่งส่วนหน้ าออกเป็ น โดยเขียน
เป็ น external style sheet แยกไว้ อีกไฟล์หนึง่ ในการจัดรูปแบบ
body มีการกาหนด color, background-color, width, font-family, margin,
padding, border-width, border-style,
div.header มีการกาหนด margin, border, background-color,text-align
div.menu ul li a มีการกาหนด margin, padding, border, background-color,
width, line-height, vertical-align
div.menu ul li a:hover มีการกาหนด background-color, color, text-decoration
div.content มีการกาหนด font-size, background-color
div.footer มีการกาหนด background-color, font-size, text-align
42
