网页设计实训报告19159

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

2、效果评定成绩教师网站整体效果、 布局等（ 20 ）训评链接、媒体、样式、模板、价网站制作主要是针对制作网站过程教师多媒体、特效等的综合应用技巧使用中灵活应用网站制作技术（20 分）根据实训设计文档和实训表达能力、文档写作能力、实训文档教师报告评定成绩文档的规范性（ 30分）根据学生参加网页设计大有关创新能力、自主学习能力、获奖加分赛获奖情况给予相应加分专家综合素质（ 10 分）合计感谢下载载精品教师评语：成绩：教师：感谢下载载精品年月日感谢下载载精品一、课程设计目的本学期，我们所学习的网站设计，主要由Dreamweaver 、 Photoshop、Flash 三部组成。通过我建立的是我个人的网

3、站，充分的将我个人的信息展现出来，也将加强我对这三种软件使用的技能有了很大的提高。利用 Dreamweaver怎样来布局网页的格式、利用Photoshop处理图片、利用Flash制作动画。将三者完美的结合制作网页。经过半学期网页设计学习， 我基本掌握了设计网页的步骤，懂得了怎样运用设计网页所需的各个软件、以及各种技巧。在学习中我体会到了建立网页的趣味，并且吸引了我，而建立一个属于自己网页也成了我学习的目标和动力，终于等到了这次机会， 可以让我证明自己所学的知识是有用的。所以我设计的网页是一个自己主页，可以发表自己喜欢的日志，可一上传相片，还可以收藏自己爱听的音乐， 以这些功能为主建立一个自己空

4、间与大家共同分享。二、软件、硬件的需求2.1Dreameweaver硬件环境处理器： Intel Pentium4、 Intel Centrino、IntelXeon或 Intel Core Duo处理器内存： 512MB RAM。硬盘空间：至少需要1GB 空闲的磁盘空间。显示器： 1024 ×768 分辨率的显示器。外部设备： DVD-ROM 。软件环境感谢下载载精品操作系统 :MicrosoftWindowXP(带有ServicePack2) 或 WindowsVistaHomePremium 、Business 、 Ultimate或 Enterprise(32位或 64 位版

5、本 )。浏览 器： MicrosoftInternetExplorer6.0以 上 ，或 者更 高潘 本的NetscapeNavingator浏览器。2.2 Photoshop硬件环境处理器： Intel Pentium4、 Intel Centrino、IntelXeon或 Intel Core Duo处理器内存： 512MB RAM。硬盘空间：至少需要1GB 空闲的磁盘空间。显示器： 1024 ×768 分辨率的显示器， 16 位显卡。外部设备： DVD-ROM 。软件环境操作系统 :MicrosoftWindowXP(带有ServicePack2) 或 WindowsVista

6、HomePremium 、Business 、 Ultimate或 Enterprise(32位或 64 位版本 )。浏览 器： MicrosoftInternetExplorer6.0以 上 ，或 者更 高潘 本的NetscapeNavingator浏览器。2.3 Flash硬件环境处理器： Intel Pentium4、 Intel Centrino、IntelXeon或 Intel Core Duo处理器内存： 512MB RAM。硬盘空间：至少需要1GB 空闲的磁盘空间。显示器： 1024 ×768 分辨率的显示器， 16 位显卡。外部设备： DVD-ROM 。感谢下载载精品

7、软件环境操作系统 :MicrosoftWindowXP(带有ServicePack2) 或 WindowsVistaHomePremium 、Business 、 Ultimate或 Enterprise(32位或 64 位版本 )。浏览 器： MicrosoftInternetExplorer6.0以 上 ，或 者更 高潘 本的NetscapeNavingator浏览器。三、使用的主要技术1 ：使用 Dreameweaver网页布局。2 ：使用 Dreameweaver插入图片，插件，歌曲，动画。3 ：使用 Photoshop处理图片。4 ：使用 Photoshop制作 logo 。5 ：使

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

9、载精品面中主要是以图片的方式向大家展现出来的，大量的精彩图片以Flash 的形式有所体现；“影片赏析”页面中详细的叙述了电视剧妻子的诱惑中女主角有了翻天覆地变化的第48 集电视剧，同时也插入了相关视频等。五、课程设计步骤设计流程图个人资料最新动态妻子的诱惑主页精彩写真妇产科的女医生影片赏析人鱼小姐留言板乞丐王子5.1 建立站点（ 1）一个站点就是系列文件的组合， 而这些文件通常位于一个特定的文件夹中， 所以在创建网站时就需要制指定该文件夹。在 F 盘根目录下，新建一个名为××的文件夹。（ 2）启动 Dreamweaver CS3 ，在“开始页” 的“新建”选项组中单击 “

