网页设计与制作课程学习平台

1 网页基本知识

HTML概念

HyperText Markup Language - 超文本标记语言

以标记的形式承载了除了文字以外的内容，如：图片，视频，音频等

也是Web前端基础入门课程

网站和网页

应用范围：

传统的网站：PC电脑端的网站应用程序
现阶段：包括各种移动APP，微信小程序
一个网站或APP包含大量页面，第一个页面称为首页

网站简单原理及相关技术

1. 打开浏览器，输入网址URL访问（向网站服务器发送请求）

2. 网址经过DNS域名解析服务器，将网址解析成服务器所在的IP地址

3. 服务器收到请求，处理（整合程序和数据库），进行响应

4. 浏览器解析响应数据，显示成页面

5. 浏览过程中多次请求和响应

Web技术分类

Web前端：用户看得到的界面

相关技术：HTML网页，JavaScript脚本，jQuery框架，前端框架(Bootstrap, Vue)

后端：程序的开发人员，程序的所有者或管理人员

相关技术：数据库，网站开发语言(.jsp, .asp, .php)

网页分类

静态页面：页面源代码不变化的页面

常用后缀：.html 或 .htm

动态页面：页面源代码发生变化的页面

常用后缀：.jsp, .asp, .php

第7周 - 网页开发工具

HBuilder使用

1. 打开此电脑，地址栏输入 ftp://10.104.36.131，将文件复制到本机

2. 解压文件 HBuilder.9.1.29.windows，运行HBuilder.exe

创建网站站点

菜单栏-文件-新建-Web项目

项目名称：以学号姓名周次命名，如：250301129陈鑫龙T7_2

项目位置：C:\Users\Administrator\HBuilderProjects（默认）或自定义位置

项目文件夹结构

css/        - 存放外部样式文件
img/        - 存放网页需要的图片
js/         - 存放外部脚本文件
index.html  - 网站的首页（默认）
                    

标签和属性

标签语法：<标签名属性="值"></标签名>

属性语法：<标签名属性名="值"></标签名>

注意事项：

大部分标签成对出现，结束标签前加 /
少量单个标签，如：<br>
标签可以嵌套，形成父子关系
切忌不要相互嵌套，如 <p><a></p></a>

第7周练习

创建Web项目，以学号姓名周次命名，如：250301129陈鑫龙T7_2

添加页面1：完成课本14页例2-2（标题）
添加页面2：完成课本15页例2-3（段落）
添加页面3：完成课本16页例2-4（水平线）
添加页面4：完成课本17页例2-5（换行）

第8周 - 常用标签

基本结构标签

<!DOCTYPE html>    HTML5文档结构说明
<html></html>      HTML根标签
<head></head>      头部标签
<body></body>      浏览器显示内容的区域
                    

文本相关标签

标签	描述	备注
<h1>...<h6>	标题标签	h1最大，h6最小
<p>	段落标签	段落之间有空隙
<hr>	水平线	单个标签
<br>	换行	单个标签
<strong>或<b>	字体加粗	CSS替代：font-weight
<em>或<i>	字体倾斜
<del>或<s>	删除线
<ins>或<u>	下划线

常用标签属性

颜色相关属性：

bgcolor - 背景颜色
color - 字体颜色

颜色取值方式：

颜色单词：blue, red, green
16进制：#000000到#FFFFFF
RGB三原色：RGB(0-255, 0-255, 0-255)

align属性

设置文字的水平方向对齐方式：

left - 左对齐（大部分标签默认）
center - 居中对齐
right - 右对齐

第8周练习

创建Web项目，以学号姓名周次命名，如：250301129陈鑫龙T8

作业：添加页面1，综合运用标签和属性，写一篇自我介绍（150字以上），注意排版整洁美观

第9周 - 特殊字符与CSS入门

特殊字符

有些字符有特殊含义，无法直接显示，需要使用字符实体：

字符	实体代码	描述
空格		非换行空格
<	<	小于号
>	>	大于号
&	&	和号

图像标签 <img>

必备属性：src - 图像路径

可选属性：

width - 宽度
height - 高度
alt - 图片无法显示时的替代文本
title - 鼠标悬停时的提示文本

图片路径：

网络路径：src="https://..."
本地绝对路径：src="E:/1.webp"
相对路径（推荐）：src="img/图片名.jpg"

CSS入门

Cascading Style Sheets - 层叠样式表

优点：

标签修饰和标签结构分离
减少重复代码
利用选择器精确选择标签

