Dreamweaver网页设计实验报告

合集下载

网页设计实验报告案例

网页设计实验报告案例

实验名称:网页设计实验实验日期:2021年10月25日实验地点:计算机实验室实验人员:张三、李四、王五实验目的:1. 掌握网页设计的基本原理和流程。

2. 学会使用网页设计工具(如Dreamweaver)进行页面制作。

3. 熟悉网页布局和美工设计的基本技巧。

4. 提高团队合作能力。

实验内容:一、实验背景随着互联网的快速发展,网页设计已成为一项重要的技能。

为了适应这一趋势,我们小组决定进行一次网页设计实验,通过实践掌握网页设计的基本知识和技能。

二、实验过程1. 确定网页主题在实验开始前,我们小组首先确定了网页的主题。

经过讨论,我们决定设计一个以旅游为主题的网页,旨在展示我国各地的美景和旅游文化。

2. 网页规划在确定主题后,我们开始进行网页规划。

首先,我们将网页分为以下几个板块:首页、景点介绍、旅游攻略、旅游资讯、联系我们。

然后,我们分别对每个板块进行了详细的规划,包括板块内容、布局、颜色搭配等。

3. 网页制作在规划完成后,我们开始使用Dreamweaver进行网页制作。

以下是制作过程中的一些关键步骤:(1)新建网页:打开Dreamweaver,选择“新建”选项,选择“HTML”页面。

(2)设置页面属性:在“属性”面板中设置网页的标题、背景颜色、字符编码等。

(3)布局设计:使用表格或Div+CSS进行页面布局。

我们将页面分为头部、主体、尾部三个部分,分别设计不同的布局。

(4)添加内容:在各个板块中添加相应的文字、图片、视频等内容。

(5)美化页面:调整文字颜色、字体、大小,添加背景图片、边框等,使页面更加美观。

(6)链接设置:设置各个板块之间的链接,方便用户浏览。

4. 网页测试与优化在网页制作完成后,我们对网页进行了测试,确保页面能够正常显示和跳转。

同时,针对测试过程中发现的问题,我们对网页进行了优化。

三、实验结果经过我们的努力,最终完成了一个以旅游为主题的网页。

以下是网页的几个特点:1. 主题鲜明,内容丰富。

网页设计实践报告3篇

网页设计实践报告3篇

网页设计实践报告3篇网页设计实践报告1一实验目的1.学习html语言和dreamweaver,frontpage等工具2.掌握在本地环境下运用asp技术实现一个简单的电子商务二实验的方法和原理三实验过程1.资料的搜集。

组长分配任务,大家从上搜集各种关于手机的资料。

2.熟悉制作软件。

做网页主要用的工具便是dremweaver、photoshop、flash软件。

在这些软件我对dremweaver、photoshop相对比较熟悉,因为在平时上课是老师带领我们运用过。

所以我还可以正常的运用,但是出现的问题还是有很多。

有很多不懂如何操作,只有通过在次去看书才能够了解,这也体现了我学习方面的缺点,它是我平时不够认真的具体表现。

3.构建站点框架。

打开dremweaver后第一步便是新建站点4设计主页及二级页面。

5实现网页间的链接链接的过程其实很简单,主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。

6向静太网页插入动态效果四实验心得在经济迅速发展的今天,internet显得更为重要它是人们发布信息与传递信息的重要渠道,为了与社会发展同步,为了让我们成为真正的技术性人才。

学校在本周为我们安排了维持三周的网页制作专用周是实习,让我们把平时所学知识运用到实践中做到真正的学以致用而不只是纸上谈兵。

通过本周的实习使我获得了更多的新知识同时也使我使我认识到了自己在学习上的许多不足。

近三个星期的实训将要结束,其中的酸甜苦辣我会在今后的日子里不断地去咀嚼,去回味,去探索。

从制作网页过程中,我学到了新的美化网页的方法,运用了更多以前未运用的技巧。

这使我学到了更多的知识,并且为我自己在制作网页这方面积累了一些经验。

这些将是我人生中的一次重要的经历,将是我今后走上社会后的一笔巨大的财富。

这次实习的收获对我来说有不少,我自己感觉在知识、技能等方面都有了不少的收获。

总体来说这次是对我的综合素质的培养,锻炼和提高。

网页设计-实验报告3 -DR

网页设计-实验报告3 -DR

实验三 Dreamweaver网页制作
学号 201315607 姓名冯浩亮专业计算机科学与技术成绩
【实验目的】
Dreamweaver是当前最受欢迎、应用最广泛的一款网页制作软件,它集网页制作和网站管理于一身,具有可视化操作,超强的编码环境。

掌握Dreamweaver网页制作软件;能利用Dreamweaver进行网页制作和网站管理。

【实验内容】
1、用Dreamweaver进行网站设置和管理,制作带有超链接的页面。

2、用Dreamweaver实现表格布局,表单页面,音乐,图片等的插入。

【实验步骤】
1、用Dreamweaver进行网站设置和管理,制作带有超链接的页面;
(要求:1、粘贴代码,2、结果截图)
2、用Dreamweaver实现表格布局,表单页面,音乐,图片等的插入。

