网页设计与制作

《网页设计与制作》由会员分享，可在线阅读，更多相关《网页设计与制作（38页珍藏版）》请在金锄头文库上搜索。

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

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

3、做作业，不允许直接抄袭他人的作业本课程提倡与培养哪些精神l l提倡与培养认真品质；反对混学分的行为提倡与培养认真品质；反对混学分的行为 l l提倡与培养迎难而上，勇于克服困难的顽强作风；反对逃避困难的提倡与培养迎难而上，勇于克服困难的顽强作风；反对逃避困难的行为行为 l l提倡与培养在错误、挫折与失败中顽强进取的坚韧毅力提倡与培养在错误、挫折与失败中顽强进取的坚韧毅力（允许学生犯错误，并充分提供改正错误的机会）；反对和不容忍知错不改的反对和不容忍知错不改的行为行为 l l提倡与培养重操作、重实践、重应用的理论联系实际的工作作风；提倡与培养重操作、重实践、重应用的理论联系实际的工作作风；反对纸上

4、谈兵，不容忍不做练习和不完成作业的行为反对纸上谈兵，不容忍不做练习和不完成作业的行为 l l提倡与培养守时与诚信的美德；反对无故迟到与缺勤，不容忍抄袭提倡与培养守时与诚信的美德；反对无故迟到与缺勤，不容忍抄袭与作弊的行为与作弊的行为 l l提倡与培养协作与互助精神提倡与培养协作与互助精神（鼓励资源共享与乐于助人）；反对自反对自私、保守的思想与行为私、保守的思想与行为 l l提倡与培养敢于向专家、权威、教师挑战的批判精神提倡与培养敢于向专家、权威、教师挑战的批判精神（鼓励发现、指出与纠正教师在教学各环节中的不足与错误）；反对盲从的行为反对盲从的行为 l l提倡与培养举一反三的创新能力提倡与培养举

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

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

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

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

9、结构 不要将所有文件都存放在根目录下 按栏目内容建立子目录 在每个主目录下都建立独立的images目录 目录的层次不要太深不要使用中文目录不要使用过长的目录尽量使用意义明确的目录l 网站的链接结构 树状链接结构（一对一结构） 星状链接结构（一对多结构网页设计及网站规划l开发平台介绍 网页制作工具lMicrosoft FrontPage 2000/XPlMacromedia Flash MXlMacromedia Dreamweaver MXlMacromedia Fireworks MX 图形工具l平面图形工具l动画工具l三维图像工具 JavaScript特效工具 FTP工具网站综合开发基础网

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

11、系统开发阶段。开发完毕、测试联调，提交“网站验收申请”验收合格，移交技术资料，提交“网站维护手册”。网站综合开发基础网站综合开发基础l网站的规划1 明确网站的类型 设计艺术类网站 资讯型网站2 明确建设网站的目的3 网站的内容设计4 网站的表现形式设计5 明确的命名规则6 文档目录的规划网站综合开发基础网站综合开发基础l网页设计介绍1 网页设计流程初始会商概念开发内容综合HTML布局和导航图形制作丰富内容测试交付2 网页设计要领 网页应易读 网页风格要统一 页面容量越小越好网站综合开发基础网站综合开发基础l网站的宣传和推广1 传统媒体的运用2 网址宣传融入日常工作3 网络的运用4 收集具“针对

12、性”的站点5 了解各个站点的宣传影响力网站综合开发基础网站综合开发基础l网站设计成功经验1 成功第一步网站的主题和名称 主题要小而精 题材最好是自己的喜爱2 定位网站的形象 设计网站的标志（logo） 设计网站的标准色彩 设计网站的标准字体 设计网站的宣传标语3 确定网站的栏目4 确定网站的目录结构5 确定网站的链接结构6 设计网站的整体风格网站设计点评网站设计点评l学习目的：学习目的：学习优秀网站的一般评价标准初步了解网站设计点评方法体验一些优秀网站的成功之处l学习重点：学习重点：优秀网站的一般标准网站点评实务 网站设计点评网站设计点评l经验者说：你会赏析吗？ 怎样欣赏优秀网站的艺术的美，怎

13、样品评网页作品的优劣，如同对其他艺术的欣赏品评一样，都是一个十分复杂的问题。从美学的角度上看，这一审美活动不仅与审美对象有关，而且与审美主体（即赏析人）的审判能力、水平及其文化艺术修养更有密切关系，同时也深受一定时代的社会审美意识、民族审美情趣的影响。所以，我们要学会正确地鉴赏网页作品，领略网页设计的真谛，从中获得更多更美的享受，得到精神上的升华，得到情操的陶冶和心灵的净化，以便运用美学的理性知识对网页及网站进行欣赏与品评。网站设计点评网站设计点评l优秀网站的一般标准1 页面下载速度快2 使用方便3 系统运行正常4 链接无误5 联系信息方便多样6 保护个人信息7 不同浏览器兼容性8 要符合网络伦理网站设计点评网站设计点评l网站设计点评1 网站评价的主要依据入门级网站中高级网站顶级网站2 网页色彩色彩的合理性色彩的独特性色彩的艺术性网站设计点评网站设计点评l优秀站点鉴赏1 21CN网站2 新华网3 驱动之家4 新浪网5 网易 信息结构（IA）