Web Page Design and Production Case Tutorial (HTML+CSS+DIV+JavaScript)

Name: Web Page Design and Production Case Tutorial (HTML+CSS+DIV+JavaScript)
ISBN: 9787115442727

李志云Posts & Telecom Press · ChinaAug 2021

Rating 3.2

Word count: 83K words
Chapters: 170
ISBN: 9787115442727

Summary

This book is organized around real-world website production cases, focusing on the creation of a School of Information website. The knowledge points involved in building this site are broken down, with each chapter introduced by a small case that highlights key concepts, culminating in the completion of the full case. Through implementing the case, readers master the key techniques for building websites with HTML, CSS, and JavaScript. The final chapter presents the production of a dynamic website for Chenfeng Power Generation Equipment Co., covering the entire real-world workflow: design planning, mockup creation, static site implementation, and completion of the dynamic site using the Kesion CMS backend management system.

Editor's review

Web Design and Production Case Tutorial (HTML+CSS+DIV+JavaScript) is a classic introductory tutorial for beginners in front-end web development, published by Posts & Telecom Press and authored by Li Zhiyun. Driven by practical cases, the book systematically explains the core technology stack of web development, from HTML and CSS to JavaScript. Its greatest strength lies in abandoning dry syntax lists and guiding readers to master knowledge points through hands-on practice with numerous project cases drawn from real work scenarios. The content follows a gradual learning curve, from basic web page structure to complex interactive effects, with clear logic and detailed steps. For absolute beginners, the book offers a smooth path to get started; for readers with some foundation, its in-depth analysis of the DIV+CSS layout model and basic JavaScript applications helps solidify fundamentals and standardize coding habits. As a technical tutorial, its content is solid and its cases classic. Although published several years ago, its discussion of core front-end development ideas and basic techniques remains relevant and offers high reference value. Readers should note, however, that front-end technology evolves rapidly; the book does not cover some new features of HTML5 and CSS3 or modern front-end frameworks, making it better suited as a 'first book' for building a solid foundation.

Who it's for

A good fit for

Beginners who want to systematically learn front-end web development fundamentals from scratch
Computer science students who need an operational guide combining theory and practice
Traditional back-end developers or designers looking to expand their front-end skills
Enthusiasts interested in web production who want to get started quickly and see results through cases

Not a good fit for

Developers seeking to learn modern front-end frameworks such as React or Vue, or the latest ES6+ syntax
Senior engineers with extensive front-end experience who want to explore advanced topics or performance optimization in depth

Reading tips

Follow the chapter order strictly and type out every case by hand; do not just read without practicing
When studying CSS and JavaScript sections, use browser developer tools for debugging and verifying results to deepen understanding
After completing the book's cases, try independently imitating a simple website you like to consolidate the knowledge system

About the publisher

Posts & Telecom Press China · Founded in 1953

Posts & Telecom Press is known for its strengths in science and technology, computing, and information and communications titles, and has extended its publishing into photography, art, software learning, and inspirational growth, giving it a fairly diverse range. Its catalog includes computing and communications works such as Refactoring and Patterns (Revised Edition) and Huawei Switch Learning Guide (Second Edition), alongside bilingual collector's editions such as The Little Prince (Chinese-English-French illustrated collector's edition), The Great Gatsby, and Three Days to See. Beijing Ten Years: 1980-1990 and Ghost Blade: WLOP Personal Illustration Collection reflect its presence in photography and art. Its authors include Antoine de Saint-Exupéry, Helen Keller, Joshua Kerievsky, Wang Da, Zhang Zhaozeng, and WLOP.

