Trong mảng frontend thông thường sẽ nhận bản thiết kế giao diện từ bộ phận design thiết kế trên phần mềm photoshop và lưu nó ở dạng file đuôi .psd. Sau khi nhận được bản thiết kế bộ phần Frontend web sẽ tiến hành sử dụng kiến thức html để xây dựng khung website, sử dụng css để làm đẹp và trình bày vị trí hiển thị, màu sắc. Và cuối cùng họ sử dụng javascript (thư viện jquery) để xử lý các chức năng liên quan đến sự kiện và hiệu ứng.
CẮT GIAO DIỆN TỪ PSD I LÀM VIỆC VỚI PHOTOSHOP Link tải cài sẵn https://drive.google.com/file/d/0ByHXd2OzhedWUEIxTTN6Z01oU0U/view?pli=1 Link hướng dẫn cài đặt Photoshop CS6 Chi tiết xem link sau : http://sinhvienit.net/forum/adobe-photoshop-cs6-full-crack.208139.html Mở file home.psd với phần mềm photoshop II MỘT SỐ CHÚ Ý Bật , tắt thước đo PTS (View -> Rules phím tắt Ctr + R) Đổi đơn vị pixels : Bạn bấm phải chuột thước đo chọn Pixels Muốn bật , tắt cửa sổ bạn cần click vào Window 4 Các cửa sổ hay dùng History : quay lại bước làm Layer : Danh sách layer file PSD Info : Các thông tin thước đo độ rộng, chiều cao Phóng to thu nhỏ (hoặc bấm phím tắt Ctr +, Ctr -) Đo kích thước vật thể (Các kí tự kèm phím tắt ) Để làm chức ta cần sử dụng công cụ Marquee tool (M) cửa sổ info Sử dụng Marquee tool (M) để chọn vùng để đo kich thước Xem chi tiết thông tin cửa sổ Info Lấy mã màu Để làm chức ta cần sử dụng công cụ Eyedropper tool (I) Sử dụng Eyedropper tool (I) để vào điểm mà có màu cần lấy Lấy font chữ , cỡ chữ Để làm chức ta cần sử dụng công cụ Horizontal type tool (T) Sử Horizontal type tool (T) để bôi đen đoạn text cần lấy thông tin III CẮT FILE ẢNH Bước : Giữ phím ALT chuột trái vào hình muốn lấy Ngay cửa sổ layer focus layer chọn Lưu ý :Một số phiên ALT + chuột phải , Ctrl + chuột trái , Ctrl + chuột phải Bước : Giữ phím ALT chuột trái vào mắt layer hình muốn lấy Ta tách riêng layer Bước : Cắt ảnh Có cách : Cách : Vào Image chọn trim nhấn OK (Chuyển Bước 4) Cách : Sử dụng công cụ Drop tool (C) lựa chọn xác vùng hình ảnh ấn enter (Chuyển Bước 4) Bước : Lưu ảnh Để lưu ảnh ta làm sau : Xuất hình sau : Ở ta lưu ý : chọn đuôi mở rộng cho ảnh Nếu lưu ảnh có background suốt chọn PNG-24 (Ảnh cắt thường ảnh dùng để trang trí cho website , ảnh nặng ) , Nếu muốn lưu ảnh có background màu trắng chọn JPGE (Ảnh cắt thường ảnh sản phẩm , đại diện viết …) Chọn xong ta bấm SAVE hoàn thiện việc cắt ảnh IV CƠNG CỤ LẬP TRÌNH DREMWEAR CC Link cài đặt , crack : https://drive.google.com/file/d/0ByHXd2OzhedWeFNLbnlTeFNoMlk/view?pli=1 Link download , hướng dẫn cài đặt Dreamwear CC Chi tiết xem link sau : http://sinhvienit.net/forum/download-adobe-dreamweaver-cc-full-crack-phan-mem-thiet-keweb-chuyen-nghiep.265000.html Khởi động Dreamwear CC lên ta sau : Tạo quản lý PROJECT Bước : Chọn SITE -> NEW SITE Bước : Nhập tên PROJECT , đường dẫn đến thư mục chứa PROJECT , Click SAVE để lưu lại Bước : Quản lý PROJECT với cửa sổ FILE Chuột phải vào PROJECT để tạo file , thư mục , xoá file , xoá thư mục , sửa tên file , sửa tên thư mục Click đúp vào file để mở file , click đúp vào thư mục để mở thư mục Kéo thả file CSS file JS để nhúng vào file HTML Sử dụng cửa sổ INSERT để insert vào file HTML phần tử : table , form , link , image , … III CÁC ADD-ON CHO FIREFOX Firefox tuyệt vời trình duyệt khác điểm bảo mật, load nhanh không chiếm dụng nhiều CPU Chrome Google, ngồi Firefox có kho Add-on khổng lồ giúp bạn mở rộng chức cho Firefox, thứ bạn thích, nữa, firefox trình duyệt phổ biến dân lập trình có đầy đủ cơng cụ để bạn phát triển website #1, Firebug Một add on mà không nhắc tới firefox dành cho lập trình viên web Để cài đặt bạn bấm vào đây: https://addons.mozilla.org/enUS/firefox/addon/firebug/?src=search Để kích hoạt nó, bạn cần xem website đó, bấm F12 lên bảng chỉnh sửa Firebug có đầy đủ chức cho lập trình viên Chỉnh CSS, HTML test hiển thị trình duyệt ln, ngồi bạn cài thêm nhiều Add On hỗ trợ cho firebug #2, ColorZilla Nhằm kiểm tra mã màu lấy mã màu thẻ website ColorZilla lấy mã màu chỗ trình duyệt, bạn cần click trỏ vào đâu đó, mã màu dạng Hexa copy vào Clipboard để bạn sử dụng tinh chỉnh CSS ColorZilla Click vào để download: https://addons.mozilla.org/enUS/firefox/addon/colorzilla/?src=search #3, MeasureIt Nếu muốn đo khoảng cách thực thẻ để chia chúng chuẩn xác hơn, để tinh chỉnh CSS cho hợp lý, chắn ta thiếu add on Measure IT MeasureIt Download đây: https://addons.mozilla.org/en-US/firefox/addon/measureit/?src=search #4, Awesome Screenshot Plus Bạn muốn chụp ảnh hình chức Awesome Screenshot Plus plugin phải cài Awesome Screenshot Plus Các bạn chỉnh ảnh sau: Thật tuyệt phải không nào, download đây: https://addons.mozilla.org/enUS/firefox/addon/awesome-screenshot-capture-/?src=ss #5, Font Finder Font Finder bạn tìm phơng chữ sử dụng trang web Đơn giản thêm tiện ích vào Firefox, đánh dấu văn mà bạn muốn biết phông chữ, kích phải vào “Font Finder” Các bạn download đây: https://addons.mozilla.org/en-US/firefox/addon/fontfinder/?src=search ... sổ FILE Chuột phải vào PROJECT để tạo file , thư mục , xoá file , xoá thư mục , sửa tên file , sửa tên thư mục Click đúp vào file để mở file , click đúp vào thư mục để mở thư mục Kéo thả file. .. file , click đúp vào thư mục để mở thư mục Kéo thả file CSS file JS để nhúng vào file HTML Sử dụng cửa sổ INSERT để insert vào file HTML phần tử : table , form , link , image , … III CÁC ADD-ON... click vào Window 4 Các cửa sổ hay dùng History : quay lại bước làm Layer : Danh sách layer file PSD Info : Các thông tin thước đo độ rộng, chiều cao Phóng to thu nhỏ (hoặc bấm phím tắt Ctr