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

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