个人主页设计报告定稿肖

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的设计不用自己编

13、写代码就能够自动生成。四、网站主要页面截图 图4.1 网站首页截图图4.2 工作室简介截图图4.3 工作室维修实例截图图4.4 工作室计算机资料截图图4.5 工作室学习娱乐截图图4.6 工作室招贤纳士截图图 4.7 工作室联系方式截图五、核心代码（主要代码）首页关键代码：     维修实例关键代码： - !- 此页面上的内容需要较新版本的 Adobe Flash Player。 计算机资料关键代码：八、小结与心得体会通过本课程的训练，使学生掌握HTML语言的语法结构，能够使用HTML语言编写静态网页，控制网页中的文字，图片，超级链接，表格，表单，框架等，能够使用HTML语言

14、实现移动的文字，制作多媒体页面，能够读懂复杂网页的源代码。熟练使用网页设计工具Frontpage、Dreamweaver MX，能够使用Dreamweaver MX设计网页的框架，导航条，设置文字，图片，超级链接，滚动文字，弹出窗口的属性，能够使用Dreamweaver MX设计出比较复杂的网页，建立小型网站。熟悉Flash MX的绘图，帧，层，属性面板的使用，能够使用Flash MX制作简单的动画，设计网页的FLASH标题。这次试验中我学习到了很多使用的东西，也充分了解了Dreamweaver这个软件的强大，对学习了这一个星期的课程也有了更深入的理解。由于有了电子商务和Flash、Photo

15、shop等课程作为基础，在制作这次的个人主页设计如首页，Flash动态图片和Ps图片、页面链接等步骤进行的还是比较顺利的，经过一个星期的辛苦努力，终于完成了我的主页的制作。在这段时间里，一方面，我尝试着将课本所学的知识运用到制作中，另一方面，我有时刻在网上查找资料，寻找自己所需要的知识点，学习到了很多有用的东西，在这过程中，我对网页的设计上有了更深的体会，对于这一领域，学到的只知识多了，发现我自己所了解的知识反而少了。在这次网页设计过程中运用了Flash,Photoshop对图像进行了修改与制作，如利用Flash工具将经过Ps处理过的图片制作成一个简单的动画等。再经过对代码的反复测试与修改最终

16、完成了这一网页设计网站，心里有了收获的欣喜，有了小小的成就感，这让我从心底里的感谢这次设计课程让我有了实践的机会，让我对自己对网页设计有了些信心，有了希望。加上这次课程让同学们互相讨论，这也增强了同学之间的交流。参考文献1、 洪锦魁、蔡昌均编著 HTML 西安：世界图书出版西安公司，20002、 朱顺泉编著 电子商务信息系统分析与设计 北京：清华大学出版社，20073、 郭发明编著 Flash CS5动画制作实践从入门到精通 北京：人民邮电出版发行，20104、 杨波编制 Photoshop5.0/5.5/6.6/7.0 北京：北京希望电子出版社，2003digging; has dual f

17、unctions of retaining, watertight; typically more economical construction without vibration, noise, less pollution, squeezing slightly, so construction in the downtown area even more advantages. Disadvantages of cement-soil retaining wall: the first is the relatively large displacement, especially i

18、n the pit length is large, this may be done between the piers, arches and other measures to limit the displacement is too large, followed by thick, only used in position and the surrounding environment allowing the red line, and in the construction of cement-soil mixing piles to avoid affecting the

19、surrounding environment. 2.1.2 soil-nail wall is a type of slope stability of soil nailing wall support, its role and passive retaining walls are different, it is voluntarily fixing effect, increase the stability of slopes, excavation of Foundation pit slope stability. Soil-nail wall is better soil areas, applied along the northern part of North China and East China, also in southern China, and some has been used to hang 10m deep Foundation pit, stability, construc