网页设计与网站组建标准教程

1、简述网页设计与策划的三个步骤？

网页设计：
第一步：域名注册。
域名是企业在Internet上的地址和标识，是珍贵的电子商标，企业走向国际市场的第一步就是注册域名。在域名步骤中，北京网站建设公司提供了包括国际/国内域名的注册，以及中文域名注册、域名转移、域名解析、域名过户等相关各种服务。
第二步：租用虚拟主机，设计网站。

拥有自己的网站，是在因特网上开展网上服务、进行电子商务活动的基础，是企业建立自己在因特网上的存在、发挥因特网威力、进行商务运作的平台。虚拟主机作为建设电子商务的服务平台，可以使广大企业更加方便、省钱地运转自己的网站。针对不同企业的各种建站要求和服务需要，北京网站建设公司提供了共享服务器标准型、共享服务器双响炮型、专享服务器型、“不停机”电子商务型等四种不同级别或档次的主机可供选择。哈尔滨网站建设公司网页制作的Web界面的控制面板，可以轻松创建网站并进行管理。

第三步：网站优化

企业网站是产品行销的关键。要想达到网站营销，人力资源素质提升是首要条件，哈尔滨威扬网络在提供基础的企业网站建设的同时,面向广大企业、个人用户开展了网站优化业务,使网站成为为企业开展网络营销的先锋。

2、网页制作与网站开发从入门到精通的目录

