静态网页设计总结报告

时间:2024.3.23

网页设计总结报告

目录

一、设计介绍 ................................................................................................................. 2

二、制作过程 ............................................................................................................................ 3

1、 布局…………………………………………………………………………………………………………………………….. …3

2、相关插入……………………………………………………………………………………………………………………………..4

3、相关链接……………………………………………………………………………………………………………………………..4

三、制作代码 ................................................................................................................. 5

四、心得体会 ............................................................................................................. 7

五、参考资料 ............................................................................................................. 8

一、网页设计介绍

从文件的角度来说,一个网页就是一个HTML文件。当浏览者输入一个网址或单击某个链接后,在浏览器中显示出来的就是一个网页。一般网页上都会有文本、图片等信息,而复杂一些的网页上还会有声音、视频、动画等多媒体内容,为网页增添了丰富的色彩和动感。静态网页是指网页文件中没有程序,只有HTML代码,一般以.html或.htm为后缀名的网页,静态网站内容不会在制作完成后发生变化,任何人访问都显示一样的内容。网站是一系列逻辑上可以视为一个整体的网页集合,是许多相关网页有机结合而组成的一个信息服务中心。对于小型网站,是指带有一定主题的多个网页集合;对于大型网站还包含数据库和服务器端应用程序等如新浪、网易、搜狐等门户网站。在构成网站的众多网页中,有一个页面比较特殊,称为首页,即网站的第一个页面。动态网页是指网页文件不仅具有HTML标记,而且还含有程序代码,并使用数据库连接。动态网页能根据不同的时间,不同的来访者显示不同的内容,动态网站更新方便,一般在后台直接更新。

我的网站是介绍自己的个人网站,这是一个关于家乡美食的介绍,总共6个页面,其中上有首页5个链接,包括剁椒鱼头,蚂蚁上树,浏阳蒸菜,家常酸菜鱼,长沙臭豆腐,而然后每个子页可以和上一页和下一页相连。

首页部分:介绍了湖南一些好吃的资料菜名,其中附有一张凤凰的图片,很想与老师和同学们分。

然后就是每个子页中,前四张介绍了五道菜和它们的做法,则是一道比较有名的小吃,为长沙臭豆腐,但由于其做法是秘方,只附有对其的介绍。

二、制作过程

网页布局

它们不仅能点缀网页,使网页更活泼有趣,而且在网上娱乐、电子商务等方面也有着不可忽视的作用。

网页是网站构成的基本元素。当浏览者移动鼠标,在网海中遨游的时候,一个个精彩的网页会呈现在用户目前。网页是否精彩,能否吸引浏览者,除了色彩的搭配、文字的变化、图片的处理等因素外,还有一个非常重要的因素:网页的布局。

1.建立布局

在这次的网页设计中用到大量的布局,所以怎么样建立布局是关键。特别是其在布局方面的出色表现,更受青睐。大家都知道,没有表格和绘制层的帮助,很难组织出一个协调合理的页面。

1.在Dreamweaver8“插入”工具栏中单击“布局”进入布局模式,再切到“绘制层”绘制大概的布局再结合布局表格,从而建立一个大概的布局。

2.使用背景颜色:选中该项,按浏览可以插入准备需要的背景颜色作为表格的背景颜色

网页的版式设计,

静态网页设计总结报告

版式设计时我们应该有重点,

静态网页设计总结报告

把重要的内容新闻放在醒目的位置上。规划各元素在网页中的位置关系和表现方法,合理安排图像、文本等元素,使网页布局合理、美观大方。

文本编写,我们的网页中需要大量的文字材料,这就要在网页编辑器中用HTML语言中的标签编写。也可以利用网页编辑工具的“所见即所得”功能,直接写入文字。在浏览器中运行时出现冗余代码时返回代码页面重新进行查看修改。

2.网页中相关插入

图像传输是www的真正魅力所在,它与文字相比具有显著的优点:一直观,人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度;二是能更清楚地表达细节内容。正是由于这些优点,所以在进行网页设计时图像很受欢迎。 在网页中插入图像

利用Dreamweaver可以方便地在网页中插入图像,还可以设置图像边框、大小、和位置,并且可以直接对图像进行编辑。

1. 在网页需要的地方把光标定位在此位置。

2. 在“常用”栏中选择“图像”点击则打开“工具”菜单,选择“图片”菜单

项,在子菜单中选择“来自文件”菜单项,或者单击工具栏中的图片工具图标,弹出一个“图片”对话框。

