网页课程设计样式.doc

《网页课程设计样式.doc》由会员分享，可在线阅读，更多相关《网页课程设计样式.doc（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、低頭淺笑 故事吧、网站设计2009级计算机系统维护1班 王姗姗 z1.设计目的完成一个静态网站的开发设计“低頭淺笑 故事吧、”网站。结合网页设计课程所学习的页面布局、页面美工、网站需求分析等技术，利用HTML标记语言、Dreamweaver、图像处理photoshop、动画Flash等工具软件进行静态网页设计和制作。巩固所学，进一步掌握网页设计与制作的基本技能，并轻松地创建出具个性化的个人、商业网站等。2开发工具介绍本设计所使用的开发工具是Dreamweaver和photoshop，Dreamweaver是一个可视化网页设计和网站管理的工具软件。它是一套网页编辑软件，不用编辑源代码，节省了很多

2、时间。它的优点是，Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。 photoshop是最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。因为需要图像的处理，所以使用它。3.系统总体设计根据设计需要，本网站设计了如下几个模块：1.首页2.情感故事3.励志文章4.生活随笔5.经典文章6.与我联系7.作者排行8.

3、友情链接网站链接导航图如图1所示。图1 网站链接导航图4.详细设计4.1站点的建立过程（1） 执行“站点”“管理站点”命令，进入“管理站点”对话框，再执行“新建”“站点”命令，进入“站点定义”对话框。（2） 进入“站点定义”对话框后，选择“基本”选项卡。设置站点名称为“低頭淺笑 故事吧、”，在站点的URL文本框中输入网站的域名或IP地址。如果要创建本地站点，则此处可空白。（3） 在弹出的对话框中询问是否使用服务器技术，由于创建的是静态网站，这里选择“否，我不想使用服务器技术”单选按钮。（4） 在下一步的对话框中，选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选按钮，单击“浏

4、览”按钮设置站点的本地根文件夹的位置，若根文件夹没有预先建立好，则此时新建文件夹。（5） 在下一步的对话框中，显示选择远程服务器连接方式的界面。在“您如何链接到远程服务器”下拉框中选择“无”选项。单击“下一步”按钮，出现确认信息界面。（6） 显示前面已经设置的内容，单击“完成”按钮。 4.2主页设计如图2为网站主页面，其设计过程如下： （1）移动鼠标在文件面板中选择站点根文件夹后，单击鼠标右键，从弹出的快捷菜单中选择“新建文件夹”命令。 （2）输入文件夹的名称为“33”后按回车键确认。 （3）插入一个一行一列的格，再在该表格内插入一9行4列的表格，将鼠标定位在第一行，选择“插入”菜单中的“图像

5、”命令，在弹出的“选择图像源文件”对话框中，在“查找范围”处找到33文件夹下的“无标题”图像，单击“确定”即可。 （4）在该表格中的第三行，选中两个单元格，并单击“合并单元格”命令，则此行变成3列。将单元格属性设置为“右对齐”并依次输入“首页，与我联系，作者排行”。 并将字号设置为：16，字体颜色设置为：#33CC66。 （5）在第五行输入首页的主干内容，包括“情感故事、励志文章、生活随笔和经典文章”，字号设置为：14，并加粗。字体颜色为：#0099CC。再将它们相应的文章题目输入到列中，输入完成后，再将友情链接输入到第八行中，在第九行中输入相应的链接名称即可。 （6）将第四行和第七行空着，这

6、样使整个页面看上去更加美观。 （7）将首页设为模板。其步骤为：在首页中选择“文件”菜单下的“另存为模板”命令，在弹出的“另存为模板”对话框中输入模板的名字，默认的是“首页”。 （8）之后将表格的第五行和第六行选中，选择工具栏上的“模板：可编辑区域”按钮即可。 （9）选择文件菜单下的“保存”命令，页面如图2所示。 （10）选中“情感故事”四个字，在下方的属性面板的链接中，单击后面的浏览文件按钮，找到qg.html,单击确定即可。励志文章、生活随笔及经典文章都用同样的方法设计。图2 网站主页4.3“情感故事”页面设计如图3为网站“情感故事”类的页面，其设计过程如下： （1）单击“资源面板”，选中“

7、首页”模板，鼠标右键，在弹出的快捷菜单中选择“从模板新建”命令。 （2）在新的页面中将可编辑区域删除，在表格的第二列输入：情感故事，并将标题设置为“情感”。在下一行输入文章的题目。 （3）将“情感故事”这四个字的字号设置为24，颜色设置为#。 （4）在“情感故事”的下一行输入文章的题目，并将故事题目的字体设置为宋体，字号设置为18,字体加粗，颜色设置为#0099CC。 （5）将每一个文章的题目都加上超级连接，找到相对应的网页文件，将地址添加到超级连接栏中即可。 （6）在下一行输入“返回”，并在属性面板中设置其水平对齐方式为“右对齐”，并拖动鼠标选中“返回”字样，在属性面板中的连接栏单击浏览文件

8、按钮，找到首页，选中，单击“确定”即可。 （7）单击“文件”菜单下的“保存”命令，将文件名设置为：qg。页面如图3所示。图3 网站“情感故事”页面4.4“励志文章”页面设计 （1）单击“资源面板”，选中“首页”模板，鼠标右键，在弹出的快捷菜单中选择“从模板新建”命令。 （2）在新的页面中将页面中的可编辑区域删除，在表格的第二列输入：励志文章，并将标题设置为“励志”。在下一行输入文章的题目，即：励志文章。 （3）将“励志文章”这四个字的字号设置为24，颜色设置为#。 （4）在“励志文章”的下一行输入文章的题目，并将故事题目的字体设置为宋体，字号设置为18,字体加粗，颜色设置为#0099CC。 （

