资源描述
单击此处编辑母版文本样式,第二级,单击此处编辑母版标题样式,项目六 个人网站建设,项目六 个人网站建设,教学内容,一、,项目分析与网站定位,二、,网站栏目设计,三、制作网站主页设计效果图,四、制作个人网站分页效果图,五、网站测试服务器（IIS）环境搭建,六、按效果图作页面,七、制作留言板,八、项目展评,项目六 个人网站建设,一、,项目分析与网站定位,1、阅读项目情景文件,2、分析项目目的,3、分析项目技术要求,4、分析项目主要工作内容,项目六 个人网站建设,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,1.网站主题,网站的主题应遵循的原则如下：,1）、主题要小而精：,2）、题材最好是你自己擅长或者喜爱的内容,3）、题材不要太滥或者目标太高。,项目六 个人网站建设,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,2、网站定位,2.网站风格,在网页设计制作过程中，整个页面设计利用Photoshop设计，体现出个人的创新力和想象力。导航栏放置在页面的上方，并方便访问者浏览信息，并设置有留言板块，便于访客交流。整个页面设计清新爽朗，颜色明快生动，彰显个性。,3.技术定位,根据网站内容要求，要求具有留言功能，则需要搭建服务器环境，结合数据库和相关脚本程序来完成,项目六 个人网站建设,二、,网站栏目设计,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,1、根据个人网站主题的定位，本网站的栏目主要为：,首页 日志 相册 作品集 就业方向 给我留言,2、根据栏目要求，本网站的站点结构图如下,项目六 个人网站建设,三、制作网站主页设计效果图,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,（一）网站主页效果图设计,项目六 个人网站建设,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,（二）、效果图分析,1),页面顶部,页面顶部包含的内容有：网站标志,LOGO,、网站导航。,2),页面主体,页面主体以一张用于翻页的图片作为背景，所包含的内容有：左部导航（链接个人作品及各科目学习）、个人简介、个人生活照、个人宣言。,3),网页左部导航：设置导航，主要用于链接个人各科目学习资料、作品等，有助于访客了解个人能力。,4),页面底部,页面底部用于放置版权信息,项目六 个人网站建设,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,（三）、主页绘制,1,、素材准备、新建文件、图层文件夹建立,2,、,logo,设计,3.,导航绘制,4.,左部导航制作,5.,网页主体设计,6.,网页底部,项目六 个人网站建设,四、,制作个人网站分页效果图,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,作品集效果图,项目六 个人网站建设,四、,制作个人网站分页效果图,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,给我留言效果图,项目六 个人网站建设,四、,制作个人网站分页效果图,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,日志效果图,项目六 个人网站建设,四、,制作个人网站分页效果图,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,就业意向效果图,项目六 个人网站建设,四、,制作个人网站分页效果图,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,相册效果图,项目六 个人网站建设,五、网站测试服务器（IIS）环境搭建,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,1.在XP系统中安装IIS（针对XP系统安装）,2.安装步骤：打开左下角的开始菜单-控制面板-选择添加/删除程序,打开添加/删除程序窗体-点击窗体左侧添加/删除Windows组件(A),项目六 个人网站建设,五、网站测试服务器（IIS）环境搭建,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,3.在IIS中设置站点,4.设置站点属性,项目六 个人网站建设,六、按效果图作页面,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,1、创建站点,项目六 个人网站建设,六、按效果图作页面,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,2、设置服务器：本地/网络,项目六 个人网站建设,六、按效果图作页面,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,4、创建文件及目录,在站点目录内创建相应的目录和主页文件，如,index.asp(,主页,),、,image,（图片）、,flash(,动画,),、,zpj,（作品集）、,web,（子页）等,项目六 个人网站建设,六、按效果图作页面,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,5、源文件的导出与保存,6、进行页面效果图图片切割,项目六 个人网站建设,六、按效果图作页面,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,7、制作导航,项目六 个人网站建设,六、按效果图作页面,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,7、横幅广告制作：利用CSS样式设置背景,项目六 个人网站建设,六、按效果图作页面,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,8、.网页主体内容制作,项目六 个人网站建设,六、按效果图作页面,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,9、.网页底部制作：利用CSS样式制作背景,项目六 个人网站建设,六、按效果图作页面,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,10、.网页底部效果,项目六 个人网站建设,六、按效果图作页面,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,11、.设置网页的链接,1）绘制热区,2）设置链接,项目六 个人网站建设,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,七、按分页效果图作页面,1、根据各个效果图，结合主页效果图制作出主页,2、特殊图形的切割,项目六 个人网站建设,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,八、制作留言,1、创建数据库,2、创建表,字段名,字段类型,备注,Name,文本,长度为,10,，存储用户名,Content,备注,用于存放留言,Shijian,日期,格式为中日期，默认值为“,=now,（）”,项目六 个人网站建设,八、制作留言,3、输入数据,3、输入数据,Name,Content,Shijian,晴晴,头痛，不想了，想多了也没用。,自动生成,秋秋,偶尔也可以打几个喷嚏，代表我在想你,自动生成,兰兰,最珍惜，好友的问候，纵然人生聚散无常，,念你的心依旧。,自动生成,连连,但愿美好的回忆，不要从岁月里匆匆,走过，让它永驻我们心中。,自动生成,娟娟,远方的你可要好好照顾好自己，不要感冒了流鼻涕,自动生成,项目六 个人网站建设,八、制作留言,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,4、在留言页面制作表单,5、在表单内插入表格，并编辑,项目六 个人网站建设,八、制作留言,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,6、检查服务器环境是否具备数据库连接,项目六 个人网站建设,八、制作留言,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,7、连接数据库,项目六 个人网站建设,八、制作留言,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,9、保存留言：“插入记录”,项目六 个人网站建设,八、制作留言,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,10、创建记录集,项目六 个人网站建设,八、制作留言,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,11、显示留言：插入字段,项目六 个人网站建设,八、制作留言,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,12、制作重复区域,项目六 个人网站建设,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,九、项目展评,1、班级初评：,1）,展示并介绍项目作品,2）每个小组推荐一个代表在班级上展示,2、老师作为评委综合各小组建议给予意见,3、填写评价表和学生工作页,10、项目总结,1、总结本项目过程中各个选手的完成情况,2、点评各小组代表作品,项目六 个人网站建设,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,项目六 个人网站建设,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,项目六 个人网站建设,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,项目六 个人网站建设,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,项目六 个人网站建设,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,项目六 个人网站建设,一 项目情境,二 项目引入,三 项目实施,四,项目修改评价,五 项目验收,六 项目小结,
展开阅读全文