1쪽
CLB Tin học - Mediaspace - HUFLIT SỬ DỤNG MACROMEDIA DREAMWEAVER MX Người soạn: Hoàng Đăng Quang Dreamweaver là một chương trình Visual Editor chuyên nghiệp để tạo và quản lý các trang web. Dreamweaver cung cấp các công cụ phác thảo trang web cao cấp, hỗ trợ các tính năng D HTM L (Dynamic HTML) mà không cần viết các dòng lệnh giúp các bạn không biết lập trình web cũng có thể thiết kế được các trang web động một cách dễ dàng, trực quan.Với Dreamweaver bạn có thể dễ dàng nhúng các sản phấm của các chương trình thiết kế web khác như Flash, Fireworks, Shockwave, Generator, Authorwave w ... Với Dreamweaver bạn có thế quản lý các Local và Remote site giúp cho việc quản lý các trang web trong các site cục bộ và các website điều khiến từ xa có thể đồng bộ. Ngoài ra Dreamweaver còn cho phép bạn chỉnh sửa trực tiếp HTML.VỚi Quick Tag Editor bạn có thể nhanh chóng bổ sung hoặc xóa bỏ một HTML mà không cần thoát khỏi cửa số tài liệu.Chế độ soạn thảo trang web bằng HTML giúp các bạn có thể thiết kế trang trực tiếp bằng ngôn ngữ HTML. Dreamweaver còn hố trợ các H TM L Styles và Cascading Style Sheet giúp bạn định dạng trang web nhàm tăng tính hấp dẫn khi duyệt các trang web này.Vùng làm việc của chương trình Deamweaver rất linh động và dễ sử dụng gồm các thành phần như sau: Document, Launcher, Object Palette, Property Inspector, Floating Palette và các context menu(menu ngữ cảnh) ... đế mở các thành phần này bạn có thế vào menu Window-> chọn tên của thành phần cần hiến t h ị. I. Cửa số làm việc: 1. Thanh m enu Ç j M a cro m e d ia D rea m w e ave r MX [U n title d D o cum en t (U n title d 1 )] - f f X 2. Thanh chèn ►Des*►De**.’.n'n y »►C o d eC ode ►A p p lic a tio n►A p p lic a tio n ■ ▼ fife *▼File« i? . 3. Thanh tài liệu (Document) File- E d it. View . S ite , | \ 0 | I t I ' ta I □ Vùng soạn thảo Edit Sites... V ;Local View V E Ö 'no site defined) D efnc a Site [£ 0 ^ Desktop 4. Tag selecti 57$ X289 w K M sec 5. Thanh th u ộ c tính (P ro p e rtie s )- Sat Non* Form« Non# V I jo*f*ufc Fow V V I J I I B / ĨỄE IE 3s s ® |(¿91 I_3 J>9«| s= J= £3 ±i II. Mỏ tà chức năng: 1. Thanh menu: Gồm các menu: - File: gồm các chức năng liên quan đến tập tin như: New, Open, Save, P rint... - Edit: gồm các chức năng hồ trợ việc soạn thảo: Copy, Cut, Paste, Undo, Find, Replace... - View: gồm các chức năng liên quan đến phần hiển thị: Code (Hiến thị phần mã HTML hay mã P H P ), Design (cho phép bạn xem trước trang web trước khi chạy trên WebBrowse), Code and Design (Hiến thị song song cả 2 chức năng).. ThiNganHang.com 1
2쪽
CLB Tin học - Mediaspace - HUFLIT - Insert: Dùng để chèn các thẻ hay đối tượng vào phàn soạn thảo: Image, Table, Forai... - Modify: Các chứng năng về chình sửa các thành phần của trang. Sử dụng menu này các bản có thế sửa chữa thuộc tính của các thẻ (tag), thay đối các thành phần của table... - Text: Các chức năng chỉnh sửa văn bản text: font, css, size, color, canh le (align). - Command: Hồ trợ các chức năng giúp bạn trong việc định dạng code, tạo photo album, toi ưu hình ảnh vói Macromedia Fireworks. - Site: Hồ trợ các chức năng như: tạo, mở và sửa site và để quản lý tập tin trong site. - Window: Giúp bạn có thể dễ dàng thao các cửa sổ của ứng dụng: panels, inspectors... - Help: Các tài liệu hướng dẫn sử dụng Dreamweaver. 2. Thanh Insert: Tương tự menu Insert, dùng để chèn các thẻ hay đối tượng như Image, table vào vùng soạn thảo. Chọn cách bố cục (có 2 cách là Standard và layout) cho trang web. 3. Thanh Document: Tương tự menu View, dùng đế chọn cách hiển thị cho vùng soạn thảo và một vài chức năng về chọn trinh duyệt để hiển thị trang w eb... 4. Thanh Tag selector: Bạn có thể sử dụng thanh này đế chọn nhanh các thẻ (tag). 5. Thanh Properties: Bạn có thể xem và thay đổi các thuộc tính của đối tượng hat text đã chọn. 6. Panel groups: - Design: Thực hiện các chức năng về thiết kế: c s s , HTML Style, Behavious. - Code: Giúp bạn xem cấu trúc thẻ của trang văn bản hiện tại, chọn nhanh một nhóm thẻ, một vài ebook giúp bạn tra cứu về cú pháp trong quá trình viết code. - A pplication: Các chức năng hồ trợ việc tạo ứng dụng web. - File: Đây là panel quan trọng nhất trong nhóm panel này, nó giúp bạn thêm, mở site và quản lý các tập tin trong site. - Answer: Các thông tin về hướng dẫn sử dụng và update Dreamwaver. III. Tao site trong Dreamwaver: 1.Tao thư mue äo (Virtual Directory): Chọn Start -> Control Panel -> Administrative Tools -> Internet Information Services 1. Phải chuột ngay Default WebSite -> Chọn Internet Information Services _______________________________ B B B New -> Virtual Directory... Bte ốcticn V*ÎW Help 2. Màn hình Welcome to the Virtual í- £11 ểia® ổ ■ II Directory Creation Wizard, chọn Next. 3. Màn hình Virtual Directory Alias, các bạn gõ bí danh (tên ữang web, bạn có thể đặt tên bất kỳ) vào textbox Alias, chọn Next. 4. Màn hình Web Site Content Directory, chọn đường dẫn đến thư mục vật lý trên đĩa. Nhấn vào nút Browse để chọn thư mục hay bạn có thể gõ vào textbox Directory, chọn N e x t. 5. Màn hình Access Permissions: Các bạn sẽ phân quyền cho phép user có quyền Read Create new Web Virtual Drectcry ThiNganHang.com 2
3쪽
CLB Tin học - Mediaspace - HUFLIT (đọc tập tin trong thư mục ảo), Run scripts (chạy các server script như PHP hay A S P ...), Execute (chạy các l'mg dụng ĨSAPĨ hay CGT), Write (quyền ghi vào thư mục ảo), Rrouse (duyệt nội dung của thư mục ảo). Các bạn cứ chọn như mặc định (quyền Read và Run Scripts), chọn Next. 6. Màn hình cuối cùng, Các bạn chọn Finish đề hoàn tất quá trình tạo thư mục ảo. Sau khi tạo xong các bạn sẽ thấy thư mục ảo bạn vừa tạo như hình bên dưới. ^ Internet Information Services B TOSHIBA (local computer) [-: L J Web Sites - ■ £ Default Web Site Ệ ^ IISHelp + A Bántott MyWebsite +^jCtüsiâlBÊperÎWebFc + C J aspnet_dient Cách tạo nhanh thư mục ảo 1. Dùng Explorer Tạo một thư mục bất kỳ trên đĩa. M yW ebsite P ro p e rtie s 2. Phải chuột, chọn Properties. General Sharing W ebS ham g Cu'Jornee 3. Chọn Tab Web Sharing. 4. Chọn Share this folder. « Internet Infoimabon Secvices 5. Tại cửa sổ Edit Alias, bạn có thể thay đổi tên Share on Deíauằ W eb Site của thư mục ảo hay phân quyền lại cho thư mục ảo. 0 Do no» share th*s foWef o Shaie this foldei -> Chọn OK đế hoàn tất việc tạo thư mục ảo. Alasgs________________ 2. Tao site trong Dreamwaver; ■ Chọn menu Site -> New Site... ■ Ớ màn hình thứ 1 (Editing Files) Gõ tên site bạn muon tạo vào textbox What would you like to name your site ? -> Chọn Next Site Definition for MedidSpace 1 Basic Advanced S ite D efin itio n Up]1— Editing Files Testing Files Shafing Rles A site, in Macromedia Dreamweaver MX, is a collection of Hes and folders that corresponds to a website on a server. ’ What would you like to name youf süe? Ị MediaSpace Example: MySite ■ Ớ màn hình thứ 2 (Editing Files, Part 2): Đây là bước cho phép các bạn chọn ngôn ngữ sữ dụng cho trang web, trong trường hợp này do chúng ta sẽ sử dụng PHP nên chọn Yes, I w ant to use a server tehnology (các bạn có thể chọn No, I do not want to use a server technology nếu chi làm trang web tĩnh, chỉ có sử dụng HTML, không sử dụng server script) và trong combobox Which server techology chọn PHP MySQL. -> Chọn Next. ThiNganHang.com 3
4쪽
CLB Tin học - Mediaspace - HUFLIT Editing Files, Part 2 Testing Files Sharing Files Do you want to work with a server technology such as ColdFusion, ASP.NET, ASP, JSP, or PHP? O No, I do not want to use a server technology. © Yes, I want to use a server technology. Which server technology? PHP MySQL v ■ Ớ màn hình thứ 3 (Editing Files, Part3) Chọn đường dần đến thư mục mà bạn đã chọn để làm thư mục ảo ở phấn 1 -> Chọn Next. Editing Files, Part 3 Testing Files sharing Files How do you want to work with your tiles during development? ® Edit and test locally (my testing server is on this computer) O Edit locally, then upload to remote testing server O Edit directly on remote testing server using local network Chọn đường dẫn O Editdirectly on remote testing server using FTP or RDS Where on your computer do you want to store your files? C:\MyWebsiteS Q Because IIS has been installed on your computer, your computer can be used as a local testing server. ■ Ớ màn hình thứ 4 (Testing Files): Các bạn gõ bí danh (alias) của thư mục ảo mà bạn đã tạo ở phần 1 vào sau chuồi: http://localhosƯ. Sau khi gõ xong bạn có thế nhấn vào nút Test URL để kiểm tra. 1 Editing Files Testing Files sharing Files Dreamweaver communicates with your testing server using HTTP [just like a browser), so it needs to know the URL of your site's root folder. What URL would you use to browse to the root of your site? http://localhost/MyW ebsite Example: http: //S erverOne/R ootFolder/ Ị Test URL ■ Ớ màn hình thứ 5 (Sharing Files), chọn No (do không sử dụng remote server) -> Chọn Next Editing Files Testing Files sharing Files W hen you are done editing a file, do ycu copy it to another machine? This might be the production web server or a staging server that you share with team members. O Yes. I want to use a remote server ® jNd ThiNganHang.com 4
5쪽
CLB Tin học - Mediaspace - HUFLIT ■ Ớ màn hình thứ 6 (Summary), chọn Finish để hoàn tất việc tạo site. Sum m ary Your site has the following settings: Local Info: Site Name: MediaSpace Local Root Folder: C:\MyWebsiteK Rem ote Info: Access: I'll set this up later. Testing Server: Access: Local/Network Remote Folder: C VMyWebsiteV Your site can be further configured using the Advanced Tab. IV. Sử dung Dreamwaver thiết kế trang web đon giàn: 1. Tao trang web m ói: - Chọn File -> N ew ... - Trong danh sach Category -> Chọn Basic Page. - Trong Basic Page -> Chọn HTML. - Nhấn nút Create 2. Đinh dang cho trang: Chọn Modify - ỳ Page Propertives... (Ctrl-J) Tiêu đề của trang, sẽ Page Properties hiện ra trên thanh taskb ar của W ebB row se Tille: Untitled Document OK 1 Hình nền •Background Image: Browse.. Apply Màu nền ^Background: „ Cancel Text: n . Visited Links: Q Màu text, link, link đã chọn (visited), link đang Links: Active Links: , có con trỏ chu ột chì vào (Active Link) Left Margin: Margin Width: Top Margin: Margin Height: - Chừa lề trái, trên. - Chừa lề the o chiều Document Encoding: Western (Latinl ) Reload rộng và chiều cao. / Tracing Image: Browse... Chọn UTF-8 (Unicode) Image Transparency: 100% đế sừ dụng tiếng Việt Transparent Opaque Document Folder: Site Folder: C:\MyWebsite\ ThiNganHang.com 5
6쪽
CLB Tin học - Mediaspace - HUFLIT 3. Sử dung thanh chèn (Insert): a. Tab Common: Image Placeholder\ Fireworks HTML HR1 Date Com m entI _ fCommon) Layout TeW Table« I Frames : Forms [Tempi ¿racters Mpdia Head Script Application E3 & Ü 13 i l i l §I I I !i 00 SI p 1 T T ĩ T T T Link Mail Name Anchor Image Flash Navigation Bar TatularB ar Tag Choose * Chèn link: - Cách 1: Chọn icon Link: H yperlink Nội dung liên ket - > Text: I OK URL của liên kết - > Link: Ö Cancel Cách mở liên kết- “ 5* Target: Tab Index: Help Title: Phím tắc mở liên kết' Access Key: - Cách 2: Chọn đoạn text trong vùng soạn thảo, gõ URL vào textbox Link trong thanh thuộc tính (Properties). * Chèn địa chỉ mail: Email Link Phần text hiện ra trên WebBrowse Đia chỉ email * Chèn hình ảnh: Select Image Source - Chọn hình ảnh cần chèn vào vị trí Select File Name From: 0 File system o Data Sources con trỏ trong vùng Image Preview Look in: j My Computer soạn thảo. ■^»System (C:) - Deamwaver sẽ n^D A T A (D:) yêu cầu save lại J , CD Drive (E:) ^ DVD Drive (G:) hình vừa chọn vào ; ^Shared Documents trong thư mục Hoang Dang Quang’s Documents chứa site. File name: OK Files of type: Image Files r gif;*-jpg;xipeg;* png) Cancel URL: Relative To: Document V Untoled-4 0 Preview Images ThiNganHang.com 6
7쪽
CLB Tin học - Mediaspace - HUFLIT b. Tab Layout: D rawLayoutTable DrawLayoutC ell ▼Insert Common[ Layout [ Text [ Tabl< Framgf Retins Templates Characters Media Head Script Application £ 2 I Standard View Layout View f I r ;| ti M Ạ InsertTable D raw Layer Chế độ xem chuẩn Chế độ layout (dùng để thiết kế bố cục cho trang) Chèn bảng (Insert Table): Insert Table □ Số dòng ^ Rows: Cell Padding: OK I Số cột > Columns; Cell Spacing: Cancel Độ rộng -------- Help > Width: 7 5 Percent (theo % hay pixel) Độ rộng đường viền > Border: * Chế độ Standard View: Đây là chế độ thường dùng để xem toàn bộ trang web. * Chế độ Layout View: Dùng đế thiết kế bố cục cho trang. Khi dùng chế độ này các bạn sử dụng DrawLayoutTable để vẽ Table (giống thẻ <table>) và DrawLayoutCell đế vẽ Cell (giống thẻ < t d > ) . BÀI TẬP TH ựC HÀNH Sử dụng Dreamwaver Thiết kế trang web sau: ü M ediaSpace M icrosoft In te rn e t Explorer File Edit View Favorites Tools Help * ô ' S i [ â Í Ỉ / Sear(:h 'i-VFavorites 10 '* - & H * ■ t ì http://localhost/MyWebslte/TMP7kb8m54blo,php V ỄJ<3o Links ” ^ • Go gle • V searchWeb * p*9*R*f* gaobtockwl g Options M EDIASPACE WWW. mediaspace. com CHÀO M Ử N G CÁC B Ạ N Đ Ế N VỚ I TRANG W EB CỦA CLB T IN HỌC "M ediaSpace club" đó là tên gọi của câu lạc bộ tin học trưòng Đ H D L Ngoại N gữ - Tin Học ra đời cách đây sáu năm. VÓI tuổi lên sáu, M S club đã cho ra đòi 16 tờ nội san tin học, cung cấp thông tin về tin học, thông tin các sản phẩm, các đề tài nóng bỏng trong sinh viên khoa cũng như các thủ thuật lập trình M S chib còn đưa ra m ột C D -R O M các phần mem thiết thiết thưc phục vụ cho việc học tập nghiên cứu của sinh viên khoa - " M ediaSpace Club - C D 1“ - VỚI phần design khá đẹp mẳt Trung bình mỗi tháng, M S club tổ chức một buổi Seminar về chủ đề do sinh viên khoa yêu cầu Những buèi Seminar là môi trưỉmg để sinh viên khoa hộc hỏi, trao đoi kinh nghiêm học tập lẫn nhau, là nen để smh viên mạnh dạng đưa ra ý kiến nêng của mình để giải quyết các vấn đề mang tính cấp bách- R ất bo ich cho sinh viên chuyên ngành và sinh viên ngành khác quan tâm đen tm học. Local IntranetThiNganHang.com 7
앞 7페이지만 표시됩니다. 전체를 보려면 자료를 다운로드하세요.
댓글 (0)
댓글이 없습니다. 첫 댓글을 남겨보세요!