3. 在此对话框中单击“浏览”按钮,出现一个“选择文件”对话框。

4. 在“选择文件”对话框的文件列表中选择某个图像文件,然后单击“确定”

按钮,或直接双击该图像文件,该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置,这选中所插入的图片,单击它,则可以在下面的“属性”面板中对图片的高、宽等进行需要的设置,从而来达到自己的需要的尺寸。

3、相关链接

1、文字链接

1.选中需要链接的文字。

在“属性”面板中的链接去选择需要链接的文件里的网页或输入需要外部衔接的网址则可。

2图片热点链接

选中图片,在“属性”面板中选择你需要的形状的图像热点工具按钮并单击它,当光标变成“十“字形时则对它拖延。

三、制作代码

代码简介为了使源代码看起来更简洁,在制作的过程中更清晰,我的DIV和CSS是分离的,每一个页面对应一个CSS,相同的布局则直接进行链接就可以达到效果,这样的方式不仅省时,还很清晰。在平时的网页制作过程中,我也会将CSS部分分离。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml">

<!-- DW6 -->

<head>

<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->

<title>Restaurant - Home Page</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<link rel="stylesheet" href="mm_restaurant1.css" type="text/css" /> <style type="text/css">

<!--

.STYLE1 {font-size: x-large}

.STYLE2 {font-size: large}

