Lập trình web .Chương 4: Dreamweaver pptx

29/08/2012 1 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Giảng Viên: Trần Anh Tuấn 1 LẬP TRÌNH WEB TRƯỜNG CAO ĐẲNG SƯ PHẠM DAKLAK KHOA NGOẠI NGỮ - TIN HỌC Khoa NN-TH Trường CĐSP DakLak Lập trình Web Chương 4 DREAMWEAVER Khoa NN-TH Trường CĐSP DakLak Lập trình Web Giới thiệu về Dreamweaver Khoa NN-TH Trường CĐSP DakLak Lập trình Web Giới thiệu  Dreamweaver là chương trình dùng để tạo trang web tĩnh, web động. Dreamweaver sẽ tự động phát sinh các tag HTML, CSS, Javascript, PHP, ASP thích hợp.  Dreamweaver là một công cụ trực quan, trong đó có thể bổ sung Javascript, biểu mẫu, bảng biểu và nhiều loại đối tượng khác mà không cần viết một đoạn mã nào  Dreamweaver có thể thiết kế bằng chế độ Design view hoặc Code view hoặc Code and Design  Dreamweaver là một thành phần trong bộ sản phẩm của hãng Adobe gồm nhiều sản phẩm như: Photoshop, Dreamweaver, Flash,… 4 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Các loại website  Xét về kỹ thuật thực hiện: Có thể chia như sau:  Static website: Là Website tĩnh, nội dung các trang web sẽ không thay đổi nếu không được người thiết kế hiệu chỉnh lại.  Dynamic Website: Là Website động, nội dung các trang web sẽ tự động thay đổi nếu dữ liệu trong cơ sở dữ liệu mà website kết nối được cập nhật.  Xét về vị trí lưu: Có thể chia như sau:  Local Site: Là website đang được lưu trên máy tính của người thiết kế, chưa đưa lên internet.  Remote Site: Là website nằm trên máy chủ WebServer. Sau khi cài đặt một RemoteSite, bạn có thể upload local website lên đó, để các máy trong hệ thống mạng có thể truy cập được. 5 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Các loại website  Xét về tính chất thông tin: Có thể chia như sau:  Website giới thiệu:  Là website căn bản và đơn giản nhất, dùng để giới thiệu về một cá nhân hay một đơn vị.  Ví dụ: một website của ca sĩ chứa các thông tin về lý lịch, bài hát ưa thích, lịch diễn của ca sĩ đó  Website loại này chứa ít trang, ít tốn kém vì dễ làm nhất.  Website thông tin:  Chứa nhiều thông tin, được sắp xếp thành nhiều đề mục dễ tra cứu. Website được cập nhật thường xuyên thông tin mới và được sắp xếp sao cho người xem tìm ngay được thông tin mình muốn tìm.  Ví du: site tin tức, show sản phẩm, nhạc …  Website truyền dữ liệu:  Được thiết kế đặc biệt để thu nhận thông tin từ xa. Một cơ quan, đơn vị có nhiều cơ sở thay vì phải đến tận đơn vị để lấy thông tin thì nay có thể ngồi tại chỗ để nhận thông tin qua mạng internet/intranet. Website này thuộc hàng cao cấp, đòi hỏi nhà thiết kế phải có trình độ trong lãnh vực IT và chuyên môn.  Ví dụ: site báo cáo số liệu sản xuất, bán hàng hàng ngày  Website thương mại:  Chứa thông tin hàng hoá và dịch vụ, chứa nhiều form và chứa các script tính toán để người tiêu dùng có thể mua và trả tiền ngay tại website. 6 29/08/2012 2 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Kế hoạch thiết kế một Website  Các yêu cầu cơ bản khi thiết kế website:  Xác định yêu cầu và mục đích của Website  Chuẩn bị nội dung cho các trang  Phác thảo khuôn mẫu (Template) cho trang, thường các trang có cùng chủ đề thì sử dụng chung một template  Xác định cấu trúc của Website, có 3 kiểu cấu trúc:  Tuyến tính  Phân cấp  Hình chóp 7 Khoa NN-TH Trường CĐSP DakLak Lập trình Web  Khi thiết kế Website cần lưu ý 2 vấn đề:  Nội dung chủ đề chính  chọn bố cục, hệ màu cho tương ứng, (ví dụ: Website thương mại phải sáng sủa, rõ ràng về bố cục, …)  thu thập đầy đủ tài liệu, phân nhóm theo nội dung  quyết định cần bao nhiêu trang, nội dung của từng trang  Chọn hình ảnh, logo, Banner, hệ thống nút liên kết, ảnh minh hoạ, ảnh bố cục, ảnh trang trí…  Phác họa sơ đồ liên kết trên giấy để thấy rõ mối liên kết giữa các trang đơn trong một website Kế hoạch thiết kế một Website (tt) 8 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Một số kiểu liên kết giữa các trang: 9 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Khởi động Dreamweaver  Start Programs Abobe Dreamweaver 10 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Màn hình Dreamweaver 11 Khoa NN-TH Trường CĐSP DakLak Lập trình Web  Insert Bar: Gồm các chức năng tiện ích dùng để chèn các đối tượng vào trang web  Common: Chèn các đối tượng: Image, Flash, Date, Template, …  Layout: Chứa các công cụ trình bày trang, gồm 3 chế độ: Standard, Expended, Layout  Forms: Chứa các công cụ tạo Form  Text: Dùng định dạng văn bản  HTML: chứa các công cụ tạo trang web bằng code view Màn hình Dreamweaver 12 29/08/2012 3 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Document Toolbar: Chứa các nút cho phép xem trang web ở dạng Design hay dạng Code  Show code view: Xem dạng trang HTML  Show Design view: Xem trang dạng thiết kế, sử dụng các công cụ của Dreamwerver  Show code and design view: Chia cửa sổ làm 2 phần: phần trên dạng code view, phần dưới dạng Design view  Title: tiêu đề của trang Web  Preview/Debug in Browser:Xem kết quả trang web thông qua trình duyệt web  Document Window: Cửa sổ dùng để tạo và hiệu chỉnh trang Web Màn hình Dreamweaver 13 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Properties Inspector: Hiển thị các thuộc tính của các đối tượng đang được chọn, đồng thời cho phép chỉnh sửa các thuộc tính đó Panel groups: nhóm các Panel cho phép quản lý các đối tượng trong trang Web  Bật / tắt các thanh Panel: Chọn menu Window  Chọn thanh Panel tương ứng  Mở rộng các thanh Panel: Click vào mũi tên ở góc trái của mỗi Panel Màn hình Dreamweaver 14 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Status bar: Thanh trạng thái, nằm dưới đáy của Document Window, hiển thị Tag Selector, Window size, Document size và Download time.  Tag Selector: Hiển thị các tag HTML tại vị trí hiện hành của con trỏ  Document size and Download time: Kích cở ước chừng của tài liệu và thời gian tải tài liệu xuống  Window size: Hiển thị kích thước hiện tại của tài liệu, được tính bằng Pixel. Khi định kích thước của trang web phải tính đến việc sao cho an toàn đối với mọi độ phân giải. Màn hình Dreamweaver 15 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Thao tác với Website 16  Bước 1: Menu Site  New Site  Bước 2: Đặt tên cho site rồi nhắp nút Next Tạo site Khoa NN-TH Trường CĐSP DakLak Lập trình Web Thao tác với Website 17  Bước 3: Chọn công nghệ xây dựng website.  Nếu làm web động: bạn chọn Yes… và công nghệ thực hiện (PHP,…).  Nếu làm site tĩnh: bạn chọn No…  Chọn No,I do not want to use a server technology  Nhắp Next Tạo site Khoa NN-TH Trường CĐSP DakLak Lập trình Web Thao tác với Website 18  Bước 4: Chỉ định cách thức làm việc với các file trong site và chỉ định folder chứa site  Chọn Edit local copies on my machine, then upload… Tạo site 29/08/2012 4 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Thao tác với Website 19  Bước 5: Chọn phương cách đưa website lên Internet  How do you connect to your remote server? chọnNone  Nhắp Next (Sẽ khai báo cách thức nết nối sau)  Bước 6: Nhắp nút Done kết thúc tạo site Tạo site Khoa NN-TH Trường CĐSP DakLak Lập trình Web Thao tác với Website 20  Menu Site  Manage Sites  Chỉnh site đã tạo:  Chọn site muốn chỉnh rồi nhắp nút Edit. Bạn sẽ được dẫn qua các câu hỏi đã gặp lúc tạo site. Muốn chỉnh thông số nào thì chỉnh khi thấy nó.  Sao chép cấu hình của site  Chọn site muốn sao chép rồi nhắp nút Duplicate.  Xóa cấu hình site  Chọn site muốn xóa rồi nhắp nút Remove. Các thông số về site sẽ mất, nhưng folder chứa site vẫn còn. Quản lý các site đã tạo Khoa NN-TH Trường CĐSP DakLak Lập trình Web Thao tác với Website 21  Export  Export khi muốn xuất những thông số về site ra 1 file text  Chọn site muốn export rồi nhắp nút Export, chọn vị trí và đặt tên file  Import  Import khi muốn tạo lại site từ file đã Export  Nhắp nút Import  Mở site để làm việc  Chọn site muốn làm việc rồi nhắp nút Done Quản lý các site đã tạo Khoa NN-TH Trường CĐSP DakLak Lập trình Web Thao tác với trang 22  Tạo trang HTML trống hoặc Layout có sẵn  B1: Menu File  chọn New  B2: Chọn Blank page  chọn HTML  Chọn None hoặc layout trong cột Layout  nhắp nút Create để tạo trang Tạo trang web 1 2 3 4 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Thao tác với trang 23  Tạo trang theo mẫu có sẵn  B1: Menu File  chọn New  B2: Chọn Page From Sample  Starter basic  chọn mẫu  nhắp nút Create để tạo trang Tạo trang web 1 2 3 4 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Thao tác với trang 24  Xem thử trang web  Nhấn phím F12 để xem thử  Hoặc  Thiết lập Browser khác: (Mặc định là IE) Preview Web 1 2 3 29/08/2012 5 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Thao tác với trang 25  Các chế độ làm việc với trang web:  Chế độ Code: Là chế độ để xem và làm việc với code HTML của trang.  Chế độ Design: Là chế độ chủ yếu để xem và làm việc với trang. Trang web sẽ hiện gần giống hệt theo ý của bạn ở chế độ này.  Chế độ Split: chia đôi màn hình. Phía trên hiện code HTML, phía dưới là chế độ Design.  Chuyển chế độ của trang:  Nhắp nút Code, Design, Split ở trên vùng soạn thảo (thanh Document) Chuyển chế độ Code, Design, Split Khoa NN-TH Trường CĐSP DakLak Lập trình Web Thao tác với trang 26  Lưu trang web  Nhắp menu File  Save /Save As / Save All  Mở trang  Nếu trang ở trong site: Nhắp đúp vào tên file trong panel Files.  Nếu file ở ngoài site: Nhắp menu File  Open è chọn file.  Đóng trang  Nhắp menu File  Close / Close All  Đổi tên file  Nhắp tên file trong panel Files  gõ phím F2  gõ tên file mới  Xóa file  Nhắp tên file trong panel Files  gõ phím Delete Các thao tác khác Khoa NN-TH Trường CĐSP DakLak Lập trình Web Thao tác với trang 27  Nhắp menu Modify  chọn Page Properties (Hãy mở 1 file có sẵn dữ liệu, ví dụ: page.html để thử các thuộc tính của trang) Thuộc tính trang Khoa NN-TH Trường CĐSP DakLak Lập trình Web Thao tác với trang 28  Tab Apperrance  Page font: Font mặc định cho trang.  Size: Cỡ chữ mặc định cho trang.  Text color: Màu chữ mặc định cho trang.  Background color: Màu nền cho trang.  Background image: Ảnh nền trang web  Repeat: Cách lặp lại ảnh nền  No Repeat: Không lặp lại ảnh nền  Repeat-x: Lặp lại ảnh nền theo chiều ngang trang web  Repeat-y: Lặp lại ảnh nền theo chiều dọc trang web  Repeat : Lặp lại ảnh nền theo chiều ngang và chiều dọc trang web  Left margin: lề trái trang web  Right margin: lề phải trang web  Top margin: lề trên trang web  Bottom margin: lề dưới trang web  Tab Title/Encoding  Title: Tiêu đề của trang web  Encoding: chọn Unicode (UTF-8) Thuộc tính trang Khoa NN-TH Trường CĐSP DakLak Lập trình Web Thao tác với trang 29  Tab Links:  Link font: font chữ liên kết (cùng với font của trang)  Size: cỡ chữ liên kết (pixel)  Link color: màu liên kết  Rollover links: màu chữ khi rê chuột vào liên kết  Visited links: màu chữ liên kết đã từng xem  Active links: màu chữ cho liên kết đang chọn  Underline style: kiểu gạch chân  Never: không có  Always: luôn có  Show: hiện khi chuột chạm vào  Hide: không hiện khi chuột rê vào Thuộc tính trang Khoa NN-TH Trường CĐSP DakLak Lập trình Web • Paragraph • Định dạng danh sách Định dạng nội dung 29/08/2012 6 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Paragraph 31  Giới thiệu:  Paragraph là 1 đoạn text gồm 1 hoặc nhiều hàng chữ nằm trong tag P, tag H1- H6.  Khi nhập chữ rồi Enter xuống hàng, Dw sẽ tự động bao quanh vùng text vừa gõ 1 tag p. Có thể thay đổi tag bao quanh đoạn như sau:  Chọn đoạn text  Trên thanh Properties/mục Format: chọn tag (Heading 1 - Heading 6, Paragraph)  Tag H1-H6 thường dùng khi định dạng các tiêu đề chương, bài, đề mục Khoa NN-TH Trường CĐSP DakLak Lập trình Web Paragraph 32  Định dạng paragraph và text:  Chọn chữ rồi dùng các nút trên thanh Properties: Công cụ Ý nghĩa Kiểu trình bày (tag) chứa đoạn: Heading1, Heading2, Font (Arial, Tahoma, Time New Roman, Vernada,…) Chọn các style CSS đã định nghĩa Cỡ chữ. Màu chữ. Mỗi màu là con số hệ 16, bắt đầu bằng dấu #. Có thể chọn bảng màu khác, hoặc hiện bảng chọn mọi màu. Khi bảng màu hiện ra, thay vì chọn màu trong bảng, bạn có thể trích màu ở nơi mà bạn thấy. (xem thêm ở mục dưới) Khoa NN-TH Trường CĐSP DakLak Lập trình Web Paragraph 33  Định dạng paragraph và text:  Chọn chữ rồi dùng các nút trên thanh Properties: Công cụ Ý nghĩa Chữ đậm Chữ nghiêng Chọn các style CSS đã định nghĩa Cỡ chữ. Màu chữ. Mỗi màu là con số hệ 16, bắt đầu bằng dấu #. Có thể chọn bảng màu khác, hoặc hiện bảng chọn mọi màu. Khi bảng màu hiện ra, thay vì chọn màu trong bảng, bạn có thể trích màu ở nơi mà bạn thấy. (xem thêm ở mục dưới) Khoa NN-TH Trường CĐSP DakLak Lập trình Web Paragraph 34  Định dạng paragraph và text:  Chọn chữ rồi dùng các nút trên tranh Properties: Khoa NN-TH Trường CĐSP DakLak Lập trình Web Paragraph 35  Sử dụng màu sắc:  Giá trị màu:  Một màu được tổng hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh lá cây (Green), Xanh nước biển (Blue).  Trong HTML một giá trị màu là một số dạng hexa (hệ đếm cơ số 16) có dạng như sau:  #RRGGBB  Trong đó: o RR - là giá trị màu Đỏ, từ 00 đến FF. o GG - là giá trị màu Xanh lá cây, từ 00 đến FF. o BB - là giá trị màu Xanh nước biển, từ 00 đến FF. Khoa NN-TH Trường CĐSP DakLak Lập trình Web Paragraph 36  Các mã màu: 29/08/2012 7 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Sử dụng hộp màu trong Dreamweaver 37 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Định dạng danh sách 38  UnOdered list  Là list gồm nhiều mục dạng liệt kê. Mỗi mục có 1 ký hiệu (bullet) ở đầu  Thực hiện : Chọn text rồi vào menu Text  List  UnOrdered List Chú ý : List dạng này nằm trong tag UL, mỗi mục nằm trong tag li Khoa NN-TH Trường CĐSP DakLak Lập trình Web Định dạng danh sách 39  Ordered list  Là list gồm nhiều mục dạng liệt kê. Mỗi mục có 1 con số ở đầu  Thực hiện: Chọn text rồi vào menu Text  List  Ordered List Chú ý : List dạng này nằm trong tag OL, mỗi mục nằm trong tag li Khoa NN-TH Trường CĐSP DakLak Lập trình Web Ký tự đặc biệt 40  Là những ký tự không gõ được từ bàn phím  Chèn: Insert  HTML Special Character  Chọn ký tự hoặc Other character  Line break (Shift- Enter) : Ngắt dòng  None line break space: ký tự khoảng trắng Khoa NN-TH Trường CĐSP DakLak Lập trình Web Iframe 41  Iframe là 1 vùng trong trang web chứa 1 trang web khác.  Chèn Iframe như sau:  Vào menu Insert  Tag  HTML Tags  Page Elements  Iframe  Insert  Cho biết các thông số của iframe:  Source: Địa chỉ trang web nằm trong iframe, trang ở website khác cũng được. Ví dụ: các file thông tin chứng khoán, thời tiết, giá vàng, ngoại tệ ở site khác  Name: tên iframe Width: độ rộng  Height: độ cao Alignment: cách canh  Scrolling: có hiện thanh cuộn không. Khoa NN-TH Trường CĐSP DakLak Lập trình Web Iframe 42  Xong OK  Nhắp Close 29/08/2012 8 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Marquee 43  Marquee là thanh cuộn, các đối tượng có thể đặt vào đó các hình ảnh, text … có thể được cuộn qua trái, qua phải, cuộn lên, cuộn xuống…  Thực hiện:  B1: Nhắp vị trí muốn chèn trong trang web.  B2: Chuyển qua cửa sổ code.  B3: Gõ tag marquee rồi gõ phím spacebar (khoảng trắng)  chọn thuộc tính của đối tượng marquee.  B4: Khi gõ xong các thuộc tính thì nhớ gõ dấu “>”  B5: Bạn gõ bất kỳ Text hoặc chèn hình vào.  B6: Gõ </marquee> để kết thúc tag marquee.  B7: Lưu trang web và xem thử. Khoa NN-TH Trường CĐSP DakLak Lập trình Web Marquee 44  Các thuộc tính thường dùng:  Behavior: cách cuộn của marquee. Các giá trị: scroll, slide, alternate  Bgcolor: màu nền.  Direction: chiều cuộn. Các giá trị: up, down, left, right  Hspace, vspace: khoảng cách từ marquee đến text xung quanh.  Loop: số lần lặp (-1 là mãi mãi).  Scroll amount: khoảng cách nhảy giữa các lần cuộn.  Scroll delay: thời gian dừng giữa 2 lần cuộn.  Width, Height: Độ rộng, độ cao của marquee. Khoa NN-TH Trường CĐSP DakLak Lập trình Web Marquee 45  Ví dụ: <marquee loop="-1" width="500" height="20" behavior="alternate" bgcolor="#CC6666" direction="right" > <span class="style2">Welcome to Dreamweaver</span> </marquee> Khoa NN-TH Trường CĐSP DakLak Lập trình Web • Giới thiệu • Chèn table • Thuộc tính của table • Các thao tác với table TABLE Khoa NN-TH Trường CĐSP DakLak Lập trình Web Giới thiệu 47  Dùng để tạo dữ liệu dạng bảng hoặc thiết kế layout  Mỗi table có cấu trúc html như sau: <table> <tr> <!—Mỗi hàng trong tag tr > <th> Dữ liệu trong ô 1</th> <th> Dữ liệu trong ô 2 </th> … </tr> <tr> <!—Mỗi ô trong trong tag th hoặc td > <td> Dữ liệu trong ô 1</td> <td> Dữ liệu trong ô 2 </td> … </tr> </table> Khoa NN-TH Trường CĐSP DakLak Lập trình Web Chèn table 48  Nhắp vị trí muốn chèn rồi vào menu Insert  Table (hoặc Insert bar  tab Common Table)  Chèn :  Nhắp vị trí muốn chèn rồi vào menu Insert  chọnTable  Rows: số hàng. Columns: số cột  Table Width: độ rộng table (tính bằng pixel hoặc %)  Cell Padding: khoảng cách từ đường viền của ô đến nội dung trong ô  Cell Spacing: khoảng cách giữa các ô  Header: cho biết table có vùng header hay không (top, left, both, none)  Caption: Nhãn của Table  Summary: diễn giải chi tiết table, chỉ hiện ở trong cửa sổ code  Nhắp OK 29/08/2012 9 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Chèn table 49  Chèn table: 3 dòng, 3 cột Khoa NN-TH Trường CĐSP DakLak Lập trình Web Thuộc tính của table 50 Số hàng, số cột Độ rộng table. Khoảng cách từ nội dung ô đến viền của ô Khoảng cách giữa các ô Cách canh table Độ dày khung viền Tên class css định dạng table Xóa thuộc tính width của các cột Xóa thuộc tính height của các hàng Chuyển đơn vị tính bề rộng cột thành pixels, % Khoa NN-TH Trường CĐSP DakLak Lập trình Web Thuộc tính của Ô (Cell) 51 Trộn ô Tách ô Canh nội dung theo chiều dọc Độ cao của ô Chuyển ô dữ liệu thành ô tiêu đề Canh nội dung theo chiều ngang Độ rộng của ô Cho/Không cho text tự động xuống dòng trong ô. Màu nền cho ô. Khoa NN-TH Trường CĐSP DakLak Lập trình Web Các thao tác với table 52  Thêm xóa hàng, cột  Thêm hàng, cột  Chọn 1 ô trong hàng/cột hiện hành rồi nhắp phải  Table  chọn lệnh:  Insert Row: chèn hàng phía trên  Insert Column: chèn cột bên trái  Insert Rows or Column: chèn hàng hoặc cột ở phía trên/phía dưới, bên trái hoặc bên phải ô hiện hành  Xóa hàng cột  Nhắp 1 ô trong hàng/cột muốn xóa rồi nhắp phải  Table Delete Row hoặc Delete Column  Chế độ Expanded table  Gõ phím F6 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Các thao tác với table 53  Merge cell  Chọn các ô cần merge  Nhắp phải Table  Merge Cell (hoặc nhắp nút MergeCell trên thanh Properties)  Split cell  Chọn ô cần chia  Nhắp phải Table  Split Cell (hoặc nhắp nút Split cell trên thanh Properties)  Chọn split theo hàng hoặc cột, số hàng/cột cần split Khoa NN-TH Trường CĐSP DakLak Lập trình Web Ví dụ các thao tác 54 29/08/2012 10 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Ví dụ các thao tác 55 Khoa NN-TH Trường CĐSP DakLak Lập trình Web • Giới thiệu • Panel CSS • Tạo Style • Quản lý style • Attach file CSS • Các thuộc tính CSS CSS - Cascade Style Sheet Khoa NN-TH Trường CĐSP DakLak Lập trình Web Giới thiệu 57  CSS là 1 kỹ thuật dùng để định nghĩa cách thể hiện của các đối tượng trong trang web. CSS cho phép bạn định dạng các đối tượng với rất nhiều đặc điểm (thuộc tính) mở rộng mà HTML thông thường không có.  CSS còn có những lợi điểm khác:  Định dạng trang web rất nhanh nhờ các style định dạng các tag, các style dạng class.  Giúp cho website của bạn có một sự nhất quán về cách trình bày các trang web.  Việc hiệu chỉnh trên CSS sẽ tự động cập nhật trên tất cả các nơi có dùng CSS.  Các định nghĩa css có thể được đặt trong 1 file riêng với các trang web, do đó giúp cho công việc trình bày trang web được độc lập với thiết kế cấu trúc trang web, thích hợp với các dự án làm việc nhiều người. Khoa NN-TH Trường CĐSP DakLak Lập trình Web Giới thiệu 58  Style: Là 1 tập hợp các đặc điểm định dạng.  Ví dụ: P { Color: Red; font-size:16; font-weight:Bold; }  Sheet: Là 1 tập hợp nhiều style  Vị trí lưu style: style dùng để định dạng đối tượng trong trang web. Style có thể lưu trong chính trang HTML hiện hành hoặc có thể lưu ở file riêng (.CSS)  Các kiểu style:  Style định dạng cho 1 tag trong toàn trang .  Ví dụ : style P { Color:blue} để đ.dạng cho mọi tag P trong trang web có màu chữ xanh  Style định dạng cho 1 đối tượng cụ thể có tên.  Ví dụ: style #tinxemnhieu { background-color: cyan} để định dạng cho đối tượng tên là tinxemnhieu có màu nền là cyan  Style định dạng cho 1 tag cho 1 vùng nào đó trong trang web.  Ví dụ: style #tinxemnhieu a { color: magenta} để định dạng cho mọi tag a trong đối tượng tên là tinxemnhieu có màu chữ là magenta Khoa NN-TH Trường CĐSP DakLak Lập trình Web Giới thiệu 59  Class:  Một class CSS là 1 tập hợp nhiều đặc điểm định dạng như: màu chữ, màu nền, cách hiển thị, khung viền,…  đặt cho các đặc điểm đó 1 cái tên.  Có thể sử dụng class định dạng cho các đối tượng khác.  Ví dụ: .tieudetin { font-size:16; font- weight:bold} Khoa NN-TH Trường CĐSP DakLak Lập trình Web Panel CSS 60  Là panel dùng để tạo và quản lý các style.  Mở panel CSS bằng cách:  C1: Nhắp menu Window  chọn CSS Styles  All  C2: Gõ phím Shift + F11.  C3: Nhắp chữ CSS bên phải của vùng soạn thảo [...]... Khoa NN-TH Trường CĐSP DakLak Lập trình Web Sử dụng Template cho trang web FileSave As Template File New: chọn Page from Template Chọn tên site  Chọn mẫu trong site  Nhắp nút Create   201 202 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Ví dụ Template THANK YOU! Q&A 203 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Lập trình Web Khoa NN-TH Trường CĐSP DakLak... DakLak Lập trình Web Tạo behavior (các bước chung) Lập trình Web Khoa NN-TH Trường CĐSP DakLak Xóa bỏ Behavior B1: Chọn 1 đối tượng HTML sẽ có behavior B2: Nhắp dấu + trong panel Behavior rồi chọn loại behavior  B3: Khai báo các tham số cho Behavior  B4: Chọn sự kiện muốn áp behavior   Nhắp Behavior Delete  147 148 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Các loại behavior  Lập trình Web Khoa... bên dưới 185 186 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Lập trình Web Khoa NN-TH Trường CĐSP DakLak 31 29/08/2012 Ví dụ minh họa  Ultra Menu THIẾT KẾ LAYOUT  Giới thiệu Layout với Table • Layout với Div • Sothink DHTML Menu • 187 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Giới thiệu Lập trình Web Khoa NN-TH Trường CĐSP DakLak Layout với Table  Là thiết kế bố cục cho trang web  Các loại layout... trúc tag phức tạp, khó sửa layout, nhưng dễ thực hiện  DIV: trang web load nhanh, cấu trúc tag đơn giản, dễ sửa layout, khó thực hiện 189 190 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Ví dụ Layout với Table Lập trình Web Khoa NN-TH Trường CĐSP DakLak Ví dụ Layout với Table 191 192 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Lập trình Web Khoa NN-TH Trường CĐSP DakLak 32 29/08/2012 Layout với Div ... cho firefox) ;  Để toàn trang web nằm giữa màn hình:  tạo style định dạng cho tag body với thuộc tính Text-align=center 195 196 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Lập trình Web Khoa NN-TH Trường CĐSP DakLak Ví dụ Layout với DIV THIẾT KẾ TEMPLATE Tổng quan Tạo template • Sử dụng template đã xây dựng • • 197 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Lập trình Web Khoa NN-TH Trường CĐSP DakLak... 2: Kết quả trong trình duyệt 109 110 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Bản đồ liên kết ảnh (Hotspot) Lập trình Web Khoa NN-TH Trường CĐSP DakLak Các nhóm nút liên kết  Ví dụ: liên kết đến các trang ứng chi nhánh Nút biến đổi hình (Rollover Image) Flash button  Flash Text   111 112 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Nút biến đổi hình (Rollover Image) Lập trình Web Khoa NN-TH Trường... Trường CĐSP DakLak Lập trình Web Menu cấp 3 Title: Tiêu đề của mục đang chọn, sẽ hiện ra khi đưa chuột vào mục này, (thường không gõ) Target: Tên cửa sổ đích sẽ hiện liên kết (thường không gõ) 165 166 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Spry Menu Bar ngang Lập trình Web Khoa NN-TH Trường CĐSP DakLak Spry Menu Bar dọc  Chèn và định dạng rất giống menu ngang Kết quả 167 168 Lập trình Web Khoa NN-TH... định 173 174 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Lập trình Web Khoa NN-TH Trường CĐSP DakLak 29 29/08/2012 Ultra Menu động UltraMenu: Nhắp Start Programs  UltraMenu  UltraMenu  Xuất hiện khung Templates chọn kiểu menu: Chọn 1 template vừa ý rồi nhắp OK  Khởi TẠO MENU SỬ DỤNG TOOL • • Ultra Sothink DHTML 176 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Ultra Menu Lập trình Web Khoa NN-TH... Khoa NN-TH Trường CĐSP DakLak Ultra Menu Lập trình Web Khoa NN-TH Trường CĐSP DakLak Ultra Menu 177 178 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Ultra Menu Lập trình Web Khoa NN-TH Trường CĐSP DakLak Ultra Menu Chèn 2 dòng lệnh vào trang 179 180 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Lập trình Web Khoa NN-TH Trường CĐSP DakLak 30 29/08/2012 Ultra Menu Ultra Menu Kết quả sau khi chèn 2 dòng lệnh... language="JavaScript1.2" src="meun1.js"> 181 182 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Sothink DHTML Lập trình Web Khoa NN-TH Trường CĐSP DakLak Sothink DHTML  Khởi động DHTML Menu: Start\Programs\SourceTec\Sothink DHTML Menu  Xuất hiện khung Startup chọn kiểu menu  OK 183 184 Lập trình Web Khoa NN-TH Trường CĐSP DakLak Sothink DHTML o Lập trình Web Khoa NN-TH Trường CĐSP DakLak Sothink DHTML . Trường CĐSP DakLak Lập trình Web Giới thiệu về Dreamweaver Khoa NN-TH Trường CĐSP DakLak Lập trình Web Giới thiệu  Dreamweaver là chương trình dùng để tạo trang web tĩnh, web động. Dreamweaver sẽ. Trường CĐSP DakLak Lập trình Web Giảng Viên: Trần Anh Tuấn 1 LẬP TRÌNH WEB TRƯỜNG CAO ĐẲNG SƯ PHẠM DAKLAK KHOA NGOẠI NGỮ - TIN HỌC Khoa NN-TH Trường CĐSP DakLak Lập trình Web Chương 4 DREAMWEAVER Khoa. CĐSP DakLak Lập trình Web Paragraph 36  Các mã màu: 29/08/2012 7 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Sử dụng hộp màu trong Dreamweaver 37 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Định