网页制作——基础操作

《网页制作——基础操作》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计与制作课程设计目录一、引言2二、课程题目：2三、系统开发及运行环境21、硬件环境32、软件环境3四、制作本网站的设计思路3五、网站的目录结构和网站的链接结构图3六、网站建设及各页面设计的过程41、新建站点42、首页的制作63、新闻页的制作144、制作超链接15九、参考文献1515一、引言Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。随着互联网(Internet)的家喻户晓，HTML技术的不断发

2、展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点：1、难以精确达到与浏览器完全一致的显示效果。也就是说我们在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到我们真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来；2、页面原始代码的难以控制性，比如我们在所见即所得编辑器中制作一张表格也要

3、几分钟，但我们要它完全符合您要求可能需要几十分钟，甚至更多时间。而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的HTML代码都在我们的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合，则既产生干净、准确的HTML代码，又具备则见则所得的高效率、直观性，一直是网页设计师梦想。在DREAMWEAVER之前，FRONTPAGE98一直被人们认为是最好的所见即所得网页编辑器，但是它同样继承了所见即所得的种种劣性。但是这是在DREAMWEAVER之前，虽然现在还不能说DREAMWEAVER已经实现网页设计师的梦想，但DREAMWEAVE

4、R正在努力向这个梦想一步步走去。我们做的课程设计既是让我们能在制作网页的过程中逐步了解DREAMEAVER的功能，并且能掌握它。二、课程题目：牛牛动漫网三、系统开发及运行环境151、硬件环境Intel(R)Core(TM)2DouCPUT5750@2.00GHz2.00GHz,2.00GB2、软件环境MicorosoftwindowsXPProfessional版本2002ServicePack3Dreamweaver8,AdobePhotoshopCS2,可牛影响四、制作本网站的设计思路在点击进入网站主页后，可以根据想要知道的信息点击进入不同的页面。主页下有由“首页”“2010新番动漫”

5、“热门连载”“cosplay专区”组成的导航。五、网站的目录结构和网站的链接结构图（网站的目录结构图）15（网站的链接结构图）六、网站建设及各页面设计的过程首先，在“我的电脑”中的D盘建立文件夹，命名为“dongmanwang”。打开Dreamweaver8应用软件。如下图:1、新建站点15在菜单栏单击“站点”→“新建站点”，如图：跟着步骤按键，在“您将把文件储存在计算机上的什么位置？”键入“D:dongmanwang”，如图：15单击“下一步”，在“您如何链接到远程服务器？”的下拉菜单选择“无”。单击“下一步”后如图，再点击“完成”，站点就建立好了。1、首页的制作A、新建网页，单击菜

6、单栏的“文件”→“新建”，弹出“新建文档”对话框，选择“基本页”的“HTML”创建，如图：15A、定位光标在空白处，在插入栏，如图：点击“表格”，即第四个按钮，插入表格，如图：行数键入“3”，列数键入“1”，表格宽度键入“167”，边框粗细键入“1”，然后点击“确定”建立好表格。B、把光标定在第一行表格内，单击菜单栏的“插入”→“图像”，如图：15选择“image”→“niuniu”，插入本网站标志图。第二行也是如此，插入本网站名字图。A、在第三行插入时间，单击菜单栏的“插入”→“日期”，见如图：在星期格式的下拉菜单中，选择“星期四.”，日期格式选择“1974年3月7日”，然后选择“储存时

7、自动更新”的复选框。整个网站的标志栏就做好了，如图：B、在标志栏旁插入表格，属性为：151行，5列，宽145，填充0，间距0，边框0，居中对齐。在每列插入制作好的图片，最后效果如图：A、制作导航，插入表格，属性为：1行，4列，宽790，居中对齐，边框0。在每列分别键入：首页，2010新番动漫，热门连载，cosplay专区。字体属性：大小18像素，颜色“#993333”。效果如图：B、在导航下定位光标，插入水平线，单击菜单