版权信息
内容提要
前言
第1章网页设计概述
1.1 初识网页
1.2 网页相关概念
1.3 常用的浏览器介绍
1.4 Dreamweaver工具的使用
1.4.1 Dreamweaver的发展
1.4.2 Dreamweaver CS6 的操作界面
1.4.3 案例：创建第一个网页
本章小结
习题 1
实训 1
第2章 HTML语言
2.1 案例：简单学校网站
2.2 知识准备
2.2.1 HTML文档的基本结构
2.2.2 HTML标记及其属性
2.2.3 HTML文本标记
2.2.4 HTML列表标记
2.2.5 HTML超链接标记
2.2.6 HTML图像标记
2.3 案例实现
2.3.1 创建站点
2.3.2 创建首页
2.3.3 创建学院简介页面
2.3.4 创建学院新闻页面
2.3.5 创建专业介绍页面
本章小结
习题 2
实训 2
第3章 CSS基础
3.1 案例：学院新闻详情页面
3.2 知识准备
3.2.1 初识CSS
3.2.2 引入CSS样式
3.2.3 常用的CSS选择器
3.2.4 CSS常用文本属性
3.2.5 CSS的高级特性
3.3 案例实现
3.3.1 创建站点
3.3.2 创建新闻详情页面
本章小结
习题 3
实训 3
第4章盒子模型
4.1 案例：学院简介页面
4.2 知识准备
4.2.1 盒子模型的概念
4.2.2 盒子模型的相关属性
4.2.3 CSS设置背景
4.2.4 元素的类型与转换
4.2.5 块元素间的外边距
4.3 案例实现
4.3.1 制作页面结构
4.3.2 添加CSS样式
本章小结
习题 4
实训 4
第5章列表与超链接
5.1 案例：学院新闻块与学院网站导航
5.2 知识准备
5.2.1 列表样式设置
5.2.2 超链接样式设置
5.3 案例实现
5.3.1 制作学院新闻块
5.3.2 制作学院网站导航条
本章小结
习题 5
实训 5
第6章表格与表单
6.1 表格案例：学生信息表
6.2 表格相关知识
6.2.1 表格标记
6.2.2 <table>标记的属性
6.2.3 <tr>标记的属性
6.2.4 <th>和<td>标记的属性
6.2.5 使用CSS设置表格样式
6.3 表格案例实现
6.3.1 学生信息表的页面结构
6.3.2 添加CSS样式
6.4 表单案例：用户注册表
6.5 表单相关知识
6.5.1 认识表单
6.5.2 表单标记
6.5.3 表单控件
6.5.4 使用CSS设置表单样式
6.6 表单案例实现
6.6.1 用户信息注册表单的页面结构
6.6.2 添加CSS样式
本章小结
习题 6
实训 6
第7章 DIV+CSS布局网页
7.1 案例：学院网站主页布局
7.2 知识准备
7.2.1 元素的浮动
7.2.2 元素的定位
7.2.3 DIV+CSS布局
7.3 案例实现
7.3.1 制作页面结构
7.3.2 添加CSS样式
本章小结
习题 7
实训 7
第8章使用JavaScript制作网页特效
8.1 什么是JavaScript语言
8.2 在网页中调用JavaScript
8.2.1 直接嵌入HTML文档中
8.2.2 引入外部脚本文件
8.2.3 在事件代码中添加脚本
8.3 案例：制作Flash幻灯片特效
8.4 案例：制作下拉菜单特效
8.5 案例：制作选项卡特效
本章小结
习题 8
实训 8
第9章完整案例：信息学院网站制作
9.1 信息学院网站描述
9.2 网站规划
9.3 效果图设计
9.3.1 效果图设计原则
9.3.2 效果图设计步骤
9.3.3 效果图切片导出网页
9.4 网站主页设计
9.4.1 主页布局设计
9.4.2 主页设计步骤
9.5 网站模板页设计
9.6 网站其他页面设计
9.6.1 制作学院简介页面
9.6.2 制作学院荣誉列表页面
9.6.3 制作学院荣誉详细情况页面
9.6.4 制作高技能人才培训基地页面
9.6.5 制作办公电话页面
9.6.6 制作视频宣传页面
9.7 添加首页中的JavaScript脚本
本章小结
习题 9
实训 9
第10章完整案例：发电设备公司动态网站制作
10.1 发电设备公司动态网站描述
10.2 网站规划
10.3 效果图设计
10.3.1 效果图设计原则
10.3.2 效果图设计步骤
10.3.3 效果图切片导出网页
10.4 网站静态页面设计
10.4.1 网站首页设计
10.4.2 栏目页设计
10.4.3 内容页设计
10.5 KesionCMS后台管理系统的使用
10.5.1 KesionCMS介绍
10.5.2 KesionCMS完成动态网站的步骤
10.5.3 静态页面与KesionCMS的整合
10.6 IIS的安装与配置
10.7 后台登录与设置
10.7.1 后台登录
10.7.2 基本信息设置
10.7.3 设置网站栏目
10.8 创建系统函数标签
10.9 创建网站模板
10.10 模板绑定
10.11 添加文章内容
10.12 创建留言页面
10.13 发布首页
10.14 创建模板中的超链接
本章小结
实训 10
参考文献

FAQ

Is this book suitable for someone with no programming background at all?

Very suitable. The book starts from the most basic HTML tags and uses step-by-step case teaching to help zero-foundation readers get started smoothly.

Is the technical content in the book outdated?

The core HTML, CSS, and JavaScript syntax and web layout ideas (such as DIV+CSS) are not outdated; they are the cornerstone of front-end development. However, the book does not cover newer content such as new features of HTML5 and CSS3 or responsive design. It can serve as a solid foundational textbook, but readers will need to supplement with new knowledge afterward.

What are the advantages of this book compared with watching online video tutorials?

The book's advantages lie in the systematic structure of knowledge and the coherence of its cases. It provides a carefully designed, gradual learning path with high knowledge density, making it convenient for reference and repeated practice at any time, and helping build a more solid and complete front-end knowledge framework.

Related on WeRead

网页设计与制作案例教程（HTML+CSS+DIV+JavaScript）李志云

This site is an index: you start “Search all sources” in your browser, and the entries it lists all point to third-party sites; please judge their availability yourself.

About the author

李志云 Author

Li Zhiyun: publicly available information is limited, and details such as biography, nationality, and dates of birth and death cannot currently be confirmed. Judging from the two works held in the database, Li Zhiyun focuses on technical writing in web front-end development and web design. Representative works include Web Front-End Development Case Tutorial (HTML5+CSS3) (Micro-Lecture Edition) and Web Design and Production Case Tutorial (HTML+CSS+DIV+JavaScript). Both are computer textbooks titled "case tutorials," aimed at beginners and classroom teaching. They cover core front-end technologies such as HTML5, CSS3, HTML, CSS, DIV, and JavaScript, explaining page structure, style layout, and interactive scripting through a case-driven approach, and are accompanied by micro-lecture resources for learning by doing. The writing style emphasizes practicality and hands-on operation, starting from concrete projects to master the development process, making the books suitable as introductory reading for vocational college or applied undergraduate courses.