第14章网站设计与制作综合实例-豆柴文库

第14章网站设计与制作综合实例.ppt

2024-08-17

10金币

489KB

24页

qw****27

实名认证

内容提供者

1/10

2/10

3/10

4/10

5/10

6/10

7/10

8/10

9/10

10/10

亲，该文档总共24页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

网站规划与网页设计14.1实例创意和效果展示 14.2实例说明 14.3设计过程 14.4网站测试与性能分析 14.5网站的发布本实例讲解的是一个小型诗词欣赏网站的制作过程，页面包括静态页面和动态页面，使读者将前面所学的知识有机地结合起来，并且能够在此基础上设计站点的其他功能，达到触类旁通的效果。静态页面部分主要包括主页和一些简单的链接页面，动态页面主要包括在线留言的制作。整个站点页面的主色调为绿色，给人凉爽、清新的感觉，将绿色与白色混合，能体现优雅、舒适的气氛，精美的表格线条使整个页面显得简练而整洁。在页面的顶部是站标、广告条和常用的页面功能链接。接着下面是导航部分，整个页面总共有7个导航按钮，除了“网站首页”导航按钮之外，其余的按钮分别对应这个小型站点的6个版块。如图14-1所示为网站的首页。在页面的左侧和中间是诗词欣赏的栏目区域；页面的右侧是公告区域、站内搜索区域；在页面的底部是诗词书展图片和版权信息。本实例采用的网页模型是前面章节中生成的网页模型，然后在该模型的基础上添加网页元素，细化网站内容。整个页面采用表格布局和组织内容，做到内容丰富而又有条不紊。14.2.1技术要点 1．站点的设计由于网站提供留言板，使用的是动态网站技术，因此除了建立一个本地站点之外，还要建立一个测试服务器。在本地站点中完成网页的设计，在测试服务器中测试网页的效果。 2．CSS样式的使用通过CSS样式的使用，改变文字的显示风格和表格的框线风格，使界面更加美观。 3．表格的布局通过表格的布局，使页面的内容既丰富又整齐、清晰。 4．脚本的应用通过JavaScript脚本的应用，实现公告中的滚动字幕特效；通过VBScript脚本的应用，实现在线留言程序的设计。 5．表单的制作通过表单的制作，为用户提供站内搜索诗词的捷径。 6．图像的使用在网站Logo、广告条上和新书展示区域中插入图像，使得整个页面充满动感。 7．ASP数据库编程设计留言板时，采用ASP结合数据库编程管理留言信息，使站点具有交互功能。 14.2.2准备素材在设计本站点时，需要使用的素材包括以下4种。 网站Logo使用的GIF图像、广告条使用的SWF动画。 公告字幕、诗词链接文字前边的GIF图像。 新书展示中的图书JPEG图像。 读书相册中的照片JPEG图像。14.3.1站点规划 1．在IIS中建立虚拟目录在IIS中建立的虚拟目录别名为sample，对应的本地物理文件夹为D:\web\test，如图所示。这里建立的虚拟目录所对应的物理文件夹将来就是作为测试服务器使用的，即本地站点中制作的页面最终要上传到测试服务器中进行验证。2．建立本地站点打开Dreamweaver，执行“站点”→“管理站点”命令，打开站点定义对话框，新建一个名称为poem的站点，使用的本地文件夹为D:\web\ex14，如图所示。3．建立测试服务器将分类切换到“测试服务器”类别，设置服务器模型为ASPVBScript，访问为“本地/网络”，测试服务器文件夹为D:\web\test（与IIS中物理文件夹的设置一致），HTTP地址为http://localhost/sample。在以上的设置中，一定要注意在HTTP地址中原来的http://localhost/之后添加上在IIS中设置的虚拟目录的别名sample，如图所示。单击“基本”选项卡，对话框如图所示。单击“下一步”按钮，在弹出的对话框中单击“测试URL”按钮。如果测试服务器设置正确，则弹出的对话框中将提示URL前缀测试已成功，如图所示。单击“确定”按钮，完成测试服务器的定义。4．建立主页文件和相关文件夹在文件面板中，选择已经建立好的站点，单击鼠标右键，从快捷菜单中选择“新建文件”命令，定义主页文件名为index.html 。接着在站点上单击鼠标右键，从快捷菜单中选择“新建文件夹”命令，定义图像文件使用的文件夹images和留言板栏目的文件夹guest。 14.3.2制作主页 1．CSS样式的设计（1）页面中的文字目前流行的大多数网页文字字体都是11pt大小的宋体，本页面同样采用这种字体，分别重新定义<body>、<tr>和<td>标签的CSS样式，字体为“宋体”、大小为11pt，如图所示。14.3.2制作主页 1．CSS样式的设计（2）表格边框细线的制作表格有两种用途：一种是纯粹为了布局使用的表格，其边框粗细为0；另一种是在布局的基础上显示细线风格的表格，可以使用CSS样式中的类定义细线边框，如图所示。14.3.2制作主页 2．修改页面顶部内容 3．修改页面主体内容 4．修改页面网站公告及站内搜索内容 5．制作页面底部版权内容 14.3.3制作其他静态页面 14.3.4制作留言板 1．设计概要留言板是Internet上

相关资料

第13章网站设计与制作综合实例.ppt

网站规划与网页设计13.1实例创意和效果展示13.2实例说明13.3设计过程13.4网站测试与性能分析本实例讲解的是一个小型娱乐在线网站的制作过程，页面包括静态页面和动态页面，使读者将前面所学的知识有机地结合起来，并且能够在此基础上设计站点的其他功能，达到触类旁通的效果。静态页面部分主要包括主页和一些简单的链接页面，动态页面主要包括留言板的制作。整个站点页面的色调为淡蓝色，给人凉爽、清新的感觉，将蓝色与白色混合，能体现柔顺、淡雅、浪漫的气氛，精美的表格线条使整个页面显得华丽而整洁。在页面的顶部是站标、广告

第14章网站设计与制作综合实例.ppt

第13章网站设计与制作综合实例.ppt

第9章网页网站设计与制作综合实例.ppt

网页设计与制作教程9.1实例创意和效果展示9.2实例说明9.3设计过程该实例是一个小型的娱乐资讯网站的首页，页面的色调是蓝色，给人的感觉是凉爽、清新，将蓝色与白色混合，能体现柔顺、淡雅、浪漫的气氛，精美的表格线条使整个页面显得华丽而整洁。在页面的顶部是广告条和常用的页面链接。接着下面是导航部分，整个页面总共有9个导航链接，是这个小型站点的9个版块。本页是网站的首页，因此“本站首页”的导航是展开的。在页面的左侧主要包括“聊天室”、“虚拟社区”的登录区域和友情链接区域；页面的中间主要是新闻区域和明星写真区域；

2024-08-15

1.9MB

第9章网页、网站设计与制作综合实例.ppt

2024-08-16

1.9MB