(要求:用表格布局,设计一个注册表单页面,具有插入音乐、图片功能)
【实验结果】
(要求:体现功能的网站效果截图)
【实验心得】、
本次实验用Dreamweaver 进行网页制作和网站管理,使用Dreamweaver 制作网页,编写代码更省力,提供了“所见即所得”的可视化界面操作方式,能帮助使用者轻松制作出跨平台和浏览器限制并且充满动感的网站。

这次实验中,主要有站点的创建和管理,网页文档的基本操作,编辑与设置网页
文本,插入图像,插入多媒体,创建超链接,表格的使用,表单的使用等。

通过这次试验,我认识到了Dreamweaver的重要性,接下来我会好好练习使用Dreamweaver。

网页设计dw实验报告

网页设计dw实验报告

网页设计dw实验报告1. 实验目的本实验的目的是通过使用Adobe Dreamweaver(简称DW)软件,学习并掌握网页设计的基本原理和技巧。

2. 实验环境与工具2.1 实验环境- 操作系统:Windows 10- 浏览器:Google Chrome- 软件:Adobe Dreamweaver CS62.2 工具介绍Adobe Dreamweaver是一款功能强大的网页设计软件,它可以帮助开发人员创建富有创意的网站和应用程序。

DW提供了可视化的设计界面,同时也支持手动编辑HTML、CSS和JavaScript代码,让开发人员能够根据自己的需求灵活地进行网页设计。

3. 实验过程3.1 新建网页首先,打开DW软件并创建一个新的网页文件。

在DW的主界面中,选择“文件”->“新建”->“网页”,在弹出的对话框中选择“空白页”作为页面类型,然后设置页面的宽度、高度和背景色,并点击“创建”按钮,即可新建一个空的网页文件。

3.2 设计页面布局在新建的网页文件中,可以通过拖拽和调整页面元素的方式设计页面的布局。

通过DW的工具栏和属性面板,可以方便地添加和编辑各种元素,如文字、图片、链接等。

3.3 设置样式和格式DW提供了丰富的样式和格式设置选项,可以让开发人员对页面进行个性化的设计。

通过选择元素并修改其属性,或者直接编辑CSS代码,可以实现各种效果,如字体样式、字号、颜色、背景等。

3.4 导出网页文件完成网页的设计后,可以使用DW提供的导出功能将网页文件保存为HTML格式。

在DW的菜单中选择“文件”->“导出”,然后选择保存的路径和文件名,点击“保存”按钮即可。

4. 实验结果与分析使用DW进行网页设计时,可以快速、方便地创建美观且具有交互效果的网页。

DW提供了丰富的工具和选项,使得开发人员能够根据需求进行自由的设计和定制。

通过实验,我成功地创建了一个简单的网页,并对其进行了布局和样式设置。

5. 实验总结通过本次实验,我学习到了使用DW进行网页设计的基本流程和方法。

Dreamweaver网页设计_实训报告

Dreamweaver网页设计_实训报告

广播电视大学实训报告书一姓名学号专业/班级14秋计算机信息管理课程名称Dreamweaver网页设计教材网页设计与制作――Macromedia Dreamweaver 8任务编号01 任务名称使用Dreamweaver建立网站,建立一个名为“wywed”的网站思考题1、通过站点设置向导建立了站点之后,怎样进一步了解站点的设置可以进一步在高级模式下了解站点的设置2、对多个网站进行管理,要通过什么面板进行对多个网站进行管理是通过"文件"面板进行的3、思考建立一个个人网站应包括的内容、建立的栏目、需要的素材内容:文本、图形、链接、表格表单、Flash内容、计数器、时间戳栏目:主页日志相册留言关于素材:文本、图片、动画、midi、视频和音乐等考核内容及标准分值作品评语及成绩评定学生互评成绩20 非常熟练的完成操作,成绩:20设计与制作得分40心得及思考题得分40综合评语总分考核标准(分4个等级)1.优:在较好的完成实训任务书中的各项任务的基础上,有自己的创新,并能够应用所学的知识实现学生自己的设计想法。

2.良:能够按照要求完成实训任务书中的各项任务。

3.可:能够完成实训任务书中的各项任务,但有1-2个任务没有按照要求完成设计。

4.差:不能够完成实训任务书中的各项任务。

说明:1.浅灰色部分由学生填写2.白色部分为教师判分用3.本报告与学生实际作品相关联姓名学号专业/班级14秋计算机信息管理课程名称Dreamweaver网页设计教材网页设计与制作――Macromed ia Dreamweaver 8任务编号02 任务名称网页中插入导航条本次实训你掌握了哪些新的技术在网页中插入导航条正确设置导航条的各属性思考题1、怎样在页面中插入“鼠标经过图像”?在“文档”窗口中,将插入点放置在要显示鼠标经过图像的位置。

使用以下方法之一插入鼠标经过图像:1)、在“插入”栏的“常用”类别中,单击“图像”按钮,然后选择“鼠标经过图像”图标。

网页设计实验报告

网页设计实验报告

一、实验目的1. 熟悉网页设计的基本流程和工具;2. 掌握HTML、CSS等网页设计语言的基本语法;3. 提高网页布局和美化的能力;4. 培养团队协作和沟通能力。

二、实验内容1. 网页设计的基本流程2. HTML、CSS基础语法3. 网页布局和美化4. 响应式设计三、实验环境1. 操作系统:Windows 102. 浏览器:Chrome、Firefox3. 编程语言:HTML、CSS4. 网页设计工具:Adobe Dreamweaver四、实验步骤1. 设计网页结构(1)分析需求,确定网页功能模块;(2)绘制网页结构图,包括页面布局、元素位置等;(3)根据结构图,编写HTML代码。

