网页设计与制作.ppt

《网页设计与制作.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作.ppt（38页珍藏版）》请在三一办公上搜索。

1、网页设计与制作,计算机公选课,主讲：林旺E_mail:lw_,课程说明,本课程主要从“技术”的角度着手，即：主要介绍基本语言HTML的使用和网页制作工具的使用。如何设计并制作出布局合理，色彩协调，功能完善的网站和网页，有待各位花更多时间和精力去学习。本课程只是投石问路，很多有关网站及网页设计和制作的新技术新方法，我们会提及，但不会详细介绍。如有可能，我们会安排专题讲座。,课程的目标,通过学习，要掌握网页制作的基本知识和技能，培养网络实际应用能力，达到在尽量短的时间内熟练掌握网页制作和网站规划技能。掌握DreamWeaver、Fireworks、Flash 三个网页制作软件的基本使用方法和技巧。

2、,本课程的主要内容,Internet的基本知识 网页设计及网站规划 网页制作HTML语言 网页制作三剑客DreamWeaverFireworksFlashWeb站点的建立和管理,本课程对学生的要求,自觉签到，请勿迟到和早退 进行必要的预习、认真听课和作必要的笔记 可以随时提问与插话 课后请及时复习 有BP机与手机者请关闭之 请勿在教室吃东西和乱丢纸屑 提倡在上机练习时互相帮助，最大限度利用Internet协作学习，包括利用Web论坛、专题组、BBS和QQ等互助与讨论，以及留下您的建设性意见 认真按时完成上机练习与上机作业，不允许请人代做或代他人做作业，不允许直接抄袭他人的作业,本课程提倡与培养

3、哪些精神,提倡与培养认真品质；反对混学分的行为 提倡与培养迎难而上，勇于克服困难的顽强作风；反对逃避困难的行为 提倡与培养在错误、挫折与失败中顽强进取的坚韧毅力（允许学生犯错误，并充分提供改正错误的机会）；反对和不容忍知错不改的行为 提倡与培养重操作、重实践、重应用的理论联系实际的工作作风；反对纸上谈兵，不容忍不做练习和不完成作业的行为 提倡与培养守时与诚信的美德；反对无故迟到与缺勤，不容忍抄袭与作弊的行为 提倡与培养协作与互助精神（鼓励资源共享与乐于助人）；反对自私、保守的思想与行为 提倡与培养敢于向专家、权威、教师挑战的批判精神（鼓励发现、指出与纠正教师在教学各环节中的不足与错误）；反对盲

4、从的行为 提倡与培养举一反三的创新能力（鼓励不满足课程教学内容，自觉探讨老师未讲授的内容）；反对固步自封的行为,特别建议,如果你选此课程只是为了获得学分，建议不要选修此课程，否则你会后悔；如果你选此课程是为了学习网页制作的技术和方法以及提升自己的竞争能力，建议一定要选修此课程，否则你会后悔。,选修注意事项,本人基础基本的计算机操作能力浓厚的兴趣时间，精力和金钱的付出基本要求选则学学则来来则听,几点想法,学习经验是：Practice makes perfect。学习教训是：落后就要“挨打”！（遭受良心的鞭打）学习感想是：笨鸟要先飞。学习意见是：扪心自问！学习建议是：大家能够互相帮助。感想：这个集

5、体很温暖！,学习经验：Practice makes perfect学习教训：落后就要“挨打”！（遭受良心的鞭打）学习感想：笨鸟要先飞。学习意见：扪心自问！学习建议：大家能够互相帮助。希望感想：希望这个集体很温暖！,声 明,本节部分内容引用 了裴纯礼教授个人主页的部分内容该部分遵循原作者版权，并致谢。,教你做网页,做主页难不难啊？要多久才能学会呢？只用5分钟。方法：方法一、用word制作方法二、用记事本(notepad)制作方法三、用FrontPage制作方法四、用Dreamweaver制作,方法一、用word制作,打开word，输入“hello”。,方法一、用word制作,从“文件(file)

