软件工程学院网站创意设计与制作计划书

1 软件工程学院 网站创意设计与制作计划书 目 录 实验一：网站设计欣赏 . 1 实验二：采用 码设计网页 . 3 实验三：网站规划 . 5 实验四：首页和子页效果设计 . 6 实验五：网站元素设计与制作 . 7 实验六：建立和管理本地站点 . 8 实验七 网页页面布局设计 . 10 实验八 插入和编辑网页基本元素 . 12 实验九 模板和库技术应用 . 14 实验十 创建网页超链接 . 15 实验十一 框架网页的实现 . 16 实验十二 式及应用 . 18 实验十三 网页交互应用 . 20 实验十四 动态网页制作 . 21 实验十五 测试和发布站点 . 23 1 实验一：网站设计欣赏 一、 实验目的 且能认识网页中的各种基本元素。 的设计风格，能总结出网站的主题、衡量一个网站建设是否成功。 二、 实验环境与地点 软件工程学院实验室 三、 实验内容与步骤 该网站给人的感受是 。打开该网站使用的浏览器是 。 司网站 网页最下方列出了合作伙伴的广告，有 等知名公司，这样一种方式也是很多网页采用的 形式。可以感受到这是一个 行业的网站。 3.“碧海银沙”网站 该网页使用了 等多种元素。运用了多媒体的技术，可以感受到这个页面 的特点。 整个页面让人联系到办公元素和文档。专业的人物图片给人以条 2 理清楚而又专业的感受。可以感受到这个页面时信息类相关的网站。这个网站具备 特点。 该网站是个人网站。网站的分类详细，布局的优 点是 。这类网站的特点是 。 该网站是一个与信息技术服务相关的网站。网站的分类详细，布局的优点是 。 7.“榕树下”网站 该网站的主题是关于。它的特点是以论坛的形式营造出一片生活气息很浓的读书环境。 网站名称： ；网站地址 : 。 网站页面截图： （首页 +子页） 网站特点分析： 。 网站名称： ；网站地址 : 。 网站页面截图： （首页 +子页） 网站特点分析： 。 四、 实验总结与分析 3 实验二：采用 码设计网页 一、 实验目的 1学习使用记事本来书写 码。 2 掌握 法规则。 二、 实验环境与地点 事本 软件工程学院实验室 三、 实验内容与步骤 1实验内容 做一个简单的个人主页。该页面必须具备以下功能：属于符合自己页面的 人主页的相关内容；与内容相关的超链接；与其他知名相关网页或其他好友个人主页的友好链接。 2实验步骤 1) 启动“记事本”程序，命名为“ 2) 根据个人喜好，在“记事本”中书写 码，以实现网页的主要功能。 参考代码如下： (请在此代码基础上修改正确后再添加代码 ,以得到自己的页面 ,将记事本中的代码及网页效果图贴在下方。 ) 4 四、 实验总结与分析 5 实验三 ：网站规划 一、 实验目的 1学习网站的策划与分析 2学习网站策划书的撰写 二、 实验环境与地点 软件工程学院实验室 三、 实验内容与步骤 1实验内容 根据所选项目确定网站风格、主题、名称、内容结构规划和版面结构规划，完成网站策划书的撰写。 2 实验步骤 1）根据选定项目对网站进行策划和分析，完成网站策划书的撰写。策划书以电子稿的形式交给老师。请根据策划书内容填写以下项目： 网站名称： 网站主题： 网站风格： 网站的内容结构图：（请以组织结构图的形式绘出） 网站的版式布局：（请以草图的形式绘出） 四、 实验总结与分析 6 实验四：首页和子页效果设计 一、 实验目的 1 掌握 用图像处理工具制作网页效果图的方法。 二、 实验环境与地点 像处理软件 软件工程学院实验室 三、 实验内容 与步骤 1实验内容 在实验三的基础上，利用图像处理工具完成网站首页面效果图和子页面效果图的制作。 3 实验步骤 1）根据前期的策划分析，在图像处理工具中制作网站首页效果图。（请书写设计制作说明，并将效果图打印后贴于下方，同时标注出效果图的主要设置参数：如尺寸、颜色等） 2）根据前期的策划分析，在图像处理工具中制作网站子效果图。（请书写设计制作说明，并将效果图打印后贴于下方，同时标注出效果图的主要设置参数：如尺寸、颜色等） 四、 实验总结与分析 7 实验五：网站元素设计与制作 一、 实验目的 1掌握网络图像的处理方 法。熟悉 工具在处理网络图像中的应用。 2 掌握 切片的设置。 二、 实验环境与地点 像处理工具 软件工程学院实验室 三、 实验内容与步骤 1实验内容 完成实验三网页中的 航、 片等元素的制作。 2实验步骤 1) 启动图像处理软件，完成网站 制作。 （请将效果图打印后贴于下方，并标注出效果图的主要设置参数） 2) 启动图像处理软件，完成网站导航条的制作。 （请将效果图打印后贴于下 方，并标注出效果图的主要设置参数） 3) 启动图像处理软件，完成 制作。 （请将效果图打印后贴于下方，并标注出效果图的主要设置参数） 4) 完成网页的最终效果图，并设置切片。 （请将网页效果图切片后的整体结果打印后贴于下方） 四、 实验总结与分析 8 实验六：建立和管理本地站点 一、 实验目的 像、多媒体等元素。 二、 实验环境与地点 软件工程学院实 验室 三、 实验内容与步骤 1实验内容 根据实验三的内容在 规划站点结构，建立并管理该站点。 2实验步骤 1) 建立站点 启动 件。 执行以下操作，建立自己的站点，站点名为 ，站点根目录为 。站点概况如图所示（请贴图）。 操作步骤： 根据站点结构规划，在站点根目录建立相应文件夹，并存入相应素材文件。 2) 管理站点 执行 操作，打开“管理站点”对话框。 9 在 “管理 站点”对话框列表显示已建立的站点名称。单击“编辑”按钮，在“站点定义”对话框中单击“高级”标签，在“本地信息”区域显示了本地站点的位置，可以在此对话框中修改本地站点的信息内容。修改完成后，单击“确定”按钮，返回“管理站点”对话框。单击“完成”按钮，关闭对话框，完成站点信息修改操作。 说明 在“管理站点”对话框中单击“复制”按钮，可复制选定站点。新复制的站点会显示在“管理站点”对话框列表中，其名称将采用原站点名称后添加“拷贝”字样的形式。选中站点名称单击“删除”按钮，会删除被选站点。但该操作只是删除了 没有真正删除磁盘中的文件。 利用“文件”面板，对本地站点的文件夹和文件进行创建、删除、移动和复制等操作。请各写出一种操作方法。 说明 如果需要修改文件夹的名称，可以单击 文件夹的名称，或按键， 说明 如果需要修改文件的名称，可以单击文件的名称，或按 ，激活其名称的编辑状态，或者从“文件” 面板的“文件”菜单中选择“重命名”命令，然后输入正确的名称。注意保持文件的扩展名不变。 说明 如果移动或复制的是文件，由于文件位置发生了变化，其中的连接信息也应该相应发生变化 。 打开 “更新文件”对话框，提示用户是否要更新被移动或复制文件中的链接信息。从聊表中选择要更新的文件，淡季“更新”按钮，则更新文件中的链接信息；单击“不更新”按钮，则不对文件中的链接进行更新。 文件面板显示站点内文件如图所示（请贴图）。 利用资源面板管理站点资源。 四、 实验总结与分析 10 实验七 网页页面布局设计 一、 实验目的 元格属性的操作。 二、 实验环境与地点 软件工程学院实验室 三、 实验内容与步骤 1实验内容 建立并编辑网站首页面 用表格进行布局并添加首页面元素。 2实验步骤 进行网页布局时，先要设置最外面的表格，然后根据版式设计规划，布局各内容模块，最下面放置版权信息。 1) 启动 站点根目录建立 件。 2) 根据版面布局规划如，编辑 件。 （说明：请按 照布局规划画出版面布局图，并在相应表格单元编上序号，以下内容按照序号填写） 首先建立一个 行 列的表格，尺寸为 ，设置参数为 。 11 在 号单元格内建立一个的 表格，尺寸为 ，设置参数为 。在其中添加内容为 。 在 号单元格内建立一个的 表格，尺寸为 ，设置参数为 。在其中添加内容为 。 3) 最终制作结果如图所示。 （说明：请贴图 的编辑结果） 四、 实验总结与分析 12 实验八 插入和编辑网页基本元素 一、 实验目的 入面板”中的文本面板、常用面板、图像面板的使用 ； 二、 实验环境与地点 软件工程学院实验室 三、 实验内容与步骤 1实验内容 首 先完成基本操作练习，然后在项目网站的首页中插入文本并进行设置、插入图片并进行设置，完成项目网站首页中基本元素的制作。 2实验步骤 1) 基本操作 在页面中插入特殊符号（如￥和空格符）的方法为： 在页面中插入水平线的方法为： 在页面中编辑一个项目列表，如下图 1 所示，要求：字体为“楷体”、大小为“ 16颜色为“黄色”，网页背景颜色为绿色。 13 图 11 操作步骤为： 在 网页中插入图片的方法（请写出三种）： ； ； 。 将图片设置为背景的方法： 制作导航条的方法为： 2) 项目网站首页设置 根据首页效果图，插入各元素，最终制作结果如图所示。 （说明：请贴图 的编辑结果，并指示文本和图片的基本设置参数） 四、 实验总结与分析 14 实验九 模板和库技术应用 一、 实验目 的 二、 实验环境与地点 软件工程学院实验室 三、 实验内容与步骤 1实验内容 分析项目网站，应用模板创建各子页面。 2实验步骤 1) 网站页面分析，确定固定区域和可编辑区域（请绘制草图） 2) 创建模板的方法为： 根据网站规划设置模板： 3) 创建基于模板的网页的方法为： 4) 创建的子页面效果为： （至少创建 3 各子页并进行设置，请贴图，并注明可编辑区域） 子页 1： 子页 2： 子页 3： 四、 实验总结与分析 15 实验十 创建网页超链接 一、 实验目的 和电子邮件连接。 二、 实验环境与地点 软件工程学院实验室 三、 实验内容与步骤 1实验内容 为项目网站的首页和子页设置超链接。 2实验步骤 1) 分别为项目网站的首页和各子页面设置超链接，请附图并在图上注明链接类型和链接目标。 2) 根据上面的操作，完成下面的题目： 设置文字超链接的方法为： 设置图片超链接的方法为： 设置图片热点超链接的方法为： 设置锚点超链接的方法为： 设置电子邮件链接的方法为： 四、 实验总结与分析 16 实验十一 框架网页的实现 一、 实验目的 架集的编辑和属性的设置； 二、 实验环境与地点 软件 工程学院实验室 三、 实验内容与步骤 1实验内容 用框架技术设计加一个主题为“金色的童年”的网页。部分页面参考效果如下图所示： 具体要求：单击上方和左侧链接项目，右侧框架显示相应内容。 2实验步骤 1) 新建框架集。 2) 保存框架集。 3) 编辑顶部页面。 17 4) 编辑左侧页面。 5) 编辑各子页面。 6) 设置框架链接。 7) 测试。完成的所有页面效果如图所示。 （将所有页面效果图贴于下方，一行贴 2 个） 四、 实验总结与分析 18 实验十二 式及 应用 一、 实验目的 概念； 式的新建、编辑和应用； 二、 实验环境与地点 软件工程学院实验室 三、 实验内容与步骤 1实验内容 利用 作、修改网页效果。 参考效果如图所示： 2实验步骤 1) 启动 建 页。 2) 打开【 式】面板，建立 则。建立的 则如下： 19 规则名： ；设置步骤及参数： ； 规则（类）名： ；设置参数： ； 规则（类）名： ；设置参数： ； 规则（类）名： ；设 置参数： ； 规则（类）名： ；设置参数： ； 3) 为网页元素应用 则。应用完 则的页面效果如下： （请贴图，并标注网页元素所应用的 则名称） 四、 实验总结与分析 20 实验十三 网页交互应用 一、 实验目的 二、 实验环境与地点 软件工程学院实验室 三、 实验内容与步骤 1实验 内容 为项目网站添加网页交互行为。 2实验步骤 1) 为项目网站添加“滚动文字”。制作结果和操作步骤如下： 2) 为项目网站添加“交换图像”。制作结果和操作步骤如下： 3) 使用“打开浏览器窗口”行为为项目网站添加详细内容页面。制作结果和操作步骤如下： 4) 列出项目网站中设置的网页交互效果。 （说明：以上内容，制作结果请贴图说明） 四、 实验总结与分析 21 实验十四 动态网页制作 一、 实验目的 据库的链接以及数据绑定，实现动态订单的方法。 二、 实验环境与地点 软件工程学院实验室 三、 实验内容与步骤 1实验内容 利用表单完成注册页 面。参考效果如图所示： 22 2实验步骤 1) 启动 建 页。 2) 在页面中插入表单域，然后插入表格。 操作过程为： 3) 在表格中插入各项表单元素及文字。 操作过程为： 4) 表单制作页面完成后，保存页面。制作结果如图所示： （请贴图，并标注表单项目） 5) 参考教材项目实例，实现一个动态订单的制作。 主要操作过程为： 四、 实验总结与分析 23 实验十五 测试和发布站点 一、 实验目的 传和下载远程服务器的内容的方法； 二、 实验环境与地点 软件工程学院实验室 三、 实验内容与步骤 1实验内容 对项目网站进行测试、发布和更新。 2实验步骤 1) 启动 序，建立本地站点。 2) 检查浏览器支持情况。 打开站点中任何一个网页，单击文档上的“浏览器检查”按钮，在弹出的菜单中选择“检查浏览器支持”命令，检查网页被浏览器支持的程度。 单击文档面板的“浏览器检查”菜单中的“显示所有错误”命令，在检查时，错误的信息会出现在“结果”面板中。 3) 检查站点链接情况。 本地站 点建立好以后，打开站点上的任意网页。选择菜单“窗口” “结果”命令 ，在打开结果的面板上，单击“链接检查器”标签项，然后选择项面板的左边“检查链接”按钮，在打开菜单中选择“为整个站 24 点检查链接”命令。 选择“为整个站点检查链接”命令后，检查整个站点链接，检查的结果信息会出现在结果文本框中，如果无错误，文本框为空。 4) 设置 远程信息和测试服务器。 选择菜单“站点” “管理站点”命令，或单击文件控制面板上“文件”下拉列中的“管理站点”命令，打开“管理站点”对话框。 选择建立的本地站点，单击“编辑”按钮，打 开站点定义对话框。选择站点对话框的“高级”选项，在“分类”列表中选择“远程信息”选项。 在“访问”下拉列表中选择 明： 对远程服务器的访问有很多项选择，据库或 协议，那么请选择服务器运行的服务协议，但一般情况服务器都是利用 议上传文件。 选择 ，在出现的“ 机”文本框中输入有效的 机名称，如： 址： “主机目录”文本框中输入远程服务器上存放网站的目录，如果没有特别的要求，一般就是网站的根目录，如： 。 在“登录”文本框中输入用类连接 务器的注册名，也就是登录到服务器的用户名。在“密码”文本框中输入连接到 务器的密码，如果选中后面的“保存”复选框，输入的密码将保存，再次登录时将不用重新输入。 说明： 如果网站内容就放在 根目录下，那么“主机目录”可以默认，空着不填；文本框下