Bài giảng Phát triển ứng dụng Web-Web Programming - Chương 3: HTML + CSS plus - Lương Trần Hy Hiến

HTML + CSS plus Luong Tran Hy Hien, FIT of HCMUP, VietNam 1 Contents 1. The plan for site Development 2. Advanced CSS 2 The Plan for Site Development Course Project: The “About Me” site Throughout this course we will be building a personal site with the theme “about me” as practice for future web projects. Each class we will learn new techniques for improving and adding features to this site. The Plan for Site Development Three phases of building a website Phase 1. Information Architecture Phase 2. Design Phase 3. Development The Plan for Site Development Phase 1. Information Architecture Project • Discovery - High-level discovery meeting between the web company and the client. Define functional requirements. • Site Map Generation - A useable sitemap is created that contains a page by page index of the content information structure in flow-chart form. • Aggregation - Gather together as much of the core content as possible. This includes media and text. The Plan for Site Development Phase 2: Design • Creative Discovery - Discuss the site audience, user needs and brand guidelines. Quality Assurance - review and progress report. • Wireframing - List all design elements that • are to be displayed on the home page. • Generate Mockups – “Pictures” of the final design (can be sketches or finished products). • Production ready designs - Production ready media is created and development beings. The Plan for Site Development Phase 3: Development • Technical Discovery - validate the technology requirements. • Technical Collaboration / Client Review Session - Client review and progress report. • SEO Plan - the URL's, page titles, meta data, etc. • Template Development -Based on the production ready designs, we are ready to develop html templates, styles, and programming. The Plan for Site Development Phase 1. Information Architecture Project • Discovery - High-level discovery meeting between the web company and the client. Define functional requirements. You can think of Phase 1 as the “Business Plan” for the website. Let’s work in groups of two to fill out the: Information Architecture Project Plan The Plan for Site Development Phase 1. Information Architecture Project • Site Map Generation - A useable sitemap is created that contains a page by page index of the content information structure in flow-chart form. Site Map examples Simple flow-chart style site map Site Map examples Traditional Flow-chart form Cấu trúc website – phân cấp Company Logo Site Map examples Contemporary Flow-chart form Cấu trúc website – nối tiếp Company Logo Cấu trúc website – mạng nhện Company Logo Creating a digital version of your site map in Illustrator Select object too (black arrow) Window Drop-down: Type tool (“LETTER T”) opens all menus checked Draw shape tool Draw line tool Stroke (outline) menu Swatches (color) menu Type (fonts) menu The Plan for Site Development Phase 1. Information Architecture Project • Aggregation - Gather together as much of the core content as possible. This includes media and text. Gather and organize the Resources for your site List of Links appearing on each page List of media for each page • Animation • Sound • video List graphics for each page •Logos •Bullets and icons (can use place-holders) The Plan for Site Development Phase 2: Design • Creative Discovery - Discuss the site audience, user needs and brand guidelines. • Quality Assurance - review and progress report. Branding the site: • Logo creation and optimization • Color scheme choices • Determine who the expected users are (Customers? Employers? Readers? Friends?) Logo designs • What are others in your industry doing? • Can you use symbols? Google images is a great tool to help you answer these questions. Color schemes • What looks good? • What are other companies doing note: red/blue are common in IT, blue/purple/light blue are common in healthcare, orange/brown is common in photography) Note how color schemes for logos and website vary by industry. Why do you think that might be? How do certain colors make you feel? Color schemes Color associations and customer psychology When colors are applied in unexpected ways, they can change a logos meaning! Would you buy a brown-green food? Color schemes How does changing the website color scheme affect the page? Color schemes Pick 3-5 colors for your page color scheme. Define them in terms of web color. Web colors are in hexadecimal, or 6-digit colors. Color schemes hexadecimal, or 6-digit colors, used in HTML and CSS code You can click on the foreground color in Adobe Photoshop or Illustrator to see the foreground color’s hexadecimal number. Color schemes Sometimes the color schemes are based on photos or objects The Plan for Site Development Phase 2: Design •Wireframing - List all design elements that are to be displayed on the home page. •Generate Mockups “Pictures” of the final design (can be sketches or finished Hand-drawn mockup sketch products). Hand sketched website mockups vs. digital mockups Usually the digital mockup is made based on the quick hand-sketch. Use the mockup to present to clients or buyers, or just to plan for your own site! “Wireframe” type website mockup Printed Digital Mockup for investor The Plan for Site Development Phase 2: Design • Wireframing - List all design elements that are to be displayed on the home page. • Generate Mockups “Pictures” of the final design (can be sketches or finished Hand-drawn mockup sketch products). The Plan for Site Development Phase 2: Design Production ready designs - Production ready media is created and development beings. This is where we start working on real web versions of the site using HTML markup and Adobe Dreamweaver. Adobe Dreamweaver Note Quick Note About File Names Spaces will be interpreted by the web server as “%20”: My First Page.html becomes My%20First%20Page.html On certain servers (i.e. older Linux Servers) capital letters can be changed to lower case: MyFirstPage.html becomes myfirstpage.html Generally use lower case file names and no spaces in web files in order to ensure that the files work properly on all web servers. HTML vs CSS In modern web design, HTML is used ONLY for the framework of the site. Cascading Style Sheets (CSS) is used for many of the attributes we have discussed in this lesson (font characteristics, layout, and more). Parts of a Website – “Website Anatomy” The URL The Root Directory is where your data that makes up your site is located. It appears at www.yourdomain.com. It may contain both files and folders. It may contain nested folders (folders within folders). Parts of a Website – “Website Anatomy” The URL Paths A path is a “map” to how to find a file on your site. Local Paths: Assume a set location Global Paths: Full path, can be accessed from anywhere. Contains full URL. i.e. Parts of a Website – “Website Anatomy” The URL Local Path: You are here Depends on WHERE you are on the site. Linking to here Link reads preservation/digital.html Parts of a Website – “Website Anatomy” The URL Local Path: You are here Depends on WHERE you are on the site. Linking to here The code for “down a folder” is “../” Local path: ../images/earth.jpg Parts of a Website – “Website Anatomy” The index page Default Root Page Each folder contains a default file (the file that shows when no directory is typed). The file is normally named: Index.html Index.htm Index.php Index.aspx/Default.aspx **ALL FOLDERS should contain an index file! Advanced CSS Examples of CSS • CSS provides a powerful and still-evolving toolkit of style properties to develop advanced Web apps, e.g.: – hoyer.com/experiments/rain/ – – – hoyer.com/experiments/walking/ CSS Selector Summary context is: CSS_selectors { style_property_declarations } • Element Type E • Grouping E, F, G • Universal * • Class [E].classvalue (element name E optional – meta brackets) • Id [E]#myID • Contextual – Descendent E F – Child E > F – Adjacent E + F • Pseudo-element E:pseudo-element • Attribute E[foo="hi"] (literal brackets) CSS Style Properties • Sufficiently expressive for fine-grained control – don’t give designers a reason to cheat • Too many properties to cover comprehensively (many dozens) • We’ll focus on a few of the most important ones – text properties – layout and positional control, including the “box model” CSS Element Boxes Parent’s background covers margin Border Margin Element ContentPadding Padding Element’s background covers padding Box Formatting Model margin (transparent) border padding (transparent) content element width box width  Provides a means to control the spatial layout of elements; the basis for position-oriented properties Common CSS Layout Properties • Width margin padding • Height • Float width • Clear height • Border border • Padding • Margin Width & Height Width and height define the width and height of an element. div id=“box” #box {width=“50px”} #box {height=“auto”} #box {width=“50em”} *Width and height can be #box {width=“100%”} specified in pixels, ems, percentages or set to auto #box {width=“auto”} Float: (left, right) Float property makes elements float to the right or left of the screen, positioned where they are in the HTML. Floating allows word wrapping. Here is some text which wraps around the box div id=“box” floated to the left. #box {float:left; margin-right: 10px;} Floats • a floated element shifts out of the normal document left-to-right layout flow • if there is text beside a float, the text will wrap around the floated element .right_img { float: right; width: 200px; } • to escape the wrapping behavior, use the “clear” property, which prevents overlap of floating elements q { clear: right; } • clear property possible values: left, right, both, none (default) Clear: (left, right, both) When elements are floated, they wrap around each other to form a “caravan.” The clear property detaches an element from the “caravan” and allows it to start on a new line. div id=“box1” div id=“box2” div id=“box3” #box3 { background-color: white; border: 1px solid #000; clear: both;} Border (top, right, bottom, left) div id=“box” You can define the entire border or #box { only the top, bottom, left, or right. You border: red dotted 1px; can also define the border using one declaration. The code could be any of #box { the following: border-color: red; #box { border-style: dotted; border-top: red dotted 1px; border-width: 2px; border-bottom: red dotted 1px; border-left: red dotted 1px; border-right: red dotted 1px; } Padding (top, right, bottom, left) Padding is the space between the text/content and the border. You can use padding for all around the element or specify each side of the rectangle separately. The code could be any of the following: padding padding: 10px; Padding: 10px 10px; div id=“box” padding: 10px 10px 10px 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; padding-top: 10px; Margin (top, right, bottom, left) Margin is the space outside the text/content and the border. You can use margin for all around the element or specify each side of the rectangle separately. The code could be any of the following: margin margin: 10px; or margin: 10px 10px; or div id=“box” margin: 10px 10px 10px 10px; or margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px; Typical Web Page (Browser) Container header menu main footer #container #banner #nav #content #footer home <a href="contact.htm">contact HTML My Resume Resume text Copyright info here body { font-size: 1em; } #container { width: 920px; } #banner { width: 920px; height: 120px; } #nav { float: left; width: 200px; } CSS #content { width: 720px; } #footer { font-size: .8em; } Thiết kế Website • Interface Design • Page Design • Graphic Design Interface Design • Tính định hướng • Trang Dead-end • Khả năng tìm kiếm Tính định hướng • Trả lời các câu hỏi: – Đang ở đâu? – Có thể làm gì? – Có thể đi tiếp tới đâu? • Biểu tượng nhất quán, dễ hiểu, theo chuẩn quy định 63 Trang Dead-end • Trang “dead-end”  thất vọng, mất khả năng đến với các trang khác. • Mỗi trang có ít nhất một liên kết. Luôn có khả năng quay lại trang chủ hoặc các trang chủ chốt trên website. 64 Khả năng tìm kiếm 65 Page Design • Bố cục Layout • Kích thước Khung nhìn • Tính nhất quán • Tính ổn định • Tương thích trình duyệt Bố cục Layout Layout : 2 cột Layout : Table within a table Layout : Table within a table Layout : Table within a table Layout : Table within a table Layout – cấu trúc phức tạp Tính nhất quán • Mọi website đều được thiết lập quanh Homepage • Xây dựng theo cấu trúc cơ bản của website • Nhất quán, phù hợp với các thuộc tính đã định dạng trước Tính ổn định • Ổn định về cấu trúc và nội dung • Cấu trúc: các thành phần được đặt đúng chỗ và hoạt động nhịp nhàng. • Nội dung: – Các mối liên kết luôn đảm bảo có đích đến – Nội dung luôn đảm bảo thích hợp và phải cập nhật cho phù hợp với ngữ cảnh tại thời điểm độc giả duyệt web Graphics Design • Font chữ • Màu sắc • Hình ảnh Các mô hình ứng dụng Web Các mô hình ứng dụng Web • Kiến trúc – Thiết kế • Các Mô hình ứng dụng • Các Mô hình triển khai ứng dụng Web Kiến trúc xử lý Mô hình logic Mô hình ứng dụng máy đơn cục bộ Mô hình ứng dụng máy đơn mạng cục bộ Mô hình ứng dụng mạng Internet Mô hình ứng dụng mạng Internet • Tăng cường phạm vi sử dụng • Giải quyết bài toán giao tiếp • Vấn đề tốc độ: – Xét thời gian và khối lượng thông tin • Vấn để bảo mật Mô hình ứng dụng Web Mô hình Logic Các mô hình triển khai Xử lý hệ khách • Ưu điểm – Giao diện đẹp – Khả năng tương tác cao – Giảm tải cho Server • Khuyết điểm – Khó phát triển – Đòi hỏi phần mềm phụ hỗ trợ – Có thể không tương thích trình duyệt Xử lý hệ phục vụ • Ưu điểm – Phát triển đơn giản – Dễ triển khai và bảo trì – Chia sẽ được dữ liệu • Khuyết điểm – Giao diện người dùng thô sơ – Tính tương tác kém Xử lý hệ khách Ngôn ngữ Script • Ngôn ngữ thông dịch với trình duyệt web là hệ thông dịch • Giúp trang web có tính tương tác – Cho phép đưa các hiệu ứng động vào trang HTML – Tương tác với các sự kiện của trang HTML – Thay đổi nội dung của các đối tượng HTML – Xử lý hệ phục vụ Q & A THE END