2. 设计网页样式(1)编写CSS代码,设置网页元素的样式;(2)优化网页布局,调整元素位置;(3)添加网页特效,如动画、过渡等。

3. 网页布局和美化(1)调整网页元素大小、间距、颜色等;(2)使用图片、图标等元素丰富网页内容;(3)优化网页字体、字号、行间距等,提高阅读体验。

4. 响应式设计(1)使用媒体查询,根据不同设备屏幕尺寸调整网页布局;(2)优化网页元素在移动设备上的显示效果;(3)测试网页在不同设备上的兼容性。

五、实验结果1. 完成网页设计,实现以下功能:(1)首页展示公司简介、产品介绍、新闻动态等;(2)产品页面展示产品图片、详细介绍、购买链接等;(3)新闻页面展示新闻列表、详细新闻内容等;(4)联系我们页面展示联系方式、地图导航等。

2. 网页布局美观,符合用户需求;3. 网页在不同设备上具有良好的兼容性和响应式设计。

六、实验总结1. 通过本次实验,掌握了网页设计的基本流程和工具;2. 熟悉了HTML、CSS等网页设计语言的基本语法;3. 提高了网页布局和美化的能力;4. 学会了团队协作和沟通,提高了项目实施效率。

在实验过程中,发现以下问题及改进措施:1. 网页加载速度较慢,优化建议:(1)压缩图片、CSS、JavaScript等文件;(2)合并CSS、JavaScript等文件;(3)使用浏览器缓存。

Dreamweaver实验报告

Dreamweaver实验报告

Dreamweaver实验报告成绩计算机技术综合实验---⽹页制作与⽹站建设专业:测绘⼯程班级:测绘⼯程1402 学号: 21 姓名:叶枫教师评语:年⽉⽇信息技术实验教学中⼼⼀.实验⽬的与要求1.了解⽹页制作的基础知识;2.了解常⽤的⽹页开发技术和⽹页设计软件;3.掌握⽹站开发管理的⼯作流程;4.了解HTML语⾔的结构和语法;5.掌握Dreamweaver CS5编写⽹页的使⽤⽅法;6.掌握在⽹页中插⼊⽂本、图像、超链接、多媒体、表格、表单等元素的⽅法;7.以介绍青岛为主题,创建⼀个⼩型⽹站。

⼆.实验环境7条件下(屏幕分辨率1366×768);2.本地⽹络(未上传⾄web服务器),Dreamweaver CS6,Photoshop CC;3. 建议使⽤IE11以获得最佳浏览体验。

三.实验过程⽹站以介绍青岛为主题,旨在向游客介绍青岛的美⾷美景及风⼟⼈情等,同时也能为青岛⼈提供本地⽣活服务。

1.制作主页(1)创建html⽂件index:点击菜单栏的“⽂件”|“新建”打开新建⽂档对话框,选择“空⽩页”|“Html”点“创建”按钮,新建⼀个html ⽹页。

点击保存,选择路径“叶枫21”,⽂件名“index”。

(2)在Dreamweaver CS6设计窗⼝中将标题改为“青岛”。

(3)插⼊apDiv1作为⽹页底⾊,其css属性值为:#apDiv1 {background-repeat: no-repeat;background-position: center center;height: 637px;width: 1334px;}(4)插⼊apDiv3作为⽹页初始界⾯,调整width: 1334px;height: 659px;top: 7px;left: 7px;使其预览在IE11的效果为恰好充满整个屏幕。

css属性值:#apDiv3 {position: absolute;width: 1334px;height: 659px;z-index: 2;background-color: #BDD7EF;background-image: url(images/;background-repeat: no-repeat;background-position: center center;top: 7px;left: 7px;visibility: visible;}(5)在互联⽹上下载康熙体,由于没安装该字体的计算机⽆法显⽰该字体,因此我另辟蹊径,利⽤PowerPoint,新建演⽰⽂稿后插⼊⽂本框,插⼊“青島”。

2024网页设计实习报告总结(三篇)

2024网页设计实习报告总结(三篇)

2024网页设计实习报告总结____网页设计实习报告总结一、实习背景及目的本次实习是在____年暑假期间,在某知名网络科技公司进行的网页设计实习。

通过参与公司的实际项目,我得以接触到真实的工作环境和工作流程,深入了解了网页设计的相关知识和技能。

本次实习的目的主要是掌握网页设计的基本原理和技能,锻炼分析和解决问题的能力,提升自己在这个领域的实践经验。

通过实习的学习和实践,我将网页设计与用户体验相结合,提出了一些建议和改进措施,希望能对公司的网页设计工作有所帮助。

二、实习内容及经历在实习期间,我主要参与了公司一个正在进行的网页设计项目。

该项目是一个电商平台的网页设计项目,主要涉及到用户界面的优化和功能的添加。

具体的工作内容包括与产品经理和开发团队进行沟通,了解项目需求和用户需求;负责设计网页的布局和样式,以及添加交互功能;与开发团队进行协作,进行网页的编码和调试;与用户进行交流和反馈,根据用户反馈进行网页的改进等。

