网站制作及心得

时间:2024.3.15

  

科技学院20##届网站开发技术论文

网站制作及心得

学科专业: 国际经济与贸易

指导教师:    赵元媛                  

学生姓名:    蔡  超                 

学生学号: 072004110913 

中国贵州贵阳

20##年6月

目  录

目录…………………………………………………………………………… ……………2

摘要………………………………………………………………………… ………………3

1.绪论…………………………………………… ………   …… ……………………4

1.1设计思想………………………………………………………………………………4

1.2网页制作软件的选用及介绍…………………………………………………………4

1.3静态网页………………………………………………………………………………5

1.4网页制作的基本原则…………………………………………………………………5

2.网站的内容及规划……………………………………………… …………………6

2.1网站风格………………………………………………………………………………7

2.2主页设计………………………………………………………………………………7

3.详细设计………………………………………………………………………………8

3.1创建站点………………………………………………………………………………8

3.2各种素材的插入………………………………………………………………………10

3.3 CSS的应用……………………………………………………………………………11

总结…………………………………………………………………………………………13

致谢…………………………………………………………………………………………14

参考文献……………………………………………………………………………………15

摘  要

学习就是为了获得知识,现在我们学习了网页设计,当然就是要能做一个精美的网页。在此次网页设计中,我更加的了解网页设计工具强大的功能和更好的使用它。诚然,此次设计的个人网页,一方面是为了完成我的作业,但更重要的是把我所学到的东西用在具体的实践之中,所以,这次设计的目的也是要我更好的掌握和使用网页设计工具和技术,以便提高对网页知识的更深层了解。最要的一点是,把我们在书本上学到的知识充分运用到此次设计之中。使我们的在书上学到的东西不仅仅停留在表面上,把这些东西都用在所要做的网页上面。以达到老师要求的效果和学以致用。我这次制作的网站是关于马自达汽车的,为了符合设计需求,结合各大网站内容及形式而建,包括首页、公司简介、新闻动态、汽车音响、精品专区、车型导购六大板块。创建本站的使用工具主要为:Dreamweaver8、flash8,大部分素材都来源于网络。

关键词:网页设计              HTML语言        Dreamweaver   Flash8

1.绪论

Internet是目前世界上最大的计算机互联网络,它遍布全球,将世界各地各种规模的网络连接成一个整体。作为Internet上一种先进的,易于被人们所接受的信息检索手段,World Wide Web(简称WWW)发展十分迅速,成为目前世界上最大的信息资源宝库。据估计,目前Internet上已有上百万个Web站点,其内容范围跨越了教育科研、文化事业、金融、商业、新闻出版、娱乐、体育等各个领域,其用户群十分庞大,因此,建设一个好的Web站点对于一个机构的发展十分重要。近年来,随着网络用户要求的不断提高及计算机科学的迅速发展,特别是数据库技术在Internet中的广泛应用,Web站点向用户提供的服务将越来越丰富,越来越人性化。WWW使在全球范围内进行几乎是实时的交互性多媒体信息交流成为可能。与许多正在涌现的技术不同,WWW相当廉价,并且是迄今为止最强大的信息交流工具。对于一个人来说,它没有理由不在Internet上展示自己。由于我们对网页设计也只是初步的学习,从来没用它开发过一个具体的项目,所以我在开发本网站过程中是要不断的翻阅一些书籍以及观看教程来丰富我的这方面的知识。有时也有很多的困难个人都无法解决,在此我很感谢赵老师和同学,是他们在我需要帮助的时候给了我指导。

1.1设计思想

我所制作的网站是关于马自达汽车的,用简约而不见单的页面,靠着各种不花哨的颜色搭配,给人一种严谨而又热情的感觉,体现了马自达的精神。网页的图片生动,可以边享受音乐,边浏览马自达汽车各系列的风采,以及配置。

1.2网页制作的软件的选用及介绍

    在制作这个网站过程中,所用到的软件包括Dreamweaver8和Flash8。Dreamweaver8是著名的“所见即所得”的可视化网站开发工具,是国内外普遍应用的专用网页设计软件。在国内,它被称为“织梦者”,它不仅提供了强大的网页编辑功能,而且提供了完善的站点管理机制,可以说,它是一个集网页创作和站点管理两大利器于一身的超重量级创作工具,它能很好的将所有素材完美的组合在一起。

