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

Chia sẻ: Pham Van Thanh Thanh | Ngày: | Loại File: PDF | Số trang:34

Thêm vào BST

Báo xấu

171
lượt xem 47
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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,…...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Lập trình web .Chương 4: Dreamweaver

29/08/2012 TRƯỜNG CAO ĐẲNG SƯ PHẠM DAKLAK KHOA NGOẠI NGỮ - TIN HỌC Chương 4 LẬP TRÌNH WEB DREAMWEAVER Giảng Viên: Trần Anh Tuấn 1 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web 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. Giới thiệu về Dreamweaver  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 Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Các loại website Các loại website  Xét về tính chất thông tin: Có thể chia như sau:  Xét về kỹ thuật thực hiện: Có thể chia như sau:  Website giới thiệu:  Static website: Là Website tĩnh, nội dung các trang web sẽ  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ị. không thay đổi nếu không được người thiết kế hiệu chỉnh lại.  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,  Dynamic Website: Là Website động, nội dung các trang web 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. sẽ tự động thay đổi nếu dữ liệu trong cơ sở dữ liệu mà  Website thông tin: website kết nối được cập nhật.  Chứa nhiều thông tin, được sắp xếp thành nhiều đề mục dễ tra cứu.  Xét về vị trí lưu: Có thể chia như sau: 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.  Local Site: Là website đang được lưu trên máy tính của  Ví du: site tin tức, show sản phẩm, nhạc …  Website truyền dữ liệu: người thiết kế, chưa đưa lên internet.  Được thiết kế đặc biệt để thu nhận thông tin từ xa. Một cơ quan, đơn vị có  Remote Site : Là website nằm trên máy chủ WebServer. Sau 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 khi cài đặt một RemoteSite, bạn có thể upload local website hàng cao cấp, đòi hỏi nhà thiết kế phải có trình độ trong lãnh vực IT và lên đó, để các máy trong hệ thống mạng có thể truy cập 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 được.  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. 5 6 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 1
29/08/2012 Kế hoạch thiết kế một Website Kế hoạch thiết kế một Website (tt) Các yêu cầu cơ bản khi thiết kế website: 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  Xác định yêu cầu và mục đích của Website tương ứng, (ví dụ: Website thương mại phải sáng sủa,  Chuẩn bị nội dung cho các trang rõ ràng về bố cục, …)  thu thập đầy đủ tài liệu, phân  Phác thảo khuôn mẫu (Template) cho trang, thường các nhóm theo nội dung  quyết định cần bao nhiêu trang, trang có cùng chủ đề thì sử dụng chung một template nội dung của từng trang  Xác định cấu trúc của Website, có 3 kiểu cấu trúc:  Chọn hình ảnh, logo, Banner, hệ thống nút liên kết, ảnh  Tuyến tính minh hoạ, ảnh bố cục, ảnh trang trí…  Phân cấp  Phác họa sơ đồ liên kết trên giấy để thấy rõ mối liên kết  Hình chóp giữa các trang đơn trong một website 7 8 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Một số kiểu liên kết giữa các trang: Khởi động Dreamweaver Start Programs Abobe Dreamweaver  9 10 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Màn hình Dreamweaver Màn hình Dreamweaver 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 11 12 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 2
29/08/2012 Màn hình Dreamweaver Màn hình Dreamweaver Document Toolbar: Chứa các nút cho phép xem trang Properties Inspector: Hiển thị các thuộc tính của các web ở dạng Design hay dạng Code đối tượng đang được chọn, đồng thời cho phép chỉnh sửa các thuộc tính đó  Show code view: Xem dạng trang HTML  Show Design view: Xem trang dạng thiết kế, sử dụng các Panel groups: nhóm các Panel cho phép quản lý các đối công cụ của Dreamwerver tượng trong trang Web  Show code and design view: Chia cửa sổ làm 2 phần:  Bật / tắt các thanh Panel: Chọn menu Window  Chọn phần trên dạng code view, phần dưới dạng Design view thanh Panel tương ứng  Title: tiêu đề của trang Web  Mở rộng các thanh Panel: Click vào mũi tên ở góc trái của  Preview/Debug in Browser:Xem kết quả trang web thông mỗi Panel qua trình duyệt web  Document Window: Cửa sổ dùng để tạo và hiệu chỉnh trang Web 13 14 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Màn hình Dreamweaver Thao tác với Website Tạo site Bước 1: Menu Site  New Site  Status bar: Thanh trạng thái, nằm dưới đáy của Bước 2: Đặt tên cho site rồi nhắp nút Next  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. 15 16 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Thao tác với Website Thao tác với Website Tạo site Tạo site Bước 3: Chọn công nghệ xây dựng website. Bước 4: Chỉ định cách thức làm việc với các file    Nếu làm web động: bạn chọn Yes… và công nghệ thực hiện trong site và chỉ định folder chứa site (PHP,…).  Chọn Edit local copies on my machine, then upload…  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 17 18 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 3
29/08/2012 Thao tác với Website Thao tác với Website Quản lý các site đã tạo Tạo site  Bước 5: Chọn phương cách đưa website lên Internet  Menu Site  Manage Sites  How do you connect to your remote server?  Chỉnh site đã tạo: chọnNone  Chọn site muốn chỉnh rồi nhắp nút Edit.  Nhắp Next(Sẽ khai báo cách thức nết nối sau) 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.  Bước 6: Nhắp nút Done kết thúc tạo site 19 20 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Thao tác với Website Thao tác với trang Quản lý các site đã tạo Tạo trang web Tạo trang HTML trống hoặc Layout có sẵn  Export   B1: Menu File  chọn New  Export khi muốn xuất những thông số về site ra 1 file text  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  Chọn site muốn export rồi nhắp nút Export, chọn vị trí và đặt tên 3 file 1 Import  2  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 4 21 22 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Thao tác với trang Thao tác với trang Tạo trang web Preview Web Tạo trang theo mẫu có sẵn  Xem thử trang web   B1: Menu File  chọn New  Nhấn phím F12 để xem thử  B2: Chọn Page From Sample  Starter basic  chọn mẫu  nhắp  Hoặc nút Create để tạo trang Thiết lập Browser khác: (Mặc định là IE)  3 1 2 2 1 3 4 23 24 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 4
29/08/2012 Thao tác với trang Thao tác với trang Chuyển chế độ Code, Design, Split Các thao tác khác  Lưu trang web Các chế độ làm việc với trang web:   Nhắp menu File  Save /Save As / Save All Chế độ Code: Là chế độ để xem và làm việc với code HTML của trang.   Mở 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.  Nếu trang ở trong site : Nhắp đúp vào tên file trong panel  Chế độ Split: chia đôi màn hình. Phía trên hiện code HTML, phía dưới là Files. chế độ Design.  Nếu file ở ngoài site: Nhắp menu File  Open è chọn file. Chuyển chế độ của trang:   Đóng trang Nhắp nút Code, Design, Split ở trên vùng soạn thảo (thanh Document)   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 25 26 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Thao tác với trang Thao tác với trang Thuộc tính trang Thuộc tính trang  Tab Apperrance Nhắp menu Modify  chọn Page Properties  Page font: Font mặc định cho trang.  (Hãy mở 1 file có sẵn dữ liệu, ví dụ: page.html để Size: Cỡ chữ mặc định cho trang.  Text color: Màu chữ mặc định cho trang.  thử các thuộc tính của 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) 27 28 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Thao tác với trang Thuộc tính trang 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)  Định dạng nội dung 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 Paragraph  • Underline style: kiểu gạch chân  Định dạng danh sách •  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 29 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 5
29/08/2012 Paragraph Paragraph  Giới thiệu:  Định dạng paragraph và text:  Paragraph là 1 đoạn text gồm 1 hoặc nhiều hàng chữ nằm trong  Chọn chữ rồi dùng các nút trên thanh Properties: tag P, tag H1- H6.  Khi nhập chữ rồi Enter xuống hàng, Dw sẽ tự động bao quanh Công cụ Ý nghĩa vùng text vừa gõ 1 tag p. Có thể thay đổi tag bao quanh đoạn Kiểu trình bày (tag) chứa đoạn: Heading1, Heading2,... như sau: Chọn đoạn text  Font (Arial, Tahoma, Time New Roman, Vernada,…)  Trên thanh Properties/mục Format: chọn tag (Heading 1 - Heading 6, Paragraph) 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) Tag H1-H6 thường dùng khi định dạng các tiêu đề chương, bài, đề  mục 31 32 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Paragraph Paragraph  Định dạng paragraph và text:  Định dạng paragraph và text:  Chọn chữ rồi dùng các nút trên thanh Properties:  Chọn chữ rồi dùng các nút trên tranh 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) 33 34 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Paragraph Paragraph  Sử dụng màu sắc:  Các mã màu:  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. 35 36 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 6
29/08/2012 Sử dụng hộp màu trong Dreamweaver Định dạng danh sách 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 37 38 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Định dạng danh sách Ký tự đặc biệt  Là những ký tự Ordered list  không gõ được từ  Là list gồm nhiều mục dạng liệt kê. Mỗi mục có 1 con bàn phím số ở đầu  Chèn: Insert  HTML  Thực hiện: Chọn text rồi vào menu Text  List  Special Ordered List Character  Chọn ký tự hoặc Other Chú ý : List character dạng này nằm  Line break (Shift- trong tag OL, Enter) : Ngắt dòng mỗi mục nằm  None line break trong tag li space: ký tự khoảng trắng 39 40 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Iframe Iframe 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.  Xong OK  Nhắp Close 41 42 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 7
29/08/2012 Marquee Marquee Marquee là thanh cuộn, các đối tượng có thể đặt Các thuộc tính thường dùng:   vào đó các hình ảnh, text … có thể được cuộn qua  Behavior: cách cuộn của marquee. Các giá trị: scroll, trái, qua phải, cuộn lên, cuộn xuống… slide, alternate  Thực hiện:  Bgcolor: màu nền.  B1: Nhắp vị trí muốn chèn trong trang web.  Direction: chiều cuộn. Các giá trị: up, down, left, right  B2: Chuyển qua cửa sổ code.  Hspace, vspace: khoảng cách từ marquee đến text  B3: Gõ tag marquee rồi gõ phím spacebar (khoảng xung quanh. trắng)  chọn thuộc tính của đối tượng marquee.  Loop: số lần lặp (-1 là mãi mãi).  B4: Khi gõ xong các thuộc tính thì nhớ gõ dấu “>”  Scroll amount: khoảng cách nhảy giữa các lần cuộn.  B5: Bạn gõ bất kỳ Text hoặc chèn hình vào.  Scroll delay: thời gian dừng giữa 2 lần cuộn.  B6: Gõ để kết thúc tag marquee.  Width, Height: Độ rộng, độ cao của marquee.  B7: Lưu trang web và xem thử. 43 44 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Marquee Ví dụ:  Welcome to Giới thiệu • Dreamweaver Chèn table • • Thuộc tính của table • Các thao tác với table 45 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Giới thiệu Chèn table  Dùng để tạo dữ liệu dạng bảng hoặc thiết kế layout vị trí muốn chèn rồi vào menu Insert   Nhắp  Mỗi table có cấu trúc html như sau: 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 Dữ liệu trong ô 1  Rows: số hàng. Columns: số cột Dữ liệu trong ô 2  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 ô Dữ liệu trong ô 1  Header: cho biết table có vùng header hay không (top, Dữ liệu trong ô 2 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 47 48 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 8
29/08/2012 Chèn table Thuộc tính của table Xóa thuộc tính width của các cột Khoảng cách từ nội dung ô đến viền của ô Chèn table: 3 dòng, 3 cột  Số hàng, số cột Độ rộng table. Cách canh table Khoảng cách giữa các ô Độ dày khung viền Tên class css định dạng table Chuyển đơn vị tính bề rộng cột thành pixels, % Xóa thuộc tính height của các hàng 49 50 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Thuộc tính của Ô (Cell) Các thao tác với table Cho/Không cho text tự động xuống dòng trong ô. Thêm xóa hàng, cột   Thêm hàng, cột Canh nội dung theo chiều ngang  Chọn 1 ô trong hàng/cột hiện hành rồi nhắp phải  Table  chọn lệnh: Độ rộng của ô  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 Màu nền cho ô. Trộn ô Độ cao của ô  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 Tách ô Chuyển ô dữ liệu thành ô tiêu đề Chế độ Expanded table  Canh nội dung theo chiều dọc  Gõ phím F6 51 52 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Các thao tác với table Ví dụ các thao tác 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 53 54 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 9
29/08/2012 Ví dụ các thao tác CSS - Cascade Style Sheet • Giới thiệu • Panel CSS • Tạo Style • Quản lý style • Attach file CSS • Các thuộc tính CSS 55 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Giới thiệu Giới thiệu  CSS là 1 kỹ thuật dùng để định nghĩa cách thể hiện của  Style: Là 1 tập hợp các đặc điểm định dạng. các đối tượng trong trang web. CSS cho phép bạn định  Ví dụ: P { Color: Red; font-size:16; font-weight:Bold; } dạng các đối tượng với rất nhiều đặc điểm (thuộc tính)  Sheet: Là 1 tập hợp nhiều style mở rộng mà HTML thông thường không có.  Vị trí lưu style: style dùng để định dạng đối tượng trong  CSS còn có những lợi điểm khác: trang web. Style có thể lưu trong chính trang HTML hiện  Định dạng trang web rất nhanh nhờ các style định dạng các tag, hành hoặc có thể lưu ở file riêng (.CSS) các style dạng class.  Các kiểu style:  Giúp cho website của bạn có một sự nhất quán về cách trình bày  Style định dạng cho 1 tag trong toàn trang . các trang web.  Ví dụ : style P { Color:blue} để đ.dạng cho mọi tag P trong trang  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 web có màu chữ xanh có dùng CSS.  Style định dạng cho 1 đối tượng cụ thể có tên.  Các định nghĩa css có thể được đặt trong 1 file riêng với các Ví dụ: style #tinxemnhieu { background-color: cyan} để định  trang web, do đó giúp cho công việc trình bày trang web được dạng cho đối tượng tên là tinxemnhieu có màu nền là cyan độc lập với thiết kế cấu trúc trang web, thích hợp với các dự án  Style định dạng cho 1 tag cho 1 vùng nào đó trong trang web. làm việc nhiều người. 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 57 58 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Giới thiệu Panel CSS Class: Là panel dùng để tạo và quản lý các style.    Một class CSS là 1 tập hợp nhiều đặc điểm định dạng Mở panel CSS bằng cách:  như: màu chữ, màu nền, cách hiển thị, khung viền,…  C1: Nhắp menu Window  chọn CSS Styles  All  đặt cho các đặc điểm đó 1 cái tên.  C2: Gõ phím Shift + F11.  Có thể sử dụng class định dạng cho các đối tượng  C3: Nhắp chữ CSS bên phải của vùng soạn thảo khác.  Ví dụ: .tieudetin { font-size:16; font- weight:bold} 59 60 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 10
29/08/2012 Tạo Style Định dạng cho 1 tag trong toàn trang  Tên style: Định dạng cho 1 tag trong toàn trang   Giống tên của tag muốn định dạng  Ví dụ:  Định dạng cho 1 đối tượng cụ thể có tên  Muốn định dạng cho tag p, tạo style tên là p  Định dạng cho 1 tag bên trong 1 đối tượng có tên  Cách tạo:  Class  Nhắp + trong panel CSS  Select type: chọn Tag  Seletor Name: tên của style (TênTag )  Rule Definition: Chọn nơi đặt style  This document: Style đặt trong trang web hiện hành  New Style Sheet: Đặt style trong file CSS bên ngoài trang web hiện hành  Nhắp OK  Chỉ định các thuộc tính cần định dạng (font, nền, border, kích thước, align…) rồi nhắp OK 61 62 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Định dạng cho 1 tag trong toàn trang Định dạng cho 1 đối tượng cụ thể có tên  Tên style: Cách tạo:  1  #TênĐốiTượng  Ví dụ: 2 Muốn định dạng cho đối tượng tên là quangcao, tạo style tên  là #quangcao  Cách tạo  Nhắp + trong CSS panel 3  Select type: chọn Compound  Selector Name: đặt tên style (#TênĐốiTượng)  Rule Definition: Chọn nơi đặt style This document : Style đặt trong trang web hiện hành  New Style Sheet: Đặt style trong file CSS bên ngoài trang web hiện  (1) Select type: chọn Tag hành (2) Seletor Name: tên của style (TênTag )  Nhắp OK (3) Rule Definition: Chọn nơi đặt style  Chỉ định các thuộc tính cần định dạng (font, nền , border, kích thước, align…)  OK 63 64 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Định dạng cho 1 đối tượng cụ thể có tên Định dạng cho 1 tag bên trong 1 đối tượng có tên  Tên style: Cách tạo:  1  #TênĐốiTượng TênTag (Là #TênĐốiTượng kèm với tênTag muốn định dạng) 2  Ví dụ:  Muốn định dạng cho tag img trong đối tượng tên là quangcao, tạo style tên là #quangcao img  Cách tạo:  Nhắp + trong CSS panel 3  Select type: chọn Compound  Selector Name: đặt tên style (#TênĐốiTượng TênTag)  Rule Definition: Chọn nơi đặt style  This document : Style đặt trong trang web hiện hành  New Style Sheet: Đặt style trong file CSS bên ngoài trang web hiện hành (1) Select type: chọn Compound  Nhắp OK (2) Seletor Name: tên của style (#Tên ) (3) Rule Definition: Chọn nơi đặt style  Chỉ định các thuộc tính cần định dạng (font, nền, border, kích thước, align…)  OK 65 66 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 11
29/08/2012 Định dạng cho 1 tag bên trong 1 đối tượng có tên Class Cách tạo:   Tên style: 1  .TênClass (Là “.” kèm với tênClass ) 2  Ví dụ:  Style tên .tinhchinh  Cách tạo Nhắp + trong CSS panel  Select type: chọn Class  3 Selector Name: đặt tên style (.TênClass)  Rule Definition: Chọn nơi đặt style. (This document, New  Style Sheet)  Nhắp OK (1) Select type: chọn Compound  Chỉ định các thuộc tính cần định dạng (font, nền, border, (2) Seletor Name: tên của kích thước, align…)  OK style (#Tênđốitượng Tag ) (3) Rule Definition: Chọn nơi đặt style 67 68 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Định dạng cho 1 tag bên trong 1 đối tượng có tên Định dạng cho 1 tag bên trong 1 đối tượng có tên Cách tạo:   Set Class: 1  C1: Chọn đối tượng rồi nhắp phải tại tên của tag (trên 2 thanh Tag)  chọn Set Class  chọn class  C2: nhắp phải tại đối tượng  CSS Styles  chọn class 3  Chú ý: Khi set class cho 1 đối tượng, nếu qua code bạn sẽ thấy đối tượng có thuộc tính Class= Tên của Class  Bỏ set class (1) Select type: chọn Class  Chọn đối tượng rồi nhắp phải chuột tại tên tag trên (2) Seletor Name: tên của style (.TênClass ) thanh Tag  chọnSet Class  chọn None (3) Rule Definition: Chọn nơi đặt style 69 70 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Quản lý style Attach file CSS  Chỉnh sửa Style Dùng khi muốn liên kết trang web hiện tại với 1 file  Nhắp đúp tên style trong CSS panel hoặc chọn style trong CSS  panel rồi nhắp nút Edit CSS đã có  Đổi tên style  Thực hiện:  Nhắp tên style rồi gõ F2 hoặc nhắp 2 lần vào tên của style.  Xóa Style  C1: Nhắp nút Attach (hình số 8 nằm ngang) trong CSS  Nhắp tên style trong CSS panel  gõ phím Delete. panel  nhắp nút Browse để chọn file CSS  Chú ý:  Nếu xóa class. Các đối tượng vẫn còn gắn với class  Sao chép style  Nhắp phải tên Style  Duplicate  cho tên mới  Kiểm tra sự tương thích với trình duyệt  C2: Nhắp menu Text  CSS Styles  Attach Style  Không phải thuộc tính nào của CSS cũng được mọi trình duyệt hỗ trợ. Ví dụ: thuộc tính blink của text (Firefox hỗ trợ) Sheet  nhắp nút Browse để chọn file CSS  Để kiểm tra sự tương tính của các thuộc tính CSS đã dùng, thực hiện như sau: Nhắp menu File  Check Page  Check Browser Compability hoặc nhắp  nút Check Page trên toolbar Document 71 72 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 12
29/08/2012 Các thuộc tính CSS Định dạng liên kết Trong hộp CSS Rule A:link định dạng cho tất cả liên kết chưa được   nhắp trong trang A:visited định dạng cho tất cả liên kết đã được  nhắp trong trang A:hover định dạng cho liên kết trong trang đang  được đưa chuột vào A:active định dạng cho liên kết trong trang đang  được nhắp (chưa nhả chuột) A định dạng cho tất cả liên kết trong trang  73 74 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Định dạng liên kết Định dạng liên kết  #menu A:link định dạng cho tất cả liên kết chưa được nhắp  .menu A:link định dạng cho tất cả liên kết chưa được trong vùng có tên là menu nhắp trong vùng có class là menu  #menu A:visited định dạng cho tất cả liên kết đã được nhắp  .menu A:visited định dạng cho tất cả liên kết đã được trong vùng có tên là menu nhắp trong vùng có class là menu #menu A:hover định dạng cho liên kết đang được đưa chuột vào  trong vùng có tên là menu  .menu A:hover định dạng cho liên kết đang được đưa #menu A định dạng cho tất cả liên kết trong vùng có tên là  chuột vào trong vùng có class là menu menu  .menu A định dạng cho tất cả liên kết trong vùng có .menu A:link định dạng cho tất cả liên kết chưa được nhắp trong  vùng có class là menu class là menu .menu A:visited định dạng cho tất cả liên kết đã được nhắp trong   #TênBảng định dạng cho bảng vùng có class là menu .menu A:hover định dạng cho liên kết đang được đưa chuột vào  #TênBảng td định dạng cho các ô dữ liệu trong bảng  trong vùng có class là menu  #TênBảng th định dạng cho các ô tiêu đề trong bảng .menu A định dạng cho tất cả liên kết trong vùng có class là menu   #TênBảng caption định dạng cho nhãn của bảng 75 76 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Tổng quan Hình ảnh được sử dụng trong trang trí, bố cục trang  như logo, banner,... MEDIA Có 2 nhóm hình ảnh: minh họa và ảnh nền.  Tùy thuộc từng yêu cầu cụ thể mà chọn ảnh có kích  thước, KB phù hợp Tổng quan • Các kiểu hình ảnh: GIF, JPG,...  Chèn ảnh vào trang web • Lưu ảnh vào một thư mục riêng  dễ quản lý  • Ảnh nền trang Kích thước hình ảnh: tùy thuộc vào nhóm hình ảnh  • Chèn flash minh họa, ảnh nền mà xử lý kích thước cho phù hợp. 78 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 13
29/08/2012 Tổng quan Hình ảnh Chèn hình Một số loại hình ảnh   B1: Nhắp vị trí chèn hình Logo Biểu tượng công ty, cơ quan thường nằm góc trên trái màn hình. Tùy  Image (hoặc Insert bar  tab  B2: Menu Insert theo mẫu, có kích thước giao động từ 72 đến 120 pixel Common  Images  Images) Banner Bảng hiệu thường nằm ở giữa, phía trên màn hình, có thể kết hợp với  B3: Chọn file hình (nếu có trên máy của mình) hoặc gõ logo hay với hệ thống nút định hướng ngang. Bảng hiệu nhỏ có kích thước 800 x 72 (màn hình 800x600) địa chỉ của hình trong mục URL (nếu hình có trên Bảng hiệu lớn có kích thước 1024 x 120 (1024 x 768) Internet) Horizontal Hệ thống nút định hướng liên kết ngang, có thể ở phía dưới, hay nằm  B4: Alternate Text: Text thay thế cho hình (nếu cần) Navigation trong Banner Nút nhỏ 20x120. Nút lớn 30x140 Long description: gõ url của file mô tả hình (nếu cần). Muốn cho  user đến đó thì dùng javascript. Vertical Hệ thống nút định hướng liên kết dọc, có thể ở phía trái màn hình. Navigation Nút nhỏ 20x120. Nút lớn 30x140  Xong nhắp OK Nút chức năng, 20  50 pixel Icon Picture Tùy thuộc vào chủ đề, minh họa có kích thước riêng 79 80 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Hình ảnh Hình ảnh Chèn hình Chỉnh thuộc tính của hình  Chọn hình  Trên thanh Properties, có thể chỉnh: Vspace/Hspace: Khoảng cách từ hình tới chữ theo chiều dọc/ chiều  ngang W: bề rộng của hình.  H: bề cao của hình.  Src: địa chỉ, tên file hình.  Link: địa chỉ trang web sẽ hiện khi user nhắp vào hình.  Target: chỉ định “nơi” mà trang web liên kết sẽ mở ra. Nếu chỉ định  là _blank thì trang liên kết sẽ được mở ra trong một cửa sổ mới. 81 82 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Hình ảnh Hình ảnh Chỉnh thuộc tính của hình Chỉnh sửa hình Chọn hình  Chọn hình   Trên thanh Properties, có thể chỉnh:  Trên thanh Properties, có thể chỉnh: Low src: tên file hình phụ với kích thước nhỏ hơn (màu thường là đen  trắng hay xám). Crop Cắt: xén ảnh  Alt: dòng chữ hiện ra khi đưa mouse vào hình hoặc khi browser không hiện được hình. Brightness & Constract: Chỉnh độ sáng tối của ảnh Border: độ dày của đường viền quanh hình. Nếu để bằng 0 thì hình sẽ  không có viền. Sharpen: Chỉnh độ sắc nét cho ảnh Align: cách canh của hình so với văn bản xung quanh (Left, Right,…)  Tạo các hotspot: cho phép vẽ 1 vùng trên một hình để tạo nhiều liên kết  đến các trang web khác nhau. Crop: dùng để cắt bớt hình (cho nhỏ lại)  Brightness and Contrast: chỉnh độ sáng và độ tương phản của màu trong 83  84 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak hình Lập trình Web Lập trình Web 14
29/08/2012 Hình ảnh Hình ảnh Chèn khung ảnh Chèn ảnh vào khung ảnh Kích đúp vào khung ảnh cần chèn ảnh  Mục đích: chiếm chỗ trước cho 1 ảnh chưa có trong  trang web. Hộp thoại Select Image source, chọn ảnh cần chèn.   Cách chèn:  Menu Insert  Image Object  Image Placeholder Name: Tên đại diện  Width: chiều rộng  Height: chiều cao  Color: màu cho khung  Alternate text: nội dung câu  thông báo khi rê chuột vào khung 85 86 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Ảnh nền trang Flash Flash là 1 kỹ thuật được dùng để tạo các đối tượng   Ảnh nền là ảnh được tự động lợp đầy trang web. mang nhiều hiệu ứng đồ họa, âm thanh, sự kiện,  Nên chọn ảnh nền màu nhạt để dễ đọc nội dung. hoạt hình… và được lồng vào trong trang web làm  Chèn ảnh nền: Menu Modify  Page Properties  Tab cho trang web đẹp hơn, sinh động hơn (nhưng Appearance trang web sẽ tải nặng hơn). 87 88 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Flash Flash Chèn Flash vào trang web Chèn Flash Video    Nhắp vị trí muốn chèn  Nhắp vị trí muốn chèn  Menu Insert  Media  Flash  Menu Insert è Media è Flash Video  Chọn file flash hoặc gõ URL của file flash trong mục URL  Chọn file flash video hoặc gõ URL của file flash trong mục URL.  Nhắp OK  Ví dụ: chọn file MuaRoiBangTay.flv trong folder media  Gõ Title cho Flash (nếu cần) rồi nhắp OK  Chỉ định rộ rộng, độ cao  Nhắp OK 89 90 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 15
29/08/2012 Chèn nhạc và phim Nhắp vị trí   Menu Insert è Media è Plugin è chọn file nhạc/phim  Chỉnh kích thước : kéo cho rộng ra, cao lên HYPERLINK – TẠO LIÊN KẾT GIỮA CÁC TRANG  Kết quả trình duyệt hiện trang web : Giới thiệu về liên kết 1. Tạo một liên kết 2. Kiểm tra liên kết 3. Hiệu chỉnh liên kết 4. Liên kết bên trong trang web 5. Bản đồ liên kết ảnh 6. Các nhóm nút liên kết 7. 91 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Giới thiệu về liên kết Các loại địa chỉ Liên kết (hyperlink) nhằm nối các trang đơn thành Địa chỉ tuyệt đối:   một website. protocol, domain,  Là địa chỉ bao gồm đầy đủ 3 phần  Một liên kết nối từ trang nguồn sang trang đích file. gồm 3 thành phần:  Thường dùng khi liên kết sang website khác  Đối tượng được chọn làm nút liên kết  Ví dụ:  Địa chỉ URL của trang cần liên kết đến http://www.nhatnghe.com/ChuongTrinh/CCNA.html  Cửa số (target) hiển thị trang  Protocol là http Đối tượng làm nút liên kết: text, ảnh,...   Domain là www.nhatnghe.com Địa chỉ URL của trang liên kết đến:   File là ChuongTrinh/CCNA.html  Liên kết nội: liên kết các trang trong 1 website  Liên kết ngoại: liên kết đến trang thuộc website khác  Liên kết email: liên kết đến chương trình gửi mail 93 94 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web NhatNghe/ Các loại địa chỉ Các loại địa chỉ gioithieu.html index.html  Ví dụ Địa chỉ tương đối: Địa chỉ tương đối:  CHUONGTRINH  Là địa chỉ không đầy đủ. Không có protocol ccna.html và domain MICROSOFT  gioithieu.html tạo liên kết đến index.html thì địa MCSA.html  Thường dùng để liên kết giữa các trang trong nội bộ chỉ: index.html MCSE.html website  gioithieu.html tạo liên kết đến CCNA. html thì địa  Khi dùng địa chỉ tương đối, phải biết mình đang ở chỉ: ChuongTrinh/ccna.html đâu, liên kết đến đâu.  gioithieu.html tạo liên kết đến MCSA.html thì địa chỉ: ChuongTrinh/Microsoft/MCSA.html  CCNA. html tạo liên kết đến index.html thì địa chỉ là ../index.html  MCSA.html tạo liên kết đến index.html thì địa chỉ là ../../index.html 95 96 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 16
29/08/2012 NhatNghe/ Các loại địa chỉ Tạo liên kết gioithieu.html index.html Địa chỉ gốc (Ký hiệu là /)  CHUONGTRINH Tạo liên kết thường   Là địa chỉ bắt đầu bằng dấu / ccna.html Tạo liên kết đến tập tin  (tính từ gốc của website) MICROSOFT  Tạo liên kết đến địa chỉ email MCSA.html  Dùng để link trong nội bộ website MCSE.html  Ví dụ:  Từ bất cứ trang nào trong site, muốn tạo liên kết đến file index.html thì ghi địa chỉ là /index.html  Từ bất cứ trang nào trong site, muốn tạo liên kết đến file CCNA.html thì ghi địa chỉ là ChuongTrinh/CCNA.html  Từ bất cứ trang nào trong site, muốn tạo liên kết đến file MCSA.html thì ghi địa chỉ là ChuongTrinh/Microsoft/MCSA.html 97 98 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Tạo liên kết Tạo liên kết Tạo liên kết thường Tạo liên kết thường Địa chỉ trang đích Địa chỉ trang đích Browser for file Browser for file Point to file Point to file Cách 4:  Cách 1:   Chọn text hoặc hình  Chọn text hoặc hình  Kéo nút Point-to-File trỏ đến file đích  Gõ địa chỉ trong mục Link trên thanh Properties (dùng khi link đến Cách 5  site khác)  Chọn text hoặc hình  Cách 2:  Menu Insert  Hyperlink  Chọn text  Text: Dòng text hyperlink  Nhắp nút Browse (sau mục Link trên thanh Properties) để chọn file  Link: đích  Cách 3:  Target:trang cửa sổ mà trang đích hiện  Title: tiêu đề của link  Chọn text hoặc hình  Access Key: nhấn Alt + ký tự và nhấn Enter để liên kết  Kéo file bỏ vào mục Link  Tab Index: trình tự chọn nút khi nhấn phím tab 99 100 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Tạo liên kết Tạo liên kết Tạo liên kết đến tập tin Tạo liên kết đến địa chỉ email Mục đích: cho phép người dùng tải tập tin về máy. Mục đích: tạo liên kết đến chương trình gửi thư điện   tử. Cách tạo:   Cách tạo:  Chọn text hay hình ảnh  Chọn text hoặc ảnh  Trong Properties nhập vào ô link tên tập tin cần liên kết.  Menu Insert  Email Link  Nên nhấn vào để mở hộp thoại Select File để chọn tập tin  Text: Dòng text hyperlink cần liên kết.  Email: địa chỉ mail Chú ý: nếu tập tin không cùng thư mục của site  OK  hiện thời thì hộp thoại khác yêu cầu sao chép tập  Hoặc: gõ trực tiếp vào ô link trong properties theo cú pháp sau: tin này vào trong thư mục của site hiện thời.  mailto: địa chỉ email 101 102 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 17
29/08/2012 Kiểm tra liên kết Kiểm tra liên kết Kiểm tra trong DESIGN VIEW Kiểm tra một liên kết trong DESIGN VIEW Kiểm tra một liên kết trong DESIGN VIEW   Kiểm tra tất cả liên kết CHECK LINKS Kiểm tra tất cả liên kết CHECK LINKS   103 104 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Hiệu chỉnh liên kết Link bên trong trang web Bỏ link: Mục đích: xem các mục trong một trang web dài   nhanh chóng.  Kích phải tại text  Remove Tag hoặc Remove Link  Các bước tạo: Chỉnh đích:   B1: Tạo 1 tên điểm dừng (Anchor Name)  Chọn text  B2: Link tới Anchor name  Chỉnh đích trong mục Link trên thanh Properties 105 106 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Link bên trong trang web Link bên trong trang web Ví dụ: tạo liên kết cho phân loại và sử dụng   B1: Tạo Anchor Name 1  Nhắp vị trí Insert bar   Nhắp menu Insert  Named Anchor ( hoặc tab Common  nút name Anchor)  Đặt tên rồi nhắp OK  B2: Link tới Anchor name  Chọn text 2  Mục Link gõ #TênAnchor Chú ý: Anchor Name có phân biệt chữ hoa thường,  không khoảng trắng, không trùng nhau 1 1: Insert  Named Anchor 2 2: OK 107 108 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 18
29/08/2012 Link bên trong trang web Bản đồ liên kết ảnh (Hotspot) Ví dụ: tạo liên kết cho phân loại và sử dụng   Một ảnh có nhiều vùng, mỗi vùng liên kết đến một trang web khác. Dạng này gọi bản đồ liên kết. 1  Tạo hotspot  B1: Chọn hình  B2: chọn kiểu hotspot (ở góc dưới trái của thanh Properties) rồi vẽ chuột trên hình 2  B3: Nhập địa chỉ liên kết trong mục Link trên thanh Properties  Sửa hotspot  B1: Chọn hình B2: Chọn hotspot trên hình  B3: Chỉnh (kích thước, vị trí) 1   Xóa hotspot 2 B1: Chọn hình  B2: Chọn hotspot  1: Gõ Anchor Name vào Link  B3: Gõ Delete 2: Kết quả trong trình duyệt 109 110 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Bản đồ liên kết ảnh (Hotspot) 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 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Nút biến đổi hình (Rollover Image) Nút biến đổi hình (Rollover Image)  Rollover Images là hiệu ứng khi đưa chuột vào thì hình đó sẽ đổi thành 1 hình khác, khi chuột ra ngoài nó sẽ trở lại hình cũ. Ví dụ: chuyển đổi 2 hình   Cách tạo:  B1: Nhắp vị trí muốn chèn  B2: Menu Insert  Image Object  RollOver Image hoặc Insert bar  tab Common  Images  RollOver Images  B3: Khai báo thông số  Image Name: đặt tên.  Original image: chọn hình thứ nhất , hình này hiện ra trước tiên.  Rollover image: chọn hình 2, hình này sẽ hiện ra khi đưa chuột vào hình 1.  Preload rollover image: load 2 hình khi trang web vừa nạp xong  Alternate text: chữ hiện ra thay thế cho hình khi hình chưa/không hiện.  URL: địa chỉ trang web liên kết đến khi người xem nhắp chuột vào.  Chú ý: Nếu muốn đổi địa chỉ của hình 2 thì chuyển sang chế độ code.  2 hình không nhất thiết giống cỡ nhau   URL là tuyệt đối nếu như link đến ngoài site 113 114 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 19
29/08/2012 Flash Button Là chức năng tạo 1 file flash hoạt động như 1  button. FORM  Cách tạo:  Nhắp vị trí muốn chèn  Menu Insert  Media  Flash Button Style: Chọn kiểu nút Giới thiệu  • Button text: chữ trong nút (không gõ dấu  Tạo Form • unicode, chỉ gõ được với bảng mã vni, font vni) • Thuộc tính của Form  Bgcolor: màu nền • Các thành phần của Form  Save as: tên file flash sẽ được tạo ra  Link: địa chỉ file liên kết (trong site) 115 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Giới thiệu Giới thiệu Form dùng để tạo các biểu mẫu thu thập thông tin  của người xem trang web. Một Form có thể chứa nhiều thành phần như  TextField, CheckBox, RadioButton, ComboBox, List/Menu, TextAera… Mỗi form phải có ít nhất 1 nút đóng vai trò submit  (đưa dữ liệu lên server) Mỗi form có thể có 1 nút giúp xóa hết dữ liệu được  gõ trong form (nút Reset) Mỗi form nằm trong tag form  Một trang web có thể có nhiều Form, các form  không được lồng nhau 117 118 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web Tạo Form Thuộc tính của Form Nhắp vị trí muốn chèn form  Menu Insert  Form  Form (hoặc Insert bar   Form Name: là tên của form (duy nhất, không khoảng trắng)  tab Form  Form) Action: tên của file tiếp nhận dữ liệu của Form (URL).  Method: Là phương thức truyền dữ liệu lên server.   Có 2 phương thức: Post và get  Get: Kết hợp giá trị từng phần tử theo cặp tên-giá trị vào phía sau URL của file Tag Form trong chế độ Code nhận dữ liệu.  Ví dụ: action là file login.php .  Khi submit sẽ ghép như sau login.php ?username=abc&pass=123  Post: dữ liệu được ẩn đi khi truyền về server (cũng theo theo dạng key-value). Enctype: có giá trị là :  Chú ý: Khi chèn xong form thấy 1 hình chữ nhật đỏ đánh dấu  Application : mặc định, không cần gán  Mutipart: dùng khi form có 1 file cần upload. Mỗi lần thêm 1 file field vào form, form trong cửa sổ Dreamveaver. Tuy nhiên hình chữ nhật này sẽ dw sẽ tự động chỉnh entype thành multipart không hiện trong cửa sổ Browser. Class: Class css định dạng form  119 120 Khoa NN-TH Trường CĐSP DakLak Khoa NN-TH Trường CĐSP DakLak Lập trình Web Lập trình Web 20