在实习期间,我逐渐熟悉了公司的工作流程和设计规范,学习了各种网页设计的工具和软件的使用,提升了自己的设计能力和技术水平。

通过与产品经理和开发团队的沟通,我了解到了用户需求的重要性,学会了从用户的角度思考问题,并且能够提出一些改进建议。

在与开发团队的协作中,我学会了与他人合作和沟通,能够更好地理解他们的思想和需求,并提供有效的解决方案。

三、实习收获和体会通过这次网页设计实习,我学到了很多知识和技能,收获了很多宝贵的经验和体会。

首先,我掌握了网页设计的基本原理和技能,学会了如何设计具有吸引力和易用性的网页界面。

其次,我了解了用户体验的重要性,学会了从用户角度思考问题,并且能够提出一些改进建议,为公司的网页设计工作提供一些参考和帮助。

最后,通过与产品经理和开发团队的沟通和协作,我学会了与他人合作和沟通,锻炼了自己的团队合作能力和解决问题的能力。

这次实习让我更加深入地理解了网页设计这个领域的复杂性和挑战性。

网页基本编辑实验报告

网页基本编辑实验报告

一、实验目的1. 熟悉网页编辑的基本工具和功能。

2. 掌握HTML和CSS的基本语法。

3. 能够运用网页编辑软件进行简单的网页设计。

二、实验环境1. 操作系统:Windows 102. 网页编辑软件:Dreamweaver CC3. 浏览器:Google Chrome三、实验内容1. 网页基本结构2. HTML标签的使用3. CSS样式表的使用4. 网页布局设计四、实验步骤1. 网页基本结构(1)新建一个HTML文件,命名为“index.html”。

(2)在Dreamweaver中打开该文件,输入以下代码:```html<!DOCTYPE html><html><head><title>网页标题</title></head><body><!-- 网页内容 --></body></html>```(3)保存文件。

2. HTML标签的使用(1)在`<body>`标签内添加一个标题标签`<h1>`,并设置文本内容为“欢迎访问我的网站”。

(2)在标题下方添加一个段落标签`<p>`,并设置文本内容为“这里是我的个人网站,欢迎您的访问和交流。

”。

(3)保存文件。

3. CSS样式表的使用(1)在`<head>`标签内添加一个`<style>`标签,用于编写CSS样式。

(2)设置标题标签`<h1>`的字体大小为40px,颜色为红色。

(3)设置段落标签`<p>`的字体大小为18px,颜色为蓝色。

(4)保存文件。

4. 网页布局设计(1)在`<body>`标签内添加一个`<div>`标签,并设置其样式,如宽度、高度、边框等。

(2)在`<div>`标签内添加一个`<img>`标签,设置图片路径为本地图片“example.jpg”。

网页设计试验报告

网页设计试验报告

网页设计与制作试验报告姓名:李文武班级:网络系统管理学号:1001011027一.主页格局的布置打开Dreamweaver工作界面,新建一个站点a1.新建一个空白页,在页面中插入一个一行一列的表格1,表格的宽度为800像素,边框距为0,间距为0,填充为0,并且表格居中对齐。

2.在表格1中插入三行一列的表格23.在表格2的第一行中插入两行一列的表格3,表格宽度设为100%。

(1)在表格3的第一行中插入如图一所示的fireworks的素材(2)在表格3的第二行中插入一行两列的表个,并且插入如图一所示的fireworks的素材图一4.在表格2的第二行中插入两行一列的表格4,表格宽度设为100%。

(1)在表格4的第一行插入如图二所示的表格(2)在表格4的第二行插入如图二所示的表格和图像4. 在表格2的第三行插入两行一列的表格5,如图二所示图二二.子页面格局的布置打开Dreamweaver工作界面,新建一个子页面的‘主页面’1.新建一个空白页,在页面中插入一个四行一列的表格5。

并且对表格5的每一行输入相应的文本2.新建一个空白页,在页面中插入一个三行一列的表格6。

(1)在表格6的第一行输入相应的文本(2)在表格6的第二行中插入两行两列的表格,并且在第一列插入图像和在第二列插入相应的文本(3)在表格6的第三行中插入相应的文本3.新建一个空白页(1)在空白页中插入6个文本框、1个单选按钮、1个复选按钮、1个下拉菜单框(2)给第(1)步的几个文本框和按钮输入相应的文本4.新建六个空白页,并且输入相应的文本以介绍相应的科目三.试验内容的创建1. LOGO显示Flash透明素材(1)新建一个空白页,插入一个宽度为400像素,高度为200像素的表格(2)给步骤(1)新建的表格插入一个背景颜色或背景图像(提示根据个人喜爱颜色)(3)将首先制作好的Flash透明素材“下雨.swf”插入步骤(2)中(4)保存(5)效果如图三图三2. 利用fireworks完成弹出式菜单的制作(1)打开fireworks工作界面,新建一个宽度为800像素,高度为50像素的画布(2)利用切片工具在画布中绘制出5个相同大小的切片(3)利用文本工具给步骤(2)的5个切片输入文本,分别为:首页、个人简介、所学课程、个人特长、求职意向(4)右击“所学课程”,选择添加弹出菜单。

实验10用Dreamweaver_MX制作个人网页实验报告终极版

实验10用Dreamweaver_MX制作个人网页实验报告终极版

用Dreamweaver MX制作个人网页实验目的(1)了解网站的制作过程,会收集、制作网页素材。

