网设计实训报告

1、网页设计实训报告课题名称：张瑞希Personal Page专业：计算机网络技术班级：网络S101学 号：01姓名：魏洪指导教师：雷学智二0 年十二月二十二日一、课程设计目的 二、软件、硬件的需求 三、使用的主要技术 四、课程设计内容 五、课程设计步骤 六、结论 七、结束语成绩评定标准考核、评价项目考评人考核内容得分实训的对实训期间的出勤情教师职业素质、实训态度、平时考况、实训态度、职业效率观念、协作精神核道德素质学生（20 分）基本技能站点建立，网站的可用性教师正确建立网站站点预览无错误（10分）、实训评网站效果根据网站效果评定成绩教师网站整体效果、布局等（20）价网站制主要是针对制作网站链接

2、、媒体、样式、模作技巧过程中灵活应用网站教师板、多媒体、特效等的使用制作技术综合应用（20分）实训文档根据实训设计文档和实训报告评定成绩教师表达能力、文档写作能力、文档的规范性（30分）获奖加分根据学生参加网页设有关创新能力、自主学习能计大赛获奖情况给予相应加分专家力、综合素质（10分）合计教师评语：成绩：教师：年 月日、课程设计目的本学期，我们所学习的网站设计，主要由Dreamweaver、 Photoshop 、Flash 三部组成。通过我建立的是我个人的网站，充分的将我个人的信息展现出来，也将加强 我对这三种软件使用的技能有了很大的提高。利用 Dreamweaver 怎样来布局网页的格式

3、、利用Photoshop 处理图片、利用Flash 制作动画。将三者完美的结合制作网页。经过半学期网页设计学习，我基本掌握了设计网页的步骤，懂得了怎样运用设 计网页所需的各个软件、以及各种技巧。在学习中我体会到了建立网页的趣味，并 且吸引了我，而建立一个属于自己网页也成了我学习的目标和动力，终于等到了这 次机会，可以让我证明自己所学的知识是有用的。所以我设计的网页是一个自己主 页，可以发表自己喜欢的日志，可一上传相片，还可以收藏自己爱听的音乐，以这 些功能为主建立一个自己空间与大家共同分享。二、软件、硬件的需求2.1 Dreameweaver2.1.1 硬件环境处理器：In tel Pen t

4、ium4 、In tel Cen tri no、In telXeo n 或 In tel Core Duo 处理器内存： 512MB RAM。硬盘空间：至少需要 1GB空闲的磁盘空间显示器：1024 X 768分辨率的显示器。外部设备：DVD-ROM2.1.2 软件环境操作系统 :Microsoft Window XP（ 带有 Service Pack2） 或 Windows Vista HomePremium、 Business 、Ultimate 或 Enterprise（32 位或 64 位版本 ） 。浏览器： Microsoft Internet Explorer 6.0以上，或者更高

5、潘本的 NetscapeNavingator 浏览器。2.2 Photoshop2.2.1 硬件环境处理器：In tel Pen tium4、In tel Cen tri no、In telXeo n 或 In tel Core Duo 处理器内存： 512MB RAM。硬盘空间：至少需要 1GB空闲的磁盘空间。显示器： 1024X 768分辨率的显示器， 16位显卡。外部设备：DVD-ROM2.2.2 软件环境操作系统 :Microsoft Window XP（ 带有 Service Pack2） 或 Windows Vista HomePremium、Business 、 Ultimate

6、 或 Enterprise（32 位或 64 位版本 ） 。浏览器： Microsoft Internet Explorer 6.0 以上，或者更高潘本的 NetscapeNavingator 浏览器。2.3 Flash2.3.1 硬件环境处理器：In tel Pen tium4、In tel Cen tri no、In telXeo n 或 In tel Core Duo 处理器内存： 512MB RAM。硬盘空间：至少需要 1GB空闲的磁盘空间。显示器：1024X 768分辨率的显示器，16位显卡。外部设备：DVD-ROM2.3.2 软件环境操作系统 :Microsoft Window X

7、P（ 带有 Service Pack2） 或 Windows Vista HomePremium、 Business 、 Ultimate 或 Enterprise（32 位或 64 位版本 ） 。浏览器： Microsoft Internet Explorer 6.0以上，或者更高潘本的 NetscapeNavingator 浏览器。三、使用的主要技术1：使用 Dreameweaver 网页布局。2：使用 Dreameweaver 插入图片，插件，歌曲，动画。3：使用 Photoshop 处理图片。4：使用 Photoshop 制作 logo 。5：使用 Flash 制作动画。四、课程设计内

8、容我制作的网页主要是以韩国女星张瑞希为主题，详细的介绍了她的个人信息， 最新动态等可以全面了解她的内容，在主页上的导航条上我做了五个超级链接，分 别是“主页”，“个人资料”，“最新动态”，“精彩写真”，“影片赏析”，在 主页页面上还有关于张瑞希曾出演的电视剧热门图片等相关链接五个不等，每个页 面的内容都包含了大量的图片及文字信息等。本学期最重要的组成部分“留言 板”，也在我所制作的网页中有所体现。在“个人信息”页面中主要介绍了张瑞希的基本资料与个人演艺经历，讲述了 她从小就踏上了演艺圈这条路；“最新动态”页面中向大家展示了张瑞希的最新动 态；“精彩写真”页面中主要是以图片的方式向大家展现出来的

