Learning Web Design by Jennifer Niederst Robbins

最新推荐文章于 2025-05-07 14:34:24 发布

原创

最新推荐文章于 2025-05-07 14:34:24 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS #JavaScript #Web Design #Computer Books

本书是Jennifer Niederst Robbins的《Learning Web Design》初学者指南，涵盖HTML、CSS、JavaScript和Web图形。书中讨论了SVG的重要性，推荐了流行的网站构建服务如WordPress和Squarespace，并介绍了User-Centered Design（用户中心设计）。讲解了包括样式瓷砖、前端和后端开发技术，以及DNS、响应式设计和DOM的概念。还提供了资源链接、书籍推荐和实践技巧，如如何为PDF设置密码保护。

Learning Web Design

A BEGINNER’S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS

Jennifer Niederst Robbins

My GitHub Files: https://github.com/Li-YangZhong/Learning_Web_Design_Book_by_Jennifer_Niederst_Robbins_home.git

The biggest web graphics story, however, is the emergence of SVG (Scalable Vector Graphics).

companion website: learningwebdesign.com.

It features materials for the exercises, downloadable articles, lists of links from the book, contact information, and more.

Here are a few of the most popular site building services as of this writing:

• WordPress (www.wordpress.com)

• Squarespace (squarespace.com)

• Wix (wix.com)

• SiteBuilder (sitebuilder.com)

• Weebly (weebly.com)

The approach of designing around the user’s needs is referred to as User-Centered Design (UCD)

A wireframe diagram shows the structure of a web page using only outlines for each content type and widget (FIGURE 1-1). The purpose of a wireframe diagram is to indicate how the screen real estate is divided and where functionality and content such as navigation, search boxes, form elements, and so on, are placed. Colors, fonts, and other visual identity elements are deliberately omitted so as not to distract from the structure of the page. These diagrams are usually annotated with instructions for how things should work so the development team knows what to build.

A site diagram indicates the structure of the site as a whole and how individual pages relate to one another.

One option for separating style from screen size is to use style tiles, a technique introduced by Samantha Warren (see Note). Style tiles include examples of color schemes, branding elements, UI treatments, text treatment, and mood (FIGURE 1-5). Once the details are decided upon, they can be implemented into working prototypes and the final site. For more on this technique, visit Samantha’s excellent site, styletil.es, where you can download a template.

Frontend Development

Frontend development includes the following web technologies:

• HyperText Markup Language (HTML)

• Cascading Style Sheets (CSS)

• JavaScript and DOM scripting, including AJAX and JavaScriptbased frameworks