Lập trình Web - Chương 4 Dreamweaver

29/08/2012 1 Khoa NN-TH Trường CĐSP DakLakLậ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 DakLakLập trình Web Chương 4 DREAMWEAVER Khoa NN-TH Trường CĐSP DakLakLập trình Web Giới thiệu về Dreamweaver Khoa NN-TH Trường CĐSP DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLập trình Web Khởi động Dreamweaver  Start Programs Abobe Dreamweaver 10 Khoa NN-TH Trường CĐSP DakLakLập trình Web Màn hình Dreamweaver 11 Khoa NN-TH Trường CĐSP DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLập trình Web Paragraph 36  Các mã màu: 29/08/2012 7 Khoa NN-TH Trường CĐSP DakLakLập trình Web Sử dụng hộp màu trong Dreamweaver 37 Khoa NN-TH Trường CĐSP DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLập trình Web Iframe 42  Xong OK  Nhắp Close 29/08/2012 8 Khoa NN-TH Trường CĐSP DakLakLậ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õ để kết thúc tag marquee.  B7: Lưu trang web và xem thử. Khoa NN-TH Trường CĐSP DakLakLậ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 DakLakLập trình Web Marquee 45  Ví dụ: <marquee loop="-1" width="500" height="20" behavior="alternate" bgcolor="#CC6666" direction="right" > Welcome to Dreamweaver Khoa NN-TH Trường CĐSP DakLakLậ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 DakLakLậ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: Dữ liệu trong ô 1 Dữ liệu trong ô 2 … Dữ liệu trong ô 1 Dữ liệu trong ô 2 … Khoa NN-TH Trường CĐSP DakLakLậ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 DakLakLập trình Web Chèn table 49  Chèn table: 3 dòng, 3 cột Khoa NN-TH Trường CĐSP DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLậ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 DakLakLập trình Web Ví dụ các thao tác 54 29/08/2012 10 Khoa NN-TH Trường CĐSP DakLakLập trình Web Ví dụ các thao tác 55 Khoa NN-TH Trường CĐSP DakLakLậ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 DakLakLậ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 DakLakLập trình Web Giới thiệ