网页设计实训报告

1、word. 网页设计网页设计 实训报告实训报告 课题名称：课题名称： 张瑞希张瑞希 PersonalPersonal PagePage 专专 业：业： 计算机网络技术计算机网络技术 班班 级：级： 网络网络 S101 学学 号：号： 01 姓姓 名：名： 魏洪魏洪 指导教师：指导教师： 雷学智雷学智 二二 0 一一年一一年 十二十二 月月 二十二二十二 日日word.目目 录录一、课程设计目的一、课程设计目的 .1二、软件、硬件的需求二、软件、硬件的需求.1三、使用的主要技术三、使用的主要技术.2四、课程设计内容四、课程设计内容 .3五、课程设计步骤五、课程设计步骤 .3六、结论六、结论.10

2、七、结束语七、结束语.10word.成绩评定标准考核、评价工程考评人考核内容得分实训的平时考核对实训期间的出勤情况、实训态度、职业道德素质教师学生职业素质、实训态度、效率观念、协作精神20 分根本技能站点建立，网站的可用性教师正确建立网站站点预览无错误10 分网站效果根据网站效果评定成绩教师网站整体效果、布局等20网站制作技巧使用主要是针对制作网站过程中灵活应用网站制作技术教师链接、媒体、样式、模板、多媒体、特效等的综合应用20 分、实训评价实训文档根据实训设计文档和实训报告评定成绩教师表达能力、文档写作能力、文档的标准性30 分获奖加分根据学生参加网页设计大赛获奖情况给予相应加分有关专家创新

3、能力、自主学习能力、综合素质10 分合计教师评语： 成绩： 教师： 年 月 日word.word.一、课程设计目的一、课程设计目的本学期，我们所学习的网站设计，主要由 Dreamweaver、Photoshop、Flash 三部组成。通过我建立的是我个人的网站，充分的将我个人的信息展现出来，也将加强我对这三种软件使用的技能有了很大的提高。利用 Dreamweaver 怎样来布局网页的格式、利用 Photoshop 处理图片、利用 Flash 制作动画。将三者完美的结合制作网页。经过半学期网页设计学习，我根本掌握了设计网页的步骤，懂得了怎样运用设计网页所需的各个软件、以及各种技巧。在学习中我体会

4、到了建立网页的趣味，并且吸引了我，而建立一个属于自己网页也成了我学习的目标和动力，终于等到了这次时机，可以让我证明自己所学的知识是有用的。所以我设计的网页是一个自己主页，可以发表自己喜欢的日志，可一上传相片，还可以收藏自己爱听的音乐，以这些功能为主建立一个自己空间与大家共同分享。二、软件、硬件的需求二、软件、硬件的需求2.1Dreameweaver 2.1.1 硬件环境处理器：Intel Pentium4、Intel Centrino、IntelXeon 或 Intel Core Duo 处理器内存：512MB RAM。硬盘空间：至少需要 1GB 空闲的磁盘空间。显示器：1024768 分辨率

5、的显示器。外部设备：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 浏览器。word.2.2 Photoshop 2.2.1 硬件环境处理器：Intel Pentium4、Intel Centrino、IntelXeon 或 Intel Core

6、 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 硬件环

7、境处理器：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

8、.0 以上，或者更高潘本的 Netscape Navingator 浏览器。三、使用的主要技术三、使用的主要技术1：使用 Dreameweaver 网页布局。2：使用 Dreameweaver 插入图片，插件，歌曲，动画。word.3：使用 Photoshop 处理图片。4：使用 Photoshop 制作 logo。5：使用 Flash 制作动画。四、课程设计内容四、课程设计内容我制作的网页主要是以韩国女星张瑞希为主题，详细的介绍了她的个人信息，最新动态等可以全面了解她的内容，在主页上的导航条上我做了五个超级链接，分别是“主页，“个人资料， “最新动态， “精彩写真， “影片赏析，在主页页面上

