网易杭州研究院 网易杭州研究院

页面制作

所属微专业:

图片
课程概述

页面制作课程以解决实际案例为导向,从基础表现到原理深入再到实际应用,教授如何使用HTML、CSS来编写静态页面。

课程的核心内容有PS切图、HTML标签、CSS选择器、CSS文本、CSS盒模型、CSS背景、CSS布局、CSS动画等。

学完本课程后你可以:

  1. 掌握Photoshop切图技巧,独立完成切图

  2. 掌握HTML,能编写语义化的网页

  3. 掌握CSS,能完成网页布局和排版

  4. 能独立完成从效果图到网页的编码实现

证书要求

本课程的成绩由四部分组成:

  1. 单元测验,占20%。

  2. 单元作业,占15%。

  3. 考试,占50%。

  4. 课程讨论,占15%。

获得综合评分60分的可以获得本课程的合格证书,获得85分的可以获得优秀证书。


章节试看
  • 定位

预备知识

了解PS的基本使用方法

了解html基本标签

了解css基本选择器和属性

授课大纲
单元(章)课题(节)内容
1.Photoshop切图1.工具、面板、视图介绍切图概念、PS软件、PS的面板+常用工具+辅助视图。
2.测量、取色介绍并演示获取信息的方法:测量与取色
3.切图切图及切图的各种操作:隐藏文字(独立图层和非独立图层的不同操作方法)、png8和png24格式的切图方式、可平铺背景的切图方式及活动页的切图方式。
4.保存保存图片的操作,图片的几种保存格式(png8\png24\jpg)
5.修改、维护图片的修改与维护方式
6.图片优化与合并图片的使用方法,图片的优化合并方案(包括图片合并的排列方式及分类合并方案),图片兼容方案。
2.开发、调试工具1.开发、调试工具常用开发工具和调试工具的功能介绍与使用方法
3.HTML1.HTML简介简要介绍HTML发展历史、基本概念和文档声明等
2.标签介绍标签语法、各类标签及语义化
3.实体字符介绍常用实体字符
4.CSS1.CSS简介简要介绍CSS发展历史和基本概念、引入、基本语法
2.选择器基本选择器、属性选择器、伪类选择器、伪元素选择器、组合选择器、分组选择器、优先级、层叠、继承、!important
3.文本字体的基本设置、对齐方式、格式处理、高级设置等
4.盒模型盒模型概念、width、height、padding、margin(水平居中)、border、border-radius、overflow、box-sizing、box-shadow、outline
5.背景background基本属性、线性渐变、径向渐变
6.布局布局简介、display(水平居中、居中导航)position(轮播头图、固定顶栏、遮罩、三行自适应布局)float(两列布局)flex(三行两列自适应)
7.变形2d变形方法、3d变形方法
8.动画过渡动画、帧动画