《个人主页设计报告定稿肖》由会员分享，可在线阅读，更多相关《个人主页设计报告定稿肖（20页珍藏版）》请在金锄头文库上搜索。
1、湖南文理学院芙蓉学院个人主页课程设计报告课 题: 个人主页课程设计 姓 名： 王 振 学 号： 09120116 同组姓名： 杨文成 专业班级： 计算机科学与技术0901班 指导教师： 任 盛 设计时间： 2012年6月13日 评阅意见：评定成绩： 指导老师签名： 年 月 日 目录一 主题介绍2二 使用工具介绍2三 设计实现的过程2 3.1 Photoshop的设计步骤3 3.2 电子相册的设计步骤3 3.3 Html的编写步骤 4 3.4 Dreamweaver的设计步骤4四 网站主要页面截图5五 核心代码8六 小结与心得体会15 参考文献16一、 主题介绍主题：本网站名为楚天电脑工作室，主
2、要是为了推广宣传湖南文理学院创业孵化基地入驻项目楚天电脑工作室。本网站主要的功能是推广和宣传工作室，故主要栏目为：工作室简介、维修实例、计算机资料、学习娱乐、招贤纳士、联系我们，六大板块；工作室简介板块主要介绍工作室的性质及工作室当前开展的业务已经工作室主旨等；维修实例板块主要展示工作室的维修实例视频，让人民更加直观的了解我们的业务；计算机资料板块主要展示一些计算机常用资料以及实用技巧等；学习娱乐板块主要展示一些在线小游戏，在娱乐中轻松学习；招贤纳士板块主要宣传工作室的招贤纳士计划，让用户更直观的了解工作室的招贤纳士计划；联系我们板块主要给出工作室的联系方式。二、使用工具介绍Photoshop
3、是世界顶尖级的图像设计与制作工具软件。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工。在表现图像中的阴影和色彩的细微变化方面或者进行一些特殊效果处理时，使用位图形式是最佳的选择，它在这方面的优点是矢量图无法比拟的。Photoshop是Adobe公司旗下最为出名的图像处理软件之一。多数人对于PHOTOSHOP的了解仅限于“一个很好的图像编辑软件”，并不知道它的诸多应用方面，实际上，Photoshop的应用领域很广泛的，在图像、图形、文字、视频、出版等各方面都有涉及。平面图像设计的发展史，可以追溯到人类发展史的源头，人类祖先用来记事的简单符号、文字，那是
4、人类最基础、最原始的平面图像设计实例。当初也许只在于表达某种具体的含义，而不包含艺术、美学的成份。伴随着人类文明的发展，人们对艺术、美的追求和探索逐渐成为发展的主流，当初记事的用途也逐渐淡化。传统的画家经过数十载的训练才掌握绘画这门技能，他们通过笔和纸的演绎描绘自己抽象的思维，表现自己对艺术、美的理解。除了艺术家之外每个人都有追求美的权利，都有一定的创作天赋和自己对生活、艺术、美的独特认识。需要长期的训练才能掌握的技能，对大多数人来说有些“可望不可及”。而电脑的出现使人们的梦想成为现实。家家乐电子相册制作系统可以将您的相片按主题进行分类管理，可以生相册文件，直接刻录到光盘，直接在光盘上运行；也
5、可以生成VCD、SVCD、DVD、MPG或AVI(MPEG-4)等格式的视频文件，刻录成VCD、SVCD或DVD光盘，方便在家庭的任意VCD或DVD机上播放。Macromedia Dreamweaver一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP 功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。Dreamweaver可以用最快速的方式将Firewor
6、ks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBE
7、dit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预
8、览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。 全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成
9、效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。 三、设计实现的过程3.1 PhotoShop的设计步骤 在这次设计中我们用Ps进行相关图片和一些文字处理。如网页头步骤如下：（1） 打开PhotoShop环境，新建一个空白文件，在选择文件/打开命令，选中素材图片。（2） 将素材添加到相应图层（3） 选用相应工具将网页头制作好并保存待用。图标文字处理如下操作：（1） 选择文件/打开命令，打开图标图片。（2） 选择图像/画布大小将画布高度增加40个像素。（3） 在图标图片中将相应的文字添加好。（4） 保存做好的图标文件待用。网页效果图制作及
10、切片操作：（1） 打开PhotoShop环境，新建一个空白文件。（2） 将先前准备好的网站素材拖到相应位置做出网站效果图。（3） 选择文件/存储为WEB和设备所用格式，在弹出界面使用切片选择工具将网站效果图切片好并存储。3.2 电子相册的设计步骤 在这次网页设计中我们运用了家家乐电子相册制作系统工具制作了一个动画图片。步骤如下：（1） 打开家家乐电子相册制作系统环境，新建一个电子相册；（2） 将参数图片、文字、封面、背景、音乐等配置好；（3） 将图片导入（4） 向时间轴插入图片（5） 调整图片出场顺序并添加介绍文字（6） 生成视频文件 3.3 Html的编写步骤在此过程中，虽然利用了Dream
11、weaver来制作的网页，但我们还采用了html来设计编写。如在此网页中对于导航栏的设计是利用html来编写的。3.4 Dreamweaver的设计步骤 由于做网页设计，加上我们还是得能力还不是很好，操作还不熟练，故采用Dreamweaver来辅助设计网页的制作，使编写时简单了许多。 1、利用表格来分布网页的布局，如分为几行几列，将哪一个表格又分为几行几列等。 2、在相应的单元格中利用Dreamweaver环境中提供的操作功能插入相应的图片、文字Flash动画等。例如：在网页的第一行内插入Flash动画，操作为在第一行中，选择三列的单元格，鼠标右击，选择“表格”合并单元格。再点击“插入”“媒体
12、”“.swf”，在弹出的对话框中，选择相应要插入的多媒体即Flash文件，点击确定，完成对Flash文件的插入。若插入图片则选择“插入/图像”命令，在选择你需要的图片。3、添加文字时可以利用Dreamweaver环境直接在单元格内编写文字。但若需要一些格式是Dreamweaver无法直接表现的则可自己编写，如需要制作表单等。对文字的字体以及其他风格可以由Dreamweaver直接设置。4、对文字和图片的链接等功能可以直接利用Dreamweaver环境中属性栏中的功能完成。如需对文字、图像进行链接则选中要进行链接的文字再在属性栏中的链接栏选择被链接的对象。对Dreamweaver的设计不用自己编写代码就能够自动生成。四、网站主要页面截图 图4.1 网站首页截图图4.2 工作室简介截图图4.3 工作室维修实例截图图4.4 工作室计算机资料截图图4.5 工作室学习娱乐截图图4.6 工作室招贤纳士截图图 4.7 工作室联系方式截图五、核心代码（主要代码）首页关键代码： img src=images/主页_04.gif width=106 heig