Dreamweaver8优势:

1、所见即所得与兼顾HTML源代码两种模式相互切换编辑。

2、不仅有同类软件的所有功能,而且有自身的许多出色设计理念。

3、无需手写代码,就能轻松创建各种动态效果。

4、有强大的自定义及扩展功能,提高了工作效率。

5、支持跨浏器和层叠样式表。

6、Dreamweaver8最新版本,采用多种先进技术,能够高效地创建极具表现力和动感效果的网页。

而Flash是交互式矢量图和Web动画的标准。网页设计者使用Flash能创建漂亮的、可改变尺寸的、以及极其紧密的导航界面、技术说明以及其他奇特的效果。我应用Flash8主要是制作一些flash动画,以美化网页。

1.3静态网页

静态网页是相对于动态网页而言,是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦,适用于一般更新较少的展示型网站。静态网页的特点简要归纳如下: (1)静态网页每个网页都有一个固定的URL,且网页URL以.htm、.html、.shtml等常见形式为后缀,而不含有“?”; (2)网页内容一经发布到网站服务器上,无论是否有用户访问,每个静态网页的内容都是保存在网站服务器上的,也就是说,静态网页是实实在在保存在服务器上的文件,每个网页都是一个独立的文件; (3)静态网页的内容相对稳定,因此容易被搜索引擎检索; (4)静态网页没有数据库的支持,在网站制作和维护方面工作量较大,因此当网站信息量很大时完全依靠静态网页制作方式比较困难; (5)静态网页的交互性较差,在功能方面有较大的限制。而静态网页的使用语言是HTML(超文本标记语言),对于我这种刚开始涉及网页制作的人来说,制作起来容易上手些。

1.4网页制作的基本原则

凡事皆有原则,网页制作当然也不例外。一个优秀的页面应考到以下三个方面:内容和页面美感。首先,内容处于第一位,网页的目的就是为了表达一定的内容,大多数人访问网页就是想要找到自己想要的东西,所以,网页的内容必须跟主题紧扣,而我制作的网站是关于马自达的,所以我所收集的内容是跟马自达汽车紧紧相扣的。其次,在确定内容的基础上,要注意页面的美感。 色彩是人的视觉最敏感的东西。主页的色彩处理得好,可以锦上添花,达到事半功倍的效果。色彩总的应用原则应该是“总体协调,局部对比”,也就是:主页的整体色彩效果应该是和谐的,只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上,可以根据主页内容的需要,分别采用不同的主色调。因为色彩具有象征性,例如:嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色,例如:军警的橄榄绿,医疗卫生的白色等。色彩还具有明显的心理感觉,例如冷、暖的感觉,进、退的效果等。而我的主页主要是以灰色背景为基调,插入各种图片,flash动画,使整体效果很搭配。而内页采用了白色和灰色搭配,显得简洁而不单调。

2.网站的内容及规划

   根据设计思想以及浏览各大汽车网站而进行分析,从内容栏目上对网站作如下划分:(见图2-1)

                          图2-1

公司简介中应用的是图片和文字,来介绍马自达公司及其精神。

新闻动态中利用Flash和图片以及文字,收集一些新闻。

汽车音响中通过锚链接来介绍各款音响。

精品专区中主要插入了背景音乐和几个视频。

车型导购中插入了音乐和一个Flash,比较精美。

主页草图设计如下:(图2-2)

                       图2-2

2.1网站风格

网站的主页结构为“︱”,内页结构为“”,字体排版都较相似,主页背景为灰色,其他内页背景为白色,字体用黑色。每个页面都可以通过连接相互进入,每个内页也都可以进入到主页。

颜色:以灰色白色为主色,灰色为底色,突出稳重的意味。

风格:有背景音乐,可以边看文章欣赏图片边听音乐。

页面:页面设计紧凑,有留白,排版整齐,整体性质强,导航栏分布较合理。

2.2主页设计

我们常说,第一印象是非常重要的。因此主页设计的好坏直接影响到整个网站。主页是网站实际内容的第一页,也是网站总体内容结构的“导航器”其设计的风格应该简单明了,清楚明白,能够让访问者对整个网站的结构有一个清楚的认识。首先,利用表格,层,单元格,将这个主页的排版规划好。主页的整体效果:(见图2-3)

                图2-3