6、”菜单中选“另存为(save as)”,文件名保存为hello1.htm,方法一、用word制作,用ie打开刚才保存的文件，检查页面效果,方法二、用记事本(notepad)制作,打开记事本，输入如下代码：,方法二、用记事本(notepad)制作,从“文件(file)”菜单中选“保存(save)”，文件类型选“所有(all)”,文件名保存为hello2.htm,方法二、用记事本(notepad)制作,用ie打开刚才保存的文件，检查页面效果,方法三、用FrontPage制作,打开FrontPage，输入“hello”。,方法三、用FrontPage制作,从“文件(file)”菜单中选“保存(sav

7、e)”，文件名保存为hello3.htm,方法三、用FrontPage制作,用ie打开刚才保存的文件，检查页面效果,方法四、用Dreamweaver制作,打开Dreamweaver，输入“hello”。从“文件(file)”菜单中选“保存(save)”，文件名保存为hello4.htm 用ie打开刚才保存的文件，检查页面效果,简单不简单？,简单！,网页设计及网站规划,网站创建流程 确定网站主题 搜集材料 规划网站 选择合适的制作工具 制作网页 上传测试 推广宣传 维护更新,网页设计及网站规划,网站的关键 布局 网页色彩 网页字体,网页设计及网站规划,网站的目录结构 不要将所有文件都存放在根目录

8、下 按栏目内容建立子目录 在每个主目录下都建立独立的images目录 目录的层次不要太深不要使用中文目录不要使用过长的目录尽量使用意义明确的目录 网站的链接结构 树状链接结构（一对一结构）星状链接结构（一对多结构,网页设计及网站规划,开发平台介绍 网页制作工具Microsoft FrontPage 2000/XPMacromedia Flash MXMacromedia Dreamweaver MXMacromedia Fireworks MX 图形工具平面图形工具动画工具三维图像工具 JavaScript特效工具 FTP工具,网站综合开发基础,学习目的：了解网站规划的基本方法熟悉网页设计的观

9、念和原则了解网站的宣传和推广的基本方法了解网站设计成功的经验学习重点：网站规划网页设计的观念和原则,网站综合开发基础,经验者说：融会贯通网站开发设计的基本流程是：了解业务需求，进行建站的前期策划，制定“网站功能需求分析报告”。包括网站面向对象分析，建立网站的目的、规模、风格等等。依据客户需求制定网站开发预算。进行网站系统设计、站点规划，制定站点结构、设计应用系统，撰写“网站开发建议书”。进行美术设计，创意网站风格。客户确认网站美术设计，进入主页制作阶段。客户确认“网站开发建议书”，进入软件程序系统开发阶段。开发完毕、测试联调，提交“网站验收申请”验收合格，移交技术资料，提交“网站维护手册”。,

10、网站综合开发基础,网站的规划1 明确网站的类型 设计艺术类网站 资讯型网站2 明确建设网站的目的3 网站的内容设计4 网站的表现形式设计5 明确的命名规则6 文档目录的规划,网站综合开发基础,网页设计介绍1 网页设计流程初始会商概念开发内容综合HTML布局和导航图形制作丰富内容测试交付2 网页设计要领 网页应易读 网页风格要统一 页面容量越小越好,网站综合开发基础,网站的宣传和推广1 传统媒体的运用2 网址宣传融入日常工作3 网络的运用4 收集具“针对性”的站点5 了解各个站点的宣传影响力,网站综合开发基础,网站设计成功经验1 成功第一步网站的主题和名称 主题要小而精 题材最好是自己的喜爱2

11、定位网站的形象 设计网站的标志（logo）设计网站的标准色彩 设计网站的标准字体 设计网站的宣传标语3 确定网站的栏目4 确定网站的目录结构5 确定网站的链接结构6 设计网站的整体风格,网站设计点评,学习目的：学习优秀网站的一般评价标准初步了解网站设计点评方法体验一些优秀网站的成功之处学习重点：优秀网站的一般标准网站点评实务,网站设计点评,经验者说：你会赏析吗？怎样欣赏优秀网站的艺术的美，怎样品评网页作品的优劣，如同对其他艺术的欣赏品评一样，都是一个十分复杂的问题。从美学的角度上看，这一审美活动不仅与审美对象有关，而且与审美主体（即赏析人）的审判能力、水平及其文化艺术修养更有密切关系，同时也深

12、受一定时代的社会审美意识、民族审美情趣的影响。所以，我们要学会正确地鉴赏网页作品，领略网页设计的真谛，从中获得更多更美的享受，得到精神上的升华，得到情操的陶冶和心灵的净化，以便运用美学的理性知识对网页及网站进行欣赏与品评。,网站设计点评,优秀网站的一般标准1 页面下载速度快2 使用方便3 系统运行正常4 链接无误5 联系信息方便多样6 保护个人信息7 不同浏览器兼容性8 要符合网络伦理,网站设计点评,网站设计点评1 网站评价的主要依据入门级网站中高级网站顶级网站2 网页色彩色彩的合理性色彩的独特性色彩的艺术性,网站设计点评,优秀站点鉴赏1 21CN网站2 新华网3 驱动之家4 新浪网5 网易,信息结构（IA）,