网页制作实验报告.doc

实验系网站的制作一。实验目的掌握HTML语法基本的基本用法;熟悉HTML编写网页的方法;熟悉dreamweaver8界面及操作;熟悉使用dreamweaver8建立站点及制作网页;熟悉photoshop的用法;用自己所学的软件,以系网站的内容为参考,制作出有自己风格的系网站掌握创建网页的方法;掌握网页的编辑,包括图片的插入、动态效果、背景图片的的项操作。掌握超链接的创建与编辑。二,实验基本原理Photoshop是一个著名的图像处理理软件之一,集图像扫描、编辑修改、图像制作、广告创意,图像输入与输出于一体的图形图像处理软件,具有强大的图像修饰功能,利用这些功能可进行网页背景图像的制作,修复。Dreamweaver8是一款专业的HTML编辑器,用于对WEB页和WEB应用程序进行设计,编码和开发。无论直接编写HTML代码还是在可视图化编辑环境中工作,dreamweaver8都会提供很多快捷的工具。Dreamweaver8是可以完全自定义的,可以使用它创建自己的对象和命令,修改快捷键,也可以编写JAVAScript代码,从而用自己创建的新行为,属性检查器和站点报告来扩展dreamweaver的功能。三,实验准备在电脑上安装photoshopcs4及Dreamweaver8;收集一些关于学校的图片,以及一些其他的风景图片。四,实验内容(一),网站名称:电子工程系(二),网页设计的大体结构主要是对主页进行设计,其结构图大体如下:电子工程系最新状态通知公告友情链接学生风采文表下载学生工作招生就业成果展示实验室建设师资建设专业设置学校首页系部首页五,设计规划画图打开photoshop设置主体布局,将本次的布局为“三”字型布局利用photoshop画图,打开photoshop,导入一张自己认为可做网页背景的图片;用photoshop里面的工具对背景图片做适当的编辑修改,调色;制作文字标志将图片和文字组合,将具有本系特色的logo绘制在顶端;利用圆角矩形工具和颜色渐变工具制作网站主页导航条,及其他导航条制作栏目内容;在图片下方制作版权区域;网页模型的切片与导出利用切片工具将将导航条等项目分别切片,反复利用这个工具可创建多个矩形切片。切片创建后,切片的周围显示红色的导线,它确定导出时将文档拆分成的单独图像文件的边界。当切片切好后,执行“文件”→“导出”命令,打开“导出”对话框。在“导出”下拉列表中,选择“HTML和图像”的格式,在HTML下拉列表中选择“导出HTML文件”,在切片下拉列表中选择“到处切片”,最后单击“导出”按钮。导出后除了到处切片以外,还会导出一个包含表格代码的HTML文件,以便在浏览器重新装配图形在Dreamweaver8中编辑导出的网页启动Dreamweaver8,打开生成的html文件;创建网页名称:选择【查看】—【代码】编写HTML语言,<title>电子工程系</title>创建网页名称。在导航条粗话分别添加链接,链接到其他网页或相关图片点击“拆分”键,在非导航条出,分别将html语言代码中其图片所示代码修改为背景图像,此过程可通过对把<imgsrc>里面的内容剪切到<td>中,便在其后添加”background”如下所示:将<tdcolspan="2"><ahref=""><imgsrc="images/