网页设计与制作教程

网页设计与制作教程

第一章基础篇

1.INTERNET和WWW

INTERNET的功能和应用

1．信息的获取与发布

2．电子邮件

3．网上交际

4．电子商务

5．网络电话

6．网上事务处理

7．远程登陆

8．文件传输

9．电子公告版

10．全球信息网

11．INTERNET的其他应用

WWW简介

1．网页，网页文件和网站

2．HTTP和FTP协议

3．超文本和超链接

4．INTERNET地址

5．域名

6．统一资源定位器（URL）

7．HTML

常见网络浏览器----IE

第二章网站建设概论

（1）信息类网站

（2）交易类网站

（3）有偿信息类网站：101网校、

（4）功能型网站

（5）综合类网站

2.根据网站的性质分类：

（1）政府网站

（2）企业网站

（3）商业网站

（4）教育科研机构网站

（5）个人网站

（6）非赢利机构网站

（7）其他类型的网站

3.根据在大型搜索引擎上的设置分类

4.娱乐和休闲类网站；商业与经济类，艺术，人文，健康，医药，政府，政治类，电脑与

网络类，社会和文化，科学与教育类，参考资料类

2.1.2网站建设的步骤

1．制作环境的准备：1）设备：扫描仪，数码相机，打印机2）完善系统环境3）备齐网页开发工具软件，网页制作工具，服务器端程序开发工具及一些实用的辅助工具。。。4。

备齐素材制作和加工软件，包括对图形，动画，刘媒体和声音进行处理的素材制作和加工软件

5）备齐常用的网站发布工具，如FTP文件传输软件

2.网站目标的确定：对象：访问者的类型；主题明确，数据充分。保持目标的简洁

3.网站主题，风格和创痍点的确定

1）主题选材要小而精

2）擅长或感兴趣的内容

）选题不要太滥：因特网上只有第一，人们记不住第二第三名

2）网站的风格：CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等诸多因素

1）确信风格是建立在有价值的内容上的

2）需要彻底弄清楚站点给人的印象是什么

3）在明确网站印象后，开始努力建立和加强这种印象：1）标志（LOGO）2）色彩3）标准字体4）醒目标准口语5）统一图片处理效果7）使用网站特有的图标；使用自己设计的花边，线条和点；；9）展示网站的荣誉和成功作品10）告诉网友关于个人真实的故事和想法3）网站的创意（准备期，孵化期，启事期，验证期，形成期）

4.网站结构的确立：1）网站结构的确立2）网站目录的设置3）网站链接结构的设置：树状连接结构；星状链接结构3）两种结构的综合

5.网站素材的准备

6.网站制作工具的选择和确定：DREAMWEA VER和FRONTPAGE，PHOTOSHOP，FIREWORKS，动画制作工具：FLASH，COOL 3D；网页特效工具，网页特效精灵，有声有色

7.网站的建设

1）申请E---MAIL帐号

2）申请网页空间：1。打开虎翼网空间申请主页

3）域名注册：对于个人网站，在申请免费网页空间的同时也完成了域名的注册

4）网页制作：先简单后复杂，布局先大后小，制作网页时要多灵活运用软件配备的设计模板，这样可以大大提高制作效率

8。网站的测试（看看有没有问题）和上传（将网站发布到WEB服务器，网页制作工具本身具有FTP功能）

9。网站的宣传和推广（搜索引擎上注册，与别的网站交换链接，运用网络广告）

10.网站的更新和维护：必须不断给它补充新的内容，才能够长期吸引住浏览者

2.1.3 网站设计的原则

1）网站主题不要多于三个：小而精，定位小

2）网站的标准色彩不要超过三种

3）重视网站目录结构的创建（创建目录的原则百度上找出来）：不要将所有文件都存在根目录下，目录层次不超过三层，不要使用过长的目录名，尽量不要使用中文目录名

4）链接层次不要超出三层（便于维护）

5）网页长度应限定在三个整屏以内

6）表格的嵌套层次要控制在三层左右（表格插入表格里）

7）网站导航要清晰

2.优秀网站的五大要素

1）网站内容丰富

2）页面下载速度快（网页简单，不要大量图片）

3）功能多样，使用方便

4）网站品质优秀（打不开或者已经被你删除的网页，留下号码）

5）保护个人信息（你用信息干什么，填写的信息要保护好，网站收集用户资料有何目的？如何利用用户的个人信息，出售给其他用户机构，会不会发送大量的广告邮件，用户对此拥有选择的权利？填写的个人信息是否安全，是否能获得必要的回报）

2.2 网页的可视化设计概论

2.2.1 网页设计的原则

1。对比原则：大小对比，明暗的对比，粗细的对比，曲线与直线的对比，水平线与垂直线的对比，

2.协调原则1）主和从；2）动与静3）入与出4）统一与协调

3.平衡原则

4.趣味原则：1）比例（黄金分割点也称作黄金比例，是设计中非常有效的一中方法）2）强调3）凝聚与扩散4）形态的意向5）变化率6）规律感7）导向8）空白区9）屏幕上的文字16*16点阵字型的仿宋体，为了适应人们横向阅读中文的习惯，一行最多不超过35个字2.2.2 网页版面布局的设计

1。版面布局的依据：1）主次分明，中心突出；2）大小搭配，相互呼应3）图文并茂，相得益彰4）动静有度，平衡对称

2.网页布局的类型：1。国字型2。拐角型3，标题正文型4上下框架型5左右框架型6综合框架型，封面型8。FLASH型9）变化型

3.点线面的运用

2.2.3 网页色彩的设计

1.色彩的基础知识：1）红色2）黄色3）蓝色4）绿色5）紫色6）白色

2。网页颜色的使用风格1）公司色（CI企业识别）2）风格色（海尔）3）习惯色

3.网站的标准色彩设计原则（颜色不超过三种）

2.2.4 图形与文字的设计

1.图形设计的原则

2.文字设计的原则

3.文字和图形的组合设计

4.设计图形与文字时应该注意的事项

2.2.5 首页的设计：注重第一印象；LOGE注意，干净，整洁，大方。。。。

2.3 网页制作工具概述

2.3.1 网页设计的常用工具

1. 入门级软件工具-----FRONTPAGE下载网址

2.提高级软件工具---DREAMWEA VER（所见即所得）MACROMEDIA的网页制作“三剑客”支持ACTIVEX，JA V ASCRIPT，JA V A，FLASH，SHOCKWA VE，ASP，JSP

下载地址：

2.3.2网页设计的辅助美化工具

1.PHOTOSHOP 下载网址：

2.FIREWORKS 下载网址：

3.FLASH 下载网址：

第三章HTML 简介

网站都是由HTML构成。HTML是一种建立网页文件的语言，它通过标记式指令，将影像，声音，图片和文字等连接起来，可以用记事本，写字板或FRONTPAGE EDITOE等编辑工具来编写，其文件扩展名为HTML或HTM，它们是能被浏览器解释显示的文件格式，HTML