网页设计与制作课程实验报告Word文件下载.docx

1、1.4 可行性分析：网站设计与制作是专业课之一，随着网络的开放、电脑的普及率、以及计算机技术的提高，同时网上资源丰富多彩，加上已有一定的技术基础和优秀的老师作相关的指导，建设该班级网站有一定的可行性。第二章网站制作2.1 网页结构：文表下载学生工作师资建设专业设置系部首页2.2 主要功能：l 专业设置：介绍专业特色，发展前景，开设课程。l 师资建设：师资队伍人数、师资力量概况（职称、学历和年龄结构，教师培训计划及实施情况）、学术带头人介绍（包括研究方向、论文论著等）或个人主页链接、其他个人主页链接； 教师风采，校级名师需有个人照片，个人简介，研究方向、 团队以及研究项目，发表过的论文等，其他教

2、师也需要有个 人简介。l 学生工作：学生日常教育与管理、学生社团活动、班级建设及主页链接、学生社会实践、特色学生刊物；l 文表下载：相关文表格式。l 通知公告：相关通知。l 最新动态：部门对内（学院、系、部）和对外（社会）的信息（新闻、通知、公告）。2.3 制作工具：Photoshop 是 Adobe 公司旗下最为出名的图像处理软件之一， 集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件。Flash 是由 macromedia 公司推出的交互式矢量图和 Web 动画的标准。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Drea

3、mweavr8 是一款专业的 HTML 编辑器，用于对 WEB 页和 WEB 应用程序进行设计，编码和开发。无论直接编写 HTML代码还是在可视图化编辑环境中工作，dreamweaver8 都会提供很多快捷的工具。Dreamweaver8 是可以完全自定义的，可以使用它创建自己的对象和命令，修改快捷键，也可以编写 JAVAScript 代码，从而用自己创建的新行为，属性检查器和站点报告来扩展dreamweaver 的功能。2.4 制作步骤1. 数据，表格及数据处理制作网页之前收集网页制作的素材，包括图片，背景音乐， 视频，文字信息等；2. 实验操作过程（1） 站点的创建启动 dreamweav

4、er8界面，单击【创建新项目】列表栏中的【HTML】超链接。选择【站点】【管理站点】【新建】命令，打开【站点】对话框，在【基本】选项卡中的站点名称文本框中输入站点名称“电子工程系”。单击【高级】标签， 在【高级】选项卡中设置本地站点参数。在【本地跟文件夹】文本框中输入本地站点所对应的本地根文件夹。“E:网页制作”。单击【下一步】按扭。选中【否】单选按钮，表示该站点是一个静态站点，没有动态页。单击【下一步】选择“在本地进行编辑，然后上传到远程测试服务器”；单击【下一步】从弹出的菜单中选择【无】选项。单击【下一步】，单击完成。随即出现【管理站点】对话框，显示新站点。单击【完成】。（2） 建立本地站

5、点之后，在文件面板中管理网站文件。在【文件】面板中单击鼠标右键，在快捷菜单中选择【新建文件】，名称为“电子工程系.html”.（3） 网页布局1. 在表格中插入表格：切换到【标准模式】，选择【插入】【表格】命令，此时弹出【表格】对话框，在【行数】和【列数】中填入自己所需要的行列数，边框粗细填 0，表格宽度填 1000 像素。单击确定。2. 创建嵌套表格，选中一个表格单元格，右击选择【表格】【拆分单元格】在弹出的对话框中填需拆分为行还是列。如：选中拆分为行，2 行。3、在表格中输入层：选中一个表格单元，选择【插入】【布局对象】【层】4、在层中插入图像：选择【插入】【图像】在弹出的对话框中【文件名

6、】中选择要插入图像的名称。单击确定，在弹出的对话框中【替换文本】处填写图片的说明名称。5、设置图片属性：图像的属性可以通过【属性】面板中各个选项来完成。（4） 创建网页名称：选择【查看】【代码】编写 HTML 语言，电子工程系（5） 利用 PS 制图1、启动 PS，执行“【文件】【新建命令】”菜单命令，弹出【新建】对话框，进行参数设置，点击“好”按钮后，将文件保存在自己建的网页目录下。2、插入自己搜集的照片制作横幅，导航栏等。再插入所需的位置。第三章 网站的实施3.1 Logo：3.2 导航栏：3.3 主要内容：3.4 主页：3.5 专业设置:3.6 师资建设：3.7 学生工作：3.8 文表下

7、载：第四章源代码（主页）!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=gb2312 /style type=text/css-body background-color: #FFFFCC; margin-top: 0px;body,td,

8、th color: #000000; font-size: 18px;a:link text-decoration: none;visited color: #0066FF;hover #FF0000;active .STYLE3 font-size: 14px.STYLE5 font-size: 14px; font-family:新宋体; .STYLE6 font-family:-/style/headbodytable width=1024 height=182 border=0 align=centertrthheight=178background=image/bg.gif scop

9、e=col /th/tr/tabletablewidth=height=28border=align= background=image/bg1.gif34scope=ahref=index.html/ath scope=a href=zhuanye.html专业设置shizi.html师资建设xuesheng.html学生工作webiao.html文表下载td height=42img src=image/dot2.gif8height=7image/news.gif1611span class=STYLE5 index/index-1.html target=_blank祝贺我系学生在 30 届校田径运动会上取得十连冠/td31index/index-2.htmltarget=答疑时间安排tdheight=39spanclass=STYLE3index/index-3. html2010-2011 学年电子工程系校内评奖评优名单公示