网页设计实践报告.docx
- 文档编号:8806540
- 上传时间:2023-05-15
- 格式:DOCX
- 页数:5
- 大小:20.29KB
网页设计实践报告.docx
《网页设计实践报告.docx》由会员分享,可在线阅读,更多相关《网页设计实践报告.docx(5页珍藏版)》请在冰点文库上搜索。
网页设计实践报告
网页设计实践报告
网页设计实践报告 班级名称:
姓 名:
学 号:
报告目录 一、实践意义?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
3 二、实践步骤?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
3 1、网站主题?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
3 2、网站材料?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
3 3、网站规划?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
3 4、网站的制作工具?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
4 5、技术分析?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
4 三、制作网站的网页?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
6 四、设计特色?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
9 五.心得体会?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
9 2 首页一.实践意义:
网页设计与制作综合实训是教学过程中重要的实践性教学环节.它是根据专业教学计划的要求,在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现理论知识向操作技能的转化,是对理论与实践教学效果的检验,也是对学生综合分析能力与独立工作能力的培养过程.因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素质有着重要的作用。
西安立远新材料科技开发有限公司成立于2000年8月,其前身为西安立远商贸有限责任公司,成立于1995年8月,西安立远商贸有限责任公司自成立之日起便致力于胶粘技术的市场开发与推广工作,先后作为美国3M公司、德国TESA公司在中国西北地区的特约经销商,为时5年之久。
正是基于对世界先进胶粘技术的广泛了解和对胶粘市场的充分接触,公司于2000年8月决定成立具有独立科研开发能力和自主生产能力的实业公司-西安立远新材料科技开发有限公司,主力开发与胶粘技术有关的新型工业材料和产品,公司注册资金200万元人民币,员工队伍20多人,其中产品开发工程师3人,生产工程师2人,生产管理人员2人,并先后与西北工业大学高分子材料系,西安交通大学化学工程系等科研院校建立起紧密联系,为公司储备了大量先进技术与科研力量。
公司在成立的几年中,先后为西安大唐电信股份有限公司CDMA手机研制和开发出手机机体保护材料,手机硅橡胶按键粘接材料,并承接了该公司手机主板保护材料的开发与研制工作。
同时我公司还参与了西安西沃客车有限公司大客车高温面漆保护材料,咸阳偏转集团耐高温缠绕胶带,西门子信号有限公司防伪甄别材料,咸阳彩虹显示器件股份有限公司74cmPF平面保护膜等生产原材料国产化工作,并取得了可喜成绩,在满足生产工艺标准的前提下大幅降低了生产厂商的生产成本,得到了厂家的好评。
为了不断提高加工技术能力和生产能力,公司先后投入150多万元进行设备技术改造和增加新设备,使得公司技术工艺水平得到进一步完善和提高。
公司在这短短的几年里所取得的成绩,完全有赖于新老顾客对我们的信任与支持,也更加激励我们不断完善自己,加强公司内部管理,优化公司外部环境,以便更好的答谢广大顾客对我们的厚爱。
二、实践步骤:
1、网站主题 我的网站的主旨在于从各个方面全面的介绍我自己,展示自己,包括我的个人资料、个人相片和爱好。
网站里的每一个网页都有统一的风格,每一个网页的主题色彩都是浅蓝色,用以展示自己性格的效果。
最重要的是做出自己的风格,给浏览者好的欣赏感受。
西安立远新材料科技开发有限公司 供应产品联系方式公司档案公司相册产品动态在线询价 3 2、网站材料 主要在网站上搜集所要的网页信息,包括图片、文字、相关的新闻。
同时,查询相关的书籍、XX和素材光盘等方式收集所需的文字资料,图象资料,flash动画和网页特效等,用以得来更加具有说服力的页面。
要想做好自己的网站,能够给浏览者好的欣赏感受,就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。
精选自己收集的材料,作为自己制作网页的素材,这样就可以做好一个好的网站。
3、网站规划 我的网站共有7个频道:
首页、供应产品、公司档案、公司相册、产品动态、在线询价和联系方式。
每一个页面用统一的背景图片,以保证网站统一的页面风格。
如下图:
网站整体色调为浅蓝色,然后点缀其他不同的颜色相配,突出主题,颜色没有过多,过杂,用以避免给人一种杂乱的感觉。
版面设计十分灵活,根据各部分内容的不同适当的自设计。
网页布局主要用框架和表格,用框架定位内容的大体结构,再用表格具体定位。
位子的设计也是重要的一个部分,根据具体内容决定字体风格,相同的风格多次调用是用css设计一个样式,以保证随时、准确的调用。
另外,为了网页布局的协调,我加入了适当的flash透明动态图片,用以达到更好的浏览效果。
4、网站的制作工具 做网页时主要使用的是Deamweaver。
另外,为了处理网页中的其他元素,还使用了fireworks等软件。
5、技术分析建立布局 ①点击“ALT+F6”键,进入布局模式,插入布局表格。
建立一个大概的布局。
②使用背景图片:
选中该项,按浏览可以插入一幅准备好的图片作为表格的背景,因为图片是以平铺的形式作为表格背景,所以表格大小和图片尺寸都要控制好。
网页中的图像 图像传输是WWW的真正魅力所在,它与文字相比具有显著的优点:
一是直观,人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度;二是能更清楚地表达细节内容。
正是于这些优点,所以在进行网页设计时图像很受欢迎。
如果网页做得像一幅风景画,浏览者一定会流连忘返。
在网页中插入图像 利用Dreamweavercs4可以方便地在网页中插入图像,还可以设置图像边框、大小、和位置,并且可以直接对图像进行编辑。
①新建一个空白网页,把光标定位在网页的开始位置。
②打开“工具”菜单,选择“图片”菜单项,在子菜单中选择“来自文件”菜单项,或者单击工具栏中的图片工具图标,弹出一个“图片”对话框。
③在此对话框中单击“浏览”按钮,出现一个“选择文件”对话框。
④在“选择文件”对话框的文件列表中选择某个图像文件,然后单击“确定”按钮,或直接双击该图像文件,该图像即被加入到网页中。
在网页中插入图像后我 4 们就可以对图像的各种属性进行设置了。
设置图像大小 设置图像缩放比例就是将图像设置为大小可以按比例变化,与浏览器的大小成一固定比例,这样在不同大小的浏览器窗口里图像都能正常的显示外观。
设置图像缩放比例的步骤如下:
①选中网页中的图像,单击鼠标右键,在弹出的快捷菜单里,选择“图像属性”菜单项,弹出一个“图像属性”对话框 ②在“大小”栏中选中“指定大小”复选框,同时选中“宽度”和“高度”下面的“百分比”单选按钮,然后在“宽度”和“高度”栏里输入想显示的比例,单击“确定”完成设置。
外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置,水平间距是指图像与周围元素在水平方向的间距,以象素为单位;垂直间距指图像与周围元素在垂直方向的间距。
编辑网页中的图像 在DreamweaverCs4中,可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑,编辑功能主要有:
图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。
另外,为了使图片更符合要求,我们还在photoshopCs3中队所用的图片进行了处理,使得图片看起来更加精细美观,符合我们的主题要求。
使用背景图像 使用背景图像与使用背景色不同,使用背景色只将网页的背景用某种颜色填充,而使用背景图像则是将网页的背景用图像平铺。
这样做可以使制作的网页更美观好看。
网页中使用背景图像的具体步骤如下:
①新建一个空白网页。
②单击鼠标右键,弹出的快捷菜单里选“网页属性”,弹出“网页属性”对话框③开“背景”选项卡。
④在“背景”选项卡的“格式”栏中选中“背景图片”复选框,然后单击下面的“浏览”按钮,出现一个“选择背景图片”对话框。
⑤在“选择背景图像”对话框中单击“浏览文件”按钮,出现一个“选择文件”对话框。
⑥在“选择文件”对话框的文件列表中选择图像文件,单击“确定”按钮。
这样,所选图片将作为整个网页的背景,如果在第4步时同时选中“水印”复选框,背景图片将显示为特殊的水印效果,当网页滚动时,背景不动,只有网页内容滚动, 5
产生一种透明层的效果,非常吸引人。
设置链接 选中图片或者文字,在下面的链接属性中输入所要连接到的地址,同时,下方的目标属性被激活,输入blank设置成在新窗口中打开网页。
我们设置了链接本站点的网页页面,同时也连接了外网,使得大家访问页面时能够查询更多详细的信息,方便用户查询。
设置图片滚动 使图片在页面连续滚动出现,其中某页代码如下:
cellspace=\ cellpadding=0width=\ border=0> 三、制作网站的网页 素材、风格、模板都设计好以后,下一步就是具体的制作网页。
制作网站时,首先要做的就是站点的规划,建立一个本地站点”lixiaolian”,建立的各个页面都应该放在本地站点中,在网页制作时所需的各个元素都进行了统一的管理,建立统一的文件夹放同一类型的文件,我在制作时建立了“photos”文件夹来存放图片。
同时,于“相册”页面中的信息太多,于是建立了一个专门的文件夹存放相册信息,网页中的css样式文件也应统一管理,做到有条不紊,我设计的网站的首页如下图:
6 首页内容精彩丰富,简洁明快,语言风趣,通俗易懂。
页面可爱清爽。
首页主要是导航作用。
首页制作时,时刻考虑着网页的基本原则:
统一,连贯,分割,对比及和谐的原则,内容统一,都是为了主题服务,一个网站强调的就是一个整体,只有围绕一个统一的目标所做的设计才是成功的;连贯,页面之间关系连贯,统成一体;每版内容都自成一体,颜色各异,便于浏览;整个网页有动有静,颜色不同,形成对比,不呆板,富有生气;颜色各异,但又不同之中又相同,浑然一体。
用以给浏览者好的视觉享受。
而且制作过程中,不忘以下原则:
简洁实用:
这是非常重要的,网络特殊环境下,尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的,所以要去掉所有的冗余的东西。
使用方便:
同第一个是相一致的,满足使用者的要求,网页做得越适合使用,就越显示出其功能美;页面用色协调,布局符合形式美的要求:
布局有条理,充分利用美的形式,是网页富有可欣赏性,提高档次。
当然雅俗共赏是人人都追求的。
导航栏我用层插入相关链接的菜单栏,一方面为了布局合理,弥补左下角的空缺,另一方面给浏览者提供放表的导航,点击其中任意一个都会连接到其他网页。
代码如下:
西安立远新材料科技开发有限公司网站 7 主页的页面整体美观漂亮。
最后,还要制作各个页面的链接,把整个网页链接起来,形成一个统一的整体,方便浏览者进行各个页面间的跳转。
单击链接到另一个网页 单击链接到另一个网页 8 6、上传测试网站 网页制作完毕以后,要进行反复的测试,保存后在IE浏览器上反复运行自己的网站,用以发现设计中的缺陷并及时改正。
四.设计特色 我觉得我的网页设计的最大特点就是色彩淡雅,布局协调,结构清晰。
观之,给人以清丽,纯朴的感觉。
另外,设计过程中使用了大量的网页特效,如:
层效果、flash特效等。
五.心得体会 第一:
我非常感谢学校给了我这次制作网页的机会,通过这次实训,我学到了很多有价值的东西。
我独立的完成了网站设计的全过程,把设计中散乱的网页链接成框架体系,使平时学到的知识点有了很高的提高,并且合理的在试验中进行了实践。
第二:
在这次实验的过程中,我搜集了大量的素材和网页设计的技术技巧方面的书,扩大了知识面,给我在以后的设计过程中能博采众长,制作出好的网页打下了基础。
第三:
我现在已经掌握文档排版标记的使用熟练使用及其属性设置、特殊符号;第四:
我现在已经熟练使用超级链接,合理使用列表;第五:
我现在已经掌握图片标记及相关属性的使用、了解表格标记制作表格的方法。
最后,我感受最深的是:
要想做好一个网站,素材和技能都十分重要。
好的素材需要多方查找资料,可以从图书、网站和新闻上查找。
好的技能需要不断的实践,经常锻炼做网页。
如果拥有好的素材和精湛的技能就可以做出精湛的网页。
9
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 实践 报告