9、5）将每一个文章的题目都加上超级连接，找到相对应的网页文件，将地址添加到超级连接栏中即可。 （6）在下一行输入“返回”，并在属性面板中设置其水平对齐方式为“右对齐”，并拖动鼠标选中“返回”字样，在属性面板中的连接栏单击浏览文件按钮，找到首页，选中，单击“确定”即可。 （7）单击“文件”菜单下的“保存”命令，将将文件名设置为：lizhi页面如图4所示。图4 网站“励志文章”页面4.5“生活随笔”页面设计 （1）单击“资源面板”，选中“首页”模板，鼠标右键，在弹出的快捷菜单中选择“从模板新建”命令。 （2）在新的页面中将页面中的可编辑区域删除，在表格的第二列输入：生活随笔，并将标题设置为“生活”。

10、在下一行输入文章的题目，即：生活随笔。 （3）将“生活随笔”这四个字的字号设置为24，颜色设置为#。 （4）在“生活随笔”的下一行输入文章的题目，并将故事题目的字体设置为宋体，字号设置为18,字体加粗，颜色设置为#0099CC。 （5）将每一个文章的题目都加上超级连接，找到相对应的网页文件，将地址添加到超级连接栏中即可。 （6）在下一行输入“返回”，并在属性面板中设置其水平对齐方式为“右对齐”，并拖动鼠标选中“返回”字样，在属性面板中的连接栏单击浏览文件按钮，找到首页，选中，单击“确定”即可。 （7）单击“文件”菜单下的“保存”命令，将将文件名设置为：shenghuo。页面如图5所示。图5 网

11、站“生活随笔”页面4.6“经典文章”页面设计 （1）单击“资源面板”，选中“首页”模板，鼠标右键，在弹出的快捷菜单中选择“从模板新建”命令。 （2）在新的页面中将页面中的可编辑区域删除，在表格的第二列输入：经典文章，并将标题设置为“经典”。在下一行输入文章的题目，即：经典文章。 （3）将“经典文章”这四个字的字号设置为24，颜色设置为#。 （4）在“经典文章”的下一行输入文章的题目，并将故事题目的字体设置为宋体，字号设置为18,字体加粗，颜色设置为#0099CC。 （5）并将每一个文章的题目都加上超级连接，找到相对应的网页文件，并将地址添加到超级连接栏中即可。 （6）在下一行输入“返回”，并在

12、属性面板中设置其水平对齐方式为“右对齐”，并拖动鼠标选中“返回”字样，在属性面板中的连接栏单击浏览文件按钮，找到首页，选中，单击“确定”即可。 （7）单击“文件”菜单下的“保存”命令，将将文件名设置为：jd。页面如图6所示。图6 网站“经典文章”页面4.7“作者排行”页面设计 (1）单击“资源面板”，选中“首页”模板，鼠标右键，在弹出的快捷菜单中选择“从模板新建”命令。 （2）在新的页面中将可编辑区域删除，在可编辑区域的第一列和第三列分别输入：文学作家，网络作家，并在相应的输入作家名字。并在网络上找到关于该作家的个人信息，并将此信息的网址复制，返回到dreamweaver软件下，在属性面板中的

13、链接栏中将刚刚复制的地址粘贴到此处。 （3）将“文学作家，网络作家”设置为宋体，字号设置为18，颜色设置为#9933CC。并将作者的名字设置为宋体，字号设置为14，颜色设置为#0099CC。 （4）在下一行输入“作者排行榜”，将字体设置为“宋体”，字号设置为24，字体加粗，颜色设置为#。 （5）单击“文件”菜单下的“保存”命令，将文件名设置为：zuozhe。页面如图7所示。图7 网站“作者排行”页面4.8超级连接的设计4.8.1“首页”超连接的设计（1） 打开“首页”的模板文件，选中页面右上角处的“首页”两个字，并在下面的属性面板中的链接处单击“浏览文件”按钮，在弹出的“选择文件”对话框中，找

14、到“首页.html”文件,并单击“确定”按钮即可。（2） 打开“首页”的模板文件，选中页面右上角处的“与我联系”四个字，并在下面的属性面板中的链接处单击“浏览文件”按钮，在弹出的“选择文件”对话框中，找到“lianxi.html”文件,并单击“确定”按钮即可。（3） 打开“首页”的模板文件，选中页面右上角处的“作者排行”四个字，并在下面的属性面板中的链接处单击“浏览文件”按钮，在弹出的“选择文件”对话框中，找到“zuozhe.html”文件,并单击“确定”按钮即可。5.结论 该网站实现了文章阅读，文字连接，网络连接，模块的运用，css样式等。通过对“低頭淺笑 故事吧、”网站的设计，对dream

15、weaver软件及photoshop软件有了进一步的了解。6.参考文献 1康萍，王晓奇，张天雨.Visual FoxPro程序设计宾用教程习题解答与实验指导M.北京：中国经济出版社，2006.6：95-136 2苗雪兰,刘瑞新,宋会群.数据库技术及应用实验指导与习题解答M.北京:机械工业出版社,2005.3:104-128 3康萍,刘小冬.Visual FoxPro数据应用M.北京:清华大学出版社,2007.1:297-311 4求是科技.Visual FoxPro信息管理系统开发M.北京:人民邮电出版社,2005.4:135-158 5赵歆. Visual FoxPro程序设计教程M.北京：清华大学出版社，北京交通大学出版社，2005.2:355-376本人签字：王姗姗 首页生活随笔经典文章励志文章情感故事