10、Dreamweaver站点”，或者在主窗口中执行“站点”菜单中的“新建站点”命令，即可打开站点定义向导对话框。如图一（ 3）切换“高级”选项卡，在左边的“分类”列表框中选中“本地信息”选项，然后在右边的“本地信息”选项组中设置以下选项。如图二在“站点名称”文本框中输入站点名称，站点名称可以是任意字符，但不能包括“？、感谢下载载精品* 、/ 、< “等等特殊字符。在“本地根文件夹”文本框右侧丹迪文件夹按钮，然后定位到事先创建的文件夹中选中“启动缓存”复选框，以便创建现有文件的缓存记录，从而可以在移动、重命名或删除文件时加速更新超级连接。（ 4）单击“确定”按钮，创建完毕，系统自动返回主窗口

11、，此时在“文件”面板中显示出已创建的站点。图一感谢下载载精品图二5.2 网页布局创建表格执行“插入记录”菜单中的“表格”命令，或在“插入”栏的“常用”类别中单击按钮，打开“表格”对话框，如图三感谢下载载精品图三布局视图排版使用布局视图， 首先必须切换到布局视图中， 其操作方法是：执行“查看”菜单中的“表格模式” |“布局模式”命令，此时“文档”窗口的顶部会出现标有“布局模式”的条，然后即可创建布局表格及添加布局单元格。如图四图四感谢下载载精品5.3 处理图片画布颜色在“属性”面板中，单击“画布” 区拾色器，或执行“修改”菜单中的“画布”|“画布颜色”命令，即可重新设置新的画布颜色。如图五图五画

12、布大小在“属性”面板中，单击“画布大小”按钮或执行“修改”菜单中的“画布”|“画布大小”命令，即可弹出“画布大小”对话框。如图六图六图像大小在“属性”面板中，单击“图像大小”按钮或执行“修改”菜单中的“画布”|“图像大小”命令，即可弹出“图像大小”对话框在“像素尺寸”选项组中，选择合适的度量单位（像素、英寸、厘米）并输入新的宽度感谢下载载精品和高度尺寸值，即可重新设置工作区的宽、高度数值。图七图像的储存需要存储的图像时， 直接执行 “文件”菜单中的 “保存” 命令，也可以按快捷键Crtl+S 。如果这个图像是刚刚新建的空白文件，而且是第一次进行储存，此时会弹出“另存为”对话框，在对话框中选择保

13、存的路径并进行输入文件名，然后单击“保存”按钮，图像文档将自动以 .png 格式储存。5.4 插入歌曲在“常用”的模式下，单击，单击“插件”，弹出对话框如图八，选择指定歌曲，单击“确定”既可。感谢下载载精品图八5.5 插入图片在“常用”的模式下，单击，单击“插件”，弹出对话框如图九，选择指定图片，单击“确定”既可。图九5.6 制作动画制作文字动画感谢下载载精品（ 1）新建一个文件，执行“修改” |“文档”命令，设置文档的背景颜色。（ 2）选中文字工具，在场景中输入文字，并设置文字字体、颜色、大小。然后执行“修改”菜单中的“分离”命令打散文字，可以看到文字并未灰色网格。（ 3）右击“图层 1”的

14、第 10 帧，在弹出的跨界菜单中选择“插入空白关键帧”选项，这时场景中的文字将会消失。 若让文字能正常显示又不影响实际的播放效果， 可以单击时间轴下面的“绘图纸外观”按钮，此时文字有呈现出来。（ 4）再次选中文字工具，在场景中输入文字，并设置文字字体、颜色、大小。然后执行“修改”菜单中的“分离”命令打散文字。（ 5）使用同样的方法，分别在时间轴的第 20 、30 、 40 帧处输入文字，并将其打散。（ 6）在时间轴的第 1 帧单击，并在“属性” 面板中的 “补间” 下拉列表框中选择 “形状”选项，以创建从第 1 帧到第 10 帧的变形过渡动画。设置完毕后，可以看到在这两帧之间产生了一条绿色的箭

15、头线。六、结论在我看来网站设计就是指在因特网上，根据一定的规则，使用Dreamweaver、Photoshop等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网路服务。 人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网路服务。因此在网页创作的时候就必须将网站的整日设计与网页设计的相关原理紧密结合起来。网站设计是将策划案中的内容、网站的主题模式、以及结合自己的认识通过艺术的手法表现出来。感谢下载载精品七、结束语通过一个学期的有关网站设计的学习我从根本上理解了什么是网站设计，也明白了怎么进行一个网站的设计及注意事项，如果自己想设计一个网站首先得创建一个自己的站点，并选择在