งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

1.  เว็บไซต์ทั่วไปมักมีการจัดวาง (layout) ส่วนต่างๆ ดังนี้ ◦ ส่วนหัว (header) และเมนู (menu) ◦ เนื้อหา (content) ◦ ส่วนท้าย (footer)  มาสเตอร์เพจ คือ.

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "1.  เว็บไซต์ทั่วไปมักมีการจัดวาง (layout) ส่วนต่างๆ ดังนี้ ◦ ส่วนหัว (header) และเมนู (menu) ◦ เนื้อหา (content) ◦ ส่วนท้าย (footer)  มาสเตอร์เพจ คือ."— ใบสำเนางานนำเสนอ:

1 1

2  เว็บไซต์ทั่วไปมักมีการจัดวาง (layout) ส่วนต่างๆ ดังนี้ ◦ ส่วนหัว (header) และเมนู (menu) ◦ เนื้อหา (content) ◦ ส่วนท้าย (footer)  มาสเตอร์เพจ คือ เพจต้นแบบ ซึ่งเว็บเพจใดๆ ที่มีการใช้ มาสเตอร์เพจจะมีรูปแบบเหมือนกันทั้งหมด  ภายในมาสเตอร์เพจจะมี tag เพื่อบ่งบอกว่า ตำแหน่งนี้สามารถเปลี่ยนแปลงแก้ไขได้ 2

3  สร้างไฟล์ใหม่ เลือก template เป็น MasterPage  ตกแต่งหน้า MasterPage ตามต้องการ 3

4 แบบที่ 1 สร้างไฟล์เว็บเพจใหม่ขึ้นมา  สร้างไฟล์เว็บเพจใหม่ขึ้นมา แล้วเลือก Select master page  จากนั้นเลือกชื่อ master page ที่ต้องการใช้งาน 4

5 แบบที่ 2 มีไฟล์เว็บเพจเดิมอยู่ก่อนแล้ว  เพิ่ม ลงในบรรทัดแรกของ source page ของเว็บเพจหน้านั้น  ลบแท็ก,,,,, เพื่อลดความซ้ำซ้อนของการจัดรูปแบบ  เพิ่ม ………………. ระหว่าง source code ของเว็บเพจนั้น 5

6 6

7  สร้างไฟล์ Style Sheet ขึ้นมาใหม่ โดยไปที่ Project > add new item > style sheet  ไฟล์ที่ได้นามสกุลจะเป็น.css 7

8  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements 8

9  p { color:red; text-align:center; font-family:arial; }  CSS comment begins with "/*", and ends with "*/" 9

10  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;} // จัดให้กลางเฉพาะ 10

11 The class Selector 11

12  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 13

14  External Style Sheet  Internal Style Sheet hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}  Inline Style This is a paragraph. 14

15  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 16

17  By default, the image is repeated so it covers the entire element.  body { background-image:url('gradient2.png'); background-position:right top; } 17

18 18

19 19

20 20

21 21

22  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

23  Difference Between Serif and Sans-serif Fonts  On computer screens, sans-serif fonts are considered easier to read than serif fonts. 23

24  CSS Font Families 24

25  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 26

27  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

28  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 29

30 30

31 31

32  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

33  border-style 33

34 34

35  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 36

37  The CSS margin properties define the space around elements. 37

38 38

39 39

40  เพิ่มคำสั่งด้านล่าง ลงไปในไฟล์.aspx ภายในแท็ก head เพื่อเรียกใช้งาน stylesheet  40

41  สร้างไฟล์ master page จัดแต่งรูปแบบตามต้องการ โดยกำหนดให้มีส่วนชื่อของเว็บไซต์ และเมนูการใช้งาน  สร้างไฟล์ใหม่ให้ครบทุกเมนู แล้วกำหนดให้ใช้รูปแบบ จาก master page  ลิงค์เมนูต่างๆ เข้ากับหน้าเว็บเพจนั้นๆ 41

42 ภายในมาสเตอร์เพจ กำหนดให้มีการใช้ 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


ดาวน์โหลด ppt 1.  เว็บไซต์ทั่วไปมักมีการจัดวาง (layout) ส่วนต่างๆ ดังนี้ ◦ ส่วนหัว (header) และเมนู (menu) ◦ เนื้อหา (content) ◦ ส่วนท้าย (footer)  มาสเตอร์เพจ คือ.

งานนำเสนอที่คล้ายกัน


Ads by Google