网页设计实训报告

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

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

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

4、求2.1 Dreameweaver2.1.1 硬件环境处理器：In tel Pen tium4 、In tel Ce ntrino、In telXeo n 或 In tel Core Duo 处理器内存：512MB RAM硬盘空间：至少需要1GB空闲的磁盘空间。显示器：1024 X 768分辨率的显示器。外部设备：DVD-ROM2.1.2 软件环境操作系统:Microsoft Window XP（ 带有 Service Pack2） 或 Windows Vista Home Premium Business、Ultimate 或 Enterprise（32 位或 64 位版本）。浏览器：Mic

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

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

7、rosoft Window XP（带有 Service Pack2） 或 Windows Vista HomePremium Business、Ultimate 或 Enterprise（32 位或 64 位版本）。浏览器：Microsoft In ternet 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网页布局创建表格执行“插入记录”菜单中的“表格”命令，或在“插入”栏的“常用”类别中单

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

12、性”面板中，单击“图像大小”按钮或执行“修改”菜单中的“画布”命令，即可弹出“图像大小”对话框在“像素尺寸”选项组中，选择合适的度量单位（像素、英寸、厘米）并输入新的宽度 和高度尺寸值，即可重新设置工作区的宽、高度数值。関稼大小博盂E寸33E像素* "1丁V 取立方回酬重新职祥®rar页面驭肖图七34图像的储存需要存储的图像时，直接执行“文件”菜单中的“保存”命令，也可以按快捷键Crtl+S。如果这个图像是刚刚新建的空白文件，而且是第一次进行储存，此时会弹出“另存为”对话框，在对话框中选择保存的路径并进行输入文件名，然后单击“保存”按钮，图像文档将自 动以.png格式储存。

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

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