在首页的顶端插入了一个flash动画,紧接着是一个汽车图片横向滚动的Flash,接着是3张图片经过图像,紧接着是两个flash,后面就是一些小图片环绕着一个flash。而在顶端和也面底端插入了两个透明的flash,优化了界面。

3.详细设计

3.1创建站点

网站的制作主要根据是Dreamweaver8,在做网页之前要先建立站点,首先启动Dreamweaver8,在菜单栏中单击“站点”(建立站点的方法有很多,在此举例一种来详细介绍),打开如图3-1对话框。

               图3-1

单击“新建”按钮,选择站点,打开如图3-2对话框。

                     图3-2

在“你打算为您的站点起什么名字”一栏中输入名子,最好用英文名,因为大部分服务器支持英文名字,单击下一步,打开图3-3对话框,

                        图 3-3

选择“否,我不想使用服务器技术”单击下一步,打开图3-4对话框

                      图3-4

设置文件存储在计算机的位置,通俗的讲就是选择你网页的存储位置,在这说明一点,放网页的文件名必须用英文名,因为大多服务器不支持中文。然后单击下一步打开如图3-5对话框

                    图3-5

在“您如何连接到远程服务器”中“选择本地/网络”这一项,因为毕竟你这是工作站,电脑又没连网,所有不用设置别的。在“您打算将你的文件存储在服务器的什么文夹中”时最好不好要设置文件夹,因为如果你的网站传到网上,你的网址后就要跟一个文件夹名,这样网址就会过长而且还不好记忆,比如你的网址是:http://07gm2.cc.net,如果你有文件夹,文件夹名是damen,网址就会变成:http://07gm2.cc.net/damen这个设置好后就单击下一步,在出来的下一个对话框中单击完成,这个站点就建立好了。

3.2各种素材的插入

首先是文字,使用【属性】面板或者【文本】菜单,可以设置文本的字体属性。包括文本颜色,文本的字体,文本的对齐方式等。

其次是图片,首先新建一个一个html页,将页面保存存于站点之中,在右边的侧边栏中间,找到站点文件夹,新建一个名为images的文件夹用于保存图片,将网站制作过程中需要用到的图片保存在此文件夹中。在常用工具栏中间的【插入图像】按钮,出现一个【选择图片】对话框,中间有一个文件夹images,选择文件夹中你想插入的图片即可将你选中的图片插入了。

接下来是插入背景音乐,首先新建一个html页,将页面保存存于站点之中,在右边的侧边栏中间,找到站点文件夹,新建一个名为music的文件夹用于保存音乐。在标签下面的【文档】工具栏中点一下【拆分】标签,窗口分成两部分,上边是代码,下边是文档;在上面的代码窗口中,找到<body>标签,在它后面点一下鼠标,然后按一下回车键插入一个空行,切换到英文输入法状态,输入 <bgsound src="music/1001.mid" loop="-1" />;输入的时候会有提示,里面的单词是代码标签,双引号里面是参数值,-1表示循环播放;在文件名的标签上敲右键选保存命令,保存一下文件,点预览按钮,听一下背景音乐的播放,停止音乐可以按ESC键或点浏览器工具栏上的停止按钮,点刷新重新播放。而音乐还可以通过插入音频,插入插件,右边栏的标签行为中添加。

接下来是插入视频,Dreamweaver8增强了多媒体功能,选择可以直接导入Flash Video。在【插入】工具栏的【常用】选项卡中单击【多媒体】下拉箭头,在下拉列表中选择Flash Video按钮,在打开的【插入Flash视频】对话框中找到FLV文件,根据提示简单调整几个参数,比如文件的宽度和高度,是否自动播放等。

接下来是插入Flash,在Dreamweaver8中可以很方便地插入Flash动画,只要将光标位置放在插入Flash的位置,然后单击【插入】工具栏【常用】选项卡中的Flash按钮,在弹出的【选择文件】对话框中选择一个Flash文件,单击【确定】按钮,文档中会显示一个灰色的方框,其中有Flash标志。在【属性】面板中可以设置它的高度和宽度,如果想看播放效果,单击【属性】面板中的【播放】按钮即可。保存文档后,按下F12快捷键就可以在浏览器中查看运行结果了。