CSS样式表分类：

行内样式：在标签内通过style属性设置
内部样式：在<head>内的<style>标签中定义
外部样式：链接外部CSS文件

列表系列标签

无序列表 <ul>：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>
                    

有序列表 <ol>：

<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>
                    

第9周练习

第1次练习：

新建页面1：结合图像和特殊字符，重新写自我介绍
新建页面2：实现类似于微信朋友圈的9宫格效果

第2次练习：

完成老师演示的列表案例
选做：将9宫格作业加上CSS进行修饰和布局

第10周 - 超链接与列表

自定义列表 <dl>

<dl>
  <dt>定义项标题</dt>
  <dd>定义数据描述</dd>
  <dd>另一个描述</dd>
</dl>
                    

页面交互标签

<details>
  <summary>点击展开/折叠</summary>
  <p>这里是展开的内容</p>
</details>
                    

超链接标签 <a>

语法：<a href="目标">内容</a>

href取值：

互联网地址：href="http://www.taobao.com"
本网站页面：href="1.html"
文件夹内页面：href="js/x.html"
上级目录页面：href="../4.html"
不跳转：href="#"
锚点跳转：href="#section1"

target属性：

_self：本页面跳转（默认）
_blank：新标签页打开

第10周练习

第1次练习：

完成自定义列表
完成列表嵌套
选做：完成页面交互

第2次练习：

完成超链接的几种跳转
完成超链接锚点小说（题材自拟）

第11周 - 表格系列标签

表格系列标签

<table>
  <caption>表格标题</caption>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>
                    

表格常用属性

属性	描述	CSS对应
border	边框粗细	border
cellspacing	单元格外部间距	margin
cellpadding	单元格内部间距	padding
rowspan	合并行	-
colspan	合并列	-

第11周练习

第1次练习：

新建页面1：仿造课本141页第1题，写出本班课表

第2次练习：

新建页面1：实现课本130页学生信息表
新建页面2：实现HTML分组
新建页面3：具体看FTP效果图

第12周 - CSS选择器与盒子模型

标签分类

类型	特点	示例
块状标签	独自占据整行，可设置宽高	h1-h6, p, ul, table, div
行内标签	不占整行，设置宽高无效	a, span
行内块标签	不占整行，可设置宽高	img

外部样式表

链接方式：

导入方式：

<style type="text/css">
  @import url("css/1.css");
</style>
                    

CSS基本选择器

选择器	语法	权重值	示例
标签选择器	标签名{...}	1	p{color: red;}
类选择器	.类名{...}	10	.active{color: blue;}
ID选择器	#id名{...}	100	#header{height: 80px;}
行内样式	style="..."	1000	<p style="color:green;">

盒子模型

标准盒子模型：

实际尺寸 = width/height + padding + border

怪异盒子模型：

设置：box-sizing: border-box;

实际尺寸 = 设置的width/height

内容尺寸 = width/height - padding - border

第12周练习

第1次练习：新建页面1，完成百度首页

第2次练习：新建页面2，优化百度首页，使用外部样式文件

第13周 - 表单与复合选择器

表单标签

表单组成：表单域 + 提示信息 + 表单控件

表单域 <form>：

<form action="处理页面" method="get/post">
  ...表单控件...
</form>
                    

表单控件

标签	描述	常用属性
<input>	输入选择类标签	type, name, value
<select>	下拉列表	name, multiple
<textarea>	多行文本框	rows, cols
<datalist>	数据绑定列表	id (配合list属性)

复合选择器

选择器	语法	描述
交集选择器	标签.类名{...}	选择既是某标签又有某类的元素
并集选择器	选择器1,选择器2{...}	同时选择多个元素
后代选择器	父子{...}	选择父元素内的所有子元素
直接后代选择器	父>子{...}	只选择直接子元素
通配符选择器	*{...}	选择所有元素

第13周练习

第1次练习：

完成简易盗号的登录页面
完成课本146页调查问卷

第2次练习：

完成课本154页学生信息注册
完成课本159页交规考试答卷页面
扩展作业：QQ邮箱页面-密码登录

第14周 - 课程总结与复习

课程内容回顾

已学内容：

HTML常用标签（标题、段落、列表、表格、表单等）
CSS基础（选择器、样式表、盒子模型）
网页开发工具使用（HBuilder）
FTP资源获取与作业提交

FTP地址：ftp://10.104.34.48 (4513教室)

第14周练习

新建页面1，实现FTP练习1的效果