(2)熟悉Dreamweaver MX的基本功能。

(3)掌握网站设计工具Dreamweaver MX的使用。

(4)掌握简单网页制作的步骤与方法。

二、实验总结:网站制作过程包括:策划、设计图纸、切割网页、DMX制作网页,而DMX设计过程大概可以分为整体规划、网站栏目功能规划、根目录策划、数据库规划、编写网站后台、测试修改和发布。

Dreamweaver的功能有包括(1)可视化的编辑器与HTML检视器同步(2)简便易行的对象插入功能(3)跨浏览器的支持功能(4)可制定工作环境(5)强大的网站管理功能。

Dreamweaver MX的工作窗口有菜单栏插入栏文具工具栏等,分别对不同对象进行编辑。

制作网页首先要定义好站点,新建页面后,对于学生来说由于对网站设计代码还不熟悉,我们会选用显示设计视图,让我们这些以图形化操作设计网页。

其他操作包括新建页面,插入层,在层里输入文字,插入图片,插入Flash效果,增加周边装饰,添加邮件链接和添加背景音乐。

完成后要把网页和网页所需用到的各种素材材料放在同一个文件夹中,不然的话打开网页不能显示出素材。

Dreamweaver MX是我操作的第一款制作网页的软件,它操作相对简单,方便上手,也可以进阶操作,实用性强。

通过操作Dreamweaver MX我学会了简单的网页设计,并且了解了“网页三剑客”的用途和它们之间的联系,我从中收获良多。

简答题:(1)图层在网页设计中的作用是什么?答:层如同含有文字、图片、表格、插件等元素的胶片,一张张按顺序叠放在一起,组合起来最终形成页面的最终效果。

层除了可以像表格一样设置背景、位置、自由移动、响应事件、控制显示外,还可以使网页中的对象通过层在垂直方向互相重叠,还可以利用层的可隐藏属性配合时间轴的使用,轻松地制作出动感效果的层。

(2)哪些工具可以用来布局网页。

用dreamweaver制作网页的实践报告

用dreamweaver制作网页的实践报告

目录目录 0摘要 (2)正文 (3)网页制作过程大纲 (3)具体操作步骤 (3)制作过程简介 (4)制作网页前的准备: (4)开始制作网页: (4)网页制作的要点: (5)实践心得 (6)学到的知识: (7)网页制作心得: (8)一.页面的设计方面 (8)二.网页视觉效果 (8)三.网页的整体布局和导航 (8)四.网页中文字、图像 (9)五.网页制作过程中的其他注意事项 (9)Web考试网页制作摘要在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。

因此网站建设在Internet应用上的地位显而易见,它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。

对于现在的社会,科技的飞速发展已经成为社会发展的标志。

其中计算机的发展可谓快中之快,而在计算机的发展中计算机网络的发展又是首当其冲的。

计算机网络从为我们所知,到现在才经历的短短的几年时间,在这几年中随着计算机网络的广泛应用,特别是Internet 的普及和发展,网络已经成为了不可或缺的通信手段。

不论是最新的新闻信息、新产品的出台、新游戏的发布、最新的各种IT动态,包括等候就业人才的个人简历,我们都是可以通过网络来获得。

但是什么为这所有的一切提供平台的呢。

我们又是通过什么来获取这些消息的呢——对就是网页。

现如今,数以万计的网站以网页的方式提供了丰富、精彩的信息。

在人类社会进入信息时代的时候,在网络成为通信的主要手段的时候,在计算机网络普及的今天,网页也在它自己的岗位上做出了突出的贡献。

网页是我们在网络上的“代言人”。

我们将什么样的信息传达给浏览者,要讲述什么样的事情,网页在这里起着重要的作用。

企业网站在企业的网络营销当中占有及其重要的地位,只要是涉及网络宣传的企业,都应该建立属于自己的个性企业网站。

他不仅能够让企业在网络上展示自己的产品,促进实际销售的增长,更能够通过一根网线,向目标客户展示企业自身的形象。

Dreamweaver网页制作实训报告

Dreamweaver网页制作实训报告

广西科技大学鹿山学院课程设计报告课程名称:网页制作课程设计课题名称:我的梦幻网指导教师:**班级:计软141班**:***学号: ********成绩评定:指导教师签字:2015 年 07 月 07 日目录一. 网页制作课程设计目的 (3)二. 1.实训意义: (3)2.实训目的: (3)二、课程设计内容 (5)1.网站主题《我的梦幻网》 (5)2.网站材料 (5)3.网站规划 (5)三、课程设计步骤 (6)四、网站各模块实现 (7)1.我的梦幻网模块功能: (7)2.背景故事模块功能: (8)3.宠物介绍模块功能: (9)4.门派介绍模块功能 (10)5.装备模块功能介绍: (11)6.人物模块功能介绍: (12)7.地图介绍模块功能: (14)7.我的梦幻模块功能: (15)五、总结及心得体会 (17)一.网页制作课程设计目的1.实训意义:本次网页设计与制作实训是网页教学过程中重要的实践性教学环节.它是根据网页教学计划的要求.在教师的指导下进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的培养过程.因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素质有着重要的作用.2.实训目的:通过综合实训进一步巩固,深化和加强我的理论知识(1) 掌握规划网站的内容结构,目录结构,链接结构的方法。

