《网页设计与制作》综合实训指南.docx
- 文档编号:27574980
- 上传时间:2023-07-03
- 格式:DOCX
- 页数:12
- 大小:274.75KB
《网页设计与制作》综合实训指南.docx
《《网页设计与制作》综合实训指南.docx》由会员分享,可在线阅读,更多相关《《网页设计与制作》综合实训指南.docx(12页珍藏版)》请在冰豆网上搜索。
《网页设计与制作》综合实训指南
《网页设计与制作》综合实训指导书
网站开发的参考案例
1.1 规划网站
1.策划网站主题
我们网站是德阳嘉兴别墅设计公司.公司遵循“奉献精湛技艺、铸造温馨家园、炼就英雄团队、创建百年老店”的发展理念,坚持“客户至上、重信守约、质优价平、热忱服务”的经营宗旨,追求“简约明快、美观时尚、突出个性、实用环保”的装饰风格,以新颖时尚的设计、规范精致的施工和热情人性的服务,为业主构筑温馨、舒适、精美、典雅的家园。
2.确定网站风格
确定好站点主题后,根据该主题选择站点的风格。
所以本案例所建立的网站是别墅设计类网站。
本网站的主要特点如下:
(1)设计风格要大众化,为了提高浏览速度,尽量减少图片的使用,更多地使用表格或层实现效果。
(2)背景颜色以淡绿色为主、白色为辅,文字颜色以绿色为主、黑色和淡绿色为辅。
(3)文字内容丰富、知识性强,标题简洁明了,字体一般采用宋体,大小一般为12像素。
3.构思网站栏目结构
先在纸上绘制网站的栏目结构草图,经过反复推敲,最后确定完整的栏目和内容的层次结构。
本案例的“别墅设计网”的栏目结构如表17-1所示。
表17-1 “别墅设计网”的栏目结构
一级栏目
二级栏目
三级栏目及内容页面
首页
index.html
设计风格:
sjfg.html
wyjch_xx_xx.html
经典案例:
jdal.html
wyjq_xx_xx.html
作品展示:
zpzs.html
wytx_xx_xx.html
公司简介:
gsjj.html
wysc_xx_xx.html
为了简化对网站的浏览过程,大部分网页通过二级栏目就能浏览内容页面,首页的主菜单包括4个菜单项:
设计风格,经典案例,作品展示,公司简介。
4.规划网站目录结构和链接结构
根据网站策划确定的栏目结构,创建站点目录,一个网站的目录结构要求层次清晰、井然有序,首页、栏目页、内容页区分明确,有利于日后的修改。
“别墅设计网”的目录结构,各文件夹的所存放文件类型如表17-3所示。
表17-3 网站的目录结构及其存放的文件类型
文件夹名称
存放的文件类型
css
CSS样式文件。
flash
动画文件、视频文件。
image
图像文件、照片。
text
文字素材。
webpage_1
一级页面文件,该文件夹又有多个子文件夹,例如webpage_1_01。
webpage_2
二级页面文件,该文件夹又有多个子文件夹,例如webpage_2_01。
index.html
主页
网站的链接结构与目录结构不同,网站的目录结构指站点的文件存放结构,一般只有设计人员可以直接看到,而网站的链接结构指网站通过页面之间的联系表现的结构,浏览者浏览网站能够观察到这种结构。
本网站的链接结构采用“网状”链接结构,结构图如图17-2所示。
图17-2 “网页教学网”中的链接结构
5.主要页面布局设计
使用表格对首页与其他几个主面导航页面的布局结构草图进行设计,主页布局结构草图如图17-3所示,两种形式的导航页面布局结构草图如图17-4和图17-5所示。
由于本网站中许多页面都采用图17-5所示的布局结构,所以可以将该网页制作成模板。
图17-3 主页的布局结构草图
图17-4 利用“框架”制作的导航页面
图17-5 利用“表格、层、浮动框架”制作的导航页面
1.2 准备素材
根据网站的栏目、内容设计,链接结构设计,首页的布局结构,几个主要导航页面的布局结构,准备所需素材
1.准备文本
准备大量网页中所需的文字资料,可以从各类网站、各种书籍中搜集文字资料,然后制作成word文档或文本文件,注意各种文字资料的文件名命名要科学合理,避免日后找不到所需的文本内容。
2.准备Logo
利用Fireworks或Photoshop量身定做本网站的Logo标志,Logo标志要与本网站的主题相符,要有新意。
3.准备图片及按钮
根据需要到网上或素材光盘中搜集所需的图片和按钮、有些图片、按钮需要自己利用图像处理软件制作。
注意图片文件要尽可能小。
4.准备动画
网站中的动画最好能突出主题,起到画龙点睛之功效。
动画一般利用flash软件制作,本网站主页和导航页的标题动画就是利用flash软件量身定做。
5.建立库项目
网页中经常用到的项目,例如版权区,可以事先定义为库项目,以备制作网页时重复使用,提高工作效率。
1.3 创建网站
1.创建本地站点
在开始着手设计网页之前,首先要定义站点。
因为网页只是网站的一个组成部分,所有设计的网页和相关文件都要放置于站点之中。
定义站点的好处是:
定义站点以后的所有操作都是在站点统一监控之下进行。
如果使用了外部文件,Dreamweaver就会自动检测并予以提示和询问是否将外部文件复制到站点内,以保持站点的完整性。
如果某个文件夹或文件重新命名了,系统会自动更新所有的链接,以保证原有的链接关系的正确性。
创建站点之前,要求先建立一个文件夹,以便创建站点时为站点指定存储位置。
在Windows操作系统中,打开“资源管理器”,创建一个名为“网页教学网”的文件夹。
创建站点在第3章已有详细介绍,在此只作简要说明,与第3章中的步骤有所区别,这里假设事先已申请了主页空间,所申址的网址为:
,用户名和密码也已经知道。
定义站点的操作步骤如下:
(1)在Dreamweaver8主窗口中,单击菜单【站点】→【新建站点】,将弹出如图17-6所示站点定义对话框。
在该对话框中先输入站点的名称,然后输入网址,如图17-6所示。
接着单击【下一步】按钮,进入到下一步操作。
(2)选择“否,我不想使用服务器技术”单选按钮,然后单击【下一步】按钮,进入到下一步操作。
(3)选择“编辑我的计算机上的本地副本,完成后再上传到服务器(推荐)”单选按钮,接着在下面的文本框中输入站点文件在本地计算机上的存放位置,也可以选择存储位置,然后单击【下一步】按钮,进入到下一步操作。
(4)选择连接到远程服务器的方式为“FTP”,然后分别输入Web服务器的主机名、在服务器上文件的存储位置、FTP用户名、FTP密码等参数,如图17-7所示。
然后单击【下一步】按钮。
(5)选择“否,不启用存回和取出”单选按钮,如图17-8所示。
接着单击【下一步】按钮,此时会显示所定义的站点信息。
如果发现有误可以单击【上一步】按钮,返回到上一步操作的对话框中重新修改。
如果站点定义信息符合要求,可以单击【完成】按钮,完成站点的定义。
此时会自动显示“文件”面板,并且会自动切换到新创建的网站。
图17-6 输入站点名称及网址
图17-7 设置连接远程服务器的参数
2.网站目录结构的搭建
创建站点后,在“文件”面板中切换到新创建的站点,然后利用快捷菜单创建文件夹及子文件夹,本网站的目录结构如图17-9所示。
图17-8 选择是否启用存回和取出
图17-9 “网页教学网站”的目录结构
1.8 查看与设置站点地图
站点地图使用直观的树状结构显示网站中文件的链接关系,在站点视图中可以将文件加入到站点中,或者加入、修改、删除链接。
1.查看站点地图
在“文件”面板中,单击视图列表中的“地图视图”,如图17-27所示,这时,在文件列表中将以站点地图的方式显示网站的文件,展现出站点中文件之间的链接关系。
单击【展开以显示本地和远端站点】按钮
,将把以地图视图显示的“文件”面板展开,如图17-28所示。
在图17-28中单击工具栏的【站点地图】按钮
,从其下拉菜单中选择“地图和文件”,如图17-29所示,也可以选择“仅地图”。
在站点地图视图中,首页文档index.html显示在最上方,在index.html文件名下方的页面都是由首页所链向的页面。
在站点地图视图中,不仅能显示出内部链接,还能显示出外部链接、电子邮件链接、外部样式文件、图像文件等。
图17-27 选择“地图视图”
图17-28 站点文件以“地图”形式显示
2.站点地图中的操作
(1)隐藏文件
在站点地图中选定一个或几个要隐藏的文件,然后单击鼠标右键,在弹出的快捷菜单单击【显示/隐藏】命令,被选中的文件就会在站点地图中消失。
图17-29 “站点地图”下拉菜单
※注意※
如果菜单【查看】→【站点地图选项】中的级联菜单项【显示标记为隐藏的文件】已经被选中,则设置隐藏文件时,文件就不会从站点地图中消失了。
(2)显示文件
如果要显示隐藏的文件,可以单击菜单【查看】→【站点地图选项】→【显示标记为隐藏的文件】。
在站点地图可进行的操作较多,例如可以完成“链接到新文件”、“链接到已有文件”、“改变链接”、“移除链接”、“打开链接源”、“显示网页标题”等操作。
3.保存站点地图
站点地图可以作为图形文件保存,操作很简单,单击菜单【文件】→【保存站点地图】,在弹出的“保存站点地图”对话框,输入文件名,单击【保存】按钮即可。
如图17-30所示即为所保存的站点地图。
图17-30 所保存的站点地图
1.9 测试网站
一个网站包含很多链接,可能会出现链接错误或断链现象,在发布站点前有必要检查整个站点的链接,以避免站点发布之后出现无效链接情形。
利用Dreamweaver8提供的“检查链接”可以检查网站中存在断链、孤立文件等。
链接检查无误后,可以在浏览器中浏览各个网页,检查文字、图片、链接是否有误、是否会出现乱码,,网页元素定位是否准确,浏览速度和视觉效果是否满意。
经过测试、修改、再测试、再修改,反复多次循环,直到各方面都合格方可发布网站。
1.10 发布网站
发布网站就是把网页文件上传到Web服务器,发布网站之前先必须申请一个主页空间,拥有网页空间的访问域名、FTP用户名和密码。
如果主页空间已成功申请,可以先与远程Web服务器进行连接,连接成功后,再通过单击“文件”面板上的【上传文件】按钮,往远程Web服务器中上传本地站点,上传成功后,就可以在浏览器中输入正确的网址访问网站了。
分工:
艾燕萍负责首页index.html,子页gsjj.html,收集素材,报告书书写
张娟负责子页shejifg.html,收集素材,报告书书写
谢明吉负责子页jdal.html,收集素材,报告书书写
子页zpzs.html由张娟和谢明吉合伙完成.
素材是大家一起收集,然后筛选出好的,报告书是大家一起讨论着写的,总之,差不多每项每个人都有参与,只是专攻方向不同。
遇到的问题有:
(1)首页HEAD图太大,无法调小,HEAD层无法正确插入FLASH,不知道要怎么样调整。
(2)用有些浏览器预览要错位,不能确定是浏览器的问题还是自己代码没有处理好,因为在有些机子上就有正常显示。
(3)鼠标经过图像出现过三张图片,不知道是什么原因,明明插入的是两张图片,不明白。
(4)素材找得不是很合心,特别是FLASH,处理的不好,
(5)导航出现过错位,隐藏,但是,在我们的修改下,现在做好了一个完美的导航。
不过,还是有点宽。
因为导航都是以图片插入,无法调整其大小。
、\
解决问题方法:
(1)网上大量收集素材,然后从中筛选出合适的图片满意的图片来做网页
(2)不懂的大家讨论合伙解决问题,大家的力量是强大的.
九组艾燕萍张娟谢明吉
软件07-1精品文档,欢迎下载使用!
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页设计与制作 网页 设计 制作 综合 指南