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

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