.STYLE3 {font-size: large; color: #000099; }

-->

</style>

</head>

<body bgcolor="#0066cc">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr bgcolor="#99ccff"> <td width="15" nowrap="nowrap" ><img src="mm_spacer.gif" alt="" width="15" height="1" border="0" /></td>

<td height="60"

to colspan="3" hunan class="logo" best nowrap="nowrap">welcome province||your

choice||perhaps your favorite food </td>

<td width="40">&nbsp;</td> <td width="100%">&nbsp;</td> </tr> <tr bgcolor="#003399"> <td width="15" nowrap="nowrap">&nbsp;</td> <td height="36" colspan="3" nowrap="nowrap" bgcolor="#99FF99"

id="navigation"><a href="javascript:;"><span class="navText"

class="navText STYLE1 STYLE1 STYLE1">好吃又好学的神菜 | |吃货必看</span></a></td>

这个是网页共用的头代码。

<td width="40">&nbsp;</td> <td width="100%">&nbsp;</td> </tr>

其他部分代码也是大体相同的,只要替换好文字和图片的代码即可。

四、制作的心得体会

通过这次网站的制作,我对网站有了更深层次得到了解,也有了更浓厚的兴趣。尤其是对网站制作的过程与一些技巧手法更有了另外一番了解,对网站制作的基础知识也有了进一步的掌握。这个学期我们的网页设计课,与以前的课相比更加注重个人的创意能力和软件的运用实战能力,更加综合的考验了我,使我更加完善自我。现将我的作业情况汇报如下:

将理论与社会实践相结合,通过行业生产实践的形式,进一步了解、认识网页艺术设计工作在实际生活中广泛应用的表现渠道和表现方法,提高认知水平,缩短工作磨合期。根据项目课题要求,结合本专业所学网页设计理论知识,通过对网络广告等方面的调研和项目实践形成文字思路,并以自命题目设计完成多媒体网页设计制作。两项内容要求准确、完整,工作过程报告内容既要客观实际又要有认识深度,设计作品新颖有创意。

我首先的工作就是制作网站整体框架和收集资料,将其通过美图秀秀完善图片,然后导入Dreamweaver进行排版,并进一步的加以制作,完善美化,如加 入 Flash Css。由于我在某些方面的技术运用还不能得心应手,许多情况下不得不求他人。

我经过初步的构思,我因为要做的是湖南特色美食设计,所以要有一个时光主题,我在网上自己找到一些图片和文字,做一个简单的网站初步积累,考虑到主要是锻炼我们相关软件的操作能力与代码初步掌握的熟练成度,由于我们这段时间没有进行网站相关的课程,刚着手时,很多技术上的问题就暴露出来了,我感觉制作网页是需要耐心的,如果你没有耐心,你学不好网页设计,这是我最大的体会。因为当你碰到一个问题时,如果不能立刻得到问题的答案,你可能需要长时间去解决,我就碰到过一个问题,用了很长时间才解决,在网上查各种资

料,向同学请教。学习网页设计需要坚持,坚持不断的学习,因为设计网页的软件在不断的更新,只有综合运用多种知识,富于个性的页面,才能全面展现互联网这一新型媒体的独特魅力和多维空间的超强功能。我完成了全部课件内容,忙碌的几周让大家从新熟悉制作网站的过程,由于这次课程的网页都是静态的,难度不算大。但收获还是很多的。比如将你的标志尽可能的放在每个页面上最突出的位置,突出你的标准色彩,这些就是我的经验收获。

参考资料:

网站建设自学资料; 百度百科。 13

江苏大学

静态网页制作报告

学院:计算机学院

班级 :网络1302

姓名:刘赛雄

学号:3130610036


第二篇:网页设计课程总结[1]


经管学院 07级人力资源管理专业 张睿 200741124123

信息管理与信息系统模块学习总结

在本学期的信息管理与信息系统模块课程中,我们学习了网页制作和网站建设,我们可以自己运用网络资源,结合相关资料及老师的指导,通过自身的实践创作出积聚个人风格、个性的个人网页。总体来说,整个学期的学习过程中,我学会了很多知识,虽然过程比较艰辛,但是有了一个展示自我的空间,我觉得很开心、很有成就感。

一、网页制作的一些体会

作为网页设计的初学者,我对网页设计非常感兴趣,想设计出一个美观、实用、内容丰富的个人网页。我通过自己动手、动脑,通过网络资源和老师的指导,在不断发现问题和解决问题的过程中学到了很多知识,增强了我的创作能力和动手能力,在网页设计过程中,从构思到设计、完善、维护,整个过程我都全身心投入,使我真正学到了网页设计的知识。 在本次网页设计中,我不仅学到了很多关于网页设计方面的知识,也从中学会了关于使用网页制作软件方面的知识。在这个过程中,我通过上网搜集资料自学了Dreamweaver网页软件的应用,学会了简单地使用Dreamweaver。在设计过程中也出现了很多的问题,但上网查找、小组讨论等方式,不断地学习、提高,设计出的网页也在不断的进步。可以说在自己动手,不断实践的过程中,网页设计水平得到了很大的提高。

在这个制作过程中,我学会了面对困难和挑战,但我十分享受这一过程,这是一个能令人感觉到收获的过程,这次的网页制作使我产生很强的成就感。制作网页开始的时候还是兴致勃勃,充满激情的。但是学习内容越来越多,就逐渐感觉有点思维混乱,开始烦躁,失去了当初的那种兴奋的感觉,原来在自己看来是一种乐趣的事情,现在却成了一种负担。但我坚持一步步做下来,到看到成品时,内心得到了强烈的满足感。从中使我感悟到:学习网页制作需要耐心,如果你没有耐心,你就学不会,因为当你碰到问题时,如果不能立刻得到问题的答案,你就可能做不下去了。学习网页制作需要坚持,坚持不断地学习,才能作出理想的作品,才能更加充实自己。

二、网页制作的学习经验

学习网页制作不能一蹴而就,它是一个循序渐进的积累过程。想要更快更好地学习网页制作,除了需要勤奋努力外,还需要培养自己的审美能力以及美术基础。下面是一些网页制作的学习方法与经验。

⑴在学习制作网页前应对网页制作的各类软件进行一些了解,以便选择适合自己使用的软件。

⑵网页制作的学习应遵循由易到难的规则,先从简单的入手,再慢慢提升制作难度,以达到逐步提高网页制作能力的目的。

⑶在学习过程中,不能一味地去学习理论知识,应将书本知识与实际操作相结合。这样既能加深对知识点的印象,也能提高学习的兴趣。

⑷在学习时除了按书中提供的实例进行练习外,还应在该实例的基础上有自己的创意。 ⑸网页制作不能千篇一律地按一种固定的模式进行操作,应有独特的风格,这样才能体现出与众不同的魅力,以吸引浏览者,提高网页人气。

⑹运用模板制作网页可提高制作速度与效率,这也是统一网页风格的一个快捷方便的途径,千万不可忽视模板的效用。

⑺要善于借鉴别人的优点,取长补短,多上网浏览,将风格独特、别具匠心的网页保存下来以作参考。

三、网页设计的一些要点

做好网页,并不是一件容易的事,它包括个人网页的选题、内容采集整理、图片的处理、

页面的排版设置、背景及其整套网页的色调等很多东西。

⑴标题

在个人网页中标题起着很重要的作用,它在很大程度上决定了你整套个人网页的定位。一个好的标题必须有概括性、简短,有特色、容易记,还要符合自己网页的主题和风格。 ⑵内容的采集

选好标题后,开始采集内容,内容必须与标题相符,在采集内容的过程中,应注重特色,所谓特色应该是有一些自己的东西。个人网页中的特色,应该突出自己的个性,把自己的兴趣、爱好尽情地发挥出来,因为在网络上不受限制。

⑶图片

做个人网页不能只用文字,必须在网页上适当地加一些图片,增加可看性,一张处理得好的图片不需要多做任何解释,就能让人一目了然,让人去思考,去了解它。

⑷网页排版

网页页面整体的排版设计也是不可忽略的,很重要的一个原则是合理地运用空间,让自己的网页井井有条,留下必要的空白,人觉得很轻松。

⑸特色

让自己的网页更有特色一些,可适当地加一些声音、动态网页。

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

总体来说,通过对网页设计的学习,有收获也有遗憾、不足的地方,我利用了学习之余的一切可利用的剩余时间投入到网页世界,去不断的学习和探索,同时去不断的充实与完善自我。我想我已经迈入了网页设计的大门,只要我再认真努力的去学习和提高,我将来设计出的网页会更加专业和完善。

更多相关推荐:
网页设计心得体会报告

网页设计伴随着网络的快速发展而快速兴起,作为上网的主要依托,由于人们使用网络的频繁而变得非常重要。生活中我每天上网都要接触到网页,原来没有留意过网页的设计,但是经过这段时间的学习了解,现在我打开一个网页都会习惯…

网站设计与制作个人总结报告

taiyuangongyexueyuan近一个星期的实训将要结束了,顶着考研考试的巨大压力我们小组还是如期的完成了老师的要求,其中的酸甜苦辣我会在今后的日子里不断地去咀嚼,去回味,去探索。从制作网页过程中,我学…

网页设计个人总结

实训周网站设计个人总结通过本周的实训,在老师的热心指导和精心培养下,我不仅在知识上有了很大的提升而且在心得上也是收获颇多。本次实训的目的旨在检验我们在平常学习中所学知识、将上课所学的理论知识在实践中巩固掌握以及…

网页设计报告模板

成都理工大学工程技术学院网页设计实训报告实训内容网页设计与制作指导老师XXX专业班级200X级计算机通信X班姓名XXX设计时间20xx年11月18日一实训目的1掌握网页制作环境和网站建设步骤2掌握网页制作软件D...

网页设计实训报告书

计算机技术系实训项目报告书20xx20xx学年第1学期实训项目名称个人博客网页设计姓名张腾学号35091104072所在专业计算机技术系所在班级11网络班任务起至日期20xx1210至20xx1214指导教师陈...

网页制作课程设计报告总结

一引言课程设计是一块试金石是加深对自我能力认识的重要途径大学的学习基本上都是理论的接受而缺少能力的熟练与加强我们缺少的并不是知识的储备而是能力的积蓄但由于大学特殊的学习模式和环境缺少实际情景的见证和实践活动的参...

网页设计报告

中国海洋大学青岛学院网站设计题目学生姓名指导教师学院专业班级游戏网站设计曹明轩蒲鹏飞付尚东汪桂兰辛琰信息科学与工程学院网络系统管理20xx级1班组内分工2网络游戏网站目录前言41实训心得511意义512目的51...

网页设计实习报告

思科信息学院专业实习报告专业班级姓名关于网页设计与编辑的实习报告一实习目的一检验自己是不是真的适合这个职业鉴于自己对未来的职业生涯的规划更倾向于设计这和自己所学的专业不是十分有联系所以我希望在实习的过程里思考自...

网页设计实习报告

20xx20xx年度网页设计实习报告一实习目的让学生了解网站的制作流程和基本技法学会站点的规划与创建能自己创建个人网站和简单的企业网站掌握静态网页的制作技术了解动态网页的制作技术了解与数据库的链接及简单的数据处...

网页设计实训报告

《网页设计与制作》课程设计报告书设计题目:JQDM西餐厅网站设计与实现班级:信管13姓名:***学号:**起始时间:20XX.12.29-20XX.1.4一、内容介绍......................…

网页设计实验报告

线组六第订别组班1学济经装级班2345678910

网页设计实验报告

姓名王中亚学号20xx15304班级20xx153班网页实验报告一实验目的网络在现今生活中的重要地位已经不言而喻我们上网都避免不了浏览网页本实验通过学习使用Dreamweavercs4设计网页来达到熟知一个网站...

网页设计报告总结(29篇)