第六章：网页设计
文章目录：一：网页设计
1.基本概念
1.1 网页
1.2 网站
1.3 工具
2.HTML语言
2.1 基础
2.2 标记
2.2.1 布局
2.2.2 文本
2.2.3 功能
2.2.4 表单
2.3 属性
二：IIS
1.界说
2.主要功能
3.特点与上风
4.应用场景
4.1 安装IIS
4.2 设置IIS
4.3 发布网站
可参考：前端三剑客HTML CSS JS教案（理论+代码+效果图）
一：网页设计
1.基本概念
1.1 网页
概念
浏览器访问Web服务器时所看到的画⾯称为⽹⻚（⼜称Web⻚）
⽹⻚由超⽂本标记语⾔（HTML）组成
分类
静态⽹⻚
概念
纯html格式的⽹⻚通常被称为“静态⽹⻚”
相对于“动态⽹⻚”而⾔，它没有后台数据库、不包含服务器端程序，与⽤⼾没有交互
格式
.html或.htm
.mht mhtml⽂件，⼜称为聚合html⽂档或单⼀⽂件⽹⻚，是⼀种将⽹⻚的所有内容保存到⼀个⽂件中的格式
.chm chm是微软的⼀种帮助⽂件格式，利⽤html作源⽂，把帮助内容以类似数据库的形式编译储存
动态⽹⻚
概念：以脚本语⾔编写的程序为基础的，具有数据库访问功能，并且能够与⽤⼾进⾏良好的交互
格式：.asp、.aspx、.jsp、.php等1.2 网站
概念：多个相关⽹⻚合在⼀起便组成⼀个⽹站，⼜称Web站点，保存在Web服务器上，通过域名访问
主⻚
Home Page，⽤⼾输⼊域名访问Web站点时看到的第⼀个⽹⻚称为主⻚
它是⼀个Web站点的⾸⻚，通过超链接可以访问所有的⻚⾯，也可以链接到其它⽹站
主⻚⽂件名⼀般为index.html或default.html1.3 工具
FrontPage：微软公司开发的⽹⻚设计⼯具
Dreamweaver
Macromedia公司开发的⽹⻚设计⼯具，集⽹⻚设计与⽹站管理于⼀⾝
它将“所⻅即所得”的⽹⻚设计⽅式与源代码编辑完美结合，在⽹站设计制作领域应⽤⾮常⼴泛
⼀般来说，专业⼈员使⽤Dreamweaver，⾮专业⼈员使⽤FrontPage
⽹⻚三剑客
早期：Macromedia公司的Dreamweaver、Flash、Fireworks
后期：Adobe公司的Dreamweaver、Flash、Photoshop2.HTML语言
2.1 基础
概念
Hyper Text Markup Language，超⽂本标记语⾔
是⽤于描述⽹⻚⽂档的标记语⾔，由万维⽹协会（W3C）制定，最新版本是HTML5
XHTML
the eXtensible Hypertext Markup Language，可扩展超⽂本标记语⾔
是⼀种基于可扩展标识语⾔（XML）的标记语⾔，它结合了XML的强⼤功能及HTML的简单特性
可以看成是⼀种增强了的HTML，它的可扩展性和灵活性将适应未来⽹络应⽤更多的需求
语法
标记
html中的标记以⼀对“<>”定界，起始标记的名称前加⼀个斜杠“/”即表⽰结束标记
语法上，起始标记和结束标记应成对出现
html不⽀持⾃定义标记，xml和xhtml⽀持⾃定义标记
属性：标记的功能可通过属性扩展，属性值需要使⽤⼀对双引号或单引号定界
格式
双标记
⽤于有标记内容时，HTML中的⼤多数标记都是双标记
<标记 [属性1="属性值1" 属性2="属性值2"]……>标记内容</标记>
单标记
⽤于没有标记内容时，<br>、<hr>、<img>和<input>是单标记
<标记 [属性1="属性值1" 属性2="属性值2"]…… />
样式
概念：CSS，Cascading Style Sheet，层叠样式表或⻛格样式表，⽤于⽹⻚⻛格的设计
说明：通过设⽴样式表，可以统⼀地控制⽹⻚的外观以及创建特殊效果
布局
概念
设计⼀个⽹⻚⾸先考虑的问题是⻚⾯布局
⻚⾯布局是对⽹⻚中的各个元素在⽹⻚上进⾏合理安排，使其具有和谐的⽐例和艺术的效果
⽅法
在⽹⻚设计中，常常借助表格和层来布局⻚⾯
表格
<table>、<th>、<tr>、<td>等标记
使⽤表格可以控制⻚⾯中元素的对⻬，使⼤量的信息整⻬地展⽰在⽹⻚中
⽤表格布局⻚⾯需要事先把整个⻚⾯设计出来，对⻚⾯布局不满意时，调整起来也⽐较⿇烦
层
<div>标记
“层”相当于Word中浮动的⽂本框，可以⽤⿏标拖动到⻚⾯的任何地⽅
在创建复杂⽹⻚时，常⽤“层”来实现⽹⻚元素的精确定位
⾏为
概念：⾏为能使⽤⼾极为⽅便地创作出复杂的动画效果，或执⾏某些特定的任务，⾏为包含事件和动作两部分
事件
指发⽣在⽹⻚元素上的事情，包含单击⿏标、移动⿏标、⿏标悬停等
单击⿏标 onClick
移动⿏标 onMouseMove
⿏标悬停 onMouseOver，⼜叫⿏标经过
⿏标移出 onMouseOut，通常和onMouseOver搭配使⽤
动作：指事件发⽣时，对应的⽹⻚元素做出的响应2.2 标记
2.2.1 布局
html>
<html>…</html>
html的所有内容都放置在此标记内
<head>
<head>…</head>
head中除了“<title>”标记的所有内容不直接显⽰在浏览器中
两个重要标记
<title> <title>…</title> head中的标记，显⽰在浏览器的标题栏中
<meta>
<meta charset=?⽂档的编码字符集" /> 浏览器显⽰该⽂档时使⽤的编码
这⾥指定的编码必须与⽂件本⾝的编码保持⼀致或兼容，否则会导致乱码
body>
<body>…</body>
body中的所有内容都显⽰在浏览器的正⽂区中
bgcolor属性：⽤于设置⽹⻚的背景⾊，HTML中所有需要设置颜⾊的地⽅都可以使⽤这些的⾊彩值
使⽤常量值
bgcolor=?red?红⾊
bgcolor=?green? 绿⾊
bgcolor=?blue?蓝⾊
使⽤索引值
bgcolor=?#FF0000?红⾊
bgcolor=?#00FF00?绿⾊
bgcolor=?#0000FF?蓝⾊
bgcolor=?#FFFF00?紫⾊
bgcolor=?#000000?⿊⾊
bgcolor=?#333333?深灰⾊
bgcolor=?#A9A9A9?浅灰⾊
bgcolor=?#FFFFFF?⽩⾊2.2.2 文本
标题<h1>~<h6>
<h1>...</h1>，... ，<h6>...</h6>
标题标记，以加粗、放⼤的字号显⽰其中的⽂本
<h1>的字号最⼤，称为⼀级标题，<h6>的字号最小
段落：<p> <p>...</p>段落标签，⼀对<p>...</p>标签中的内容属于同⼀段，段与段之间空⼀⾏
格式
<b> <b>...</b> 使⽂字加粗显⽰，也可以使⽤<strong>标记实现同样的效果
<i> <i>...</i> 使⽂字斜体显⽰
<u> <u>...</u> 给⽂字加上下划线
<s> <s>...</s> 给⽂字加上删除线
<sup> <sup>...</sup> ⼀对<sup>标记中的内容显⽰为上标
<sub> <sub>...</sub> ⼀对<sub>中的内容显⽰为下标
font> 说明 设置字体、字号、颜⾊等的标签
size <font size=?x?>...</font> 设定字体⼤小，x的值在1~7之间，?size=1?最小，?size=7?最⼤
color font color=?...?>...</font>
设定字体颜⾊，可使⽤“red”、“green”、“blue等常量值
也可以使⽤RGB形式，如color=?#FF0000?（等价于color=?red?）
face <font face=?...?>...</font> 设定⽂字的字体，如face=?等线"，表⽰设定⽂字的字体为“等线”2.2.3 功能
换⾏ <br> <br>或<br/>
换⾏标记，连续两个<br>标记的显⽰效果与分段相似（空⼀⾏）
在Dreamweaver的设计视图中，按回⻋会⽣成⼀对<p>标记，按“Shift+回⻋”会⽣成⼀个<br>标记
分割
<hr> <hr>或<hr/> ⽔平线、分割线标记，显⽰⼀根⽔平线，以分割⽹⻚的不同部分
链接<a>
说明
超链接标记，超⽂本（Hyper Text）因此功能而得名，是HTML中最重要的标记
可以设定超链接的对象，常⻅的有⽂本和图⽚对象
功能
①
⽹⻚之间的超链接，<a href=?url?>...</a>
说明
单击该链接会打开另⼀个⽹⻚或访问万维⽹中的其它资源（图⽚、⽂件、视频等）
创建⽹⻚之间的超链接时，不应使⽤绝对路径，应使⽤相对路径
这样当⽹站⽂件夹更名或更换位置时，就不需要重新修改链接了
②
电⼦邮件超链接，<a href=?mailto:邮箱地址?>...</a>
说明
单击该链接会打开默认的邮件客⼾端向指定邮箱发送电⼦邮件
③
命名锚记链接，<a name=?锚记名?></a>
说明
锚记链接是指链接到同⼀个⽹⻚或不同⽹⻚中指定位置的超链接
可以对⽹⻚中的各个部分加上锚记，浏览者只要点击锚记即可快速到达指定的部分
属性target
target=?_self? 链接⽬标在当前窗口中打开，默认值
target=?_blank? 链接⽬标在新窗口中打开
target=?_parent? 链接⽬标在⽗窗口中打开（使⽤框架时）
target=?_top? 链接⽬标在三级窗口打开（使⽤多级框架时）
图⽚<img>
<img src=?url?/>，在⽹⻚中显⽰url指定的图⽚
说明
⽹⻚中使⽤的图像和⽂件格式主要有GIF、JPEG和PNG
为了⽅便管理，图像⽂件⼀般不与⽹⻚保存在同⼀个⽂件夹中，而是存⼊⼀个专⻔的⽂件夹（如images）中
应该使⽤相对路径，这样复制到其它计算机中浏览时就不会出现路径问题
热点
⼀张图像上可以添加多个超链接，称为“图像热点”或“图像地图”
在图像中创建多个热点区域，每个热点区域包含⼀个超链接
热点形状可以是矩形、圆形或者多边形，热点位置可以⾃⾏设定
表格<table>
说明
表格标记，通过<table>、<th>、<tr>和<td>，可以构造表格
表格的最外层标记，表⽰"整个表格"；⼀个<table>标记中可以包含多个<tr>和<td>
属性 border
默认为0，即没有边框，数字越⼤边框越粗
默认的边框样式是带“3D浮雕”效果的
相关
<th> 定义表格内的表头单元格，⼀般⽤在第⼀⾏，被标记的⽂本会加粗、居中显⽰
<tr> 定义表格中的⼀⾏，表格中有⼏对<tr>就有⼏⾏
<td>
定义⾏中的单元格，⼀对<tr>中有⼏对<td>，那么该⾏就有⼏个单元格
属性：这两个属性通常⽤于构建⾮标准的表格
colspan某个单元格跨越的列数
rowspan某个单元格跨越的⾏数
列表
ul <ul>...</ul>
⽆序列表，类似于Word中的项⽬符号（⾮数字符号）
li <li>...</li> ⽆序列表中的列表项
ol <ol>...</ol>
有序列表，类似于Word中的项⽬编号（数字编号）
li <li>...</li> 有序列表中的列表项2.2.4 表单
<form>
语法 <form>...</form>
说明
表单为⽤⼾输⼊信息提供了⼀种有序的结构，表单中⽤来输⼊信息的各种表单元素称为表单域
常⻅的表单域有⽂本域、密码域、单选框、复选框、列表、下拉列表、⽂本区域、按钮等
所有的表单域都应当包含在⼀对<form>标记中，否则提交按钮和重置按钮会失效
属性
action=?url?：提交表单时，会把⽤⼾在表单域中填写的所有信息发送到action指定的url中处理
method
method=?get? 提交的信息直接附加在url的尾部，可⻅且不安全
method=?post? 封装在在http的消息主体中，不可⻅，更安全
<input>
语法 <input type=?...?/>
说明
type=?text? ⽂本域
type=?password? 密码域，其中的内容会显⽰为“*”
type=?checkbox? 复选框，可以单选、多选、全选
type=?radio? 单选框，在所有的选项中只能选择⼀个
type=?submit? “提交”按钮，单击会把表单中的信息提交到<form>标记的action属性指定的url中处理
type=?reset? “重置”按钮，单击会清空该表单中的所有信息，每个控件的状态恢复初始值
<select>
语法 <select>...</select>
说明
下拉列表框，使⽤multiple属性可以变成能够多选的列表框
<option>...</option> 列表框中的选项
<textarea>
语法：<textarea>...</textarea>
说明：⽂本区域标记，⽂本域⽤于显⽰⼀⾏，⽂本区域可显⽰多⾏2.3 属性
说明：align、valign、width和height属性可以⽤在⼤多数HTML的标记中
对⻬
align说明 ⽔平对⻬
align=?left? 左对⻬
align=?center? ⽔平居中对⻬
align=?right? 右对⻬
valign垂直对⻬⽅式
valign=?top? 顶对⻬
valign=?middle? 垂直居中对⻬
valign=?bottom? 底对⻬
⼤小
width标记对象的宽度
px 像素（绝对值）
% 标记对象相对于整个窗口的宽度⼤小（百分⽐例）
height标记对象的⾼度
px 像素（绝对值）
% 标记对象相对于整个窗口的⾼度⼤小（百分⽐例）二：IIS
1.界说
IIS（Internet Information Services，互联网信息服务）是微软公司提供的基于运行Microsoft Windows的互联网基本服务组件
1.它集成了Web服务器、FTP服务器、NNTP服务器和SMTP服务器
分别用于网页浏览、文件传输、新闻服务和邮件发送等方面
它使得在网络（包括互联网和局域网）上发布信息成了一件很容易的事
2.IIS是Windows NT的核心组件之一，提供了基于运行Microsoft Windows的互联网基本服务
3.IIS是一种灵活、易于管理的Web服务器，它提供了基于图形用户界面（GUI）的管理工具，称为“Internet信息服务管理器”
可用于配置和管理网站及应用程序。通过IIS，用户可以轻松地创建、发布和管理网站，以及提供Web应用程序和服务
4.IIS还支持多种编程语言和开发框架，如ASP.NET、PHP、Node.js等
使得开发人员可以灵活地使用自己熟悉的工具和技术来构建和部署Web应用程序
5.IIS还提供了丰富的安全功能，如SSL/TLS加密、身份验证和授权机制等，以保护Web应用程序和数据的安全2.主要功能
Web服务器：IIS可以作为Web服务器，托管网站和Web应用程序。它支持多种编程语言
如ASP.NET、PHP、Node.js等，使得开发人员可以灵活地使用自己熟悉的工具和技术来构建和部署Web应用程序
FTP服务器：IIS提供了FTP（文件传输协议）服务器功能，允许用户上传和下载文件
这对于需要在线共享和分发文件的用户来说非常有用
NNTP服务器：NNTP（网络新闻传输协议）服务器允许用户访问和发布Usenet新闻组
这对于新闻发布和讨论论坛等场景非常适用
SMTP服务器：IIS还提供了SMTP（简单邮件传输协议）服务器功能，用于发送和接收电子邮件
这对于需要构建自己的邮件服务器的用户来说是一个很好的选择3.特点与上风
易于管理：IIS提供了基于图形用户界面（GUI）的管理工具，称为“Internet信息服务管理器”
用户可以通过它来配置和管理网站及应用程序，无需具备复杂的命令行操作知识
可扩展性：IIS支持多种插件和扩展，用户可以根据自己的需求添加新的功能模块或定制现有功能
安全性：IIS提供了丰富的安全功能，如SSL/TLS加密、身份验证和授权机制等，以保护Web应用程序和数据的安全
同时，它还支持防火墙和入侵检测系统等功能，进一步增强了系统的安全性
高性能：IIS采用了先进的缓存技术和优化算法，提高了Web服务器的性能和响应速度
同时，它还支持负载均衡和集群等技术，使得系统能够处理更多的并发请求和提供更可靠的服务4.应用场景
IIS适用于各种规模的网站和Web应用程序，包括个人博客、企业网站、电子商务平台、在线学习平台等
此外，它还可以用于构建和管理内部网络中的Web应用程序和服务，如企业内部门户网站、文件共享平台等 4.1 安装IIS
1.确认操作系统版本：确保操作系统满足IIS的安装要求
例如，IIS 10适用于Windows 10、Windows Server 2016和Windows Server 2019
2.以管理员身份登录：为了成功安装IIS，需要以管理员身份登录Windows系统
3.打开服务器管理器：点击“开始”菜单，找到并打开“服务器管理器”
4.添加角色和功能：
在“服务器管理器”中，点击“添加角色和功能”按钮
在“添加角色和功能向导”中，选择“Web服务器（IIS）”，然后点击“下一步”
在“功能”选项卡中，勾选“Web服务器支持”等相关功能，然后点击“下一步”
在“确认”页面，检查安装摘要，确保无误后点击“安装”
等待安装完成后，点击“关闭”按钮
5.注意事项：
在安装IIS之前，确保操作系统已经安装了最新的更新和补丁
在安装过程中，可以暂时关闭防火墙，以免其阻止IIS的正常安装。但安装完成后，记得重新开启防火墙并配置相应的规则
IIS需要.NET Framework支持，请确认.NET Framework已经安装，并且版本与IIS兼容
为了避免资源浪费和潜在的安全风险，建议仅安装必要的IIS组件4.2 设置IIS
1.打开IIS管理控制台：可以通过在运行中输入“inetmgr”来打开。
2.配置网站：
在IIS管理控制台中，找到左侧面板的“站点”节点，右键单击并选择“添加网站”
在弹出的对话框中，输入网站名称并选择要将网站绑定到的IP地址和端口
选择网站的根目录，即存放网站文件的文件夹
配置其他选项，如访问权限、日志设置等
3.配置应用程序池：
应用程序池是IIS用来运行网站的进程池。默认情况下，IIS会为每个网站创建一个应用程序池
在IIS管理控制台中，找到左侧面板的“应用程序池”节点，右键单击并选择“添加应用程序池”
为应用程序池指定名称，并配置其他选项，如.NET版本和进程模型
4.配置默认文档：
默认文档是当用户访问网站时，IIS默认打开的页面
在IIS管理控制台中，选中网站节点，然后找到“默认文档”功能
在默认文档列表中，可以添加、删除或调整默认文档的优先顺序
5.设置访问限制：
为了保证服务器的安全运行，可以限制客户端访问的数量和带宽
在IIS管理控制台中，找到网站的“连接限制”或“带宽限制”功能，并进行相应的设置
6.配置MIME类型：
MIME类型是描述消息内容类型的标准。在IIS中，需要为不同的文件扩展名配置相应的MIME类型
在IIS管理控制台中，找到MIME类型配置功能，并添加或修改MIME类型
7.创建虚拟目录：
虚拟目录是将其他目录以映射的方式虚拟到服务器的主目录下。这有助于节省主目录所在盘的空间，并方便管理上传的文件
在IIS管理控制台中，右键单击网站节点，选择“添加虚拟目录”，并按照提示进行配置4.3 发布网站
1.准备网站文件：在本地环境中创建和调试网站，确保网站文件夹包含所有必需的文件，如HTML、CSS、JavaScript、图像等
2.复制网站文件到服务器：将网站文件复制到服务器的本地目录，或者通过FTP上传到服务器
确保文件的正确和完整
3.绑定域名和主机空间（如适用）：如果使用了域名和主机空间，需要将域名和IIS服务器的主机空间绑定起来
具体操作可以根据主机托管商提供的教程来进行
4.测试网站：在浏览器中输入服务器的IP地址或域名（如果已绑定），加上端口号（如果有），访问并测试网站
确保网站在不同浏览器、不同设备上的兼容性和稳定性
5.备份网站文件：在发布网站之前或之后，务必将网站文件进行备份，以防止数据丢失或不可预测的问题发生
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]