(2) 熟练掌握网页制作软件Dreamweaver8和基本操作和使用。

(3) 掌握页面的整体控制和头部内容设置的方法。

(4) 熟练掌握网页页面布局的各种方法。

(5) 熟练掌握在网页中输入,设置标题和正文文字的方法。

(6) 熟练掌握在网页中插入图像,Flash动画和背景音乐的方法。

(7) 熟练建立各种形式的超级链接的方法。

(8) 掌握表单网页制作方法。

(9) 掌握网页特效制作方法。

(10) 掌握网站测试的方法。

2. 训练和培养我获取信息和处理信息的能力,充分培养和提高动手能力,学会通过网站、书籍、素材等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。

Dreamware实验报告

Dreamware实验报告

D r e a m w a r e实验报告(总4页)--本页仅作为文档封面,使用时请直接删除即可----内页可以根据需求调整合适字体及大小--Dreamweaver网页制作实验内容、实验过程:(1)用有序列表和无序列表的嵌套制作如下所示页面,完成过程如下:第一步:以有序列表标签<ol>建立“创建站点”和“文本修饰”两行,以“A”作为起始序列号,并分别建立class m和n,再用CSS样式修改字体和加粗,脚本如下:< !—建立CSS样式:-- ><style type="text/css">{font-size:20pt;font-weight:900}{font-size:20pt;font-weight:900}</style>第二步:以<ul>标签在有序列表里嵌套无序列表,无序符号为square;第三步:实验效果如图:(2) 用HTML语言制作如下网页,完成过程如下:第一步:以p标签建立第一行文字,用letter-spacing:8px加大字体间距,用font-size:22px加大字体;第二步:以</hr>标签建立水平线,设定样式为size=6,再以p标签建立接下的三行文字,最后再增加同样的水平线;第三步:用CSS样式修改所有中文为绿色,字体为微软雅黑,英文为红色,字体为黑体;第四步:实验效果如图:(3)用HTML语言制作如下网页,完成过程如下:第一步:做第一个页面,四行文字都用<p>标签来写,其中第一行加大字体为font-size:26px,宋体。

下面三行建立超链接,其中《再别康桥》链接到第二个页面;第二步: 第一个页面效果如下图所示第三步:做第二个页面,内容为《再别康桥》的原文。

当鼠标点击第一个页面中的“再别康桥”时,界面就跳转到第二个页面,效果如下图:。

网页实验报告

网页实验报告

实验名称:网页设计与制作实验目的:1. 学习和掌握网页设计的基本原理和制作方法。

2. 了解网页布局和美化的技巧。

3. 提高对网页性能和用户体验的认识。

实验时间:2023年X月X日实验地点:实验室实验器材:计算机、网页设计软件(如Dreamweaver、Photoshop等)实验内容:一、实验背景随着互联网的普及,网页设计已成为当今社会的一项重要技能。

一个美观、实用的网页不仅能够吸引更多用户,还能提升企业形象。

本实验旨在通过实际操作,掌握网页设计的基本技能。

二、实验步骤1. 创建新网页(1)打开Dreamweaver软件,创建一个新的空白网页。

(2)设置网页的基本属性,如标题、编码、背景色等。

2. 网页布局(1)使用Dreamweaver中的布局视图,创建一个两列布局。

(2)在左侧列中插入一个图片,并设置图片的宽度和高度。

(3)在右侧列中插入一段文字,并设置文字的字体、颜色和大小。

3. 网页美化(1)使用Photoshop对图片进行处理,如裁剪、调整亮度、对比度等。

(2)将处理后的图片保存,并导入到Dreamweaver中。

(3)对网页中的文字进行美化,如添加阴影、加粗等。

4. 网页性能优化(1)对网页中的图片进行压缩,减小文件大小。

(2)对网页中的CSS和JavaScript代码进行优化,提高网页加载速度。

5. 用户体验测试(1)邀请几位同学或朋友对网页进行测试。

(2)收集他们对网页的反馈意见,如页面布局、文字内容、图片质量等。

三、实验结果与分析1. 网页布局合理,图片和文字内容清晰。

2. 网页美化效果良好,符合审美要求。

3. 网页性能优化效果明显,加载速度较快。

4. 用户反馈意见主要集中在页面布局和文字内容方面,建议对布局进行调整,丰富文字内容。

四、实验总结通过本次实验,我们掌握了网页设计的基本原理和制作方法。

在实验过程中,我们学会了如何创建网页、布局、美化以及优化网页性能。

同时,我们还通过用户体验测试,了解了用户对网页的需求和期望。

网页制作试验报告

网页制作试验报告

试验报告一、实验目的及要求本实例是通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。

二、仪器用具1、生均一台多媒体电脑,组建内部局域网,并且接入国际互联网。

2、安装windows xp操作系统;建立iis服务器环境,支持asp。

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;三、实验原理通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。

四、实验方法与步骤1)执行“站点\管理站点”命令,在弹出的“管理站点”对话框中单击“新建”按钮,在弹出的快捷菜单中选择“站点”命令。

2)在弹出的“站点定义为”对话框中单击“高级”选项卡。

3)在“站点名称”文本框中输入站点名称,在“默认文件夹”文本框中选择所创建的站点文件夹。

在“默认图象文件夹”文本框中选择存放图象的文件夹,完成后单击“确定”按钮,返回“管理站点”对话框。

