网页设计实训报告

《网页设计》实训报告课题名称：张瑞希PersonalPage专业：计算机网络技术班级：网络S101学号：01姓名：魏洪指导教师：雷学智二0一一年十二月二十二日目录一、课程设计目的..............................................................................................................1二、软件、硬件的需求.......................................................................................................1三、使用的主要技术...........................................................................................................2四、课程设计内容..............................................................................................................3五、课程设计步骤..............................................................................................................3六、结论...........................................................................................................................10七、结束语.......................................................................................................................10成绩评定标准考核、评价项目考评人考核内容得分、实训评价实训的平时考核对实训期间的出勤情况、实训态度、职业道德素质教师学生职业素质、实训态度、效率观念、协作精神（20分）基本技能站点建立，网站的可用性教师正确建立网站站点预览无错误（10分）网站效果根据网站效果评定成绩教师网站整体效果、布局等（20）网站制作技巧使用主要是针对制作网站过程中灵活应用网站制作技术教师链接、媒体、样式、模板、多媒体、特效等的综合应用（20分）实训文档根据实训设计文档和实训报告评定成绩教师表达能力、文档写作能力、文档的规范性（30分）获奖加分根据学生参加网页设计大赛获奖情况给予相应加分有关专家创新能力、自主学习能力、综合素质（10分）合计教师评语：成绩：教师：年月日1一、课程设计目的本学期，我们所学习的网站设计，主要由Dreamweaver、Photoshop、Flash三部组成。通过我建立的是我个人的网站，充分的将我个人的信息展现出来，也将加强我对这三种软件使用的技能有了很大的提高。利用Dreamweaver怎样来布局网页的格式、利用Photoshop处理图片、利用Flash制作动画。将三者完美的结合制作网页。经过半学期网页设计学习，我基本掌握了设计网页的步骤，懂得了怎样运用设计网页所需的各个软件、以及各种技巧。在学习中我体会到了建立网页的趣味，并且吸引了我，而建立一个属于自己网页也成了我学习的目标和动力，终于等到了这次机会，可以让我证明自己所学的知识是有用的。所以我设计的网页是一个自己主页，可以发表自己喜欢的日志，可一上传相片，还可以收藏自己爱听的音乐，以这些功能为主建立一个自己空间与大家共同分享。二、软件、硬件的需求2.1Dreameweaver2.1.1硬件环境处理器：IntelPentium4、IntelCentrino、IntelXeon或IntelCoreDuo处理器内存：512MBRAM。硬盘空间：至少需要1GB空闲的磁盘空间。显示器：1024×768分辨率的显示器。外部设备：DVD-ROM。2.1.2软件环境操作系统:MicrosoftWindowXP(带有ServicePack2)或WindowsVistaHomePremium、Business、Ultimate或Enterprise(32位或64位版本)。浏览器：MicrosoftInternetExplorer6.0以上，或者更高潘本的NetscapeNavingator浏览器。2.2Photoshop22.2.1硬件环境处理器：IntelPentium4、IntelCentrino、IntelXeon或IntelCoreDuo处理器内存：512MBRAM。硬盘空间：至少需要1GB空闲的磁盘空间。显示器：1024×768分辨率的显示器，16位显卡。外部设备：DVD-ROM。2.2.2软件环境操作系统:MicrosoftWindowXP(带有ServicePack2)或WindowsVistaHomePremium、Business、Ultimate或Enterprise(32位或64位版本)。浏览器：MicrosoftInternetExplorer6.0以上，或者更高潘本的NetscapeNavingator浏览器。2.3Flash2.3.1硬件环境处理器：IntelPentium4、IntelCentrino、IntelXeon或IntelCoreDuo处理器内存：512MBRAM。硬盘空间：至少需要1GB空闲的磁盘空间。显示器：1024×768分辨率的显示器，16位显卡。外部设备：DVD-ROM。2.3.2软件环境操作系统:MicrosoftWindowXP(带有ServicePack2)或WindowsVistaHomePremium、Business、Ultimate或Enterprise(32位或64位版本)。浏览器：MicrosoftInternetExplorer6.0以上，或者更高潘本的NetscapeNavingator浏览器。三、使用的主要技术1：使用Dreameweaver网页布局。2：使用Dreameweaver插入图片，插件，歌曲，动画。3：使用Photoshop处理图片。34：使用Photoshop制作logo。5：使用Flash制作动画。四、课程设计内容我制作的网页主要是以韩国女星张瑞希为主题，详细的介绍了她的个人信息，最新动态等可以全面了解她的内容，在主页上的导航条上我做了五个超级链接，分别是“主页”，“个人资料”，“最新动态”，“精彩写真”，“影片赏析”，在主页页面上还有关于张瑞希曾出演的电视剧热门图片等相关链接五个不等，每个页面的内容都包含了大量的图片及文字信息等。本学期最重要的组成部分“留言板”，也在我所制作的网页中有所体现。在“个人信息”页面中主要介绍了张瑞希的基本资料与个人演艺经历，讲述了她从小就踏上了演艺圈这条路；“最新动态”页面中向大家展示了张瑞希的最新动态；“精彩写真”页面中主要是以图片的方式向大家展现出来的，大量的精彩图片以Flash的形式有所体现；“影片赏析”页面中详细的叙述了电视剧《妻子的诱惑》中女主角有了翻天覆地变化的第48集电视剧，同时也插入了相关视频等。五、课程设计步骤设计流程图主页个人资料最新动态精彩写真影片赏析留言板妻子的诱惑妇产科的女医生人鱼小姐乞丐王子45.1建立站点（1）一个站点就是系列文件的组合，而这些文件通常位于一个特定的文件夹中，所以在创建网站时就需要制指定该文件夹。在F盘根目录下，新建一个名为××的文件夹。（2）启动DreamweaverCS3，在“开始页”的“新建”选项组中单击“Dreamweaver站点”，或者在主窗口中执行“站点”菜单中的“新建站点”命令，即可打开站点定义向导对话框。如图一（3）切换“高级”选项卡，在左边的“分类”列表框中选中“本地信息”选项，然后在右边的“本地信息”选项组中设置以下选项。如图二①在“站点名称”文本框中输入站点名称，站点名称可以是任意字符，但不能包括“？、*、/、“等等特殊字符。②在“本地根文件夹”文本框右侧丹迪文件夹按钮，然后定位到事先创建的文件夹中③选中“启动缓存”复选框，以便创建现有文件的缓存记录，从而可以在移动、重命名或删除文件时加速更新超级连接。（4）单击“确定”按钮，创建完毕，系统自动返回主窗口，此时在“文件”面板中显示出已创建的站点。图一5图二5.2网页布局5.2.1创建表格执行“插入记录”菜单中的“表格”命令，或在“插入”栏的“常用”类别中单击按钮，打开“表格”对话框，如图三6图三5.2.2布局视图排版使用布局视图，首先必须切换到布局视图中，其操作方法是：执行“查看”菜单中的“表格模式”|“布局模式”命令，此时“文档”窗口的顶部会出现标有“布局模式”的条，然后即可创建布局表格及添加布局单元格。如图四图四5.3处理图片5.3.1画布颜色7在“属性”面板中，单击“画布”区拾色器，或执行“修改”菜单中的“画布”|“画布颜色”命令，即可重新设置新的画布颜色。如图五图五5.3.2画布大小在“属性”面板中，单击“画布大小”按钮或执行“修改”菜单中的“画布”|“画布大小”命令，即可弹出“画布大小”对话框。如图六图六5.3.3图像大小在“属性”面板中，单击“图像大小”按钮或执行“修改”菜单中的“画布”|“图像大小”命令，即可弹出“图像大小”对话框在“像素尺寸”选项组中，选择合适的度量单位（像素、英寸、厘米）并输入新的宽度和高度尺寸值，即可重新设置工作区的宽、高度数值。8图七5.3.4图像的储存需要存储的图像时，直接执行“文件”菜单中的“保存”命令，也可以按快捷键Crtl+S。如果这个图像是刚刚新建的空白文件，而且是第一次进行储存，此时会弹出“另存为”对话框，在对话框中选择保存的路径并进行输入文件名，然后单击“保存”按钮，图像文档将自动以.png格式储存。5.4插入歌曲在“常用”的模式下，单击，单击“插件”，弹出对话框如图八，选择指定歌曲，单击“确定”既可。9图八5.5插入图片在“常用”的模式下，单击，单击“插件”，弹出对话框如图九，选择指定图片，单击“确定”既可。图九5.6制作动画5.6.1制作文字动画（1）新建一个文件，执行“修改”|“文档”命令，设置文档的背景颜色。（2）选中文字工具，在场景中输入文字，并设置文字字体、颜色、大小。然后执行“修改”菜单中的“分离”命令打散文字，可以看到文字并未灰色网格。（3）右击“图层1”的第10帧，在弹出的跨界菜单中选择“插入空白关键帧”选项，这时场景中的文字将会消失。若让文字能正常显示又不影响实际的播放效果，可以单击时间轴下面的“绘图纸外观”按钮，此时文字有呈现出来。（4）再次选中文字工具，在场景中输入文字，并设置文字字体、颜色、大小。然后执行“修改”菜单中的“分离”命令打散文字。（5）使用同样的方法，分别在时间轴的第20、30、40帧处输入文字，并将其打散。（6）在时间轴的第1帧单击，并在“属性”面板中的“补间”下拉列表框中选择“形状”选项，以创建从第1帧到第10帧的变形过渡动画。设置完毕后，可以看到在这两帧之间产生了一条绿色的箭头线。10六、结论在我看来网站设计就是指在因特网上，根据一定的规则，使用Dreamweaver、Photoshop等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网路服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网路服务。因此在网页创作的时候就必须将网站的整日设计与网页设计的相关原理紧密结合起来。网站设计是将策划案中的内容、网站的主题模式、以及结合自己的认识通过艺术的手法表现出来。七、结束语通过一个学期的有关网站设计的学习我从根本上理解了