第1讲 网站建设的整体流程.docx
《第1讲 网站建设的整体流程.docx》由会员分享，可在线阅读，更多相关《第1讲 网站建设的整体流程.docx（14页珍藏版）》请在冰豆网上搜索。
第1讲网站建设的整体流程
教师备课首页
苏州工业职业技术学院
SuzhouInstituteOfIndustrialTechnology
第1页
课 题
子项目一
第1讲网站建设的整体流程
课 型
新授
授课班级
授课时数
2
教学目标
1．对网页制作工具有一个基本的认识，知道它的功能、用处和使用的广度等。
2．了解网站的开发步骤，为接下来的学习打基础。
教学重点
1.按照工作的规格对学生提出学习本课程的具体要求。
2.网站的开发步骤，以及一些规格数据。
教学难点
使学生能够明确自己学习本课程的最终目标，并从整体上了解网站开发流程，为后面的学习打基础。
学情分析
教学效果
教后记
第1讲网站建设的整体流程
引入：
随着网络的发展因特网已成为了人们生活的一部分，这都是网页的功劳。
通过网页浏览者可以得到各种信息，可以交换思想可以通过网络进行购物。
目前的网页种类繁多，归纳来可以分成这么几种：
单纯根据兴趣而制作的个人网页、由具有共同爱好的人所组成的团体、以宣传企业为目的的企业用网页、成为因特网商店的大型购物中心以及门户网站等。
而那些视觉效果比较好的网站往往会收到我们的青睐。
那么这些网页是如何制作出来的呢？
在目前市面上众多的网页编辑软件中，有的重视效率，有的强调版面设计，而Dreamweaver可以很方便地实现这两方面的完美结合。
另外，Dreamweaver的网页动态效果与网页排版功能都优于一般同类软件，即使是初学者也能制作出相当水准的网页，所以Dreamweaver是网页设计者的最佳选择，已成为目前最为流行的网页设计工具。
[网页设计好学吗？
]
网页设计好学。
只要学会操作网页三剑客，人人都可以制作出网页来。
网页设计不好学。
（列出两个差异巨大的网页）
同样是设计公司，但在网上展示出的效果却如此的不同。
假设大家是客户，在经费许可的情况下，你会优先选择哪一家来做设计呢？
当然是第一家了。
这就是网页设计最能体现出效益的地方。
但是，同样是做网页的，为什么差距如此之大呢？
原因就在于网页设计是平面设计、动画设计、音效设计、配色等各个方面结合的产物。
因此，学会网页设计虽然不难，但是要做好网页，却需要不断地学习和积累，在不断的探索和实践中进步。
新授：
一、认清两个名词——网页和网站
在互联网上应用最广的功能应该是网页浏览。
浏览器窗口中显示的一个页面被称为一个网页，网页实际上就是一个文件，这个文件存放在世界上某个地方的某一台计算机中，而且这台计算机必须要与互联网相连接。
当我们在浏览器的地址栏中输入网页的地址后，经过一段复杂而又快速的程序解析后，网页文件就会被传送到我们的计算机中，然后再通过浏览器解释网页的内容，最后展现在我们的眼前。
文字和图片是构成网页的两个最基本的元素。
除此之外，网页中还包括动画，表单，视频和音频等内容。
那网站呢？
网站是众多网页的集合。
不同的网页通过有组织的链接整合到一起，为浏览者提供更丰富的信息。
网站同时也是信息服务类企业的代名词。
如果某人在网易或者在搜狐工作，那他可能会告诉你，他在一家网站工作。
网页和网站的关系：
假如网站是一本书的话，网页就是这本书中的一页。
[网站的开发不仅仅只是把网页制作出来那么简单]
二、网站的开发步骤
1.网站的前期策划
a）确定网站的用户群和定位网站的主题（确定网站的名称）
b）整理客户提交的资料（文字、图片）
c）网站结构图（网站导航设计）
d）网站形象设计
i.网站的标志（Logo）
ii.网站的色彩搭配
iii.网站的标准字体
iv.网站的宣传标语
e）网页布局图（版式风格）
2.首页页面设计
3.其他二级页面效果设计
4.在PhotoShop中裁切设计稿
5.站点的规划与建立
6.在网页编辑软件中制作网页
7.测试与发布上传
8.后期更新与维护
具体分析——“网上书店”：
1．确定网站的名称
网站的名称很重要，它决定着你的网站是否更容易被人接受。
【举例】：
“网上书店”这个网站，名字读起来琅琅上口、能反映出网站的题材、且易记。
讨论主题：
你能列举出一些你所喜欢的网站名字并说明你喜欢它们的理由吗？
网站命名的原则：
（1）要有很强的概括性，从网站的名称就能反映出网站的题材。
（2）要合理、合法、易记，最好读起来琅琅上口。
（3）名称不宜过长，要方便其它网站链接。
（4）有个性，体现出一定的内涵，能给浏览者以更多的想像力和冲击力。
2．整理客户提交的资料
在做网页之前，我们要尽可能多地收集与网站主题相关的素材（文字、图像、多媒体等素材），再去芜存菁，取其精华为我所用。
【举例】：
3．网站结构图
4．网站的标志
网站的标志是站点特色和内涵的集中体现。
一个好的Logo设计应该是网站文化的浓缩，应该能让人一见到它就能联想到它的网站。
【举例】：
其它网站的标志赏析：
5．网站的标准色彩
网站给人的第一印象就来自于视觉的冲击，因此，确定网站的色彩是相当重要的一步。
不同的色彩搭配会产生不同的效果，并可能影响到访问者的情绪。
赏心悦目的网页，色彩的搭配都是和谐而优美的。
【举例】：
1．主色调：
蓝+白+黑
2．辅助色：
绿+橙+黄+灰
6．网站的标准字体
网站的字体也是网页内涵的一种体现，合适的字体会让人感觉到美观、亲切、舒适。
一般的网页默认的字体是宋体，如果你想体现与众不同的风格，可以做一些特效字体，但特效字体最好是以图像的形式体现，因为很多浏览者的电脑中可能没有你所设置的特效字体。
【举例】：
1．正文：
宋体、12像素、行高16像素、深灰色
2．标题：
宋体、14像素、加粗、深灰色
3．版块标题：
特殊字体（迷你简稚艺）处理成图片的格式
7．网站的宣传标语
讨论主题：
请大家列举出生活中给你留下深刻印象的宣传标语，并分析标语的优劣。
【举例】：
李宁——一切皆有可能
8、网页布局图
网页布局元素一般包括：
网站名称（logo）、广告区（banner）、导航区（menu）、新闻（what’snew）、搜索（search）、友情链接（links）、版权（copyright）等。
网页版式：
我们常见的布局结构有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、封面型布局、Flash布局、标题文本型布局、框架型布局和变化型布局等。
【举例】：
首页：
三字型（上、中、下）；中：
分三栏（左、中、右）
子页——新书展示：
三字型（上、中、下）；中：
分两栏（左、右）
9．首页及二级页面设计
页面设计主要包括创意、色彩和版式三个方面。
创意会使网页在众多的竞争对手中脱颖而出；色彩可以使网页获得生命的力量；版式则是和用户沟通的核心，所以这三者缺一不可。
使用Photoshop设计首页效果图，首页设计完之后，其他页面的设计就没有主页那么复杂了。
主要是和主页风格保持一致，页面设计美观，要有返回主页的链接等。
【举例】：
1．首页设计图：
2．子页——新书展示设计图：
10．在PhotoShop中裁切设计稿
【举例】：
首页裁切图：
11．站点的规划与建立
【举例】：
12．在网页编辑软件中制作网页
【举例】：
用Dreamweaver来完成。
13．测试与发布上传
1．测试
网站创建好了。
在上传到网上之前要测试它的兼容性和链接的有效性。
兼容性可以使用Dreamweaver的“检查浏览器”功能测试，链接可以使用Dreamweaver的“检查整个站点的链接”功能进行测试。
这种方法我们将在后续项目中学习，在此亦不做赘述。
还有一种测试，是把网页上传到Internet服务器上去测试链接的有效性、网页的下载速度等。
这种测试，只是你将网页上传到网上申请的个人空间后，以一名普通浏览者浏览的方式去检验即可。
2．上传
方法一：
使用Dreamweaver的FTP功能上传。
方法二：
使用一些FTP工具上传。
14．后期更新与维护
网站做好之后必须要有专人维护，网站才具有生命力，才会有点击率。
对于一个网站来说，它的更新与管理是极其重要的。
一个再好的网站如果不进行内容更新与管理，都会出现许多这样或那样的问题。
例如，网站内容陈旧，超级链接断开等。
特色网站的网址：
[1]边走边乔
[2]漫海精灵
[3]7米浅蓝
[4]错爱双鱼
[5]依儿酷站
[6]帕琪奥王国
[7]五米蓝
[8]纯快乐物语
[9]strangers's
[10]Mr.Queen
[11]
[12]东区生活
[13]http:
//www.duoduo.org/windows.aspseo'slife
个人阶段任务1：
请从下面十个网站中挑选三个网站，分别从：
主题、色彩搭配、网页布局图（首页+子页，共两张网页）、网站逻辑结构图（从首页三层）、网站观后感（至少100字）五个方面进行赏析。
1.通用汽车中国投资有限公
2.「可口可乐」中国网站http:
//www.coca-
3.IBM-中国
4.TASAKI田崎珠宝
5.蓝山视觉
6.明基中国
7.华美互动
8.雀巢咖啡玩上"饮"
9.立顿中国
10.SHOEBOX鞋柜
以学校网站为例：
查看——查看源文件（纯文本文件）。
在制作网页时代码视图讲。
ssFlash（Banner）制作。
[总结：
素材的整理与再加工。
]
升级会员 