4)在“管理站点”对话框中单击“完成”按钮,站点创建完毕。

五、实验结果六、讨论与结论实验开始之前要先建立一个根文件夹,在实验的过程中把站点存在自己建的文件夹里,这样才能使实验条理化,不至于在实验后找不到自己的站点。

在实验过程中会出现一些选项,计算机一般会有默认的选择,最后不要去更改,如果要更改要先充分了解清楚该选项的含义,以及它会造成的效果,否则会使实验的结果失真。

实验前先熟悉好操作软件是做好该实验的关键。

实验二:页面图像设置一、实验目的及要求:本实例的目的是设置页面的背景图像,并创建鼠标经过图像。

二、仪器用具1、生均一台多媒体电脑,组建内部局域网,并且接入国际互联网。

2、安装windows xp操作系统;建立iis服务器环境,支持asp。

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;4、安装acdsee、photoshop等图形处理与制作软件;5、其他一些动画与图形处理或制作软件。

网页制作实验报告模版

网页制作实验报告模版

实验名称:网页设计与制作实验目的:1. 熟悉网页设计的基本概念和流程。

2. 掌握HTML、CSS和JavaScript等网页制作技术。

3. 学会使用网页设计软件(如Dreamweaver)进行网页制作。

4. 提高网页美感和用户体验。

实验时间:2023年X月X日实验地点:计算机实验室实验设备:计算机、Dreamweaver软件、网络连接实验人员:XXX(姓名)、XXX(姓名)实验内容:一、实验背景随着互联网的快速发展,网页已成为人们获取信息、交流互动的重要平台。

掌握网页制作技术对于提高个人综合素质和适应社会需求具有重要意义。

本实验旨在通过实践操作,使学生了解网页制作的基本流程,掌握相关技术,提高网页制作能力。

二、实验步骤1. 网页设计构思(1)明确网页主题:根据实验要求,确定网页主题,如个人博客、企业官网等。

(2)收集素材:根据主题,收集相关的图片、文字、视频等素材。

(3)布局设计:利用Dreamweaver软件,对网页进行布局设计,包括页面结构、导航栏、广告栏、内容区域等。

2. 网页制作(1)HTML编写:使用HTML标签,如<html>、<head>、<body>等,构建网页的基本结构。

(2)CSS样式设置:使用CSS样式,如<style>、<link>等,对网页进行美化,包括字体、颜色、背景等。

(3)JavaScript脚本编写:使用JavaScript脚本,如<script>、<img>等,实现网页的动态效果。

3. 网页测试与优化(1)浏览器兼容性测试:在多个浏览器(如Chrome、Firefox、IE等)中测试网页,确保网页在各个浏览器中均能正常显示。

(2)性能优化:对网页进行性能优化,提高网页加载速度,如压缩图片、减少代码冗余等。

(3)用户体验优化:根据用户反馈,对网页进行优化,提高用户体验。

三、实验结果与分析1. 实验结果通过本次实验,成功制作了一个具有个人风格的网页,包括首页、关于我、文章列表、联系方式等页面。

Dreamweaver网页设计实验报告

Dreamweaver网页设计实验报告

实验报告专业XXXXXX班级XX 班学号XXXXXX姓名XXX报告完成日期2012-12-26指导教师XXX评语:成绩:批阅教师签名:批阅时间:一、制作时间2012年12月18日至2012年12月26日。

二、实习内容1、使用Dreamweaver制作网站,该网站为福建工程学院网站2、网站不少于8个页面,主页和各模块相关页面;3、页面中包含文字、图片;4、使用CSS实现网页相关页面设置,要求在实现网页内能够显示文字,图片等信息;5、使用网页浏览器进行网站测试。

三、实习环境1、硬件环境:计算机一台;2、软件环境:Dreamweaver cs4;3、测试环境:IE、firework等网页浏览器。

四、网站总体设计1、网站主题本网页是以福建工程学院网站为主题,针对不同的年龄阶段的人给出了不同的学院的信息。

2、设计思路首先构思了基本网页的布局,主页采取了常用的1-(1+1+1),附页采用了1-(1+1),上了多个网最后决定参照福建工程学院的官方网站进行制作,但是布局并不相同素材取自福建工程学院官方网站,部分图片取自百度,网站包括1个主页7个子页,子页包含了所有的学校状况,分别为:学校简介、现任校领导、教学机构、管理机构、校纪校训校歌、校园风光、新校区建设;采用了较难的二级菜单和 JVAV技术实现导航栏上面的图片进行4张轮播。

五、制作步骤1.首先确定网页的主题后,从网上查看各名校的网站,并从中寻找思路开始做网页。

经过长时间的浏览,最终选择福建工程学院作为参照(网址:)2.受福建工程学院主页的影响我自学了图片轮播和二级菜单,从而制作了轮播图片和二级菜单。

3.由于对于JVAV和表单的知识并不是非常了解所以有些地方需要实现的实现不出来放弃了,期中研究了最久的就是导航轮播和下面的有块区域的图片轮播,结果因为不知道如何同时初始化2个JVAV函数最后以失败告终只好放弃4.本次制作最难的地方是导航菜单的二级菜单和图片轮换5.原计划那些JVAV代码因为无法同时初始化他们放弃了只好以一些列表代替6.最后,将一些小细节的东西做了些处理,最后打包上交。