最后是超链接的创建。选中你需要添加链接的对象,然后执行【插入】|【超级链接】命令,系统会弹出【超级链接】对话框。设置好【超级链接】文本框中的参数后,单击【确定】按钮后就为成功添加了超级链接。另外一种添加链接的方法是将鼠标左键指针移到属性面板中指向文件图标,按下鼠标左键拖动到【文件】面板中药链接到的文件,松开鼠标,就为图片添加了链接。

3.3 CSS的应用

CSS是Cascading Style Sheets(层叠样式表单)的简称。它允许作者在HTML文档中加入样式(如字体类型、颜色、大小等等)。对于设计者来说它是一个非常灵活的工具,不必再把繁杂的样式定义编写在文档结构中,可以将所有有关于文档的样式指定内容全部脱离出来,在行内定义、在标题中定义,甚至作为外部样式文件供HTML调用。

Dreamweaver是最早使CSS的应用方便于使用者的网页工具之一。通过直观的界面设计者可以定义超过70种不同的CSS设置,这些设置可以影响到网页中的任何元素,从文本的间距到类似于多媒体的转换。你可以随时创建自己的样式单,然后在任何时候连接调用它。具体操作方法如下:

在编辑窗口中右击,在弹出的菜单中选择CSS样式中的新建CSS样式。弹出如图3-1所示

                            图3-1

定义要创建的 CSS 样式的类型:

若要创建可作为 class 属性应用于文本范围或文本块的自定义样式,请选择“创建自定义样式 (Class)”,然后在“名称”文本框中输入样式名称。注意:类名称必须以句点开头,并且可以包含任何字母和数字组合(例如,.mycss)。如果您没有输入开头的句点,Dreamweaver8将自动为您输入。

若要重定义特定 HTML 标签的默认格式,请选择“重定义标签”,然后在“标签”字段中输入一个 HTML 标签,或从弹出式菜单中选择一个标签。

若要为具体某个标签组合或所有包含特定 Id 属性的标签定义格式,请选择“使用 CSS 选择器”,然后在“选择器”文本框中输入一个或多个 HTML 标签,或从弹出式菜单中选择一个标签。弹出式菜单中提供的选择器(称作伪类选择器)包括 a:active、a:hover、a:link 和 a:visited。

选择定义样式的位置:

若要创建外部样式表,请选择“新建样式表文件”。

若要在当前文档中嵌入样式,请选择“仅对该文档”。

我们现在做的是段落的CSS样式,所以在名称框中输入“duanduo”在选择器类型中选择“类”单击确定,把创建的CSS样式保存到网页文件夹中,然后会出现如图3-2所示对话框

                                   图3-2

在这个对话框里可以根据自己的要求进行简单的CSS设置。设置完后可以在属性栏中样式里找到刚才设置的CSS样式,你单击它应用就可以游览样式。


总结

经过一段时间的的努力,终于在老师和同学的帮助下完成了网站的制作,期间,遇到了一些困难,但是在大家的探讨下,也都解决了,同时,也对网站制作有了更进一步的了解。通过网站的制作,对一些很好的网站产生了钦佩之情,同时也对网站的制作产生了浓厚的兴趣。对于一个刚接触静态网页制作的人来说,做一个静态的网页,只要充分利用好表格,使网页结构清晰明了,内容充实紧凑,这个网站就可以算得上是一个合格的网站了。从这方面考虑,我相信我的网站是一个合格的作品。当然,我还需要不断学习,因为目前动态网页构成的网站才是主流的网站。学习的路还很漫长,今后要不断的努力完善自己,用知识武装自己。只有适应社会发展的需求,适应时代发展的需求,才能在竞争日益激烈的社会中立足。因此,我会严格要求自己,希望在老师的帮助下,在自己的努力下,在生活中找到属于自己的位置。


致谢

感谢我的指导老师赵元媛老师。在本次设计中,我从赵老师身上学到了很多东西。赵老师的认真负责的工作态度、严谨的治学精神、深厚的理论知识和实践经验都使我受益匪浅。他无论在理论上还是在实践中,都给与我很大的帮助,使我得到不少的提高。这对于我以后的学习和工作都有巨大的帮助,感谢他细心的教导。另外,在网站开发过程中我观看了许多从Internet下载下来的制作网站的教程,同时其他同学也给了我很大的帮助,帮助我解决了不少的难点,使得网站能及时开发完成。同时也对教程发布者和同学表示感谢。

