THIẾT KẾ WEB BẰNG PHOTOSHOP
BÀI 1 NGÀY 1.10 .2005 NGUYÊN NHÃ HƯỚNG DẪN
I.TẠO FOLDER :
A.TẠO FOLDER Ở DESKTOP :
1. Mở FrontPage > File > Close Site .
2. File > New > One Page Web Site > Ok.
3. File > New > More Page Templates > Chọn Tab Frames Pages > Chọn Mẫu Banner and Contents > Ok.
4. Hiện ra Trang Khung > Nhấp Phải vô Tab new page.htm > Nhấp Save > Gỏ : TrangKhung ( Gỏ chữ liền sát không hở ) > Save.
5. Khung Phải nhấp > Set Initial Page > Chọn index.htm > Ok.
6. Khung Trái nhấp > New Page > File > Save > Gỏ : DanhMuc > Save.
• Gỏ : Trang Chủ - Lessons - SoftWares - AlBum- Video - WebSites > Bôi đen ,cho ra giữa > Chữ to > Màu Chữ.
• Màu nền : Nhấp con trỏ trong khung Danh Muc > Format > Theme > Chọn 1 Theme. ( Hinh 2 )
7. Nhấp vô Khung Phải > Chọn 1 Theme.( Hinh 3 )
TẠO BANNER : Mở Photoshop
1. File > New > Chọn Width 1024 Pixels – Height 100 pixels .
2. Gradient chọn màu.
3. Filter > Texture > Texturiser > Ok.
4. Type Tool > Màu đen > Chọn Font > Gỏ : WebSite Út Bỉnh .
5. Layer > Layer Style > Blending Mode > Nhấp lên chữ Drop Shadow. Chọn Index Shadow – Chọn Outer Clow – Click Set Color ( Ô Vuông dưới chữ Noise ) > Chọn Vàng đậm > Cho tăng Spread và Site
Vô Inner Glow > Nhấp Set Color chọn Vàng đậm > Tăng Size > Chọn Bevel and Emboss > Kéo Depth nó sẽ đen chữ > Chọn Contour > Chọn Texture > Chọn Satin > Color Overlay > Gradient Overlay > Pattern Overlay > Strokes > Ok.
6. File > Save > Jpeg > Desktop > Nhấp Folder Utbỉnh3 ( Do FrontPage tự tạo ra nếu bạn không chịu tạo 1 Folder và đặt
tên )> Nhấp Folder Images > Gỏ Banner > Ok.( Hinh 4 )
DÁN BANNER :
1. Mở FrontPage ở Taskbar > Nhấp Set Initial Page > Images > Banner > Ok.
2. File > Preview in Browser > Internet Explorer > Yes. Hiển thị Banner bị hẹp không toàn diện.
7. Nhấp FP ở Taskbar > Kéo lằn ranh xuống > Nhấp Phải Khung Banner > Chọn Frame Properties > Gỏ : Width = 0 và Height = 0 > Ok.
8. Nhấp F12 > Yes. Close .Close Tất cả .Nhấp FP ở Taskbar.
9. Nhấp Phải Banner > Frame Properties > Frames Page > Frame Spacing gỏ 1 – Bỏ chọn Show Borders . Ok > Ok > F12 > Yes.
B.TẠO CÁC FOLDER KHÁC :
Ra DeskTop (CTRL+D) đã có sẵn FOLDER WEB ,F2 > Gỏ utbinh2
Nhấp vào Folder utbinh2 > Ra Trang kế tiếp > Phải > New > Folder > F2 > Gỏ : LESSONS . Và tạo tiếp các Folder Khác : SOFTWARES - ALBUM – VIDEO – IMAGES – MUSIC.( Hinh 5 )
Có thể đoán Trang WEB có tên :
http://www.freewebtown.com/tangquang...TrangKhung.htm
( Hinh 6 )
II.INSERT :
1. Copy các Tựa Bài Lessons > Folder Lessons > Paste.
2. Copy các Softwares đã Nén > Folder Softwares > Paste.
3. Tạo Album bằng SamSoft WebAlBum. Đến Trang Local Folder> Nhấp Ký hiệu Folder màu Vàng > Chọn Desktop > Xuống đáy Trang Desktop > Nhấp đúp utbinh2 > Chọn Folder AlBum .Ok > All. Chờ Generate 100% Complete > Nhấp YES là xem thử > Nhấp NO Trang WebAlbum đã lưu trong Folder > Close .No.
4. Copy các Files Video > Folder Video > Paste.
5. Copy các Hình cần làm BackGround cho các Trang Web > Folder Images > Paste
6. Copy Các Files Nhạc Midi > Folder Music > Paste.
7. KỸ XẢO CHUYỂN TRANG : Chọn chế độ Design.
Mở Trang Chủ > Format > Page Transition > Event chọn Page Enter > Transition Effect chọn Random .Ok.
PREVIEW : File > Preview in Browser > Microsoft Internet Explorer 6.0 > Nhấp từng Trang WEB xem hiệu ứng .Close . Tự động Save Trang Web vừa tạo .
III. TẠO CÁC TRANG WEB .HTM : Phím ALT + F1 .
1. Index.htm : Phải > New > BlankPage > Ra Index.htm > Format > Theme > Chọn 1 mẫu nền .Công cụ Insert Layer > Tạo 2 Khung bên Phải > Khung 1 Insert Hình > Khung 2 Insert Gỏ Chữ ( Giới thiệu Mục Đích lập Website nầy ) > Tab Index.htm > Save.
2. Lessons.htm : Giống Trên > Gỏ tên các Bài Lessons > Tab Lessons.htm > Save.
3. Softwares.htm : Giống Trên > Gỏ tên các Softwares > Tab Softwares.htm> Save.
4. Album.htm: Giống Trên > Liệt kê các Trang AlBum > Nếu chỉ có 1 Trang AlBum thì không cần lập Trang nầy.
5. Websites.htm : Giống Trên > Dán các Địa chỉ Websites vô >Bôi đen 1 tên Website > Phải > Cut > Gỏ lại Tựa Trang WEB > Bôi đen Tựa > Phải > Hyperlink > Ctrl V dán vào Hàng Address > Ok. Bôi đen tuần tự các Websites còn lại.
6. Video.htm : Giống Trên > Liệt kê các Video Clip > Tab video.htm> Save.
IV. TẠO HYPERLINK : Mở Trang KHUNG.HTM
1. Trang Chủ Index.htm : Bôi đen> Phải > Hyperlink > Chọn Index.htm > Ok
.( Hinh7)
2. Trang Lessons : Bôi đen > Phải > Hyperlink > Chọn Lessons.htm> Ok.( Hinh 8)
3. Trang Softwares : Bôi đen > Phải > Chọn Softwares.htm > Ok.( Hinh 9 )
4. Trang AlBum : Bôi đen > Hyperlink > Folder AlBum > Nhấp Đúp lên > Chọn index.htm.Ok.( Hinh 10 )
5. Trang WebSites : Đã tạo Hyperlink ở trên.( Hinh 11 )
6. LESSONS.HTM : Bôi đen Bài số 1 > Phải > Hyperlink > Folder Lessons > Nhấp Đúp lên Folder nầy > Chọn Bài số 1 > Ok.
7. SOFTWARES.HTM : Bôi đen Bài số 1 > Phải > Hyperlink > Folder Softwares > Nhấp Đúp lên Folder nầy > Chọn Software số 1 > Ok.
V.INSERT NHẠC :
1. Không cho nhạc vào Trang Khung.htm và Trang AlBum.htm.và Trang DanhMuc.htm.
2. Mở Trang htm > File > Properties > Browser > Nhấp Folder Music > Nhấpp lên bản Nhạc > Open > Ok.Nhấp Preview > Nhấp Phải Tab.HTM > Save.
VI.KIỂM TRA LẠI :
• Vô TRANG KHUNG .htm > F12 > Kiểm Tra Nhạc > Kiểm Tra Liên Kết.
• Khi lở xóa FolderWeb tại Desktop > Vô CuteFTP > Rê Folder Web ở bên Phải qua Trái để Download về .Thời gian Down bằng thời gian UpLoad.
(Hinh 12 )
Bài 67 NGÀY 20.9.2005 NGUYÊN NHÃ HƯỚNG DẪN
I. HÌNH BACKGROUND : Dán Hình nền vào Folder Images.
1. Mở THUCTAP1 > File > Properties > Formatting > Đánh dấu chọn Background Picture > Browser > Nhấp Đúp Folder Images > Chọn Hình nền > Open > Ok.
2. Nhấp Phải Tab index.htm > Save.
3. Kiểm tra lại : File > Preview in Browser ( F12 ) .Close.
Trả Lại = CTRL Z liên tục.
II. LÁ RƠI : File GIF Lá rơi. Dán File nầy vào Folder Images.
1. Mở THUCTAP1 > Mở trang index.htm.
2. Layer Lá rơi phải nằm dưới Layer Chữ.
3. Bôi đen chữ > Cut > Công cụ New > Phải . Paste dán chữ vào.
4. Nhấp Tab index.htm.
5. Chọn Công cụ Insert Layer > Nhấp Đường viền Hình Vuông vừa xuất hiện > Hiện 8 nút > Kéo rê phủ đầy Trang > Kéo Thanh cuộn bên Phải lên trên cùng > Nhấp vào màn hình ( Đang Thao tác trên Layer 1 ) > Menu Insert >Pictures > From File > Nhấp File Thu.gif > Insert.
6. Hiện ra Hình Lá Rơi > Nhấp vô > Giữ Ctrl rê qua 1 bên để tạo thêm 1 Copy > Nên copy thêm và chỉnh to, nhỏ từng File để khi lá rơi bạn sẽ thấy lá to , lá nhỏ > Nhấp Preview xem thử .
7. Nhấp Design > Công cụ Insert Layer > Hiện ra Ô vuông Layer 2 > Rê Ô vuông phủ đầy Trang Web > Nhấp vô màn hình .
8. Nhấp Tab new _ page _1.htm > Bôi đen chữ > Copy > Tab index.htm > Paste lên Layer 2 .
[ Kiểm tra Layer : Nhấp Design > view > Task Pane
( Ctrl F1 ) sẽ hiển thị thứ tự các lớp ] .
9. Preview > Nhấp Phải Tab index.htm > Save. Close.
1. Mở Cute FTP > Nhấp Đúp Folder THUCTAP1 bên Phải . Để cho nó hiển thị chi tiết.
2. Nhấp Folder THUCTAP1 bên Trái , để cho nó hiển thị chi tiết > Ra Trang index.htm > Rê Trang nầy qua Phải đè lên Trang index.htm.> Yes. Chạy.
3. Khi có chữ Directory Listing Completed là xong.
4. Nhấp Đúp Folder Images ở Phải > Nhấp Đúp Folder Images bên Trái > Chọn 2 Files Hình đã bổ sung là Hình Nền BB và Hình Lá Rơi > Rê qua bên Phải > Chạy.
5. Phải theo dõi Phần UP đáy Trang cho đến khi hoàn tất .Close.
(Hinh13- 14)
(Hinh 15 16 – 17)
(Hinh 18 )
BÀI 81 NGÀY 26.9.2005 NGUYÊN NHÃ HƯỚNG DẪN
1.ĐỂ CON CHUỘT LÊN 1 HÌNH RA HÌNH KHÁC :
One Page Web Site > Ok .Chọn Hình Cần Insert > Paste vô Folder Images . Insert 1 Hình Khác vào 1 Trang HTM > View > ToolBars > DHTML Effects > Ra Thanh DHTML > Nhấp lên Hình > Hàng On chọn Mouse Over > Hàng Apply chọn Swap Picture > Qua Hàng kế tiếp chọn Choose Picture > Ra cửa sổ Picture > Chọn Hình 2 > Open . Tab.htm > Save . Preview > F12.( Hinh 19 )
(Hinh 20 )
2. JAVASCRIPT : File Cẩm Nang Thời Gian
Vô Thư viện Javascript của E Chip > http://www.echip.com.vn/echiproot/javascript/index.html.
Ví dụ : Chọn số 114 > Cẩm Nang Thời gian > Ra Hình World Times > File > Save Page As.
Thực Hiện : Tạo One Page Web Site > Browser > Desktop > Gỏ Tên utbinh3
( Đây là Folder WEB ) > Open > Ok . Close . > Paste File JavaScript vào Folder WEB Muốn Paste File Java vô Folder WEB từ Desktop phải Close FrontPage .
File JAVASCRIPT là 1 Trang Web.htm. Nó Không giống như 1 Image.
Do đó Khi Hyperlink vào Trang index.htm bạn cần phải gỏ 1 tên trong Index.htm ( Gỏ tựa : Cẩm Nang Thời Gian ) ,xong tạo Hyperlink tên nầy với File Java.htm
Chú Ý : Không mở 1 lần 2 FrontPage.( Hinh 21 )
( Hinh 22 )
(Hinh 23 )
3.TRANG WEB CÓ HÌNH VÀ ĐỒNG HỒ :
1. File > New > One Page Web Site > Browser > Desktop > Create New Folder > utbinh3 > Ok > Open > Ok.
2. Nhúng vào Trang Index .htm : Nhấp đúp lên > Format > Theme > Chọn 1 mẫu >Save.
3. Chèn Hình : Insert > Picture > Save.( Preview F12 để xem thử có vừa khuôn Trang Web chưa? ) Xem xong Close .
4. Chèn JavaScript : Đang ở FrontPage > File > Desktop >Trước đó đã lưu trong 1 Folder ở Desktop > Nhấp Folder nầy > Chọn SnowMaker .htm ( Tuyết rơi ) > Đáy Taskbar > chọn Code > Tìm Chữ < SCRIPT > Giữ Shift đến </ SCRIPT >nhấp sau chữ nầy ( Cả đoạn đã được chọn) Copy > Click Phải lên Tab SnowMaker.htm > Close.
5. Vô Insert > Web Component > Cột Trái chọn Advanced Controls > Cột Phải chọn HTML > Finish> Paste vô khung HTML MarkUp > Ok.
6. F12 > Yes > Hiện cảnh Tuyết Rơi . Close. Tab Indext.htm > Save.( Hinh 24)
4. KỸ XẢO CHUYỂN TRANG : Chọn chế độ Design.
Mở Trang Chủ > Format > Page Transition > Event chọn Page Enter > Transition Effect chọn Random .Ok.
PREVIEW : File > Preview in Browser > Microsoft Internet Explorer 6.0 > Nhấp từng Trang WEB xem hiệu ứng .Close . Tự động Save Trang Web vừa tạo .
5.LÁ RƠI : File GIF Lá rơi. Dán File nầy vào Folder Images.
10. Mở THUCTAP1 > Mở trang index.htm.
11. Layer Lá rơi phải nằm dưới Layer Chữ.
12. Bôi đen chữ > Cut > Công cụ New > Phải . Paste dán chữ vào.
13. Nhấp Tab index.htm.
14. Chọn Công cụ Insert Layer > Nhấp Đường viền Hình Vuông vừa xuất hiện > Hiện 8 nút > Kéo rê phủ đầy Trang > Kéo Thanh cuộn bên Phải lên trên cùng > Nhấp vào màn hình ( Đang Thao tác trên Layer 1 ) > Menu Insert >Pictures > From File > Nhấp File Thu.gif > Insert.
15. Hiện ra Hình Lá Rơi > Nhấp vô > Giữ Ctrl rê qua 1 bên để tạo thêm 1 Copy > Nên copy thêm và chỉnh to, nhỏ từng File để khi lá rơi bạn sẽ thấy lá to , lá nhỏ > Nhấp Preview xem thử
6.BỘ ĐẾM SỐ NGƯỜI XEM :
Mở TRANG CHỦ > Nhấp nơi đặt bộ đếm > Menu Insert > Web Component > Hit Counter > Finish > Chọn 1 Kiểu Số > Reset Counter to > Ok.
7.CHỮ CHẠY :
Chọn nơi để chữ > Menu Insert > Web Component > Dynamic Effects > Marquee > Finish > Gỏ Chữ > Chọn Chế độ Hiển thị Xuất phát từ Right hay Left > Speed > Size .( Hinh 25 )
Út Bỉnh thực tập
Tạo Trang WEB
HÌNH CỬ ĐỘNG bằng Images GIF
BÀI 23 NGÀY 6.9.2005 NGUYÊN NHÃ HƯỚNG DẪN
1. Mở Desktop > Phải > New > Folder > Phải > Rename > Gỏ TRANGWEBDONG . Enter.
2. Mở nơi chứa Hình Gif .Chọn Hình > Phải > Copy . Close.( Hình 26 ).
3. Mở Desktop > Folder TRANGWEBDONG > File > New > Folder > Gỏ images > Enter > Phải > Paste. Close.
4. Mở FrontPage > File > Open Site > Look in chọn Desktop > Chọn Folder TRANGWEBDONG > Nhấp Nút Open. Yes.
5. Ra Trang có Đường Dẫn như sau :
C/Documents and Settings /utbinh/Desktop/TRANGWEBDONG .
( Hình 27 ).
6. Tạo Trang index.htm : Nhấp Phải lên chổ trống > New > Blank Page . Hiện ra Trang Index.htm. Enter.
7. Nhấp Đúp File index.htm . Ra Trang Chủ để soạn thảo nội dung .
SOẠN THẢO NỘI DUNG :
1. Hàng Công cụ chọn Insert Table > Chọn 3 Hàng – 3 Cột.
2. Cột Folder List > Nhấp images > Hiển thị các Files Gif đã Insert vào Folder nầy.
3. Rê thả từng File hình vào . ( Hình 28 ).
4. Bôi đen 4 Ô giữa Khung > Table > Merge Cells > Click vô trở nên Trang trắng.
5. Gỏ Chữ vào . Bôi đen. Canh chỉnh giữa và kích thước , tô màu chữ.
( Hình 29 ).
6. Nhấp Phải Index,htm > Save . Close .
7. Xem thử Preview : Desktop > Nhấp Folder TRANGWEBDONG > Trang Index.htm . Ra Trang Web có các Hình cử động.
TẠO TRANG WEB :
1. Mở Cute FTP để Upload Folder TRANGWEBDONG .
2. Mở Freewebtown để chứa Trang Web nầy.
3. Địa chỉ Trang WEB có các Hình GIF cử động là :
http://freewebtown.com/tangnhubinh/T...DONG/index.htm
( Hình 30 )
Tin khác