网页设计实训报告

网页设计网页设计实训报告实训报告 课题名称：课题名称： 张瑞希张瑞希 PersonalPersonal PagePage 专专 业：业： 计算机网络技术计算机网络技术 班班 级：级： 网络网络 S101 学学 号：号： 01 姓姓 名：名： 魏洪魏洪 指导教师：指导教师： 雷学智雷学智 二二 0 一一年一一年 十二十二 月月 二十二二十二 日日 目目 录录 一、课程设计目的一、课程设计目的 .1 二、软件、硬件的需求二、软件、硬件的需求.1 三、使用的主要技术三、使用的主要技术.2 四、课程设计内容四、课程设计内容 .3 五、课程设计步骤五、课程设计步骤 .3 六、结论六、结论.10 七、结束语七、结束语.10 成绩评定标准 考核、评价项目考评人考核内容得分 实训的 平时考核 对实训期间的出勤情况、 实训态度、职业道德素质 教师 学生 职业素质、实训态度、效率 观念、协作精神（20 分） 基本技能站点建立，网站的可用性教师 正确建立网站站点预览无错 误（10 分） 网站效果根据网站效果评定成绩教师 网站整体效果、布局等 （20） 网站制作 技巧使用 主要是针对制作网站过程 中灵活应用网站制作技术 教师 链接、媒体、样式、模板、 多媒体、特效等的综合应用 （20 分） 、实 训评 价 实训文档 根据实训设计文档和实训 报告评定成绩 教师 表达能力、文档写作能力、 文档的规范性（30 分） 获奖加分 根据学生参加网页设计大 赛获奖情况给予相应加分 有关 专家 创新能力、自主学习能力、 综合素质（10 分） 合计 教师评语： 成绩： 教师： 年 月 日 1 一、课程设计目的一、课程设计目的 本学期，我们所学习的网站设计，主要由 Dreamweaver、Photoshop、Flash 三部组成。 通过我建立的是我个人的网站，充分的将我个人的信息展现出来，也将加强我对这三种软 件使用的技能有了很大的提高。 利用 Dreamweaver 怎样来布局网页的格式、利用 Photoshop 处理图片、利用 Flash 制 作动画。将三者完美的结合制作网页。 经过半学期网页设计学习，我基本掌握了设计网页的步骤，懂得了怎样运用设计网页 所需的各个软件、以及各种技巧。在学习中我体会到了建立网页的趣味，并且吸引了我， 而建立一个属于自己网页也成了我学习的目标和动力，终于等到了这次机会，可以让我证 明自己所学的知识是有用的。所以我设计的网页是一个自己主页，可以发表自己喜欢的日 志，可一上传相片，还可以收藏自己爱听的音乐，以这些功能为主建立一个自己空间与大 家共同分享。 二、软件、硬件的需求二、软件、硬件的需求 2.1Dreameweaver 2.1.1 硬件环境 处理器：Intel Pentium4、Intel Centrino、IntelXeon 或 Intel Core Duo 处理器 内存：512MB RAM。 硬盘空间：至少需要 1GB 空闲的磁盘空间。 显示器：1024768 分辨率的显示器。 外部设备：DVD-ROM。 2.1.2 软件环境 操作系统:Microsoft Window XP(带有 Service Pack2)或 Windows Vista Home Premium、Business、Ultimate 或 Enterprise(32 位或 64 位版本)。 浏览器：Microsoft Internet Explorer 6.0 以上，或者更高潘本的 Netscape Navingator 浏览器。 2 2.2 Photoshop 2.2.1 硬件环境 处理器：Intel Pentium4、Intel Centrino、IntelXeon 或 Intel Core Duo 处理器 内存：512MB RAM。 硬盘空间：至少需要 1GB 空闲的磁盘空间。 显示器：1024768 分辨率的显示器，16 位显卡。 外部设备：DVD-ROM。 2.2.2 软件环境 操作系统:Microsoft Window XP(带有 Service Pack2)或 Windows Vista Home Premium、Business、Ultimate 或 Enterprise(32 位或 64 位版本)。 浏览器：Microsoft Internet Explorer 6.0 以上，或者更高潘本的 Netscape Navingator 浏览器。 2.3 Flash 2.3.1 硬件环境 处理器：Intel Pentium4、Intel Centrino、IntelXeon 或 Intel Core Duo 处理器 内存：512MB RAM。 硬盘空间：至少需要 1GB 空闲的磁盘空间。 显示器：1024768 分辨率的显示器，16 位显卡。 外部设备：DVD-ROM。 2.3.2 软件环境 操作系统:Microsoft Window XP(带有 Service Pack2)或 Windows Vista Home Premium、Business、Ultimate 或 Enterprise(32 位或 64 位版本)。 浏览器：Microsoft Internet Explorer 6.0 以上，或者更高潘本的 Netscape Navingator 浏览器。 三、使用的主要技术三、使用的主要技术 1：使用 Dreameweaver 网页布局。 2：使用 Dreameweaver 插入图片，插件，歌曲，动画。 3 3：使用 Photoshop 处理图片。 4：使用 Photoshop 制作 logo。 5：使用 Flash 制作动画。 四、课程设计内容四、课程设计内容 我制作的网页主要是以韩国女星张瑞希为主题，详细的介绍了她的个人信息，最新动 态等可以全面了解她的内容，在主页上的导航条上我做了五个超级链接，分别是“主页” ， “个人资料” ， “最新动态” ， “精彩写真” ， “影片赏析” ，在主页页面上还有关于张瑞希曾出 演的电视剧热门图片等相关链接五个不等，每个页面的内容都包含了大量的图片及文字信 息等。本学期最重要的组成部分“留言板” ，也在我所制作的网页中有所体现。 在“个人信息”页面中主要介绍了张瑞希的基本资料与个人演艺经历，讲述了她从小 就踏上了演艺圈这条路；“最新动态”页面中向大家展示了张瑞希的最新动态；“精彩写 真”页面中主要是以图片的方式向大家展现出来的，大量的精彩图片以 Flash 的形式有所 体现；“影片赏析”页面中详细的叙述了电视剧妻子的诱惑中女主角有了翻天覆地变 化的第 48 集电视剧，同时也插入了相关视频等。 五、课程设计步骤五、课程设计步骤 设计流程图 主页 个人资料 最新动态 精彩写真 影片赏析 留言板 妻子的诱惑 妇产科的女医生 人鱼小姐 乞丐王子 4 5.1 建立站点 （1）一个站点就是系列文件的组合，而这些文件通常位于一个特定的文件夹中，所以 在创建网站时就需要制指定该文件夹。在 F 盘根目录下，新建一个名为的文件夹。 （2）启动 Dreamweaver CS3，在“开始页”的“新建”选项组中单击“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 等工具制作的用于展示特定内容的相关网页的集合。简单地说， 网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯， 或者利用网站来提供相关的网路服务。人们可以通过网页浏览器来访问网站，获取自己需 要的资讯或者享受网路服务。因此在网页创作的时候就必须将网站的整日设计与网页设计 的相关原理紧密结合起来。网站设计是将策划案中的内容、网站的主题模式、以及结合自 己的认识通过艺术的手法表现出来。 七、结束语七、结束语 通过一个学期的有关网站设计的学习我从根本上理解了什么是网站设计，也明白了怎 么进行一