9、，大量的精彩图片 以 Flash 的形式有所体现；“影片赏析”页面中详细的叙述了电视剧妻子的诱惑 中女主角有了翻天覆地变化的第 48 集电视剧，同时也插入了相关视频等。五、课程设计步骤设计流程图主页5.1建立站点(1) 一个站点就是系列文件的组合，而这些文件通常位于一个特定的文件夹中，所以在创建网站时就需要制指定该文件夹。在F盘根目录下，新建一个名为XX的文件夹。(2) 启动Dreamweaver CS3,在“幵始页”的“新建”选项组中单击“ Dreamweaver站点”，或者在主窗口中执行“站点”菜单中的“新建站点”命令， 即可打幵站点定义向导对话框。如图一(3) 切换“高级”选项卡，在左边

10、的“分类”列表框中选中“本地信息”选项， 然后在右边的“本地信息”选项组中设置以下选项。如图二 在“站点名称”文本框中输入站点名称，站点名称可以是任意字符，但不能包 括“？、*、/、 “等等特殊字符。 在“本地根文件夹”文本框右侧丹迪文件夹按钮，然后定位到事先创建的文件 夹中 选中“启动缓存”复选框，以便创建现有文件的缓存记录，从而可以在移动、 重命名或删除文件时加速更新超级连接。（4）单击“确定”按钮，创建完毕，系统自动返回主窗口，此时在“文件”面板 中显示出已创建的站点。图一图二5.2网页布局521创建表格执行“插入记录”菜单中的“表格”命令，或在“插入”栏的“常用”类别中单 击巨按钮，打

11、幵“表格”对话框，如图三图三5.2.2布局视图排版使用布局视图，首先必须切换到布局视图中，其操作方法是：执行“查看”菜单 中的“表格模式” | “布局模式”命令，此时“文档”窗口的顶部会出现标有“布局 模式”的条，然后即可创建布局表格及添加布局单元格。如图四图四5.3 处理图片5.3.1 画布颜色 在“属性”面板中，单击“画布”区拾色器，或执行“修改”菜单中的“画布”| “画布颜色”命令，即可重新设置新的画布颜色。如图五图五5.3.2 画布大小在“属性”面板中，单击“画布大小”按钮或执行“修改”菜单中的“画布” |“画布大小”命令，即可弹出“画布大小”对话框。如图六图六5.3.3 图像大小 在

12、“属性”面板中，单击“图像大小”按钮或执行“修改”菜单中的“画布” |“图像大小”命令，即可弹出“图像大小”对话框 在“像素尺寸”选项组中，选择合适的度量单位 （像素、英寸、厘米） 并输入新的宽度和高度尺寸值，即可重新设置工作区的宽、高度数值。图七5.3.4 图像的储存需要存储的图像时，直接执行“文件”菜单中的“保存”命令，也可以按快捷键Crtl+S 。如果这个图像是刚刚新建的空白文件， 而且是第一次进行储存， 此时会弹出然后单击“保存”“另存为”对话框，在对话框中选择保存的路径并进行输入文件名, 按钮，图像文档将自动以.png格式储存。5.4插入歌曲在“常用”的模式下，单击椁，单击“插件”，

13、弹出对话框如图八，选择指定歌曲，单击“确定”既可。图八5.5插入图片在“常用”的模式下，单击旦，单击“插件”，弹出对话框如图九，选择指定图片，单击“确定”既可。图九5.6制作动画5.6.1 制作文字动画（1） 新建一个文件，执行“修改”| “文档”命令，设置文档的背景颜色。（2）选中文字工具，在场景中输入文字，并设置文字字体、颜色、大小。然后执 行“修改”菜单中的“分离”命令打散文字，可以看到文字并未灰色网格。（3）右击“图层1”的第10帧，在弹出的跨界菜单中选择“插入空白关键帧” 选项，这时场景中的文字将会消失。若让文字能正常显示又不影响实际的播放效果，可以单击时间轴下面的“绘图纸外观”按钮

14、，此时文字有呈现出来。4）再次选中文字工具，在场景中输入文字，并设置文字字体、颜色、大小。然后执行“修改”菜单中的“分离”命令打散文字。（ 5）使用同样的方法，分别在时间轴的第 20、30、40 帧处输入文字，并将其打 散。（ 6）在时间轴的第 1 帧单击，并在“属性”面板中的“补间”下拉列表框中选择 “形状”选项，以创建从第 1 帧到第 10 帧的变形过渡动画。设置完毕后，可以看到 在这两帧之间产生了一条绿色的箭头线。六、结论在我看来网站设计就是指在因特网上，根据一定的规则，使用Dreamweaver、Photoshop 等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一 种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或 者利用网站来提供相关的网路服务。人们可以通过网页浏览器来访问网站，获取自 己需要的资讯或者享受网路服务。因此在网页创作的时候就必须将网站的整日设计 与网页设计的相关原理紧密结合起来。网站设计是将策划案中的内容、网站的主题 模式、以及结合自己的认识通过艺术的手法表现出来。七、结束语通过一个学期的有关网站设计的学习我从根本上理解了什么是网站设计，也明 白了怎么进行一个网站的设计及注意事项，如果自己想设计一个