西京学院经济系.doc

《西京学院经济系.doc》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、西京学院经济系《网页设计与制作》实训指导书电子商务教研室杜永红2008年11月5日《网页设计与制作》实训指导书一、实训的目的及功能定位1.应用远程站点管理的知识和技能；2.应用本地站点管理的知识和技能；3.应用网页页面设计的知识和技能；4.应用网页制作的知识和技能；5.培养以上知识和技能的综合应用能力。二、实训总体要求1.自己负责作品的保存，注意存放到机房被误删；2.要独立完成，不能合作，不可以从网上下载网页直接交上来。可以模仿某个网站；3.申请免费域名、免费主页空间，并发布站点。交作业前申请便可；4.站点设计合理、管理有序、无多余文件和文件夹、大小合适；5.尽量减少使用媒

2、体（音频和视频文件）文件，因免费空间上传文件大小有限制；6.首页命名要规范，存放位置要正确，不可以是zhuye.htm、main.htm、我的主页.htm等。主页文件名应该使用index或default等。其他文件或文件名命名也要规范，不使用汉字或带有空格的名称。最好是符合各种系统命名规则；7.站点至少要有二层结构，页面数不得少于5页；8.自选主题，主题内容要合法、健康、实用；9.网页要有落款、版权说明；10.要仔细考虑网站定位。分析面向的潜在访客群体的需求特点，选择内容和版式；11.网站主题突出、内容丰富；12.网站风格统一，设计适合于主题的LOGO；13.各页面设计合理

3、、美观，有创意。不要太花哨或太孩子气。要有网页平面设计过程，不要只是各种元素的随意拼凑；14.图片动画选用要适合主题，不要在网页中插入不相干的图片。适用于各种显示器的分辨率和颜色；15.不要太宽，否则显示器分辨率小时会出现水平滚动条；1.各个页面之间的链接要合理有效，路径要正确（相对路径）；2.合理使用css样式。不要在各个页面中重复定义相同的Css样式，应该将css样式存放到css文件中，然后附加（链接）到各页中；3.注意网站的大小，图片保存格式和图片大小要合适；4.代码结构清晰，无垃圾代码。三、实训学时总学时30学时四、实训进程1.设计方案：(1)潜在访客群体的需求特点

4、：版式和内容的需求；(2)站点目录结构图：(3)色彩方案：主色调、次色调；(4)布局方案：导航和其他网页内容的位置；(5)平面设计图：使用firework或photoshop绘制网页平面设计图；2.制作网页主页：（1）切割图片；（2）制作动画；（3）录入文字；（4）制作网页；3.制作其他页，完善优化网站：（1）优化代码（2）优化图片（3）链接各网页4.完善优化网站：（1）测试网站（2）优化网站（3）制作动态效果5.在课程设计之前提交实训报告和作品。五、具体细则1．可根据推荐的主题选择网站主题或自定义一个网站主题综合门户娱乐游戏卡通漫画网络数码建筑装饰美容时尚手机通讯学校教育

5、生活购物服饰品牌医疗保健食品饮料文化艺术金融财经休闲体育交友社区公司展示个性展示儿童宠物汽车品牌影视音乐风景旅游2．根据网站主题的特点，完成以下工作l确定网站的栏目并画出栏目结构图l色彩搭配根据网站主题特点，确定网站的色彩方案l根据网站的主题收集资料：文字及图像等站点参考结构图3．对网站整体结构进行设计l确定网站的版式l主页的草图l主页实现的技术l栏目页的草图l栏目页实现的技术l内容页的草图l内容页实现的技术草图的设计采用photoshop或firework来绘制，技术可选择采用FLASH动画、多媒体特效、JAVASCRIPT/VBSCRIPT技术、JAVAAPPLET等。

6、4.主页的制作创建一个本地站点命名为www，站点内包含一个子目录images作为图像文件夹。l修改绘制的主页草图，添加行为，输出为HTML文件。l制作动画，插入到在网页适当的位置。l在网页中录入文字l完成主页设计５．栏目页及内容页制作l规划栏目页和内容页的样式，可选用模板或框架结构。l根据模板或框架结构生成栏目页及内容页l添加页面链接l检测网页有无垃圾代码，链接是否准确l测试站点６．站点上传l在internet上，申请免费个人空间l利用ＦＴＰ工具，上传整个站点l打开浏览器，浏览站点是否有误７．完成实训报告和提交网站作品写出实训报告并及时提交网站作品。六、实训成绩细则项目指标

7、分数远程站点5分有效的主页空间，并上传站点3有效的域名2本地站点37分主页文件名正确2主页保存位置正确2站点资源组织（目录结构）合理3站点中无多余文件和文件夹3站点中平均网页大小小于400K2站点至少有二层3页面数5—8页12各页之间跳转方便，各子页均可返回到主页2没有无效链接4文字内容使用CSS样式表文件控制4内容各网页内容合法、健康、实用48分网站主题突出、内容丰富2各网页主次分明，文章流畅，内容正确2网页平面设计28分网站风格统一2LOGO设计新颖、美观5网页布局设计合理、清晰2色彩搭配合理3动静搭配合理3图