本次的课程设计可以说是有了一个圆满的结束。从中我也再次对自己的学习方法有了更进一步的提高,在此再次感谢赵老师对我精心的指导,使得我对网站开发有了更深的了解和认识,并且在赵老师的指导下熟练地掌握了网站开发技术。


参考文献

【1】《网页制作与网站设计教程》冶金工业出版社

【2】《Dreamweaver8网页制作与网站开发》清华大学出版社

【3】《制作网页宝典》中国IT实验室学习下载频道

【4】《Dreamweaver8视频教程之入门基础》薛欣

更多相关推荐:
网站制作心得体会

通过这次网站的制作,我对网站有了更深层次得到了解,也有了更浓厚的兴趣。尤其是对网站制作的过程与一些技巧手法更有了另外一番了解,对网站制作的基础知识也有了进一步的掌握。这个学期我们的网页设计课,与以前的课相比更加…

网页制作心得体会

《文文工作室网站设计说明书》姓名:陈家文学号:20xx36627204班级:电商092一、网站规划本工作室主要用来做个人网站,主题是介绍自我,让更多的朋友认识我,面向我的同学和朋友以及想结交我的朋友。二、网站总…

学习网页制作心得体会

转瞬之间,半个学期又接近尾声,在李导师的精心辅导下,度过了这个富有生机,富有朝气的学期。学到了很多做梦也不会遇到的如此奇特的有趣知识,对于我来讲是一个很好的锻炼和充实的机会。俗话说的好“书山有路勤为径,学海无涯…

网页制作心得

网站学习心得本学期我们教育技术专业开设了网页设计与制作这门课,刚开始我只觉得学习做网页既有趣却也有难度。毕竟平时上网的时候,就看到了很多做的很好的网页。自己也曾很好奇这些网站是如何在人们手中诞生的。随着课程的深…

网页制作心得体会

程序设计实训报告专业班级学号姓名实验室网络D102芒力克喀斯木4号机房20xx年12月日20xx27020xx431524总体说明1实训目的和基本要求基与NET的Web程序设计是实践性很强的课程本课程不仅要求学...

网页制作心得

江苏经贸职业技术学院实训报告20xx20xx学年第一学期系部信息技术系课程名称网页设计实训学生姓名束蕊学号1006380212班级10软件嵌2班指导教师韩玉君二00六年二月制信息技术系实训报告这一周我们要进行网...

网页制作学习心得

网页制作学习心得体会刘少波20xx221111120xx4转眼间,我已经学习《网页设计与制作》这门课程一个学期了,虽然时间有点短,但是这个学期以后我受益匪浅。记得最初接触dreamweaver的时候,我很茫然。…

《网站规划与网页设计制作》学习心得

网站规划与网页设计制作学习心得专业班级学号姓名不知不觉我已经学习网页设计与制作这门课程一个学期了虽然时间有点短但这一个学期以后我却受益匪浅不仅让我全面的系统的学会了页设计与制作的基础知识还让我学会了自己动手去制...

flash动画制作心得体会

任选课ltltflash动画与多媒体课件制作gtgt作业题目flash动画制作心得体会flash动画制作心得体会Flash是美国的一家公司MACROMEDIA公司于19xx年6月推出的优秀网页动画设计软件在中国...

谈谈企业和行业网站的设计心得

谈谈企业和行业网站的设计心得很多设计师认为做好了企业网站就一定能够做好行业网站的设计其实对设计来说行业网站和企业网站的设计截然不同对整个网站的创意风格整体框架布局文字编排图片的合理利用空间的合理安排上面等有着许...

网页制作学习心得

网页制作学习心得网页制作学习心得一网页制作学习心得在学习网页制作的这段时间里我利用了学习之余的一切可利用的剩余时间全心全意投入到网页世界去不断的学习去不断的探索同时去不断的充实去不断的完善自我在网络的天空下逐渐...

网页设计与制作与网站发布 学习心得

网页设计与制作与网站发布学习心得今天上了第一堂选修课课程内容很简单讲了一些关于网页的基本内容Internet是一个覆盖几乎全球的计算机网络WWW服务是互联网上最为先进应用最广交互性能最好的信息检索工具它向人类提...

网站制作心得(28篇)