Giáo trình thiết kế layout website (nghề lập trình máy tính trình độ CĐTC)

ỦY BAN NHÂN DÂN TỈNH AN GIANG TRƯỜNG CAO ĐẲNG NGHỀ AN GIANG GIÁO TRÌNH THIẾT KẾ LAYOUT WEBSITE NGHỀ: LẬP TRÌNH MÁY TÍNH Trình độ trung cấp/cao đẳng (Ban hành theo Quyết định số: /QĐ-CĐN ngày tháng năm 20 Hiệu trưởng trường Cao đẳng nghề An Giang) Tác giả: Vương Thị Minh Nguyệt Năm ban hành : 20 TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng nguyên trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm LỜI GIỚI THIỆU Ngày nay, phát triển Internet ảnh hưởng lớn tới ngành CNTT Internet mở nhiều hội tốt cho nhà lập trình phát triển ứng dụng Web nhà thiết kế Web Song song với phát triển đó, thiết kế web có phát triển việc cải tiến kỹ thuật thiết kế Với hỗ trợ máy tính cơng nghệ phần mềm giúp thực việc thiết kế trang web nhanh chóng, hiệu chuyên nghiệp Tài liệu thiết kế theo mô đun/ môn học thuộc hệ thống mô đun/môn học chương trình, để đào tạo hồn chỉnh nghề Lập trình máy tính cấp trình độ bậc cao dùng làm giáo trình cho học viên khóa đào tạo, sử dụng cho đào tạo ngắn hạn cho công nhân kỹ thuật Trong trình biên soạn, cố gắng tham khảo nhiều tài liệu giáo trình khác tác giả khơng khỏi tránh thiếu sót hạn chế Tác giả chân thành mong đợi nhận xét, đánh giá góp ý để giáo trình ngày hồn thiện Nội dung môn học: Chương 1: Cách lấy màu từ Photoshop Chương 2: Tạo hiệu ứng Rollover cho trang web Chương 3: Tạo hình động cho trang web Chương 4: Sử dụng công cụ Slices tool để cắt layout An Giang, ngày tháng năm 20 Tham gia biên soạn Vương Thị Minh Nguyệt MỤC LỤC ĐỀ MỤC TRANG LỜI GIỚI THIỆU MỤC LỤC CHƯƠNG TRÌNH MƠN HỌC CHƯƠNG CÁCH LẤY MÀU TỪ PHOTOSHOP .5 I SỬ DỤNG Color Picker .5 II SỬ DỤNG EYEDROPER TOOL BÀI TẬP 12 CHƯƠNG 15 TẠO HIỆU ỨNG ROLLOVER CHO TRANG WEB .15 I TẠO TRANG THÁI ROLLOVER 15 II TẠO VÀ CHIA SLICES ĐỂ XÂY DỰNG BẢNG 19 III TẠO HIỆU ỨNG ROLLOVER BẰNG CÁCH ẨN HIỆN LAYER .22 BÀI TẬP: 36 CHƯƠNG 37 TẠO HÌNH ĐỘNG CHO TRANG WEB 37 I TẠO HÌNH ĐỘNG TRONG IMAGEREADY 37 II TẠO HÌNH ĐỘNG BẰNG CÁCH ẨN HIỆN LAYER 37 BÀI TẬP 39 CHƯƠNG 42 SỬ DỤNG CÔNG CỤ SLICES TOOL ĐỂ CẮT LAYOUT 42 I GIỚI THIỆU SLICES 42 II TẠO SLICES TRÊN LAYER .44 III TỐI ƯU HÓA VÀ LƯU SLICES .48 BÀI TẬP 49 TÀI LIỆU THAM KHẢO 55 CHƯƠNG TRÌNH MƠN HỌC Tên môn học: THIẾT KẾ LAYOUT WEBSITE Mã môn học: MH 30 Thời gian thực môn học: 60 (Lý thuyết: 20 giờ, thực hành 38 giờ, kiểm tra: giờ) I VỊ TRÍ, TÍNH CHẤT CỦA MƠN HỌC Vị trí: - Thuộc nhóm mơn: Chun ngành - Được bố trí sau mơn: Thiết kế trang web, Thiết kế sản phẩm với CorelDraw, Xử lý ảnh với Photoshop Tính chất: Mơ đun làm sở cho sinh viên – học sinh có kỹ thiết kế trang web II MỤC TIÊU CỦA MÔN HỌC Về kiến thức: - Định hướng cách thiết kế Website - Đưa ý tưởng giao diện - Có khả sử dụng cơng cụ Photoshop Về kỹ năng: - Sử dụng công cụ Photoshop để thiết kế layout web - Thiết kế giao diện trang website - Sử dụng thành thạo công cụ thiết kế Web Về lực tự chủ trách nhiệm: - Làm việc nhóm, tăng tính chia sẻ làm việc cộng đồng III NỘI DUNG MÔN HỌC Nội dung tổng quát phân bố thời gian: TT Tên chương, mục Thời gian (giờ) Lý Thực hành, Kiểm Tổng tra số thuyết thí nghiệm, thảo luận, tập Chương 1: Cách lấy màu từ photoshop I Sử dụng Color Picker II Sử dụng EyeDropper Tool Chương 2: Tạo hiệu ứng Rollover cho 12 trang web I Tạo trạng thái Rollover II Tạo chia Slices để xây dựng bảng III Tạo hiệu ứng Rollover cách ẩn layer Chương 3: Tạo hình động cho trang web 12 I Tạo hình động ImageReady II Tạo hình động cách ẩn layer Chương 4: Sử dụng công cụ Slices tool 26 để cắt layout I Giới thiệu Slices II Tạo Slices layer III Tối ưu hóa lưu Slices Ơn tập Cộng 60 10 15 20 38 CHƯƠNG CÁCH LẤY MÀU TỪ PHOTOSHOP Giới thiệu Trong bảng mã màu css không dừng lại màu sắc đơn giản như: xanh, đỏ, tím, vàng, hồng,… bạn thường nghĩ đến Nhất trình thiết kế chỉnh sửa hình ảnh phần mềm chuyên nghiệp, màu sắc liệt kê lan rộng, lên đến hàng nghìn màu pha trộn lại với nhau, sau định dạng theo nhiều mã màu khác nhau, nhằm giúp bạn tìm kiếm màu sắc chi tiết, xác theo mã màu Theo đó, bảng mã màu sơn hiển thị khác nhau, khơng phải hình máy tính thể xác màu đăng hiển thị Do đó, trình điều chỉnh màu máy tính việc quan trọng, nhằm giúp bạn tìm xác gam màu, mức độ đậm nhạt màu sắc để thuận tiện trình phối màu phần mềm photoshop xác Mục tiêu: sau học xong học người học có khả năng: - Biết cách lấy màu photoshop công cụ color picker - Biết cách lấy màu photoshop công cụ eyedroper tool Nội dung I SỬ DỤNG Color Picker Trước bắt đầu thực tô màu, bạn cần biết cách để lựa chọn, quản lý màu sắc photoshop, có nhiều cách để lựa chọn màu sắc cần tơ ví dụ: bảng màu color (F6), bảng màu Swatches (menu window ->swatches), color picker hay gọi foreground/background (2 ô công cụ) Thông thường hay sử dụng foreground/background Bảng color picker Bảng color picker bao gồm ô màu foreground color background color, hiểu nơm na tơ màu phía phía Để thay đổi màu sắc màu click đúp chuột trái vào ô màu để điều chỉnh Một màu ra, tiến hành lựa chọn màu sau: Có thể điền mã màu theo hệ RGB CMKY, kéo màu tự ô màu màu, lựa tích vào ô only web color để chọn màu dễ hơn, cuối click OK Để tô màu ô màu phía (foreground color) ấn tổ hợp phím Alt+Delete Để tơ màu màu phía (background color) ấn tổ hợp phím Ctrl+Delete Để đảo vị trí foreground background ấn phím X bàn phím click chuột vào mũi tên chiều phía biểu tượng ô màu Tô màu photoshop Tô màu (background) photoshop Tô màu (backgroud) layer photoshop trường hợp muốn tạo phần màu cho ảnh thiết kế Ta tơ màu tồn vùng làm việc phần cụ thể Để tơ màu photoshop thực bước sau: Bước 1: Tạo layer mới: Trước bắt đầu bạn nên tạo layer mới, cách Trong hộp thoại layer (F7) -> click chọn new layer Bước 2: Lựa chọn khu vực tơ màu: Có nhiều cách để lựa chọn khu vực tô màu, cần tạo vùng chọn photoshop bao lấy khu vực cần tô Ở ta dùng công cụ rectanger tool để tạo vùng chọn hình chữ nhật Trong trường hợp muốn tơ màu cho tồn vùng làm việc bỏ qua bước Bước 3: Tô màu Lựa chọn màu cần tơvà ấn tổ hợp phím Alt+Delete Tơ màu đối tượng photoshop Tô màu đối tượng PS kĩ thuật tô màu theo mảng Đối tượng có mảng màu khác Với mảng màng tô màu khác Điều quan trọng với kĩ thuật cần tạo vùng chọn vào phần muốn tô màu Có thể có nhiều cách khác để tạo vùng chọn: pen tool, công cụ lasso tool, quickselection… Các bước thực sau: Bước 1: Chọn layer chứa đối tượng, cách trực tiếp chọn vào layer hộp thoại layer (f7) Bước 2: Trên công cụ Chọn Magic wand tool Bước 3: Click chuột vào khu vực cần tô màu, Giữ Shift +click chuột để lấy thêm vùng khác Bước 4: Từ color picker, chọn màu muốn tô ấn tổ hợp phím Alt+delete II SỬ DỤNG EYEDROPER TOOL Cơng cụ Eyedropper tool có phím tắt ( I ), cơng cụ tiện lợi việc lấy mã màu cách 1, cần click vào biểu tượng Eyedropper tool hình photoshop Tiếp theo, mở bảng Color Picker giống cách lấy mã vừa lấy Cả cách giống nhau, việc sử dụng công cụ Eyedropper tool giúp ta lấy bảng mã màu chuẩn mà có ảnh cần độ tỉ mỉ màu cao Đối với việc biết mã màu bạn dễ dàng sử dụng vào công việc Thông thường việc lấy mã màu giúp người dùng xác định mã để copy chỉnh sửa cho màu y hệt… Bảng mã màu hex thường chuyên gia thiết kế đồ họa thiết kế Website sử dụng Theo đó, HEX biết đến từ viết tắt “hexadecimal” Về cách viết bao gồm dấu “#” kết hợp theo dãy ký tự Latin, gồm số chữ Tuy nhiên, không biệt chữ thường hay chữ viết hoa Những ký tự Latinh chấp nhận bảng mã màu bao gồm: a,b,c,d,e,f,A,B,C,D,E,F Ví dụ: #00ffff, theo tiến hành viết rút gọn màu theo cách tương ứng sau: • Rút gọn cặp ký tự thành ký tự: #ff0066 => #f06 • Rút gọn ký tự giống thành ký tự: #ffffff => #fff Bảng mã màu rgb thông dụng nhiều người biết đến, sử dụng tùy vào mục đích Q trình xác định màu RGB kết hợp màu như: màu đỏ (Red), xanh (Green) xanh dương (Blue) Ví dụ: rgb(155,167,1) Một số giá trị đặc biệt bao gồm:  Màu đỏ: rgb (255,0,0)  Màu xanh dương: rgb (0,0,255)  Màu đen: rgb (0,0,0)  Màu Trắng: rgb (255,255,255)  Màu xanh cây: rgb (0,255,0)  Màu vàng: rgb (255,255,0) Đối với cách viết thể cụ thể tên màu viết theo tiếng Anh Ví dụ: Black Những tên thường nhiều người sử dụng bao gồm:  Màu đỏ: red  Màu đen: black  Màu xanh cây: green  Màu vàng: yellow  Màu xanh dương: blue  Màu nâu: Brown  Màu tím: Purple  Màu hồng: Pink  Màu trắng: white Theo đó, số màu bản, ấn tượng thường sử dụng để tiến hành pha trộn, tạo màu sắc trình thiết kế Website, hộp đèn thiết kế thời trang, bảng hiệu, banner tập vẽ,… Trong Photoshop, màu foreground background hiển thị cuối cơng cụ Hình vng màu xanh màu foreground hình vng màu vàng bên màu background Để đưa màu foreground background màu mặc định (trắng đen), dùng phím tắt D click vào hình vng đen trắng bên Còn để nghịch đảo màu foreground background, dùng phím tắt X click vào mũi tên đầu vòng cung bên Để chọn màu cho foreground background, click chuột vào hình vng tương ứng chọn màu • Giá trị màu sắc Khi click vào hình vng foreground background,bảng chọn Color Picker mở Ở đây, ta chọn màu cách di chuyển dấu tròn vùng màu Chúng ta dễ dàng thấy thông tin màu bên phải giá trị RGB,HSB,CMYK…Để ý đến giá trị cuối bên dưới, có dấu # đầu, mã màu Mỗi màu khác có mã màu khác Thơng số sử dụng nhiều, đồ họa lập trình Cơng cụ Eyedropper Eyedropper tool (Phím tắt I) công cụ chọn màu sắc Photoshop Ví dụ xem ảnh, ta thích mảng màu khơng biết xác màu gì, ta dùng cơng dụng Eyedropper tool • Click vào điểm màu bất kỳ,bạn thấy màu foreground biến thành màu 41 CHƯƠNG SỬ DỤNG CƠNG CỤ SLICES TOOL ĐỂ CẮT LAYOUT Giới thiệu Trong Photoshop để thiết kế layout website hoàn chỉnh công cụ để vẽ công cụ để chỉnh sửa hình ảnh cơng cụ cắt layout q trình tối ưu hóa layout cắt khâu quan trọng trước sử dụng phần mềm khác Dreamweaver, notepad … để dựng layout Trong nay, hướng dẫn chi tiết thao tác sử dụng công cụ Slice tool để cắt layout Mục tiêu: học xong học học viên có khả năng: - Biết kiến thức Slices tool - Sử dụng công cụ Slices tool để cắt layout Nội dung I GIỚI THIỆU SLICES Trong Photoshop để thiết kế layout website hoàn chỉnh công cụ để vẽ công cụ để chỉnh sửa hình ảnh cơng cụ cắt layout q trình tối ưu hóa layout cắt khâu quan trọng trước sử dụng phần mềm khác Dreamweaver, notepad … để dựng layout Hướng dẫn thiết kế website Photoshop hướng dẫn chi tiết thao tác sử dụng công cụ Slice tool để cắt layout Mở file slices1.psd thư mục Bài Tập Thực Hành Vào menu View -> Show -> Slices để hiển thị đường slice (đường cắt công cụ slice) 42 Vào View -> check vào Snap để đối tượng đường line hít vào với sử dụng di chuyển đối tượng đến gần Vào View -> Show -> Slices để hiển thị đường cắt, chọn công cụ Select Tool tool box, lúc xuất số 01 phía bên trái cửa sổ soạn thảo đường chấm bao quanh đối tượng Trong trường hợp đường line trùng với màu thiết kế ta thay đổi màu cho chúng để nhìn rõ cách vào Edit -> Preferences -> Guides, Grid & Slices… sau thay đổi màu đường line tương ứng Dùng công cụ Slice Tool kéo hình chữ nhật bao quanh logo trang web ta thấy xuất ô với đường viền màu xanh, ranh giới cắt cơng cụ Slice tool, đồng thời xuất số thứ tự 02,03,04 bên vùng ranh giới, tên hình ảnh sau lưu layout lại, tiếp tục tạo slice tương tự khảo sát thay đổi đường slice Tiếp theo chọn công cụ Slice Select Tool, công cụ dùng để chọn hiệu chỉnh slice cắt trước Mặc định chọn hiệu chỉnh với slice vẽ, slice tạo tự động khơng có tác dụng, muốn hiệu chỉnh silce này, nhấn vào Promote status công cụ Để chia slice thành nhiều slice chọn Slice Select Tool nhấn button Divide… Nhấn chuột phải -> chọn Combine Slices để gộp slice chọn vào thànhSlice Muốn xóa slice chọn slice cần xóa nhấn phím delete nhấp phải chuột chọn Delete/Slices Để xóa tất slices vào menu View -> Clear Slices 43 II TẠO SLICES TRÊN LAYER Chọn nhiều layer cần cắt, vào menu Layer -> New Layer Based Slices lúc layer cắt di chuyển tới đâu slices di chuyển theo tới đồng thời có thay đổi kích thước slices thay đổi theo Cắt layout photoshop slice tool Các Slices chia hình ảnh thành hình ảnh nhỏ tập hợp lại trang web cách sử dụng lớp bảng HTML CSS Bằng cách chia hình ảnh nhỏ hơn, bạn gán liên kết khác để chuyển hướng trang web theo nhu cầu, tối ưu hóa phần hình ảnh cách sử dụng thiết lập tối ưu hóa hình ảnh Bạn export tối ưu hóa ảnh cắt cách sử dụng Save For Web & Devices Photoshop lưu slice tập tin riêng biệt tạo mã HTML, CSS cần thiết để hiển thị hình ảnh trình duyệt Khi làm việc với slice, Bạn có thể: • Tạo slice cách sử dụng công cụ Slice cách tạo layer-based slice • Sau tạo slice, bạn chọn cách sử dụng cơng cụ • Slice Select di chuyển, thay đổi kích thước, xếp với slice khác • Thiết lập tùy chọn cho slice kiểu slice, tên slice, địa hộp thoại Slice Options • Tối ưu hóa slice cách sử dụng thiết lập optimized khác bảng Save for Web & Devices Bạn sử dụng cơng cụ slice để vẽ đường slice trực tiếp photoshop thiết kế layer sau tạo slice dựa layer Trong photoshop có ba loại slice: - Auto slice - User slice - Layer based slice Slices phân loại theo kiểu nội dung (table, Image, no image) cách chúng tạo (user slice, layer based slice, auto slice) Slices tạo với công cụ Slice gọi User Slice , slice tạo từ layer gọi layer-based slice Khi tạo user slice layerbased slice, auto slice tự động tạo cho khu vực cịn lại hình ảnh Nói cách khác, auto slice tự động thêm vào khơng gian hình ảnh không định nghĩa user slice layer based slice Auto slice biến đổi bạn thêm chỉnh sửa user slice layer-based slice Các slice tạo đánh số theo thứ tự từ trái qua phải từ xuống dưới, thay đổi, xếp lại slice số thứ tự thay đổi a Xem slice tùy chọn Bạn xem slice Photoshop hộp thoại Save for Web & Devices - Ẩn slice: Vào menu View > Show > Slices 44 - Ẩn Auto Slices: Chọn công cụ Slice Select click vào button Show Auto Slices Hide Auto Slices Options - Thay đổi màu đường biên slice, hiển thị ẩn số slices: Vào menu Edit > Preferences > Guides, Grid, & Slices… dùng để hiển thị số thứ tự slice Trong bảng Preferences chọn màu cho slice phần slice, bên cạnh box list chọn màu slice có dấu kiểm Show Slice Numbers b Sử dụng Slices Tool Tạo slice với công cụ Slice Chọn công cụ Slice Sau sử dụng cơng cụ Slice để tạo slice số Auto slice xung quanh slice tự động tạo Chọn kiểu slice option: Normal: Xác định tỷ lệ slice bạn tạo slice Fixed Aspect Ratio: Thiết lập tỷ lệ chiều cao, chiều rộng Fixed Size: Xác định chiều cao chiều rộng slice Kéo qua khu vực nơi muốn tạo slice Nhấn Shift kéo để tạo slice vuông Nhấn Alt kéo để slice tạo từ từ Tạo slices từ đường Guide Tạo đường Guide photoshop Chọn công cụ Slice, nhấp vào Slices From Guides option Trước sử dụng lệnh Slices From Sau sử dụng lệnh Slices From Guides Lưu ý: Khi bạn tạo slice từ đường Guide, slice hiển thị bị xóa thay vào slice tạo từ đường Guide Tạo slice từ layer Layer-based slice bao gồm tất liệu pixel layer Nếu bạn di chuyển layer chỉnh sửa nội dung layer slice tự động điều chỉnh kích thước cho phù hợp với layer 45 Các layer gán slice New Layer Based Slices Chọn layer bảng Layers Chọn menu Layer > New Layer Based Slice Lưu ý: Không sử dụng layer-based slice định di chuyển, phóng lớn layer hình ảnh động, kích thước slice tạo vượt kích thước cần thiết Layer- slice linh hoạt so với User Slice, nhiên, bạn chuyển đổi slice tạo từ layer-based slice thành User slice cách click vào nút Promote Option Phân chia User slice Auto Slice Sử dụng hộp thoại Divide Slice để chia slices theo chiều ngang, chiều dọc, hai Slice chia xong user slices, ban đầu user slice Auto slice Chọn nhiều slice Với công cụ Slice Select , nhấp vào button Divide… Option Chọn Preview hộp thoại Divide Slice để xem trước thay đổi Trong hộp thoại Divide Slice, chọn hai lựa chọn sau đây: Divide Horizontally Into: Phân chia slice theo chiều dọc Divide Vertically Into: Phân chia slice theo chiều ngang Xác định cách bạn muốn chia slice chọn: Lựa chọn nhập vào giá trị cho Slices Down hay Slices Across chia slice so với kích thước ban đầu slice Lựa chọn nhập vào giá trị Pixels Per Slice để tạo kích thước slice so với kích thước slice ban đầu Khi slice khơng thể chia đều, số pixel lại tạo slice khác Ví dụ, chia slice 100 pixels độ rộng thành ba slice slice 30px, phần lại 10px tạo thành slice Nhấp vào OK để hoàn tất 46 Tùy chọn cho Slices Để hiển thị hộp thoại Option Slice: - Kích đúp vào slice với cơng cụ Slice Select - Với công cụ Slice Select hoạt động, nhấp vào nút Slice Options Option Phương pháp khơng khơng có Save for Web & Devices Slice Type: - Chỉ định loại nội dung slice: dùng để xác định cách slice xuất trình duyệt web o Image: slice hình ảnh Đây kiểu mặc định o No Image: cho phép Bạn tạo khoảng trống để chèn văn đối tượng khác HTML Lưu ý: Khi thực tùy chọn cho Auto Slice trở thành User Slice - Tên slice: đặt tên cho slice tạo Tên tên file lưu sử dụng bảng Save for Web & Devices - Đường link người dùng nhấn vào slice trình duyệt, - Phương thức mở đường link gán cho slice o _blank: Hiển thị tập tin liên kết cửa sổ mới, o _self: Hiển thị tập tin liên kết khung giống tập tin ban đầu o _parent: Hiển thị tập tin liên kết trình duyệt Nếu sử dụng frameset HTML nội dung xuất khung phụ o _top: Thay tồn nội dung cửa sổ trình duyệt với tập tinliên kết, xóa tồn khung hành - Thông tin văn Alt o Message Text: Mặc định hiển thị link hình ảnh trạng thái trình duyệt o Alt Tag: Được định cho slice, Alt xuất phía vị trí hình ảnh trình duyệt hiển thị thay hình ảnh hình ảnh khơng tải tải chậm 47 Thêm nội dung cho vùng No Image - Khi chọn slice khơng có hình ảnh, Bạn nhập nội dung chữ cho khu vực này, nội dung hiển thị lưu file lựa chọn HTML & Image - Để hàng cho nội dung vào bảng save for web & devices click vào slice để hiệu chỉnh III TỐI ƯU HÓA VÀ LƯU SLICES Chọn Slices Select Tool, chọn slices cần đổi tên nhấn biểu tượng để đổi tên cho hình ảnh sau lưu nhằm kiểm sốt hình ảnh dễ dàng sử dụng phần mềm khác để dựng layout (Dreamweaver, notepad …) sau Tiếp theo cẩn phải tối ưu hóa layout để xuất file hình ảnh chất lượng không nặng Vào File -> Save fo web & Devices… Trong cửa sổ Popup Save for Web chọn thẻ Optimized, chọn Slices Select tool hộp công cụ, chọn slices cần tối ưu để hiệu chỉnh cho chúng Đối với hình ảnh nên tối ưu với mở rộng JPG để có chất lượng đẹp, hình ảnh tĩnh (hình ảnh khơng thay đổi truy cập trình duyệt) nên sử dụng mở rộng GIF PNG dung lượng file nhẹ nhằm tăng tốc độ tải trang chạy trình duyệt 48 BÀI TẬP Bài 1: Từ hình cung cấp thực việc cắt chữ slice hình cung cấp Hình Hình 49 Bài 2: Thay đổi chữ Slice Pizza hình mẫu cung cấp Bài tập nâng cao: Hãy thiết kế mẫu trang web du lịch tương tự trang web mẫu cung cấp 50 51 52 53 54 TÀI LIỆU THAM KHẢO Lê Minh Hoàng.Tự học thiết kế đồ họa, NXB Lao Động, 2010 Hồ Hoàng Triết, Hướng dẫn thiết kế đồ họa, NXB Thống Kế 2010 tuhocdohoa.vn vietphotoshop.com 55 ... việc thiết kế trang web nhanh chóng, hiệu chuyên nghiệp Tài liệu thiết kế theo mô đun/ môn học thuộc hệ thống mô đun/môn học chương trình, để đào tạo hồn chỉnh nghề Lập trình máy tính cấp trình độ. .. nhiều hội tốt cho nhà lập trình phát triển ứng dụng Web nhà thiết kế Web Song song với phát triển đó, thiết kế web có phát triển việc cải tiến kỹ thuật thiết kế Với hỗ trợ máy tính cơng nghệ phần... Định hướng cách thiết kế Website - Đưa ý tưởng giao diện - Có khả sử dụng cơng cụ Photoshop Về kỹ năng: - Sử dụng công cụ Photoshop để thiết kế layout web - Thiết kế giao diện trang website - Sử