9、还有关于张瑞希曾出演的电视剧热门图片等相关链接五个不等，每个页面的内容都包含了大量的图片及文字信息等。本学期最重要的组成局部“留言板，也在我所制作的网页中有所表达。在“个人信息页面中主要介绍了张瑞希的根本资料与个人演艺经历，讲述了她从小就踏上了演艺圈这条路；“最新动态页面中向大家展示了张瑞希的最新动态；“精彩写真页面中主要是以图片的方式向大家展现出来的，大量的精彩图片以 Flash 的形式有所表达；“影片赏析页面中详细的表达了电视剧 妻子的诱惑 中女主角有了翻天覆地变化的第 48 集电视剧，同时也插入了相关视频等。五、课程设计步骤五、课程设计步骤设计流程图word.主页个人资料最新动态精彩写真

10、影片赏析留言板妻子的诱惑妇产科的女医生人鱼小姐乞丐王子5.1 建立站点1一个站点就是系列文件的组合，而这些文件通常位于一个特定的文件夹中，所以在创立网站时就需要制指定该文件夹。在 F 盘根目录下，新建一个名为的文件夹。2启动 Dreamweaver CS3，在“开始页的“新建选项组中单击“Dreamweaver 站点，或者在主窗口中执行“站点菜单中的“新建站点命令，即可翻开站点定义向导对话框。如图一3切换“高级选项卡，在左边的“分类列表框中选中“本地信息选项，然后在右边的“本地信息选项组中设置以下选项。如图二在“站点名称文本框中输入站点名称，站点名称可以是任意字符，但不能包括“？、*、/、“等

11、等特殊字符。在“本地根文件夹文本框右侧丹迪文件夹按钮，然后定位到事先创立的文件夹中选中“启动缓存复选框，以便创立现有文件的缓存记录，从而可以在移动、重命名或删除文件时加速更新超级连接。4单击“确定按钮，创立完毕，系统自动返回主窗口，此时在“文件面板中显示出已创立的站点。word.图一word.图二5.2 网页布局创立表格执行“插入记录菜单中的“表格命令，或在“插入栏的“常用类别中单击按钮，翻开“表格对话框，如图三word.图三 布局视图排版使用布局视图，首先必须切换到布局视图中，其操作方法是：执行“查看菜单中的“表格模式|“布局模式命令，此时“文档窗口的顶部会出现标有“布局模式的条，然后即可创

12、立布局表格及添加布局单元格。如图四图四5.3 处理图片 画布颜色word.在“属性面板中，单击“画布区拾色器，或执行“修改菜单中的“画布|“画布颜色命令，即可重新设置新的画布颜色。如图五图五 画布大小在“属性面板中，单击“画布大小按钮或执行“修改菜单中的“画布|“画布大小命令，即可弹出“画布大小对话框。如图六图六 图像大小在“属性面板中，单击“图像大小按钮或执行“修改菜单中的“画布|“图像大小命令，即可弹出“图像大小对话框在“像素尺寸选项组中，选择适宜的度量单位像素、英寸、厘米并输入新的宽度和高度尺寸值，即可重新设置工作区的宽、高度数值。 word. 图七 图像的储存需要存储的图像时，直接执行

13、“文件菜单中的“保存命令，也可以按快捷键Crtl+S。如果这个图像是刚刚新建的空白文件，而且是第一次进行储存，此时会弹出“另存为对话框，在对话框中选择保存的路径并进行输入文件名，然后单击“保存按钮，图像文档将自动以.png 格式储存。5.4 插入歌曲在“常用的模式下，单击，单击“插件，弹出对话框如图八，选择指定歌曲，单击“确定既可。图八word.5.5 插入图片在“常用的模式下，单击，单击“插件，弹出对话框如图九，选择指定图片，单击“确定既可。图九5.6 制作动画 制作文字动画1新建一个文件，执行“修改|“文档命令，设置文档的背景颜色。2选中文字工具，在场景中输入文字，并设置文字字体、颜色、大

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

15、后，可以看到在这两帧之间产生了一条绿色的箭头线。word.六、结论六、结论在我看来网站设计就是指在因特网上，根据一定的规那么，使用Dreamweaver、Photoshop 等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网路效劳。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网路效劳。因此在网页创作的时候就必须将网站的整日设计与网页设计的相关原理紧密结合起来。网站设计是将筹划案中的内容、网站的主题模式、以及结合自己的认识通过艺术的手法表现出来。七、结束语七、结束语通过一个学期的有关网站设计的学习我从根本上理解了什么是网站设计，也明白了怎么进行一个网站的设计及考前