版本一
第1章标准网页设计概述
1．1Web标准发展概述
1．2什么是网页标准
1．2．1网页结构化语言
1．2．2网页表现语言
1．2．3网页行为语言
1．3学习标准设计将会给你带来什么
l．3．1对于用户来说，更易用
1．3．2对于设计者来说，更高效
1．3．3对于服务来说，成本更低
1．4学习标准设计中应注意的问题
1．4．1不要为了验证而验证
1．4．2不要被传统布局思维所束缚
1．4．3不要乱用标签和属性
1．5如何学习标准网页设计
1．5．1一位拓荒者的标准学习之路
1．5．2你需要准备什么
第2章Demo，一起体验标准化设计流程
2．1与客户交流获取资料
2．1．1不要张口就问设计效果
2．1．2向客户获取有价值的资料
2．2构建符合语义的结构
2．2．1不要使用表格设计结构
2．2．2不要把结构当作段落文本
2．2．3div不是万能的
2．2．4使用符合语义的元素
2．3与客户沟通并设计页面表现效果
2．3．1不要为了设计样式而随意设置id属性和class属性
2．3．2设计精致典雅的界面风格
2．3．3设计个性洒脱的界面风格
第3章HTML语言基础
3．1HTML语言概述
3．1．1认识HTML语言
3．1．2HTML语言的发展历史
3．2HTML语言规范
3．2．1HTML文档结构
3．2．2HTML基本语法
3．3HTML文档类型和名字空间
3．3．1认识DOCTYPE
3．3．2DOCTYPE结构分析
3．3．3HTML文档类型分类
3．3．4HTML文档类型使用误区
3．3．5探析文档类型定义(DTD)
3．3．6名字空间
3．4HTML文档元信息
第4章HTML元素的语义性及其使用
4．1网页语义化概述
4．1．1什么是语义化网页
4．1．2HTML语义化现状和发展
4．2HTML元素的语义分类
4．2．1结构语义元素
4．2．2内容语义元素
4．2．3修饰语义元素
4．3HTML属性的语义分类
4．3．1核心语义属性
4．3．2语言语义属性
4．3．3键盘语义属性
4．3．4内容语义属性
4．3．5其他语义属性
4．4文本信息的语义结构
4．4．1标题信息的语义结构
4．4．2段落信息的语义结构
4．4．3引用信息的语义结构
4．4．4强调信息的语义结构
4．4．5格式化文本的语义结构
4．4．6输出信息的语义结构
4．4．7信息缩写的语义结构
4．4．8插入和删除信息的语义结构
4．4．9其他文本信息的语义结构
4．5表信息的语义结构
4．5．1认识列表结构
4．5．2使用普通列表结构
4．5．3使用定义列表结构
4．5．4使用定义列表的误区
4．6数据表格的语义化结构
4．6．1认识数据表的结构
4．6．2使用表格元素
4．6．3数据分组
4．7表单的语义化基本结构
4．7．1认识表单的结构
4．7．2认识表单元素
4．7．3form元素
4．7．4input元素
4．7．5textarea和select元素
4．8表单结构的语义化高级设计
4．8．1表单分组
4．8．2绑定提示标签到表单域
4．8．3快捷键、访问键和禁止访问
4．8．4select选项分区
4．8．5使用按钮
第5章网页结构化实施与应用
5．1HTML元素的显示类型
5．1．1认识元素显示类型
5．1．2块状元素
5．1．3行内元素
5．1．4其他元素
5．2HTML结构嵌套规则详解
5．2．1结构乱套何时休
5．2．2(X)HTMLStrict下嵌套规则
5．2．3HTM[，嵌套规则解析
5．3解析Stopdesign的结构
5．3．1认识Stopdesign
5．3．2Stopdesign首页内容版块分析
5．3．3构建基本结构
5．3．4构建微观结构
5．3．5结构的SEO设计
5．3．6版式结构设计
5．4解析CSSZENGARDEN结构
5．4．1认识CSS禅意花园
5．4．2禅意花园内容版块分析
5．4．3构建禅意花园的基本结构
5．4．4构建禅意花园的微观结构
5．4．5版式结构设计
第6章CSS语言基础
6．1创建CSS样式
6．1．1网页样式发展概述
6．1．2CSS样式的构成
6．2应用CSS样式
6．2．1行内样式
6．2．2内部样式
6．2．3外部样式
6．2．4引入外部样式
6．3准确选用CSS选择器
6．3．1基本选择器
6．3．2选定范围?选择器
6．3．3属性选择器
6．3．4选择器分组、嵌套和指定
6．4灵活使用CSS的层叠和继承
6．4．1CSS的层叠性
6．4．2CSS的继承性
第7章设计网页文本格式和段落版式
7．1字体样式
7．1．1字体类型
7．1．2字体大小
7．1．3字体颜色
7．1．4字体粗细
7．1．5斜体
7．1．6下划线
7．1．7大小写
7．2段落格式
7．2．1水平对齐
7．2．2垂直对齐
7．2．3字距和词距
7．2．4行高
7．2．5首行缩进
7．3网页文本格式实战
7．3．1宁静、含蓄的英文格式
7．3．2干练、洒脱的英文格式
7．3．3层级式中文格式
7．3．4报刊式中文格式
第8章网页图像美化与设计
8．1图像样式
8．1．1图像大小
8．1．2图像边框
8．1．3图像透明度
8．1．4图像位置
8．2控制背景图像
8．2．1定义背景图像
8．2．2背景图像显示方式
8．2．3背景图像位置
8．2．4固定背景图像
8．2．5灵活使用背景图像
8．3网页图像设计实战
8．3．1博客主页中的图像应用
8．3．2网络相册中的图像应用
第9章设计超链接样式
9．1超链接基本样式
9．1．1简单认识超链接
9．1．2伪类和伪对象
9．1．3超链接基本样式
9．2设计超链接样式
9．2．1下划线样式
9．2．2立体样式
9．2．3动态样式
9．2．4图像样式
9．2．5鼠标样式
第10章设计列表和菜单样式
10．1列表基本样式
10．1．1定义列表的基本样式
10．1．2自定义项目符号
10．1．3使用背景图像定义项目符号
10．2列表布局
10．2．1垂直布局样式
10．2．2水平布局样式
10．3菜单样式设计
10．3．1滑动样式(上)
10．3．2滑动样式(下)
10．3．3Tab样式
10．3．4导航下拉面板样式
第11章设计表格样式
11．1表格基本样式设计
11．1．1使用表格属性设计样式
11．1．2使用CSS设计表格边框
11．1．3单元格分离和补白样式
11．1．4空单元格显示处理
11．1．5单元格数据水平对齐和垂直对齐
11．2表格布局模型和高级样式设计
11．2．1表格布局模型
11．2．2数据列和行的样式
11．2．3表格标题的样式
11．2．4合并单元格
11．2．5数据表格内元素层叠优先级
11．3表格样式设计实战
11．3．1清新悦目的数据表样式
11．3．2层次清晰的数据表样式
第12章标准网页布局的基本方法
第13章标准网页布局的兼容性处理
第14章JavaScript语言基础
第15章精通DOM文档对象模型
第16章掌握JavaScript事件处理模型
第17章使用JavaScript动态控制CSS样式
第18章使用Ajax技术实现动态数据交互
第19章使用jQuery框架扩展JavaScript的功能
第20章使用Dreamweaver构建HTML结构
第21章使用Dreamweaver设计CSS样式
第22章使用Dreamweaver开发JavaScript脚本
第23章综合实战：专题资讯
第24章综合实战：电子相册
……
版本二
目 录
入 门 篇
第1章 初涉网站建设 3
1.1 网页制作基础知识 4
1.1.1 什么是网页 4
1.1.2 网页的组成元素 4
1.1.3 什么是网站 6
1.1.4 网页的类型 7
1.1.5 网页制作中的专业术语 7
1.2 常用网页制作相关软件 8
1.2.1 图像制作与处理软件 8
1.2.2 动画制作软件 9
1.2.3 网页制作与编辑软件 9
1.2.4 网页配色辅助软件 10
1.2.5 网页发布与推广软件 10
1.3 网站建设的一般流程 10
1.3.1 确定网站主题 11
1.3.2 网站整体规划 11
1.3.3 收集资料与素材 12
1.3.4 设计网页图像 12
1.3.5 制作网页 12
1.3.6 开发动态网站模块 13
1.3.7 测试与发布网站 13
1.3.8 后期更新与维护网站 14
1.3.9 宣传与推广网站 14
1.4 基础实例——设计
“让心去旅行”个人网站 14
1.5 基础练习 15
1.5.1 浏览各种网站确定其类型 15
1.5.2 指出网页中各部分的名称 15
1.6 本章小结 15
知识关联 16
第2章 网页图像的简单处理 17
2.1 初识Fireworks CS3 18
2.1.1 启动Fireworks CS3 18
2.1.2 认识Fireworks CS3的工作环境 19
2.1.3 退出Fireworks CS3 21
2.2 文档的基本操作 22
2.2.1 新建文档 22
2.2.2 另存为文档 22
2.2.3 导入图像 23
2.2.4 打开文档 24
2.2.5 关闭文档 24
2.3 处理文本 24
2.3.1 输入文本 24
2.3.2 设置文本属性 25
2.3.3 设置文本的特殊效果 26
2.3.4 文本与路径 27
2.4 选择并编辑位图 27
2.4.1 选择位图 28
2.4.2 编辑位图 28
2.5 绘制矢量图 30
2.5.1 绘制圆角矩形 30
2.5.2 绘制正圆 31
2.5.3 使用钢笔工具绘制路径 32
2.6 创建切片与导出图像 32
2.6.1 创建切片 32
2.6.2 优化图像 33
2.6.3 导出图像 34
2.7 基础实例——制作网站Banner 35
2.8 基础练习 36
2.8.1 处理位图 36
2.8.2 绘制卡通头像 37
2.9 本章小结 38
知识关联 38
第3章 网页动画制作基础知识 39
3.1 认识Flash CS3的工作环境 40
3.1.1 菜单栏 40
3.1.2 “工具”面板 41
3.1.3 时间轴 41
3.1.4 场景 41
3.1.5 面板组 42
3.2 文档的基本操作 42
3.2.1 新建文档 42
3.2.2 设置文档属性 43
3.2.3 保存文档 43
3.2.4 关闭文档 44
3.2.5 打开文档 44
3.3 绘制动画对象 44
3.3.1 使用绘图工具绘制图像 45
3.3.2 选择对象 50
3.3.3 填充对象 51
3.4 基础实例——绘制网站形象卡通 54
3.5 基础练习 57
3.6 本章小结 57
知识关联 58
第4章 创建简单的网页动画 59
4.1 认识并操作帧 60
4.1.1 认识帧 60
4.1.2 操作帧 61
4.2 图层的基本操作 65
4.2.1 认识图层 65
4.2.2 操作图层 66
4.3 元件和库 69
4.3.1 认识元件 69
4.3.2 创建元件 69
4.3.3 库的基本操作 73
4.4 创建基本动画 75
4.4.1 创建逐帧动画 76
4.4.2 创建动画补间动画 77
4.4.3 创建形状补间动画 79
4.5 基础实例——创建“行走.fla”
动画 81
4.6 基础练习 83
4.7 本章小结 84
知识关联 84
第5章 认识网页制作软件 85
5.1 认识Dreamweaver CS3的
工作界面 86
5.1.1 “插入”栏 86
5.1.2 文档工具栏 86
5.1.3 面板组 87
5.1.4 “属性”面板 87
5.1.5 状态栏 88
5.2 网页文档的基本操作 88
5.2.1 创建网页 89
5.2.2 预览网页 89
5.2.3 保存网页 89
5.2.4 打开网页 90
5.3 设置页面属性 90
5.3.1 设置外观属性 91
5.3.2 设置链接属性 92
5.3.3 设置标题属性 93
5.4 规划与创建站点 93
5.4.1 认识站点 93
5.4.2 规划站点 94
5.4.3 创建并管理站点 94
5.5 基础实例——规划并
创建“在线阅读”站点 97
5.5.1 规划站点 98
5.5.2 创建站点 98
5.6 基础练习 99
5.7 本章小结 100
知识关联 100
第6章 添加网页元素 101
6.1 添加网页文本 102
6.1.1 添加普通文本 102
6.1.2 添加特殊字符 103
6.1.3 添加空格 104
6.1.4 添加水平线 104
6.1.5 添加日期 105
6.2 设置网页文本格式 105
6.2.1 设置文本格式 106
6.2.2 设置段落格式 107
6.3 添加并设置列表 108
6.3.1 编号列表 108
6.3.2 项目列表 108
6.3.3 定义列表 109
6.3.4 设置列表属性 109
6.3.5 创建嵌套列表 110
6.4 添加网页图像 111
6.4.1 插入图像 111
6.4.2 设置图像属性 112
6.4.3 创建鼠标经过图像 113
6.4.4 创建导航条 114
6.5 添加超级链接 115
6.5.1 添加基本超级链接 116
6.5.2 添加图像热点超级链接 117
6.5.3 添加电子邮件超级链接 118
6.5.4 添加锚链接 118
6.5.5 添加空超级链接 119
6.6 添加动画及音乐 119
6.6.1 添加Flash动画 119
6.6.2 添加Flash视频 119
6.6.3 添加背景音乐 121
6.6.4 添加音乐下载链接 121
6.7 基础实例——为“网来网去”
网页添加内容 122
6.8 基础练习 125
6.9 本章小结 126
知识关联 126
第7章 发布网站 127
7.1 本地测试站点 128
7.1.1 测试兼容性 128
7.1.2 测试超级链接 129
7.1.3 设置下载速度 130
7.2 申请主页空间和域名 131
7.2.1 申请主页空间 131
7.2.2 申请域名 133
7.3 使用相应软件发布站点 133
7.3.1 使用Dreamweaver CS3发布站点 133
7.3.2 使用LeapFTP发布站点 135
7.4 管理和推广网站 137
7.4.1 管理网站 137
7.4.2 推广网站 138
7.5 基础实例——申请收费空间 143
7.6 基础练习 146
7.7 本章小结 146
知识关联 146
提 高 篇
第8章 Fireworks CS3的高级应用 149
8.1 使用蒙版编辑图像 150
8.1.1 矢量蒙版 150
8.1.2 位图蒙版 151
8.2 使用样式和形状 152
8.2.1 使用样式快速创建特效文本 153
8.2.2 使用形状快速创建对象 153
8.3 创建动画 154
8.3.1 创建所选动画 154
8.3.2 创建逐帧动画 154
8.3.3 创建补间动画 156
8.4 创建按钮 157
8.5 创建弹出式菜单 158
8.6 提高实例——创建导航条 160
8.7 提高练习 161
8.8 本章小结 162
提高知识问答 162
第9章 使用Flash CS3
创建特殊动画 163
9.1 创建引导动画 164
9.1.1 引导动画的创建原理 164
9.1.2 创建引导动画 164
9.2 创建遮罩动画 166
9.2.1 遮罩动画的创建原理 166
9.2.2 创建遮罩动画 167
9.3 创建有声动画 168
9.3.1 Flash CS3中可使用的声音
文件类型 168
9.3.2 添加与编辑声音 169
9.3.3 设置声音的导出属性 170
9.4 创建滤镜动画 171
9.5 提高实例——创建
太阳升空动画 172
9.6 提高练习 175
9.7 本章小结 176
提高知识问答 176
第10章 使用Flash CS3
创建交互动画 177
10.1 ActionScript快速入门 178
10.1.1 ActionScript 3.0的特性 178
10.1.2 变量 178
10.1.3 函数 180
10.1.4 运算符 181
10.1.5 ActionScript的数据类型 183
10.1.6 ActionScript的语法规则 184
10.1.7 常用的AcitonScript语句 185
10.2 认识“动作-帧”面板 190
10.3 在Flash CS3中添加代码 191
10.3.1 在时间轴上添加代码 191
10.3.2 创建单独的ActionScript文件 192
10.4 使用组件创建交互式动画 193
10.4.1 认识“组件”面板 193
10.4.2 Flash CS3中的常用组件 194
10.4.3 创建组件 197
10.4.4 组件检查器 200
10.5 提高实例——创建雪景 201
10.6 提高练习 203
10.7 本章小结 204
提高知识问答 204
第11章 使用CSS样式美化网页 205
11.1 认识并创建CSS样式表 206
11.1.1 认识“CSS样式”面板 206
11.1.2 CSS样式表的定义和保存方式 207
11.1.3 创建CSS样式表 208
11.2 设置并应用CSS样式表 209
11.2.1 设置CSS样式表属性 209
11.2.2 应用CSS样式表 213
11.3 管理CSS样式表 215
11.3.1 编辑CSS样式表 215
11.3.2 链接外部CSS样式表文件 216
11.3.3 删除CSS样式表 217
11.4 提高实例——用CSS样式表
美化“认识我”网页 217
11.5 提高练习 222
11.6 本章小结 223
提高知识问答 223
第12章 布局网页 225
12.1 使用表格布局网页 226
12.1.1 创建表格 226
12.1.2 编辑表格 227
12.1.3 设置表格和单元格属性 230
12.2 使用AP元素布局网页 232
12.2.1 创建AP元素 232
12.2.2 编辑AP元素 233
12.2.3 AP元素的属性设置 236
12.3 使用框架布局网页 238
12.3.1 创建框架集 238
12.3.2 编辑框架 239
12.3.3 设置框架和框架集的属性 241
12.3.4 保存框架及框架集网页 242
12.4 使用Spry构件布局网页 244
12.4.1 Spry构件的概念 244
12.4.2 Spry菜单栏构件 244
12.4.3 Spry选项卡式面板构件 245
12.4.4 Spry折叠构件 247
12.4.5 Spry可折叠面板构件 247
12.5 使用模板创建网页 248
12.5.1 创建并编辑模板 248
12.5.2 通过模板创建新网页 249
12.6 提高实例——制作
冰雪世界”网页 250
12.6.1 创建模板网页 251
12.6.2 根据模板制作其他网页 252
12.7 提高练习 253
12.7.1 “购书送大礼”网页制作 253
12.7.2 “Logo制作教程”网页效果 254
12.8 本章小结 255
提高知识问答 255
第13章 应用表单和行为 257
13.1 应用表单 258
13.1.1 创建表单 258
13.1.2 创建表单对象 259
13.1.3 创建具验证功能的表单对象 264
13.2 应用行为 268
13.2.1 添加与编辑行为 268
13.2.2 为网页添加行为 270
13.3 提高实例——“用户登录”
网页制作 274
13.4 提高练习 278
13.4.1 制作“按揭贷款计算器” 278
13.4.2 制作“用户注册”网页 279
13.5 本章小结 279
提高知识问答 280
精 通 篇
第14章 网站布局与配色技巧 283
14.1 网页版面布局设计 284
14.1.1 网页版面布局原则 284
14.1.2 网页布局方法 285
14.1.3 常见版面布局 286
14.2 网页色彩搭配 287
14.2.1 色彩基础知识 287
14.2.2 网页色彩搭配方案 289
14.2.3 网页色彩搭配技巧 289
14.3 网页配色辅助软件的使用 291
14.3.1 配色网页“peise.htm”的使用 291
14.3.2 Color Schemer Studio的使用 293
14.4 精通实例——制作
“自助发布系统”网页 296
14.5 精通练习 297
14.6 本章小结 298
第15章 网页图像制作与处理技巧 299
15.1 网页图像处理技巧 300
15.1.1 抠图技巧 300
15.1.2 图像用色技巧 305
15.2 网页文字特效制作 308
15.2.1 立体文字制作 308
15.2.2 “NT”LOGO制作 311
15.3 网页按钮和导航条制作 311
15.3.1 网页按钮制作 311
15.3.2 导航条制作 313
15.4 网站LOGO制作 314
15.4.1 LOGO的作用 314
15.4.2 LOGO的颜色 315
15.4.3 LOGO中的图案 315
15.4.4 LOGO的几种表现形式 316
15.4.5 LOGO的设计 317
15.4.6 LOGO制作实例 318
15.5 精通实例——制作网页头部 319
15.6 精通练习 322
15.7 本章小结 322
第16章 网页动画制作与处理技巧 323
16.1 鼠绘技巧 324
16.1.1 什么是鼠绘 324
16.1.2 常见鼠绘方法 324
16.2 文字效果及动画制作 325
16.2.1 常见文字效果制作 325
16.2.2 文字特效动画制作 327
16.3 Flash按钮和菜单制作 330
16.3.1 按钮特效制作 330
16.3.2 Flash菜单制作 332
16.4 精通实例——制作
“记忆”动画 335
16.5 精通练习 339
16.5.1 绘制“家” 339
16.5.2 制作“电影宣传”动画 339
16.6 本章小结 340
第17章 动态网页基础知识 341
17.1 认识动态网页 342
17.2 数据库基础 342
17.2.1 Access 343
17.2.2 SQL Server 345
17.2.3 MySQL 348
17.3 动态网页开发语言 350
17.3.1 ASP 350
17.3.2 .NET 351
17.3.3 PHP 351
17.3.4 JSP 352
17.4 Web服务器 353
17.4.1 IIS 353
17.4.2 Apache 355
17.5 动态网页开发流程 357
17.6 精通实例——用ASP开发
一个简单的网页 357
17.6.1 制作动态网页 358
17.6.2 浏览动态网页 358
17.7 精通练习 359
17.8 本章小结 360
第18章 制作动态网页 361
18.1 Access数据库的创建 362
18.2 动态站点的创建及配置 362
18.2.1 IIS的配置 362
18.2.2 动态站点的创建及配置 364
18.3 数据源的创建 365
18.3.1 了解连接字符串 365
18.3.2 在Dreamweaver中
创建数据库连接 366
18.4 制作数据库动态网页 367
18.4.1 创建记录集 367
18.4.2 制作动态页面 371
18.5 精通练习 385
18.6 本章小结 386
第19章 网页特效制作与
网页制作技巧 387
19.1 JavaScript简介 388
19.1.1 JavaScript的特点 388
19.1.2 JavaScript的函数 388
19.1.3 在网页中使用JavaScript 389
19.2 JavaScript脚本应用 390
19.2.1 检查表单元素是否为空 390
19.2.2 限制输入字符串的长度 392
19.2.3 去除字符串的首尾空格 394
19.2.4 随机产生指定位数的验证码 394
19.2.5 删除确认 396
19.2.6 日期联动下拉列表框 396
19.2.7 禁止使用鼠标右键 397
19.2.8 实现“添加到收藏夹”功能 399
19.2.9 禁止保存网页 400
19.3 网页制作技巧 400
19.3.1 消除网页中的乱码 400
19.3.2 定时跳转 400
19.3.3 更换IE地址栏前的图标 401
19.3.4 制作“设为主页”超级链接 401
19.3.5 制作“1”像素的表格边框 401
19.3.6 去掉单击图像链接后的图像虚线 403
19.3.7 让表单和其他内容之间无间隙 404
19.4 精通实例——特效页面制作 404
19.5 精通练习 407
19.6 本章小结 408
实 战 篇
第20章 “互邦”网站静态页面制作 411
20.1 实例说明 412
20.2 制作要点 412
20.3 制作过程 412
20.3.1 页面布局 412
20.3.2 LOGO标志制作 415
20.3.3 主菜单背景制作 416
20.3.4 切片输出 416
20.3.5 LOGO动画制作 418
20.3.6 布局基本页面 419
20.3.7 为网页添加内容 422
20.4 拓展练习 423
第21章 “互邦”网站动态页面制作 425
21.1 实例说明 426
21.2 制作要点 426
21.3 制作过程 426
21.3.1 创建数据库 427
21.3.2 配置IIS 429
21.3.3 创建站点 429
21.3.4 创建数据源 430
21.3.5 制作登录验证页面 431
21.3.6 制作添加公告页面 432
21.3.7 制作公告显示页面 433
21.3.8 制作公司风采部分 434
21.3.9 增加管理页面 436
21.3.10 增加网页安全性 437
21.3.11 进行服务器IIS的配置 438
21.3.12 进行防火墙设置 440
21.3.13 进行服务器IP的配置 441
21.3.14 发布站点 442
21.3.15 配置IE浏览器 443
21.4 拓展练习 444

3、如何建立自己的网页或网站？具体步骤是什么？谢谢！

2. 搭建最简单的个人博客

在1. 购买云服务器和域名中，我们得到了云服务器的登录密码和域名的所有权，下面，我们将介绍如何利用云服务器和域名，搭建一个最简单的个人博客网站。这篇文章之后，你就可以随时随地通过浏览器访问自己的个人网站了！

以下操作以在腾讯云购买云服务器、域名为演示，并且你已经完成了域名备案。阿里云的操作方法类似，暂时不特别写文章演示了。如果你还没购买，请点击1. 购买云服务器和域名，也可以参与下面的活动：

- 腾讯云代金券领取，

- 阿里云最新优惠活动，老用户也可享受

文章看着很长，但是很容易操作。这篇文章的本质就是我们在云服务器安装了一个博客软件，然后将域名指向了云服务器可供访问而已。

2.1 配置安全组并登录云服务器

每一台云服务器都有很多端口负责对外实现不同功能的通讯（比如远程连接，传输文件，网页访问等），腾讯云的安全措施比较完备，默认将许多端口关闭，我们要安装宝塔软件（一种云服务器管理面板），就需要将端口打开，这个功能由”安全组“负责。

2.1.1 配置腾讯云服务器安全组，放行端口

云服务器和世界的通讯分为入站和出站两种，也就是接受外面输入的信息（比如我们的浏览器请求访问），和向外界输出信息（比如向外界传输网页内容），下面我们先分别下载这两个规则，再将规则导入我们的云服务器安全组。

腾讯云-宝塔面板安装-入站规则下载 

腾讯云-宝塔面板安装-出站规则下载

下载后将其保存在你喜欢的地址，这里我们保存在电脑桌面上。

下面，我们点击云服务器>安全组，选择我们购买云服务器时的地域，会显示一个安全组栏目，这个栏目已经自动跟你的实例关联，我们点击栏目右边的修改规则：

- 入站规则：点击导入规则，浏览器会弹框提示选择文件，我们选择刚下载的入站规则excel表即可；

- 出站规则：点击导入规则，浏览器会弹框提示选择文件，我们选择刚下载的出站规则excel表即可；

整个流程如下面动画所示：

至此，我们已经完成安全组的设置，下面可以登录云服务器安装宝塔面板了。

2.1.2 登录云服务器

进入腾讯云控制台，点击左上角云产品>云服务器，自动跳转到实例界面，你会看到自己购买的云服务器在列表上（如果没有出现，在左上角实例旁边可切换服务器地域，比如我们购买的成都）。

在云服务器栏目的右侧，点击登录，跳转到登录页面，这时候只需要粘贴我们在1. 购买云服务器和域名中获得的登录密码，就可以实现登录。看着屏幕上一闪一闪的光标，你是第一次见到程序员的家伙事儿，但是不要害怕，它不是洪水猛兽，不过就是一个输入页面而已，就像微信聊天页面的输入框一样，只不过你是在和云服务器聊天。

2.2 安装宝塔(bt)面板并安装软件运行LNMP环境

下面我们安装宝塔面板，在上面一闪一闪的光标处，完全复制粘贴下面的命令并回车：

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

这哗啦啦的字符串流动看着有点吓人，其实不过是一堆文字描述，来告诉你程序在下载什么东西，安装好了没有等等。这一串下来，是不是感觉自己像个程序员了==、

等待屏幕出现下面字符时，表示宝塔面板的安装已经完成，提示显示我们安装面板花了3分钟。记录这些信息（建议复制文本放在自己的文件夹里面），后续会需要通过这个信息登录宝塔面板。

Congratulations! Installed successfully!

==================================================================

Bt-Panel: http://132.232.13.95:8888/eaef30a6

username: r0wiopgd

password: fa7120fd

Warning:

If you cannot access the panel, 

release the following port (8888|888|80|443|20|21) in the security group

==================================================================

Time consumed: 3 Minute!

如果你安装遇到问题，可以去宝塔官网查看安装说明。

上一步得到了下面的信息：

- 宝塔面板登录地址；

- 登录用户名；

- 登录密码；

下面我们根据这些信息，登录宝塔面板后台，在浏览器中打开登录地址，填写用户名密码：

进入面板后，网页会自动跳出来一个弹框，显示推荐安装套件，我们选择LNMP（推荐），记得将php的版本从PHP5.6改成PHP7.3，点击一键安装，这里针对LNMP的含义稍微解释一下：

- ”L“： 指Linux系统，这个我们在购买云服务器的时候已经安装了CentOS这个Linux系统分支；

- ”N“： 指Nginx，是一个网页服务器软件，是它将我们的网站程序变成了网页文件供我们浏览；

- ”M“： 指Mysql，是一个数据库软件，我们网站要运行，网站程序一般是写死的，然后程序从数据库读取数据显示给人看，这样的话一旦数据有变动不需要重新编写软件，而只需要程序读取变化的数据就行了。比如微信聊天，微信这个程序是写死的，而你的聊天信息是放在数据库里面的，微信从数据库读取别人发给你的聊天信息，然后显示在你的手机里；

- ”P“： 指PHP编程语言，因为我们后面要装的WordPress博客软件是用php写的，所以需要安装这个语言让计算机能够识别。这就像我们在大学可能学过C++，用C++写出来的代码需要C++这个语言包来支持运行一样。这里我们选择PHP7.3，因为WordPress博客软件官方推荐我们使用最新版的PHP语言。

- phpMyAdmin：这是数据库管理软件，WordPress程序将我们的数据存放在Mysql这个数据库软件中，有时候需要手动改数据库，但是Mysql对普通人比较难上手，就用phpMyAdmin来管理。简单点说，phpMyAdmin相当于云服务器上的Excel软件，能查看，修改网页数据。

下面是操作动画，等画面中显示任务为空就说明环境安装完成了。动画我加速了一下方便大家看，总体时间大概花了7，8分钟。

2.3 一键部署WordPress网站程序

软件运行LNMP环境安装完成之后，我们终于要开始安装WordPress这个网站程序了。这个程序非常出名，有数据统计WordPress驱动着世界上30%以上的网站。它以博客程序起家，现在功能十分完善，不仅可以用来搭建个人博客，还能做图片展示，新闻网站，论坛系统，外贸企业官网等等。

我们点击宝塔面板左边的软件商店>一键部署>选择WordPress，跳出下面的弹框。其中，

- 域名： 填写你购买的域名，比如你购买了yigehaomingzi.com(一个好名字)，那就填上去。意思是当服务器接收到浏览器请求访问yigehaomingzi.com，服务器会把网站根目录下面的网页文件传输给服务器。这里我因为没有其他备案的域名，使用一个子域名yanshi.jiqianhanre.com作为演示。

- 备注： 可以不填；

- 根目录： 自动生成，不用更改；

- 数据库： 这是面板随机生成的数据库用户名和密码，你也可以自己设置。记录这两个信息，后续需要把信息告诉WordPress程序，让它知道自己要把信息存到这个数据库里面，网站程序才能运行；

下面是动画演示，WordPress部署完成之后，网页会再次弹框告诉你之前的数据库信息（数据库名和数据库用户名自动设置是相同的），如果你前面没保存这些信息，现在复制粘贴到自己的文档里面。

2.4 设置域名指向云服务器

现在我们已经完成云服务器端的所有设置，可以将宝塔面板关闭了。

到目前为止，我们还没对域名做任何操作，当我们再浏览器输入yanshi.jiqianhanre.com的时候，浏览器并不知道我们到底要访问哪个云服务器，所以它会提示“无法访问此网站，找不到xxx的服务器ip地址”。

这时候我们就需要对域名进行设置，让浏览器知道它应该找哪台服务器。服务器有一个唯一的ip地址，我们在域名商那里进行设置，这个过程叫做域名解析。我的域名在阿里云购买的（所以我知道域名和服务器不在同一家厂商备案的苦），下面动画演示下。登录后进入阿里云控制台，左上角选择云解析DNS（如果你是第一次进入可能得仔细找一找，在域名与网站栏目下面），进入域名列表，选择我们购买的域名，这里我选择本网站域名jiqianhanre.com，为其添加子站点yanshi.jiqianhanre.com的解析记录。点击添加记录，选择添加A记录：

- 主机记录： 这里我填写“yanshi”，意思是为yanshi.jiqianhanre.com添加解析记录。你们不一样，这里需要填写“@”或者什么也不填，表示是为自己购买的主域名添加解析记录；

- 记录值： 填写云服务器的公网ip地址，这个可以去腾讯云的控制台复制过来；

- TTL： 默认就行，不用管它；

此外，你们还可以为自己的域名添加CNAME记录，假如你购买了域名yigehaomingzi.com，这样做可以使浏览器在访问www.yigehaomingzi.com的时候自动跳转到yigehaomingzi.com，保证网站域名的一致性。

基本上等个五六分钟，域名解析就可以设置完成。从现在开始，当你在浏览器中输入自己的域名的时候，浏览器就知道自己要去找哪个云服务器要网站了。

腾讯云域名解析

腾讯云的域名解析方法类似，登录腾讯云控制台， 点击左上角云产品>域名与网站>云解析，跳转到域名列表。下面动画中因为我没有在腾讯云购买域名所以是空白的。剩下的域名解析环节参照前面阿里云的域名解析即可。

2.5 恭喜你！网站已经上线

好了，至此，我们已经在服务器端安装了WordPress博客程序，也为域名添加了解析记录，可以重新打开浏览器，输入你购买的域名，就能看到网站了！

准备好了吗？走你--->>>>>>>>>>>》》》》》》》》》》》》

在浏览器中输入你在1. 购买云服务器和域名购买的的主域名，这里我用的是子域名yanshi.jiqianhanre.com。

YES！能访问了！不过还需要简单设置一下。我们观察到网址自动从yanshi.jiqianhanre.com跳转到了yanshi.jiqianhanre.com/wp-admin/setup-config.php，这是WordPress博客程序在运作，提示你开始进行设置。下面，为了完成WordPress网站的启动设置，我们需要准备以下信息：

- 前面步骤2.3 一键部署WordPress网站程序中的数据库名；

- 前面步骤2.3 一键部署WordPress网站程序中的数据库用户名（在我们教程中，用户名和数据库名相同）；

- 前面步骤2.3 一键部署WordPress网站程序中的数据库密码；

我们点击Continue，因为绝大多数WordPress插件都是英文，翻译成中文不太容易理解，如果你后续觉得不方便，以后可以在后台设置中换成中文。当然如果你是准备做外贸网站，推荐一直使用英文，以免网站出现中文影响国外访客浏览时的用户体验。

看WordPress安装配置的过程，我们分别来讲一讲主要的两个页面：数据库信息设置页和站点信息设置页面：

数据库信息设置页：这个页面主要是告诉WordPress程序自己应该把网站数据存放在哪个数据库下面。并告诉它这个数据库的登录用户名和密码是什么，这样，WordPress就有权限存放网站数据了。

站点信息设置页：主要是填写你希望网站叫什么名字，你登录网站管理后台的用户名、密码等。这里使用程序随机生成的密码，注意复制下来保存。这里再提示一下最下面那个“Search Engine Visibility”一栏，勾选它，表示希望搜索引擎（比如百度、谷歌等）不要收录本站点，这是因为现在我们的网站还是一片白纸，我们不希望搜索引擎认为自己的站点不重要。

网站已经上线

是的，恭喜你！你的网站已经可以访问了，通过浏览器访问你的主域名，会显示下面的网页。你现在可以试试用手机浏览器打开自己的主域名，也能显示你的网站。我们已经完成了最简单的博客网站的搭建！能跟着教程做到这一步，为你自己鼓掌！下面图片的左边是电脑端的浏览器展示效果，右边是手机端的展示效果，我们的网站是自适应的，也就是随着浏览器的尺寸变化，会自动调整网站布局。

2.6 收尾工作

我们已经成功建成了一个最简单的博客网站，理论上，我们可以开始写文章，传日常生活照片了，但是为了以后的使用方便，以及网站在搜索引擎上的表现，现在来进行一些收尾的工作吧。

2.6.1 WordPress语言换成中文

这在前面说过，如果你不习惯英文，可以换成中文。再提示一下，外贸网站还是全程使用英文比较好。

我们打开网站后台（在浏览器中打开yigehaomingzi.com/wp-admin这个页面，记得把域名换成你购买的主域名），登录进去，在左边栏目中选择Settings>General，跳转到设置页，在其中的Site Language中，选择最下面的中文，滑到页面底部，选择Save Changes即可。整个切换WordPress站点语言的过程如下面动画所示。

2.6.2 给网站传输加密-开通SSL

你可能已经注意到了，浏览器最上方的网址URL前面有显示“不安全”，这是因为我们在浏览器访问网站时，浏览器和服务器之间没有加密，所以访客在网站输入的信息可能会在传输过程中被窃取。这对我们普通的展示型网页影响不大，但是对于需要输入银行卡密码，交易信息的网站就很有必要。现在因为搜索引擎都比较偏爱传输有加密的网站，所以我们就给网站传输加密吧，不花一分钱！

现在我们的网站url是（http://yanshi.jiqianhanre.com）,下面我们通过给网站访问嵌套一层SSL，让网站url变成https://yanshi.jiqianhanre.com。

首先，使用我们在2.2 安装宝塔(bt)面板并安装软件运行环境中保存的登录信息，登录宝塔面板，在面板左侧点击网站，选择列表中我们刚建立的网站，浏览器自动跳出一个弹框，我们选择左边的SSL，选择Let's Encrypt，并选择文件验证，勾选我们的域名，点击申请，此时浏览器弹出一个黑色的命令提示框，提示我们SSL部署的进度。

等待30秒左右，提示SSL已部署成功，我们再点击右上角的强制HTTPS，强制所有指向云服务器的网页流量都经过https://yanshi.jiqianhanre.com访问。这里简单说明一下Let's Encrypt，它给全球网站提供免费加密服务，缺点是每3个月要为网站申请一次加密证书。幸好，宝塔已经帮我们提供了自动续签服务，这样设置完成之后，我们就可以不管它了。

现在我们访问我们的网站，在url前面就会显示小绿锁了，显示站点连接是安全的。下面，我们还需要在站点后台对站点url进行设置。

网站部署SSL之后更改站点地址（URL）

因为我们网站安装之时未开启SSL，WordPress自动将我们的站点地址设置成了http://yanshi.jiqianhanre.com，这导致我们后续上传图片等媒体文件时，自动将图片url设置成http而非https**，导致有图片的页面浏览器显示不安全。

为了解决这个问题，我们到网站后台，点击设置>常规，将里面的WordPress地址（URL）和站点地址（URL）均改成https开头。

2.6.3 更改网页固定链接样式-LNMP环境下wordpress程序站点伪静态

WordPress后台的设置页面有一个固定链接，这里我们可以指定我们撰写文章后文章网址url的样式，一般为了站点美观以及搜索引擎优化，我们选择下面文章名这种样式，点击保存更改。

对于运行Nginx的网页服务器，我们直接更改固定链接会出现WordPress网站只能访问首页的问题（所有其他页面都显示404 Not Found），有很多人就掉进了这个坑。为了解决404Not Found的问题，我们需要设置站点伪静态来解决这个问题。

“站点伪静态”这个名字不太容易理解。意思是我们的WordPress程序是一个动态程序，它每接收一次浏览器访问请求，都会去数据库中查询数据，所以是个动态的过程。静态程序不一样，都是写死的网页，比如一个纯粹的网页文本。“伪静态”的意思，就是开通这个服务之后，可以让动态网页程序表现地像静态网页一样（对我们来说主要就是网页url能够自由设置），便于搜索引擎抓取。

登录宝塔面板后，在左边栏选择网站，选择我们的网站，在浏览器弹框中选择伪静态，左上角选择wordpress，点击保存即可。我们重新刷新下之前无法访问的网站，发现已经可以访问了。

2.6.4 WordPress网站后台的基本设置

我们还需要对网站后台进行一些基本设置，保证后续的使用体验。

删除无用的插件

使用2.3 一键部署WordPress中保存的登录信息，登录网站后台（如yigehaomingzi.com/wp-admin），点击左边的插件>已安装插件，删除其中的你好多莉，这是个开发人员的情怀插件，没什么用。

启用Akismet拦截垃圾评论

当我们的网站上线后，会有很多机器爬虫自动在我们网站上留言垃圾留言，如果不设置Akisment，我们每天删除这些留言都得费些功夫。

在插件>已安装的插件页面，点击Akismet Anti-Spam下面的启用，网站会自动跳转到Akismet的激活页面，点击Set up your Akismet account按照网页提示激活服务即可。

选择PERSONAL版本的就够用了，他自动跳出来让你按意愿支持点钱，可以选择0元。

填写网站标题和副标题

在2.5 恭喜你，网站已经上线那一节，我们已经设置了网站标题，我们在这里可以进行更改，在网站后台，点击设置>常规，填写站点标题和副标题，滑到最下方点击保存更改即可。

安装WP Acceleration for China插件-解决WordPress网站国内访问慢的问题

因为WordPress内置了一些谷歌的服务以及Gravatar的头像服务，而中国大陆是将这些服务屏蔽的，所以我们打开网站的速度会比较慢。下面我们通过下载一个插件“WP Acceleration for China”来解决这个问题。这个插件的功能就是将这些被屏蔽的服务替换成了国内能访问的服务镜像。

在网站后台，我们进入插件>安装插件，搜索WP Acceleration for China，等出现结果后，点击现在安装，待安装完成，点击启用即可。

最近WordPress网站抽风，经常拒绝国内的访问，可能会提示安装失败：下载失败。Too Many Requests：

这个时候不要慌，我们可以多试几次，我多试了两次，安装成功。如果还是不行，请登录插件下载页面（https://wordpress.org/plugins/wp-acceleration-for-china/），将插件先下载到本地电脑桌面，然后通过上传插件功能完成安装，安装之后点击启用，启用之后无需其他操作。如果你的电脑不能访问上面的网址，多试几次。如果还是不行，那就挂上番强（谐音）软件再试试，FQ软件下面我有一个推荐的，可以点击购买使用，买15块钱一个月的就行。希望大家在外网不要被所谓的民主自由带偏了，国外的媒体也都不是什么天使大姐，都是吃资本饭的。你也知道，资本是会吃人的。

番强服务推荐

这时候我们再用浏览器访问自己的网站（按Ctrl+F5强制刷新），会发现速度快了很多。

2.7 总结

这篇文章，我们通过自己购买的云服务器和备案后的域名，成功搭建了一个最简单的个人博客网站。我们首先登录云服务器，安装了服务器管理面板（宝塔bt面板）。然后通过宝塔面板安装了博客程序所需要的运行环境（LNMP环境），并且使用宝塔面板一键部署了WordPress博客程序。接着，我们通过域名解析，将自己购买的域名指向云服务器，实现了域名的访问功能。最后，我们设置安装了WordPress程序，完成了个人博客网站的搭建。

直观地看，在搭建个人网站的流程中，我们做了以下的事情：

步骤  需要这些信息  得到这些信息 

2.1 配置安全组并登录云服务器  云服务器登录密码* -  

2.2 安装宝塔(bt)面板并安装软件运行LNMP环境 云服务器登录密码  宝塔面板登录用户名密码

2.3 一键部署WordPress网站程序 宝塔面板登录用户名密码 数据库用户名密码 

2.4 设置域名指向云服务器  域名管理权*  -  

2.5 恭喜你！网站已经上线  数据库用户名密码  后台登录用户名密码  

2.6 收尾工作  后台登录用户名密码 -  

*云服务器和域名是我们在第一篇1. 购买云服务器和域名中获得的信息。

在这系列建站教程中，我们总共有4篇文章介绍普通人如何从0到1搭建个人网站：

1. 购买云服务器和域名

2. 搭建最简单的博客网站

3. 发布第一篇博客文章

4. 个性化自己的网站

现在访问我们的域名，展现的是WordPress预设的博客网站，里面只有一篇自动生成的文章。下一篇，我们会给网站添加自己的文章，一起进入3. 发布第一篇文章吧！

【若图片及演示gif动画无法打开，请点击本文原始地址-几千寒热】https://jiqianhanre.com/wangzhan-weihu/wordpress-beifen-huanyaun.html

4、网页设计制作详细流程

分析如下：

1、首先下载安装Dreamweaver，打开后，新建一个网页，一般选择“HTML”建立网页。选择“经典”界面，有助于我们更便捷使用这个软件。

2、下面选择这三个界面，代码、拆分、设计，一般默认设计界面，对于新手这个功能具有可视化，能更好的制作网页。

3、下面我们来制作网站站点，在电脑上建一个文件作为根目录。我们所建网站的所有文件和网页都保存在这个文件中。站点的作用就是使你的网站网页之间框架清晰。同时给站点起个名字。

4、然后再在站点根目录下建立一个专门储存网站图片的文件，并设置默认。这样你添加到这个网站的所有图片都自动保存到这个文件，不会丢失。注意文件命名要用英文。下面我用我建立的（篮球资讯网）来介绍，点击右下方篮球资讯网——下拉点击管理站点——点击高级设置——设置默认图像文件夹为刚建立的images。保存。

5、下面我们来制作这个网站首页，先学习添加图片。插入——图像——选择素材添加。点击图片，下面属性可以编辑修改图片大小，添加超链接等等。下面我修改图片大小做示范。

6、下面学习添加文本。编辑“篮球资讯网”，下面属性可以设置文本字体、添加超链接等等，点击页面属性，可以详细编辑文本属性。

7、网页基本就是文字和图片的组合，添加视频还需要学习者好好搜索Dreamweaver 的使用视频加以学习。最后制作完一个网页要记得保存。左上角文件——保存。

8、最后我们学习添加超链接。我用建立的第二个网页来做示范。选中篮球资讯网文本，点击页面下方属性——链接——点文件小按钮——选中第一个网页，这样篮球资讯网文本变成蓝色。这是网站内部链接，相反就有外部链接。添加如图，一定要写http://......就可以了。

9、最后我们浏览网页。左上角文件——在浏览器中浏览网页，点击网页中两个链接都能到达指定网页。

(4)网页设计与网站组建标准教程扩展资料：

网页设计

设计网站要注意两个要点：整体风格和色彩搭配。

风格

网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题，任何两人都不可能设计出完全一样的网站。

风格（Style）是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。

色彩搭配

无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。

网页配色小技巧：

1．用一种色彩：这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感；

2．用两种色彩：先选定一种色彩，然后选择它的对比色；

3．用一个色系：简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

在网页配色中，还要切记一些误区：

1．不要将所有颜色都用到，尽量控制在三至五种色彩以内；

2．背景和前文的对比尽量要大（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容。

5、建立一个网站的基本步骤

建立一个网站的基本步骤如下：

1、购买域名与空间（万网、新网都可以购买）；
2、空间与域名做备案（如不明白具体操作，可以拨打空间服务商的售后电话）；
3、制作网站，并上传到空间（网站上传可以使用FTP工具）；
4、等备案完成后，解析、绑定域名到空间（登陆购买域名和空间的服务商网站进行操作）；
5、网站可以正常访问。

（说明：一般制作网站是个比较困难的一步，你可以直接花钱请人做，也可以套用一些网上免费的模板）

6、阐述网页设计与制作的基本原则与流程

1、网站的主题定位制作网站首先要考虑网站主题。好的网站不仅应该有美感、个性、创意，更要有质量。网站的内容是最重要的因素，空洞的网站对人没有任何吸引力。
(1)网站的题材目前网站的题材主要有：新闻、体育、聊天、即时信息、ICQ、社区、邮件列表、计算机技术、网站开发、娱乐、旅行、参考、资讯、求职、家庭、教育、生活、时尚、电子商务以及一些体现个人特色和爱好的网站。
(2)定位题材的建议主题最好是你最擅长并且最有兴趣的东西; 主题要小而精; 题材不要太滥或者目标太高; 体现自己的个性。
(3)网站的名称
2、资料搜集互联网的强大就是它丰富的资源，可以搜集尽可能多的资料，并根据一定的规则进行整理。还要精心设计一些别人没有的东西，已体现自己的个性。
3、结构设计
(1)栏目和版块网站的结构设计其实也就是合理的设计网站的栏目和版块。首先应突出主题;其次应该有个网站指南或更新列表之类的栏目;接着要有一个与读者交流的栏目;最后最好有个说明性的栏目，以方便网友。
(2)目录的结构设计目录的结构设计要注意以下几点：按栏目内容建立子目录; 在每个主目录下都建立独立的images目录; 目录的层次不要太深; 避免使用中文目录; 尽量使用意义明确的目录。
4、形象设计
(1)网站的标志：即设计网站的Logo。 
(2)网站的标准色彩 
(3)网站的标准字体 
(4)网站的宣传标语
5、主页设计
6、其他页面设计
7、站点规划
(1)用文件夹来保存文档 
(2)使用合理的文件名称 
(3)使用模板和库 
(4)使用ALT
8、定义站点
9、首页制作页面属性设置; 表格设计; 填写内容; 添加链接和交互; 添加其它内容。
10、测试
11、申请域名和空间
12、站点文件上传
13、站点的宣传

7、网页开发与设计的基本流程是什么?

网页制作流程

--------------------------------------------------------------------------------

主要内容介绍：

一、构成网页的基本要素
二、制作及美化的基本工具
三、网页制作的基本步骤
四、界面设计及交互研究探讨
五、实例制作演示

一.构成网页的基本要素

1.文字（标题、字号、字型...）
2 图形（网页上经常使用的图片格式：jpg、jpeg、Gif、Swf...）
3.交互功能（菜单按钮、链接、表单、数据交换...）
...

超文本标识语言（HTML）

HTML（Hypertext Markup Language）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。

在HTML中，所有的标记符都用尖括号括起来。
例如，<HTML>表示HTML标记符。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。
如：<HTML>…<／HTML> .

HTML文档的基本结构

一个典型的HTML文本的基本结构形式如下：

<HTML>
<HEAD>
<TITLE>网站制作流程及界面交互设计研究探讨<／TITLE>
<／HEAD>
<BODY>文本内容：<／BODY>
<／HTML>

二.制作及美化的基本工具

1．超文本标识语言（HTML）
编辑工具：editplus、dreamweaver、记事本、FrontPage、

2．页面设计及美化工具
使用工具：所有可制作平面的软件
推荐使用Photoshop、FireWorks、Flash

三、网页制作的基本步骤

1、整体规划
需要完成的规划：网站主题、风格、页面元素、逻辑结构等

2、资料收集
收集内容：
a、跟主题相关的文字图片资料
b、一些优秀的页面风格
c、下载一些你喜欢的交互页面
d、开放的源代码

3、伪界面设计
根据事先规划的结构，在平面软件里设计你想要的最终效果，利用平面图片的形式先展示一次，设计时要注意宜人性、人机、心理等各方面因素

4、代码转换及交互添加
把平面的伪界面转化为HTML代码，添加相应的交互功能Js、按纽、表单，以及一些与数据库相连接的代码。

5、测试网页兼容性
你可以不必严格按照W3C标准来制作页面，但是你必须保证让所有现有的浏览器能比较好的展示你的作品。

6、发布站点
测试完毕，符合你的要求，当然就可以开始发布你的网站了，发布的服务器可以是远程，也可以是本地，各个语言有各自的相应的服务器，比如ASP，就应该对应的是ASP服务器，上传可利用远程FTP工具。

四.界面设计及交互研究探讨

a、导航栏设计
导航要素设计的好坏决定着用户是否能方便使用网站导航要素要设计的直接而明确，并最大限度为用户的方便考虑。

b、网页布局
网页的布局是整个界面的核心，这里体现了一切以用户为中心、以及制作者如何与欣赏着沟通的思想在里面，你必须知道自己要传达什么样的信息，别人使用起来合适不，字体的大小、型号、字间距、行间距，以及配色所有的一切都在这个阶段完成，所以如何表现功能以及美感就是你研究的重点。

PS:布局之前要紧密连接你网站的主题，要注意把握整体风格，你可以事先在纸上勾画草图，利用你习惯的元素来表现你想要的效果

网页布局--主要构成原则
醒目性：指用户把注意力集中到你诱导起浏览的部分和内容
可读性：指网站的内容让人容易读懂
明快性：指准确、快速转达网站的构成内容
造型性：维持整体外型上的稳定感和均衡性
创造性：有鲜明个性，创意是必不可少的
布局的构成原则上是:统一、协调、流动、强调、均衡

c、交互研究
我这边的交互主要集中在人机操作方面，研究用户浏览网站心理我个人认为一个成功的个人主页，单纯的美观是不够的，重要的是宜人性方面应该注重，喜欢Google、Douban就居于这。

五、实例制作演示(略）

1、页面制作整体规划

对象：一个打印商业宣传主页
格调:活泼，色彩，简单，大方

2、资料收集

a 、商标、网址、公司宣传册、了解企业文化，了解负责人的品位、他们的案例、跟负责人沟通掌握信息
b 、网上下载相似印刷行业的公司主页，了解现有行业的的一些设计特点
c、下载一些色彩比较华丽的图片，或跟印刷相关连的图片
d、如果你自己不会动态语言，下载一个满足你功能的新闻发布系统和留言源码

3、伪界面设计

a、在PS设计伪界面

b、切片工具对整体进行合理的分割
注意点：隐藏你要通过输入的文字，分割时要保持他的整体意义，尽量让每一部分是完整的，注意一些交互上操作。

c、导成WEB格式-直接导成HTML格式—步骤:
1、.点击文件存储为WEB文件格式
2、在界面里面调整理想参数
3、导出保存PS能自动生成一些HTML代码，但是他不是很标准，你必须在Dreamweave里面进行加工

d、在Dreamweave里面进行代码加工
具体步骤：
1、先修改标题
2、修改页面属性：背景颜色、背景图片.....
3、把页面调整为布局格式（这个可以按照自己习惯来设置，有标准的表格方式，也有布局类型）
4、把要添加文字的图片转化为背景形式
a、找到对应图片路径
b、拷贝路径后删除图片
c、转化为标准形式
d、把路径粘贴到背景属性上
e、回到布局界面
5、添加具体文字连接设置等操作
6、CSS设置
7、修整代码，发布预览按F12即可预览效果

4、测试网页兼容性

按照你设计时的对象,根据IE版本以及浏览器的不同，调整理想的效果，但是大部分出现问题的是JS\VB等代码，如果只是单纯静态图片，基本不会有很大的差别，推选大家尽量往W3C标准靠

5、发布站点

购买自己的空间域名，其实事先就应该购买的，利用FTP上传软件，把你的页面上传到你的网上服务器上推荐一款FTP上传工具LeadFTP

8、如何建立自己的个人网站，网页？及其简单教程

又是这个问题~！这个真的很复杂，我也是边制作边学习，大概5年了，做得还不是很像样，不过美工技巧肯定能超过一些大型网站了，我告诉你，学习做网站绝不是轻而易举的事，这得学要前期的投资，你最好去报个班，学习一下，这样才行。比如报 dreamweaver 制作，或者先学 （frontpage ps:感觉没用）。不懂就可以到baidu上问。告诉你都要学习什么 dreamweaver . flash . fireworks. HTML代码. （asp，php. java.css.后期) 甚至你还要懂 pascal.c++. 告诉你个技巧，你可以先去 265 网站 下载个整站，申请个免费空间，传上去，这样既可以快速拥有自己的网站，又可以进行学习，一举两得，比如可以进行修改，从而了解网站代码之间的关系，可以认识到服务器，可以查看它的html代码，进行修改，或保留（以后用）