Dreamwever网页设计实验报告

Dreamwever网页设计实验报告

**学院计算机系综合性实验实验报告课程名称《网页制作》实验学期 2010 至 2011 学年第 2 学期学生所在系部计算机系年级 2009 专业班级 Z091 学生姓名学号任课教师胡英实验成绩计算机系制《网页制作》课程综合性实验报告开课实验室:基础一2011 年 5 月31 日实验题目***网站的开发一、实验目的使用Dreamweaver、Fireworks、Flash三种软件完成网页的制作。

二、设备与环境微机、Dreamwaver 8、Fireworks 8、Flash 8三、实验内容1.按照特定的主题制作一个完整的网站。

2.使用Dreamweaver、Fireworks、Flash三种软件完成网页的制作。

3.网站中要包括表格/框架/层布局、图像、文本、超级链接、导航、CSS样式。

网站页面总数不少于6个。

4.至少要包括3个自己制作的Flash动画。

上交文件中要包括该动画文件的源文件*.fla文件和导出文件。

5.至少要包括3个自己用Fireworks制作的图像文件,并且在每个图像文件中应用至少两种学过的技术手段进行处理。

上交文件中要包括该图像文件的源文件*.png文件和导出文件。

6.尽可能多地使用学过的技术手段。

7.不允许抄袭其他同学的内容,如果两人有雷同,两个人都按照不及格处理。

8.不允许从网上下载别人的网站当作考试内容上交。

9.在上交文件中主页一律以index.htm命名。

10.把所有文件和文件夹放在一个总的目录下,目录以:班级+姓名+学号最后两位的形式命名。

例如:计算机Z091张三03.rar。

将index.html放在该文件夹下。

最后将该目录压缩成一个*.rar文件。

四、实验结果及分析一.网站内容1.本网站的设计是仿照《网页制作》第十一章的设计风格。

主题为“我的浪漫小屋”。

站点文件夹wangye共有十一个子文件夹。

分别为:◆images(用于放置处理好的图片)◆source(用于存放源图片以及处理的好的FIREWORK文件)◆music(存放主页音乐)◆flash(存放所用到的flash导出文件)◆text(所用到的文本资料)◆wenxuetiandi(存放做好的文学天地网页文件)◆yingjixinshang(存放做好的影集网页文件)◆yinyuejiayuan(存放做好的音乐网页文件)◆youmoyizhan(存放做好的幽默驿站网页文件)◆library(库文件夹)◆templates(模板文件夹)站点文件夹下,其中index.htm为主页网页文件,survey.htm为网站调查网页文件,mycss.css为css文件。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

实验报告
专业XXXXXX
班级XX 班
学号XXXXXX
姓名XXX
报告完成日期2012-12-26
指导教师XXX
评语:
成绩:
批阅教师签名:批阅时间:
一、制作时间
2012年12月18日至2012年12月26日。

二、实习内容
1、使用Dreamweaver制作网站,该网站为福建工程学院网站
2、网站不少于8个页面,主页和各模块相关页面;
3、页面中包含文字、图片;
4、使用CSS实现网页相关页面设置,要求在实现网页内能够显示文字,图片等信息;
5、使用网页浏览器进行网站测试。

三、实习环境
1、硬件环境:计算机一台;
2、软件环境:Dreamweaver cs4;
3、测试环境:IE、firework等网页浏览器。

四、网站总体设计
1、网站主题
本网页是以福建工程学院网站为主题,针对不同的年龄阶段的人给出了不同的学院的信息。

2、设计思路
首先构思了基本网页的布局,主页采取了常用的1-(1+1+1),附页采用了1-(1+1),上了多个网最后决定参照福建工程学院的官方网站进行制作,但是布局并不相同素材取自福建工程学院官方网站,部分图片取自百度,网站包括1个主页7个子页,子页包含了所有的学校状况,分别为:学校简介、现任校领导、教学机构、管理机构、校纪校训校歌、校园风光、新校区建设;采用了较难的二级菜单和 JVAV技术实现导航栏上面的图片进行4张轮播。

五、制作步骤
1.首先确定网页的主题后,从网上查看各名校的网站,并从中寻找思路开始做
网页。

经过长时间的浏览,最终选择福建工程学院作为参照(网址:)
2.受福建工程学院主页的影响我自学了图片轮播和二级菜单,从而制作了轮播
图片和二级菜单。

3.由于对于JVAV和表单的知识并不是非常了解所以有些地方需要实现的实现
不出来放弃了,期中研究了最久的就是导航轮播和下面的有块区域的图片轮播,结果因为不知道如何同时初始化2个JVAV函数最后以失败告终只好放弃
4.本次制作最难的地方是导航菜单的二级菜单和图片轮换
5.原计划那些JVAV代码因为无法同时初始化他们放弃了只好以一些列表代替
6.最后,将一些小细节的东西做了些处理,最后打包上交。

六、实习总结
这次是我们web的期末考试制作,通过这一次的制作,不仅巩固了以前学过的知识,还学会很多课堂上未教授的东西。

通过老师的讲解、查阅资料,解决了很多制作上的困难,这一点我在这要好好感谢我们的XX老师和我们宿舍的学姐,谢谢她们帮我很大的忙。

七、参考文献
《HTML+CSS网页设计与布局》
《PHP编码》。

相关文档
最新文档